Sync 'classifyComponents' settings with backend (#533)

* Sync 'classifyComponents' settings with backend

* Apply feedback

Author: Guillaume Chau

src/backend/config.js

@@ -0,0 +1,7 @@
+export let claissifyComponents = false
+
+export default function (bridge) {
+  bridge.on('config:classifyComponents', value => {
+    claissifyComponents = value
+  })
+}

src/backend/highlighter.js

@@ -1,5 +1,6 @@
-import { inDoc } from '../util'
+import { inDoc, classify } from '../util'
 import { getInstanceName } from './index'
+import { claissifyComponents } from './config'
 
 const overlay = document.createElement('div')
 overlay.style.backgroundColor = 'rgba(104, 182, 255, 0.35)'
@@ -30,8 +31,9 @@ export function highlight (instance) {
   const rect = getInstanceRect(instance)
   if (rect) {
     let content = ''
-    const name = getInstanceName(instance)
-    name && (content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`)
+    let name = getInstanceName(instance)
+    if (claissifyComponents) name = classify(name)
+    if (name) content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`
     showOverlay(rect, content)
   }
 }

src/backend/index.js

@@ -7,6 +7,7 @@ import { initEventsBackend } from './events'
 import { stringify, classify, camelize, set, parse } from '../util'
 import path from 'path'
 import ComponentSelector from './component-selector'
+import config from './config'
 
 // Use a custom basename functions instead of the shimed version
 // because it doesn't work on Windows
@@ -39,6 +40,8 @@ export function initBackend (_bridge) {
   } else {
     hook.once('init', connect)
   }
+
+  config(bridge)
 }
 
 function connect () {

src/devtools/index.js

@@ -166,6 +166,8 @@ function initApp (shell) {
         }
       }
     }).$mount('#app')
+
+    store.dispatch('init')
   })
 }
 

src/devtools/views/components/module.js

@@ -61,6 +61,12 @@ const mutations = {
 }
 
 const actions = {
+  init: {
+    handler ({ state }) {
+      bridge.send('config:classifyComponents', state.classifyComponents)
+    },
+    root: true
+  },
   toggleInstance ({ commit, dispatch, state }, { instance, expanded, recursive, parent = false } = {}) {
     const id = instance.id
 
@@ -98,6 +104,7 @@ const actions = {
     const newValue = !state.classifyComponents
     commit('CLASSIFY_COMPONENTS', newValue)
     storage.set(CLASSIFY_COMPONENTS_KEY, newValue)
+    bridge.send('config:classifyComponents', newValue)
   }
 }