refactor(storage): use chrome.storage, fixes #979

Author: Guillaume Chau

shells/chrome/manifest.json

@@ -34,7 +34,8 @@
     "http://*/*",
     "https://*/*",
     "file:///*",
-    "contextMenus"
+    "contextMenus",
+    "storage"
   ],
   "content_scripts": [
     {

src/backend/index.js

@@ -10,6 +10,7 @@ import { findRelatedComponent } from './utils'
 import { stringify, classify, camelize, set, has, parse, getComponentName, getCustomRefDetails } from '../util'
 import ComponentSelector from './component-selector'
 import SharedData, { init as initSharedData } from 'src/shared-data'
+import { init as initStorage } from 'src/storage'
 import { isBrowser, target } from 'src/devtools/env'
 
 // hook should have been injected before this executes.
@@ -47,130 +48,132 @@ export function initBackend (_bridge) {
 }
 
 function connect (Vue) {
-  initSharedData({
-    bridge,
-    Vue
-  })
+  initStorage().then(() => {
+    initSharedData({
+      bridge,
+      Vue
+    })
 
-  hook.currentTab = 'components'
-  bridge.on('switch-tab', tab => {
-    hook.currentTab = tab
-    if (tab === 'components') {
-      flush()
-    }
-  })
+    hook.currentTab = 'components'
+    bridge.on('switch-tab', tab => {
+      hook.currentTab = tab
+      if (tab === 'components') {
+        flush()
+      }
+    })
 
-  // the backend may get injected to the same page multiple times
-  // if the user closes and reopens the devtools.
-  // make sure there's only one flush listener.
-  hook.off('flush')
-  hook.on('flush', () => {
-    if (hook.currentTab === 'components') {
-      flush()
-    }
-  })
+    // the backend may get injected to the same page multiple times
+    // if the user closes and reopens the devtools.
+    // make sure there's only one flush listener.
+    hook.off('flush')
+    hook.on('flush', () => {
+      if (hook.currentTab === 'components') {
+        flush()
+      }
+    })
 
-  bridge.on('select-instance', id => {
-    currentInspectedId = id
-    const instance = findInstanceOrVnode(id)
-    if (!instance) return
-    if (!/:functional:/.test(id)) bindToConsole(instance)
-    flush()
-    bridge.send('instance-selected')
-  })
+    bridge.on('select-instance', id => {
+      currentInspectedId = id
+      const instance = findInstanceOrVnode(id)
+      if (!instance) return
+      if (!/:functional:/.test(id)) bindToConsole(instance)
+      flush()
+      bridge.send('instance-selected')
+    })
 
-  bridge.on('scroll-to-instance', id => {
-    const instance = findInstanceOrVnode(id)
-    if (instance) {
-      scrollIntoView(instance)
-      highlight(instance)
-    }
-  })
+    bridge.on('scroll-to-instance', id => {
+      const instance = findInstanceOrVnode(id)
+      if (instance) {
+        scrollIntoView(instance)
+        highlight(instance)
+      }
+    })
 
-  bridge.on('filter-instances', _filter => {
-    filter = _filter.toLowerCase()
-    flush()
-  })
+    bridge.on('filter-instances', _filter => {
+      filter = _filter.toLowerCase()
+      flush()
+    })
 
-  bridge.on('refresh', scan)
+    bridge.on('refresh', scan)
 
-  bridge.on('enter-instance', id => {
-    const instance = findInstanceOrVnode(id)
-    if (instance) highlight(instance)
-  })
+    bridge.on('enter-instance', id => {
+      const instance = findInstanceOrVnode(id)
+      if (instance) highlight(instance)
+    })
 
-  bridge.on('leave-instance', unHighlight)
+    bridge.on('leave-instance', unHighlight)
 
-  // eslint-disable-next-line no-new
-  new ComponentSelector(bridge, instanceMap)
+    // eslint-disable-next-line no-new
+    new ComponentSelector(bridge, instanceMap)
 
-  // Get the instance id that is targeted by context menu
-  bridge.on('get-context-menu-target', () => {
-    const instance = target.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__
+    // Get the instance id that is targeted by context menu
+    bridge.on('get-context-menu-target', () => {
+      const instance = target.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__
 
-    target.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__ = null
-    target.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__ = false
+      target.__VUE_DEVTOOLS_CONTEXT_MENU_TARGET__ = null
+      target.__VUE_DEVTOOLS_CONTEXT_MENU_HAS_TARGET__ = false
 
-    if (instance) {
-      const id = instance.__VUE_DEVTOOLS_UID__
-      if (id) {
-        return bridge.send('inspect-instance', id)
+      if (instance) {
+        const id = instance.__VUE_DEVTOOLS_UID__
+        if (id) {
+          return bridge.send('inspect-instance', id)
+        }
       }
-    }
-
-    toast('No Vue component was found', 'warn')
-  })
 
-  bridge.on('set-instance-data', args => {
-    setStateValue(args)
-    flush()
-  })
+      toast('No Vue component was found', 'warn')
+    })
 
-  // vuex
-  if (hook.store) {
-    initVuexBackend(hook, bridge, hook.store.commit === undefined)
-  } else {
-    hook.once('vuex:init', store => {
-      initVuexBackend(hook, bridge, store.commit === undefined)
+    bridge.on('set-instance-data', args => {
+      setStateValue(args)
+      flush()
     })
-  }
 
-  hook.once('router:init', () => {
-    initRouterBackend(hook.Vue, bridge, rootInstances)
-  })
+    // vuex
+    if (hook.store) {
+      initVuexBackend(hook, bridge, hook.store.commit === undefined)
+    } else {
+      hook.once('vuex:init', store => {
+        initVuexBackend(hook, bridge, store.commit === undefined)
+      })
+    }
 
-  // events
-  initEventsBackend(Vue, bridge)
+    hook.once('router:init', () => {
+      initRouterBackend(hook.Vue, bridge, rootInstances)
+    })
+
+    // events
+    initEventsBackend(Vue, bridge)
 
-  target.__VUE_DEVTOOLS_INSPECT__ = inspectInstance
+    target.__VUE_DEVTOOLS_INSPECT__ = inspectInstance
 
-  // User project devtools config
-  if (target.hasOwnProperty('VUE_DEVTOOLS_CONFIG')) {
-    const config = target.VUE_DEVTOOLS_CONFIG
+    // User project devtools config
+    if (target.hasOwnProperty('VUE_DEVTOOLS_CONFIG')) {
+      const config = target.VUE_DEVTOOLS_CONFIG
 
-    // Open in editor
-    if (config.hasOwnProperty('openInEditorHost')) {
-      SharedData.openInEditorHost = config.openInEditorHost
+      // Open in editor
+      if (config.hasOwnProperty('openInEditorHost')) {
+        SharedData.openInEditorHost = config.openInEditorHost
+      }
     }
-  }
 
-  bridge.log('backend ready.')
-  bridge.send('ready', Vue.version)
-  bridge.on('log-detected-vue', () => {
-    console.log(
-      `%c vue-devtools %c Detected Vue v${Vue.version} %c`,
-      'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
-      'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
-      'background:transparent'
-    )
-  })
+    bridge.log('backend ready.')
+    bridge.send('ready', Vue.version)
+    bridge.on('log-detected-vue', () => {
+      console.log(
+        `%c vue-devtools %c Detected Vue v${Vue.version} %c`,
+        'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
+        'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
+        'background:transparent'
+      )
+    })
 
-  setTimeout(() => {
-    scan()
+    setTimeout(() => {
+      scan()
 
-    // perf
-    initPerfBackend(Vue, bridge, instanceMap)
-  }, 0)
+      // perf
+      initPerfBackend(Vue, bridge, instanceMap)
+    }, 0)
+  })
 }
 
 export function findInstanceOrVnode (id) {

src/devtools/index.js

@@ -1,12 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+import { createStore } from './store'
 import * as filters from './filters'
 import './plugins'
 import { parse } from '../util'
 import { isChrome, initEnv } from './env'
 import SharedData, { init as initSharedData, destroy as destroySharedData } from 'src/shared-data'
+import { init as initStorage } from 'src/storage'
 import VuexResolve from './views/vuex/resolve'
 
 for (const key in filters) {
@@ -67,13 +68,15 @@ let app = null
  */
 
 export function initDevTools (shell) {
-  initApp(shell)
-  shell.onReload(() => {
-    if (app) {
-      app.$destroy()
-    }
-    bridge.removeAllListeners()
+  initStorage().then(() => {
     initApp(shell)
+    shell.onReload(() => {
+      if (app) {
+        app.$destroy()
+      }
+      bridge.removeAllListeners()
+      initApp(shell)
+    })
   })
 }
 
@@ -106,6 +109,8 @@ function initApp (shell) {
       bridge.send('log-detected-vue')
     }
 
+    const store = createStore()
+
     bridge.once('ready', version => {
       store.commit(
         'SHOW_MESSAGE',
@@ -197,7 +202,14 @@ function initApp (shell) {
 
     bridge.on('inspect-instance', id => {
       ensurePaneShown(() => {
-        inspectInstance(id)
+        bridge.send('select-instance', id)
+        router.push({ name: 'components' })
+        const instance = store.state.components.instancesMap[id]
+        instance && store.dispatch('components/toggleInstance', {
+          instance,
+          expanded: true,
+          parent: true
+        })
       })
     })
 
@@ -240,17 +252,6 @@ function getContextMenuInstance () {
   bridge.send('get-context-menu-target')
 }
 
-function inspectInstance (id) {
-  bridge.send('select-instance', id)
-  router.push({ name: 'components' })
-  const instance = store.state.components.instancesMap[id]
-  instance && store.dispatch('components/toggleInstance', {
-    instance,
-    expanded: true,
-    parent: true
-  })
-}
-
 // Pane visibility management
 
 function ensurePaneShown (cb) {