Toggle component tree recursively with alt key pressed

src/devtools/views/components/ComponentInstance.vue

@@ -14,7 +14,7 @@
         <!-- arrow wrapper for better hit box -->
         <span class="arrow-wrapper"
           v-if="instance.children.length"
-          @click.stop="toggle()">
+          @click.stop="toggle">
           <span class="arrow right" :class="{ rotated: expanded }">
           </span>
         </span>
@@ -71,19 +71,20 @@ export default {
     }
   },
   methods: {
-    toggle () {
-      this.toggleWithValue(!this.expanded)
+    toggle (event) {
+      this.toggleWithValue(!this.expanded, event.altKey)
     },
     expand () {
       this.toggleWithValue(true)
     },
     collapse () {
       this.toggleWithValue(false)
     },
-    toggleWithValue (val) {
-      this.$store.commit('components/TOGGLE_INSTANCE', {
-        id: this.instance.id,
-        expanded: val
+    toggleWithValue (val, recursive = false) {
+      this.$store.dispatch('components/toggleInstance', {
+        instance: this.instance,
+        expanded: val,
+        recursive
       })
     },
     select () {

src/devtools/views/components/module.js

@@ -30,8 +30,25 @@ const mutations = {
   }
 }
 
+const actions = {
+  toggleInstance ({commit, dispatch}, {instance, expanded, recursive}) {
+    commit('TOGGLE_INSTANCE', {id: instance.id, expanded})
+
+    if (recursive) {
+      instance.children.forEach((child) => {
+        dispatch('toggleInstance', {
+          instance: child,
+          expanded,
+          recursive
+        })
+      })
+    }
+  }
+}
+
 export default {
   namespaced: true,
   state,
-  mutations
+  mutations,
+  actions
 }