feat: Make Collapse/Expand All affects child elements (#715)

* make Collapse All and Expand All affect child elements

* ignore yarn-error.log

* fix: put a depth limit on expand all

* fix: reset forceCollapse when changing target

* fix: user select none on data type

.gitignore

@@ -8,3 +8,4 @@ selenium-debug.log
 TODOs.md
 .idea
 .web-extension-id
+yarn-error.log

src/devtools/components/DataField.vue

@@ -181,6 +181,7 @@
         :editable="isEditable"
         :removable="isSubfieldsEditable"
         :renamable="editable && valueType === 'plain-object'"
+        :force-collapse="forceCollapse"
       />
       <span
         v-if="formattedSubFields.length > limit"
@@ -197,6 +198,7 @@
         :depth="depth + 1"
         :path="`${path}.${newField.key}`"
         :renamable="valueType === 'plain-object'"
+        :force-collapse="forceCollapse"
         editable
         removable
         @cancel-edit="addingValue = false"
@@ -255,6 +257,10 @@ export default {
     path: {
       type: String,
       required: true
+    },
+    forceCollapse: {
+      type: String,
+      default: null
     }
   },
 
@@ -431,6 +437,19 @@ export default {
     }
   },
 
+  watch: {
+    forceCollapse: {
+      handler (value) {
+        if (value === 'expand' && this.depth < 4) {
+          this.expanded = true
+        } else if (value === 'collapse') {
+          this.expanded = false
+        }
+      },
+      immediate: true
+    }
+  },
+
   methods: {
     copyToClipboard () {
       copyToClipboard(this.field.value)

src/devtools/components/StateInspector.vue

@@ -34,6 +34,7 @@
             :depth="0"
             :path="field.key"
             :editable="field.editable"
+            :force-collapse="forceCollapse"
           />
         </template>
         <template v-else>
@@ -77,7 +78,8 @@ export default {
 
   data () {
     return {
-      expandedState: {}
+      expandedState: {},
+      forceCollapse: null
     }
   },
 
@@ -101,6 +103,12 @@ export default {
     }
   },
 
+  watch: {
+    state () {
+      this.forceCollapse = null
+    }
+  },
+
   methods: {
     toDisplayType (dataType, asClass) {
       return dataType === 'undefined'
@@ -128,6 +136,7 @@ export default {
 
     setExpandToAll (value) {
       this.dataTypes.forEach(key => {
+        this.forceCollapse = value ? 'expand' : 'collapse'
         Vue.set(this.expandedState, key, value)
       })
     }
@@ -164,6 +173,7 @@ export default {
     display flex
     align-items baseline
     padding-left 9px
+    user-select none
 
     .vue-ui-dark-mode &
       color lighten(#486887, 30%)