Bug 1462630 - Update Debugger Frontend v56. r=dwalsh

MozReview-Commit-ID: 4JWb6Ac81Ce

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 55
+Version 56
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-54...release-55
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-55...release-56
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2

devtools/client/debugger/new/dist/debugger.css

@@ -577,7 +577,6 @@ menuseparator {
 
 .folder,
 .domain,
-.source-icon,
 .file,
 .extension {
   background-color: var(--theme-comment);
@@ -586,7 +585,7 @@ menuseparator {
 .worker,
 .file,
 .folder,
-.source-icon,
+.sources-list .source-icon,
 .extension {
   position: relative;
   top: 2px;
@@ -608,8 +607,7 @@ menuseparator {
 }
 
 img.domain,
-img.folder,
-img.source-icon {
+img.folder {
   width: 15px;
   height: 15px;
 }
@@ -666,7 +664,7 @@ img.file {
 img.domain,
 img.folder,
 img.file,
-img.source-icon,
+.sources-list img.source-icon,
 img.extension {
   mask-size: 100%;
   margin-inline-end: 5px;
@@ -1499,7 +1497,9 @@ html .toggle-button.end.vertical 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;
 }
 
@@ -1525,7 +1525,9 @@ html .toggle-button.end.vertical svg {
 }
 
 /* Removes start margin when a custom root is used */
-.sources-list-custom-root .tree > .tree-node[data-expandable="false"][aria-level="0"] {
+.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
@@ -1719,7 +1721,7 @@ menuseparator {
 }
 
 .theme-dark .outline-footer button {
-    color: var(--theme-body-color);
+  color: var(--theme-body-color);
 }
 
 .outline-footer button.active {
@@ -2887,6 +2889,37 @@ debug-expression-error {
   border-radius: 2px;
   margin: 0 -1px -1px -1px;
 }
+.source-icon {
+  position: relative;
+  background-color: var(--theme-comment);
+  mask-size: 100%;
+  display: inline-block;
+  margin-inline-end: 5px;
+}
+
+.source-icon,
+.source-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.source-icon.prettyPrint {
+  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
+  mask-size: 100%;
+  background: var(--theme-highlight-blue);
+  fill: var(--theme-textbox-box-shadow);
+}
+
+.source-icon.blackBox {
+  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
+  mask-size: 100%;
+  background: var(--theme-highlight-blue);
+}
+
+.source-icon.react {
+  mask-size: 100%;
+  background: var(--theme-highlight-bluegrey);
+}
 /* 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/>. */
@@ -2906,7 +2939,14 @@ debug-expression-error {
 .breakpoints-list .breakpoint-heading {
   text-overflow: ellipsis;
   overflow: hidden;
-  padding-top: 0.75em;
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+
+/* temporary until we refactor the sources tree and tab icon styles */
+.breakpoints-list .breakpoint-heading .source-icon.file {
+  top: 0;
 }
 
 .breakpoints-list .breakpoint-heading,
@@ -2931,7 +2971,7 @@ debug-expression-error {
 }
 
 .breakpoints-list .breakpoint {
- height: var(--breakpoint-expression-height);
+  min-height: var(--breakpoint-expression-height);
 }
 
 .breakpoints-exceptions-caught {
@@ -3193,7 +3233,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
   background-color: var(--theme-body-background);
   display: block;
   position: relative;
-  height: var(--breakpoint-expression-height);
+  min-height: var(--breakpoint-expression-height);
 }
 
 .expression-container > .tree {
@@ -3209,7 +3249,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
   background-color: var(--theme-selection-background-hover);
 }
 
-.tree  .tree-node:not(.focused):hover {
+.tree .tree-node:not(.focused):hover {
   background-color: transparent;
 }
 
@@ -3713,7 +3753,7 @@ img.skipPausing {
 }
 
 .command-bar .active .skipPausing {
-   background-color: var(--theme-highlight-blue);
+  background-color: var(--theme-highlight-blue);
 }
 
 .bottom {
@@ -3749,6 +3789,14 @@ img.skipPausing {
   opacity: 0.6;
 }
 
+.object-node {
+  padding-left: 4px;
+}
+
+html[dir="rtl"] .object-node {
+  padding-right: 4px;
+}
+
 .object-label {
   color: var(--theme-highlight-blue);
 }
@@ -3772,10 +3820,6 @@ img.skipPausing {
   overflow: auto;
 }
 
-.scopes-list {
-  padding-inline-start: 4px;
-}
-
 .scopes-list .tree:focus {
   outline: none;
 }
@@ -3806,8 +3850,8 @@ img.skipPausing {
   white-space: nowrap;
   -moz-user-select: none;
   user-select: none;
- --breakpoint-expression-right-clear-space: 36px;
- --breakpoint-expression-height: 2.4em;
+  --breakpoint-expression-right-clear-space: 36px;
+  --breakpoint-expression-height: 2.4em;
 }
 
 /*
@@ -4029,40 +4073,28 @@ html .welcomebox .toggle-button-end.collapsed {
   fill: var(--theme-body-color);
 }
 
-.source-tab img.prettyPrint {
-  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
-  mask-size: 100%;
-  padding-top: 12px;
+.source-tab .source-icon {
+  margin-inline-end: 0;
+}
+
+.source-tab img.prettyPrint,
+.source-tab .source-icon.blackBox {
   height: 12px;
   width: 12px;
-  background: var(--theme-highlight-blue);
+  align-self: center;
 }
 
 .source-tab .prettyPrint path {
   fill: var(--theme-textbox-box-shadow);
 }
 
-.source-tab .blackBox,
-.source-tab .prettyPrint {
-  align-self: center;
-}
-
-.source-tab img.blackBox {
-  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
-  mask-size: 100%;
-  padding-top: 12px;
-  height: 12px;
-  width: 12px;
-  background: var(--theme-highlight-blue);
-}
-
 .source-tab img.react {
   mask: url("chrome://devtools/skin/images/debugger/react.svg") no-repeat;
   mask-size: 100%;
-  padding-top: 12px;
   height: 14px;
   width: 14px;
   background: var(--theme-highlight-bluegrey);
+  top: 0;
 }
 
 .source-tab .blackBox path {
@@ -4093,7 +4125,7 @@ html[dir="rtl"] img.moreTabs {
   text-overflow: ellipsis;
   overflow: hidden;
   padding: 0 4px;
-  align-self: flex-start;
+  align-self: center;
 }
 
 .source-tab .close-btn {
@@ -4187,7 +4219,6 @@ html[dir="rtl"] .dropdown {
   mask: url("chrome://devtools/skin/images/debugger/file.svg") no-repeat;
   mask-size: 100%;
   margin-bottom: 7px;
-
 }
 
 .dropdown ul {

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

@@ -25005,7 +25005,9 @@ const {
   isOriginalId
 } = __webpack_require__(3652);
 
-const { workerUtils: { WorkerDispatcher } } = __webpack_require__(3651);
+const {
+  workerUtils: { WorkerDispatcher }
+} = __webpack_require__(3651);
 
 const dispatcher = new WorkerDispatcher();
 

devtools/client/debugger/new/dist/vendors.css

@@ -100,7 +100,6 @@
 
 .folder,
 .domain,
-.source-icon,
 .file,
 .extension {
   background-color: var(--theme-comment);
@@ -109,7 +108,7 @@
 .worker,
 .file,
 .folder,
-.source-icon,
+.sources-list .source-icon,
 .extension {
   position: relative;
   top: 2px;
@@ -131,8 +130,7 @@
 }
 
 img.domain,
-img.folder,
-img.source-icon {
+img.folder {
   width: 15px;
   height: 15px;
 }
@@ -189,7 +187,7 @@ img.file {
 img.domain,
 img.folder,
 img.file,
-img.source-icon,
+.sources-list img.source-icon,
 img.extension {
   mask-size: 100%;
   margin-inline-end: 5px;

devtools/client/debugger/new/src/actions/preview.js

@@ -94,7 +94,7 @@ function updatePreview(target, editor) {
       match = (0, _ast.findBestMatchExpression)(symbols, tokenPos);
     }
 
-    if (!match || !match.expression) {
+    if (!match) {
       return;
     }
 

devtools/client/debugger/new/src/actions/utils/middleware/log.js

@@ -11,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const blacklist = ["SET_POPUP_OBJECT_PROPERTIES", "SET_PAUSE_POINTS", "SET_SYMBOLS", "OUT_OF_SCOPE_LOCATIONS", "MAP_SCOPES", "MAP_FRAMES", "ADD_SCOPES", "IN_SCOPE_LINES", "REMOVE_BREAKPOINT", "ADD_BREAKPOINT"];
+const blacklist = ["SET_POPUP_OBJECT_PROPERTIES", "SET_PAUSE_POINTS", "SET_SYMBOLS", "OUT_OF_SCOPE_LOCATIONS", "MAP_SCOPES", "MAP_FRAMES", "ADD_SCOPES", "IN_SCOPE_LINES", "REMOVE_BREAKPOINT"];
 
 function cloneAction(action) {
   action = action || {};

devtools/client/debugger/new/src/components/Editor/ConditionalPanel.js

@@ -106,6 +106,10 @@ class ConditionalPanel extends _react.PureComponent {
     return this.clearConditionalPanel();
   }
 
+  componentDidUpdate(prevProps) {
+    this.keepFocusOnInput();
+  }
+
   componentWillUnmount() {
     // This is called if CodeMirror is re-initializing itself before the
     // user closes the conditional panel. Clear the widget, and re-render it
@@ -150,8 +154,6 @@ class ConditionalPanel extends _react.PureComponent {
         this.scrollParent.addEventListener("scroll", this.repositionOnScroll);
         this.repositionOnScroll();
       }
-
-      this.input.focus();
     }
   }
 

devtools/client/debugger/new/src/components/Editor/Preview/Popup.js

@@ -183,7 +183,7 @@ class Popup extends _react.Component {
     }));
   }
 
-  renderReact(react, roots) {
+  renderReact(react) {
     const reactHeader = react.displayName || "React Component";
     return _react2.default.createElement("div", {
       className: "header-container"
@@ -264,19 +264,19 @@ class Popup extends _react.Component {
   }
 
   renderPreview() {
+    // We don't have to check and
+    // return on `false`, `""`, `0`, `undefined` etc,
+    // these falsy simple typed value because we want to
+    // do `renderSimplePreview` on these values below.
     const {
       value
     } = this.props;
 
-    if (!value) {
-      return null;
-    }
-
-    if (value.class === "Function") {
+    if (value && value.class === "Function") {
       return this.renderFunctionPreview();
     }
 
-    if (value.type === "object") {
+    if (value && value.type === "object") {
       return _react2.default.createElement("div", null, this.renderObjectPreview());
     }
 

devtools/client/debugger/new/src/components/Editor/Tab.js

@@ -12,6 +12,10 @@ var _reactRedux = require("devtools/client/shared/vendor/react-redux");
 
 var _devtoolsContextmenu = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-contextmenu"];
 
+var _SourceIcon = require("../shared/SourceIcon");
+
+var _SourceIcon2 = _interopRequireDefault(_SourceIcon);
+
 var _Button = require("../shared/Button/index");
 
 var _actions = require("../../actions/index");
@@ -131,15 +135,13 @@ class Tab extends _react.PureComponent {
       selectedSource,
       selectSpecificSource,
       closeTab,
-      source,
-      sourceMetaData
+      source
     } = this.props;
     const src = source.toJS();
     const filename = (0, _source.getFilename)(src);
     const sourceId = source.id;
     const active = selectedSource && sourceId == selectedSource.get("id") && !this.isProjectSearchEnabled() && !this.isSourceSearchEnabled();
     const isPrettyCode = (0, _source.isPretty)(source);
-    const sourceAnnotation = (0, _tabs.getSourceAnnotation)(source, sourceMetaData);
 
     function onClickClose(e) {
       e.stopPropagation();
@@ -167,7 +169,10 @@ class Tab extends _react.PureComponent {
       onMouseUp: handleTabClick,
       onContextMenu: e => this.onTabContextMenu(e, sourceId),
       title: (0, _source.getFileURL)(src)
-    }, sourceAnnotation, _react2.default.createElement("div", {
+    }, _react2.default.createElement(_SourceIcon2.default, {
+      source: source,
+      shouldHide: icon => ["file", "javascript"].includes(icon)
+    }), _react2.default.createElement("div", {
       className: "filename"
     }, filename), _react2.default.createElement(_Button.CloseButton, {
       handleClick: onClickClose,
@@ -184,7 +189,6 @@ const mapStateToProps = (state, {
   return {
     tabSources: (0, _selectors.getSourcesForTabs)(state),
     selectedSource: selectedSource,
-    sourceMetaData: (0, _selectors.getSourceMetaData)(state, source.id),
     activeSearch: (0, _selectors.getActiveSearch)(state)
   };
 };

devtools/client/debugger/new/src/components/SecondaryPanes/Breakpoints.js

@@ -26,6 +26,10 @@ var _Breakpoint = require("./Breakpoint");
 
 var _Breakpoint2 = _interopRequireDefault(_Breakpoint);
 
+var _SourceIcon = require("../shared/SourceIcon");
+
+var _SourceIcon2 = _interopRequireDefault(_SourceIcon);
+
 var _actions = require("../../actions/index");
 
 var _actions2 = _interopRequireDefault(_actions);
@@ -136,7 +140,7 @@ class Breakpoints extends _react.Component {
       pauseOnExceptions
     } = this.props;
     const isEmpty = breakpoints.size == 0;
-    const exceptionsBox = createExceptionOption(L10N.getStr("pauseOnExceptionsItem2"), shouldPauseOnExceptions, () => pauseOnExceptions(!shouldPauseOnExceptions, false), "breakpoints-exceptions");
+    const exceptionsBox = createExceptionOption(L10N.getStr("pauseOnExceptionsItem"), shouldPauseOnExceptions, () => pauseOnExceptions(!shouldPauseOnExceptions, false), "breakpoints-exceptions");
     const ignoreCaughtBox = createExceptionOption(L10N.getStr("pauseOnCaughtExceptionsItem"), shouldPauseOnCaughtExceptions, () => pauseOnExceptions(true, !shouldPauseOnCaughtExceptions), "breakpoints-exceptions-caught");
     return _react2.default.createElement("div", {
       className: (0, _classnames2.default)("breakpoints-exceptions-options", {
@@ -170,7 +174,9 @@ class Breakpoints extends _react.Component {
         title: url,
         key: url,
         onClick: () => this.props.selectSource(source.id)
-      }, (0, _source.getFilename)(source)), ...groupBreakpoints.map(bp => this.renderBreakpoint(bp))];
+      }, _react2.default.createElement(_SourceIcon2.default, {
+        source: source
+      }), (0, _source.getFilename)(source)), ...groupBreakpoints.map(bp => this.renderBreakpoint(bp))];
     })];
   }
 

devtools/client/debugger/new/src/components/SecondaryPanes/Expressions.js

@@ -135,6 +135,7 @@ class Expressions extends _react.Component {
       return _react2.default.createElement("li", {
         className: "expression-container",
         key: input,
+        title: expression.input,
         onDoubleClick: (items, options) => this.editExpression(expression, index)
       }, _react2.default.createElement("div", {
         className: "expression-content"

devtools/client/debugger/new/src/components/shared/SourceIcon.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _react = require("devtools/client/shared/vendor/react");
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactRedux = require("devtools/client/shared/vendor/react-redux");
+
+var _source = require("../../utils/source");
+
+var _selectors = require("../../selectors/index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* 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/>. */
+class SourceIcon extends _react.PureComponent {
+  render() {
+    const {
+      shouldHide,
+      source,
+      sourceMetaData
+    } = this.props;
+    const iconClass = (0, _source.getSourceClassnames)(source, sourceMetaData);
+
+    if (shouldHide && shouldHide(iconClass)) {
+      return null;
+    }
+
+    return _react2.default.createElement("img", {
+      className: `source-icon ${iconClass}`
+    });
+  }
+
+}
+
+exports.default = (0, _reactRedux.connect)((state, props) => {
+  return {
+    sourceMetaData: (0, _selectors.getSourceMetaData)(state, props.source.id)
+  };
+})(SourceIcon);

devtools/client/debugger/new/src/components/shared/moz.build

@@ -18,5 +18,6 @@ DevToolsModules(
     'PreviewFunction.js',
     'ResultList.js',
     'SearchInput.js',
+    'SourceIcon.js',
     'Svg.js',
 )

devtools/client/debugger/new/src/utils/source.js

@@ -432,10 +432,25 @@ function getTextAtPosition(source, location) {
   return lineText.slice(column, column + 100).trim();
 }
 
-function getSourceClassnames(source) {
-  if (source && source.isBlackBoxed) {
+function getSourceClassnames(source, sourceMetaData) {
+  // Conditionals should be ordered by priority of icon!
+  const defaultClassName = "file";
+
+  if (!source || !source.url) {
+    return defaultClassName;
+  }
+
+  if (sourceMetaData && sourceMetaData.framework) {
+    return sourceMetaData.framework.toLowerCase();
+  }
+
+  if (isPretty(source)) {
+    return "prettyPrint";
+  }
+
+  if (source.isBlackBoxed) {
     return "blackBox";
   }
 
-  return sourceTypes[(0, _sourcesTree.getExtension)(source)] || "file";
+  return sourceTypes[(0, _sourcesTree.getExtension)(source)] || defaultClassName;
 }

devtools/client/debugger/new/src/utils/tabs.js

@@ -4,17 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getHiddenTabs = getHiddenTabs;
-exports.getSourceAnnotation = getSourceAnnotation;
 exports.getTabMenuItems = getTabMenuItems;
 
-var _react = require("devtools/client/shared/vendor/react");
-
-var _react2 = _interopRequireDefault(_react);
-
-var _source = require("./source");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /* 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/>. */
@@ -49,28 +40,6 @@ function getHiddenTabs(sourceTabs, sourceTabEls) {
   });
 }
 
-function getSourceAnnotation(source, sourceMetaData) {
-  const framework = sourceMetaData && sourceMetaData.framework ? sourceMetaData.framework : false;
-
-  if (framework) {
-    return _react2.default.createElement("img", {
-      className: framework.toLowerCase()
-    });
-  }
-
-  if ((0, _source.isPretty)(source)) {
-    return _react2.default.createElement("img", {
-      className: "prettyPrint"
-    });
-  }
-
-  if (source.isBlackBoxed) {
-    return _react2.default.createElement("img", {
-      className: "blackBox"
-    });
-  }
-}
-
 function getTabMenuItems() {
   return {
     closeTab: {

devtools/client/debugger/new/test/mochitest/browser_dbg-breaking-from-console.js

@@ -23,7 +23,10 @@ add_task(async function() {
 
   // Create a dbg context
   const dbg = createDebuggerContext(toolbox);
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   // Make sure the thread is paused in the right source and location
   await waitForPaused(dbg);

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

@@ -5,7 +5,10 @@
 
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   // Make sure we can set a top-level breakpoint and it will be hit on
   // reload.

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

@@ -2,7 +2,10 @@
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
 function findBreakpoint(dbg, url, line) {
-  const { selectors: { getBreakpoint }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint },
+    getState
+  } = dbg;
   const source = findSource(dbg, url);
   return getBreakpoint(getState(), { sourceId: source.id, line });
 }

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

@@ -26,7 +26,10 @@ function assertEditorBreakpoint(dbg, line) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getBreakpoints, getBreakpoint }, getState } = dbg;
+  const {
+    selectors: { getBreakpoints, getBreakpoint },
+    getState
+  } = dbg;
   const source = findSource(dbg, "simple1.js");
 
   await selectSource(dbg, source.url);

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

@@ -36,13 +36,19 @@ function enableBreakpoints(dbg, count) {
 }
 
 function findBreakpoint(dbg, url, line) {
-  const { selectors: { getBreakpoint }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint },
+    getState
+  } = dbg;
   const source = findSource(dbg, url);
   return getBreakpoint(getState(), { sourceId: source.id, line });
 }
 
 function findBreakpoints(dbg) {
-  const { selectors: { getBreakpoints }, getState } = dbg;
+  const {
+    selectors: { getBreakpoints },
+    getState
+  } = dbg;
   return getBreakpoints(getState());
 }
 

devtools/client/debugger/new/test/mochitest/browser_dbg-browser-content-toolbox.js

@@ -32,7 +32,10 @@ async function enableBreakpoint(dbg, index) {
 }
 
 function findBreakpoint(dbg, url, line) {
-  const { selectors: { getBreakpoint }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint },
+    getState
+  } = dbg;
   const source = findSource(dbg, url);
   return getBreakpoint(getState(), { sourceId: source.id, line });
 }

devtools/client/debugger/new/test/mochitest/browser_dbg-chrome-create.js

@@ -9,7 +9,9 @@
 
 // There are shutdown issues for which multiple rejections are left uncaught.
 // See bug 1018184 for resolving these issues.
-const { PromiseTestUtils } = scopedCuImport("resource://testing-common/PromiseTestUtils.jsm");
+const { PromiseTestUtils } = scopedCuImport(
+  "resource://testing-common/PromiseTestUtils.jsm"
+);
 PromiseTestUtils.whitelistRejectionsGlobally(/File closed/);
 PromiseTestUtils.whitelistRejectionsGlobally(/NS_ERROR_FAILURE/);
 

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

@@ -27,7 +27,10 @@ function assertEditorBreakpoint(dbg, line, shouldExist) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getBreakpoints, getBreakpoint }, getState } = dbg;
+  const {
+    selectors: { getBreakpoints, getBreakpoint },
+    getState
+  } = dbg;
   const source = findSource(dbg, "simple1.js");
 
   await selectSource(dbg, source.url);

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

@@ -7,14 +7,17 @@
 
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getSource }, getState } = dbg;
+  const {
+    selectors: { getSource },
+    getState
+  } = dbg;
   const sourceUrl = EXAMPLE_URL + "long.js";
 
   // 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.
 
-  await selectSource(dbg, sourceUrl, 66)
+  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-editor-select.js

@@ -10,7 +10,10 @@ add_task(async function() {
   // which is the slowest part of this and make it run faster, but to
   // fix a frequent failure allow a longer timeout.
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
   const simple1 = findSource(dbg, "simple1.js");
   const simple2 = findSource(dbg, "simple2.js");
 

devtools/client/debugger/new/test/mochitest/browser_dbg-ember-quickstart.js

@@ -1,15 +1,20 @@
-
 add_task(async function() {
   await pushPref("devtools.debugger.features.map-scopes", true);
 
   const dbg = await initDebugger("ember/quickstart/dist/");
 
-  await invokeWithBreakpoint(dbg, "mapTestFunction", "quickstart/router.js", { line: 13, column: 2 }, async () => {
-    await assertScopes(dbg, [
-      "Module",
-      ["config", "{\u2026}"],
-      "EmberRouter:Class()",
-      "Router:Class()",
-    ]);
-  });
+  await invokeWithBreakpoint(
+    dbg,
+    "mapTestFunction",
+    "quickstart/router.js",
+    { line: 13, column: 2 },
+    async () => {
+      await assertScopes(dbg, [
+        "Module",
+        ["config", "{\u2026}"],
+        "EmberRouter:Class()",
+        "Router:Class()"
+      ]);
+    }
+  );
 });

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

@@ -24,7 +24,7 @@ function getValue(dbg, index) {
 
 async function addExpression(dbg, input) {
   const plusIcon = findElementWithSelector(dbg, expressionSelectors.plusIcon);
-  if(plusIcon) {
+  if (plusIcon) {
     plusIcon.click();
   }
 

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

@@ -36,7 +36,7 @@ async function addExpression(dbg, input) {
   info("Adding an expression");
 
   const plusIcon = findElementWithSelector(dbg, expressionSelectors.plusIcon);
-  if(plusIcon) {
+  if (plusIcon) {
     plusIcon.click();
   }
   findElementWithSelector(dbg, expressionSelectors.input).focus();

devtools/client/debugger/new/test/mochitest/browser_dbg-inline-cache.js

@@ -29,7 +29,9 @@ server.registerPathHandler("/inline-cache.html", (request, response) => {
   `);
 });
 
-const SOURCE_URL = `http://localhost:${server.identity.primaryPort}/inline-cache.html`;
+const SOURCE_URL = `http://localhost:${
+  server.identity.primaryPort
+}/inline-cache.html`;
 
 /**
  * This is meant to simulate the developer editing the inline source and saving.
@@ -40,7 +42,7 @@ function makeChanges() {
 }
 
 function getPageValue(tab) {
-  return ContentTask.spawn(tab.linkedBrowser, {}, function () {
+  return ContentTask.spawn(tab.linkedBrowser, {}, function() {
     return content.document.querySelector("script").textContent.trim();
   });
 }
@@ -49,10 +51,10 @@ async function reloadTabAndDebugger(tab, dbg) {
   let navigated = waitForDispatch(dbg, "NAVIGATE");
   let loaded = BrowserTestUtils.browserLoaded(tab.linkedBrowser);
   await reload(dbg, "inline-cache.html");
-  return Promise.all([ navigated, loaded ]);
+  return Promise.all([navigated, loaded]);
 }
 
-add_task(async function () {
+add_task(async function() {
   info("Load document with inline script");
   const tab = await addTab(SOURCE_URL);
   info("Open debugger");
@@ -68,8 +70,10 @@ add_task(async function () {
   await waitForLoadedSource(dbg, "inline-cache.html");
   let dbgValue = await findSource(dbg, "inline-cache.html");
   info(`Debugger text: ${dbgValue.text}`);
-  ok(dbgValue.text.includes(pageValue),
-     "Debugger loads from cache, gets value 1 like page");
+  ok(
+    dbgValue.text.includes(pageValue),
+    "Debugger loads from cache, gets value 1 like page"
+  );
 
   info("Disable HTTP cache for page");
   await toolbox.target.activeTab.reconfigure({ cacheDisabled: true });
@@ -82,8 +86,10 @@ add_task(async function () {
   await waitForLoadedSource(dbg, "inline-cache.html");
   dbgValue = await findSource(dbg, "inline-cache.html");
   info(`Debugger text: ${dbgValue.text}`);
-  ok(dbgValue.text.includes(pageValue),
-     "Debugger loads from network, gets value 2 like page");
+  ok(
+    dbgValue.text.includes(pageValue),
+    "Debugger loads from network, gets value 2 like page"
+  );
 
   makeChanges();
 
@@ -94,8 +100,10 @@ add_task(async function () {
   await waitForLoadedSource(dbg, "inline-cache.html");
   dbgValue = await findSource(dbg, "inline-cache.html");
   info(`Debugger text: ${dbgValue.text}`);
-  ok(dbgValue.text.includes(pageValue),
-     "Debugger loads from network, gets value 3 like page");
+  ok(
+    dbgValue.text.includes(pageValue),
+    "Debugger loads from network, gets value 3 like page"
+  );
 
   info("Enable HTTP cache for page");
   await toolbox.target.activeTab.reconfigure({ cacheDisabled: false });
@@ -112,8 +120,10 @@ add_task(async function () {
   await waitForLoadedSource(dbg, "inline-cache.html");
   dbgValue = await findSource(dbg, "inline-cache.html");
   info(`Debugger text: ${dbgValue.text}`);
-  ok(dbgValue.text.includes(pageValue),
-     "Debugger loads from cache, gets value 4 like page");
+  ok(
+    dbgValue.text.includes(pageValue),
+    "Debugger loads from cache, gets value 4 like page"
+  );
 
   makeChanges();
 
@@ -124,8 +134,10 @@ add_task(async function () {
   await waitForLoadedSource(dbg, "inline-cache.html");
   dbgValue = await findSource(dbg, "inline-cache.html");
   info(`Debugger text: ${dbgValue.text}`);
-  ok(dbgValue.text.includes(pageValue),
-     "Debugger loads from cache, gets value 5 like page");
+  ok(
+    dbgValue.text.includes(pageValue),
+    "Debugger loads from cache, gets value 5 like page"
+  );
 
   await toolbox.destroy();
   await removeTab(tab);

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

@@ -20,7 +20,10 @@ const sources = [
  */
 add_task(async function() {
   const dbg = await initDebugger("doc-script-switching.html");
-  const { selectors: { getSelectedSource, isPaused }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource, isPaused },
+    getState
+  } = dbg;
 
   invokeInTab("firstCall");
   await waitForPaused(dbg);

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

@@ -14,7 +14,10 @@ function getNthItem(dbg, index) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   await selectSource(dbg, "simple1", 1);
 
@@ -28,13 +31,31 @@ add_task(async function() {
   assertHighlightLocation(dbg, "simple1", 15);
 
   // Ensure "main()" is the first function listed
-  const firstFunction = findElementWithSelector(dbg, '.outline-list__element .function-signature');
-  is(firstFunction.innerText, "main()", "Natural first function is first listed");
+  const firstFunction = findElementWithSelector(
+    dbg,
+    ".outline-list__element .function-signature"
+  );
+  is(
+    firstFunction.innerText,
+    "main()",
+    "Natural first function is first listed"
+  );
   // Sort the list
   findElementWithSelector(dbg, ".outline-footer button").click();
   // Button becomes active to show alphabetization
-  is(findElementWithSelector(dbg, ".outline-footer button").className, "active", "Alphabetize button is highlighted when active");
+  is(
+    findElementWithSelector(dbg, ".outline-footer button").className,
+    "active",
+    "Alphabetize button is highlighted when active"
+  );
   // Ensure "doEval()" is the first function listed after alphabetization
-  const firstAlphaFunction = findElementWithSelector(dbg, '.outline-list__element .function-signature');
-  is(firstAlphaFunction.innerText.replace("λ", ""), "doEval()", "Alphabetized first function is correct");
+  const firstAlphaFunction = findElementWithSelector(
+    dbg,
+    ".outline-list__element .function-signature"
+  );
+  is(
+    firstAlphaFunction.innerText.replace("λ", ""),
+    "doEval()",
+    "Alphabetized first function is correct"
+  );
 });

devtools/client/debugger/new/test/mochitest/browser_dbg-pause-exceptions.js

@@ -31,25 +31,21 @@ add_task(async function() {
   await resume(dbg);
   await waitForActive(dbg);
 
-
   log("3. Test pausing on a caught Error");
   caughtException();
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
 
-
   log("3.b Test pausing in the catch statement");
   await resume(dbg);
   await waitForPaused(dbg);
   assertPausedLocation(dbg);
   await resume(dbg);
 
-
   log("4. Test skipping a caught error");
   await togglePauseOnExceptions(dbg, true, false);
   caughtException();
 
-
   log("4.b Test pausing in the catch statement");
   await waitForPaused(dbg);
   assertPausedLocation(dbg);

devtools/client/debugger/new/test/mochitest/browser_dbg-pause-on-next.js

@@ -7,7 +7,7 @@ add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
 
   clickElement(dbg, "pause");
-  await waitForState(dbg, state => dbg.selectors.getIsWaitingOnBreak(state))
+  await waitForState(dbg, state => dbg.selectors.getIsWaitingOnBreak(state));
   invokeInTab("simple");
 
   await waitForPaused(dbg, "simple3");

devtools/client/debugger/new/test/mochitest/browser_dbg-pause-points.js

@@ -1,31 +1,30 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
- requestLongerTimeout(2);
-
- async function stepOvers(dbg, count, onStep = () => {}) {
-   let i = 0;
-   while (i++ <= count) {
-     await dbg.actions.stepOver();
-     await waitForPaused(dbg);
-     onStep(dbg.getState());
-   }
- }
+requestLongerTimeout(2);
 
+async function stepOvers(dbg, count, onStep = () => {}) {
+  let i = 0;
+  while (i++ <= count) {
+    await dbg.actions.stepOver();
+    await waitForPaused(dbg);
+    onStep(dbg.getState());
+  }
+}
 
 async function testCase(dbg, { name, count, steps }) {
   invokeInTab(name);
-  let locations = []
+  let locations = [];
 
   await stepOvers(dbg, count, state => {
-    locations.push(dbg.selectors.getTopFrame(state).location)
+    locations.push(dbg.selectors.getTopFrame(state).location);
   });
 
-  const formattedSteps = locations.map(
-    ({line, column}) => `(${line},${column})`
-  ).join(", ")
+  const formattedSteps = locations
+    .map(({ line, column }) => `(${line},${column})`)
+    .join(", ");
 
-  is(formattedSteps, steps, name)
+  is(formattedSteps, steps, name);
 
   await resume(dbg);
 }
@@ -54,6 +53,7 @@ add_task(async function test() {
   await testCase(dbg, {
     name: "flow",
     count: 8,
-    steps: "(16,2), (17,12), (18,6), (19,8), (19,17), (19,8), (19,17), (19,8), (20,0)"
+    steps:
+      "(16,2), (17,12), (18,6), (19,8), (19,17), (19,8), (19,17), (19,8), (20,0)"
   });
 });

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

@@ -30,7 +30,7 @@ add_task(async function() {
   invokeInTab("arithmetic");
 
   info("Switch to console and check message");
-  await waitForConsoleLink(dbg,  "math.min.js:3:65");
+  await waitForConsoleLink(dbg, "math.min.js:3:65");
 
   info("Switch back to debugger and pretty-print");
   await dbg.toolbox.selectTool("jsdebugger");

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

@@ -5,7 +5,10 @@
 // and doesn't have functions.
 add_task(async function() {
   const dbg = await initDebugger("doc-scripts.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   navigate(dbg, "doc-on-load.html");
 

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

@@ -1,11 +1,10 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
-
 async function assertNoTooltip(dbg) {
   await waitForTime(200);
   const el = findElement(dbg, "tooltip");
-  is(el, null, "Tooltip should not exist")
+  is(el, null, "Tooltip should not exist");
 }
 
 function assertPreviewTooltip(dbg, { result, expression }) {
@@ -35,7 +34,10 @@ function assertPreviewPopup(dbg, { field, value, expression }) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-sourcemaps.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "entry.js", "output.js", "times2.js", "opts.js");
   await selectSource(dbg, "times2");
@@ -45,21 +47,20 @@ add_task(async function() {
   await waitForPaused(dbg);
   await waitForSelectedSource(dbg, "times2");
 
-  info(`Test previewing in the original location`)
+  info(`Test previewing in the original location`);
   await assertPreviews(dbg, [
     { line: 2, column: 10, result: 4, expression: "x" }
   ]);
 
-  info(`Test previewing in the generated location`)
+  info(`Test previewing in the generated location`);
   await dbg.actions.jumpToMappedSelectedLocation();
   await waitForSelectedSource(dbg, "bundle.js");
   await assertPreviews(dbg, [
     { line: 70, column: 11, result: 4, expression: "x" }
   ]);
 
-
   info(`Test that you can not preview in another original file`);
   await selectSource(dbg, "output");
   await hoverAtPos(dbg, { line: 2, ch: 16 });
-  await assertNoTooltip(dbg)
+  await assertNoTooltip(dbg);
 });

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

@@ -25,7 +25,7 @@ add_task(async function() {
   await addBreakpoint(dbg, "sjs_code_reload", 2);
 
   await reload(dbg, "sjs_code_reload.sjs");
-  await waitForSelectedSource(dbg, "sjs_code_reload.sjs")
+  await waitForSelectedSource(dbg, "sjs_code_reload.sjs");
 
   const source = findSource(dbg, "sjs_code_reload");
   const location = { sourceId: source.id, line: 6 };

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

@@ -43,7 +43,10 @@ async function clickResume(dbg) {
 }
 
 function assertHistoryPosition(dbg, position) {
-  const { selectors: { getHistoryPosition, getHistoryFrame }, getState } = dbg;
+  const {
+    selectors: { getHistoryPosition, getHistoryFrame },
+    getState
+  } = dbg;
 
   ok(
     getHistoryPosition(getState()) === position - 1,

devtools/client/debugger/new/test/mochitest/browser_dbg-sourcemapped-breakpoint-console.js

@@ -1,11 +1,21 @@
-
-async function evalInConsoleAtPoint(dbg, fixture, { line, column }, statements) {
+async function evalInConsoleAtPoint(
+  dbg,
+  fixture,
+  { line, column },
+  statements
+) {
   const filename = `fixtures/${fixture}/input.js`;
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
-    await assertConsoleEval(dbg, statements);
-  });
+  await invokeWithBreakpoint(
+    dbg,
+    fnName,
+    filename,
+    { line, column },
+    async () => {
+      await assertConsoleEval(dbg, statements);
+    }
+  );
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }
@@ -34,24 +44,30 @@ add_task(async function() {
   await evalInConsoleAtPoint(dbg, "babel-eval-maps", { line: 14, column: 4 }, [
     "one === 1",
     "two === 4",
-    "three === 5",
+    "three === 5"
   ]);
 
-  await evalInConsoleAtPoint(dbg, "babel-modules-cjs", { line: 20, column: 2 }, [
-    `aDefault === "a-default"`,
-    `anAliased === "an-original"`,
-    `aNamed === "a-named"`,
-    `aDefault2 === "a-default2"`,
-    `anAliased2 === "an-original2"`,
-    `aNamed2 === "a-named2"`,
-    `aDefault3 === "a-default3"`,
-    `anAliased3 === "an-original3"`,
-    `aNamed3 === "a-named3"`,
-  ]);
+  await evalInConsoleAtPoint(
+    dbg,
+    "babel-modules-cjs",
+    { line: 20, column: 2 },
+    [
+      `aDefault === "a-default"`,
+      `anAliased === "an-original"`,
+      `aNamed === "a-named"`,
+      `aDefault2 === "a-default2"`,
+      `anAliased2 === "an-original2"`,
+      `aNamed2 === "a-named2"`,
+      `aDefault3 === "a-default3"`,
+      `anAliased3 === "an-original3"`,
+      `aNamed3 === "a-named3"`
+    ]
+  );
 
-  await evalInConsoleAtPoint(dbg, "babel-shadowed-vars", { line: 18, column: 6 }, [
-    `aVar === "var3"`,
-    `aLet === "let3"`,
-    `aConst === "const3"`,
-  ]);
+  await evalInConsoleAtPoint(
+    dbg,
+    "babel-shadowed-vars",
+    { line: 18, column: 6 },
+    [`aVar === "var3"`, `aLet === "let3"`, `aConst === "const3"`]
+  );
 });

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

@@ -10,9 +10,15 @@ async function breakpointPreviews(dbg, fixture, { line, column }, previews) {
 
   log(`Starting ${fixture} tests`);
 
-  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
-    await assertPreviews(dbg, previews);
-  });
+  await invokeWithBreakpoint(
+    dbg,
+    fnName,
+    filename,
+    { line, column },
+    async () => {
+      await assertPreviews(dbg, previews);
+    }
+  );
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }
@@ -23,25 +29,29 @@ function testForOf(dbg) {
       line: 5,
       column: 7,
       expression: "doThing",
-      result: "doThing(arg)",
+      result: "doThing(arg)"
     },
     {
       line: 5,
       column: 13,
       expression: "x",
-      result: "1",
+      result: "1"
     },
     {
       line: 8,
       column: 16,
       expression: "doThing",
-      result: "doThing(arg)",
-    },
+      result: "doThing(arg)"
+    }
   ]);
 }
 
 function testShadowing(dbg) {
-  return breakpointPreviews(dbg, "babel-shadowed-vars", { line: 18, column: 6 }, [
+  return breakpointPreviews(
+    dbg,
+    "babel-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
@@ -50,37 +60,37 @@ function testShadowing(dbg) {
         line: 2,
         column: 9,
         expression: "aVar",
-        result: '"var3"',
+        result: '"var3"'
       },
       {
         line: 3,
         column: 9,
         expression: "_aLet2;",
-        result: '"let3"',
+        result: '"let3"'
       },
       {
         line: 4,
         column: 11,
         expression: "_aConst2;",
-        result: '"const3"',
+        result: '"const3"'
       },
       {
         line: 10,
         column: 11,
         expression: "aVar",
-        result: '"var3"',
+        result: '"var3"'
       },
       {
         line: 11,
         column: 11,
         expression: "_aLet2;",
-        result: '"let3"',
+        result: '"let3"'
       },
       {
         line: 12,
         column: 13,
         expression: "_aConst2;",
-        result: '"const3"',
+        result: '"const3"'
       },
 
       // These actually result in the values the user would expect.
@@ -88,100 +98,94 @@ function testShadowing(dbg) {
         line: 14,
         column: 13,
         expression: "aVar",
-        result: '"var3"',
+        result: '"var3"'
       },
       {
         line: 15,
         column: 13,
         expression: "_aLet2;",
-        result: '"let3"',
+        result: '"let3"'
       },
       {
         line: 16,
         column: 13,
         expression: "_aConst2;",
-        result: '"const3"',
-      },
-    ]);
+        result: '"const3"'
+      }
+    ]
+  );
 }
 
 function testImportedBindings(dbg) {
   return breakpointPreviews(dbg, "babel-modules-cjs", { 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: "_mod3.aNamed;",
-     result: '"a-named"',
-   },
-   {
-     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: "_mod8.aNamed2;",
-     result: '"a-named2"',
-   },
-   {
-     line: 35,
-     column: 20,
-     expression: "aNamespace2",
-     fields: [
-       ['aNamed', 'a-named2'],
-       ['default', 'a-default2'],
-     ],
-   },
- ]);
+    {
+      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: "_mod3.aNamed;",
+      result: '"a-named"'
+    },
+    {
+      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: "_mod8.aNamed2;",
+      result: '"a-named2"'
+    },
+    {
+      line: 35,
+      column: 20,
+      expression: "aNamespace2",
+      fields: [["aNamed", "a-named2"], ["default", "a-default2"]]
+    }
+  ]);
 }
 
-
 add_task(async function() {
   await pushPref("devtools.debugger.features.map-scopes", true);
   const dbg = await initDebugger("doc-sourcemapped.html");
 
-  await testForOf(dbg)
-  await testShadowing(dbg)
-  await testImportedBindings(dbg)
+  await testForOf(dbg);
+  await testShadowing(dbg);
+  await testImportedBindings(dbg);
 });

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

@@ -10,9 +10,15 @@ async function breakpointScopes(dbg, fixture, { line, column }, scopes) {
   const filename = `fixtures/${fixture}/input.`;
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async () => {
-    await assertScopes(dbg, scopes);
-  });
+  await invokeWithBreakpoint(
+    dbg,
+    fnName,
+    filename,
+    { line, column },
+    async () => {
+      await assertScopes(dbg, scopes);
+    }
+  );
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }
@@ -31,7 +37,7 @@ add_task(async function() {
     "ExportedOther()",
     "ExpressionClass:Foo()",
     "fn()",
-    ["ns", '{\u2026}'],
+    ["ns", "{\u2026}"],
     "SubDecl()",
     "SubVar:SubExpr()"
   ]);
@@ -81,7 +87,7 @@ add_task(async function() {
     { line: 19, column: 4 },
     [
       "Block",
-      ["<this>", '{\u2026}'],
+      ["<this>", "{\u2026}"],
       ["one", "1"],
       ["two", "2"],
       "root",
@@ -227,31 +233,37 @@ add_task(async function() {
     "thirdModuleScoped()"
   ]);
 
-  await breakpointScopes(dbg, "babel-out-of-order-declarations-cjs", { line: 8, column: 4 }, [
-    "callback",
-    "fn()",
-    ["val", "undefined"],
-    "root",
-    ["callback", "(optimized away)"],
-    ["fn", "(optimized away)"],
-    ["val", "(optimized away)"],
-    "Module",
+  await breakpointScopes(
+    dbg,
+    "babel-out-of-order-declarations-cjs",
+    { line: 8, column: 4 },
+    [
+      "callback",
+      "fn()",
+      ["val", "undefined"],
+      "root",
+      ["callback", "(optimized away)"],
+      ["fn", "(optimized away)"],
+      ["val", "(optimized away)"],
+      "Module",
 
-    // This value is currently optimized away, which isn't 100% accurate.
-    // Because import declarations is the last thing in the file, our current
-    // logic doesn't cover _both_ 'var' statements that it generates,
-    // making us use the first, optimized-out binding. Given that imports
-    // are almost never the last thing in a file though, this is probably not
-    // a huge deal for now.
-    ["aDefault", "(optimized away)"],
-    ["root", "(optimized away)"],
-    ["val", "(optimized away)"],
-  ]);
-  await breakpointScopes(dbg, "babel-flowtype-bindings", { line: 8, column: 2 }, [
-    "Module",
-    ["aConst", '"a-const"'],
-    "root()"
-  ]);
+      // This value is currently optimized away, which isn't 100% accurate.
+      // Because import declarations is the last thing in the file, our current
+      // logic doesn't cover _both_ 'var' statements that it generates,
+      // making us use the first, optimized-out binding. Given that imports
+      // are almost never the last thing in a file though, this is probably not
+      // a huge deal for now.
+      ["aDefault", "(optimized away)"],
+      ["root", "(optimized away)"],
+      ["val", "(optimized away)"]
+    ]
+  );
+  await breakpointScopes(
+    dbg,
+    "babel-flowtype-bindings",
+    { line: 8, column: 2 },
+    ["Module", ["aConst", '"a-const"'], "root()"]
+  );
 
   await breakpointScopes(dbg, "babel-switches", { line: 7, column: 6 }, [
     "Switch",
@@ -284,49 +296,59 @@ add_task(async function() {
     "root()"
   ]);
 
-  await breakpointScopes(dbg, "babel-modules-webpack", { line: 20, column: 2 }, [
-    "Module",
-    ["aDefault", '"a-default"'],
-    ["aDefault2", '"a-default2"'],
-    ["aDefault3", '"a-default3"'],
-    ["anAliased", "Getter"],
-    ["anAliased2", "Getter"],
-    ["anAliased3", "Getter"],
-    ["aNamed", "Getter"],
-    ["aNamed2", "Getter"],
-    ["aNamed3", "Getter"],
-    ["aNamespace", "{\u2026}"],
-    ["aNamespace2", "{\u2026}"],
-    ["aNamespace3", "{\u2026}"],
-    ["anotherNamed", "Getter"],
-    ["anotherNamed2", "Getter"],
-    ["anotherNamed3", "Getter"],
-    ["example", "(optimized away)"],
-    ["optimizedOut", "(optimized away)"],
-    "root()"
-  ]);
+  await breakpointScopes(
+    dbg,
+    "babel-modules-webpack",
+    { line: 20, column: 2 },
+    [
+      "Module",
+      ["aDefault", '"a-default"'],
+      ["aDefault2", '"a-default2"'],
+      ["aDefault3", '"a-default3"'],
+      ["anAliased", "Getter"],
+      ["anAliased2", "Getter"],
+      ["anAliased3", "Getter"],
+      ["aNamed", "Getter"],
+      ["aNamed2", "Getter"],
+      ["aNamed3", "Getter"],
+      ["aNamespace", "{\u2026}"],
+      ["aNamespace2", "{\u2026}"],
+      ["aNamespace3", "{\u2026}"],
+      ["anotherNamed", "Getter"],
+      ["anotherNamed2", "Getter"],
+      ["anotherNamed3", "Getter"],
+      ["example", "(optimized away)"],
+      ["optimizedOut", "(optimized away)"],
+      "root()"
+    ]
+  );
 
-  await breakpointScopes(dbg, "babel-modules-webpack-es6", { line: 20, column: 2 }, [
-    "Module",
-    ["aDefault", '"a-default"'],
-    ["aDefault2", '"a-default2"'],
-    ["aDefault3", '"a-default3"'],
-    ["anAliased", '"an-original"'],
-    ["anAliased2", '"an-original2"'],
-    ["anAliased3", '"an-original3"'],
-    ["aNamed", '"a-named"'],
-    ["aNamed2", '"a-named2"'],
-    ["aNamed3", '"a-named3"'],
-    ["aNamespace", "{\u2026}"],
-    ["aNamespace2", "{\u2026}"],
-    ["aNamespace3", "{\u2026}"],
-    ["anotherNamed", '"a-named"'],
-    ["anotherNamed2", '"a-named2"'],
-    ["anotherNamed3", '"a-named3"'],
-    ["example", "(optimized away)"],
-    ["optimizedOut", "(optimized away)"],
-    "root()"
-  ]);
+  await breakpointScopes(
+    dbg,
+    "babel-modules-webpack-es6",
+    { line: 20, column: 2 },
+    [
+      "Module",
+      ["aDefault", '"a-default"'],
+      ["aDefault2", '"a-default2"'],
+      ["aDefault3", '"a-default3"'],
+      ["anAliased", '"an-original"'],
+      ["anAliased2", '"an-original2"'],
+      ["anAliased3", '"an-original3"'],
+      ["aNamed", '"a-named"'],
+      ["aNamed2", '"a-named2"'],
+      ["aNamed3", '"a-named3"'],
+      ["aNamespace", "{\u2026}"],
+      ["aNamespace2", "{\u2026}"],
+      ["aNamespace3", "{\u2026}"],
+      ["anotherNamed", '"a-named"'],
+      ["anotherNamed2", '"a-named2"'],
+      ["anotherNamed3", '"a-named3"'],
+      ["example", "(optimized away)"],
+      ["optimizedOut", "(optimized away)"],
+      "root()"
+    ]
+  );
 
   await breakpointScopes(
     dbg,

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

@@ -8,15 +8,24 @@ async function breakpointSteps(dbg, fixture, { line, column }, steps) {
   const filename = `fixtures/${fixture}/input.js`;
   const fnName = fixture.replace(/-([a-z])/g, (s, c) => c.toUpperCase());
 
-  await invokeWithBreakpoint(dbg, fnName, filename, { line, column }, async source => {
-    await runSteps(dbg, source, steps);
-  });
+  await invokeWithBreakpoint(
+    dbg,
+    fnName,
+    filename,
+    { line, column },
+    async source => {
+      await runSteps(dbg, source, steps);
+    }
+  );
 
   ok(true, `Ran tests for ${fixture} at line ${line} column ${column}`);
 }
 
 async function runSteps(dbg, source, steps) {
-  const { selectors: { getVisibleSelectedFrame }, getState } = dbg;
+  const {
+    selectors: { getVisibleSelectedFrame },
+    getState
+  } = dbg;
 
   for (const [i, [type, position]] of steps.entries()) {
     switch (type) {
@@ -41,29 +50,39 @@ async function runSteps(dbg, source, steps) {
 }
 
 function testStepOverForOf(dbg) {
-  return breakpointSteps(dbg, "babel-step-over-for-of", { line: 4, column: 2 }, [
-    ["stepOver", { line: 6, column: 2 }],
-    ["stepOver", { line: 7, column: 4 }],
-    ["stepOver", { line: 6, column: 2 }],
-    ["stepOver", { line: 7, column: 4 }],
-    ["stepOver", { line: 6, column: 2 }],
-    ["stepOver", { line: 10, column: 2 }]
-  ]);
+  return breakpointSteps(
+    dbg,
+    "babel-step-over-for-of",
+    { line: 4, column: 2 },
+    [
+      ["stepOver", { line: 6, column: 2 }],
+      ["stepOver", { line: 7, column: 4 }],
+      ["stepOver", { line: 6, column: 2 }],
+      ["stepOver", { line: 7, column: 4 }],
+      ["stepOver", { line: 6, column: 2 }],
+      ["stepOver", { line: 10, column: 2 }]
+    ]
+  );
 }
 
 // This codifies the current behavior, but stepping twice over the for
 // header isn't ideal.
 function testStepOverForOfArray(dbg) {
-  return breakpointSteps(dbg, "babel-step-over-for-of-array", { line: 3, column: 2 }, [
-    ["stepOver", { line: 5, column: 2 }],
-    ["stepOver", { line: 5, column: 7 }],
-    ["stepOver", { line: 6, column: 4 }],
-    ["stepOver", { line: 5, column: 2 }],
-    ["stepOver", { line: 5, column: 7 }],
-    ["stepOver", { line: 6, column: 4 }],
-    ["stepOver", { line: 5, column: 2 }],
-    ["stepOver", { line: 9, column: 2 }]
-  ]);
+  return breakpointSteps(
+    dbg,
+    "babel-step-over-for-of-array",
+    { line: 3, column: 2 },
+    [
+      ["stepOver", { line: 5, column: 2 }],
+      ["stepOver", { line: 5, column: 7 }],
+      ["stepOver", { line: 6, column: 4 }],
+      ["stepOver", { line: 5, column: 2 }],
+      ["stepOver", { line: 5, column: 7 }],
+      ["stepOver", { line: 6, column: 4 }],
+      ["stepOver", { line: 5, column: 2 }],
+      ["stepOver", { line: 9, column: 2 }]
+    ]
+  );
 }
 
 // The closure means it isn't actually possible to step into the for body,

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

@@ -8,7 +8,10 @@ requestLongerTimeout(2);
 add_task(async function() {
   // NOTE: the CORS call makes the test run times inconsistent
   const dbg = await initDebugger("doc-sourcemap-bogus.html");
-  const { selectors: { getSources }, getState } = dbg;
+  const {
+    selectors: { getSources },
+    getState
+  } = dbg;
 
   await selectSource(dbg, "bogus-map.js");
 

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

@@ -25,11 +25,11 @@ function getBreakpoints(dbg) {
 add_task(async function() {
   const dbg = await initDebugger("doc-minified.html");
 
-  dump(`>> meh`)
+  dump(`>> meh`);
 
   await navigate(dbg, "sourcemaps-reload/doc-sourcemaps-reload.html", "v1");
 
-  dump(`>> select v1`)
+  dump(`>> select v1`);
   await selectSource(dbg, "v1");
   await addBreakpoint(dbg, "v1", 6);
   let breakpoint = getBreakpoints(dbg)[0];

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

@@ -12,7 +12,10 @@ async function waitForBreakpointCount(dbg, count) {
 add_task(async function() {
   // NOTE: the CORS call makes the test run times inconsistent
   const dbg = await initDebugger("doc-sourcemaps.html");
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint, getBreakpoints },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "entry.js", "output.js", "times2.js", "opts.js");
   ok(true, "Original sources exist");
@@ -20,7 +23,9 @@ add_task(async function() {
 
   await selectSource(dbg, entrySrc);
   ok(
-    getCM(dbg).getValue().includes("window.keepMeAlive"),
+    getCM(dbg)
+      .getValue()
+      .includes("window.keepMeAlive"),
     "Original source text loaded correctly"
   );
 

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

@@ -6,7 +6,10 @@
 requestLongerTimeout(2);
 
 function assertBreakpointExists(dbg, source, line) {
-  const { selectors: { getBreakpoint }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint },
+    getState
+  } = dbg;
 
   ok(
     getBreakpoint(getState(), { sourceId: source.id, line }),
@@ -37,7 +40,10 @@ function clickGutter(dbg, line) {
 add_task(async function() {
   // NOTE: the CORS call makes the test run times inconsistent
   const dbg = await initDebugger("doc-sourcemaps.html");
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint, getBreakpoints },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "entry.js", "output.js", "times2.js", "opts.js");
   ok(true, "Original sources exist");
@@ -57,7 +63,9 @@ add_task(async function() {
 
   await selectSource(dbg, entrySrc);
   ok(
-    getCM(dbg).getValue().includes("window.keepMeAlive"),
+    getCM(dbg)
+      .getValue()
+      .includes("window.keepMeAlive"),
     "Original source text loaded correctly"
   );
 

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

@@ -19,7 +19,10 @@ function assertBpInGutter(dbg, lineNumber) {
 add_task(async function() {
   // NOTE: the CORS call makes the test run times inconsistent
   const dbg = await initDebugger("doc-sourcemaps2.html");
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint, getBreakpoints },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "main.js", "main.min.js");
 

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

@@ -11,7 +11,10 @@ add_task(async function() {
   await pushPref("devtools.debugger.features.map-scopes", true);
 
   const dbg = await initDebugger("doc-sourcemaps3.html");
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint, getBreakpoints },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "bundle.js", "sorted.js", "test.js");
 

devtools/client/debugger/new/test/mochitest/browser_dbg-sources-named-eval.js

@@ -19,7 +19,10 @@ function getLabel(dbg, index) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-sources.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "simple1", "simple2", "nested-source", "long.js");
 

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

@@ -24,7 +24,10 @@ function getLabel(dbg, index) {
 
 add_task(async function() {
   const dbg = await initDebugger("doc-sources.html");
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, "simple1", "simple2", "nested-source", "long.js");
 
@@ -49,10 +52,7 @@ add_task(async function() {
   const selectedSource = getSelectedSource(getState()).get("url");
 
   ok(fourthNode.classList.contains("focused"), "4th node is focused");
-  ok(
-    selectedSource.includes("nested-source.js"),
-    "nested-source is selected"
-  );
+  ok(selectedSource.includes("nested-source.js"), "nested-source is selected");
 
   await waitForSelectedSource(dbg, "nested-source");
 

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

@@ -1,8 +1,8 @@
 /* Any copyright is dedicated to the Public Domain.
  * http://creativecommons.org/publicdomain/zero/1.0/ */
 
- // This test can be really slow on debug platforms
- requestLongerTimeout(5);
+// This test can be really slow on debug platforms
+requestLongerTimeout(5);
 
 add_task(async function test() {
   const dbg = await initDebugger("big-sourcemap.html", "big-sourcemap");

devtools/client/debugger/new/test/mochitest/examples/doc-preview.html

@@ -16,8 +16,5 @@
       // it's not immediately garbage collected.
       inline_script = function () { var x = 5; };
     </script>
-
-    <button onclick="empties()">Empties</button>
-    <button onclick="smalls()">Smalls</button>
   </body>
 </html>

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

@@ -40,7 +40,8 @@ Services.scriptloader.loadSubScript(
 
 Services.scriptloader.loadSubScript(
   "chrome://mochitests/content/browser/devtools/client/debugger/new/test/mochitest/helpers.js",
-  this);
+  this
+);
 
 const EXAMPLE_URL =
   "http://example.com/browser/devtools/client/debugger/new/test/mochitest/examples/";

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

@@ -156,7 +156,10 @@ function waitForState(dbg, predicate, msg) {
  * @static
  */
 async function waitForSources(dbg, ...sources) {
-  const { selectors: { getSources }, store } = dbg;
+  const {
+    selectors: { getSources },
+    store
+  } = dbg;
   if (sources.length === 0) {
     return Promise.resolve();
   }
@@ -211,7 +214,6 @@ function waitForSelectedSource(dbg, url) {
   return waitForState(
     dbg,
     state => {
-
       const source = dbg.selectors.getSelectedSource(state);
       const isLoaded = source && sourceUtils.isLoaded(source);
       if (!isLoaded) {
@@ -259,7 +261,10 @@ function assertPaused(dbg) {
 }
 
 function getVisibleSelectedFrameLine(dbg) {
-  const { selectors: { getVisibleSelectedFrame }, getState } = dbg;
+  const {
+    selectors: { getVisibleSelectedFrame },
+    getState
+  } = dbg;
   const frame = getVisibleSelectedFrame(getState());
   return frame && frame.location.line;
 }
@@ -274,7 +279,10 @@ function getVisibleSelectedFrameLine(dbg) {
  * @static
  */
 function assertPausedLocation(dbg) {
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
 
   ok(
     isSelectedFrameSelected(dbg, getState()),
@@ -344,7 +352,10 @@ function assertDebugLine(dbg, line) {
  * @static
  */
 function assertHighlightLocation(dbg, source, line) {
-  const { selectors: { getSelectedSource }, getState } = dbg;
+  const {
+    selectors: { getSelectedSource },
+    getState
+  } = dbg;
   source = findSource(dbg, source);
 
   // Check the selected source
@@ -381,7 +392,10 @@ function assertHighlightLocation(dbg, source, line) {
  * @static
  */
 function isPaused(dbg) {
-  const { selectors: { isPaused }, getState } = dbg;
+  const {
+    selectors: { isPaused },
+    getState
+  } = dbg;
   return !!isPaused(getState());
 }
 
@@ -687,8 +701,8 @@ async function reload(dbg, ...sources) {
  * @static
  */
 async function navigate(dbg, url, ...sources) {
-  info(`Navigating to ${url}`)
-  const navigated =  waitForDispatch(dbg, "NAVIGATE");
+  info(`Navigating to ${url}`);
+  const navigated = waitForDispatch(dbg, "NAVIGATE");
   await dbg.client.navigate(url);
   await navigated;
   return waitForSources(dbg, ...sources);
@@ -720,7 +734,10 @@ function disableBreakpoint(dbg, source, line, column) {
 }
 
 async function loadAndAddBreakpoint(dbg, filename, line, column) {
-  const { selectors: { getBreakpoint, getBreakpoints }, getState } = dbg;
+  const {
+    selectors: { getBreakpoint, getBreakpoints },
+    getState
+  } = dbg;
 
   await waitForSources(dbg, filename);
 
@@ -741,8 +758,17 @@ async function loadAndAddBreakpoint(dbg, filename, line, column) {
   return source;
 }
 
-async function invokeWithBreakpoint(dbg, fnName, filename, { line, column }, handler) {
-  const { selectors: { getBreakpoints }, getState } = dbg;
+async function invokeWithBreakpoint(
+  dbg,
+  fnName,
+  filename,
+  { line, column },
+  handler
+) {
+  const {
+    selectors: { getBreakpoints },
+    getState
+  } = dbg;
 
   const source = await loadAndAddBreakpoint(dbg, filename, line, column);
 
@@ -1003,7 +1029,7 @@ const selectors = {
     `.expressions-list .expression-container:nth-child(${i}) .object-delimiter + *`,
   expressionClose: i =>
     `.expressions-list .expression-container:nth-child(${i}) .close`,
-  expressionInput: '.expressions-list  input.input-expression',
+  expressionInput: ".expressions-list  input.input-expression",
   expressionNodes: ".expressions-list .tree-node",
   scopesHeader: ".scopes-pane ._header",
   breakpointItem: i => `.breakpoints-list .breakpoint:nth-of-type(${i})`,
@@ -1047,7 +1073,7 @@ const selectors = {
     `.outline-list__element:nth-child(${i}) .function-signature`,
   outlineItems: ".outline-list__element",
   conditionalPanelInput: ".conditional-breakpoint-panel input",
-  searchField: ".search-field",
+  searchField: ".search-field"
 };
 
 function getSelector(elementName, ...args) {
@@ -1168,11 +1194,10 @@ function getScopeValue(dbg, index) {
 }
 
 function toggleObjectInspectorNode(node) {
-
   const objectInspector = node.closest(".object-inspector");
   const properties = objectInspector.querySelectorAll(".node").length;
 
-  log(`Toggling node ${node.innerText}`)
+  log(`Toggling node ${node.innerText}`);
   node.click();
   return waitUntil(
     () => objectInspector.querySelectorAll(".node").length !== properties
@@ -1264,7 +1289,7 @@ async function assertPreviewPopup(
   const properties =
     preview.result.preview.ownProperties || preview.result.preview.items;
   const property = properties[field];
-  const propertyValue = property.value || property
+  const propertyValue = property.value || property;
 
   is(`${propertyValue}`, value, "Preview.result");
   is(preview.updating, false, "Preview.updating");
@@ -1294,4 +1319,4 @@ async function assertPreviews(dbg, previews) {
 
     dbg.actions.clearPreview();
   }
-}
+}

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

@@ -97,9 +97,9 @@ ignoreExceptionsItem=Ignore exceptions
 # item shown when a user is adding a new breakpoint.
 pauseOnUncaughtExceptionsItem=Pause on uncaught exceptions
 
-# LOCALIZATION NOTE (pauseOnExceptionsItem2): The pause on exceptions checkbox description
+# LOCALIZATION NOTE (pauseOnExceptionsItem): The pause on exceptions checkbox description
 # when the debugger will pause on all exceptions.
-pauseOnExceptionsItem2=Pause on exceptions
+pauseOnExceptionsItem=Pause on exceptions
 
 # LOCALIZATION NOTE (ignoreCaughtExceptionsItem): The pause on exceptions checkbox description
 # when the debugger will not pause on any caught exception

devtools/client/shared/components/reps/reps.js

@@ -1612,7 +1612,9 @@ const { nodeIsError, nodeIsPrimitive } = node;
 const selection = __webpack_require__(3698);
 
 const { MODE } = __webpack_require__(3645);
-const { REPS: { Rep, Grip } } = __webpack_require__(3647);
+const {
+  REPS: { Rep, Grip }
+} = __webpack_require__(3647);
 
 
 function shouldRenderRootsInReps(roots) {
@@ -3084,7 +3086,9 @@ function nodeNeedsNumericalBuckets(item) {
 }
 
 function makeNodesForPromiseProperties(item) {
-  const { promiseState: { reason, value, state } } = getValue(item);
+  const {
+    promiseState: { reason, value, state }
+  } = getValue(item);
 
   const properties = [];
 

devtools/client/shared/source-map/index.js

@@ -430,7 +430,9 @@ const {
   isOriginalId
 } = __webpack_require__(3652);
 
-const { workerUtils: { WorkerDispatcher } } = __webpack_require__(3651);
+const {
+  workerUtils: { WorkerDispatcher }
+} = __webpack_require__(3651);
 
 const dispatcher = new WorkerDispatcher();
 

devtools/client/shared/source-map/worker.js

@@ -1985,7 +1985,9 @@ const {
 
 const { clearSourceMaps } = __webpack_require__(3704);
 
-const { workerUtils: { workerHandler } } = __webpack_require__(3651);
+const {
+  workerUtils: { workerHandler }
+} = __webpack_require__(3651);
 
 // The interface is implemented in source-map to be
 // easier to unit test.