Merge branch 'dev' into add-router-tab

Author: shentao

.browserslistrc

@@ -0,0 +1,2 @@
+Chrome >= 52
+Firefox >= 48

.circleci/config.yml

@@ -0,0 +1,35 @@
+version: 2
+jobs:
+  build:
+    docker:
+      # specify the version you desire here
+      - image: circleci/node:8.10-browsers
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v2-dependencies-{{ checksum "yarn.lock" }}
+          # fallback to using the latest cache if no exact match is found
+          - v2-dependencies-
+
+      - run: yarn install
+
+      - save_cache:
+          paths:
+            - node_modules
+            - ~/.cache/yarn
+            - ~/.cache/Cypress
+          key: v2-dependencies-{{ checksum "yarn.lock" }}
+
+      # run tests!
+      - run: yarn test
+
+      - store_artifacts:
+          path: cypress/videos
+      - store_artifacts:
+          path: cypress/screenshots

.eslintrc

@@ -0,0 +1,22 @@
+module.exports = {
+  'root': true,
+  'env': {
+    'browser': true
+  },
+  'extends': [
+    'standard',
+    'plugin:vue/recommended'
+  ],
+  'globals': {
+    'bridge': true,
+    'chrome': true,
+    'localStorage': true,
+    'HTMLDocument': true
+  },
+  'rules': {
+    'vue/html-closing-bracket-newline': ['error', {
+      'singleline': 'never',
+      'multiline': 'always'
+    }]
+  }
+}

.eslintrc.js

@@ -0,0 +1,7 @@
+<!--
+IMPORTANT: Please use the following link to create a new issue:
+
+  https://new-issue.vuejs.org/?repo=vuejs/vue-devtools
+
+If your issue was not created using the app above, it will be closed immediately.
+-->

.github/ISSUE_TEMPLATE.md

@@ -2,7 +2,10 @@ node_modules
 .DS_Store
 build
 *.zip
+*.xpi
 tests_output
 selenium-debug.log
 TODOs.md
-.vscode
+.idea
+.web-extension-id
+yarn-error.log

.gitignore

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2014-2016 Evan You
+Copyright (c) 2014-present Evan You
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

LICENSE

@@ -6,19 +6,23 @@
 
 2. To make it work for pages opened via `file://` protocol, you need to check "Allow access to file URLs" for this extension in Chrome's extension management panel.
 
-<p align="center"><img width="600px" src="https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/screenshot.png" alt="demo"></p>
+<p align="center"><img width="720px" src="https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/screenshot-shadow.png" alt="screenshot"></p>
 
 Works with [vuex](https://github.com/vuejs/vuex) for time-travel debugging:
 
 <p align="center"><img width="600px" src="https://raw.githubusercontent.com/vuejs/vue-devtools/master/media/demo.gif" alt="demo"></p>
 
 ### Installation
 
-Currently only a Chrome devtools extension is available.
+- [Get the Chrome Extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) ([beta](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg))
 
-[Get it on the Chrome Web Store](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd).  
+- [Get the Firefox Addon](https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/) ([beta](https://github.com/vuejs/vue-devtools/releases))
 
-[Workaround for Firefox](https://github.com/vuejs/vue-devtools/blob/master/docs/workaround-for-firefox.md)  
+- [Get standalone Electron app (works with any environment!)](https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md)
+
+#### Open component in editor
+
+To enable this feature, follow [this guide](./docs/open-in-editor.md).
 
 ### Manual Installation
 
@@ -36,7 +40,45 @@ Currently only a Chrome devtools extension is available.
 1. Clone this repo
 2. `npm install`
 3. `npm run dev`
-4. A plain shell with a test app will be available at `localhost:8080`.
+4. A plain shell with a test app will be available at `localhost:8100`.
+
+### Testing as Firefox addon
+
+ 1. Install `web-ext`
+
+	~~~~
+	$ npm install --global web-ext
+	~~~~
+
+	Or, for Yarn:
+
+	~~~~
+	$ yarn global add web-ext
+	~~~~
+
+	Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`:
+
+	~~~~
+	$ PATH=$PATH:$(yarn global bin)
+	~~~~
+
+ 2. Build and run in Firefox
+
+	~~~~
+	$ npm run build
+	$ npm run run:firefox
+	~~~~
+
+	When using Yarn, just replace `npm` with `yarn`.
+
+
+### Common problems and how to fix
+
+1. Fixing "Download the Vue Devtools for a better development experience" console message when working locally over `file://` protocol:
+  1.1 - Google Chrome: Right click on vue-devtools icon and click "Manage Extensions" then search for vue-devtools on the extensions list. Check the "Allow access to file URLs" box.
+
+2. How to use the devtools in IE/Edge/Safari or any other browser? [Get the standalone Electron app (works with any environment!)](https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md)
+
 
 ### License
 

README.md

@@ -0,0 +1,5 @@
+{
+  "viewportWidth": 1280,
+  "viewportHeight": 800,
+  "chromeWebSecurity": false
+}

cypress.json

@@ -0,0 +1,12 @@
+module.exports = {
+  'plugins': [
+    'cypress'
+  ],
+  'env': {
+    'mocha': true,
+    'cypress/globals': true
+  },
+  'rules': {
+    'strict': 'off'
+  }
+}

cypress/.eslintrc.js

@@ -0,0 +1,2 @@
+/screenshots
+/videos

cypress/.gitignore

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/fixtures/example.json

@@ -0,0 +1,100 @@
+import { suite } from '../utils/suite'
+
+const baseInstanceCount = 8
+
+suite('components tab', () => {
+  it('should detect instances inside shadow DOM', () => {
+    cy.get('.tree > .instance:last-child').contains('Shadow')
+  })
+
+  it('should select instance', () => {
+    cy.get('.instance .self').eq(0).click().then(el => {
+      expect(el).to.have.class('selected')
+    })
+    cy.get('.tree').should('be.visible')
+    cy.get('.action-header .title').contains('Root')
+    cy.get('.data-field').contains('$route')
+  })
+
+  it('should expand root by default', () => {
+    cy.get('.instance').should('have.length', baseInstanceCount)
+  })
+
+  it('should select child instance', () => {
+    cy.get('.instance .instance:nth-child(1) .self').eq(0).click()
+    cy.get('.action-header .title').contains('Counter')
+    cy.get('.data-el.vuex-bindings .data-field').contains('count:0')
+    cy.get('.data-el.computed .data-field').contains('test:1')
+    cy.get('.data-el.firebase-bindings .data-field').contains('hello:undefined')
+  })
+
+  it('should display prop of different types', () => {
+    cy.get('.instance .instance:nth-child(2) .self').eq(0).click()
+    cy.get('.action-header .title').contains('Target')
+    cy.get('.data-el.props .data-field:nth-child(1)').contains('ins:Object')
+    cy.get('.data-el.props .data-field:nth-child(2)').contains('msg:"hi"')
+    cy.get('.data-el.props .data-field:nth-child(3)').contains('obj:undefined')
+    // Regexp
+    cy.get('.data-el.data .data-field:nth-child(8)').then(el => {
+      expect(el.text()).to.include('regex:/(a\\w+b)/g')
+    })
+    // Literals
+    cy.get('.data-el.data .data-field:nth-child(5)').contains('NaN')
+    cy.get('.data-el.data .data-field:nth-child(2)').contains('Infinity')
+    cy.get('.data-el.data .data-field:nth-child(6)').contains('-Infinity')
+  })
+
+  it('should expand child instance', () => {
+    cy.get('.instance .instance:nth-child(2) .arrow-wrapper').click()
+    cy.get('.instance').should('have.length', baseInstanceCount + 7)
+  })
+
+  it('should add/remove component from app side', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.add').click({ force: true })
+    })
+    cy.get('.instance').should('have.length', baseInstanceCount + 10)
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.remove').click({ force: true })
+    })
+    cy.get('.instance').should('have.length', baseInstanceCount + 9)
+  })
+
+  it('should filter components', () => {
+    cy.get('.left .search input').clear().type('counter')
+    cy.get('.instance').should('have.length', 1)
+    cy.get('.left .search input').clear().type('target')
+    cy.get('.instance').should('have.length', 10)
+    cy.get('.left .search input').clear()
+  })
+
+  it('should select component', () => {
+    cy.get('.select-component').click()
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.mine').eq(0)
+        .trigger('mouseover', { force: true })
+        .click({ force: true })
+    })
+    cy.get('.action-header .title').contains('Mine')
+    cy.get('.tree').then(el => {
+      expect(el.text()).to.include('<Mine>')
+    })
+  })
+
+  it('should display render key', () => {
+    cy.get('.instance .self .attr-title').contains('key')
+    cy.get('.instance .self .attr-value').contains('1')
+  })
+
+  it('should display injected props', () => {
+    cy.get('.left .search input').clear().type('Mine')
+    cy.get('.instance').eq(1).click()
+    cy.get('.right .data-wrapper').then(el => {
+      expect(el.text()).to.contain('injected')
+      expect(el.text()).to.contain('answer:42')
+      expect(el.text()).to.contain('foo:"bar"')
+      expect(el.text()).to.contain('noop:ƒ noop(a, b, c)')
+    })
+    cy.get('.left .search input').clear()
+  })
+})

cypress/integration/components-tab.js

@@ -0,0 +1,35 @@
+import { suite } from '../utils/suite'
+
+suite('events tab', () => {
+  it('should display new events counter', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.btn-emit-event').click({ force: true })
+      get('.btn-emit-event1').click({ force: true })
+      get('.btn-emit-event2').click({ force: true })
+    })
+    cy.get('.events-tab .tag').contains(3)
+    cy.get('.events-tab').click()
+    cy.get('.events-tab .tag').should('not.be.visible')
+  })
+
+  it('should display events', () => {
+    cy.get('.history .entry').should('have.length', 3)
+  })
+
+  it('should add event', () => {
+    cy.get('#target').iframe().then(({ get }) => {
+      get('.btn-emit-log-event').click({ force: true })
+    })
+    cy.get('.history .entry').should('have.length', 4)
+  })
+
+  it('should search events', () => {
+    cy.get('.left .search input').clear().type('event')
+    cy.get('.history .entry[data-active="true"]').should('have.length', 3)
+    cy.get('.left .search input').clear().type('<eventchild1>')
+    cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+    cy.get('.left .search input').clear()
+    cy.get('.button.reset').click()
+    cy.get('.history .entry[data-active="true"]').should('have.length', 0)
+  })
+})

cypress/integration/events-tab.js

@@ -0,0 +1,46 @@
+import { suite } from '../utils/suite'
+
+suite('vuex edit', () => {
+  it('should edit state', () => {
+    cy.get('.vuex-tab').click()
+    // using the decrease button
+    cy.get('.data-field').eq(0)
+      .find('.actions .vue-ui-button').eq(1)
+      .click({ force: true })
+      .click({ force: true })
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('-2')
+    })
+
+    // using the increase button
+    cy.get('.data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(2)
+      .click({ force: true })
+      .click({ force: true })
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('0')
+    })
+
+    // using the edit input
+    cy.get('.data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(0).click({ force: true })
+    cy.get('.edit-input').type('12')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('12')
+    })
+
+    // change count back to 1
+    cy.get('.data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(0).click({ force: true })
+    cy.get('.edit-input').type('0')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#counter p').contains('0')
+    })
+  })
+})