fix: high-density

Guillaume Chau · Guillaume Chau · commit 301bb4a07b48 · 2018-09-01T01:23:21.000+02:00
diff --git a/src/devtools/views/perf/ComponentRenderDetails.vue b/src/devtools/views/perf/ComponentRenderDetails.vue
@@ -19,6 +19,9 @@
       <div
         slot="scroll"
         class="metrics"
+        :class="{
+          'high-density': highDensity
+        }"
       >
         <div class="header">
           <div
@@ -124,6 +127,11 @@ export default {
 
     componentName () {
       return (this.$shared.classifyComponents ? classify(this.entry.id) : this.entry.id) || 'Anonymous Component'
+    },
+
+    highDensity () {
+      const pref = this.$shared.displayDensity
+      return (pref === 'auto' && this.entries.length > 8) || pref === 'high'
     }
   },
 
@@ -142,13 +150,17 @@ export default {
 .metrics
   padding 6px 0
   font-size 14px
+  &.high-density
+    font-size 12px
 
 .header,
 .metric
   display flex
   /deep/ > *
     flex 25% 0 0
     padding 4px 10px
+    .high-density &
+      padding 2px 10px
     &:not(:first-child)
       text-align right
 
diff --git a/src/devtools/views/perf/FramerateMarkerInspector.vue b/src/devtools/views/perf/FramerateMarkerInspector.vue
@@ -15,14 +15,17 @@
           v-for="bubble of marker.bubbles"
           :key="bubble.type"
           class="group"
+          :class="{
+            'high-density': finalHighDensity
+          }"
         >
           <div class="group-title">
             {{ bubble.type }}
           </div>
           <div
             v-for="(entry, index) of bubble.entries"
             :key="index"
-            class="entry selectable-item"
+            class="entry list-item"
             :class="{
               selected: selectedEntry === entry
             }"
@@ -67,6 +70,21 @@ export default {
     }
   },
 
+  computed: {
+    totalEntriesCount () {
+      let result = 0
+      for (const bubble of this.marker.bubbles) {
+        result += bubble.entries.length
+      }
+      return result
+    },
+
+    finalHighDensity () {
+      const pref = this.$shared.displayDensity
+      return (pref === 'auto' && this.totalEntriesCount > 8) || pref === 'high'
+    }
+  },
+
   watch: {
     marker () {
       this.selectedEntry = null
@@ -88,6 +106,8 @@ export default {
 .group-title,
 .entry
   padding 7px 12px 6px
+  .high-density &
+    padding 3px 12px 2px
 
 .group
   &:not(:first-child)
@@ -103,11 +123,9 @@ export default {
   display flex
   .label
     flex auto 1 1
-    color $pink
   .time
     color $md-grey-500
   &.selected
-    .label,
     .time
       color $white
 </style>
diff --git a/src/devtools/views/router/RouterHistory.vue b/src/devtools/views/router/RouterHistory.vue
@@ -159,7 +159,8 @@ export default {
         .vue-ui-icon >>> svg
           fill  lighten($active-color, 95%)
   .high-density &
-    padding 4px 20px
+    padding 1px 20px
+    min-height 22px
   span
     display inline-block
     vertical-align middle
@@ -182,9 +183,9 @@ export default {
   line-height: 1
   color: #fff
   &.name
-    background-color #aaa
+    background-color $purple
   &.alias
-    background-color #ff8344
+    background-color $orange
   &.redirect
-    background-color #af90d5
+    background-color $darkerGrey
 </style>
