Merge pull request #2 from vuejs/master

merge

README.md

@@ -16,7 +16,9 @@ Works with [vuex](https://github.com/vuejs/vuex) for time-travel debugging:
 
 Currently only a Chrome devtools extension is available.
 
-[Get it on the Chrome Web Store](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd).
+[Get it on the Chrome Web Store](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd).  
+
+[Workaround for Firefox](https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-firefox.md)  
 
 ### Manual Installation
 

docs/workaround-for-firefox.md

@@ -0,0 +1,17 @@
+#### Workaround to get **vue-devtools** in Firefox.  
+
+1. Install FireFox Developer Edition (should work with Firefox and aurora channel as well).  
+2. Install [**Chrome Store Foxified**](https://addons.mozilla.org/es/firefox/addon/chrome-store-foxified/) extension.  
+3. Create an account at [AMO](https://addons.mozilla.org/en-US/firefox/).
+4. If not already, signin with the credentials from Step 3.  
+5. Navigate to [Chrome Web Store](https://chrome.google.com/webstore/search/vue-devtools) and search for vue-devtools.
+6. You will see a **Add to Firefox** button, click on it.
+7. A pop up with options will open, select ***Just Sign and Download***
+<p align="center"><img width="600px" src="https://github.com/neeravp/vue-devtools/blob/master/media/just-sign-and-download.jpg" alt="Just Sign and Download"></p>  
+
+8. After the signing process another popup with options will be presented, select ***Save Signed Addon To File*** and save the file to your disk.
+<p align="center"><img width="600px" src="https://github.com/neeravp/vue-devtools/blob/master/media/save-signed-addon-to-file.jpg" alt="Save Signed Addon to File"></p>  
+
+9. Now navigate to `about:addons` and click the little gear icon in the top right to open the dropdown menu.  
+10. Click on ***Install Addon from File...*** , navigate to the file downloaded in Step 8 and install the extension/addon.
+11. Restart Firefox and now you can use **vue-devtools**.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-devtools",
-  "version": "3.0.8",
+  "version": "3.1.2",
   "description": "devtools for Vue.js!",
   "main": "index.js",
   "scripts": {

shells/chrome/manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Vue.js devtools",
-  "version": "3.0.8",
+  "version": "3.1.2",
   "description": "Chrome devtools extension for debugging Vue.js applications.",
   "manifest_version": 2,
   "icons": {

shells/dev/webpack.config.js

@@ -50,7 +50,7 @@ module.exports = {
   performance: {
     hints: false
   },
-  devtool: '#source-map',
+  devtool: '#cheap-module-eval-source-map',
   devServer: {
     quiet: true
   },

src/backend/index.js

@@ -125,7 +125,11 @@ function scan () {
       }
 
       // respect Vue.config.devtools option
-      if (instance.$options._base.config.devtools) {
+      let baseVue = instance.constructor
+      while (baseVue.super) {
+        baseVue = baseVue.super
+      }
+      if (baseVue.config && baseVue.config.devtools) {
         rootInstances.push(instance)
       }
 
@@ -355,31 +359,33 @@ function processProps (instance) {
       const prop = props[key]
       const options = prop.options
       return {
-        type: 'prop',
+        type: 'props',
         key: prop.path,
         value: instance[prop.path],
         meta: {
-          'type': options.type ? getPropType(options.type) : 'any',
+          type: options.type ? getPropType(options.type) : 'any',
           required: !!options.required,
-          'binding mode': propModes[prop.mode]
+          mode: propModes[prop.mode]
         }
       }
     })
   } else if ((props = instance.$options.props)) {
     // 2.0
-    return Object.keys(props).map(key => {
+    const propsData = []
+    for (let key in props) {
       const prop = props[key]
       key = camelize(key)
-      return {
-        type: 'prop',
+      propsData.push({
+        type: 'props',
         key,
         value: instance[key],
         meta: {
           type: prop.type ? getPropType(prop.type) : 'any',
           required: !!prop.required
         }
-      }
-    })
+      })
+    }
+    return propsData
   } else {
     return []
   }
@@ -435,23 +441,28 @@ function processState (instance) {
 
 function processComputed (instance) {
   const computed = []
+  const defs = instance.$options.computed || {}
   // use for...in here because if 'computed' is not defined
   // on component, computed properties will be placed in prototype
   // and Object.keys does not include
   // properties from object's prototype
-  for (const key in (instance.$options.computed || {})) {
+  for (const key in defs) {
+    const def = defs[key]
+    const type = typeof def === 'function' && def.vuex
+      ? 'vuex bindings'
+      : 'computed'
     // use try ... catch here because some computed properties may
     // throw error during its evaluation
     let computedProp = null
     try {
       computedProp = {
-        type: 'computed',
+        type,
         key,
         value: instance[key]
       }
     } catch (e) {
       computedProp = {
-        type: 'computed',
+        type,
         key,
         value: '(error during evaluation)'
       }
@@ -502,7 +513,7 @@ function processVuexGetters (instance) {
   if (getters) {
     return Object.keys(getters).map(key => {
       return {
-        type: 'vuex getter',
+        type: 'vuex getters',
         key,
         value: instance[key]
       }
@@ -524,7 +535,7 @@ function processFirebaseBindings (instance) {
   if (refs) {
     return Object.keys(refs).map(key => {
       return {
-        type: 'firebase',
+        type: 'firebase bindings',
         key,
         value: instance[key]
       }
@@ -546,7 +557,7 @@ function processObservables (instance) {
   if (obs) {
     return Object.keys(obs).map(key => {
       return {
-        type: 'observable',
+        type: 'observables',
         key,
         value: instance[key]
       }

src/devtools/components/DataField.vue

@@ -9,7 +9,12 @@
         v-show="isExpandableType">
       </span>
       <span class="key">{{ field.key }}</span>
-      <span class="colon">:</span>
+      <span class="colon">:<div class="meta" v-if="field.meta">
+        <div class="meta-field" v-for="(val, key) in field.meta">
+          <span class="key">{{ key }}</span>
+          <span class="value">{{ val }}</span>
+        </div>
+      </div></span>
       <span class="value" :class="valueType">{{ formattedValue }}</span>
     </div>
     <div class="children" v-if="expanded && isExpandableType">
@@ -149,6 +154,7 @@ export default {
     color #881391
   .colon
     margin-right .5em
+    position relative
   .value
     color #444
     &.string
@@ -157,6 +163,7 @@ export default {
       color #999
     &.literal
       color #0033cc
+
   .type
     color $background-color
     padding 3px 6px
@@ -169,10 +176,6 @@ export default {
     background-color #eee
     &.prop
       background-color #96afdd
-      &:hover
-        cursor pointer
-        .meta
-          display block
     &.computed
       background-color #af90d5
     &.vuex-getter
@@ -181,25 +184,31 @@ export default {
       background-color #ffcc00
     &.observable
       background-color #ff9999
+
+  .meta
+    display none
+    position absolute
+    z-index 999
+    font-size 11px
+    color #444
+    top 0
+    left calc(100% + 5px)
+    width 150px
+    border 1px solid #e3e3e3
+    border-radius 3px
+    padding 8px 12px
+    background-color $background-color
+    line-height 16px
+    box-shadow 0 2px 12px rgba(0,0,0,.1)
+    .key
+      width 65px
+  .meta-field
+    display block
+  &:hover
+    cursor pointer
     .meta
-      display none
-      position absolute
-      z-index 999
-      font-size 11px
-      color #444
-      top 0
-      left calc(100% + 4px)
-      width 170px
-      border 1px solid #e3e3e3
-      border-radius 3px
-      padding 8px 12px
-      background-color $background-color
-      line-height 16px
-      box-shadow 0 2px 12px rgba(0,0,0,.1)
-      .key
-        width 90px
-    .meta-field
       display block
+
   .app.dark &
     .key
       color: #e36eec

src/devtools/components/StateInspector.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="data-wrapper">
-    <div v-for="type in Object.keys(state)" :class="['data-el', toDisplayType(type)]">
+    <div v-for="type in getKeys(state)" :class="['data-el', toDisplayType(type, true)]">
       <div class="data-type">{{ toDisplayType(type) }}</div>
       <div class="data-fields">
         <template v-if="Array.isArray(state[type])">
@@ -27,14 +27,34 @@
 <script>
 import DataField from './DataField.vue'
 
+const keyOrder = {
+  undefined: 1,
+  props: 2,
+  computed: 3,
+  state: 1,
+  getters: 2
+}
+
 export default {
   props: ['state'],
   components: {
     DataField
   },
   methods: {
-    toDisplayType (type) {
-      return type === 'undefined' ? 'data' : type
+    getKeys (state) {
+      return Object.keys(state).sort((a, b) => {
+        return (
+          (keyOrder[a] || (a.charCodeAt(0) + 999)) -
+          (keyOrder[b] || (b.charCodeAt(0) + 999))
+        )
+      })
+    },
+    toDisplayType (type, asClass) {
+      return type === 'undefined'
+        ? 'data'
+        : asClass
+          ? type.replace(/\s/g, '-')
+          : type
     }
   }
 }

src/devtools/index.js

@@ -11,6 +11,17 @@ Vue.config.errorHandler = (e, vm) => {
   })
 }
 
+Vue.options.renderError = (h, e) => {
+  return h('pre', {
+    style: {
+      backgroundColor: 'red',
+      color: 'white',
+      fontSize: '12px',
+      padding: '10px'
+    }
+  }, e.stack)
+}
+
 let app = null
 
 /**

src/devtools/views/components/ComponentInspector.vue

@@ -15,15 +15,17 @@
         <input placeholder="Filter data" v-model.trim="filter">
       </div>
     </action-header>
-    <section v-show="!hasTarget" slot="scroll" class="notice">
-      <div>Select a component instance to inspect.</div>
-    </section>
-    <section v-show="hasTarget" slot="scroll" class="data">
-      <div class="notice" v-if="target.state && !target.state.length">
+    <template slot="scroll">
+      <section v-if="!hasTarget" class="notice">
+        <div>Select a component instance to inspect.</div>
+      </section>
+      <div v-else-if="!target.state || !target.state.length" class="notice">
         <div>This instance has no reactive state.</div>
       </div>
-      <state-inspector v-else :state="filteredState" />
-    </section>
+      <section v-else class="data">
+        <state-inspector :state="filteredState" />
+      </section>
+    </template>
   </scroll-pane>
 </template>
 
@@ -32,7 +34,7 @@ import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import StateInspector from 'components/StateInspector.vue'
 import { searchDeepInObject } from 'src/util'
-import groupBy from 'lodash.groupBy'
+import groupBy from 'lodash.groupby'
 
 const isChrome = typeof chrome !== 'undefined' && chrome.devtools
 

src/devtools/views/components/ComponentInstance.vue

@@ -66,7 +66,9 @@ export default {
     },
     sortedChildren () {
       return this.instance.children.slice().sort((a, b) => {
-        return a.top - b.top
+        return a.top === b.top
+          ? a.id - b.id
+          : a.top - b.top
       })
     }
   },