Release the debugger (#4633)

.gitignore

@@ -19,3 +19,4 @@ tags
 **/*.swp
 **/*.orig
 *~
+webpack-stats/

.travis.yml

@@ -39,4 +39,4 @@ before_script:
 script:
   - node --version
   - du -sh firefox
-  - ./bin/ci/run-tests.sh $TRAVIS_COMMIT_RANGE
+  - node ./bin/ci/run-tests.js

assets/dictionary.txt

@@ -48,3 +48,5 @@ svgs
 componentWillUnmount
 createClass
 retext
+GH
+ship2gecko

assets/module-manifest.json

@@ -20472,7 +20472,58 @@
       "../../svg-inline-loader/index.js!../../../assets/images/marko.svg": 1649,
       "../../svg-inline-loader/index.js!../../../assets/images/nextjs.svg": 1650,
       "../../svg-inline-loader/index.js!../../../assets/images/nuxtjs.svg": 1651,
-      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/components/QuickOpenModal.js": 1652
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/components/QuickOpenModal.js": 1652,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/middleware/promise.js": 1653,
+      "../../babel-generator/lib/generators/types.js": 1654,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/pause/fetchScopes.js": 1655,
+      "../../babel-generator/lib/node/index.js": 1656,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/utils/timings.js": 1657,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/create-store.js": 1658,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/middleware/wait-service.js": 1659,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/middleware/log.js": 1660,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/middleware/history.js": 1661,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/middleware/thunk.js": 1662,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/actions/utils/middleware/timing.js": 1663,
+      "../../babel-generator/lib/index.js": 1664,
+      "../../babel-runtime/helpers/possibleConstructorReturn.js": 1665,
+      "../../babel-runtime/helpers/inherits.js": 1666,
+      "../../babel-runtime/core-js/object/set-prototype-of.js": 1667,
+      "../../core-js/library/fn/object/set-prototype-of.js": 1668,
+      "../../core-js/library/modules/es6.object.set-prototype-of.js": 1669,
+      "../../core-js/library/modules/_set-proto.js": 1670,
+      "../../detect-indent/index.js": 1671,
+      "../../repeating/index.js": 1672,
+      "../../is-finite/index.js": 1673,
+      "../../number-is-nan/index.js": 1674,
+      "../../babel-generator/lib/source-map.js": 1675,
+      "../../babel-generator/lib/printer.js": 1676,
+      "../../babel-runtime/core-js/object/assign.js": 1677,
+      "../../core-js/library/fn/object/assign.js": 1678,
+      "../../core-js/library/modules/es6.object.assign.js": 1679,
+      "../../babel-runtime/core-js/weak-set.js": 1680,
+      "../../core-js/library/fn/weak-set.js": 1681,
+      "../../core-js/library/modules/es6.weak-set.js": 1682,
+      "../../core-js/library/modules/es7.weak-set.of.js": 1683,
+      "../../core-js/library/modules/es7.weak-set.from.js": 1684,
+      "../../lodash/findLast.js": 1685,
+      "../../lodash/findLastIndex.js": 1686,
+      "../../lodash/isInteger.js": 1687,
+      "../../babel-generator/lib/buffer.js": 1688,
+      "../../trim-right/index.js": 1689,
+      "../../babel-generator/lib/node/whitespace.js": 1690,
+      "../../babel-generator/lib/node/parentheses.js": 1691,
+      "../../babel-generator/lib/whitespace.js": 1692,
+      "../../babel-generator/lib/generators/template-literals.js": 1693,
+      "../../babel-generator/lib/generators/expressions.js": 1694,
+      "../../babel-generator/lib/generators/statements.js": 1695,
+      "../../babel-generator/lib/generators/classes.js": 1696,
+      "../../babel-generator/lib/generators/methods.js": 1697,
+      "../../babel-generator/lib/generators/modules.js": 1698,
+      "../../babel-generator/node_modules/jsesc/jsesc.js": 1699,
+      "../../babel-generator/lib/generators/flow.js": 1700,
+      "../../babel-generator/lib/generators/base.js": 1701,
+      "../../babel-generator/lib/generators/jsx.js": 1702,
+      "../../babel-loader/lib/index.js?ignore=src/lib!../../../src/workers/parser/frameworks.js": 1703
     },
     "usedIds": {
       "0": 0,
@@ -22127,7 +22178,58 @@
       "1649": 1649,
       "1650": 1650,
       "1651": 1651,
-      "1652": 1652
+      "1652": 1652,
+      "1653": 1653,
+      "1654": 1654,
+      "1655": 1655,
+      "1656": 1656,
+      "1657": 1657,
+      "1658": 1658,
+      "1659": 1659,
+      "1660": 1660,
+      "1661": 1661,
+      "1662": 1662,
+      "1663": 1663,
+      "1664": 1664,
+      "1665": 1665,
+      "1666": 1666,
+      "1667": 1667,
+      "1668": 1668,
+      "1669": 1669,
+      "1670": 1670,
+      "1671": 1671,
+      "1672": 1672,
+      "1673": 1673,
+      "1674": 1674,
+      "1675": 1675,
+      "1676": 1676,
+      "1677": 1677,
+      "1678": 1678,
+      "1679": 1679,
+      "1680": 1680,
+      "1681": 1681,
+      "1682": 1682,
+      "1683": 1683,
+      "1684": 1684,
+      "1685": 1685,
+      "1686": 1686,
+      "1687": 1687,
+      "1688": 1688,
+      "1689": 1689,
+      "1690": 1690,
+      "1691": 1691,
+      "1692": 1692,
+      "1693": 1693,
+      "1694": 1694,
+      "1695": 1695,
+      "1696": 1696,
+      "1697": 1697,
+      "1698": 1698,
+      "1699": 1699,
+      "1700": 1700,
+      "1701": 1701,
+      "1702": 1702,
+      "1703": 1703
     }
   },
   "chunks": {

bin/ci/run-tests.js

@@ -0,0 +1,46 @@
+
+const shell = require("shelljs");
+const chalk = require("chalk");
+const path = require("path");
+const fs = require("fs");
+const _ = require("lodash");
+const minimist = require("minimist");
+const emoji = require("node-emoji");
+
+function exec(cmd) {
+  const {stdout, stderr, code} = shell.exec(cmd, {
+    silent: true
+  });
+
+  console.log(stdout)
+  console.log(stderr)
+  return code;
+}
+
+const firefoxPath = "./firefox"
+
+
+let code;
+console.log(chalk.blue("Copying Assets"))
+code = exec(`node ./bin/copy-assets.js --mc ${firefoxPath}`);
+if (code !== 0) {
+  process.exit(code)
+}
+
+
+const fullFirefoxPath = path.join(process.cwd(), firefoxPath)
+const testFile = fs.readFileSync(path.join(fullFirefoxPath, "devtools/client/debugger/new/debugger.js"),"utf8")
+const lineCount = testFile.split("\n").length
+
+if (lineCount > 50000) {
+  console.log(chalk.red(`Oh no, the bundle is ${lineCount} lines, which is greater than 50,000 lines`))
+  process.exit(1)
+} else {
+  console.log(chalk.yellow(`The bundle is ${lineCount} lines, which is not great, but fine...`))
+}
+
+console.log(chalk.blue("Running Tests"))
+const defaultPath = `--default-test-path devtools/client/debugger/new`
+const mcPath = `--mc ${firefoxPath}`
+code = exec(`./node_modules/.bin/mochii --ci true ${mcPath} ${defaultPath}`);
+process.exit(code)

docs/bundling.md

@@ -0,0 +1,72 @@
+## Releasing + Bundling the Debugger
+
+### What is a release?
+
+Releasing the Debugger to MC is the process of landing a new version of the Debugger in MC.
+It is basically automating the steps :)
+
+1. create a new up to date branch in MC and Github
+2. create the bundle and commit the `assets-manifest` in GH and commit the bundle patch in MC.
+3. check for changes in MC since the last bundle. If there have been any other changes, notify the user.
+4. run the tests in MC, if they pass: create a new Bugzilla bug and append a patch and try run
+5. if the tests fail or the patch is bad for any reason, automate the steps for updating the bug.
+
+The automation steps are managed in the [ship2gecko][s2g] repo.
+
+[s2g]: https://github.com/jasonLaster/ship2gecko
+
+
+### What is a bundle and how do I make one?
+
+Bundle generally speaking is the process of moving the code in github into MC.
+It literally refers to *webpack* making a JS and CSS bundle for the Debugger
+and a JS bundle for each of the workers. But, there are some other steps that are
+needed in order to get the Debugger code into MC:
+
+1. copy the debugger files: e.g. properties, prefs', index.html, panel, moz.build
+2. copy assets like SVGs
+3. copy mochitests
+
+Here is the bundle [script](../bin/copy-assets.js).
+
+
+### What packages make the bundle large?
+
+The simplest way to see the size of the bundle,
+and which packages are taking up space is to look at the webpack visualizer.
+
+1. `vis=true node bin/copy-assets.js --mc ../gecko --assets`
+2. `cd ../gecko/devtools/client/debugger/new`
+3. `open webpack-stats.html`
+
+![][vis]
+
+### Why are packages included in the bundle?
+
+When you see that a package is included that you feel should not be in the bundle,
+you can open the WebPack Analyzer and look.
+
+
+1. go to [analyzer](http://webpack.github.io/analyse)
+2. select open find the latest stats.json output `<debugger.html>/webpack-stats/stats-<sha>.json`
+
+The analyzer is a bit complicated, so here are some things to look for:
+
+1. **assets/chunks** - what chunk number is each asset. The `debugger` is often chunk `0`
+2. **modules** - Which modules appear. Which modules are the largest. Note, you are often looking at just the modules for chunk **0**
+3. **module** - What are the *reasons* the module was imported. What are the *dependencies* of the module. It is often useful to start at a large module, see who imported it, until you find the user code.
+
+Notes:
+
+1. When modules like `react` are excluded, they show up as `external ...` with a small byte size
+2. `user-request` is a good way to see what the first request was. For instance `prop-types` resulted in `./node_modules/prop-types/index.js`
+
+![][ana]
+
+---
+
+![][ana2]
+
+[ana]: https://shipusercontent.com/05ace0ec040dc7af3067cb50b528d717/Screen%20Shot%202017-11-08%20at%209.42.07%20AM.png
+[vis]: https://shipusercontent.com/d00336549a3b754be1d6669c1dee2fd7/Screen%20Shot%202017-11-08%20at%209.41.09%20AM.png
+[ana2]: https://shipusercontent.com/5eddfde393466f225e402f7d0226b1d1/Screen%20Shot%202017-11-08%20at%204.03.23%20PM.png

src/actions/expressions.js

@@ -12,7 +12,6 @@ import {
   getSource
 } from "../selectors";
 import { PROMISE } from "./utils/middleware/promise";
-import { replaceOriginalVariableName } from "devtools-map-bindings/src/utils";
 import { isGeneratedId } from "devtools-source-map";
 import { wrapExpression } from "../utils/expressions";
 import * as parser from "../workers/parser";
@@ -158,5 +157,5 @@ export async function getMappedExpression(
     return expression;
   }
 
-  return replaceOriginalVariableName(expression, generatedScopes);
+  return parser.replaceOriginalVariableName(expression, generatedScopes);
 }

src/workers/parser/index.js

@@ -26,6 +26,9 @@ export const setSource = dispatcher.task("setSource");
 export const clearSources = dispatcher.task("clearSources");
 export const hasSyntaxError = dispatcher.task("hasSyntaxError");
 export const isReactComponent = dispatcher.task("isReactComponent");
+export const replaceOriginalVariableName = dispatcher.task(
+  "replaceOriginalVariableName"
+);
 
 export type { SymbolDeclaration, SymbolDeclarations } from "./getSymbols";
 export type { AstLocation } from "./types";

src/workers/parser/worker.js

@@ -2,6 +2,7 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
+import { replaceOriginalVariableName } from "devtools-map-bindings/src/utils";
 import { getClosestExpression } from "./utils/closest";
 import { getVariablesInScope } from "./scopes";
 import getSymbols, { clearSymbols } from "./getSymbols";
@@ -32,5 +33,6 @@ self.onmessage = workerHandler({
   getNextStep,
   getEmptyLines,
   hasSyntaxError,
-  isReactComponent
+  isReactComponent,
+  replaceOriginalVariableName
 });

webpack.config.js

@@ -42,7 +42,7 @@ function buildConfig(envConfig) {
     webpackConfig.plugins = [];
     webpackConfig.output.libraryTarget = "umd";
 
-    if (false) {
+    if (process.env.vis) {
       const viz = new Visualizer({
         filename: "webpack-stats.html"
       });