Bug 1419801 - Update Debugger Frontend (11-22). jdescottes, jlast r=jdescottes

MozReview-Commit-ID: Kihg60TpspW

--HG--
extra : rebase_source : 64ea5bdcdc353b228ea39486fbf645a40591f9a3

devtools/client/debugger/new/README.mozilla

@@ -1,7 +1,7 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Taken from upstream commit: d2e91e574acbe3d5b546508d028bd278eaabd286
+Taken from upstream commit: efa4ca367dadb1bb54525f9fe305dd38c0ec6323
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.0

devtools/client/debugger/new/debugger.css

@@ -1758,6 +1758,11 @@ html .toggle-button-end.vertical svg {
 .source-footer .blackbox-summary {
   color: var(--theme-body-color);
 }
+
+.source-footer .mapped-source {
+  color: var(--theme-body-color);
+  padding: 2.5px;
+}
 /* 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/parser-worker.js

@@ -27467,66 +27467,8 @@ module.exports = function(module) {
 
 /***/ }),
 /* 794 */,
-/* 795 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var createToPairs = __webpack_require__(812),
-    keys = __webpack_require__(205);
-
-/**
- * Creates an array of own enumerable string keyed-value pairs for `object`
- * which can be consumed by `_.fromPairs`. If `object` is a map or set, its
- * entries are returned.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @alias entries
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the key-value pairs.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.toPairs(new Foo);
- * // => [['a', 1], ['b', 2]] (iteration order is not guaranteed)
- */
-var toPairs = createToPairs(keys);
-
-module.exports = toPairs;
-
-
-/***/ }),
-/* 796 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var arrayMap = __webpack_require__(110);
-
-/**
- * The base implementation of `_.toPairs` and `_.toPairsIn` which creates an array
- * of key-value pairs for `object` corresponding to the property names of `props`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Array} props The property names to get values for.
- * @returns {Object} Returns the key-value pairs.
- */
-function baseToPairs(object, props) {
-  return arrayMap(props, function(key) {
-    return [key, object[key]];
-  });
-}
-
-module.exports = baseToPairs;
-
-
-/***/ }),
+/* 795 */,
+/* 796 */,
 /* 797 */,
 /* 798 */,
 /* 799 */
@@ -27711,7 +27653,7 @@ module.exports = matchesStrictComparable;
 /* 812 */
 /***/ (function(module, exports, __webpack_require__) {
 
-var baseToPairs = __webpack_require__(796),
+var baseToPairs = __webpack_require__(1757),
     getTag = __webpack_require__(198),
     mapToArray = __webpack_require__(203),
     setToPairs = __webpack_require__(813);
@@ -36616,7 +36558,7 @@ exports.getVariablesInLocalScope = getVariablesInLocalScope;
 exports.getVariablesInScope = getVariablesInScope;
 exports.isExpressionInScope = isExpressionInScope;
 
-var _toPairs = __webpack_require__(795);
+var _toPairs = __webpack_require__(1756);
 
 var _toPairs2 = _interopRequireDefault(_toPairs);
 
@@ -41822,6 +41764,118 @@ function extendsComponent(classes) {
   return result;
 }
 
+/***/ }),
+/* 1704 */,
+/* 1705 */,
+/* 1706 */,
+/* 1707 */,
+/* 1708 */,
+/* 1709 */,
+/* 1710 */,
+/* 1711 */,
+/* 1712 */,
+/* 1713 */,
+/* 1714 */,
+/* 1715 */,
+/* 1716 */,
+/* 1717 */,
+/* 1718 */,
+/* 1719 */,
+/* 1720 */,
+/* 1721 */,
+/* 1722 */,
+/* 1723 */,
+/* 1724 */,
+/* 1725 */,
+/* 1726 */,
+/* 1727 */,
+/* 1728 */,
+/* 1729 */,
+/* 1730 */,
+/* 1731 */,
+/* 1732 */,
+/* 1733 */,
+/* 1734 */,
+/* 1735 */,
+/* 1736 */,
+/* 1737 */,
+/* 1738 */,
+/* 1739 */,
+/* 1740 */,
+/* 1741 */,
+/* 1742 */,
+/* 1743 */,
+/* 1744 */,
+/* 1745 */,
+/* 1746 */,
+/* 1747 */,
+/* 1748 */,
+/* 1749 */,
+/* 1750 */,
+/* 1751 */,
+/* 1752 */,
+/* 1753 */,
+/* 1754 */,
+/* 1755 */,
+/* 1756 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var createToPairs = __webpack_require__(812),
+    keys = __webpack_require__(205);
+
+/**
+ * Creates an array of own enumerable string keyed-value pairs for `object`
+ * which can be consumed by `_.fromPairs`. If `object` is a map or set, its
+ * entries are returned.
+ *
+ * @static
+ * @memberOf _
+ * @since 4.0.0
+ * @alias entries
+ * @category Object
+ * @param {Object} object The object to query.
+ * @returns {Array} Returns the key-value pairs.
+ * @example
+ *
+ * function Foo() {
+ *   this.a = 1;
+ *   this.b = 2;
+ * }
+ *
+ * Foo.prototype.c = 3;
+ *
+ * _.toPairs(new Foo);
+ * // => [['a', 1], ['b', 2]] (iteration order is not guaranteed)
+ */
+var toPairs = createToPairs(keys);
+
+module.exports = toPairs;
+
+
+/***/ }),
+/* 1757 */
+/***/ (function(module, exports, __webpack_require__) {
+
+var arrayMap = __webpack_require__(110);
+
+/**
+ * The base implementation of `_.toPairs` and `_.toPairsIn` which creates an array
+ * of key-value pairs for `object` corresponding to the property names of `props`.
+ *
+ * @private
+ * @param {Object} object The object to query.
+ * @param {Array} props The property names to get values for.
+ * @returns {Object} Returns the key-value pairs.
+ */
+function baseToPairs(object, props) {
+  return arrayMap(props, function(key) {
+    return [key, object[key]];
+  });
+}
+
+module.exports = baseToPairs;
+
+
 /***/ })
 /******/ ]);
 });

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

@@ -43,7 +43,7 @@ add_task(async function() {
   assertPausedLocation(dbg);
 
   // resume
-  await clickResume(dbg)
+  await clickResume(dbg);
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
 

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

@@ -47,5 +47,8 @@ add_task(async function() {
   await waitForLoadedSource(dbg, "long.js");
 
   assertPausedLocation(dbg);
-  ok(isVisibleInEditor(dbg, findElement(dbg, "breakpoint")), "Breakpoint is visible");
+  ok(
+    isVisibleInEditor(dbg, findElement(dbg, "breakpoint")),
+    "Breakpoint is visible"
+  );
 });

devtools/client/debugger/new/test/mochitest/browser_dbg-expressions-error.js

@@ -47,7 +47,7 @@ async function editExpression(dbg, input) {
   info("updating the expression");
   dblClickElement(dbg, "expressionNode", 1);
   // Position cursor reliably at the end of the text.
-  const evaluation = waitForDispatch(dbg, "EVALUATE_EXPRESSION")
+  const evaluation = waitForDispatch(dbg, "EVALUATE_EXPRESSION");
   pressKey(dbg, "End");
   type(dbg, input);
   pressKey(dbg, "Enter");
@@ -59,7 +59,7 @@ async function editExpression(dbg, input) {
  * resume, and wait for the expression to finish being evaluated.
  */
 async function addBadExpression(dbg, input) {
-  const evaluation = waitForDispatch(dbg, "EVALUATE_EXPRESSION")
+  const evaluation = waitForDispatch(dbg, "EVALUATE_EXPRESSION");
 
   findElementWithSelector(dbg, expressionSelectors.input).focus();
   type(dbg, input);
@@ -70,7 +70,6 @@ async function addBadExpression(dbg, input) {
   ok(dbg.selectors.isEvaluatingExpression(dbg.getState()));
   await resume(dbg);
   await evaluation;
-
 }
 
 add_task(async function() {

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

@@ -32,8 +32,8 @@ add_task(async function() {
 
   // The pretty-print button should go away in the pretty-printed
   // source.
-  ok(!findElement(dbg, "editorFooter"), "Footer is hidden");
+  ok(!findElement(dbg, "prettyPrintButton"), "Pretty Print Button is hidden");
 
   await selectSource(dbg, "math.min.js");
-  ok(findElement(dbg, "editorFooter"), "Footer is hidden");
+  ok(findElement(dbg, "prettyPrintButton"), "Pretty Print Button is visible");
 });

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

@@ -4,7 +4,11 @@
 function assertBpInGutter(dbg, lineNumber) {
   const el = findElement(dbg, "breakpoint");
   const bpLineNumber = +el.querySelector(".CodeMirror-linenumber").innerText;
-  is(bpLineNumber, lineNumber, "Breakpoint is on the correct line in the gutter");
+  is(
+    bpLineNumber,
+    lineNumber,
+    "Breakpoint is on the correct line in the gutter"
+  );
 }
 
 // Tests loading sourcemapped sources, setting breakpoints, and
@@ -38,4 +42,12 @@ add_task(async function() {
 
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
+
+  // 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-wasm-sourcemaps.js

@@ -26,6 +26,7 @@ add_task(async function() {
   await waitForPaused(dbg);
   await waitForLoadedSource(dbg, "average.c");
   assertPausedLocation(dbg);
+  toggleCallStack(dbg);
 
   const frames = findAllElements(dbg, "frames");
   const firstFrameTitle = frames[0].querySelector(".title").textContent;

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

@@ -295,7 +295,9 @@ function assertDebugLine(dbg, line) {
     const url = source.get("url");
     ok(
       false,
-      `Looks like the source ${url} is still loading. Try adding waitForLoadedSource in the test.`
+      `Looks like the source ${
+        url
+      } is still loading. Try adding waitForLoadedSource in the test.`
     );
     return;
   }
@@ -305,8 +307,9 @@ function assertDebugLine(dbg, line) {
     "Line is highlighted as paused"
   );
 
-  const debugLine = findElementWithSelector(dbg, ".new-debug-line")
-                    || findElementWithSelector(dbg, ".new-debug-line-error");
+  const debugLine =
+    findElementWithSelector(dbg, ".new-debug-line") ||
+    findElementWithSelector(dbg, ".new-debug-line-error");
 
   ok(isVisibleInEditor(dbg, debugLine), "debug line is visible");
 
@@ -553,8 +556,11 @@ function waitForLoadedSources(dbg) {
   return waitForState(
     dbg,
     state => {
-      const sources = dbg.selectors.getSources(state).valueSeq().toJS()
-      return !sources.some(source => source.loadedState == "loading")
+      const sources = dbg.selectors
+        .getSources(state)
+        .valueSeq()
+        .toJS();
+      return !sources.some(source => source.loadedState == "loading");
     },
     "loaded source"
   );
@@ -835,7 +841,6 @@ function type(dbg, string) {
   string.split("").forEach(char => EventUtils.synthesizeKey(char, {}, dbg.win));
 }
 
-
 /*
  * Checks to see if the inner element is visible inside the editor.
  *
@@ -874,12 +879,14 @@ function isVisible(outerEl, innerEl) {
   const outerRect = outerEl.getBoundingClientRect();
 
   const verticallyVisible =
-    (innerRect.top >= outerRect.top || innerRect.bottom <= outerRect.bottom)
-    || (innerRect.top < outerRect.top && innerRect.bottom > outerRect.bottom);
+    innerRect.top >= outerRect.top ||
+    innerRect.bottom <= outerRect.bottom ||
+    (innerRect.top < outerRect.top && innerRect.bottom > outerRect.bottom);
 
   const horizontallyVisible =
-    (innerRect.left >= outerRect.left || innerRect.right <= outerRect.right)
-    || (innerRect.left < outerRect.left && innerRect.right > outerRect.right);
+    innerRect.left >= outerRect.left ||
+    innerRect.right <= outerRect.right ||
+    (innerRect.left < outerRect.left && innerRect.right > outerRect.right);
 
   const visible = verticallyVisible && horizontallyVisible;
   return visible;
@@ -891,7 +898,9 @@ const selectors = {
   expressionNode: i =>
     `.expressions-list .expression-container:nth-child(${i}) .object-label`,
   expressionValue: i =>
-    `.expressions-list .expression-container:nth-child(${i}) .object-delimiter + *`,
+    `.expressions-list .expression-container:nth-child(${
+      i
+    }) .object-delimiter + *`,
   expressionClose: i =>
     `.expressions-list .expression-container:nth-child(${i}) .close`,
   expressionNodes: ".expressions-list .tree-node",
@@ -914,7 +923,8 @@ const selectors = {
   stepOut: ".stepOut.active",
   stepIn: ".stepIn.active",
   toggleBreakpoints: ".breakpoints-toggle",
-  prettyPrintButton: ".prettyPrint",
+  prettyPrintButton: ".source-footer .prettyPrint",
+  sourceMapLink: ".source-footer .mapped-source",
   sourcesFooter: ".sources-panel .source-footer",
   editorFooter: ".editor-pane .source-footer",
   sourceNode: i => `.sources-list .tree-node:nth-child(${i})`,

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

@@ -470,6 +470,14 @@ sourceFooter.unblackbox.accesskey=b
 # with a blackboxed source
 sourceFooter.blackboxed=Blackboxed source
 
+# LOCALIZATION NOTE (sourceFooter.mappedSource): Text associated
+# with a mapped source. %S is replaced by the source map origin.
+sourceFooter.mappedSource=(From %S)
+
+# LOCALIZATION NOTE (sourceFooter.mappedSourceTooltip): Tooltip text associated
+# with a mapped source. %S is replaced by the source map origin.
+sourceFooter.mappedSourceTooltip=(Source mapped from %S)
+
 # LOCALIZATION NOTE (sourceFooter.codeCoverage): Text associated
 # with a code coverage button
 sourceFooter.codeCoverage=Code coverage