From 19826ffca9f854997b4eeaeb81e80882b8c64ee2 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Fri, 19 Jan 2018 15:28:23 +0100
Subject: [PATCH 1/2] Sync 'classifyComponents' settings with backend

---
 src/backend/config.js                   | 7 +++++++
 src/backend/highlighter.js              | 6 ++++--
 src/backend/index.js                    | 3 +++
 src/devtools/index.js                   | 2 ++
 src/devtools/views/components/module.js | 7 +++++++
 5 files changed, 23 insertions(+), 2 deletions(-)
 create mode 100644 src/backend/config.js

diff --git a/src/backend/config.js b/src/backend/config.js
new file mode 100644
index 000000000..f319a2b28
--- /dev/null
+++ b/src/backend/config.js
@@ -0,0 +1,7 @@
+export let claissifyComponents = false
+
+export default function (bridge) {
+  bridge.on('config:classifyComponents', value => {
+    claissifyComponents = value
+  })
+}
diff --git a/src/backend/highlighter.js b/src/backend/highlighter.js
index 47a9d9dcc..75d2c987f 100644
--- a/src/backend/highlighter.js
+++ b/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,7 +31,8 @@ export function highlight (instance) {
   const rect = getInstanceRect(instance)
   if (rect) {
     let content = ''
-    const name = getInstanceName(instance)
+    let name = getInstanceName(instance)
+    claissifyComponents && (name = classify(name))
     name && (content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`)
     showOverlay(rect, content)
   }
diff --git a/src/backend/index.js b/src/backend/index.js
index 0cb3621c9..1b1bab22d 100644
--- a/src/backend/index.js
+++ b/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)
   }
+
+  bridge && config(bridge)
 }
 
 function connect () {
diff --git a/src/devtools/index.js b/src/devtools/index.js
index 26a7b5276..47d2d2428 100644
--- a/src/devtools/index.js
+++ b/src/devtools/index.js
@@ -166,6 +166,8 @@ function initApp (shell) {
         }
       }
     }).$mount('#app')
+
+    store.dispatch('init')
   })
 }
 
diff --git a/src/devtools/views/components/module.js b/src/devtools/views/components/module.js
index 62ce8bea3..b88732086 100644
--- a/src/devtools/views/components/module.js
+++ b/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)
   }
 }
 

From e2ee1a6d9d69d28f21e1e4eba11b55807081e5f1 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sun, 21 Jan 2018 00:58:10 +0100
Subject: [PATCH 2/2] Apply feedback

---
 src/backend/highlighter.js | 4 ++--
 src/backend/index.js       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/backend/highlighter.js b/src/backend/highlighter.js
index 75d2c987f..88214b4c4 100644
--- a/src/backend/highlighter.js
+++ b/src/backend/highlighter.js
@@ -32,8 +32,8 @@ export function highlight (instance) {
   if (rect) {
     let content = ''
     let name = getInstanceName(instance)
-    claissifyComponents && (name = classify(name))
-    name && (content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`)
+    if (claissifyComponents) name = classify(name)
+    if (name) content = `<span style="opacity: .6;">&lt;</span>${name}<span style="opacity: .6;">&gt;</span>`
     showOverlay(rect, content)
   }
 }
diff --git a/src/backend/index.js b/src/backend/index.js
index 1b1bab22d..6a9cd02a7 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -41,7 +41,7 @@ export function initBackend (_bridge) {
     hook.once('init', connect)
   }
 
-  bridge && config(bridge)
+  config(bridge)
 }
 
 function connect () {