Bug 1446501 - Update Debugger Frontend v24. r=jdescottes

MozReview-Commit-ID: DgETcSJv89H

devtools/client/debugger/new/README.mozilla

@@ -1,9 +1,9 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 23.0
+Version 24.0
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-22...release-23
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-23...release-24
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.0

devtools/client/debugger/new/debugger.css

@@ -106,11 +106,13 @@
 
 :root.theme-light,
 :root .theme-light {
+  --search-overlays-semitransparent: rgba(221, 225, 228, 0.66);
   --popup-shadow-color: #d0d0d0;
 }
 
 :root.theme-dark,
 :root .theme-dark {
+  --search-overlays-semitransparent: rgba(42, 46, 56, 0.66);
   --popup-shadow-color: #5c667b;
 }
 /* This Source Code Form is subject to the terms of the Mozilla Public
@@ -1136,11 +1138,58 @@ html[dir="rtl"] .arrow svg,
   user-select: none;
 }
 
+.sources-clear-root {
+  padding: 4px 3px 4px 3px;
+  width: 100%;
+  text-align: start;
+  white-space: nowrap;
+  color: inherit;
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-bottom: 1px solid var(--theme-splitter-color);
+}
+
+.sources-clear-root i {
+  margin-right: 5px;
+  position: relative;
+}
+
+.sources-clear-root svg {
+  width: 13px;
+  height: 13px;
+}
+
+.theme-dark .sources-clear-root svg {
+  fill: var(--theme-body-color);
+}
+
+.sources-clear-root .home {
+  opacity: 0.5;
+}
+
+.sources-clear-root .breadcrumb svg {
+  width: 5px;
+  top: 2px;
+  position: absolute;
+  margin-right: 5px;
+}
+
+.sources-clear-root-label {
+  margin-left: 5px;
+}
+
+.sources-pane {
+  display: flex;
+  flex: 1;
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
 .sources-list {
   flex: 1;
   display: flex;
-  overflow-x: hidden;
-  overflow-y: auto;
 }
 
 .sources-list .tree:focus {
@@ -1288,6 +1337,31 @@ html[dir="rtl"] .arrow svg,
   .tree-indent:last-of-type {
   margin-inline-end: 4px;
 }
+
+/*
+  Custom root styles
+*/
+.sources-pane.sources-list-custom-root {
+  display: block;
+  position: relative;
+}
+
+.sources-list-custom-root .sources-pane {
+  display: block;
+}
+
+.sources-list-custom-root .sources-list {
+  position: absolute;
+  top: 26px;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+/* Removes start margin when a custom root is used */
+.sources-list-custom-root .tree > .tree-node[data-expandable="false"][aria-level="0"] {
+  padding-inline-start: 4px;
+}
 /* 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
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
@@ -1388,6 +1462,10 @@ html[dir="rtl"] .arrow svg,
   display: flex;
 }
 
+.theme-dark .outline-footer button {
+    color: var(--theme-body-color);
+}
+
 .outline-footer button.active {
   background: var(--theme-highlight-blue);
   color: #ffffff;
@@ -3863,8 +3941,18 @@ html .welcomebox .toggle-button-end.collapsed {
   color: white;
 }
 
-.result-list.big li.selected .title {
-  color: var(--theme-body-color);
+.result-list.big li.selected {
+  background-color: var(--theme-selection-background);
+  color: white;
+}
+
+.result-list.big li.selected .subtitle {
+  color: white;
+}
+
+.result-list.big li.selected .subtitle .highlight {
+  color: white;
+  font-weight: bold;
 }
 
 .result-list.big li .subtitle {
@@ -3876,6 +3964,10 @@ html .welcomebox .toggle-button-end.collapsed {
   line-height: 1.5em;
 }
 
+.theme-dark .result-list.big li.selected .subtitle {
+  color: white;
+}
+
 .theme-dark .result-list.big li .subtitle {
   color: var(--theme-comment-alt);
 }
@@ -3893,11 +3985,13 @@ html .welcomebox .toggle-button-end.collapsed {
 }
 .result-item .title .highlight {
   font-weight: bold;
+  background-color: transparent;
 }
 
 .result-item .subtitle .highlight {
   color: var(--grey-90);
   font-weight: 500;
+  background-color: transparent;
 }
 
 .theme-dark .result-item .title .highlight,

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

@@ -1353,6 +1353,7 @@ exports.isFunction = isFunction;
 exports.isAwaitExpression = isAwaitExpression;
 exports.isYieldExpression = isYieldExpression;
 exports.isVariable = isVariable;
+exports.isComputedExpression = isComputedExpression;
 exports.getMemberExpression = getMemberExpression;
 exports.getVariables = getVariables;
 
@@ -1383,6 +1384,11 @@ function isVariable(path) {
   return t.isVariableDeclaration(node) || isFunction(path) && path.node.params != null && path.node.params.length || t.isObjectProperty(node) && !isFunction(path.node.value);
 }
 
+function isComputedExpression(expression) {
+  return (/^\[/m.test(expression)
+  );
+}
+
 function getMemberExpression(root) {
   function _getMemberExpression(node, expr) {
     if (t.isMemberExpression(node)) {
@@ -1586,7 +1592,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
                                                                                                                                                                                                                                                                    * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 exports.clearSymbols = clearSymbols;
-exports.default = getSymbols;
+exports.getSymbols = getSymbols;
 
 var _flatten = __webpack_require__(706);
 
@@ -1848,10 +1854,11 @@ function extendSnippet(name, expression, path = null, prevPath = null) {
   const prevComputed = prevPath && prevPath.node.computed;
   const prevArray = t.isArrayExpression(prevPath);
   const array = t.isArrayExpression(path);
+  const value = path && path.node.property && path.node.property.extra && path.node.property.extra.raw || "";
 
   if (expression === "") {
     if (computed) {
-      return `[${name}]`;
+      return name === undefined ? `[${value}]` : `[${name}]`;
     }
     return name;
   }
@@ -1860,21 +1867,25 @@ function extendSnippet(name, expression, path = null, prevPath = null) {
     if (prevComputed || prevArray) {
       return `[${name}]${expression}`;
     }
-    return `[${name}].${expression}`;
+    return `[${name === undefined ? value : name}].${expression}`;
   }
 
   if (prevComputed || prevArray) {
     return `${name}${expression}`;
   }
 
+  if ((0, _helpers.isComputedExpression)(expression) && name !== undefined) {
+    return `${name}${expression}`;
+  }
+
   return `${name}.${expression}`;
 }
 
 function getMemberSnippet(node, expression = "") {
   if (t.isMemberExpression(node)) {
     const name = node.property.name;
-
-    return getMemberSnippet(node.object, extendSnippet(name, expression));
+    const snippet = getMemberSnippet(node.object, extendSnippet(name, expression, { node }));
+    return snippet;
   }
 
   if (t.isCallExpression(node)) {
@@ -1886,6 +1897,9 @@ function getMemberSnippet(node, expression = "") {
   }
 
   if (t.isIdentifier(node)) {
+    if ((0, _helpers.isComputedExpression)(expression)) {
+      return `${node.name}${expression}`;
+    }
     return `${node.name}.${expression}`;
   }
 
@@ -2053,8 +2067,6 @@ var _closest = __webpack_require__(1455);
 
 var _getSymbols = __webpack_require__(1457);
 
-var _getSymbols2 = _interopRequireDefault(_getSymbols);
-
 var _ast = __webpack_require__(1375);
 
 var _getScopes = __webpack_require__(2413);
@@ -2092,7 +2104,7 @@ const { workerHandler } = _devtoolsUtils.workerUtils;
 self.onmessage = workerHandler({
   getClosestExpression: _closest.getClosestExpression,
   findOutOfScopeLocations: _findOutOfScopeLocations2.default,
-  getSymbols: _getSymbols2.default,
+  getSymbols: _getSymbols.getSymbols,
   getScopes: _getScopes2.default,
   clearSymbols: _getSymbols.clearSymbols,
   clearScopes: _getScopes.clearScopes,
@@ -2327,12 +2339,10 @@ var _contains = __webpack_require__(1456);
 
 var _getSymbols = __webpack_require__(1457);
 
-var _getSymbols2 = _interopRequireDefault(_getSymbols);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function findSymbols(source) {
-  const { functions, comments } = (0, _getSymbols2.default)(source);
+  const { functions, comments } = (0, _getSymbols.getSymbols)(source);
   return { functions, comments };
 }
 
@@ -2685,12 +2695,8 @@ exports.getFramework = getFramework;
 
 var _getSymbols = __webpack_require__(1457);
 
-var _getSymbols2 = _interopRequireDefault(_getSymbols);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function getFramework(sourceId) {
-  const sourceSymbols = (0, _getSymbols2.default)(sourceId);
+  const sourceSymbols = (0, _getSymbols.getSymbols)(sourceId);
 
   if (isReactComponent(sourceSymbols)) {
     return "React";

devtools/client/debugger/new/test/mochitest/browser_dbg-content-script-sources.js

@@ -1,8 +1,5 @@
 "use strict";
 
-/* global ExtensionTestUtils, closeTab, openToolboxForTab, assertDebugLine,
-          waitForSelectedSource */
-
 // Tests that the content scripts are listed in the source tree.
 
 async function selectContentScriptSources(dbg) {
@@ -67,8 +64,8 @@ add_task(async function() {
     info(`Reloading tab (${i} time)`);
     gBrowser.reloadTab(gBrowser.selectedTab);
     await waitForPaused(dbg);
-    await waitForSources(dbg, "content_script.js");
     await waitForSelectedSource(dbg, "content_script.js");
+
     ok(
       findElementWithSelector(dbg, ".sources-list .focused"),
       "Source is focused"

devtools/client/debugger/new/test/mochitest/browser_dbg-editor-highlight.js

@@ -13,12 +13,8 @@ add_task(async function() {
   // The source itself doesn't even exist yet, and using
   // `selectSourceURL` will set a pending request to load this source
   // and highlight a specific line.
-  dbg.actions.selectSourceURL(sourceUrl, { location: { line: 66 } });
 
-  // Wait for the source text to load and make sure we're in the right
-  // place.
-  await waitForSelectedSource(dbg, sourceUrl);
-  log(`loaded source`);
+  await selectSource(dbg, sourceUrl, 66)
 
   // TODO: revisit highlighting lines when the debugger opens
   // assertHighlightLocation(dbg, "long.js", 66);

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

@@ -17,7 +17,6 @@ add_task(async function() {
   const { selectors: { getSelectedSource }, getState } = dbg;
 
   await selectSource(dbg, "simple1", 1);
-  await waitForSelectedSource(dbg, "simple1");
 
   findElementWithSelector(dbg, ".outline-tab").click();
   is(getItems(dbg).length, 5, "5 items in the list");

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

@@ -3,46 +3,43 @@
 
 "use strict";
 
-// Tests that pretty-printing updates console messages.
+async function waitForConsoleLink(dbg, text) {
+  const toolbox = dbg.toolbox;
+  const console = await toolbox.selectTool("webconsole");
+  const hud = console.hud;
 
+  return waitFor(() => {
+    // Wait until the message updates.
+    const found = hud.ui.outputNode.querySelector(".frame-link-source");
+    if (!found) {
+      return false;
+    }
+
+    const linkText = found.textContent;
+    if (!text) {
+      return linkText;
+    }
+
+    return linkText == text ? linkText : null;
+  });
+}
+
+// Tests that pretty-printing updates console messages.
 add_task(async function() {
   const dbg = await initDebugger("doc-minified.html");
   invokeInTab("arithmetic");
 
   info("Switch to console and check message");
-  const toolbox = dbg.toolbox;
-  const console = await toolbox.selectTool("webconsole");
-  const hud = console.hud;
-
-  let node = await waitFor(() =>
-    hud.ui.outputNode.querySelector(".frame-link-source")
-  );
-  const initialLocation = "math.min.js:3:65";
-  is(node.textContent, initialLocation, "location is correct in minified code");
+  await waitForConsoleLink(dbg,  "math.min.js:3:65");
 
   info("Switch back to debugger and pretty-print");
-  await toolbox.selectTool("jsdebugger");
+  await dbg.toolbox.selectTool("jsdebugger");
   await selectSource(dbg, "math.min.js", 2);
+
   clickElement(dbg, "prettyPrintButton");
-
-  await waitForSource(dbg, "math.min.js:formatted");
-  const ppSrc = findSource(dbg, "math.min.js:formatted");
-
-  ok(ppSrc, "Pretty-printed source exists");
+  await waitForSelectedSource(dbg, "math.min.js:formatted");
 
   info("Switch back to console and check message");
-  node = await waitFor(() => {
-    // Wait until the message updates.
-    const found = hud.ui.outputNode.querySelector(".frame-link-source");
-    if (found.textContent == initialLocation) {
-      return null;
-    }
-    return found;
-  });
-
-  is(
-    node.textContent,
-    "math.min.js:formatted:22",
-    "location is correct in minified code"
-  );
+  await waitForConsoleLink(dbg, "math.min.js:formatted:22");
+  ok(true);
 });

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

@@ -21,8 +21,6 @@ add_task(async function() {
   const dbg = await initDebugger("reload/doc-reload.html");
   await waitForSource(dbg, "sjs_code_reload");
   await selectSource(dbg, "sjs_code_reload");
-  await waitForSelectedSource(dbg, "sjs_code_reload");
-
   await addBreakpoint(dbg, "sjs_code_reload", 2);
 
   await reload(dbg, "sjs_code_reload");

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

@@ -45,6 +45,7 @@ add_task(async function() {
   // Tests the existence of the sourcemap link in the original source.
   ok(findElement(dbg, "sourceMapLink"), "Sourcemap link in original source");
   await selectSource(dbg, "main.min.js");
+
   ok(
     !findElement(dbg, "sourceMapLink"),
     "No Sourcemap link exists in generated source"

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

@@ -26,7 +26,6 @@ add_task(async function test() {
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);
-
   await stepIn(dbg);
   await stepIn(dbg);
   await stepIn(dbg);

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

@@ -177,10 +177,11 @@ function waitForState(dbg, predicate, msg) {
     }
 
     const unsubscribe = dbg.store.subscribe(() => {
-      if (predicate(dbg.store.getState())) {
+      const result = predicate(dbg.store.getState())
+      if (result) {
         info(`Finished waiting for state change: ${msg || ""}`);
         unsubscribe();
-        resolve();
+        resolve(result);
       }
     });
   });
@@ -230,7 +231,7 @@ function waitForSource(dbg, url) {
   return waitForState(dbg, state => {
     const sources = dbg.selectors.getSources(state);
     return sources.find(s => (s.get("url") || "").includes(url));
-  });
+  }, `source exists`);
 }
 
 async function waitForElement(dbg, name) {
@@ -592,9 +593,10 @@ function waitForLoadedSources(dbg) {
  * @return {Promise}
  * @static
  */
-function selectSource(dbg, url, line) {
+async function selectSource(dbg, url, line) {
   const source = findSource(dbg, url);
-  return dbg.actions.selectLocation({ sourceId: source.id, line });
+  await dbg.actions.selectLocation({ sourceId: source.id, line });
+  return waitForSelectedSource(dbg, url);
 }
 
 function closeTab(dbg, url) {