refactor: use vue-router and ui button groups for tabs

Author: Guillaume Chau

package.json

@@ -56,7 +56,7 @@
     "webpack-merge": "^4.1.2"
   },
   "dependencies": {
-    "@vue/ui": "^0.4.7",
+    "@vue/ui": "^0.5.0",
     "circular-json-es6": "^2.0.1",
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",

src/devtools/App.vue

@@ -10,45 +10,64 @@
         <span class="message" :key="message">{{ message }}</span>
       </transition>
     </span>
-    <a
-      class="button components"
-      :class="{ active: tab === 'components'}"
-      v-tooltip="$t('App.components.tooltip')"
-      @click="switchTab('components')"
-    >
-      <VueIcon icon="device_hub"/>
-      <span class="pane-name">Components</span>
-    </a>
-    <a
-      class="button vuex"
-      :class="{ active: tab === 'vuex'}"
-      v-tooltip="$t('App.vuex.tooltip')"
-      @click="switchTab('vuex')"
-    >
-      <VueIcon icon="restore"/>
-      <span class="pane-name">Vuex</span>
-    </a>
-    <a
-      class="button events"
-      :class="{ active: tab === 'events' }"
-      v-tooltip="$t('App.events.tooltip')"
-      @click="switchTab('events')"
-    >
-      <VueIcon icon="grain"/>
-      <span class="pane-name">Events</span>
-      <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
-    </a>
-    <a
-      class="button refresh"
-      v-tooltip="$t('App.refresh.tooltip')"
-      @click="refresh"
-    >
-      <VueIcon ref="refresh" icon="refresh"/>
-      <span class="pane-name">Refresh</span>
-    </a>
-    <span class="active-bar"></span>
+
+    <div class="actions">
+      <VueGroup
+        v-model="routeModel"
+        class="primary inline"
+        indicator
+      >
+        <VueGroupButton
+          :class="{
+            'icon-button': !$responsive.wide
+          }"
+          value="components"
+          icon-left="device_hub"
+          class="flat"
+          v-tooltip="$t('App.components.tooltip')"
+        >
+          Components
+        </VueGroupButton>
+        <VueGroupButton
+          :class="{
+            'icon-button': !$responsive.wide
+          }"
+          value="vuex"
+          icon-left="restore"
+          class="flat"
+          v-tooltip="$t('App.vuex.tooltip')"
+        >
+          Vuex
+        </VueGroupButton>
+        <VueGroupButton
+          :class="{
+            'icon-button': !$responsive.wide
+          }"
+          value="events"
+          icon-left="grain"
+          class="flat"
+          v-tooltip="$t('App.events.tooltip')"
+        >
+          Events
+        </VueGroupButton>
+      </VueGroup>
+
+      <VueButton
+        ref="refresh"
+        :class="{
+          'icon-button': !$responsive.wide
+        }"
+        icon-left="refresh"
+        v-tooltip="$t('App.refresh.tooltip')"
+        class="flat"
+        @click="refresh"
+      >
+        Refresh
+      </VueButton>
+    </div>
   </div>
-  <component :is="tab" class="container"></component>
+
+  <router-view class="container"/>
 </div>
 </template>
 
@@ -63,6 +82,7 @@ import { mapState } from 'vuex'
 
 export default {
   name: 'app',
+
   mixins: [
     Keyboard({
       onKeyDown ({ key, code, modifiers }) {
@@ -75,81 +95,81 @@ export default {
             break
           case 'ctrl':
             if (code === 'Digit1') {
-              this.switchTab('components')
+              this.$router.push({ name: 'components' })
               return false
             } else if (code === 'Digit2') {
-              this.switchTab('vuex')
+              this.$router.push({ name: 'vuex' })
               return false
             } else if (code === 'Digit3') {
-              this.switchTab('events')
+              this.$router.push({ name: 'events' })
               return false
             }
         }
       }
     })
   ],
+
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
     events: EventsTab
   },
+
   computed: {
     ...mapState({
       message: state => state.message,
-      tab: state => state.tab,
       newEventCount: state => state.events.newEventCount,
       view: state => state.view
     }),
+
     specialTokens () {
       return SPECIAL_TOKENS
+    },
+
+    routeModel: {
+      get () { return this.$route.name },
+      set (value) {
+        this.$router.push({ name: value })
+      }
     }
   },
-  methods: {
-    switchTab (tab) {
+
+  watch: {
+    '$route.name' (tab) {
       bridge.send('switch-tab', tab)
-      this.$store.commit('SWITCH_TAB', tab)
       if (tab === 'events') {
         this.$store.commit('events/RESET_NEW_EVENT_COUNT')
       }
-    },
+    }
+  },
+
+  methods: {
     refresh () {
-      const refreshIcon = this.$refs.refresh.$el
+      const refreshIcon = this.$refs.refresh.$el.querySelector('.vue-ui-icon')
       refreshIcon.style.animation = 'none'
 
       bridge.send('refresh')
       bridge.once('flush', () => {
         refreshIcon.style.animation = 'rotate 1s'
       })
     },
+
     switchView (mediaQueryEvent) {
       this.$store.commit(
         'SWITCH_VIEW',
         mediaQueryEvent.matches ? 'vertical' : 'horizontal'
       )
-    },
-    updateActiveBar () {
-      const activeButton = this.$el.querySelector('.button.active')
-      const activeBar = this.$el.querySelector('.active-bar')
-      activeBar.style.left = activeButton.offsetLeft + 'px'
-      activeBar.style.width = activeButton.offsetWidth + 'px'
     }
   },
+
   mounted () {
     this.mediaQuery = window.matchMedia('(min-width: 685px)')
     this.switchView(this.mediaQuery)
     this.mediaQuery.addListener(this.switchView)
-
-    this.updateActiveBar()
-    window.addEventListener('resize', this.updateActiveBar)
   },
+
   destroyed () {
-    window.removeEventListener('resize', this.updateActiveBar)
     this.mediaQuery.removeListener(this.switchView)
-  },
-  watch: {
-    tab () {
-      this.$nextTick(this.updateActiveBar)
-    }
   }
 }
 </script>
@@ -167,7 +187,7 @@ export default {
   background-color $background-color
   display flex
   flex-direction column
-  .dark &
+  .vue-ui-dark-mode &
     background-color $dark-background-color
 
 .header
@@ -177,7 +197,7 @@ export default {
   box-shadow 0 0 8px rgba(0, 0, 0, 0.15)
   font-size 14px
   position relative
-  .dark &
+  .vue-ui-dark-mode &
     border-bottom 1px solid $dark-border-color
 
 .logo
@@ -192,62 +212,32 @@ export default {
   @media (min-width: $wide - 300px)
     display block
 
-
 .message
   color $active-color
   transition all .3s ease
   position absolute
 
-.button
-  padding 10px
+.actions
+  flex auto 1 1
   display flex
-  align-items center
-  cursor pointer
-  position relative
-  border-bottom-color transparent
-  background-color $background-color
-  color #888
-  transition color .35s ease
-  .dark &
-    background-color $dark-background-color
-
-  .vue-ui-icon
-    width 20px
-    height @width
-    margin-right 5px
-    >>> svg
-      fill @color
-      transition fill .35s ease
-
-  &:hover
-    color #555
-    .vue-ui-icon >>> svg
-      fill @color
-
-  &.active
-    color $active-color
-    .vue-ui-icon >>> svg
-      fill @color
-
-  &:first-of-type
-    margin-left auto
-
-  .pane-name
-    display none
-
-  @media (min-width: $wide)
-    padding-right 20px
-    padding-left 20px
-    .pane-name
-      display block
+  justify-content flex-end
 
+.vue-ui-button
+  height 38px
+  @media (max-width: $wide)
+    width 38px
+    /deep/
+      .button-icon.left
+        margin-right 0 !important
+      .default-slot
+        display none
   @media (min-height: $tall)
-    padding-top 20px
-    padding-bottom 20px
+    height 48px
+    @media (max-width: $wide)
+      width @height
 
-.container
-  overflow hidden
-  flex 1
+.vue-ui-group /deep/ > .indicator
+  padding-bottom 0 !important
 
 $event-count-bubble-size = 18px
 
@@ -263,14 +253,10 @@ $event-count-bubble-size = 18px
   position absolute
   right 0
   top 12px
-  .dark &
+  .vue-ui-dark-mode &
     background-color $dark-background-color
 
-.active-bar
-  position absolute
-  bottom 0
-  width 0px
-  height 3px
-  background-color $active-color
-  transition all .32s cubic-bezier(0,.9,.6,1)
+.container
+  overflow hidden
+  flex 1
 </style>

src/devtools/components/ActionHeader.vue

@@ -17,7 +17,7 @@
   height 35px
   @media (min-height: $tall)
     height 50px
-  .dark &
+  .vue-ui-dark-mode &
     border-bottom 1px solid $dark-border-color
 
 .title

src/devtools/components/DataField.vue

@@ -469,16 +469,16 @@ export default {
       background-color #ffcc00
     &.observable
       background-color #ff9999
-    .dark &
+    .vue-ui-dark-mode &
       color: #242424
 
 .key
   color #881391
-  .dark &
+  .vue-ui-dark-mode &
     color: #e36eec
   &.abstract
     color $blueishGrey
-    .dark &
+    .vue-ui-dark-mode &
       color lighten($blueishGrey, 20%)
 .value
   display inline-block
@@ -488,7 +488,7 @@ export default {
   &.string
     >>> span
       color $black
-      .dark &
+      .vue-ui-dark-mode &
         color $red
   &.null
     color #999
@@ -515,13 +515,13 @@ export default {
           font-family Menlo, monospace
         .platform-windows &
           font-family Consolas, Lucida Console, Courier New, monospace
-        .dark &
+        .vue-ui-dark-mode &
           color $purple
     &.type-component-definition
       color $green
       >>> span
         color $darkerGrey
-  .dark &
+  .vue-ui-dark-mode &
     color #bdc6cf
     &.string, &.native
       color #e33e3a