feat: Add router tab (#735)

* First draft of implementation

* Work on route filtering

* Add route list column

* Fix pane dragging

* Extract diff into own method

* Extract panes styling

* Add nicer styling for redirect flag

* Extract styling to common.styl

* Fix highlight color of entries

* Remove duplicate styling of entry elements

* Make route list heading h3

* Change route list heading

* Remove console.log

* Fix closing tag in IndexRoute.vue

* Implement toggle recording in router view list & simplyfy list of route changes

* Add support for nested routes in router config

* Split router from routes

* Add fully working routes tab

* Fix posible issue when there is no routes when routing is initialized.

* Fix issue with not beeing allowed to select nested routes

* feat: routing tab keyboard shortcut

* feat: integrate routes history into framerate graph

* fix: error if no corresponding metric

* chore: add keep-alive in example

* fix: abstract component error

* fix(GroupDropdown): style + dark mode

shells/dev/target/NativeTypes.vue

@@ -12,7 +12,12 @@
 
     <p>
       <button @click="sendComponent()">Vuex mutation</button>
-      <button @click="createLargeArray()">Create large array</button>
+      <button
+        style="background: red; color: white;"
+        @click="createLargeArray()"
+      >
+        Create large array
+      </button>
     </p>
 
     <h3>Set</h3>

shells/dev/target/index.js

@@ -7,8 +7,8 @@ import VuexObject from './VuexObject.vue'
 import NativeTypes from './NativeTypes.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
-import Router from './Router.vue'
 import router from './router'
+import Router from './router/Router.vue'
 
 window.VUE_DEVTOOLS_CONFIG = {
   openInEditorHost: '/'
@@ -25,6 +25,12 @@ circular.self = circular
 new Vue({
   store,
   router,
+  data: {
+    obj: {
+      items: items,
+      circular
+    }
+  },
   render (h) {
     return h('div', null, [
       h(Counter),
@@ -35,12 +41,6 @@ new Vue({
       h(Router, { key: [] }),
       h(VuexObject)
     ])
-  },
-  data: {
-    obj: {
-      items: items,
-      circular
-    }
   }
 }).$mount('#app')
 

shells/dev/target/router.js

@@ -1,13 +1,49 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
-import Page1 from './Page1.vue'
-import Page2 from './Page2.vue'
+import RouteOne from './router/RouteOne.vue'
+import RouteTwo from './router/RouteTwo.vue'
+import RouteWithParams from './router/RouteWithParams.vue'
+import NamedRoute from './router/NamedRoute.vue'
+import RouteWithQuery from './router/RouteWithQuery.vue'
+import RouteWithBeforeEnter from './router/RouteWithBeforeEnter.vue'
+import RouteWithAlias from './router/RouteWithAlias.vue'
+import RouteWithProps from './router/RouteWithProps.vue'
+import ParentRoute from './router/ParentRoute.vue'
+import ChildRoute from './router/ChildRoute.vue'
 
 Vue.use(VueRouter)
 
+const DynamicComponent = {
+  render: (h) => h('div', 'Hello from dynamic component')
+}
+
 const routes = [
-  { path: '/', name: 'page1', component: Page1 },
-  { path: '/page2', name: 'page2', component: Page2 }
+  { path: '/route-one', component: RouteOne },
+  { path: '/route-two', component: RouteTwo },
+  { path: '/route-with-params/:username/:id', component: RouteWithParams },
+  { path: '/route-named', component: NamedRoute, name: 'NamedRoute' },
+  { path: '/route-with-query', component: RouteWithQuery },
+  { path: '/route-with-before-enter',
+    component: RouteWithBeforeEnter,
+    beforeEnter: (to, from, next) => {
+      next()
+    }},
+  { path: '/route-with-redirect', redirect: '/route-one' },
+  { path: '/route-with-alias', component: RouteWithAlias, alias: '/this-is-the-alias' },
+  { path: '/route-with-dynamic-component', component: DynamicComponent, props: true },
+  { path: '/route-with-props',
+    component: RouteWithProps,
+    props: {
+      username: 'My Username',
+      id: 99
+    }},
+  { path: '/route-with-props-default', component: RouteWithProps },
+  { path: '/route-parent',
+    component: ParentRoute,
+    children: [
+      { path: '/route-child', component: ChildRoute }
+    ]
+  }
 ]
 
 const router = new VueRouter({

shells/dev/target/router/ChildRoute.vue

@@ -0,0 +1,9 @@
+<template>
+  <h2>Child route</h2>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/NamedRoute.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello named route</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/ParentRoute.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="parent">
+    <h2>Parent</h2>
+    <router-view class="child"></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteOne.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route 1</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteTwo.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route 2</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteWithAlias.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from route with alias</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/RouteWithBeforeEnter.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from before enter route</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/RouteWithParams.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>
+    <p>Hello from route with params: Username: {{ $route.params.username }}, Id: {{ $route.params.id }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

shells/dev/target/router/RouteWithProps.vue

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <p>Hello from route with props: Username: {{ username }}, Id: {{ id }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    username: {
+      type: String,
+      default: 'ms'
+    },
+    id: {
+      type: Number,
+      default: 33
+    }
+  }
+}
+</script>

shells/dev/target/router/RouteWithQuery.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <p>Hello from route with query: {{ $route.query }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+}
+</script>

shells/dev/target/router/Router.vue

@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <p><router-link to="/route-one">Go to Route One</router-link></p>
+    <p><router-link to="/route-two">Go to Route Two</router-link></p>
+    <p><router-link to="/route-with-params/markussorg/5">Go to route with params</router-link></p>
+    <p><router-link to="/route-named">Go to named route</router-link></p>
+    <p><router-link to="/route-with-query?el=value&test=true">Go to route with query</router-link></p>
+    <p><router-link to="/route-with-before-enter">Go to route with before enter</router-link></p>
+    <p><router-link to="/route-with-redirect">Go to route with redirect</router-link></p>
+    <p><router-link to="/this-is-the-alias">Go to route with alias</router-link></p>
+    <p><router-link to="/route-with-dynamic-component">Go to route with dyn. component</router-link></p>
+    <p><router-link to="/route-with-props">Go to route with props</router-link></p>
+    <p><router-link to="/route-with-props-default">Go to route with props (default)</router-link></p>
+    <p><router-link to="/route-parent">Go to route parent</router-link></p>
+    <p><router-link to="/route-child">Go to route child</router-link></p>
+    <keep-alive>
+      <router-view />
+    </keep-alive>
+    <p><button @click="addRoutes">Add new routes</button></p>
+  </div>
+</template>
+
+<script>
+import RouteOne from './RouteOne.vue'
+
+export default {
+  methods: {
+    addRoutes () {
+      this.$router.addRoutes([
+        { path: '/new-route', component: RouteOne }
+      ])
+    } 
+  }
+}
+</script>

src/backend/index.js

@@ -4,6 +4,7 @@
 import { highlight, unHighlight, getInstanceOrVnodeRect } from './highlighter'
 import { initVuexBackend } from './vuex'
 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'
@@ -121,6 +122,10 @@ function connect (Vue) {
     })
   }
 
+  hook.once('router:init', () => {
+    initRouterBackend(hook.Vue, bridge, rootInstances)
+  })
+
   // events
   initEventsBackend(Vue, bridge)
 
@@ -206,6 +211,7 @@ function scan () {
       return true
     }
   })
+  hook.emit('router:init')
   flush()
 }
 
@@ -340,7 +346,7 @@ function capture (instance, index, list) {
     captureCount++
   }
 
-  if (instance.$options && instance.$options.abstract) {
+  if (instance.$options && instance.$options.abstract && instance._vnode.componentInstance) {
     instance = instance._vnode.componentInstance
   }
 

src/backend/perf.js

@@ -95,8 +95,10 @@ function applyHooks (vm) {
         if (renderHook && renderHook.before) {
           // Render hook ends before one hook
           const metric = renderMetrics[renderHook.before]
-          metric.end = time
-          addComponentMetric(vm.$options, renderHook.before, metric.start, metric.end)
+          if (metric) {
+            metric.end = time
+            addComponentMetric(vm.$options, renderHook.before, metric.start, metric.end)
+          }
         }
 
         // After