Add option to show original component names

shells/dev/target/Other.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-// this computed property should be visible 
+// this computed property should be visible
 // even if component has no 'computed' defined
 const computedPropMixin = {
   computed: {
@@ -17,6 +17,7 @@ const computedPropMixin = {
 }
 
 export default {
+  name: 'other-with-mine',
   props: ['id'],
   mixins: [ computedPropMixin ],
   data () {

src/backend/index.js

@@ -234,7 +234,7 @@ function findQualifiedChildren (instance) {
  */
 
 function isQualified (instance) {
-  const name = getInstanceName(instance).toLowerCase()
+  const name = classify(getInstanceName(instance)).toLowerCase()
   return name.indexOf(filter) > -1
 }
 
@@ -342,7 +342,7 @@ function getInstanceDetails (id) {
 export function getInstanceName (instance) {
   const name = instance.$options.name || instance.$options._componentTag
   if (name) {
-    return classify(name)
+    return name
   }
   const file = instance.$options.__file // injected by vue-loader
   if (file) {

src/devtools/components/ActionHeader.vue

@@ -40,7 +40,8 @@
   &:first-of-type
     margin-left auto
 
-  &:not(.disabled):hover
+  &:not(.disabled):hover,
+  &:not(.disabled).active
     opacity 1
     color $active-color
 

src/devtools/views/components/ComponentInstance.vue

@@ -19,7 +19,7 @@
           <span class="arrow right" :class="{ rotated: expanded }">
           </span>
         </span>
-        <span class="angle-bracket">&lt;</span><span class="instance-name">{{ instance.name }}</span><span class="angle-bracket">&gt;</span>
+        <span class="angle-bracket">&lt;</span><span class="instance-name">{{ displayName }}</span><span class="angle-bracket">&gt;</span>
       </span>
       <span class="info console" v-if="instance.consoleId === '$vm0'">
         == {{ instance.consoleId }}
@@ -39,18 +39,25 @@
         v-for="child in sortedChildren"
         :key="child.id"
         :instance="child"
-        :depth="depth + 1">
+        :depth="depth + 1"
+        :classify-display-name="classifyDisplayName">
       </component-instance>
     </div>
   </div>
 </template>
 
 <script>
+import { classify } from '../../../util'
+
 export default {
   name: 'ComponentInstance',
   props: {
     instance: Object,
-    depth: Number
+    depth: Number,
+    classifyDisplayName: {
+      type: Boolean,
+      default: true
+    }
   },
   created () {
     // expand root by default
@@ -71,6 +78,9 @@ export default {
           ? a.id - b.id
           : a.top - b.top
       })
+    },
+    displayName () {
+      return this.classifyDisplayName ? classify(this.instance.name) : this.instance.name
     }
   },
   methods: {

src/devtools/views/components/ComponentTree.vue

@@ -5,14 +5,21 @@
         <i class="material-icons">search</i>
         <input placeholder="Filter components" @input="filterInstances">
       </div>
+      <a class="button classify-names"
+         :class="{ active: classifyDisplayName }"
+         @click="toggleComponentNames"
+         title="Toggle component names">
+        <i class="material-icons">text_fields</i>
+      </a>
     </action-header>
     <div slot="scroll" class="tree">
       <component-instance
         v-for="instance in instances"
         ref="instances"
         :key="instance.id"
         :instance="instance"
-        :depth="0">
+        :depth="0"
+        :classifyDisplayName="classifyDisplayName">
       </component-instance>
     </div>
   </scroll-pane>
@@ -23,7 +30,12 @@ import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import ComponentInstance from './ComponentInstance.vue'
 
+import { classify } from '../../../util'
 import keyNavMixin from '../../mixins/key-nav'
+import storage from '../../storage'
+
+const CLASSIFY_NAMES_KEY = 'CLASSIFY_COMPONENTS_NAMES'
+const classifyDisplayName = storage.get(CLASSIFY_NAMES_KEY)
 
 export default {
   mixins: [keyNavMixin],
@@ -32,12 +44,17 @@ export default {
     ActionHeader,
     ComponentInstance
   },
+  data () {
+    return {
+      classifyDisplayName: classifyDisplayName == null ? true : classifyDisplayName
+    }
+  },
   props: {
     instances: Array
   },
   methods: {
     filterInstances (e) {
-      bridge.send('filter-instances', e.target.value)
+      bridge.send('filter-instances', classify(e.target.value))
     },
 
     onKeyNav (dir) {
@@ -68,6 +85,10 @@ export default {
       } else {
         findByIndex(all, currentIndex + 1).select()
       }
+    },
+
+    toggleComponentNames () {
+      storage.set(CLASSIFY_NAMES_KEY, this.classifyDisplayName = !this.classifyDisplayName)
     }
   }
 }

test/specs/test.js

@@ -43,6 +43,13 @@ module.exports = {
       .assert.containsText('.data-el.data .data-field:nth-child(4)', 'NaN')
       .assert.containsText('.data-el.data .data-field:nth-child(1)', 'Infinity')
 
+      // Classify names
+      .assert.containsText('.instance .instance:nth-child(3)', 'OtherWithMine')
+      .click('.button.classify-names')
+      .assert.containsText('.instance .instance:nth-child(3)', 'other-with-mine')
+      .click('.button.classify-names')
+      .assert.containsText('.instance .instance:nth-child(3)', 'OtherWithMine')
+
       // expand child instance
       .click('.instance .instance:nth-child(2) .arrow-wrapper')
       .assert.count('.instance', baseInstanceCount + 2)