From dc181e65ad8c993751ec70f8e7d054d4d8827538 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Tue, 16 Jan 2018 11:26:48 +0100
Subject: [PATCH 1/4] More fault tolerant

---
 src/backend/index.js | 49 ++++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index 0cb3621c9..aeef5d577 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -441,11 +441,11 @@ function processProps (instance) {
         type: 'props',
         key: prop.path,
         value: instance[prop.path],
-        meta: {
+        meta: options ? {
           type: options.type ? getPropType(options.type) : 'any',
           required: !!options.required,
           mode: propModes[prop.mode]
-        }
+        } : {}
       }
     })
   } else if ((props = instance.$options.props)) {
@@ -458,9 +458,11 @@ function processProps (instance) {
         type: 'props',
         key,
         value: instance[key],
-        meta: {
+        meta: prop ? {
           type: prop.type ? getPropType(prop.type) : 'any',
           required: !!prop.required
+        } : {
+          type: 'invalid'
         }
       })
     }
@@ -562,27 +564,30 @@ function processComputed (instance) {
  */
 
 function processRouteContext (instance) {
-  const route = instance.$route
-  if (route) {
-    const { path, query, params } = route
-    const value = { path, query, params }
-    if (route.fullPath) value.fullPath = route.fullPath
-    if (route.hash) value.hash = route.hash
-    if (route.name) value.name = route.name
-    if (route.meta) value.meta = route.meta
-    return [{
-      key: '$route',
-      value: {
-        _custom: {
-          type: 'router',
-          abstract: true,
-          value
+  try {
+    const route = instance.$route
+    if (route) {
+      const { path, query, params } = route
+      const value = { path, query, params }
+      if (route.fullPath) value.fullPath = route.fullPath
+      if (route.hash) value.hash = route.hash
+      if (route.name) value.name = route.name
+      if (route.meta) value.meta = route.meta
+      return [{
+        key: '$route',
+        value: {
+          _custom: {
+            type: 'router',
+            abstract: true,
+            value
+          }
         }
-      }
-    }]
-  } else {
-    return []
+      }]
+    }
+  } catch (e) {
+    // Invalid $router
   }
+  return []
 }
 
 /**

From 6268c1a30135525fbcc0aebfb93f5c1027bc541b Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Tue, 16 Jan 2018 11:27:03 +0100
Subject: [PATCH 2/4] Display stores with CustomValue API

---
 src/backend/vuex.js | 16 ++++++++++++++++
 src/util.js         |  7 +++++++
 2 files changed, 23 insertions(+)

diff --git a/src/backend/vuex.js b/src/backend/vuex.js
index cfe86c23e..d88c869ec 100644
--- a/src/backend/vuex.js
+++ b/src/backend/vuex.js
@@ -41,3 +41,19 @@ export function initVuexBackend (hook, bridge) {
     recording = enabled
   })
 }
+
+export function getCustomStoreDetails (store) {
+  return {
+    _custom: {
+      type: 'store',
+      display: 'Store',
+      value: {
+        state: store.state,
+        getters: store.getters
+      },
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}
diff --git a/src/util.js b/src/util.js
index deb91d0e9..c31f27108 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,6 +1,7 @@
 import CircularJSON from 'circular-json-es6'
 
 import { instanceMap, getCustomInstanceDetails } from 'src/backend'
+import { getCustomStoreDetails } from 'src/backend/vuex'
 
 function cached (fn) {
   const cache = Object.create(null)
@@ -71,6 +72,8 @@ function replacer (key) {
     return `[native RegExp ${val.toString()}]`
   } else if (val instanceof Date) {
     return `[native Date ${val.toString()}]`
+  } else if (isVuexStore(val)) {
+    return getCustomStoreDetails(val)
   } else if (val && val._isVue) {
     return getCustomInstanceDetails(val)
   } else {
@@ -78,6 +81,10 @@ function replacer (key) {
   }
 }
 
+export function isVuexStore (val) {
+  return val && val.state && val._vm
+}
+
 export function parse (data, revive) {
   return revive
     ? CircularJSON.parse(data, reviver)

From 4272abb33b5b1907f1f15b92fa3a630297a721ec Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Tue, 16 Jan 2018 11:38:52 +0100
Subject: [PATCH 3/4] Dsiplay VueRouter instances with CustomValue API

---
 src/backend/router.js | 19 +++++++++++++++++++
 src/backend/vuex.js   |  4 ++++
 src/util.js           |  9 ++++-----
 3 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/backend/router.js

diff --git a/src/backend/router.js b/src/backend/router.js
new file mode 100644
index 000000000..fc795f7ea
--- /dev/null
+++ b/src/backend/router.js
@@ -0,0 +1,19 @@
+export function isVueRouter (router) {
+  return router && router.constructor && router.constructor.name === 'VueRouter'
+}
+
+export function getCustomRouterDetails (router) {
+  return {
+    _custom: {
+      type: 'router',
+      display: 'VueRouter',
+      value: {
+        options: router.options,
+        currentRoute: router.currentRoute
+      },
+      fields: {
+        abstract: true
+      }
+    }
+  }
+}
diff --git a/src/backend/vuex.js b/src/backend/vuex.js
index d88c869ec..ff66e50f4 100644
--- a/src/backend/vuex.js
+++ b/src/backend/vuex.js
@@ -42,6 +42,10 @@ export function initVuexBackend (hook, bridge) {
   })
 }
 
+export function isVuexStore (val) {
+  return val && val.state && val._vm
+}
+
 export function getCustomStoreDetails (store) {
   return {
     _custom: {
diff --git a/src/util.js b/src/util.js
index c31f27108..742aec987 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,7 +1,8 @@
 import CircularJSON from 'circular-json-es6'
 
 import { instanceMap, getCustomInstanceDetails } from 'src/backend'
-import { getCustomStoreDetails } from 'src/backend/vuex'
+import { isVuexStore, getCustomStoreDetails } from 'src/backend/vuex'
+import { isVueRouter, getCustomRouterDetails } from 'src/backend/router'
 
 function cached (fn) {
   const cache = Object.create(null)
@@ -74,6 +75,8 @@ function replacer (key) {
     return `[native Date ${val.toString()}]`
   } else if (isVuexStore(val)) {
     return getCustomStoreDetails(val)
+  } else if (isVueRouter(val)) {
+    return getCustomRouterDetails(val)
   } else if (val && val._isVue) {
     return getCustomInstanceDetails(val)
   } else {
@@ -81,10 +84,6 @@ function replacer (key) {
   }
 }
 
-export function isVuexStore (val) {
-  return val && val.state && val._vm
-}
-
 export function parse (data, revive) {
   return revive
     ? CircularJSON.parse(data, reviver)

From f5d9fd58f8336eeac2210fc0454ab6d9494a4a7c Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Tue, 16 Jan 2018 12:21:43 +0100
Subject: [PATCH 4/4] CustomValue API: new 'tooltip' option, supports
 functions, component def

---
 shells/dev/target/NativeTypes.vue             | 14 ++++-
 src/backend/index.js                          | 23 ++-----
 src/devtools/components/DataField.vue         | 22 ++++++-
 src/devtools/variables.styl                   |  1 +
 src/devtools/views/events/EventInspector.vue  |  2 +-
 .../views/vuex/VuexStateInspector.vue         |  2 +-
 src/util.js                                   | 62 ++++++++++++++++++-
 7 files changed, 101 insertions(+), 25 deletions(-)

diff --git a/shells/dev/target/NativeTypes.vue b/shells/dev/target/NativeTypes.vue
index 498fb2944..c45c2fec6 100644
--- a/shells/dev/target/NativeTypes.vue
+++ b/shells/dev/target/NativeTypes.vue
@@ -18,6 +18,7 @@
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
+import CompDef from './Other.vue'
 
 export default {
   components: {
@@ -30,7 +31,18 @@ export default {
   data () {
     return {
       localDate: new Date(),
-      testComponent: null
+      reg: /abc/gi,
+      testComponent: null,
+      hello: function foo (a, b, c) {},
+      hey: function empty () {},
+      def: CompDef,
+      def2: {
+        name: 'MyComponent',
+        render () {}
+      },
+      def3: {
+        render () {}
+      }
     }
   },
   computed: {
diff --git a/src/backend/index.js b/src/backend/index.js
index aeef5d577..774fc44d6 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -4,19 +4,9 @@
 import { highlight, unHighlight, getInstanceRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 import { initEventsBackend } from './events'
-import { stringify, classify, camelize, set, parse } from '../util'
-import path from 'path'
+import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
 import ComponentSelector from './component-selector'
 
-// Use a custom basename functions instead of the shimed version
-// because it doesn't work on Windows
-function basename (filename, ext) {
-  return path.basename(
-    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
-    ext
-  )
-}
-
 // hook should have been injected before this executes.
 const hook = window.__VUE_DEVTOOLS_GLOBAL_HOOK__
 const rootInstances = []
@@ -380,6 +370,7 @@ export function getCustomInstanceDetails (instance) {
       type: 'component',
       id: instance.__VUE_DEVTOOLS_UID__,
       display: getInstanceName(instance),
+      tooltip: 'Component instance',
       value: reduceStateList(state),
       fields: {
         abstract: true
@@ -408,14 +399,8 @@ export function reduceStateList (list) {
  */
 
 export function getInstanceName (instance) {
-  const name = instance.$options.name || instance.$options._componentTag
-  if (name) {
-    return name
-  }
-  const file = instance.$options.__file // injected by vue-loader
-  if (file) {
-    return classify(basename(file, '.vue'))
-  }
+  const name = getComponentName(instance.$options)
+  if (name) return name
   return instance.$root === instance
     ? 'Root'
     : 'Anonymous Component'
diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
index b27c2333d..c91357579 100644
--- a/src/devtools/components/DataField.vue
+++ b/src/devtools/components/DataField.vue
@@ -67,7 +67,9 @@
           class="value"
           :class="valueClass"
           @dblclick="openEdit()"
-        >{{ formattedValue }}</span>
+          v-tooltip="valueTooltip"
+          v-html="formattedValue"
+        />
         <span class="actions">
           <i
             v-if="isValueEditable"
@@ -313,6 +315,15 @@ export default {
       return this.formattedSubFields.slice(0, this.limit)
     },
 
+    valueTooltip () {
+      const type = this.valueType
+      if (type === 'custom') {
+        return this.field.value._custom.tooltip
+      } else if (type.indexOf('native ' === 0)) {
+        return type.substr('native '.length)
+      }
+    },
+
     fieldOptions () {
       if (this.valueType === 'custom') {
         return Object.assign({}, this.field, this.field.value._custom)
@@ -442,7 +453,7 @@ export default {
   display inline-block
   color #444
   &.string, &.native
-    color #c41a16
+    color $red
   &.null
     color #999
   &.literal
@@ -459,6 +470,13 @@ export default {
         content '<'
       &::after
         content '>'
+    &.type-function
+      >>> span
+        color $green
+    &.type-component-definition
+      color $green
+      >>> span
+        color $darkerGrey
   .dark &
     color #bdc6cf
     &.string, &.native
diff --git a/src/devtools/variables.styl b/src/devtools/variables.styl
index 8dcc824e2..fd3934b4a 100644
--- a/src/devtools/variables.styl
+++ b/src/devtools/variables.styl
@@ -8,6 +8,7 @@ $darkerGreen = #3BA776
 $slate = #242424
 $white = #FFFFFF
 $orange = #DB6B00
+$red = #c41a16
 $black = #000000
 
 // The min-width to give icons text...
diff --git a/src/devtools/views/events/EventInspector.vue b/src/devtools/views/events/EventInspector.vue
index 79f624765..d9cb3f6b5 100644
--- a/src/devtools/views/events/EventInspector.vue
+++ b/src/devtools/views/events/EventInspector.vue
@@ -51,7 +51,7 @@ section:not(:last-child)
   margin 0 10px
 
 .string
-  color: #c41a16
+  color: $red
 
 .literal
   color: #03c
diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/src/devtools/views/vuex/VuexStateInspector.vue
index 1f53a6712..7a36c24ff 100644
--- a/src/devtools/views/vuex/VuexStateInspector.vue
+++ b/src/devtools/views/vuex/VuexStateInspector.vue
@@ -151,7 +151,7 @@ function copyToClipboard (state) {
   left initial
   top 1px
   font-size 12px
-  color #c41a16
+  color $red
   background-color $background-color
   .dark &
     background-color $dark-background-color
diff --git a/src/util.js b/src/util.js
index 742aec987..1dec1e8b5 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,3 +1,5 @@
+import path from 'path'
+
 import CircularJSON from 'circular-json-es6'
 
 import { instanceMap, getCustomInstanceDetails } from 'src/backend'
@@ -79,8 +81,66 @@ function replacer (key) {
     return getCustomRouterDetails(val)
   } else if (val && val._isVue) {
     return getCustomInstanceDetails(val)
+  } else if (isComponentDefinition(val)) {
+    return getCustomComponentDefinitionDetails(val)
+  } else {
+    const type = typeof val
+    if (type === 'function') {
+      return getCustomFunctionDetails(val)
+    }
+  }
+  return sanitize(val)
+}
+
+export function isComponentDefinition (val) {
+  return val && typeof val.render === 'function'
+}
+
+// Use a custom basename functions instead of the shimed version
+// because it doesn't work on Windows
+function basename (filename, ext) {
+  return path.basename(
+    filename.replace(/^[a-zA-Z]:/, '').replace(/\\/g, '/'),
+    ext
+  )
+}
+
+export function getComponentName (options) {
+  const name = options.name || options._componentTag
+  if (name) {
+    return name
+  }
+  const file = options.__file // injected by vue-loader
+  if (file) {
+    return classify(basename(file, '.vue'))
+  }
+}
+
+export function getCustomComponentDefinitionDetails (def) {
+  let display = getComponentName(def)
+  if (display) {
+    if (def.name && def.__file) {
+      display += ` <span>(${def.__file})</span>`
+    }
   } else {
-    return sanitize(val)
+    display = '<i>Unknown Component</i>'
+  }
+  return {
+    _custom: {
+      type: 'component-definition',
+      display,
+      tooltip: 'Component definition'
+    }
+  }
+}
+
+export function getCustomFunctionDetails (func) {
+  const args = func.toString().match(/\(.*\)/)[0]
+  return {
+    _custom: {
+      type: 'function',
+      display: `<span>${func.name}</span>${args}`
+    }
   }
 }