minor tweaks

Author: yyx990803

src/devtools/App.vue

@@ -32,7 +32,8 @@
       <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
     </a>
     <a class="button refresh"
-      @click="refresh">
+      @click="refresh"
+      title="Force Refresh">
       <i class="material-icons">cached</i>
       <span class="pane-name">Refresh</span>
     </a>
@@ -80,6 +81,10 @@ export default {
   },
   mounted () {
     this.updateActiveBar()
+    window.addEventListener('resize', this.updateActiveBar)
+  },
+  destroyed () {
+    window.removeEventListener('resize', this.updateActiveBar)
   },
   watch: {
     tab () {
@@ -187,5 +192,5 @@ $event-count-bubble-size = 18px
   width 0px
   height 3px
   background-color $active-color
-  transition all .35s cubic-bezier(0,.9,.6,1)
+  transition all .32s cubic-bezier(0,.9,.6,1)
 </style>

src/devtools/global.styl

@@ -39,9 +39,9 @@
     transform scale(0.8)
 
 .toggle-recording .material-icons
-  color #999
+  color #999 !important
   &.enabled
-    color red
+    color red !important
     text-shadow 0 0 3px rgba(255, 0, 0, .4)
 
 html, body

src/devtools/views/components/ComponentInstance.vue

@@ -156,6 +156,8 @@ export default {
     background-color #b3cbf7
   &.inactive
     background-color #aaa
+  &:not(.console)
+    margin-left 6px
 
 .arrow-wrapper
   position absolute