Collapsable and redesigned state inspector

src/devtools/components/DataField.vue

@@ -1,16 +1,19 @@
 <template>
  <div class="data-field">
- <div class="self"
+ <div
+ class="self"
+ :style="{ marginLeft: depth * 14 + 'px' }"
  @click="toggle"
-  :style="{ marginLeft: depth * 14 + 'px' }">
+ >
  <span
+ v-show="isExpandableType"
  class="arrow right"
  :class="{ rotated: expanded }"
-  v-show="isExpandableType">
+ >
  </span>
  <span class="key">{{ field.key }}</span>
- <span class="colon">:<div class="meta" v-if="field.meta">
- <div class="meta-field" v-for="(val, key) in field.meta">
+ <span class="colon">:<div v-if="field.meta" class="meta">
+ <div v-for="(val, key) in field.meta" class="meta-field">
  <span class="key">{{ key }}</span>
  <span class="value">{{ val }}</span>
  </div>

src/devtools/components/StateInspector.vue

@@ -1,19 +1,33 @@
 <template>
  <div class="data-wrapper">
- <div v-for="type in getKeys(state)" :class="['data-el', toDisplayType(type, true)]">
- <div class="data-type">{{ toDisplayType(type) }}</div>
- <div class="data-fields">
- <template v-if="Array.isArray(state[type])">
+ <div
+ v-for="dataType in dataTypes"
+ :class="['data-el', toDisplayType(dataType, true)]"
+ >
+ <div
+ class="data-type selectable-item"
+ title="Ctrl+Click: Collapse All
+Shift+Click: Expand All"
+ @click="toggle(dataType, $event)"
+ >
+ <span
+ class="arrow right"
+ :class="{ rotated: isExpanded(dataType) }"
+ ></span>
+ <span class="key">{{ toDisplayType(dataType) }}</span>
+ </div>
+ <div v-show="isExpanded(dataType)" class="data-fields">
+ <template v-if="Array.isArray(state[dataType])">
  <data-field
- v-for="field in state[type]"
+ v-for="field in state[dataType]"
  :key="field.key"
  :field="field"
  :depth="0">
  </data-field>
  </template>
  <template v-else>
  <data-field
- v-for="(value, key) in state[type]"
+ v-for="(value, key) in state[dataType]"
  :key="key"
  :field="{ value, key }"
  :depth="0">
@@ -25,6 +39,7 @@
 </template>
 
 <script>
+import Vue from 'vue'
 import DataField from './DataField.vue'
 
 const keyOrder = {
@@ -36,49 +51,93 @@ const keyOrder = {
 }
 
 export default {
- props: ['state'],
  components: {
  DataField
  },
- methods: {
- getKeys (state) {
- return Object.keys(state).sort((a, b) => {
+ props: {
+ state: {
+ type: Object,
+ required: true
+ }
+ },
+ data () {
+ return {
+ expandedState: {}
+ }
+ },
+ computed: {
+ dataTypes () {
+ return Object.keys(this.state).sort((a, b) => {
  return (
  (keyOrder[a] || (a.charCodeAt(0) + 999)) -
  (keyOrder[b] || (b.charCodeAt(0) + 999))
  )
  })
- },
- toDisplayType (type, asClass) {
- return type === 'undefined'
+ }
+ },
+ methods: {
+ toDisplayType (dataType, asClass) {
+ return dataType === 'undefined'
  ? 'data'
  : asClass
- ? type.replace(/\s/g, '-')
- : type
+ ? dataType.replace(/\s/g, '-')
+ : dataType
+ },
+ isExpanded (dataType) {
+ const value = this.expandedState[dataType]
+ return typeof value === 'undefined' || value
+ },
+ toggle (dataType, event = null) {
+ if (event) {
+ if (event.ctrlKey) {
+ return this.setExpandToAll(false)
+ } else if (event.shiftKey) {
+ return this.setExpandToAll(true)
+ }
+ }
+ Vue.set(this.expandedState, dataType, !this.isExpanded(dataType))
+ },
+ setExpandToAll (value) {
+ this.dataTypes.forEach(key => {
+ Vue.set(this.expandedState, key, value)
+ })
  }
  }
 }
 </script>
 
 <style lang="stylus">
-.data-wrapper
- display flex
- flex-wrap wrap
- padding-top 20px
-
-.data-fields
- padding 20px 20px 40px
+@import "../variables"
 
 .data-el
- padding 0px 10px
- flex 1 0 33.33%
  font-size 14px
 
+ &:not(:last-child)
+ border-bottom rgba($grey, .4) solid 1px
+
+ .app.dark &
+ box-shadow none
+
+ .data-type,
+ .data-fields
+ margin 5px
+ padding 2px 9px 2px 21px
+
  .data-type
- color #486887
- padding-left 20px
- margin-bottom -10px
+ color $green
+ position relative
+ cursor pointer
+ border-radius 3px
+
+ .arrow
+ position absolute
+ top 9px
+ left 7px
+ transition transform .1s ease
+ &.rotated
+ transform rotate(90deg)
+
+ .data-fields
+ padding-top 0
 
- .app.dark &
- color lighten(#486887, 30%)
 </style>

src/devtools/global.styl

@@ -88,3 +88,30 @@ $arrow-color = #444
  text-align center
  padding 0.5em
  margin 0 auto
+
+.selectable-item
+ background-color $background-color
+ &:hover
+ background-color $hover-color
+ &.selected,
+ &.active
+ background-color $active-color
+ color #fff
+ .arrow
+ border-left-color #fff
+ .item-name
+ color #fff
+
+ .app.dark &
+ background-color $dark-background-color
+ &:hover
+ background-color $dark-hover-color
+ .arrow
+ border-left-color #666
+ &.selected,
+ &.active
+ background-color $active-color
+
+.list-item
+ color #881391
+ @extends .selectable-item

src/devtools/variables.styl

@@ -17,8 +17,10 @@ $active-color = $darkerGreen
 $border-color = $grey
 $background-color = $white
 $component-color = $active-color
+$hover-color = #E5F2FF
 
 $dark-active-color = $active-color
 $dark-border-color = lighten($slate, 10%)
 $dark-background-color = $slate
 $dark-component-color = $active-color
+$dark-hover-color = #444

src/devtools/views/components/ComponentInstance.vue

@@ -4,7 +4,7 @@
  inactive: instance.inactive,
  selected: selected
  }">
- <div class="self"
+ <div class="self selectable-item"
  @click.stop="select"
  @dblclick.stop="toggle"
  @mouseenter="enter"
@@ -19,7 +19,7 @@
  <span class="arrow right" :class="{ rotated: expanded }">
  </span>
  </span>
- <span class="angle-bracket">&lt;</span><span class="instance-name">{{ instance.name }}</span><span class="angle-bracket">&gt;</span>
+ <span class="angle-bracket">&lt;</span><span class="item-name">{{ instance.name }}</span><span class="angle-bracket">&gt;</span>
  </span>
  <span class="info console" v-if="instance.consoleId === '$vm0'">
  == {{ instance.consoleId }}
@@ -116,7 +116,6 @@ export default {
  position relative
  overflow hidden
  z-index 2
- background-color $background-color
  transition background-color .1s ease
  border-radius 3px
  font-size 14px
@@ -125,20 +124,6 @@ export default {
  white-space nowrap
  &:hidden
  display none
- &:hover
- background-color #E5F2FF
- &.selected
- background-color $active-color
- .arrow
- border-left-color #fff
- .instance-name
- color #fff
- .app.dark &
- background-color $dark-background-color
- &:hover
- background-color #444
- &.selected
- background-color $active-color
 
 .children
  position relative
@@ -188,7 +173,7 @@ export default {
 .angle-bracket
  color #ccc
 
-.instance-name
+.item-name
  color $component-color
  margin 0 1px
  transition color .1s ease

src/devtools/views/events/EventsHistory.vue

@@ -18,7 +18,7 @@
  <div v-if="filteredEvents.length === 0" class="no-events">
  No events found<span v-if="!enabled"><br>(Recording is paused)</span>
  </div>
- <div class="entry"
+ <div class="entry list-item"
  v-else
  v-for="event in filteredEvents"
  :class="{ active: inspectedIndex === events.indexOf(event) }"
@@ -91,11 +91,9 @@ export default {
 .entry
  position relative;
  font-family Menlo, Consolas, monospace
- color #881391
  cursor pointer
  padding 10px 20px
  font-size 12px
- background-color $background-color
  box-shadow 0 1px 5px rgba(0,0,0,.12)
  .event-name
  font-weight 600
@@ -107,21 +105,15 @@ export default {
  color #999
  margin-left 8px
  &.active
- color #fff
- background-color $active-color
  .time, .event-type, .component-name
  color lighten($active-color, 75%)
  .event-name
  color: #fff
  .event-source
  color #ddd
- .app.dark &
- color #e36eec
- background-color $dark-background-color
 
 .time
  font-size 11px
  color #999
  float right
- margin-top 3px
 </style>

src/devtools/views/vuex/VuexHistory.vue

@@ -19,7 +19,7 @@
  </a>
  </action-header>
  <div slot="scroll" class="history">
- <div class="entry" :class="{ active: activeIndex === -1, inspected: inspectedIndex === -1 }" @click="inspect(null)">
+ <div class="entry list-item" :class="{ active: activeIndex === -1, inspected: inspectedIndex === -1 }" @click="inspect(null)">
  <span class="mutation-type">Base State</span>
  <span class="entry-actions">
  <a class="action"
@@ -34,7 +34,7 @@
  <span class="label active" v-if="activeIndex === -1">active</span>
  <span class="label inspected" v-if="inspectedIndex === -1">inspected</span>
  </div>
- <div class="entry"
+ <div class="entry list-item"
  v-for="entry in filteredHistory"
  :class="{ inspected: isInspected(entry), active: isActive(entry) }"
  @click="inspect(entry)">
@@ -141,16 +141,12 @@ $inspected_color = #af90d5
 
 .entry
  font-family Menlo, Consolas, monospace
- color #881391
  cursor pointer
- padding 10px 20px
+ padding 7px 20px
  font-size 12px
- background-color $background-color
  box-shadow 0 1px 5px rgba(0,0,0,.12)
- height 40px
+ height 34px
  &.active
- color #fff
- background-color $active-color
  .time
  color lighten($active-color, 75%)
  .action
@@ -180,11 +176,9 @@ $inspected_color = #af90d5
  .entry-actions
  display inline-block
  .app.dark &
- background-color $dark-background-color
  .mutation-type
  color #e36eec
  &.active
- background-color $active-color
  .mutation-type
  color #fff