feat: High-density mode (vuejs#543)

* Initial prototype

* feat: display density pref

* fix: component attr font size in high density

* feat: high-density events

* feat: vuex high density mode

* feat: state inspector high density

* refactor: persisted shared data

* fix: remove media query style from datafield

* fix: duplicate import

src/devtools/components/DataField.vue

@@ -490,6 +490,9 @@ export default {
   position relative
   white-space nowrap
   padding-left 14px
+  .high-density &
+    height 14px
+    line-height 14px
   span, div
     display inline-block
     vertical-align middle

src/devtools/components/StateInspector.vue

@@ -3,7 +3,13 @@
     <div
       v-for="dataType in dataTypes"
       :key="dataType"
-      :class="['data-el', toDisplayType(dataType, true)]"
+      :class="[
+        'data-el',
+        toDisplayType(dataType, true),
+        {
+          'high-density': highDensity
+        }
+      ]"
     >
       <div
         v-tooltip="$t('StateInspector.dataType.tooltip')"
@@ -83,6 +89,15 @@ export default {
           (keyOrder[b] || (b.charCodeAt(0) + 999))
         )
       })
+    },
+
+    totalCount () {
+      return Object.keys(this.state).reduce((total, state) => total + state.length, 0)
+    },
+
+    highDensity () {
+      const pref = this.$shared.displayDensity
+      return (pref === 'auto' && this.totalCount > 12) || pref === 'high'
     }
   },
 
@@ -139,6 +154,9 @@ export default {
   .data-fields
     margin 5px
     padding 2px 9px 2px 21px
+    @media (max-height: $tall)
+      margin 0
+      padding 0 9px 0 21px
 
   .data-type
     color $blueishGrey
@@ -161,5 +179,7 @@ export default {
 
   .data-fields
     padding-top 0
+    @media (max-height: $tall)
+      margin-bottom 4px
 
 </style>

src/devtools/index.js

@@ -94,11 +94,7 @@ function initApp (shell) {
     initSharedData({
       bridge,
       Vue,
-      storage,
-      persist: [
-        'classifyComponents',
-        'theme'
-      ]
+      storage
     })
 
     bridge.once('ready', version => {

src/devtools/plugins.js

@@ -46,3 +46,5 @@ Vue.use(GlobalRefs, {
     rightScroll: () => document.querySelector('.right .scroll')
   }
 })
+
+Vue.use(Responsive)

src/devtools/views/components/ComponentInstance.vue

@@ -205,7 +205,11 @@ export default {
 @import "../../variables"
 
 .instance
-  font-family Menlo, Consolas, monospace
+  font-family dejavu sans mono, monospace
+  .platform-mac &
+    font-family Menlo, monospace
+  .platform-windows &
+    font-family Consolas, Lucida Console, Courier New, monospace
   &.inactive
     opacity .5
 
@@ -226,6 +230,10 @@ export default {
   &:hidden
     display none
 
+  .high-density &
+    font-size 12px
+    height 15px
+
 .children
   position relative
   z-index 1
@@ -243,6 +251,9 @@ export default {
   border-radius 3px
   position relative
   top -1px
+  .high-density &
+    padding 1px 4px 0
+    top 0
   &.console
     color #fff
     background-color transparent
@@ -282,6 +293,8 @@ export default {
 .attr
   opacity .5
   font-size 12px
+  .high-density &
+    font-size 10px
 
 .attr-title
   color purple

src/devtools/views/components/ComponentTree.vue

@@ -25,6 +25,9 @@
     <div
       slot="scroll"
       class="tree"
+      :class="{
+        'high-density': finalHighDensity
+      }"
     >
       <component-instance
         v-for="instance in instances"
@@ -38,6 +41,7 @@
 </template>
 
 <script>
+import { mapGetters, mapState } from 'vuex'
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import ComponentInstance from './ComponentInstance.vue'
@@ -121,10 +125,38 @@ export default {
 
   data () {
     return {
-      selecting: false
+      selecting: false,
+      highDensity: false
     }
   },
 
+  computed: {
+    ...mapState('components', [
+      'expansionMap'
+    ]),
+
+    ...mapGetters('components', [
+      'totalCount'
+    ]),
+
+    finalHighDensity () {
+      if (this.$shared.displayDensity === 'auto') {
+        return this.highDensity
+      }
+      return this.$shared.displayDensity === 'high'
+    }
+  },
+
+  watch: {
+    expansionMap: {
+      handler: 'updateAutoDensity',
+      deep: true,
+      immediate: true
+    },
+    totalCount: 'updateAutoDensity',
+    '$responsive.height': 'updateAutoDensity'
+  },
+
   mounted () {
     bridge.on('instance-selected', () => {
       this.setSelecting(false)
@@ -150,6 +182,17 @@ export default {
           bridge.send('stop-component-selector')
         }
       }
+    },
+    updateAutoDensity () {
+      if (this.$shared.displayDensity === 'auto') {
+        this.$nextTick(() => {
+          const totalHeight = this.$isChrome ? this.$responsive.height : this.$root.$el.offsetHeight
+          const count = this.$el.querySelectorAll('.instance').length
+          const treeHeight = 22 * count
+          const scrollHeight = totalHeight - (totalHeight <= 350 ? 76 : 111)
+          this.highDensity = treeHeight >= scrollHeight
+        })
+      }
     }
   }
 }

src/devtools/views/components/module.js

@@ -10,6 +10,10 @@ const state = {
   scrollToExpanded: null
 }
 
+const getters = {
+  totalCount: state => Object.keys(state.instancesMap).length
+}
+
 const mutations = {
   FLUSH (state, payload) {
     let start
@@ -90,6 +94,7 @@ const actions = {
 export default {
   namespaced: true,
   state,
+  getters,
   mutations,
   actions
 }

src/devtools/views/events/EventsHistory.vue

@@ -40,6 +40,9 @@
     <div
       slot="scroll"
       class="history"
+      :class="{
+        'high-density': highDensity
+      }"
     >
       <div
         v-if="filteredEvents.length === 0"
@@ -145,6 +148,11 @@ export default {
         this.$store.commit('events/UPDATE_FILTER', filter)
         this.$store.commit('events/INSPECT', -1)
       }
+    },
+
+    highDensity () {
+      const pref = this.$shared.displayDensity
+      return (pref === 'auto' && this.filteredEvents.length > 8) || pref === 'high'
     }
   },
 
@@ -197,6 +205,8 @@ export default {
       color: #fff
     .event-source
       color #ddd
+  .high-density &
+    padding 4px 20px
 
 .time
   font-size 11px

src/devtools/views/settings/GlobalPreferences.vue

@@ -37,6 +37,27 @@
         />
       </VueGroup>
     </VueFormField>
+
+    <VueFormField title="Display density">
+      <VueGroup
+        :value="$shared.displayDensity"
+        class="extend"
+        @input="$shared.displayDensity = $event"
+      >
+        <VueGroupButton
+          value="auto"
+          label="Auto"
+        />
+        <VueGroupButton
+          value="low"
+          label="Low"
+        />
+        <VueGroupButton
+          value="high"
+          label="High"
+        />
+      </VueGroup>
+    </VueFormField>
   </div>
 </template>
 

src/devtools/views/vuex/VuexHistory.vue

@@ -50,6 +50,9 @@
     <div
       slot="scroll"
       class="history"
+      :class="{
+        'high-density': highDensity
+      }"
     >
       <div
         ref="baseEntry"
@@ -229,6 +232,11 @@ export default {
         this.$store.dispatch('vuex/updateFilter', filter)
         this.$store.commit('vuex/INSPECT', -1)
       }
+    },
+
+    highDensity () {
+      const pref = this.$shared.displayDensity
+      return (pref === 'auto' && this.filteredHistory.length > 8) || pref === 'high'
     }
   },
 
@@ -308,6 +316,9 @@ $inspected_color = #af90d5
     &.active
       .mutation-type
         color #fff
+  .high-density &
+    padding 1px 20px
+    min-height 22px
 
 .action
   color #999

src/shared-data.js

@@ -2,9 +2,16 @@
 const internalSharedData = {
   openInEditorHost: '/',
   classifyComponents: true,
-  theme: 'auto'
+  theme: 'auto',
+  displayDensity: 'low'
 }
 
+const persisted = [
+  'classifyComponents',
+  'theme',
+  'displayDensity'
+]
+
 // ---- INTERNALS ---- //
 
 let Vue
@@ -22,13 +29,9 @@ export function init (params) {
   bridge = params.bridge
   Vue = params.Vue
 
-  if (params.hasOwnProperty('persist')) {
-    persist = params.persist
-
-    if (!params.hasOwnProperty('storage')) {
-      throw new Error('Missing `storage` params.')
-    }
+  if (params.hasOwnProperty('storage')) {
     storage = params.storage
+    persist = persisted
   }
 
   // Load persisted fields