Bug 1376135 - Upgrade debugger frontend v0.7.0 (6/24). r=jdescottes

devtools/client/debugger/new/debugger.css

@@ -1628,16 +1628,16 @@ html .toggle-button-end.vertical svg {
   color: var(--theme-highlight-blue);
   text-decoration: underline;
 }
+
 .popover .preview .header .link:hover {
   cursor: pointer;
 }
 
-.selected-token {
+.selection, .debug-expression.selection {
   background-color: var(--theme-highlight-yellow);
-  color: var(--theme-selection-color);
 }
 
-.selected-token:hover {
+.selection:hover {
   cursor: pointer;
 }
 
@@ -1711,14 +1711,14 @@ html .toggle-button-end.vertical svg {
   cursor: pointer;
 }
 .editor-wrapper {
-  --debug-line-background: rgba(226, 236, 247, 0.5);
   --debug-line-border: rgb(145, 188, 219);
+  --debug-expression-background: rgba(202, 227, 255, 0.5);
   --editor-searchbar-height: 27px;
   --editor-second-searchbar-height: 27px;
 }
 
 .theme-dark .editor-wrapper {
-  --debug-line-background: rgb(73, 82, 103);
+  --debug-expression-background: rgb(73, 82, 103);
   --debug-line-border: rgb(119, 134, 162);
 }
 
@@ -1872,13 +1872,13 @@ html[dir="rtl"] .editor-mount {
   color: var(--theme-content-color3);
 }
 
-.new-debug-line .CodeMirror-line {
-  background-color: var(--debug-line-background) !important;
-  outline: var(--debug-line-border) solid 1px;
+.debug-expression {
+  background-color: var(--debug-expression-background);
 }
 
-.new-debug-line .CodeMirror-linenumber {
+.new-debug-line .CodeMirror-line {
   background-color: transparent !important;
+  outline: var(--debug-line-border) solid 1px;
 }
 
 /* Don't display the highlight color since the debug line

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

@@ -29952,6 +29952,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          }
 
 	          this.worker.removeEventListener("message", listener);
+
 	          if (result.error) {
 	            reject(result.error);
 	          } else {
@@ -30540,7 +30541,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        symbols.functions.push({
 	          name: (0, _getFunctionName2.default)(path),
 	          location: path.node.loc,
-	          parameterNames: getFunctionParameterNames(path)
+	          parameterNames: getFunctionParameterNames(path),
+	          identifier: path.node.id
 	        });
 	      }
 
@@ -30803,7 +30805,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    enter(path) {
 	      var node = path.node;
 
-	      if (t.isMemberExpression(node) && node.property.name === token && (0, _helpers.nodeContainsPosition)(node, location)) {
+	      if (!(0, _helpers.nodeContainsPosition)(node, location)) {
+	        return path.skip();
+	      }
+
+	      if (t.isMemberExpression(node) && node.property.name === token) {
 	        var memberExpression = (0, _helpers.getMemberExpression)(node);
 	        expression = {
 	          expression: memberExpression,
@@ -30837,7 +30843,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	  (0, _ast.traverseAst)(source, {
 	    enter(path) {
-	      if ((0, _helpers.isLexicalScope)(path) && (0, _helpers.nodeContainsPosition)(path.node, location)) {
+	      if (!(0, _helpers.nodeContainsPosition)(path.node, location)) {
+	        return path.skip();
+	      }
+
+	      if ((0, _helpers.isLexicalScope)(path)) {
 	        closestPath = path;
 	      }
 	    }
@@ -30855,9 +30865,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	  (0, _ast.traverseAst)(source, {
 	    enter(path) {
-	      if ((0, _helpers.nodeContainsPosition)(path.node, location)) {
-	        closestPath = path;
+	      if (!(0, _helpers.nodeContainsPosition)(path.node, location)) {
+	        return path.skip();
 	      }
+	      closestPath = path;
 	    }
 	  });
 
@@ -30961,31 +30972,23 @@ return /******/ (function(modules) { // webpackBootstrap
 	  value: true
 	});
 
+	var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 	var _get = __webpack_require__(1073);
 
 	var _get2 = _interopRequireDefault(_get);
 
 	var _helpers = __webpack_require__(1052);
 
-	var _ast = __webpack_require__(1051);
+	var _getSymbols = __webpack_require__(1050);
+
+	var _getSymbols2 = _interopRequireDefault(_getSymbols);
 
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-	/**
-	 * Returns all functions (declarations, expressions, arrows) for the given
-	 * source
-	 */
 	function findFunctions(source) {
-	  var fns = [];
-	  (0, _ast.traverseAst)(source, {
-	    enter(path) {
-	      if ((0, _helpers.isFunction)(path)) {
-	        fns.push(path);
-	      }
-	    }
-	  });
-
-	  return fns;
+	  var symbols = (0, _getSymbols2.default)(source);
+	  return symbols.functions;
 	}
 
 	/**
@@ -30994,19 +30997,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * but before the function parameters.
 	 */
 
-
-	var getLocation = path => {
-	  var location = Object.assign({}, (0, _get2.default)("node.loc", path));
+	function getLocation(func) {
+	  var location = _extends({}, func.location);
 
 	  // if the function has an identifier, start the block after it so the
 	  // identifier is included in the "scope" of its parent
-	  var identifierEnd = (0, _get2.default)("node.id.loc.end", path);
+	  var identifierEnd = (0, _get2.default)("identifier.loc.end", func);
 	  if (identifierEnd) {
 	    location.start = identifierEnd;
 	  }
 
 	  return location;
-	};
+	}
 
 	/**
 	 * Reduces an array of locations to remove items that are completely enclosed

devtools/client/debugger/new/pretty-print-worker.js

@@ -5922,6 +5922,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          }
 
 	          this.worker.removeEventListener("message", listener);
+
 	          if (result.error) {
 	            reject(result.error);
 	          } else {

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

@@ -556,6 +556,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          }
 
 	          this.worker.removeEventListener("message", listener);
+
 	          if (result.error) {
 	            reject(result.error);
 	          } else {

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

@@ -45,6 +45,7 @@ support-files =
 [browser_dbg-breaking.js]
 [browser_dbg-breaking-from-console.js]
 [browser_dbg-breakpoints.js]
+[browser_dbg-breakpoints-reloading.js]
 [browser_dbg-breakpoints-cond.js]
 [browser_dbg-call-stack.js]
 [browser_dbg-expressions.js]
@@ -68,6 +69,9 @@ skip-if = os == "linux" # bug 1351952
 [browser_dbg-searching.js]
 skip-if = true
 [browser_dbg-sourcemaps.js]
+[browser_dbg-sourcemaps-reloading.js]
 [browser_dbg-sourcemaps2.js]
 [browser_dbg-sourcemaps-bogus.js]
 [browser_dbg-sources.js]
+[browser_dbg-tabs.js]
+[browser_dbg-toggling-tools.js]

devtools/client/debugger/new/test/mochitest/browser_dbg-breakpoints-reloading.js

@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests pending breakpoints when reloading
+
+// Utilities for interacting with the editor
+function clickGutter(dbg, line) {
+  clickElement(dbg, "gutter", line);
+}
+
+function getLineEl(dbg, line) {
+  const lines = dbg.win.document.querySelectorAll(".CodeMirror-code > div");
+  return lines[line - 1];
+}
+
+function addBreakpoint(dbg, line) {
+  clickGutter(dbg, line);
+  return waitForDispatch(dbg, "ADD_BREAKPOINT");
+}
+
+function assertEditorBreakpoint(dbg, line) {
+  const exists = !!getLineEl(dbg, line).querySelector(".new-breakpoint");
+  ok(exists, `Breakpoint exists on line ${line}`);
+}
+
+add_task(function*() {
+  const dbg = yield initDebugger("doc-scripts.html");
+  const { selectors: { getBreakpoints, getBreakpoint }, getState } = dbg;
+  const source = findSource(dbg, "simple1.js");
+
+  yield selectSource(dbg, source.url);
+  yield addBreakpoint(dbg, 5);
+  yield addBreakpoint(dbg, 2);
+
+  yield reload(dbg, "simple1");
+  yield waitForSelectedSource(dbg);
+  assertEditorBreakpoint(dbg, 4);
+  assertEditorBreakpoint(dbg, 5);
+});

devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemaps-reloading.js

@@ -0,0 +1,52 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+add_task(function*() {
+  // NOTE: the CORS call makes the test run times inconsistent
+  requestLongerTimeout(2);
+
+  const dbg = yield initDebugger("doc-sourcemaps.html");
+  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+
+  yield waitForSources(dbg, "entry.js", "output.js", "times2.js", "opts.js");
+  ok(true, "Original sources exist");
+  const entrySrc = findSource(dbg, "entry.js");
+
+  yield selectSource(dbg, entrySrc);
+  ok(
+    dbg.win.cm.getValue().includes("window.keepMeAlive"),
+    "Original source text loaded correctly"
+  );
+
+  // Test that breakpoint sliding is not attempted. The breakpoint
+  // should not move anywhere.
+  yield addBreakpoint(dbg, entrySrc, 13);
+  is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
+  ok(
+    getBreakpoint(getState(), { sourceId: entrySrc.id, line: 13 }),
+    "Breakpoint has correct line"
+  );
+
+  yield addBreakpoint(dbg, entrySrc, 15);
+  yield disableBreakpoint(dbg, entrySrc, 15);
+
+  // Test reloading the debugger
+  yield reload(dbg, "opts.js");
+  yield waitForDispatch(dbg, "LOAD_SOURCE_TEXT");
+
+  is(getBreakpoints(getState()).size, 2, "One breakpoint exists");
+
+  ok(
+    getBreakpoint(getState(), { sourceId: entrySrc.id, line: 13 }),
+    "Breakpoint has correct line"
+  );
+
+  ok(
+    getBreakpoint(getState(), {
+      sourceId: entrySrc.id,
+      line: 15,
+      disabled: true
+    }),
+    "Breakpoint has correct line"
+  );
+});

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

@@ -0,0 +1,39 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests adding and removing tabs
+
+function countTabs(dbg) {
+  return findElement(dbg, "sourceTabs").children.length;
+}
+
+add_task(function*() {
+  let dbg = yield initDebugger("doc-scripts.html");
+
+  yield selectSource(dbg, "simple1");
+  yield selectSource(dbg, "simple2");
+  is(countTabs(dbg), 2);
+
+  // Test reloading the debugger
+  yield reload(dbg, "simple1", "simple2");
+  is(countTabs(dbg), 2);
+  yield waitForSelectedSource(dbg);
+
+  // Test reloading the debuggee a second time
+  yield reload(dbg, "simple1", "simple2");
+  is(countTabs(dbg), 2);
+  yield waitForSelectedSource(dbg);
+});
+
+add_task(function*() {
+  let dbg = yield initDebugger("doc-scripts.html", "simple1", "simple2");
+
+  yield selectSource(dbg, "simple1");
+  yield selectSource(dbg, "simple2");
+  closeTab(dbg, "simple1");
+  closeTab(dbg, "simple2");
+
+  // Test reloading the debugger
+  yield reload(dbg, "simple1", "simple2");
+  is(countTabs(dbg), 0);
+});

devtools/client/debugger/new/test/mochitest/browser_dbg-toggling-tools.js

@@ -0,0 +1,38 @@
+// Return a promise with a reference to jsterm, opening the split
+// console if necessary.  This cleans up the split console pref so
+// it won't pollute other tests.
+function getSplitConsole(dbg) {
+  const { toolbox, win } = dbg;
+
+  registerCleanupFunction(() => {
+    Services.prefs.clearUserPref("devtools.toolbox.splitconsoleEnabled");
+  });
+
+  if (!win) {
+    win = toolbox.win;
+  }
+
+  if (!toolbox.splitConsole) {
+    pressKey(dbg, "Escape");
+  }
+
+  return new Promise(resolve => {
+    toolbox.getPanelWhenReady("webconsole").then(() => {
+      ok(toolbox.splitConsole, "Split console is shown.");
+      let jsterm = toolbox.getPanel("webconsole").hud.jsterm;
+      resolve(jsterm);
+    });
+  });
+}
+
+add_task(function*() {
+  const dbg = yield initDebugger("doc-scripts.html");
+
+  yield selectSource(dbg, "long");
+  dbg.win.cm.scrollTo(0, 284);
+
+  pressKey(dbg, "inspector");
+  pressKey(dbg, "debugger");
+
+  is(dbg.win.cm.getScrollInfo().top, 284);
+});

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

@@ -191,6 +191,13 @@ function waitForElement(dbg, selector) {
   return waitUntil(() => findElementWithSelector(dbg, selector));
 }
 
+function waitForSelectedSource(dbg) {
+  return waitForState(dbg, state => {
+    const source = dbg.selectors.getSelectedSource(state);
+    return source && source.has("loading") && !source.get("loading");
+  });
+}
+
 /**
  * Assert that the debugger is paused at the correct location.
  *
@@ -215,10 +222,20 @@ function assertPausedLocation(dbg, source, line) {
   is(location.line, line);
 
   // Check the debug line
+  const lineInfo = getCM(dbg).lineInfo(line - 1);
   ok(
-    getCM(dbg).lineInfo(line - 1).wrapClass.includes("debug-line"),
+    lineInfo.wrapClass.includes("debug-line"),
     "Line is highlighted as paused"
   );
+
+  const markedSpans = lineInfo.handle.markedSpans;
+  if (markedSpans && markedSpans.length > 0) {
+    const marker = markedSpans[0].marker;
+    ok(
+      marker.className.includes("debug-expression"),
+      "expression is highlighted as paused"
+    );
+  }
 }
 
 /**
@@ -381,12 +398,13 @@ function findSource(dbg, url) {
 function selectSource(dbg, url, line) {
   info("Selecting source: " + url);
   const source = findSource(dbg, url);
-  const hasText = !!source.text && !source.loading;
-  dbg.actions.selectSource(source.id, { line });
+  return dbg.actions.selectSource(source.id, { line });
+}
 
-  if (!hasText) {
-    return waitForDispatch(dbg, "LOAD_SOURCE_TEXT");
-  }
+function closeTab(dbg, url) {
+  info("Closing tab: " + url);
+  const source = findSource(dbg, url);
+  return dbg.actions.closeTab(source.url);
 }
 
 /**
@@ -460,7 +478,7 @@ function deleteExpression(dbg, input) {
  * @static
  */
 function reload(dbg, ...sources) {
-  return dbg.client.reload().then(() => waitForSources(...sources));
+  return dbg.client.reload().then(() => waitForSources(dbg, ...sources));
 }
 
 /**
@@ -496,6 +514,13 @@ function addBreakpoint(dbg, source, line, col) {
   return waitForDispatch(dbg, "ADD_BREAKPOINT");
 }
 
+function disableBreakpoint(dbg, source, line, col) {
+  source = findSource(dbg, source);
+  const sourceId = source.id;
+  dbg.actions.disableBreakpoint({ sourceId, line, col });
+  return waitForDispatch(dbg, "DISABLE_BREAKPOINT");
+}
+
 /**
  * Removes a breakpoint from a source at line/col.
  *
@@ -558,6 +583,10 @@ function invokeInTab(fnc) {
 const isLinux = Services.appinfo.OS === "Linux";
 const isMac = Services.appinfo.OS === "Darwin";
 const cmdOrCtrl = isLinux ? { ctrlKey: true } : { metaKey: true };
+const shiftOrAlt = isMac
+  ? { accelKey: true, shiftKey: true }
+  : { accelKey: true, altKey: true };
+
 // On Mac, going to beginning/end only works with meta+left/right.  On
 // Windows, it only works with home/end.  On Linux, apparently, either
 // ctrl+left/right or home/end work.
@@ -567,7 +596,10 @@ const endKey = isMac
 const startKey = isMac
   ? { code: "VK_LEFT", modifiers: cmdOrCtrl }
   : { code: "VK_HOME" };
+
 const keyMappings = {
+  debugger: { code: "s", modifiers: shiftOrAlt },
+  inspector: { code: "c", modifiers: shiftOrAlt },
   sourceSearch: { code: "p", modifiers: cmdOrCtrl },
   fileSearch: { code: "f", modifiers: cmdOrCtrl },
   Enter: { code: "VK_RETURN" },
@@ -640,6 +672,7 @@ const selectors = {
   highlightLine: ".CodeMirror-code > .highlight-line",
   codeMirror: ".CodeMirror",
   resume: ".resume.active",
+  sourceTabs: `.source-tabs`,
   stepOver: ".stepOver.active",
   stepOut: ".stepOut.active",
   stepIn: ".stepIn.active",