New keyboard shortcuts + tooltips refactoring

src/devtools/App.vue

@@ -10,31 +10,39 @@
         <span class="message" :key="message">{{ message }}</span>
       </transition>
     </span>
-    <a class="button components"
+    <a
+      class="button components"
       :class="{ active: tab === 'components'}"
+      v-tooltip="$t('App.components.tooltip')"
       @click="switchTab('components')"
-      v-tooltip="'Switch to Components'">
+    >
       <i class="material-icons">device_hub</i>
       <span class="pane-name">Components</span>
     </a>
-    <a class="button vuex"
+    <a
+      class="button vuex"
       :class="{ active: tab === 'vuex'}"
+      v-tooltip="$t('App.vuex.tooltip')"
       @click="switchTab('vuex')"
-      v-tooltip="'Switch to Vuex'">
+    >
       <i class="material-icons">restore</i>
       <span class="pane-name">Vuex</span>
     </a>
-    <a class="button events"
+    <a
+      class="button events"
       :class="{ active: tab === 'events' }"
+      v-tooltip="$t('App.events.tooltip')"
       @click="switchTab('events')"
-      v-tooltip="'Switch to Events'">
+    >
       <i class="material-icons">grain</i>
       <span class="pane-name">Events</span>
       <span class="event-count" v-if="newEventCount > 0">{{ newEventCount }}</span>
     </a>
-    <a class="button refresh"
+    <a
+      class="button refresh"
+      v-tooltip="$t('App.refresh.tooltip')"
       @click="refresh"
-      v-tooltip="'Force Refresh'">
+    >
       <i class="material-icons" ref="refresh">refresh</i>
       <span class="pane-name">Refresh</span>
     </a>
@@ -49,11 +57,13 @@ import ComponentsTab from './views/components/ComponentsTab.vue'
 import EventsTab from './views/events/EventsTab.vue'
 import VuexTab from './views/vuex/VuexTab.vue'
 import { SPECIAL_TOKENS } from '../util'
+import Keyboard from './mixins/keyboard'
 
 import { mapState } from 'vuex'
 
 export default {
   name: 'app',
+  mixins: [Keyboard],
   components: {
     components: ComponentsTab,
     vuex: VuexTab,
@@ -98,6 +108,27 @@ export default {
       const activeBar = this.$el.querySelector('.active-bar')
       activeBar.style.left = activeButton.offsetLeft + 'px'
       activeBar.style.width = activeButton.offsetWidth + 'px'
+    },
+    onKeyDown ({ key, code, modifiers }) {
+      switch (modifiers) {
+        case 'ctrl+alt':
+          if (key === 'r' || code === 'KeyR') {
+            this.refresh()
+            return false
+          }
+          break
+        case 'ctrl':
+          if (code === 'Digit1') {
+            this.switchTab('components')
+            return false
+          } else if (code === 'Digit2') {
+            this.switchTab('vuex')
+            return false
+          } else if (code === 'Digit3') {
+            this.switchTab('events')
+            return false
+          }
+      }
     }
   },
   mounted () {

src/devtools/components/ActionHeader.vue

@@ -63,8 +63,6 @@
 .material-icons
   font-size 16px
   margin-right 0
-  position relative
-  top 1px
   color inherit
   @media (min-width: $wide)
     margin-right 5px

src/devtools/components/DataField.vue

@@ -51,12 +51,12 @@
           <template v-else>
             <i
               class="icon-button material-icons"
-              v-tooltip="cancelEditTooltip"
+              v-tooltip="$t('DataField.edit.cancel.tooltip')"
               @click="cancelEdit()"
             >close</i>
             <i
               class="icon-button material-icons"
-              v-tooltip="submitEditTooltip"
+              v-tooltip="$t('DataField.edit.submit.tooltip')"
               @click="submitEdit()"
             >done</i>
           </template>

src/devtools/components/ScrollPane.vue

@@ -16,16 +16,16 @@ export default {
   },
   mounted () {
     if (this.scrollEvent) {
-      bridge.on(this.scrollEvent, this.scroll)
+      bridge.on(this.scrollEvent, this.scrollToBottom)
     }
   },
   destroyed () {
     if (this.scrollEvent) {
-      bridge.removeListener(this.scrollEvent, this.scroll)
+      bridge.removeListener(this.scrollEvent, this.scrollToBottom)
     }
   },
   methods: {
-    scroll () {
+    scrollToBottom () {
       this.$nextTick(() => {
         const container = this.$refs.scrollContainer
         if (container.children.length) {

src/devtools/components/StateInspector.vue

@@ -6,7 +6,7 @@
     >
       <div
         class="data-type selectable-item"
-        v-tooltip="dataTypeTooltip"
+        v-tooltip="$t('StateInspector.dataType.tooltip')"
         @click="toggle(dataType, $event)"
       >
         <span
@@ -76,9 +76,6 @@ export default {
           (keyOrder[b] || (b.charCodeAt(0) + 999))
         )
       })
-    },
-    dataTypeTooltip () {
-      return `<span class="keyboard">${this.$keys.ctrl}</span> + <i class="material-icons">mouse</i>: Collapse All<br><span class="keyboard">${this.$keys.shift}</span> + <i class="material-icons">mouse</i>: Expand All`
     }
   },
   methods: {

src/devtools/env.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+
+export const isChrome = typeof chrome !== 'undefined' && !!chrome.devtools
+export const isMac = navigator.platform === 'MacIntel'
+export const keys = {
+  ctrl: isMac ? '⌘' : 'Ctrl',
+  shift: 'Shift',
+  alt: isMac ? '⌥' : 'Alt',
+  del: 'Del',
+  enter: 'Enter',
+  esc: 'Esc'
+}
+
+Object.defineProperties(Vue.prototype, {
+  '$isChrome': { get: () => isChrome },
+  '$isMac': { get: () => isMac },
+  '$keys': { get: () => keys }
+})

src/devtools/global.styl

@@ -299,14 +299,16 @@ $arrow-color = #444
 
 .keyboard
   display inline-block
+  min-width 22px
+  text-align center
   background rgba($grey, .3)
   padding 2px 4px 0
   border-radius 3px
   margin-bottom 6px
   box-shadow 0 3px 0 rgba($grey, .2)
   .dark &
-    background rgba($grey, .7)
-    box-shadow 0 3px 0 rgba($grey, .4)
+    background rgba($grey, .9)
+    box-shadow 0 3px 0 rgba($grey, .6)
 
 .mono
   font-family Menlo, Consolas, monospace

src/devtools/index.js

@@ -3,22 +3,7 @@ import App from './App.vue'
 import store from './store'
 import './plugins'
 import { parse } from '../util'
-
-// Env
-
-const isChrome = typeof chrome !== 'undefined' && !!chrome.devtools
-const isMac = navigator.platform === 'MacIntel'
-const keys = {
-  ctrl: isMac ? '⌘' : 'Ctrl',
-  shift: 'Shift',
-  alt: isMac ? '⌥' : 'Alt'
-}
-
-Object.defineProperties(Vue.prototype, {
-  '$isChrome': { get: () => isChrome },
-  '$isMac': { get: () => isMac },
-  '$keys': { get: () => keys }
-})
+import { isChrome } from './env'
 
 // UI
 

src/devtools/locales/en.js

@@ -0,0 +1,78 @@
+export default {
+  App: {
+    components: {
+      tooltip: '[[{{keys.ctrl}}]] + [[1]] Switch to Components'
+    },
+    events: {
+      tooltip: '[[{{keys.ctrl}}]] + [[3]] Switch to Events'
+    },
+    refresh: {
+      tooltip: '[[{{keys.ctrl}}]] + [[{{keys.alt}}]] + [[R]] Force Refresh'
+    },
+    vuex: {
+      tooltip: '[[{{keys.ctrl}}]] + [[2]] Switch to Vuex'
+    }
+  },
+  StateInspector: {
+    dataType: {
+      tooltip: '[[{{keys.ctrl}}]] + <<mouse>>: Collapse All<br>[[{{keys.shift}}]] + <<mouse>>: Expand All'
+    }
+  },
+  DataField: {
+    edit: {
+      cancel: {
+        tooltip: '[[{{keys.esc}}]] Cancel'
+      },
+      submit: {
+        tooltip: '[[{{keys.enter}}]] Submit change'
+      }
+    },
+    quickEdit: {
+      number: {
+        tooltip: `Quick Edit<br><br>
+        [[{{keys.ctrl}}]] + <<mouse>>: {{operator}}5<br>
+        [[{{keys.shift}}]] + <<mouse>>: {{operator}}10<br>
+        [[{{keys.alt}}]] + <<mouse>>: {{operator}}100`
+      }
+    }
+  },
+  ComponentTree: {
+    select: {
+      tooltip: '[[S]] Select component in the page'
+    },
+    filter: {
+      tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter components by name'
+    }
+  },
+  EventsHistory: {
+    filter: {
+      tooltip: '[[{{keys.ctrl}}]] + [[F]] To filter on components, type <input><<search>> &lt;MyComponent&gt;</input> or just <input><<search>> &lt;mycomp</input>.'
+    },
+    clear: {
+      tooltip: '[[{{keys.ctrl}}]] + [[{{keys.del}}]] Clear Log'
+    },
+    startRecording: {
+      tooltip: '[[R]] Start recording'
+    },
+    stopRecording: {
+      tooltip: '[[R]] Stop recording'
+    }
+  },
+  VuexHistory: {
+    filter: {
+      tooltip: '[[{{keys.ctrl}}]] + [[F]] Filter mutations'
+    },
+    commitAll: {
+      tooltip: '[[{{keys.ctrl}}]] + [[{{keys.enter}}]] Commit all'
+    },
+    revertAll: {
+      tooltip: '[[{{keys.ctrl}}]] + [[{{keys.del}}]] Revert all'
+    },
+    startRecording: {
+      tooltip: '[[R]] Start recording'
+    },
+    stopRecording: {
+      tooltip: '[[R]] Stop recording'
+    }
+  }
+}

src/devtools/mixins/data-field-edit.js

@@ -127,14 +127,6 @@ export default {
         }
       }
       return null
-    },
-
-    cancelEditTooltip () {
-      return '<span class="keyboard">Esc</span> Cancel'
-    },
-
-    submitEditTooltip () {
-      return '<span class="keyboard">Enter</span> Submit change'
     }
   },
 
@@ -236,10 +228,9 @@ export default {
     },
 
     quickEditNumberTooltip (operator) {
-      return `Quick Edit<br><br>
-<span class="keyboard">${this.$keys.ctrl}</span> + <i class="material-icons">mouse</i>: ${operator}5<br>
-<span class="keyboard">${this.$keys.shift}</span> + <i class="material-icons">mouse</i>: ${operator}10<br>
-<span class="keyboard">${this.$keys.alt}</span> + <i class="material-icons">mouse</i>: ${operator}100`
+      return this.$t('DataField.quickEdit.number.tooltip', {
+        operator
+      })
     }
   }
 }

src/devtools/mixins/entry-list.js

@@ -0,0 +1,12 @@
+import { scrollIntoView } from 'src/util'
+
+export default {
+  watch: {
+    inspectedIndex (value) {
+      this.$nextTick(() => {
+        const el = value === -1 ? this.$refs.baseEntry : this.$refs.entries[value]
+        el && scrollIntoView(this.$globalRefs.leftScroll, el, false)
+      })
+    }
+  }
+}

src/devtools/mixins/keyboard.js

@@ -1,20 +1,41 @@
-export const LEFT = 37
-export const UP = 38
-export const RIGHT = 39
-export const DOWN = 40
-export const S = 83
+export const LEFT = 'ArrowLeft'
+export const UP = 'ArrowUp'
+export const RIGHT = 'ArrowRight'
+export const DOWN = 'ArrowDown'
+export const ENTER = 'Enter'
+export const DEL = 'Delete'
+export const BACKSPACE = 'Backspace'
 
 const activeInstances = []
 
-document.addEventListener('keyup', e => {
-  if (e.target.tagName === 'INPUT') {
+document.addEventListener('keydown', e => {
+  if (
+    e.target.tagName === 'INPUT' ||
+    e.target.tagName === 'TEXTAREA'
+  ) {
     return
   }
+  const modifiers = []
+  if (e.ctrlKey || e.metaKey) modifiers.push('ctrl')
+  if (e.shiftKey) modifiers.push('shift')
+  if (e.altKey) modifiers.push('alt')
+  const info = {
+    key: e.key,
+    code: e.code,
+    modifiers: modifiers.join('+')
+  }
+  let result = true
   activeInstances.forEach(vm => {
-    if (vm.onKeyUp) {
-      vm.onKeyUp(e)
+    if (vm.onKeyDown) {
+      const r = vm.onKeyDown(info)
+      if (r === false) {
+        result = false
+      }
     }
   })
+  if (!result) {
+    e.preventDefault()
+  }
 })
 
 export default {