Scroll to component button

package.json

@@ -34,21 +34,21 @@
   "devDependencies": {
     "buble": "^0.18.0",
     "buble-loader": "^0.4.1",
-    "chromedriver": "^2.33.2",
-    "cross-env": "^5.1.1",
+    "chromedriver": "^2.34.0",
+    "cross-env": "^5.1.3",
     "css-loader": "^0.28.7",
     "eslint": "^4.13.1",
     "eslint-plugin-vue-libs": "^2.0.1",
-    "file-loader": "^1.1.5",
+    "file-loader": "^1.1.6",
     "friendly-errors-webpack-plugin": "^1.6.1",
     "nightwatch": "^0.9.19",
     "nightwatch-helpers": "^1.2.0",
     "selenium-server": "2.52.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",
     "url-loader": "^0.6.2",
-    "vue-loader": "^13.5.0",
-    "vue-template-compiler": "^2.5.11",
+    "vue-loader": "^13.6.1",
+    "vue-template-compiler": "^2.5.13",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7"
   },
@@ -57,7 +57,8 @@
     "lodash.debounce": "^4.0.8",
     "lodash.groupby": "^4.6.0",
     "uglifyjs-webpack-plugin": "^1.1.4",
-    "vue": "^2.5.11",
+    "vue": "^2.5.13",
+    "vue-router": "^3.0.1",
     "vuex": "^3.0.1"
   }
 }

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: {

shells/dev/target/Page1.vue

@@ -0,0 +1,3 @@
+<template>
+  <h2>Page 1</h2>
+</template>

shells/dev/target/Page2.vue

@@ -0,0 +1,6 @@
+<template>
+  <div id="page2">
+    <h2>Page 2</h2>
+    <p>{{ $route.params.id }}</p>
+  </div>
+</template>

shells/dev/target/Router.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="router">
+    <h1>Router</h1>
+    <nav>
+      <router-link :to="{ name: 'page1' }" exact>Page 1</router-link>
+      <router-link :to="{ name: 'page2', params: { id: 42 } }" exact>Page 2</router-link>
+    </nav>
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+  </div>
+</template>
+
+<style scoped>
+a {
+  margin-right: 6px;
+}
+
+.router-link-active {
+  font-weight: bold;
+}
+</style>
+

shells/dev/target/index.js

@@ -5,6 +5,8 @@ import Other from './Other.vue'
 import Counter from './Counter.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
+import Router from './Router.vue'
+import router from './router'
 
 let items = []
 for (var i = 0; i < 100; i++) {
@@ -16,12 +18,14 @@ circular.self = circular
 
 new Vue({
   store,
+  router,
   render (h) {
     return h('div', null, [
       h(Counter),
       h(Target, {props:{msg: 'hi', ins: new MyClass()}}),
       h(Other),
-      h(Events)
+      h(Events),
+      h(Router)
     ])
   },
   data: {

shells/dev/target/router.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Page1 from './Page1.vue'
+import Page2 from './Page2.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  { path: '/', name: 'page1', component: Page1 },
+  { path: '/page2', name: 'page2', component: Page2 }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router

src/backend/index.js

@@ -63,14 +63,18 @@ function connect () {
     currentInspectedId = id
     const instance = instanceMap.get(id)
     if (instance) {
-      scrollIntoView(instance)
       highlight(instance)
     }
     bindToConsole(instance)
     flush()
     bridge.send('instance-details', stringify(getInstanceDetails(id)))
   })
 
+  bridge.on('scroll-to-instance', id => {
+    const instance = instanceMap.get(id)
+    instance && scrollIntoView(instance)
+  })
+
   bridge.on('filter-instances', _filter => {
     filter = _filter.toLowerCase()
     flush()
@@ -587,7 +591,7 @@ function processObservables (instance) {
 function scrollIntoView (instance) {
   const rect = getInstanceRect(instance)
   if (rect) {
-    window.scrollBy(0, rect.top)
+    window.scrollBy(0, rect.top + (rect.height - window.innerHeight) / 2)
   }
 }
 

src/devtools/global.styl

@@ -88,3 +88,8 @@ $arrow-color = #444
     text-align center
     padding 0.5em
     margin 0 auto
+
+.icon-button
+  cursor pointer
+  &:hover
+    color $green

src/devtools/views/components/ComponentInspector.vue

@@ -7,7 +7,7 @@
         <span style="color:#ccc">&gt;</span>
       </span>
       <a class="button inspect" @click="inspectDOM" title="Inspect DOM">
-        <i class="material-icons">visibility</i>
+        <i class="material-icons">find_in_page</i>
         <span>Inspect DOM</span>
       </a>
       <div class="search">

src/devtools/views/components/ComponentInstance.vue

@@ -33,6 +33,12 @@
       <span class="info inactive" v-if="instance.inactive">
         inactive
       </span>
+      <span class="spacer"></span>
+      <i
+        class="icon-button material-icons scroll-to-instance"
+        title="Scroll into view"
+        @click="scrollToInstance"
+      >visibility</i>
     </div>
     <div v-if="expanded">
       <component-instance
@@ -98,6 +104,9 @@ export default {
     },
     leave () {
       bridge.send('leave-instance', this.instance.id)
+    },
+    scrollToInstance () {
+      bridge.send('scroll-to-instance', this.instance.id)
     }
   }
 }
@@ -123,6 +132,10 @@ export default {
   line-height 22px
   height 22px
   white-space nowrap
+  display flex
+  align-items center
+  padding-right 6px
+
   &:hidden
     display none
   &:hover
@@ -160,6 +173,7 @@ export default {
   &.console
     color #fff
     background-color transparent
+    top 0px
   &.router-view
     background-color #ff8344
   &.fragment
@@ -174,7 +188,7 @@ export default {
   display inline-block
   width 16px
   height 16px
-  top 0
+  top 1px
   left 4px
 
 .arrow
@@ -192,4 +206,17 @@ export default {
   color $component-color
   margin 0 1px
   transition color .1s ease
+
+.spacer
+  flex 100% 1 1
+  width 0
+
+.icon-button
+  font-size 16px
+
+  .self:not(:hover) &
+    visibility hidden
+
+  .self.selected &
+    color $white
 </style>

test/specs/test.js

@@ -1,6 +1,6 @@
 module.exports = {
   'vue-devtools e2e tests': function (browser) {
-    var baseInstanceCount = 6
+    var baseInstanceCount = 7
 
     browser
     .url('http://localhost:' + (process.env.PORT || 8081))
@@ -19,7 +19,7 @@ module.exports = {
       .assert.visible('.tree')
       .assert.containsText('.action-header .title', 'Root')
       .assert.elementPresent('.data-field')
-      .assert.containsText('.data-field', 'obj:Object')
+      .assert.containsText('.data-field', '$route:Object')
 
       // should expand root by default
       .assert.count('.instance', baseInstanceCount)
@@ -38,10 +38,10 @@ module.exports = {
       .assert.containsText('.data-el.props .data-field:nth-child(2)', 'msg:\n"hi"')
       .assert.containsText('.data-el.props .data-field:nth-child(3)', 'obj:\nundefined')
       // Regexp
-      .assert.containsText('.data-el.data .data-field:nth-child(5)', 'regex:/(a\\w+b)/g')
+      .assert.containsText('.data-el.data .data-field:nth-child(6)', 'regex:/(a\\w+b)/g')
       // Literals
-      .assert.containsText('.data-el.data .data-field:nth-child(4)', 'NaN')
-      .assert.containsText('.data-el.data .data-field:nth-child(1)', 'Infinity')
+      .assert.containsText('.data-el.data .data-field:nth-child(5)', 'NaN')
+      .assert.containsText('.data-el.data .data-field:nth-child(2)', 'Infinity')
 
       // expand child instance
       .click('.instance .instance:nth-child(2) .arrow-wrapper')