Bug 1447682 - Update Debugger Frontend v26. r=jdescottes

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 25.0
+Version 26.0
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-24...release-25
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-25...release-26
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.0

devtools/client/debugger/new/debugger.css

@@ -671,8 +671,20 @@ html[dir="rtl"] img.arrow {
   transform: rotate(90deg);
 }
 
-/* TODO (Amit): html is just for specificity. keep it like this? */
-html .arrow.expanded svg {
+.arrow svg {
+  transition: transform 0.125s ease;
+  width: 10px;
+  margin-inline-end: 5px;
+  transform: rotate(-90deg);
+}
+
+html[dir="rtl"] .arrow svg,
+.arrow svg:dir(rtl),
+.arrow svg:-moz-locale-dir(rtl) {
+  transform: rotate(90deg);
+}
+
+.arrow.expanded.expanded svg {
   transform: rotate(0deg);
 }
 
@@ -790,10 +802,6 @@ html[dir="rtl"] .managed-tree .tree .node > div {
   user-select: none;
 }
 
-.tree button {
-  display: block;
-}
-
 .tree .tree-node {
   display: flex;
 }
@@ -817,7 +825,7 @@ html[dir="rtl"] .managed-tree .tree .node > div {
 
 /* For non expandable root nodes, we don't have .tree-indent elements, so we declare
    the margin on the start of the node */
-.tree-node[data-expandable="false"][aria-level="0"] {
+.tree-node[data-expandable="false"][aria-level="1"] {
   padding-inline-start: 15px
 }
 
@@ -825,35 +833,34 @@ html[dir="rtl"] .managed-tree .tree .node > div {
   cursor: default;
 }
 
+.tree-node img.arrow {
+  mask: url("chrome://devtools/skin/images/devtools-components/arrow.svg") no-repeat;
+  mask-size: 100%;
+  width: 9px;
+  height: 9px;
+  margin-inline-start: 1px;
+  margin-inline-end: 4px;
+  background-color: var(--theme-splitter-color, #9B9B9B);
+  transform: rotate(-90deg);
+  transition: transform 0.125s ease;
+  align-self: center;
+}
+
+html[dir="rtl"] .tree-node img.arrow {
+  transform: rotate(90deg);
+}
+
+.tree-node img.arrow.expanded.expanded {
+  transform: rotate(0deg);
+ }
+
 .tree .tree-node.focused {
   color: white;
   background-color: var(--theme-selection-background, #0a84ff);
 }
 
-.tree-node.focused .arrow svg {
-  fill: currentColor;
-}
-
-.tree-node:hover img {
-  background-color: var(--theme-content-color3);
-}
-
-.arrow svg {
-  fill: var(--theme-splitter-color, #9B9B9B);
-  transition: transform 0.125s ease;
-  width: 10px;
-  margin-inline-end: 5px;
-  transform: rotate(-90deg);
-}
-
-html[dir="rtl"] .arrow svg,
-.arrow svg:dir(rtl),
-.arrow svg:-moz-locale-dir(rtl) {
-  transform: rotate(90deg);
-}
-
-.arrow.expanded.expanded svg {
-  transform: rotate(0deg);
+.tree-node.focused img.arrow {
+  background-color: currentColor;
 }
 /* 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
@@ -1332,9 +1339,7 @@ html[dir="rtl"] .arrow svg,
   background-color: white;
 }
 
-.tree:not(.object-inspector)
-  .tree-node[data-expandable="false"]
-  .tree-indent:last-of-type {
+.tree:not(.object-inspector) .tree-node[data-expandable="false"] .tree-indent:last-of-type {
   margin-inline-end: 4px;
 }
 
@@ -1893,6 +1898,7 @@ html .toggle-button.end.vertical svg {
   --node-color: var(--theme-highlight-purple);
   --reference-color: var(--theme-highlight-blue);
   --comment-node-color: var(--theme-comment);
+  --stack-function-color: var(--theme-highlight-red);
 }
 
 .theme-firebug {
@@ -1946,6 +1952,7 @@ html .toggle-button.end.vertical svg {
   color: currentColor;
   text-decoration: none;
   font-style: italic;
+  cursor: pointer;
 }
 
 .objectBox-string a:hover {
@@ -1958,6 +1965,24 @@ html .toggle-button.end.vertical svg {
   color: var(--object-color);
 }
 
+.objectBox-stackTrace-grid {
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  margin-top: 3px;
+}
+
+.objectBox-stackTrace-fn::before {
+  content: "\3BB"; /* The "lambda" symbol */
+  color: var(--theme-body-color);
+  display: inline-block;
+  margin: 0 0.3em;
+}
+
+.objectBox-stackTrace-fn {
+  color: var(--stack-function-color);
+  padding-inline-start: 17px;
+}
+
 .objectBox-Location,
 .location {
   color: var(--location-color);
@@ -2088,35 +2113,35 @@ html .toggle-button.end.vertical svg {
 /******************************************************************************/
 /* Open DOMNode in inspector button */
 
-.open-inspector svg {
-  fill: var(--comment-node-color);
+button.open-inspector {
+  mask: url("chrome://devtools/skin/images/devtools-reps/open-inspector.svg") no-repeat;
+  display: inline-block;
+  background-color: var(--comment-node-color);
   height: 16px;
-  width: 16px;
   margin-left: .25em;
-  cursor: pointer;
   vertical-align: middle;
 }
 
-.objectBox-node:hover .open-inspector svg,
-.objectBox-textNode:hover .open-inspector svg,
-.open-inspector svg:hover {
-  fill: var(--theme-highlight-blue);
+.objectBox-node:hover .open-inspector,
+.objectBox-textNode:hover .open-inspector,
+.open-inspector:hover {
+  background-color: var(--theme-highlight-blue);
 }
 
 /******************************************************************************/
 /* Jump to definition button */
 
-.jump-definition svg {
-  stroke: var(--comment-node-color);
+button.jump-definition {
+  mask: url("chrome://devtools/skin/images/devtools-reps/jump-definition.svg") no-repeat;
+  display: inline-block;
+  background-color: var(--comment-node-color);
   height: 16px;
-  width: 16px;
   margin-left: .25em;
-  cursor: pointer;
   vertical-align: middle;
 }
 
-.jump-definition svg:hover {
-  stroke: var(--theme-highlight-blue);
+.jump-definition:hover {
+  background-color: var(--theme-highlight-blue);
 }
 
 /******************************************************************************/
@@ -2148,9 +2173,24 @@ html .toggle-button.end.vertical svg {
   color: var(--theme-comment);
 }
 
+.tree.object-inspector .block .object-label,
+.tree.object-inspector .block .object-label * {
+  color: var(--theme-body-color);
+}
+
+.tree.object-inspector .block .object-label:before {
+  content: "\2632   ";
+  font-size: 1.1em;
+}
+
 .object-inspector .object-delimiter {
   color: var(--theme-comment);
 }
+
+.object-inspector .tree-node img.arrow {
+  display: inline-block;
+  vertical-align: middle;
+}
 /* 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/>. */
@@ -3601,6 +3641,17 @@ img.ignore-exceptions {
 .scopes-list .function-signature {
   display: inline-block;
 }
+
+.scopes-list .scope-type-toggle {
+  text-align: center;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.scopes-list .scope-type-toggle a {
+  /* Override color so that the link doesn't turn purple */
+  color: var(--theme-body-color);
+}
 /* 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/>. */

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

@@ -128,6 +128,7 @@ support-files =
 [browser_dbg-async-stepping.js]
 [browser_dbg-babel-scopes.js]
 [browser_dbg-babel-stepping.js]
+[browser_dbg-babel-preview.js]
 [browser_dbg-breaking.js]
 [browser_dbg-breaking-from-console.js]
 [browser_dbg-breakpoints.js]

devtools/client/debugger/new/test/mochitest/browser_dbg-babel-preview.js

@@ -0,0 +1,236 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+function getCoordsFromPosition(cm, { line, ch }) {
+  return cm.charCoords({ line: ~~line, ch: ~~ch });
+}
+
+async function assertPreviews(dbg, previews) {
+  for (const { line, column, expression, result, fields } of previews) {
+    hoverAtPos(dbg, { line, ch: column });
+
+    if (fields && result) {
+      throw new Error("Invalid test fixture");
+    }
+
+    if (fields) {
+      for (const [field, value] of fields) {
+        await assertPreviewPopup(dbg, { expression, field, value });
+      }
+    } else {
+      await assertPreviewTextValue(dbg, { expression, text: result });
+    }
+
+    // Move to column 0 after to make sure that the preview created by this
+    // test does not affect later attempts to hover and preview.
+    hoverAtPos(dbg, { line: line - 1, ch: 0 });
+  }
+}
+
+async function breakpointPreviews(dbg, fixture, { line, column }, previews) {
+  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+
+  const filename = `fixtures/${fixture}/input.js`;
+  await waitForSources(dbg, filename);
+
+  ok(true, "Original sources exist");
+  const source = findSource(dbg, filename);
+
+  await selectSource(dbg, source);
+
+  // Test that breakpoint is not off by a line.
+  await addBreakpoint(dbg, source, line);
+
+  is(getBreakpoints(getState()).size, 1, "One breakpoint exists");
+  ok(
+    getBreakpoint(getState(), { sourceId: source.id, line, column }),
+    "Breakpoint has correct line"
+  );
+
+  const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
+
+  const invokeResult = invokeInTab(fnName);
+
+  let invokeFailed = await Promise.race([
+    waitForPaused(dbg),
+    invokeResult.then(() => new Promise(() => {}), () => true)
+  ]);
+
+  if (invokeFailed) {
+    return invokeResult;
+  }
+
+  assertPausedLocation(dbg);
+
+  await assertPreviews(dbg, previews);
+
+  await removeBreakpoint(dbg, source.id, line, column);
+
+  is(getBreakpoints(getState()).size, 0, "Breakpoint reverted");
+
+  await resume(dbg);
+
+  // If the invoke errored later somehow, capture here so the error is reported nicely.
+  await invokeResult;
+
+  ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
+}
+
+add_task(async function() {
+  await pushPref("devtools.debugger.features.map-scopes", true);
+
+  const dbg = await initDebugger("doc-babel.html");
+
+  await breakpointPreviews(dbg, "for-of", { line: 5, column: 4 }, [
+    {
+      line: 5,
+      column: 7,
+      expression: "doThing;",
+      result: "doThing(arg)",
+    },
+    {
+      line: 5,
+      column: 12,
+      expression: "x;",
+      result: "1",
+    },
+    {
+      line: 8,
+      column: 16,
+      expression: "doThing;",
+      result: "doThing(arg)",
+    },
+  ]);
+
+  await breakpointPreviews(dbg, "shadowed-vars", { line: 18, column: 6 }, [
+    // These aren't what the user would expect, but we test them anyway since
+    // they reflect what this actually returns. These shadowed bindings read
+    // the binding closest to the current frame's scope even though their
+    // actual value is different.
+    {
+      line: 2,
+      column: 9,
+      expression: "aVar;",
+      result: '"var3"',
+    },
+    {
+      line: 3,
+      column: 9,
+      expression: "_aLet2;",
+      result: '"let3"',
+    },
+    {
+      line: 4,
+      column: 11,
+      expression: "_aConst2;",
+      result: '"const3"',
+    },
+    {
+      line: 10,
+      column: 11,
+      expression: "aVar;",
+      result: '"var3"',
+    },
+    {
+      line: 11,
+      column: 11,
+      expression: "_aLet2;",
+      result: '"let3"',
+    },
+    {
+      line: 12,
+      column: 13,
+      expression: "_aConst2;",
+      result: '"const3"',
+    },
+
+    // These actually result in the values the user would expect.
+    {
+      line: 14,
+      column: 13,
+      expression: "aVar;",
+      result: '"var3"',
+    },
+    {
+      line: 15,
+      column: 13,
+      expression: "_aLet2;",
+      result: '"let3"',
+    },
+    {
+      line: 16,
+      column: 13,
+      expression: "_aConst2;",
+      result: '"const3"',
+    },
+  ]);
+
+  await breakpointPreviews(dbg, "imported-bindings", { line: 20, column: 2 }, [
+    {
+      line: 22,
+      column: 16,
+      expression: "_mod2.default;",
+      result: '"a-default"',
+    },
+    {
+      line: 23,
+      column: 16,
+      expression: "_mod4.original;",
+      result: '"an-original"',
+    },
+    {
+      line: 24,
+      column: 16,
+      expression: "_mod3.aNamed;",
+      result: '"a-named"',
+    },
+    {
+      line: 25,
+      column: 16,
+      expression: "_mod4.original;",
+      result: '"an-original"',
+    },
+    {
+      line: 26,
+      column: 16,
+      expression: "aNamespace;",
+      fields: [
+        ['aNamed', 'a-named'],
+        ['default', 'a-default'],
+      ],
+    },
+    {
+      line: 31,
+      column: 20,
+      expression: "_mod7.default;",
+      result: '"a-default2"',
+    },
+    {
+      line: 32,
+      column: 20,
+      expression: "_mod9.original;",
+      result: '"an-original2"',
+    },
+    {
+      line: 33,
+      column: 20,
+      expression: "_mod8.aNamed2;",
+      result: '"a-named2"',
+    },
+    {
+      line: 34,
+      column: 20,
+      expression: "_mod9.original;",
+      result: '"an-original2"',
+    },
+    {
+      line: 35,
+      column: 20,
+      expression: "aNamespace2;",
+      fields: [
+        ['aNamed', 'a-named2'],
+        ['default', 'a-default2'],
+      ],
+    },
+  ]);
+});

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

@@ -58,7 +58,7 @@ async function breakpointScopes(dbg, fixture, { line, column }, scopes) {
 async function expandAllScopes(dbg) {
   const scopes = await waitForElement(dbg, "scopes");
   const scopeElements = scopes.querySelectorAll(
-    `.tree-node[aria-level="0"][data-expandable="true"]:not([aria-expanded="true"])`
+    `.tree-node[aria-level="1"][data-expandable="true"]:not([aria-expanded="true"])`
   );
   const indices = Array.from(scopeElements, el => {
     return Array.prototype.indexOf.call(el.parentNode.childNodes, el);
@@ -160,7 +160,7 @@ add_task(async function() {
 
   // Babel 6's imports aren't fully mapped, so they show as unavailable.
   // The call-based ones work, but the single-identifier ones do not.
-  await breakpointScopes(dbg, "imported-bindings", { line: 17, column: 2 }, [
+  await breakpointScopes(dbg, "imported-bindings", { line: 20, column: 2 }, [
     "Module",
     ["aDefault", '"a-default"'],
     ["aDefault2", '"a-default2"'],
@@ -174,6 +174,7 @@ add_task(async function() {
     ["aNamespace", "{\u2026}"],
     ["aNamespace2", "{\u2026}"],
     ["aNamespace3", "{\u2026}"],
+    ["optimizedOut", "(optimized away)"],
     "root()"
   ]);
 
@@ -307,7 +308,7 @@ add_task(async function() {
     "root()"
   ]);
 
-  await breakpointScopes(dbg, "webpack-modules", { line: 17, column: 2 }, [
+  await breakpointScopes(dbg, "webpack-modules", { line: 20, column: 2 }, [
     "Module",
     ["aDefault", '"a-default"'],
     ["aDefault2", '"a-default2"'],
@@ -321,10 +322,11 @@ add_task(async function() {
     ["aNamespace", "{\u2026}"],
     ["aNamespace2", "{\u2026}"],
     ["aNamespace3", "{\u2026}"],
+    ["optimizedOut", "(optimized away)"],
     "root()"
   ]);
 
-  await breakpointScopes(dbg, "webpack-modules-es6", { line: 17, column: 2 }, [
+  await breakpointScopes(dbg, "webpack-modules-es6", { line: 20, column: 2 }, [
     "Module",
     ["aDefault", '"a-default"'],
     ["aDefault2", '"a-default2"'],
@@ -338,6 +340,7 @@ add_task(async function() {
     ["aNamespace", "{\u2026}"],
     ["aNamespace2", "{\u2026}"],
     ["aNamespace3", "{\u2026}"],
+    ["optimizedOut", "(optimized away)"],
     "root()"
   ]);
 

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

@@ -21,13 +21,13 @@ add_task(async function() {
   // Call the function that we set a breakpoint in.
   invokeInTab("main");
   await waitForPaused(dbg);
-  await waitForLoadedSource(dbg, "simple1");
+  await waitForSelectedSource(dbg, "simple1");
   assertPausedLocation(dbg);
 
   // Step through to another file and make sure it's paused in the
   // right place.
   await stepIn(dbg);
-  await waitForLoadedSource(dbg, "simple2");
+  await waitForSelectedSource(dbg, "simple2");
   assertPausedLocation(dbg);
 
   // Step back out to the initial file.
@@ -43,7 +43,7 @@ add_task(async function() {
 
   invokeInTab("testModel");
   await waitForPaused(dbg);
-  await waitForLoadedSource(dbg, "long.js");
+  await waitForSelectedSource(dbg, "long.js");
 
   assertPausedLocation(dbg);
   ok(

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/imported-bindings/input.js

@@ -13,6 +13,9 @@ import { aNamed3 } from "./src/mod10";
 import { original as anAliased3 } from "./src/mod11";
 import * as aNamespace3 from "./src/mod12";
 
+import optimizedOut from "./src/optimized-out";
+optimizedOut();
+
 export default function root() {
   console.log("pause here", root);
 

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/imported-bindings/output.js

@@ -112,10 +112,16 @@ var _mod15 = __webpack_require__(12);
 
 var aNamespace3 = _interopRequireWildcard(_mod15);
 
+var _optimizedOut = __webpack_require__(13);
+
+var _optimizedOut2 = _interopRequireDefault(_optimizedOut);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+(0, _optimizedOut2.default)();
+
 function root() {
   console.log("pause here", root);
 
@@ -293,6 +299,20 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = "a-default3";
 var aNamed = exports.aNamed = "a-named3";
 
+/***/ }),
+/* 13 */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = optimizedOut;
+function optimizedOut() {}
+module.exports = exports["default"];
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=output.js.map

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/imported-bindings/src/optimized-out.js

@@ -0,0 +1 @@
+export default function optimizedOut() {}

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-modules-es6/input.js

@@ -13,6 +13,9 @@ import { aNamed3 } from "./src/mod10";
 import { original as anAliased3 } from "./src/mod11";
 import * as aNamespace3 from "./src/mod12";
 
+import optimizedOut from "./src/optimized-out";
+optimizedOut();
+
 export default function root() {
   console.log("pause here", root);
 

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-modules-es6/output.js

@@ -83,6 +83,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__src_mod10__ = __webpack_require__(10);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__src_mod11__ = __webpack_require__(11);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__src_mod12__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__src_optimized_out__ = __webpack_require__(13);
 
 
 
@@ -98,6 +99,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 
+
+Object(__WEBPACK_IMPORTED_MODULE_12__src_optimized_out__["a" /* default */])();
+
 function root() {
   console.log("pause here", root);
 
@@ -237,6 +241,14 @@ const aNamed = "a-named3";
 /* harmony export (immutable) */ __webpack_exports__["aNamed"] = aNamed;
 
 
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (immutable) */ __webpack_exports__["a"] = optimizedOut;
+function optimizedOut() {}
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=output.js.map

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-modules-es6/src/optimized-out.js

@@ -0,0 +1 @@
+export default function optimizedOut() {}

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-modules/input.js

@@ -13,6 +13,9 @@ import { aNamed3 } from "./src/mod10";
 import { original as anAliased3 } from "./src/mod11";
 import * as aNamespace3 from "./src/mod12";
 
+import optimizedOut from "./src/optimized-out";
+optimizedOut();
+
 export default function root() {
   console.log("pause here", root);
 

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-modules/output.js

@@ -83,6 +83,7 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__src_mod10__ = __webpack_require__(10);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__src_mod11__ = __webpack_require__(11);
 /* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__src_mod12__ = __webpack_require__(12);
+/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__src_optimized_out__ = __webpack_require__(13);
 
 
 
@@ -98,6 +99,9 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 
 
 
+
+Object(__WEBPACK_IMPORTED_MODULE_12__src_optimized_out__["a" /* default */])();
+
 function root() {
   console.log("pause here", root);
 
@@ -228,6 +232,14 @@ Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
 /* harmony default export */ __webpack_exports__["default"] = ("a-default3");
 var aNamed = "a-named3";
 
+/***/ }),
+/* 13 */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+/* harmony export (immutable) */ __webpack_exports__["a"] = optimizedOut;
+function optimizedOut() {}
+
 /***/ })
 /******/ ]);
 //# sourceMappingURL=output.js.map

devtools/client/debugger/new/test/mochitest/examples/babel/fixtures/webpack-modules/src/optimized-out.js

@@ -0,0 +1 @@
+export default function optimizedOut() {}

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

@@ -401,8 +401,8 @@ function isPaused(dbg) {
 async function waitForLoadedScopes(dbg) {
   const scopes = await waitForElement(dbg, "scopes");
   // Since scopes auto-expand, we can assume they are loaded when there is a tree node
-  // with the aria-level attribute equal to "1".
-  await waitUntil(() => scopes.querySelector(`.tree-node[aria-level="1"]`));
+  // with the aria-level attribute equal to "2".
+  await waitUntil(() => scopes.querySelector(`.tree-node[aria-level="2"]`));
 }
 
 /**
@@ -953,6 +953,7 @@ const selectors = {
   fileMatch: ".managed-tree .result",
   popup: ".popover",
   tooltip: ".tooltip",
+  previewPopup: ".preview-popup",
   outlineItem: i =>
     `.outline-list__element:nth-child(${i}) .function-signature`,
   outlineItems: ".outline-list__element",
@@ -1090,6 +1091,62 @@ function getCM(dbg) {
   return el.CodeMirror;
 }
 
+function getCoordsFromPosition(cm, { line, ch }) {
+  return cm.charCoords({ line: ~~line, ch: ~~ch });
+}
+
+function hoverAtPos(dbg, { line, ch }) {
+  const cm = getCM(dbg);
+
+  // Ensure the line is visible with margin because the bar at the bottom of
+  // the editor overlaps into what the editor things is its own space, blocking
+  // the click event below.
+  cm.scrollIntoView({ line: line - 1, ch  }, 100);
+
+  const coords = getCoordsFromPosition(cm, { line: line - 1, ch });
+  const tokenEl = dbg.win.document.elementFromPoint(coords.left, coords.top);
+  tokenEl.dispatchEvent(
+    new MouseEvent("mouseover", {
+      bubbles: true,
+      cancelable: true,
+      view: dbg.win
+    })
+  );
+}
+
+async function assertPreviewTextValue(dbg, { text, expression }) {
+  const previewEl = await waitForElement(dbg, "previewPopup");;
+
+  is(previewEl.innerText, text, "Preview text shown to user");
+
+  const preview = dbg.selectors.getPreview(dbg.getState());
+  is(preview.updating, false, "Preview.updating");
+  is(preview.expression, expression, "Preview.expression");
+}
+
+async function assertPreviewTooltip(dbg, { result, expression }) {
+  const previewEl = await waitForElement(dbg, "tooltip");
+  is(previewEl.innerText, result, "Preview text shown to user");
+
+  const preview = dbg.selectors.getPreview(dbg.getState());
+  is(`${preview.result}`, result, "Preview.result");
+  is(preview.updating, false, "Preview.updating");
+  is(preview.expression, expression, "Preview.expression");
+}
+
+async function assertPreviewPopup(dbg, { field, value, expression }) {
+  const previewEl = await waitForElement(dbg, "popup");
+  const preview = dbg.selectors.getPreview(dbg.getState());
+
+  is(
+    `${preview.result.preview.ownProperties[field].value}`,
+    value,
+    "Preview.result"
+  );
+  is(preview.updating, false, "Preview.updating");
+  is(preview.expression, expression, "Preview.expression");
+}
+
 // NOTE: still experimental, the screenshots might not be exactly correct
 async function takeScreenshot(dbg) {
   let canvas = dbg.win.document.createElementNS(

devtools/client/framework/test/browser.ini

@@ -51,7 +51,7 @@ support-files =
 [browser_browser_toolbox.js]
 skip-if = coverage # Bug 1387827
 [browser_browser_toolbox_debugger.js]
-skip-if = debug # Bug 1282269
+skip-if = os == 'win' || debug # Bug 1282269, 1448084
 [browser_devtools_api.js]
 [browser_devtools_api_destroy.js]
 [browser_dynamic_tool_enabling.js]

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

@@ -14,6 +14,11 @@
 # that collapses the left and right panes in the debugger UI.
 collapsePanes=Collapse panes
 
+# LOCALIZATION NOTE (copyToClipboard.label): This is the text that appears in the
+# context menu to copy the complete source of the open file.
+copyToClipboard.label=Copy to clipboard
+copyToClipboard.accesskey=C
+
 # LOCALIZATION NOTE (copySource): This is the text that appears in the
 # context menu to copy the selected source of file open.
 copySource=Copy
@@ -543,6 +548,14 @@ scopes.notAvailable=Scopes unavailable
 # for when the debugger is not paused.
 scopes.notPaused=Not paused
 
+# LOCALIZATION NOTE (scopes.toggleToGenerated): Link displayed in the right
+# sidebar scope pane to update the view to show generated scope data.
+scopes.toggleToGenerated=Show generated scope
+
+# LOCALIZATION NOTE (scopes.toggleToOriginal): Link displayed in the right
+# sidebar scope pane to update the view to show original scope data.
+scopes.toggleToOriginal=Show original scope
+
 # LOCALIZATION NOTE (scopes.block): Refers to a block of code in
 # the scopes pane when the debugger is paused.
 scopes.block=Block