Bug 1428455 - Update Debugger Frontend v5.0. r=jdescottes

MozReview-Commit-ID: AzAIdEFn20f

--HG--
extra : rebase_source : 7de2f7c3a31a0a349b398d8001b3317d496d2aa6

devtools/client/debugger/new/README.mozilla

@@ -1,7 +1,9 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Taken from upstream commit: 0bcf3e687305960077e1255510e424d0437a3b69
+Version 5.0
+Comparison - https://github.com/devtools-html/debugger.html/compare/release-4...release-5
+Commit: https://github.com/devtools-html/debugger.html/commit/5ecfc84198524399ae75748bd1a28d2df2b45733
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.0

devtools/client/debugger/new/debugger.css

@@ -3167,6 +3167,7 @@ html .breakpoints-list .breakpoint.paused {
   line-height: 1em;
   position: relative;
   transition: all 0.25s ease;
+  cursor: pointer;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
@@ -3602,20 +3603,16 @@ img.ignore-exceptions {
   display: inline-block;
 }
 
-.welcomebox .toggle-button-end {
-  position: absolute;
-  top: auto;
-  bottom: 0;
-  offset-inline-end: 0;
-  offset-inline-start: auto;
-}
-
-.welcomebox .small-size-layout {
+.welcomebox .normal-layout {
   display: none;
 }
 
-.welcomebox .normal-layout {
-  display: inline-block;
+.welcomebox .command-bar-button {
+  position: absolute;
+  top: auto;
+  offset-inline-end: 0;
+  offset-inline-start: auto;
+  bottom: 0;
 }
 
 .shortcutKeys {

devtools/client/debugger/new/panel.js

@@ -4,10 +4,13 @@
 "use strict";
 
 const { Task } = require("devtools/shared/task");
-var { LocalizationHelper } = require("devtools/shared/l10n");
+const { LocalizationHelper } = require("devtools/shared/l10n");
+const { gDevTools } = require("devtools/client/framework/devtools");
+const { TargetFactory } = require("devtools/client/framework/target");
+const { Toolbox } = require("devtools/client/framework/toolbox");
 
 const DBG_STRINGS_URI = "devtools/client/locales/debugger.properties";
-var L10N = new LocalizationHelper(DBG_STRINGS_URI);
+const L10N = new LocalizationHelper(DBG_STRINGS_URI);
 
 function DebuggerPanel(iframeWindow, toolbox) {
   this.panelWin = iframeWindow;
@@ -33,7 +36,8 @@ DebuggerPanel.prototype = {
       sourceMaps: this.toolbox.sourceMapService,
       toolboxActions: {
         // Open a link in a new browser tab.
-        openLink: this.openLink.bind(this)
+        openLink: this.openLink.bind(this),
+        openWorkerToolbox: this.openWorkerToolbox.bind(this)
       }
     });
 
@@ -77,6 +81,20 @@ DebuggerPanel.prototype = {
     top.openUILinkIn(url, "tab");
   },
 
+  openWorkerToolbox: function(worker) {
+    this.toolbox.target.client.attachWorker(
+      worker.actor,
+      (response, workerClient) => {
+        const workerTarget = TargetFactory.forWorker(workerClient);
+        gDevTools
+          .showToolbox(workerTarget, "jsdebugger", Toolbox.HostType.WINDOW)
+          .then(toolbox => {
+            toolbox.once("destroy", () => workerClient.detach());
+          });
+      }
+    );
+  },
+
   getFrames: function() {
     let frames = this._selectors.getFrames(this._getState());
 

devtools/client/debugger/new/parser-worker.js

@@ -35691,8 +35691,18 @@ function getMemberExpression(root) {
 }
 
 function getVariables(dec) {
-  if (dec.id.type === "ArrayPattern") {
-    return dec.id.elements.map(element => {
+  if (!dec.id) {
+    return [];
+  }
+
+  if (t.isArrayPattern(dec.id)) {
+    if (!dec.id.elements) {
+      return [];
+    }
+
+    // NOTE: it's possible that an element is empty
+    // e.g. const [, a] = arr
+    return dec.id.elements.filter(element => element).map(element => {
       return {
         name: element.name || element.argument.name,
         location: element.loc
@@ -36004,139 +36014,142 @@ function getSpecifiers(specifiers) {
   return specifiers.map(specifier => specifier.local && specifier.local.name);
 }
 
+function extractSymbol(path, symbols) {
+  if ((0, _helpers.isVariable)(path)) {
+    symbols.variables.push(...getVariableNames(path));
+  }
+
+  if ((0, _helpers.isFunction)(path)) {
+    symbols.functions.push({
+      name: (0, _getFunctionName2.default)(path),
+      klass: (0, _inferClassName.inferClassName)(path),
+      location: path.node.loc,
+      parameterNames: getFunctionParameterNames(path),
+      identifier: path.node.id
+    });
+  }
+
+  if (t.isJSXElement(path)) {
+    symbols.hasJsx = true;
+  }
+
+  if (t.isClassDeclaration(path)) {
+    symbols.classes.push({
+      name: path.node.id.name,
+      parent: path.node.superClass,
+      location: path.node.loc
+    });
+  }
+
+  if (t.isImportDeclaration(path)) {
+    symbols.imports.push({
+      source: path.node.source.value,
+      location: path.node.loc,
+      specifiers: getSpecifiers(path.node.specifiers)
+    });
+  }
+
+  if (t.isObjectProperty(path)) {
+    const { start, end, identifierName } = path.node.key.loc;
+    symbols.objectProperties.push({
+      name: identifierName,
+      location: { start, end },
+      expression: getSnippet(path)
+    });
+  }
+
+  if (t.isMemberExpression(path)) {
+    const { start, end } = path.node.property.loc;
+    symbols.memberExpressions.push({
+      name: path.node.property.name,
+      location: { start, end },
+      expressionLocation: path.node.loc,
+      expression: getSnippet(path),
+      computed: path.node.computed
+    });
+  }
+
+  if (t.isCallExpression(path)) {
+    const callee = path.node.callee;
+    const args = path.node.arguments;
+    if (!t.isMemberExpression(callee)) {
+      const { start, end, identifierName } = callee.loc;
+      symbols.callExpressions.push({
+        name: identifierName,
+        values: args.filter(arg => arg.value).map(arg => arg.value),
+        location: { start, end }
+      });
+    }
+  }
+
+  if (t.isIdentifier(path)) {
+    let { start, end } = path.node.loc;
+
+    if (path.node.typeAnnotation) {
+      const column = path.node.typeAnnotation.loc.start.column;
+      end = _extends({}, end, { column });
+    }
+
+    symbols.identifiers.push({
+      name: path.node.name,
+      expression: path.node.name,
+      location: { start, end }
+    });
+  }
+
+  if (t.isThisExpression(path.node)) {
+    const { start, end } = path.node.loc;
+    symbols.identifiers.push({
+      name: "this",
+      location: { start, end },
+      expressionLocation: path.node.loc,
+      expression: "this"
+    });
+  }
+
+  if (t.isVariableDeclarator(path)) {
+    const node = path.node.id;
+    const { start, end } = path.node.loc;
+    if (t.isArrayPattern(node)) {
+      return;
+    }
+
+    symbols.identifiers.push({
+      name: node.name,
+      expression: node.name,
+      location: { start, end }
+    });
+  }
+}
+
 function extractSymbols(source) {
-  const functions = [];
-  const variables = [];
-  const memberExpressions = [];
-  const callExpressions = [];
-  const objectProperties = [];
-  const identifiers = [];
-  const classes = [];
-  const imports = [];
-  let hasJsx = false;
+  const symbols = {
+    functions: [],
+    variables: [],
+    callExpressions: [],
+    memberExpressions: [],
+    objectProperties: [],
+    comments: [],
+    identifiers: [],
+    classes: [],
+    imports: [],
+    hasJsx: false
+  };
 
   const ast = (0, _ast.traverseAst)(source, {
     enter(path) {
-      if ((0, _helpers.isVariable)(path)) {
-        variables.push(...getVariableNames(path));
-      }
-
-      if ((0, _helpers.isFunction)(path)) {
-        functions.push({
-          name: (0, _getFunctionName2.default)(path),
-          klass: (0, _inferClassName.inferClassName)(path),
-          location: path.node.loc,
-          parameterNames: getFunctionParameterNames(path),
-          identifier: path.node.id
-        });
-      }
-
-      if (t.isJSXElement(path)) {
-        hasJsx = true;
-      }
-
-      if (t.isClassDeclaration(path)) {
-        classes.push({
-          name: path.node.id.name,
-          parent: path.node.superClass,
-          location: path.node.loc
-        });
-      }
-
-      if (t.isImportDeclaration(path)) {
-        imports.push({
-          source: path.node.source.value,
-          location: path.node.loc,
-          specifiers: getSpecifiers(path.node.specifiers)
-        });
-      }
-
-      if (t.isObjectProperty(path)) {
-        const { start, end, identifierName } = path.node.key.loc;
-        objectProperties.push({
-          name: identifierName,
-          location: { start, end },
-          expression: getSnippet(path)
-        });
-      }
-
-      if (t.isMemberExpression(path)) {
-        const { start, end } = path.node.property.loc;
-        memberExpressions.push({
-          name: path.node.property.name,
-          location: { start, end },
-          expressionLocation: path.node.loc,
-          expression: getSnippet(path),
-          computed: path.node.computed
-        });
-      }
-
-      if (t.isCallExpression(path)) {
-        const callee = path.node.callee;
-        const args = path.node.arguments;
-        if (!t.isMemberExpression(callee)) {
-          const { start, end, identifierName } = callee.loc;
-          callExpressions.push({
-            name: identifierName,
-            values: args.filter(arg => arg.value).map(arg => arg.value),
-            location: { start, end }
-          });
-        }
-      }
-
-      if (t.isIdentifier(path)) {
-        let { start, end } = path.node.loc;
-
-        if (path.node.typeAnnotation) {
-          const column = path.node.typeAnnotation.loc.start.column;
-          end = _extends({}, end, { column });
-        }
-
-        identifiers.push({
-          name: path.node.name,
-          expression: path.node.name,
-          location: { start, end }
-        });
-      }
-
-      if (t.isThisExpression(path.node)) {
-        const { start, end } = path.node.loc;
-        identifiers.push({
-          name: "this",
-          location: { start, end },
-          expressionLocation: path.node.loc,
-          expression: "this"
-        });
-      }
-
-      if (t.isVariableDeclarator(path)) {
-        const node = path.node.id;
-        const { start, end } = path.node.loc;
-
-        identifiers.push({
-          name: node.name,
-          expression: node.name,
-          location: { start, end }
-        });
+      try {
+        extractSymbol(path, symbols);
+      } catch (e) {
+        console.error(e);
       }
     }
   });
 
   // comments are extracted separately from the AST
-  const comments = getComments(ast);
+  symbols.comments = getComments(ast);
 
-  return {
-    functions,
-    variables,
-    callExpressions,
-    memberExpressions,
-    objectProperties,
-    comments,
-    identifiers,
-    classes,
-    imports,
-    hasJsx
-  };
+  return symbols;
 }
 
 function getSymbols(source) {
@@ -36148,6 +36161,7 @@ function getSymbols(source) {
   }
 
   const symbols = extractSymbols(source);
+
   symbolDeclarations.set(source.id, symbols);
   return symbols;
 }

devtools/client/debugger/new/test/mochitest/browser.ini

@@ -120,6 +120,7 @@ skip-if = true # regular failures during release in Bug 1415300
 [browser_dbg-sourcemaps-bogus.js]
 [browser_dbg-sources.js]
 [browser_dbg-tabs.js]
+[browser_dbg-tabs-pretty-print.js]
 [browser_dbg-toggling-tools.js]
 skip-if = true # Bug 1414124
 [browser_dbg-wasm-sourcemaps.js]

devtools/client/debugger/new/test/mochitest/browser_dbg-call-stack.js

@@ -20,14 +20,11 @@ function toggleButton(dbg) {
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
 
-  toggleCallStack(dbg);
-
-  const notPaused = findElement(dbg, "callStackBody").innerText;
-  is(notPaused, "Not paused", "Not paused message is shown");
+  const found = findElement(dbg, "callStackBody");
+  is(found, null, "Call stack is hidden");
 
   invokeInTab("firstCall");
   await waitForPaused(dbg);
-
   ok(isFrameSelected(dbg, 1, "secondCall"), "the first frame is selected");
 
   let button = toggleButton(dbg);
@@ -37,11 +34,8 @@ add_task(async function() {
 add_task(async function() {
   const dbg = await initDebugger("doc-frames.html");
 
-  toggleCallStack(dbg);
-
   invokeInTab("startRecursion");
   await waitForPaused(dbg);
-
   ok(isFrameSelected(dbg, 1, "recurseA"), "the first frame is selected");
 
   // check to make sure that the toggle button isn't there

devtools/client/debugger/new/test/mochitest/browser_dbg-navigation.js

@@ -12,7 +12,7 @@ function countSources(dbg) {
  */
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
-  const { selectors: { getSelectedSource, getPause }, getState } = dbg;
+  const { selectors: { getSelectedSource, isPaused }, getState } = dbg;
 
   invokeInTab("firstCall");
   await waitForPaused(dbg);
@@ -22,6 +22,7 @@ add_task(async function() {
   invokeInTab("main");
   await waitForPaused(dbg);
   await waitForLoadedSource(dbg, "simple1");
+  toggleScopes(dbg);
 
   assertPausedLocation(dbg);
   is(countSources(dbg), 5, "5 sources are loaded.");
@@ -29,7 +30,7 @@ add_task(async function() {
   await navigate(dbg, "about:blank");
   await waitForDispatch(dbg, "NAVIGATE");
   is(countSources(dbg), 0, "0 sources are loaded.");
-  ok(!getPause(getState()), "No pause state exists");
+  ok(!isPaused(getState()), "Is not paused");
 
   await navigate(
     dbg,

devtools/client/debugger/new/test/mochitest/browser_dbg-pretty-print-paused.js

@@ -14,10 +14,8 @@ add_task(async function() {
   assertPausedLocation(dbg);
 
   clickElement(dbg, "prettyPrintButton");
-  await waitForDispatch(dbg, "SELECT_SOURCE");
-
-  // this doesnt work yet
-  // assertPausedLocation(dbg);
+  await waitForSelectedSource(dbg, "math.min.js:formatted");
+  assertPausedLocation(dbg);
 
   await resume(dbg);
 });

devtools/client/debugger/new/test/mochitest/browser_dbg-pretty-print.js

@@ -9,7 +9,7 @@ add_task(async function() {
   await selectSource(dbg, "math.min.js", 2);
   clickElement(dbg, "prettyPrintButton");
 
-  await waitForSource(dbg, "math.min.js:formatted");
+  await waitForSelectedSource(dbg, "math.min.js:formatted");
   const ppSrc = findSource(dbg, "math.min.js:formatted");
 
   ok(ppSrc, "Pretty-printed source exists");

devtools/client/debugger/new/test/mochitest/browser_dbg-returnvalues.js

@@ -6,10 +6,6 @@ function getValue(dbg, index) {
   return findElement(dbg, "scopeValue", index).innerText;
 }
 
-function toggleScopes(dbg) {
-  return findElement(dbg, "scopesHeader").click();
-}
-
 async function testReturnValue(dbg, val) {
   invokeInTab("return_something", val);
   await waitForPaused(dbg);
@@ -61,7 +57,6 @@ async function testThrowValue(dbg, val) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-return-values.html");
-  toggleScopes(dbg);
   await togglePauseOnExceptions(dbg, true, false);
 
   await testReturnValue(dbg, "to sender");

devtools/client/debugger/new/test/mochitest/browser_dbg-scopes-mutations.js

@@ -15,10 +15,6 @@ function expandNode(dbg, index) {
   return onLoadProperties;
 }
 
-function toggleScopes(dbg) {
-  return findElement(dbg, "scopesHeader").click();
-}
-
 function onLoadObjectProperties(dbg) {
   return waitForDispatch(dbg, "LOAD_OBJECT_PROPERTIES");
 }
@@ -26,8 +22,6 @@ function onLoadObjectProperties(dbg) {
 add_task(async function() {
   const dbg = await initDebugger("doc-script-mutate.html");
 
-  toggleScopes(dbg);
-
   let onPaused = waitForPaused(dbg);
   invokeInTab("mutate");
   await onPaused;

devtools/client/debugger/new/test/mochitest/browser_dbg-scopes.js

@@ -12,8 +12,6 @@ function getLabel(dbg, index) {
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
 
-  toggleScopes(dbg);
-
   invokeInTab("firstCall");
   await waitForPaused(dbg);
   await waitForLoadedSource(dbg, "switching-02");

devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemaps3.js

@@ -29,8 +29,6 @@ add_task(async function() {
   const dbg = await initDebugger("doc-sourcemaps3.html");
   const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
 
-  toggleScopes(dbg);
-
   await waitForSources(dbg, "bundle.js", "sorted.js", "test.js");
 
   ok(true, "Original sources exist");

devtools/client/debugger/new/test/mochitest/browser_dbg-tabs-pretty-print.js

@@ -0,0 +1,18 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests re-opening pretty printed tabs on load
+
+add_task(async function() {
+  const dbg = await initDebugger("doc-minified.html");
+
+  await selectSource(dbg, "math.min.js");
+  clickElement(dbg, "prettyPrintButton");
+  await waitForSource(dbg, "math.min.js:formatted");
+  // Test reloading the debugger
+  await waitForSelectedSource(dbg, "math.min.js:formatted");
+  await reload(dbg);
+
+  await waitForSelectedSource(dbg, "math.min.js:formatted");
+  ok(true, "Pretty printed source is selected on reload");
+});

devtools/client/debugger/new/test/mochitest/browser_dbg-tabs.js

@@ -8,7 +8,7 @@ function countTabs(dbg) {
 }
 
 add_task(async function() {
-  let dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html");
 
   await selectSource(dbg, "simple1");
   await selectSource(dbg, "simple2");
@@ -26,7 +26,7 @@ add_task(async function() {
 });
 
 add_task(async function() {
-  let dbg = await initDebugger("doc-scripts.html", "simple1", "simple2");
+  const dbg = await initDebugger("doc-scripts.html", "simple1", "simple2");
 
   await selectSource(dbg, "simple1");
   await selectSource(dbg, "simple2");

devtools/client/debugger/new/test/mochitest/head.js

@@ -280,13 +280,13 @@ function assertNotPaused(dbg) {
  * @static
  */
 function assertPausedLocation(dbg) {
-  const { selectors: { getSelectedSource, getPause }, getState } = dbg;
+  const { selectors: { getSelectedSource, getTopFrame }, getState } = dbg;
 
   ok(isTopFrameSelected(dbg, getState()), "top frame's source is selected");
 
   // Check the pause location
-  const pause = getPause(getState());
-  const pauseLine = pause && pause.frame && pause.frame.location.line;
+  const frame = getTopFrame(getState());
+  const pauseLine = frame && frame.location.line;
   assertDebugLine(dbg, pauseLine);
 
   ok(isVisibleInEditor(dbg, getCM(dbg).display.gutters), "gutter is visible");
@@ -344,7 +344,7 @@ function assertDebugLine(dbg, line) {
  * @static
  */
 function assertHighlightLocation(dbg, source, line) {
-  const { selectors: { getSelectedSource, getPause }, getState } = dbg;
+  const { selectors: { getSelectedSource }, getState } = dbg;
   source = findSource(dbg, source);
 
   // Check the selected source
@@ -381,8 +381,8 @@ function assertHighlightLocation(dbg, source, line) {
  * @static
  */
 function isPaused(dbg) {
-  const { selectors: { getPause }, getState } = dbg;
-  return !!getPause(getState());
+  const { selectors: { isPaused }, getState } = dbg;
+  return !!isPaused(getState());
 }
 
 async function waitForLoadedObjects(dbg) {
@@ -452,16 +452,11 @@ async function waitForMappedScopes(dbg) {
 }
 
 function isTopFrameSelected(dbg, state) {
-  const pause = dbg.selectors.getPause(state);
-
-  // Make sure we have the paused state.
-  if (!pause) {
-    return false;
-  }
+  const frame = dbg.selectors.getTopFrame(state);
 
   // Make sure the source text is completely loaded for the
   // source we are paused in.
-  const sourceId = pause.frame && pause.frame.location.sourceId;
+  const sourceId = frame.location.sourceId;
   const source = dbg.selectors.getSelectedSource(state);
 
   if (!source) {
@@ -503,6 +498,8 @@ function clearDebuggerPreferences() {
   Services.prefs.clearUserPref("devtools.debugger.pending-selected-location");
   Services.prefs.clearUserPref("devtools.debugger.pending-breakpoints");
   Services.prefs.clearUserPref("devtools.debugger.expressions");
+  Services.prefs.clearUserPref("devtools.debugger.call-stack-visible");
+  Services.prefs.clearUserPref("devtools.debugger.scopes-visible");
 }
 
 /**

devtools/client/locales/en-US/debugger.properties

@@ -677,14 +677,17 @@ functionSearchSeparatorLabel=←
 # text displayed when the user searches for specific lines in a file
 gotoLineModal.placeholder=Go to line…
 gotoLineModal.key=CmdOrCtrl+Shift+;
+gotoLineModal.title=Go to a line number in a file
 
 # LOCALIZATION NOTE(symbolSearch.search.functionsPlaceholder): The placeholder
 # text displayed when the user searches for functions in a file
 symbolSearch.search.functionsPlaceholder=Search functions…
+symbolSearch.search.functionsPlaceholder.title=Search for a function in a file
 
 # LOCALIZATION NOTE(symbolSearch.search.variablesPlaceholder): The placeholder
 # text displayed when the user searches for variables in a file
 symbolSearch.search.variablesPlaceholder=Search variables…
+symbolSearch.search.variablesPlaceholder.title=Search for a variable in a file
 
 # LOCALIZATION NOTE(symbolSearch.search.key2): The Key Shortcut for
 # searching for a function or variable

devtools/client/preferences/debugger.js

@@ -26,7 +26,8 @@ pref("devtools.debugger.ui.variables-sorting-enabled", true);
 pref("devtools.debugger.ui.variables-only-enum-visible", false);
 pref("devtools.debugger.ui.variables-searchbox-visible", false);
 pref("devtools.debugger.ui.framework-grouping-on", true);
-pref("devtools.debugger.call-stack-visible", false);
+pref("devtools.debugger.call-stack-visible", true);
+pref("devtools.debugger.scopes-visible", true);
 pref("devtools.debugger.start-panel-collapsed", false);
 pref("devtools.debugger.end-panel-collapsed", false);
 pref("devtools.debugger.tabs", "[]");
@@ -46,4 +47,5 @@ pref("devtools.debugger.features.root", false);
 pref("devtools.debugger.features.column-breakpoints", false);
 pref("devtools.debugger.features.map-scopes", true);
 pref("devtools.debugger.features.breakpoints-dropdown", false);
-pref("devtools.debugger.features.remove-command-bar-options", false);
+pref("devtools.debugger.features.remove-command-bar-options", false);
+pref("devtools.debugger.features.workers", false);