From cfde19de32e49e4bf5213c66c1edc134bf3d6a53 Mon Sep 17 00:00:00 2001
From: 1099511627776 <1099511627776@mail.ru>
Date: Fri, 17 Aug 2018 19:59:46 +0300
Subject: [PATCH 1/7] Probable fix for issue #450

---
 src/backend/index.js                  | 29 +++++++++++++++++++++++++++
 src/devtools/components/DataField.vue |  9 +++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/backend/index.js b/src/backend/index.js
index f190753de..8b991a695 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -379,6 +379,7 @@ function getInstanceDetails (id) {
 function getInstanceState (instance) {
   return processProps(instance).concat(
     processState(instance),
+    processRefs(instance),
     processComputed(instance),
     processInjected(instance),
     processRouteContext(instance),
@@ -524,6 +525,34 @@ function processState (instance) {
     }))
 }
 
+/**
+ * Process refs
+ *
+ * @param {Vue} instance
+ * @return {Array}
+ */
+
+function processRefs (instance) {
+  if (Object.keys(instance.$refs).length === 0){
+    return [];
+  }
+  let refs = Object.keys(instance.$refs).map(key => ({
+      type: '$refs',
+      key: key,
+      value: {
+          _custom: {
+              clickable: true,
+              display: '&lt;' + instance.$refs[key].tagName.toLowerCase() +
+                       ' id="' + instance.$refs[key].id + '"' +
+                    ' class="' + instance.$refs[key].className + '"&gt;',
+              uid: instance.__VUE_DEVTOOLS_UID__,
+          }
+      },
+      editable: false,
+  }));
+  return refs.length > 0 ? refs : [];
+}
+
 /**
  * Process the computed properties of an instance.
  *
diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
index d3166a523..c3910a7a3 100644
--- a/src/devtools/components/DataField.vue
+++ b/src/devtools/components/DataField.vue
@@ -446,6 +446,15 @@ export default {
       if (this.valueType === 'custom' && this.fieldOptions.file) {
         return openInEditor(this.fieldOptions.file)
       }
+      if (this.valueType === 'custom' && this.fieldOptions['type'] === '$refs') {
+        if (this.$isChrome) {
+            const evl = `inspect(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get("${this.fieldOptions.uid}").$refs["${this.fieldOptions.key}"])`;
+            console.log(evl);
+            chrome.devtools.inspectedWindow.eval(evl);
+        } else {
+            window.alert('DOM inspection is not supported in this shell.')
+        }
+      }
 
       // Default action
       this.toggle()

From a637a7e7ac695e491461b7bf1d2b66b05d91fd14 Mon Sep 17 00:00:00 2001
From: 1099511627776 <1099511627776@mail.ru>
Date: Fri, 17 Aug 2018 20:04:58 +0300
Subject: [PATCH 2/7] Removed unused code

---
 src/backend/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index 8b991a695..3f667c6ca 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -541,7 +541,6 @@ function processRefs (instance) {
       key: key,
       value: {
           _custom: {
-              clickable: true,
               display: '&lt;' + instance.$refs[key].tagName.toLowerCase() +
                        ' id="' + instance.$refs[key].id + '"' +
                     ' class="' + instance.$refs[key].className + '"&gt;',

From 77c50d80732cbfb40f84a2cf43a585d941c868c2 Mon Sep 17 00:00:00 2001
From: 1099511627776 <1099511627776@mail.ru>
Date: Thu, 23 Aug 2018 15:31:15 +0300
Subject: [PATCH 3/7] Added test components and some styles

---
 shells/dev/target/RefTester.vue       | 13 +++++++++++++
 shells/dev/target/index.js            |  2 ++
 src/backend/index.js                  |  6 ++++--
 src/devtools/components/DataField.vue |  6 +++++-
 4 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 shells/dev/target/RefTester.vue

diff --git a/shells/dev/target/RefTester.vue b/shells/dev/target/RefTester.vue
new file mode 100644
index 000000000..0b67374f7
--- /dev/null
+++ b/shells/dev/target/RefTester.vue
@@ -0,0 +1,13 @@
+<template>
+  <div id="tester">
+    <p ref="tester" id="testing" class="test test1">{{ count }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  computed: {
+    count() { return 1 },
+  }
+}
+</script>
diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js
index bdacc6454..9eadd80f3 100644
--- a/shells/dev/target/index.js
+++ b/shells/dev/target/index.js
@@ -3,6 +3,7 @@ import store from './store'
 import Target from './Target.vue'
 import Other from './Other.vue'
 import Counter from './Counter.vue'
+import RefTester from './RefTester.vue'
 import NativeTypes from './NativeTypes.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
@@ -27,6 +28,7 @@ new Vue({
   render (h) {
     return h('div', null, [
       h(Counter),
+      h(RefTester),
       h(Target, { props: { msg: 'hi', ins: new MyClass() }}),
       h(Other),
       h(Events, { key: 'foo' }),
diff --git a/src/backend/index.js b/src/backend/index.js
index 3f667c6ca..b5d786ccd 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -542,9 +542,11 @@ function processRefs (instance) {
       value: {
           _custom: {
               display: '&lt;' + instance.$refs[key].tagName.toLowerCase() +
-                       ' id="' + instance.$refs[key].id + '"' +
-                    ' class="' + instance.$refs[key].className + '"&gt;',
+                       " <span class='attr-title'>ref</span>=" + key +
+                       ( instance.$refs[key].id ? " <span class='attr-title'>id</span>='" + instance.$refs[key].id + "'" : '') +
+                       ( instance.$refs[key].className ? " <span class='attr-title'>class</span>='" + instance.$refs[key].className + "'" : '') + '&gt;',
               uid: instance.__VUE_DEVTOOLS_UID__,
+              type: 'reference'
           }
       },
       editable: false,
diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
index c3910a7a3..02de85781 100644
--- a/src/devtools/components/DataField.vue
+++ b/src/devtools/components/DataField.vue
@@ -613,7 +613,11 @@ export default {
       color $green
       >>> span
         color $darkerGrey
-  .vue-ui-dark-mode &
+    &.type-reference
+        opacity 0.5
+      >>> .attr-title
+        color #800080
+.vue-ui-dark-mode &
     color #bdc6cf
     &.string, &.native
       color #e33e3a

From 3742ab0d4d102281f582d2d486653ccea465e608 Mon Sep 17 00:00:00 2001
From: 1099511627776 <1099511627776@mail.ru>
Date: Thu, 23 Aug 2018 16:08:59 +0300
Subject: [PATCH 4/7] fixed eslint warnings

---
 src/backend/index.js                  | 34 +++++++++++++--------------
 src/devtools/components/DataField.vue |  8 +++----
 2 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/backend/index.js b/src/backend/index.js
index b5d786ccd..db8cf7492 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -533,25 +533,25 @@ function processState (instance) {
  */
 
 function processRefs (instance) {
-  if (Object.keys(instance.$refs).length === 0){
-    return [];
+  if (Object.keys(instance.$refs).length === 0) {
+    return []
   }
   let refs = Object.keys(instance.$refs).map(key => ({
-      type: '$refs',
-      key: key,
-      value: {
-          _custom: {
-              display: '&lt;' + instance.$refs[key].tagName.toLowerCase() +
-                       " <span class='attr-title'>ref</span>=" + key +
-                       ( instance.$refs[key].id ? " <span class='attr-title'>id</span>='" + instance.$refs[key].id + "'" : '') +
-                       ( instance.$refs[key].className ? " <span class='attr-title'>class</span>='" + instance.$refs[key].className + "'" : '') + '&gt;',
-              uid: instance.__VUE_DEVTOOLS_UID__,
-              type: 'reference'
-          }
-      },
-      editable: false,
-  }));
-  return refs.length > 0 ? refs : [];
+    type: '$refs',
+    key: key,
+    value: {
+      _custom: {
+        display: '&lt;' + instance.$refs[key].tagName.toLowerCase() +
+          " <span class='attr-title'>ref</span>=" + key +
+          (instance.$refs[key].id ? " <span class='attr-title'>id</span>='" + instance.$refs[key].id + "'" : '') +
+          (instance.$refs[key].className ? " <span class='attr-title'>class</span>='" + instance.$refs[key].className + "'" : '') + '&gt;',
+        uid: instance.__VUE_DEVTOOLS_UID__,
+        type: 'reference'
+      }
+    },
+    editable: false
+  }))
+  return refs.length > 0 ? refs : []
 }
 
 /**
diff --git a/src/devtools/components/DataField.vue b/src/devtools/components/DataField.vue
index 02de85781..7a8264735 100644
--- a/src/devtools/components/DataField.vue
+++ b/src/devtools/components/DataField.vue
@@ -448,11 +448,11 @@ export default {
       }
       if (this.valueType === 'custom' && this.fieldOptions['type'] === '$refs') {
         if (this.$isChrome) {
-            const evl = `inspect(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get("${this.fieldOptions.uid}").$refs["${this.fieldOptions.key}"])`;
-            console.log(evl);
-            chrome.devtools.inspectedWindow.eval(evl);
+          const evl = `inspect(window.__VUE_DEVTOOLS_INSTANCE_MAP__.get("${this.fieldOptions.uid}").$refs["${this.fieldOptions.key}"])`
+          console.log(evl)
+          chrome.devtools.inspectedWindow.eval(evl)
         } else {
-            window.alert('DOM inspection is not supported in this shell.')
+          window.alert('DOM inspection is not supported in this shell.')
         }
       }
 

From ad85dbca32251e0b66ab9a3a0f291bc733de9909 Mon Sep 17 00:00:00 2001
From: 1099511627776 <1099511627776@mail.ru>
Date: Thu, 23 Aug 2018 16:37:02 +0300
Subject: [PATCH 5/7] npm run test now runs without errors

---
 cypress/integration/components-tab.js | 2 +-
 shells/dev/target/index.js            | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
index c73ff7ea9..acc418e9f 100644
--- a/cypress/integration/components-tab.js
+++ b/cypress/integration/components-tab.js
@@ -1,6 +1,6 @@
 import { suite } from '../utils/suite'
 
-const baseInstanceCount = 8
+const baseInstanceCount = 9
 
 suite('components tab', () => {
   it('should detect instances inside shadow DOM', () => {
diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js
index 9eadd80f3..e3a10f5bb 100644
--- a/shells/dev/target/index.js
+++ b/shells/dev/target/index.js
@@ -28,12 +28,12 @@ new Vue({
   render (h) {
     return h('div', null, [
       h(Counter),
-      h(RefTester),
       h(Target, { props: { msg: 'hi', ins: new MyClass() }}),
       h(Other),
       h(Events, { key: 'foo' }),
       h(NativeTypes, { key: new Date() }),
-      h(Router, { key: [] })
+      h(Router, { key: [] }),
+      h(RefTester)
     ])
   },
   data: {

From 0de6dbe5dd5ee67fc37c6919555dd9aa6465f5e3 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sun, 16 Sep 2018 05:20:56 +0200
Subject: [PATCH 6/7] fix: support refs lists

---
 shells/dev/target/RefTester.vue |  8 ++++++++
 src/backend/index.js            | 19 +++----------------
 src/util.js                     | 23 +++++++++++++++++++++++
 3 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/shells/dev/target/RefTester.vue b/shells/dev/target/RefTester.vue
index 0b67374f7..94405aca6 100644
--- a/shells/dev/target/RefTester.vue
+++ b/shells/dev/target/RefTester.vue
@@ -1,6 +1,14 @@
 <template>
   <div id="tester">
     <p ref="tester" id="testing" class="test test1">{{ count }}</p>
+
+    <ul>
+      <li
+        v-for="i in 4"
+        :key="i"
+        ref="list"
+      >{{ i }}</li>
+    </ul>
   </div>
 </template>
 
diff --git a/src/backend/index.js b/src/backend/index.js
index 83d6ef5ca..c70f783c6 100644
--- a/src/backend/index.js
+++ b/src/backend/index.js
@@ -7,7 +7,7 @@ import { initEventsBackend } from './events'
 import { initRouterBackend } from './router'
 import { initPerfBackend } from './perf'
 import { findRelatedComponent } from './utils'
-import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
+import { stringify, classify, camelize, set, parse, getComponentName, getCustomRefDetails } from '../util'
 import ComponentSelector from './component-selector'
 import SharedData, { init as initSharedData } from 'src/shared-data'
 import { isBrowser, target } from 'src/devtools/env'
@@ -690,21 +690,8 @@ function processRefs (instance) {
   if (Object.keys(instance.$refs).length === 0) {
     return []
   }
-  let refs = Object.keys(instance.$refs).map(key => ({
-    type: '$refs',
-    key: key,
-    value: {
-      _custom: {
-        display: '&lt;' + instance.$refs[key].tagName.toLowerCase() +
-          " <span class='attr-title'>ref</span>=" + key +
-          (instance.$refs[key].id ? " <span class='attr-title'>id</span>='" + instance.$refs[key].id + "'" : '') +
-          (instance.$refs[key].className ? " <span class='attr-title'>class</span>='" + instance.$refs[key].className + "'" : '') + '&gt;',
-        uid: instance.__VUE_DEVTOOLS_UID__,
-        type: 'reference'
-      }
-    },
-    editable: false
-  }))
+  console.log(instance.$refs)
+  let refs = Object.keys(instance.$refs).map(key => getCustomRefDetails(instance, key, instance.$refs[key]))
   return refs.length > 0 ? refs : []
 }
 
diff --git a/src/util.js b/src/util.js
index eb96309a6..74e1f2fb2 100644
--- a/src/util.js
+++ b/src/util.js
@@ -269,6 +269,29 @@ export function getCustomFunctionDetails (func) {
   }
 }
 
+export function getCustomRefDetails (instance, key, ref) {
+  let value
+  if (Array.isArray(ref)) {
+    value = ref.map((r) => getCustomRefDetails(instance, key, r)).map(data => data.value)
+  } else {
+    value = {
+      _custom: {
+        display: `&lt;${ref.tagName.toLowerCase()}` +
+          (ref.id ? ` <span class="attr-title">id</span>="${ref.id}"` : '') +
+          (ref.className ? ` <span class="attr-title">class</span>="${ref.className}"` : '') + '&gt;',
+        uid: instance.__VUE_DEVTOOLS_UID__,
+        type: 'reference'
+      }
+    }
+  }
+  return {
+    type: '$refs',
+    key: key,
+    value,
+    editable: false
+  }
+}
+
 export function parse (data, revive) {
   return revive
     ? CircularJSON.parse(data, reviver)

From 17000364cb8d9fd0a2ba14f1ce6ad36e410cf3df Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sun, 16 Sep 2018 05:24:32 +0200
Subject: [PATCH 7/7] test: e2e

---
 cypress/integration/components-tab.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
index 054a6723b..0e7662658 100644
--- a/cypress/integration/components-tab.js
+++ b/cypress/integration/components-tab.js
@@ -122,4 +122,13 @@ suite('components tab', () => {
     })
     cy.get('.left .search input').clear()
   })
+
+  it('should display $refs', () => {
+    cy.get('.instance .item-name').contains('RefTester').click()
+    cy.get('.right .data-wrapper').then(el => {
+      expect(el.text()).to.contain('list:Array[4]')
+      expect(el.text()).to.contain('<li>')
+      expect(el.text()).to.contain('tester:<p id="testing"')
+    })
+  })
 })