refactor(vuex): improved recording/loading UX, closes vuejs#941, closes vuejs#952

Author: Guillaume Chau

shells/dev/target/Counter.vue

@@ -20,6 +20,14 @@
       Do a lot of mutations
     </button>
 
+    <button @click="startMutationStream()">
+      Start mutation stream
+    </button>
+
+    <button @click="stopMutationStream()">
+      Stop mutation stream
+    </button>
+
     <p>Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}</p>
 
     <h3>Vuex Module</h3>
@@ -176,6 +184,14 @@ export default {
       }
     },
 
+    startMutationStream () {
+      this.$_mutationTimer = setInterval(this.increment, 1000)
+    },
+
+    stopMutationStream () {
+      clearInterval(this.$_mutationTimer)
+    },
+
     ...mapMutations('nested', {
       addBar: 'ADD_BAR',
       removeBar: 'REMOVE_BAR'

src/devtools/components/ScrollPane.vue

@@ -9,6 +9,12 @@
     >
       <slot name="scroll" />
     </div>
+    <div
+      v-if="$slots.footer"
+      class="footer"
+    >
+      <slot name="footer" />
+    </div>
   </div>
 </template>
 
@@ -48,4 +54,9 @@ export default {
     height 0
     &-thumb
       background $active-color
+
+.footer
+  border-top 1px solid $border-color
+  .vue-ui-dark-mode &
+    border-top-color $dark-border-color
 </style>

src/devtools/components/StateInspector.vue

@@ -1,13 +1,14 @@
 <template>
   <div class="data-wrapper">
     <div
-      v-for="dataType in dataTypes"
+      v-for="(dataType, index) in dataTypes"
       :key="dataType"
       :class="[
         'data-el',
         toDisplayType(dataType, true),
         {
-          'high-density': highDensity
+          'high-density': highDensity,
+          dim: dimAfter !== -1 && index >= dimAfter
         }
       ]"
     >
@@ -80,6 +81,11 @@ export default {
     state: {
       type: Object,
       required: true
+    },
+
+    dimAfter: {
+      type: Number,
+      default: -1
     }
   },
 
@@ -159,6 +165,12 @@ export default {
 .data-el
   font-size 15px
 
+  &.dim
+    opacity .7
+    pointer-events none
+    user-select none
+    filter grayscale(50%)
+
   &:not(:last-child)
     border-bottom rgba($grey, .4) solid 1px
 

src/devtools/views/vuex/VuexStateInspector.vue

@@ -54,39 +54,53 @@
     <div
       slot="scroll"
       class="vuex-state-inspector"
+      :class="{
+        pointer: isOnlyMutationPayload
+      }"
+      @click="isOnlyMutationPayload && loadState()"
     >
-      <state-inspector :state="filteredState" />
-
-      <div
-        v-if="$shared.snapshotLoading"
-        class="state-info loading-vuex-state"
-      >
-        <div class="label">
-          Loading state...
-        </div>
+      <state-inspector
+        :state="filteredState"
+        :dim-after="isOnlyMutationPayload ? 1 : -1"
+      />
+    </div>
+    <div
+      v-if="$shared.snapshotLoading"
+      slot="footer"
+      class="state-info loading-vuex-state"
+    >
+      <div class="label">
+        Loading state...
+      </div>
 
-        <VueLoadingIndicator />
+      <VueLoadingIndicator />
+    </div>
+    <div
+      v-else-if="isOnlyMutationPayload"
+      slot="footer"
+      class="state-info recording-vuex-state"
+    >
+      <div class="label">
+        <VueIcon
+          class="medium"
+          icon="cached"
+        />
+        <span>Recording state on-demand...</span>
+        <span
+          v-if="lastReceivedState"
+          class="note"
+        >displaying last received state</span>
       </div>
-      <div
-        v-else-if="isOnlyMutationPayload"
-        class="state-info recording-vuex-state"
-      >
-        <div class="label">
-          <VueIcon
-            class="medium"
-            icon="cached"
-          />
-          <span>Recording state...</span>
-        </div>
 
-        <div>
-          <VueButton
-            data-id="load-vuex-state"
-            @click="loadState()"
-          >
-            Load state
-          </VueButton>
-        </div>
+      <div>
+        <VueButton
+          data-id="load-vuex-state"
+          icon-left="arrow_forward"
+          class="accent flat"
+          @click="loadState()"
+        >
+          Load state
+        </VueButton>
       </div>
     </div>
   </scroll-pane>
@@ -130,7 +144,8 @@ export default {
   computed: {
     ...mapState('vuex', [
       'activeIndex',
-      'inspectedIndex'
+      'inspectedIndex',
+      'lastReceivedState'
     ]),
 
     ...mapGetters('vuex', [
@@ -140,22 +155,27 @@ export default {
     ]),
 
     filteredState () {
+      const inspectedState = this.isOnlyMutationPayload ? {
+        mutation: this.inspectedState.mutation,
+        ...this.lastReceivedState
+      } : this.inspectedState
+
       const getProcessedState = (state, type) => {
         if (!Array.isArray(state)) {
           return Object.keys(state).map(key => ({
             key,
-            editable: type === 'state',
+            editable: !this.isOnlyMutationPayload && type === 'state',
             value: state[key]
           }))
         } else {
           return state
         }
       }
 
-      const inspectedState = [].concat(
-        ...Object.keys(this.inspectedState).map(
+      const result = [].concat(
+        ...Object.keys(inspectedState).map(
           type => {
-            const state = this.inspectedState[type]
+            const state = inspectedState[type]
             let processedState
 
             if (type === 'mutation' && this.inspectedEntry) {
@@ -180,7 +200,7 @@ export default {
         )
       )
 
-      return groupBy(sortByKey(inspectedState.filter(
+      return groupBy(sortByKey(result.filter(
         el => searchDeepInObject({
           [el.key]: el.value
         }, this.filter)
@@ -278,7 +298,7 @@ export default {
       if (this.$shared.vuexAutoload) {
         this.loadState()
       }
-    }, 800),
+    }, 300),
 
     onVuexInit () {
       if (this.$shared.vuexAutoload) {
@@ -301,23 +321,32 @@ function copyToClipboard (state) {
 <style lang="stylus" scoped>
 .state-info
   display flex
-  flex-direction column
-  box-center()
-  min-height 140px
-  font-size 16px
-  margin 0 42px
+  align-items center
+  padding 2px 2px 2px 14px
+  min-height 36px
+  font-size 14px
 
   .label
+    flex 1
     display flex
     align-items center
     color $blueishGrey
-    margin-bottom 12px
 
     .vue-ui-icon
-      margin-right 12px
+      margin-right 8px
       >>> svg
         fill @color
 
+  .note
+    opacity .7
+    margin-left 4px
+
+.loading-vuex-state
+  padding-right 14px
+
+.pointer
+  cursor pointer
+
 .message
   margin-left 5px
   transition all .3s ease