Bug 1511352 - Update Debugger Frontend v106. r=dwalsh

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

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

@@ -436,7 +436,8 @@ html[dir="rtl"] .tree-node button.arrow {
 }
 
 .tree-node.focused button.jump-definition,
-.tree-node.focused button.open-inspector {
+.tree-node.focused button.open-inspector,
+.tree-node.focused button.invoke-getter {
   background-color: currentColor;
 }
 .A11y-mouse :focus {
@@ -2312,7 +2313,8 @@ menuseparator {
 }
 
 .source-footer .blackbox-summary,
-.source-footer .mapped-source {
+.source-footer .mapped-source,
+.source-footer .cursor-position {
   color: var(--theme-body-color);
   padding-left: 2.5px;
 }
@@ -2322,6 +2324,10 @@ menuseparator {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.source-footer .cursor-position {
+  padding: 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/>. */
@@ -2685,42 +2691,37 @@ menuseparator {
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 .call-site {
-  position: relative;
+  display: inline;
+}
+
+.call-site svg {
   display: inline;
   cursor: pointer;
-}
-
-.call-site::before {
-  content: "";
-  mask: url("resource://devtools/client/debugger/new/images/column-marker.svg") no-repeat 100% 100%;
-  mask-size: contain;
-  display: inline-block;
-  background-color: var(--blue-55);
-  opacity: 0.5;
-  width: 9px;
   height: 12px;
+  width: 9px;
+  vertical-align: top;
 }
 
-.call-site.active::before {
+.call-site.active svg {
-  opacity: 1;
+  fill: var(--blue-50);
+  stroke: var(--blue-60);
 }
 
-.theme-dark .call-site {
+.call-site.disabled svg {
-  border-bottom: none;
+  fill: var(--blue-50);
+  stroke: var(--blue-40);
+  fill-opacity: 0.5;
 }
 
-.theme-dark .call-site-bp {
+.theme-dark .call-site.active svg {
-  border-bottom: none;
+  fill: var(--blue-55);
+  stroke: var(--blue-40);
 }
 
-.theme-dark .call-site::before {
+.theme-dark .call-site.disabled svg {
-  background-color: var(--blue-60);
+  fill: var(--blue-50);
-  opacity: 1;
+  stroke: var(--blue-60);
-}
+  fill-opacity: 0.5;
-
-.theme-dark .call-site-bp::before {
-  background-color: var(--blue-50);
-  opacity: 0.5;
 }
 /* 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
@@ -2814,10 +2815,18 @@ html[dir="rtl"] .editor-mount {
 
 .theme-light {
   --gutter-hover-background-color: #dde1e4;
+  --breakpoint-fill: var(--blue-50);
+  --breakpoint-stroke: var(--blue-60);
+  --breakpoint-fill-disabled: var(--blue-50);
+  --breakpoint-stroke-disabled: var(--blue-40);
 }
 
 .theme-dark {
   --gutter-hover-background-color: #414141;
+  --breakpoint-fill: var(--blue-55);
+  --breakpoint-stroke: var(--blue-40);
+  --breakpoint-fill-disabled: var(--blue-50);
+  --breakpoint-stroke-disabled: var(--blue-60);
 }
 
 :not(.empty-line):not(.new-breakpoint)
@@ -2872,7 +2881,8 @@ html[dir="rtl"] .editor-mount {
 }
 
 .editor.new-breakpoint svg {
-  fill: var(--theme-selection-background);
+  fill: var(--breakpoint-fill);
+  stroke: var(--breakpoint-stroke);
   width: 60px;
   height: 14px;
   position: absolute;
@@ -2899,12 +2909,15 @@ html[dir="rtl"] .editor-mount {
   right: -16px;
 }
 
-.new-breakpoint.has-condition svg {
+.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
   fill: var(--theme-graphs-yellow);
+  stroke: var(--theme-graphs-orange);
 }
 
 .editor.new-breakpoint.breakpoint-disabled svg {
-  opacity: 0.3;
+  fill: var(--breakpoint-fill-disabled);
+  stroke: var(--breakpoint-stroke-disabled);
+  fill-opacity: 0.5;
 }
 
 .editor.column-breakpoint svg {
@@ -3629,55 +3642,6 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
  * 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/>. */
 
-.event-listeners {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.event-listeners .listener {
-  padding: 7px 10px 7px 21px;
-  clear: both;
-  overflow: hidden;
-}
-
-.event-listeners .listener * {
-  -moz-user-select: none;
-  user-select: none;
-}
-
-.event-listeners .listener:nth-of-type(2n) {
-  background-color: var(--theme-tab-toolbar-background);
-}
-
-.event-listeners .listener .type {
-  color: var(--theme-highlight-bluegrey);
-  padding-right: 5px;
-}
-
-.event-listeners .listener .selector {
-  color: var(--theme-content-color2);
-}
-
-.event-listeners .listener-checkbox {
-  margin-left: 0;
-}
-
-.event-listeners .listener .close-btn {
-  float: right;
-}
-
-.event-listeners .listener .close {
-  display: none;
-}
-
-.event-listeners .listener:hover .close {
-  display: block;
-}
-/* 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/>. */
-
 .workers-list * {
   user-select: none;
 }

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

@@ -1008,10 +1008,8 @@ exports.isYieldExpression = isYieldExpression;
 exports.isObjectShorthand = isObjectShorthand;
 exports.getObjectExpressionValue = getObjectExpressionValue;
 exports.getCode = getCode;
-exports.getVariableNames = getVariableNames;
 exports.getComments = getComments;
 exports.getSpecifiers = getSpecifiers;
-exports.isVariable = isVariable;
 exports.isComputedExpression = isComputedExpression;
 exports.getMemberExpression = getMemberExpression;
 exports.getVariables = getVariables;
@@ -1026,19 +1024,17 @@ var _generator = __webpack_require__(2365);
 
 var _generator2 = _interopRequireDefault(_generator);
 
-var _flatten = __webpack_require__(706);
-
-var _flatten2 = _interopRequireDefault(_flatten);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; } }
 
+/* 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/>. */
+
 function isFunction(node) {
   return t.isFunction(node) || t.isArrowFunctionExpression(node) || t.isObjectMethod(node) || t.isClassMethod(node);
-} /* 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/>. */
 
 function isAwaitExpression(path) {
   const { node, parent } = path;
@@ -1074,37 +1070,6 @@ function getCode(node) {
   return (0, _generator2.default)(node).code;
 }
 
-function getVariableNames(path) {
-  if (t.isObjectProperty(path.node) && !isFunction(path.node.value)) {
-    if (path.node.key.type === "StringLiteral") {
-      return [{
-        name: path.node.key.value,
-        location: path.node.loc
-      }];
-    } else if (path.node.value.type === "Identifier") {
-      return [{ name: path.node.value.name, location: path.node.loc }];
-    } else if (path.node.value.type === "AssignmentPattern") {
-      return [{ name: path.node.value.left.name, location: path.node.loc }];
-    }
-
-    return [{
-      name: path.node.key.name,
-      location: path.node.loc
-    }];
-  }
-
-  if (!path.node.declarations) {
-    return path.node.params.map(dec => ({
-      name: dec.name,
-      location: dec.loc
-    }));
-  }
-
-  const declarations = path.node.declarations.filter(dec => dec.id.type !== "ObjectPattern").map(getVariables);
-
-  return (0, _flatten2.default)(declarations);
-}
-
 function getComments(ast) {
   if (!ast || !ast.comments) {
     return [];
@@ -1123,11 +1088,6 @@ function getSpecifiers(specifiers) {
   return specifiers.map(specifier => specifier.local && specifier.local.name);
 }
 
-function isVariable(path) {
-  const node = path.node;
-  return t.isVariableDeclaration(node) || isFunction(path) && path.node.params != null && path.node.params.length || t.isObjectProperty(node) && !isFunction(path.node.value);
-}
-
 function isComputedExpression(expression) {
   return (/^\[/m.test(expression)
   );
@@ -1380,10 +1340,6 @@ function getFunctionParameterNames(path) {
 
 /* eslint-disable complexity */
 function extractSymbol(path, symbols) {
-  if ((0, _helpers.isVariable)(path)) {
-    symbols.variables.push(...(0, _helpers.getVariableNames)(path));
-  }
-
   if ((0, _helpers.isFunction)(path)) {
     symbols.functions.push({
       name: (0, _getFunctionName2.default)(path.node, path.parent),
@@ -1532,7 +1488,6 @@ function extractSymbol(path, symbols) {
 function extractSymbols(sourceId) {
   const symbols = {
     functions: [],
-    variables: [],
     callExpressions: [],
     memberExpressions: [],
     objectProperties: [],
@@ -22972,15 +22927,17 @@ function hasPoint(state, { line, column }) {
   return state[line] && state[line][column];
 }
 
-function addPoint(state, { line, column }, types) {
+function addPoint(state, location, types) {
   if (typeof types === "boolean") {
     types = { step: types, break: types };
   }
 
+  const { line, column } = location;
+
   if (!state[line]) {
     state[line] = {};
   }
-  state[line][column] = types;
+  state[line][column] = { types, location };
   return state;
 }
 
@@ -46586,107 +46543,6 @@ var isArray = Array.isArray;
 module.exports = isArray;
 
 
-/***/ }),
-
-/***/ 706:
-/***/ (function(module, exports, __webpack_require__) {
-
-var baseFlatten = __webpack_require__(707);
-
-/**
- * Flattens `array` a single level deep.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Array
- * @param {Array} array The array to flatten.
- * @returns {Array} Returns the new flattened array.
- * @example
- *
- * _.flatten([1, [2, [3, [4]], 5]]);
- * // => [1, 2, [3, [4]], 5]
- */
-function flatten(array) {
-  var length = array == null ? 0 : array.length;
-  return length ? baseFlatten(array, 1) : [];
-}
-
-module.exports = flatten;
-
-
-/***/ }),
-
-/***/ 707:
-/***/ (function(module, exports, __webpack_require__) {
-
-var arrayPush = __webpack_require__(287),
-    isFlattenable = __webpack_require__(708);
-
-/**
- * The base implementation of `_.flatten` with support for restricting flattening.
- *
- * @private
- * @param {Array} array The array to flatten.
- * @param {number} depth The maximum recursion depth.
- * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
- * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
- * @param {Array} [result=[]] The initial result value.
- * @returns {Array} Returns the new flattened array.
- */
-function baseFlatten(array, depth, predicate, isStrict, result) {
-  var index = -1,
-      length = array.length;
-
-  predicate || (predicate = isFlattenable);
-  result || (result = []);
-
-  while (++index < length) {
-    var value = array[index];
-    if (depth > 0 && predicate(value)) {
-      if (depth > 1) {
-        // Recursively flatten arrays (susceptible to call stack limits).
-        baseFlatten(value, depth - 1, predicate, isStrict, result);
-      } else {
-        arrayPush(result, value);
-      }
-    } else if (!isStrict) {
-      result[result.length] = value;
-    }
-  }
-  return result;
-}
-
-module.exports = baseFlatten;
-
-
-/***/ }),
-
-/***/ 708:
-/***/ (function(module, exports, __webpack_require__) {
-
-var Symbol = __webpack_require__(7),
-    isArguments = __webpack_require__(208),
-    isArray = __webpack_require__(70);
-
-/** Built-in value references. */
-var spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined;
-
-/**
- * Checks if `value` is a flattenable `arguments` object or array.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
- */
-function isFlattenable(value) {
-  return isArray(value) || isArguments(value) ||
-    !!(spreadableSymbol && value && value[spreadableSymbol]);
-}
-
-module.exports = isFlattenable;
-
-
 /***/ }),
 
 /***/ 71:

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

@@ -4552,7 +4552,7 @@ module.exports = "<!-- This Source Code Form is subject to the terms of the Mozi
 /***/ 348:
 /***/ (function(module, exports) {
 
-module.exports = "<!-- 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/. --><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 16 16\"><path d=\"M8 13.4c-.5 0-.9-.2-1.2-.6L.4 5.2C0 4.7-.1 4.3.2 3.7S1 3 1.6 3h12.8c.6 0 1.2.1 1.4.7.3.6.2 1.1-.2 1.6l-6.4 7.6c-.3.4-.7.5-1.2.5z\"></path></svg>"
+module.exports = "<!-- 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/. --><svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" viewBox=\"0 0 16 16\" fill=\"context-fill #9B9B9B\"><path d=\"M8 13.4c-.5 0-.9-.2-1.2-.6L.4 5.2C0 4.7-.1 4.3.2 3.7S1 3 1.6 3h12.8c.6 0 1.2.1 1.4.7.3.6.2 1.1-.2 1.6l-6.4 7.6c-.3.4-.7.5-1.2.5z\"></path></svg>"
 
 /***/ }),
 
@@ -8433,7 +8433,7 @@ function createStructuredSelector(selectors) {
 /***/ 3801:
 /***/ (function(module, exports) {
 
-module.exports = "<svg viewBox=\"0 0 9 12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g id=\"columnmarkergroup\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\"><polygon id=\"columnmarker\" fill=\"#1B1B1D\" points=\"0 0 4 0 9 6 4 12 0 12\"></polygon></g></svg>"
+module.exports = "<svg viewBox=\"0 0 9 12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"><g id=\"columnmarkergroup\" stroke-width=\"1\" fill-rule=\"evenodd\"><polygon id=\"columnmarker\" points=\"0 0 4 0 9 6 4 12 0 12\"></polygon></g></svg>"
 
 /***/ }),
 

devtools/client/debugger/new/images/arrow.svg

@@ -1,6 +1,6 @@
 <!-- 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/. -->
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" fill="context-fill #9B9B9B">
   <path d="M8 13.4c-.5 0-.9-.2-1.2-.6L.4 5.2C0 4.7-.1 4.3.2 3.7S1 3 1.6 3h12.8c.6 0 1.2.1 1.4.7.3.6.2 1.1-.2 1.6l-6.4 7.6c-.3.4-.7.5-1.2.5z"/>
 </svg>

devtools/client/debugger/new/images/column-marker.svg

@@ -1,5 +0,0 @@
-<svg width="9px" height="12px" viewBox="0 0 9 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="columnmarkergroup" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <polygon id="columnmarker" fill="#1B1B1D" points="0 0 4 0 9 6 4 12 0 12"></polygon>
-    </g>
-</svg>

devtools/client/debugger/new/images/moz.build

@@ -12,7 +12,6 @@ DevToolsModules(
     'breakpoint.svg',
     'close.svg',
     'coffeescript.svg',
-    'column-marker.svg',
     'command-chevron.svg',
     'disable-pausing.svg',
     'domain.svg',

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

@@ -18,17 +18,17 @@ import { updateTab } from "./tabs";
 import { PROMISE } from "./utils/middleware/promise";
 
 import { setInScopeLines } from "./ast/setInScopeLines";
-import { updateSymbolLocations } from "./utils/symbols";
+import { setPausePoints } from "./ast/setPausePoints";
+export { setPausePoints };
+
 import {
   getSymbols,
   findOutOfScopeLocations,
   getFramework,
-  getPausePoints,
   type AstPosition
 } from "../workers/parser";
 
-import { features } from "../utils/prefs";
+import { isLoaded } from "../utils/source";
-import { isLoaded, isGenerated } from "../utils/source";
 
 import type { SourceId } from "../types";
 import type { ThunkArgs, Action } from "./types";
@@ -68,15 +68,7 @@ export function setSymbols(sourceId: SourceId) {
     await dispatch({
       type: "SET_SYMBOLS",
       sourceId,
-      [PROMISE]: (async function() {
+      [PROMISE]: getSymbols(sourceId)
-        const symbols = await getSymbols(sourceId);
-        const mappedSymbols = updateSymbolLocations(
-          symbols,
-          source,
-          sourceMaps
-        );
-        return mappedSymbols;
-      })()
     });
 
     if (isPaused(getState())) {
@@ -115,45 +107,3 @@ export function setOutOfScopeLocations() {
     dispatch(setInScopeLines());
   };
 }
-
-function compressPausePoints(pausePoints) {
-  const compressed = {};
-  for (const line in pausePoints) {
-    compressed[line] = {};
-    for (const col in pausePoints[line]) {
-      const point = pausePoints[line][col];
-      compressed[line][col] = (point.break ? 1 : 0) | (point.step ? 2 : 0);
-    }
-  }
-
-  return compressed;
-}
-
-export function setPausePoints(sourceId: SourceId) {
-  return async ({ dispatch, getState, client }: ThunkArgs) => {
-    const source = getSourceFromId(getState(), sourceId);
-    if (!features.pausePoints || !source || !source.text) {
-      return;
-    }
-
-    if (source.isWasm) {
-      return;
-    }
-
-    const pausePoints = await getPausePoints(sourceId);
-    const compressed = compressPausePoints(pausePoints);
-
-    if (isGenerated(source)) {
-      await client.setPausePoints(sourceId, compressed);
-    }
-
-    dispatch(
-      ({
-        type: "SET_PAUSE_POINTS",
-        sourceText: source.text || "",
-        sourceId,
-        pausePoints
-      }: Action)
-    );
-  };
-}

devtools/client/debugger/new/src/actions/ast/moz.build

@@ -9,4 +9,5 @@ DIRS += [
 
 DebuggerModules(
     'setInScopeLines.js',
+    'setPausePoints.js',
 )

devtools/client/debugger/new/src/actions/ast/setPausePoints.js

@@ -0,0 +1,66 @@
+/* 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/>. */
+
+import { getSourceFromId } from "../../selectors";
+import * as parser from "../../workers/parser";
+import { isGenerated } from "../../utils/source";
+import { mapPausePoints } from "../../utils/pause/pausePoints";
+import { features } from "../../utils/prefs";
+
+import type { SourceId } from "../types";
+import type { ThunkArgs, Action } from "./types";
+
+function compressPausePoints(pausePoints) {
+  const compressed = {};
+  for (const line in pausePoints) {
+    compressed[line] = {};
+    for (const col in pausePoints[line]) {
+      const { types } = pausePoints[line][col];
+      compressed[line][col] = (types.break ? 1 : 0) | (types.step ? 2 : 0);
+    }
+  }
+
+  return compressed;
+}
+
+async function mapLocations(pausePoints, source, sourceMaps) {
+  const sourceId = source.id;
+  return mapPausePoints(pausePoints, async ({ types, location }) => {
+    const generatedLocation = await sourceMaps.getGeneratedLocation(
+      { ...location, sourceId },
+      source
+    );
+
+    return { types, location, generatedLocation };
+  });
+}
+export function setPausePoints(sourceId: SourceId) {
+  return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
+    const source = getSourceFromId(getState(), sourceId);
+    if (!features.pausePoints || !source || !source.text) {
+      return;
+    }
+
+    if (source.isWasm) {
+      return;
+    }
+
+    let pausePoints = await parser.getPausePoints(sourceId);
+    pausePoints = await mapLocations(pausePoints, source, sourceMaps);
+
+    if (isGenerated(source)) {
+      const compressed = compressPausePoints(pausePoints);
+      await client.setPausePoints(sourceId, compressed);
+    }
+
+    dispatch(
+      ({
+        type: "SET_PAUSE_POINTS",
+        sourceText: source.text || "",
+        sourceId,
+        pausePoints
+      }: Action)
+    );
+  };
+}

devtools/client/debugger/new/src/actions/breakpoints/addBreakpoint.js

@@ -94,7 +94,7 @@ async function addBreakpointPromise(getState, client, sourceMaps, breakpoint) {
  * @param location
  * @return {function(ThunkArgs)}
  */
-export function addHiddenBreakpoint(location: Location) {
+export function addHiddenBreakpoint(location: SourceLocation) {
   return ({ dispatch }: ThunkArgs) => {
     return dispatch(addBreakpoint(location, { hidden: true }));
   };
@@ -106,9 +106,9 @@ export function addHiddenBreakpoint(location: Location) {
  *
  * @memberof actions/breakpoints
  * @static
- * @param {Location} $1.location Location  value
+ * @param {SourceLocation} $1.location Location  value
  */
-export function enableBreakpoint(location: Location) {
+export function enableBreakpoint(location: SourceLocation) {
   return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {
     const breakpoint = getBreakpoint(getState(), location);
     if (!breakpoint || breakpoint.loading) {
@@ -139,7 +139,7 @@ export function enableBreakpoint(location: Location) {
  */
 
 export function addBreakpoint(
-  location: Location,
+  location: SourceLocation,
   { condition, hidden }: addBreakpointOptions = {}
 ) {
   const breakpoint = createBreakpoint(location, { condition, hidden });

devtools/client/debugger/new/src/actions/breakpoints/index.js

@@ -32,7 +32,7 @@ import { isEmptyLineInSource } from "../../reducers/ast";
 // this will need to be changed so that addCLientBreakpoint is removed
 
 import type { ThunkArgs, Action } from "../types";
-import type { Breakpoint, Location, XHRBreakpoint } from "../../types";
+import type { Breakpoint, SourceLocation, XHRBreakpoint } from "../../types";
 
 import { recordEvent } from "../../utils/telemetry";
 
@@ -47,7 +47,7 @@ type addBreakpointOptions = {
  * @memberof actions/breakpoints
  * @static
  */
-export function removeBreakpoint(location: Location) {
+export function removeBreakpoint(location: SourceLocation) {
   return ({ dispatch, getState, client }: ThunkArgs) => {
     const bp = getBreakpoint(getState(), location);
     if (!bp || bp.loading) {
@@ -84,7 +84,7 @@ export function removeBreakpoint(location: Location) {
  * @memberof actions/breakpoints
  * @static
  */
-export function disableBreakpoint(location: Location) {
+export function disableBreakpoint(location: SourceLocation) {
   return async ({ dispatch, getState, client }: ThunkArgs) => {
     const bp = getBreakpoint(getState(), location);
 
@@ -220,14 +220,14 @@ export function remapBreakpoints(sourceId: string) {
  * @throws {Error} "not implemented"
  * @memberof actions/breakpoints
  * @static
- * @param {Location} location
+ * @param {SourceLocation} location
  *        @see DebuggerController.Breakpoints.addBreakpoint
  * @param {string} condition
  *        The condition to set on the breakpoint
  * @param {Boolean} $1.disabled Disable value for breakpoint value
  */
 export function setBreakpointCondition(
-  location: Location,
+  location: SourceLocation,
   { condition }: addBreakpointOptions = {}
 ) {
   return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {

devtools/client/debugger/new/src/actions/breakpoints/syncBreakpoint.js

@@ -18,7 +18,7 @@ import { getSource } from "../../selectors";
 import type { ThunkArgs, Action } from "../types";
 
 import type {
-  Location,
+  SourceLocation,
   ASTLocation,
   PendingBreakpoint,
   SourceId,
@@ -26,13 +26,13 @@ import type {
 } from "../../types";
 
 type BreakpointSyncData = {
-  previousLocation: Location,
+  previousLocation: SourceLocation,
   breakpoint: ?Breakpoint
 };
 
 async function makeScopedLocation(
   { name, offset }: ASTLocation,
-  location: Location,
+  location: SourceLocation,
   source
 ) {
   const scope = await findScopeByName(source, name);
@@ -51,9 +51,9 @@ async function makeScopedLocation(
 function createSyncData(
   id: SourceId,
   pendingBreakpoint: PendingBreakpoint,
-  location: Location,
+  location: SourceLocation,
-  generatedLocation: Location,
+  generatedLocation: SourceLocation,
-  previousLocation: Location,
+  previousLocation: SourceLocation,
   text: string,
   originalText: string
 ): BreakpointSyncData {

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

@@ -6,7 +6,6 @@
 
 import * as breakpoints from "./breakpoints";
 import * as expressions from "./expressions";
-import * as eventListeners from "./event-listeners";
 import * as pause from "./pause";
 import * as navigation from "./navigation";
 import * as ui from "./ui";
@@ -25,7 +24,6 @@ export default {
   ...navigation,
   ...breakpoints,
   ...expressions,
-  ...eventListeners,
   ...sources,
   ...tabs,
   ...pause,

devtools/client/debugger/new/src/actions/moz.build

@@ -14,7 +14,6 @@ DIRS += [
 DebuggerModules(
     'ast.js',
     'debuggee.js',
-    'event-listeners.js',
     'expressions.js',
     'file-search.js',
     'index.js',

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

@@ -22,7 +22,7 @@ import { getMappedExpression } from "./expressions";
 import { getExtra } from "./pause";
 
 import type { Action, ThunkArgs } from "./types";
-import type { ColumnPosition } from "../types";
+import type { Position } from "../types";
 import type { AstLocation } from "../workers/parser";
 
 function findExpressionMatch(state, codeMirror, tokenPos) {
@@ -75,7 +75,7 @@ export function updatePreview(
 export function setPreview(
   expression: string,
   location: AstLocation,
-  tokenPos: ColumnPosition,
+  tokenPos: Position,
   cursorPos: ClientRect
 ) {
   return async ({ dispatch, getState, client, sourceMaps }: ThunkArgs) => {

devtools/client/debugger/new/src/actions/sources/newSources.js

@@ -125,7 +125,12 @@ function checkSelectedSource(sourceId: string) {
       }
 
       await dispatch(
-        selectLocation({ ...pendingLocation, sourceId: source.id })
+        selectLocation({
+          sourceId: source.id,
+          line:
+            typeof pendingLocation.line === "number" ? pendingLocation.line : 0,
+          column: pendingLocation.column
+        })
       );
     }
   };

devtools/client/debugger/new/src/actions/sources/select.js

@@ -34,10 +34,13 @@ import {
   getSelectedSource
 } from "../../selectors";
 
-import type { Location, Position, Source } from "../../types";
+import type { SourceLocation, PartialPosition, Source } from "../../types";
 import type { ThunkArgs } from "../types";
 
-export const setSelectedLocation = (source: Source, location: Location) => ({
+export const setSelectedLocation = (
+  source: Source,
+  location: SourceLocation
+) => ({
   type: "SET_SELECTED_LOCATION",
   source,
   location
@@ -64,7 +67,10 @@ export const clearSelectedLocation = () => ({
  * @memberof actions/sources
  * @static
  */
-export function selectSourceURL(url: string, options: Position = { line: 1 }) {
+export function selectSourceURL(
+  url: string,
+  options: PartialPosition = { line: 1 }
+) {
   return async ({ dispatch, getState, sourceMaps }: ThunkArgs) => {
     const source = getSourceByURL(getState(), url);
     if (!source) {
@@ -93,7 +99,7 @@ export function selectSource(sourceId: string) {
  * @static
  */
 export function selectLocation(
-  location: Location,
+  location: SourceLocation,
   { keepContext = true }: Object = {}
 ) {
   return async ({ dispatch, getState, sourceMaps, client }: ThunkArgs) => {
@@ -169,7 +175,7 @@ export function selectLocation(
  * @memberof actions/sources
  * @static
  */
-export function selectSpecificLocation(location: Location) {
+export function selectSpecificLocation(location: SourceLocation) {
   return selectLocation(location, { keepContext: false });
 }
 
@@ -177,7 +183,7 @@ export function selectSpecificLocation(location: Location) {
  * @memberof actions/sources
  * @static
  */
-export function jumpToMappedLocation(location: Location) {
+export function jumpToMappedLocation(location: SourceLocation) {
   return async function({ dispatch, getState, client, sourceMaps }: ThunkArgs) {
     if (!client) {
       return;

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

@@ -82,26 +82,22 @@ function promiseMiddleware({
 
     // Return the promise so action creators can still compose if they
     // want to.
-    return new Promise((resolve, reject) => {
+    return Promise.resolve(promiseInst)
-      promiseInst.then(
+      .finally(() => new Promise(resolve => executeSoon(resolve)))
+      .then(
         value => {
-          executeSoon(() => {
+          dispatch({ ...action, status: "done", value: value });
-            dispatch({ ...action, status: "done", value: value });
+          return value;
-            resolve(value);
-          });
         },
         error => {
-          executeSoon(() => {
+          dispatch({
-            dispatch({
+            ...action,
-              ...action,
+            status: "error",
-              status: "error",
+            error: error.message || error
-              error: error.message || error
-            });
-            reject(error);
           });
+          return Promise.reject(error);
         }
       );
-    });
   };
 }
 

devtools/client/debugger/new/src/actions/utils/moz.build

@@ -9,5 +9,4 @@ DIRS += [
 
 DebuggerModules(
     'create-store.js',
-    'symbols.js',
 )

devtools/client/debugger/new/src/client/firefox/commands.js

@@ -9,7 +9,7 @@ import type {
   BreakpointResult,
   Frame,
   FrameId,
-  Location,
+  SourceLocation,
   Script,
   Source,
   SourceId,
@@ -129,7 +129,7 @@ function sourceContents(sourceId: SourceId): Source {
   return sourceClient.source();
 }
 
-function getBreakpointByLocation(location: Location) {
+function getBreakpointByLocation(location: SourceLocation) {
   const id = makePendingLocationId(location);
   const bpClient = bpClients[id];
 
@@ -158,7 +158,7 @@ function removeXHRBreakpoint(path: string, method: string) {
 }
 
 function setBreakpoint(
-  location: Location,
+  location: SourceLocation,
   condition: boolean,
   noSliding: boolean
 ): Promise<BreakpointResult> {
@@ -184,7 +184,7 @@ function setBreakpoint(
 }
 
 function removeBreakpoint(
-  generatedLocation: Location
+  generatedLocation: SourceLocation
 ): Promise<void> | ?BreakpointResult {
   try {
     const id = makePendingLocationId(generatedLocation);
@@ -202,7 +202,7 @@ function removeBreakpoint(
 
 function setBreakpointCondition(
   breakpointId: BreakpointId,
-  location: Location,
+  location: SourceLocation,
   condition: boolean,
   noSliding: boolean
 ) {

devtools/client/debugger/new/src/client/firefox/create.js

@@ -5,7 +5,7 @@
 // @flow
 // This module converts Firefox specific types to the generic types
 
-import type { Frame, Source, Location } from "../../types";
+import type { Frame, Source, SourceLocation } from "../../types";
 import type {
   PausedPacket,
   FramesResponse,
@@ -78,9 +78,9 @@ export function createPause(
 // exists, otherwise use `location`.
 
 export function createBreakpointLocation(
-  location: Location,
+  location: SourceLocation,
   actualLocation?: Object
-): Location {
+): SourceLocation {
   if (!actualLocation) {
     return location;
   }

devtools/client/debugger/new/src/client/firefox/events.js

@@ -14,7 +14,6 @@ import type {
 
 import { createPause, createSource } from "./create";
 import sourceQueue from "../../utils/source-queue";
-import { features } from "../../utils/prefs";
 
 const CALL_STACK_PAGE_SIZE = 1000;
 
@@ -100,10 +99,6 @@ function resumed(_: "resumed", packet: ResumedPacket) {
 
 function newSource(_: "newSource", { source }: SourcePacket) {
   sourceQueue.queue(source);
-
-  if (features.eventListeners) {
-    actions.fetchEventListeners();
-  }
 }
 
 function workerListChanged() {

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

@@ -3,9 +3,11 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
-import { PureComponent } from "react";
+import React, { PureComponent } from "react";
+import ReactDOM from "react-dom";
 import classnames from "classnames";
 import { getDocument } from "../../utils/editor";
+import Svg from "../shared/Svg";
 
 // eslint-disable-next-line max-len
 import type { ColumnBreakpoint as ColumnBreakpointType } from "../../selectors/visibleColumnBreakpoints";
@@ -24,11 +26,11 @@ type Props = {
 };
 
 const breakpointImg = document.createElement("div");
+ReactDOM.render(<Svg name={"column-marker"} />, breakpointImg);
 function makeBookmark(isActive, { onClick }) {
   const bp = breakpointImg.cloneNode(true);
-  bp.className = classnames("call-site", {
+  const className = isActive ? "active" : "disabled";
-    active: isActive
+  bp.className = classnames("call-site", className);
-  });
   bp.onclick = onClick;
   return bp;
 }

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

@@ -30,10 +30,16 @@ import type { Source } from "../../types";
 
 import "./Footer.css";
 
+type CursorPosition = {
+  line: number,
+  column: number
+};
+
 type Props = {
   selectedSource: Source,
   mappedSource: Source,
   endPanelCollapsed: boolean,
+  editor: Object,
   horizontal: boolean,
   togglePrettyPrint: string => void,
   toggleBlackBox: Object => void,
@@ -41,7 +47,27 @@ type Props = {
   togglePaneCollapse: () => void
 };
 
-class SourceFooter extends PureComponent<Props> {
+type State = {
+  cursorPosition: CursorPosition
+};
+
+class SourceFooter extends PureComponent<Props, State> {
+  constructor() {
+    super();
+
+    this.state = { cursorPosition: { line: 1, column: 1 } };
+  }
+
+  componentDidMount() {
+    const { editor } = this.props;
+    editor.codeMirror.on("cursorActivity", this.onCursorChange);
+  }
+
+  componentWillUnmount() {
+    const { editor } = this.props;
+    editor.codeMirror.off("cursorActivity", this.onCursorChange);
+  }
+
   prettyPrintButton() {
     const { selectedSource, togglePrettyPrint } = this.props;
 
@@ -174,6 +200,22 @@ class SourceFooter extends PureComponent<Props> {
     );
   }
 
+  onCursorChange = event => {
+    const { line, ch } = event.doc.getCursor();
+    this.setState({ cursorPosition: { line, column: ch } });
+  };
+
+  renderCursorPosition() {
+    const { cursorPosition } = this.state;
+
+    const text = L10N.getFormatStr(
+      "sourceFooter.currentCursorPosition",
+      cursorPosition.line + 1,
+      cursorPosition.column + 1
+    );
+    return <span className="cursor-position">{text}</span>;
+  }
+
   render() {
     const { selectedSource, horizontal } = this.props;
 
@@ -184,6 +226,7 @@ class SourceFooter extends PureComponent<Props> {
     return (
       <div className="source-footer">
         {this.renderCommands()}
+        {this.renderCursorPosition()}
         {this.renderSourceSummary()}
         {this.renderToggleButton()}
       </div>

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

@@ -16,17 +16,17 @@ import {
   getPauseCommand
 } from "../../selectors";
 
-import type { Frame, Location, Source } from "../../types";
+import type { Frame, SourceLocation, Source } from "../../types";
 import type { Command } from "../../reducers/types";
 
 type Props = {
   pauseCommand: Command,
   selectedFrame: Frame,
-  selectedLocation: Location,
+  selectedLocation: SourceLocation,
   selectedSource: Source
 };
 
-function isDebugLine(selectedFrame: Frame, selectedLocation: Location) {
+function isDebugLine(selectedFrame: Frame, selectedLocation: SourceLocation) {
   if (!selectedFrame) {
     return;
   }
@@ -54,7 +54,10 @@ export class HighlightLine extends Component<Props> {
     return this.shouldSetHighlightLine(selectedLocation, selectedSource);
   }
 
-  shouldSetHighlightLine(selectedLocation: Location, selectedSource: Source) {
+  shouldSetHighlightLine(
+    selectedLocation: SourceLocation,
+    selectedSource: Source
+  ) {
     const { sourceId, line } = selectedLocation;
     const editorLine = toEditorLine(sourceId, line);
 
@@ -90,7 +93,7 @@ export class HighlightLine extends Component<Props> {
   }
 
   setHighlightLine(
-    selectedLocation: Location,
+    selectedLocation: SourceLocation,
     selectedFrame: Frame,
     selectedSource: Source
   ) {
@@ -110,7 +113,7 @@ export class HighlightLine extends Component<Props> {
     doc.addLineClass(editorLine, "line", "highlight-line");
   }
 
-  clearHighlightLine(selectedLocation: Location, selectedSource: Source) {
+  clearHighlightLine(selectedLocation: SourceLocation, selectedSource: Source) {
     if (!isDocumentReady(selectedSource, selectedLocation)) {
       return;
     }

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

@@ -67,7 +67,7 @@ import "./Highlight.css";
 
 import type SourceEditor from "../../utils/editor/source-editor";
 import type { SymbolDeclarations } from "../../workers/parser";
-import type { Location, Source } from "../../types";
+import type { SourceLocation, Source } from "../../types";
 
 const cssVars = {
   searchbarHeight: "var(--editor-searchbar-height)",
@@ -75,7 +75,7 @@ const cssVars = {
 };
 
 export type Props = {
-  selectedLocation: ?Location,
+  selectedLocation: ?SourceLocation,
   selectedSource: ?Source,
   searchOn: boolean,
   horizontal: boolean,
@@ -549,7 +549,7 @@ class Editor extends PureComponent<Props, State> {
         <EmptyLines editor={editor} />
         <Breakpoints editor={editor} />
         <Preview editor={editor} editorRef={this.$editorWrapper} />;
-        <Footer horizontal={horizontal} />
+        <Footer editor={editor} horizontal={horizontal} />
         <HighlightLines editor={editor} />
         <EditorMenu editor={editor} />
         <GutterMenu editor={editor} />

devtools/client/debugger/new/src/components/ProjectSearch.js

@@ -28,7 +28,7 @@ import ManagedTree from "./shared/ManagedTree";
 import SearchInput from "./shared/SearchInput";
 
 import type { List } from "immutable";
-import type { Location } from "../types";
+import type { SourceLocation } from "../types";
 import type { ActiveSearchType } from "../reducers/types";
 import type { StatusType } from "../reducers/project-text-search";
 type Editor = ?Object;
@@ -68,7 +68,7 @@ type Props = {
   closeProjectSearch: () => void,
   searchSources: (query: string) => void,
   clearSearch: () => void,
-  selectSpecificLocation: (location: Location, tabIndex?: string) => void,
+  selectSpecificLocation: (location: SourceLocation, tabIndex?: string) => void,
   setActiveSearch: (activeSearch?: ActiveSearchType) => void,
   doSearchForHighlight: (
     query: string,
@@ -150,7 +150,11 @@ export class ProjectSearch extends Component<Props, State> {
   isProjectSearchEnabled = () => this.props.activeSearch === "project";
 
   selectMatchItem = (matchItem: Match) => {
-    this.props.selectSpecificLocation({ ...matchItem });
+    this.props.selectSpecificLocation({
+      sourceId: matchItem.sourceId,
+      line: matchItem.line,
+      column: matchItem.column
+    });
     this.props.doSearchForHighlight(
       this.state.inputValue,
       getEditor(),

devtools/client/debugger/new/src/components/QuickOpenModal.js

@@ -35,8 +35,9 @@ import type {
   QuickOpenResult
 } from "../utils/quick-open";
 
-import type { Location, Source } from "../types";
+import type { SourceLocation, Source } from "../types";
 import type { QuickOpenType } from "../reducers/quick-open";
+import type { Tab } from "../reducers/tabs";
 
 import "./QuickOpenModal.css";
 
@@ -48,9 +49,9 @@ type Props = {
   searchType: QuickOpenType,
   symbols: FormattedSymbolDeclarations,
   symbolsLoading: boolean,
-  tabs: string[],
+  tabs: Tab[],
   shortcutsModalEnabled: boolean,
-  selectSpecificLocation: Location => void,
+  selectSpecificLocation: SourceLocation => void,
   setQuickOpenQuery: (query: string) => void,
   highlightLineRange: ({ start: number, end: number }) => void,
   closeQuickOpen: () => void,
@@ -125,12 +126,12 @@ export class QuickOpenModal extends Component<Props, State> {
 
   searchSymbols = (query: string) => {
     const {
-      symbols: { functions, variables }
+      symbols: { functions, identifiers }
     } = this.props;
 
     let results = functions;
     if (this.isVariableQuery()) {
-      results = variables;
+      results = identifiers;
     } else {
       results = results.filter(result => result.title !== "anonymous");
     }
@@ -154,8 +155,10 @@ export class QuickOpenModal extends Component<Props, State> {
   showTopSources = () => {
     const { tabs, sources } = this.props;
     if (tabs.length > 0) {
+      const tabUrls = tabs.map((tab: Tab) => tab.url);
+
       this.setState({
-        results: sources.filter(source => tabs.includes(source.url))
+        results: sources.filter(source => tabUrls.includes(source.url))
       });
     } else {
       this.setState({ results: sources.slice(0, 100) });

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

@@ -25,12 +25,12 @@ import type {
   Breakpoint as BreakpointType,
   Frame,
   Source,
-  Location
+  SourceLocation
 } from "../../../types";
 
 type FormattedFrame = {
   ...Frame,
-  selectedLocation: Location
+  selectedLocation: SourceLocation
 };
 
 import {
@@ -52,6 +52,7 @@ type Props = {
   setBreakpointCondition: typeof actions.setBreakpointCondition,
   toggleAllBreakpoints: typeof actions.toggleAllBreakpoints,
   toggleBreakpoints: typeof actions.toggleBreakpoints,
+  toggleDisabledBreakpoint: typeof actions.toggleDisabledBreakpoint,
   openConditionalPanel: typeof actions.openConditionalPanel,
   selectSpecificLocation: typeof actions.selectSpecificLocation
 };
@@ -205,6 +206,7 @@ export default connect(
     setBreakpointCondition: actions.setBreakpointCondition,
     toggleAllBreakpoints: actions.toggleAllBreakpoints,
     toggleBreakpoints: actions.toggleBreakpoints,
+    toggleDisabledBreakpoint: actions.toggleDisabledBreakpoint,
     openConditionalPanel: actions.openConditionalPanel
   }
 )(Breakpoint);

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

@@ -29,7 +29,6 @@ import Breakpoints from "./Breakpoints";
 import Expressions from "./Expressions";
 import SplitBox from "devtools-splitter";
 import Frames from "./Frames";
-import EventListeners from "./EventListeners";
 import Workers from "./Workers";
 import Accordion from "../shared/Accordion";
 import CommandBar from "./CommandBar";
@@ -348,14 +347,6 @@ class SecondaryPanes extends Component<Props, State> {
       items.push(this.getXHRItem());
     }
 
-    if (features.eventListeners) {
-      items.push({
-        header: L10N.getStr("eventListenersHeader"),
-        className: "event-listeners-pane",
-        component: <EventListeners />
-      });
-    }
-
     return items.filter(item => item);
   }
 

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

@@ -10,7 +10,6 @@ DIRS += [
 
 DebuggerModules(
     'CommandBar.js',
-    'EventListeners.js',
     'Expressions.js',
     'FrameworkComponent.js',
     'index.js',

devtools/client/debugger/new/src/reducers/ast.js

@@ -21,7 +21,7 @@ import type {
 } from "../workers/parser";
 
 import type { Map } from "immutable";
-import type { Location, Source } from "../types";
+import type { SourceLocation, Source } from "../types";
 import type { Action, DonePromiseAction } from "../actions/types";
 import type { Record } from "../utils/makeRecord";
 
@@ -209,7 +209,7 @@ export function getPausePoints(
 
 export function getPausePoint(
   state: OuterState,
-  location: ?Location
+  location: ?SourceLocation
 ): ?PausePoint {
   if (!location) {
     return;

devtools/client/debugger/new/src/reducers/breakpoints.js

@@ -14,7 +14,7 @@ import * as I from "immutable";
 import { isGeneratedId } from "devtools-source-map";
 import { makeLocationId } from "../utils/breakpoint";
 
-import type { XHRBreakpoint, Breakpoint, Location } from "../types";
+import type { XHRBreakpoint, Breakpoint, SourceLocation } from "../types";
 import type { Action, DonePromiseAction } from "../actions/types";
 
 export type BreakpointsMap = { [string]: Breakpoint };
@@ -270,7 +270,7 @@ export function getBreakpointCount(state: OuterState): number {
 
 export function getBreakpoint(
   state: OuterState,
-  location: Location
+  location: SourceLocation
 ): ?Breakpoint {
   const breakpoints = getBreakpointsMap(state);
   return breakpoints[makeLocationId(location)];
@@ -322,7 +322,9 @@ export function getHiddenBreakpoint(state: OuterState): ?Breakpoint {
   return breakpoints.find(bp => bp.hidden);
 }
 
-export function getHiddenBreakpointLocation(state: OuterState): ?Location {
+export function getHiddenBreakpointLocation(
+  state: OuterState
+): ?SourceLocation {
   const hiddenBreakpoint = getHiddenBreakpoint(state);
   if (!hiddenBreakpoint) {
     return null;

devtools/client/debugger/new/src/reducers/index.js

@@ -8,7 +8,6 @@
  */
 
 import expressions from "./expressions";
-import eventListeners from "./event-listeners";
 import sources from "./sources";
 import tabs from "./tabs";
 import breakpoints from "./breakpoints";
@@ -26,7 +25,6 @@ import { objectInspector } from "devtools-reps";
 
 export default {
   expressions,
-  eventListeners,
   sources,
   tabs,
   breakpoints,

devtools/client/debugger/new/src/reducers/moz.build

@@ -12,7 +12,6 @@ DebuggerModules(
     'async-requests.js',
     'breakpoints.js',
     'debuggee.js',
-    'event-listeners.js',
     'expressions.js',
     'file-search.js',
     'index.js',

devtools/client/debugger/new/src/reducers/sources.js

@@ -20,7 +20,7 @@ import {
 import { originalToGeneratedId } from "devtools-source-map";
 import { prefs } from "../utils/prefs";
 
-import type { Source, SourceId, Location } from "../types";
+import type { Source, SourceId, SourceLocation } from "../types";
 import type { PendingSelectedLocation } from "./types";
 import type { Action, DonePromiseAction } from "../actions/types";
 import type { LoadSourceAction } from "../actions/types/SourceAction";
@@ -34,7 +34,7 @@ export type SourcesState = {
   urls: UrlsMap,
   relativeSources: SourcesMap,
   pendingSelectedLocation?: PendingSelectedLocation,
-  selectedLocation: ?Location,
+  selectedLocation: ?SourceLocation,
   projectDirectoryRoot: string
 };
 
@@ -483,7 +483,7 @@ export const getSelectedLocation = createSelector(
 export const getSelectedSource = createSelector(
   getSelectedLocation,
   getSources,
-  (selectedLocation: ?Location, sources: SourcesMap): ?Source => {
+  (selectedLocation: ?SourceLocation, sources: SourcesMap): ?Source => {
     if (!selectedLocation) {
       return;
     }

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

@@ -26,7 +26,7 @@ import type { Action } from "../actions/types";
 import type { SourcesState } from "./sources";
 import type { Source } from "../types";
 
-type Tab = {
+export type Tab = {
   url: string,
   framework?: string | null,
   isOriginal: boolean,

devtools/client/debugger/new/src/reducers/ui.js

@@ -12,7 +12,7 @@
 import makeRecord from "../utils/makeRecord";
 import { prefs } from "../utils/prefs";
 
-import type { Source, Range } from "../types";
+import type { Source, PartialRange } from "../types";
 
 import type { Action, panelPositionType } from "../actions/types";
 import type { Record } from "../utils/makeRecord";
@@ -23,7 +23,7 @@ export type OrientationType = "horizontal" | "vertical";
 
 export type SelectedPrimaryPaneTabType = "sources" | "outline";
 
-type Viewport = Range;
+type Viewport = PartialRange;
 
 export type UIState = {
   selectedPrimaryPaneTab: SelectedPrimaryPaneTabType,

devtools/client/debugger/new/src/selectors/breakpointSources.js

@@ -14,7 +14,12 @@ import {
 import { isGenerated, getFilename } from "../utils/source";
 import { getSelectedLocation } from "../utils/source-maps";
 
-import type { Source, Breakpoint, BreakpointId, Location } from "../types";
+import type {
+  Source,
+  Breakpoint,
+  BreakpointId,
+  SourceLocation
+} from "../types";
 import type { SourcesMap } from "../reducers/types";
 
 export type BreakpointSources = Array<{
@@ -27,7 +32,7 @@ export type FormattedBreakpoint = {|
   condition: ?string,
   disabled: boolean,
   text: string,
-  selectedLocation: Location
+  selectedLocation: SourceLocation
 |};
 
 function formatBreakpoint(

devtools/client/debugger/new/src/selectors/index.js

@@ -17,7 +17,6 @@ export * from "../reducers/ast";
 export * from "../reducers/project-text-search";
 export * from "../reducers/source-tree";
 
-export { getEventListeners } from "../reducers/event-listeners";
 export {
   getQuickOpenEnabled,
   getQuickOpenQuery,

devtools/client/debugger/new/src/selectors/visibleColumnBreakpoints.js

@@ -2,17 +2,18 @@
  * 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/>. */
 
-import { groupBy, hasIn } from "lodash";
+import { groupBy, hasIn, sortedUniqBy } from "lodash";
 import { createSelector } from "reselect";
 
 import { getViewport } from "../selectors";
 import { getVisibleBreakpoints } from "./visibleBreakpoints";
 import { getVisiblePausePoints } from "./visiblePausePoints";
+import { makeLocationId } from "../utils/breakpoint";
 
-import type { Location } from "../types";
+import type { SourceLocation } from "../types";
 
 export type ColumnBreakpoint = {|
-  +location: Location,
+  +location: SourceLocation,
   +enabled: boolean
 |};
 
@@ -39,6 +40,19 @@ function isEnabled(location, breakpointMap) {
   return hasIn(breakpointMap, [line, column]);
 }
 
+function getLineCount(columnBreakpoints) {
+  const lineCount = {};
+  columnBreakpoints.forEach(({ location: { line } }) => {
+    if (!lineCount[line]) {
+      lineCount[line] = 0;
+    }
+
+    lineCount[line] = lineCount[line] + 1;
+  });
+
+  return lineCount;
+}
+
 export function formatColumnBreakpoints(columnBreakpoints) {
   console.log(
     "Column Breakpoints\n\n",
@@ -57,10 +71,35 @@ export function getColumnBreakpoints(pausePoints, breakpoints, viewport) {
   }
 
   const breakpointMap = groupBreakpoints(breakpoints);
-  const columnBreakpoints = pausePoints
+
-    .filter(({ types }) => types.break)
+  // We only want to show a column breakpoint if several conditions are matched
-    .filter(({ location }) => breakpointMap[location.line])
+  // 1. it is a "break" point and not a "step" point
-    .filter(({ location }) => viewport && contains(location, viewport));
+  // 2. there is a breakpoint on that line
+  // 3. the breakpoint is in the current viewport
+  // 4. it is the first breakpoint to appear at that generated location
+  // 5. there is atleast one other breakpoint on that line
+
+  let columnBreakpoints = pausePoints.filter(
+    ({ types, location }) =>
+      // 1. check that the pause point is a "break" point
+      types.break &&
+      // 2. check that there is a registered breakpoint on the line
+      breakpointMap[location.line] &&
+      // 3. check that the breakpoint is visible
+      viewport &&
+      contains(location, viewport)
+  );
+
+  // 4. Only show one column breakpoint per generated location
+  columnBreakpoints = sortedUniqBy(columnBreakpoints, ({ generatedLocation }) =>
+    makeLocationId(generatedLocation)
+  );
+
+  // 5. Check that there is atleast one other possible breakpoint on the line
+  const lineCount = getLineCount(columnBreakpoints);
+  columnBreakpoints = columnBreakpoints.filter(
+    ({ location: { line } }) => lineCount[line] > 1
+  );
 
   return columnBreakpoints.map(({ location }) => ({
     location,

devtools/client/debugger/new/src/selectors/visibleSelectedFrame.js

@@ -9,9 +9,9 @@ import { getSelectedFrame } from "../reducers/pause";
 import { isOriginalId } from "devtools-source-map";
 import { createSelector } from "reselect";
 
-import type { Frame, Location } from "../types";
+import type { Frame, SourceLocation } from "../types";
 
-function getLocation(frame: Frame, location?: Location) {
+function getLocation(frame: Frame, location?: SourceLocation) {
   if (!location) {
     return frame.location;
   }

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

@@ -7,7 +7,7 @@
 import { xor, range } from "lodash";
 import { convertToList } from "./pause/pausePoints";
 
-import type { Location, ColumnPosition } from "../types";
+import type { SourceLocation, Position } from "../types";
 import type { Symbols } from "../reducers/ast";
 
 import type {
@@ -18,10 +18,7 @@ import type {
   ClassDeclaration
 } from "../workers/parser";
 
-export function findBestMatchExpression(
+export function findBestMatchExpression(symbols: Symbols, tokenPos: Position) {
-  symbols: Symbols,
-  tokenPos: ColumnPosition
-) {
   if (symbols.loading) {
     return null;
   }
@@ -75,7 +72,7 @@ export function containsPosition(a: AstLocation, b: AstPosition) {
   return startsBefore && endsAfter;
 }
 
-function findClosestofSymbol(declarations: any[], location: Location) {
+function findClosestofSymbol(declarations: any[], location: SourceLocation) {
   if (!declarations) {
     return null;
   }
@@ -111,7 +108,7 @@ function findClosestofSymbol(declarations: any[], location: Location) {
 
 export function findClosestFunction(
   symbols: ?Symbols,
-  location: Location
+  location: SourceLocation
 ): FunctionDeclaration | null {
   if (!symbols || symbols.loading) {
     return null;
@@ -122,7 +119,7 @@ export function findClosestFunction(
 
 export function findClosestClass(
   symbols: Symbols,
-  location: Location
+  location: SourceLocation
 ): ClassDeclaration | null {
   if (!symbols || symbols.loading) {
     return null;

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

@@ -19,7 +19,7 @@ import configureStore from "../actions/utils/create-store";
 import reducers from "../reducers";
 import * as selectors from "../selectors";
 import App from "../components/App";
-import { asyncStore } from "./prefs";
+import { asyncStore, prefs } from "./prefs";
 
 function renderPanel(component, store) {
   const root = document.createElement("div");
@@ -43,7 +43,7 @@ export function bootstrapStore(
   initialState: Object
 ) {
   const createStore = configureStore({
-    log: isTesting(),
+    log: prefs.logging || isTesting(),
     timing: isDevelopment(),
     makeThunkArgs: (args, state) => {
       return { ...args, client, ...services, ...toolboxActions };

devtools/client/debugger/new/src/utils/breakpoint/astBreakpointLocation.js

@@ -9,12 +9,12 @@ import { findClosestFunction } from "../ast";
 
 import type { SymbolDeclarations } from "../../workers/parser";
 
-import type { Location, Source, ASTLocation } from "../../types";
+import type { SourceLocation, Source, ASTLocation } from "../../types";
 
 export function getASTLocation(
   source: Source,
   symbols: SymbolDeclarations,
-  location: Location
+  location: SourceLocation
 ): ASTLocation {
   if (source.isWasm || !symbols || symbols.loading) {
     return { name: undefined, offset: location };

devtools/client/debugger/new/src/utils/breakpoint/index.js

@@ -14,7 +14,7 @@ export { getASTLocation, findScopeByName } from "./astBreakpointLocation";
 
 import type { FormattedBreakpoint } from "../../selectors/breakpointSources";
 import type {
-  Location,
+  SourceLocation,
   PendingLocation,
   Breakpoint,
   PendingBreakpoint
@@ -33,24 +33,27 @@ export function firstString(...args: string[]) {
   return null;
 }
 
-export function locationMoved(location: Location, newLocation: Location) {
+export function locationMoved(
+  location: SourceLocation,
+  newLocation: SourceLocation
+) {
   return (
     location.line !== newLocation.line || location.column !== newLocation.column
   );
 }
 
-export function makeLocationId(location: Location) {
+export function makeLocationId(location: SourceLocation) {
   const { sourceId, line, column } = location;
   const columnString = column || "";
   return `${sourceId}:${line}:${columnString}`;
 }
 
-export function getLocationWithoutColumn(location: Location) {
+export function getLocationWithoutColumn(location: SourceLocation) {
   const { sourceId, line } = location;
   return `${sourceId}:${line}`;
 }
 
-export function makePendingLocationId(location: Location) {
+export function makePendingLocationId(location: SourceLocation) {
   assertPendingLocation(location);
   const { sourceUrl, line, column } = location;
   const sourceUrlString = sourceUrl || "";
@@ -69,7 +72,7 @@ export function assertPendingBreakpoint(pendingBreakpoint: PendingBreakpoint) {
   assertPendingLocation(pendingBreakpoint.generatedLocation);
 }
 
-export function assertLocation(location: Location) {
+export function assertLocation(location: SourceLocation) {
   assertPendingLocation(location);
   const { sourceId } = location;
   assert(!!sourceId, "location must have a source id");
@@ -92,7 +95,7 @@ export function assertPendingLocation(location: PendingLocation) {
 // syncing
 export function breakpointAtLocation(
   breakpoints: Breakpoint[],
-  { line, column }: Location
+  { line, column }: SourceLocation
 ) {
   return breakpoints.find(breakpoint => {
     const sameLine = breakpoint.location.line === line;
@@ -110,13 +113,13 @@ export function breakpointAtLocation(
   });
 }
 
-export function breakpointExists(state: State, location: Location) {
+export function breakpointExists(state: State, location: SourceLocation) {
   const currentBp = getBreakpoint(state, location);
   return currentBp && !currentBp.disabled;
 }
 
 export function createBreakpoint(
-  location: Location,
+  location: SourceLocation,
   overrides: Object = {}
 ): Breakpoint {
   const {

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

@@ -49,8 +49,9 @@ function getCM() {
 }
 
 function _formatPausePoints(dbg: Object, url: string) {
-  const source = dbg.helpers.findSource(url);
+  const source =
-  const pausePoints = dbg.selectors.getPausePoints(source);
+    dbg.helpers.findSource(url) || dbg.selectors.getSelectedSource();
+  const pausePoints = dbg.selectors.getPausePoints(source.id);
   console.log(formatPausePoints(source.text, pausePoints));
 }
 

devtools/client/debugger/new/src/utils/editor/get-expression.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import type { ColumnPosition } from "../../types";
+import type { Position } from "../../types";
 
 type Token = {
   startColumn: number,
@@ -14,7 +14,7 @@ type Token = {
 
 export function tokenAtTextPosition(
   cm: any,
-  { line, column }: ColumnPosition
+  { line, column }: Position
 ): Token | null {
   if (line < 0 || line >= cm.lineCount()) {
     return null;
@@ -30,7 +30,7 @@ export function tokenAtTextPosition(
 
 // The strategy of querying codeMirror tokens was borrowed
 // from Chrome's inital implementation in JavaScriptSourceFrame.js#L414
-export function getExpressionFromCoords(cm: any, coord: ColumnPosition) {
+export function getExpressionFromCoords(cm: any, coord: Position) {
   const token = tokenAtTextPosition(cm, coord);
   if (!token) {
     return null;

devtools/client/debugger/new/src/utils/editor/get-token-location.js

@@ -3,12 +3,12 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 // @flow
-import type { ColumnPosition } from "../../types";
+import type { Position } from "../../types";
 
 export function getTokenLocation(
   codeMirror: any,
   tokenEl: HTMLElement
-): ColumnPosition {
+): Position {
   const { left, top, width, height } = tokenEl.getBoundingClientRect();
   const { line, ch } = codeMirror.coordsChar({
     left: left + width / 2,

devtools/client/debugger/new/src/utils/editor/index.js

@@ -18,7 +18,7 @@ import { isWasm, lineToWasmOffset, wasmOffsetToLine } from "../wasm";
 
 import type { AstLocation } from "../../workers/parser";
 import type { EditorPosition, EditorRange } from "../editor/types";
-import type { Location } from "../../types";
+import type { SourceLocation } from "../../types";
 type Editor = Object;
 
 let editor: ?Editor;
@@ -96,7 +96,7 @@ export function toEditorLine(sourceId: string, lineOrOffset: number): number {
   return lineOrOffset ? lineOrOffset - 1 : 1;
 }
 
-export function toEditorPosition(location: Location): EditorPosition {
+export function toEditorPosition(location: SourceLocation): EditorPosition {
   return {
     line: toEditorLine(location.sourceId, location.line),
     column: isWasm(location.sourceId) || !location.column ? 0 : location.column
@@ -201,7 +201,7 @@ export function lineAtHeight(_editor, sourceId, event) {
 
 export function getSourceLocationFromMouseEvent(
   _editor: Object,
-  selectedLocation: Location,
+  selectedLocation: SourceLocation,
   e: MouseEvent
 ) {
   const { line, ch } = _editor.codeMirror.coordsChar({

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

@@ -4,7 +4,7 @@
 
 // @flow
 
-import type { Location, SourceId } from "../types";
+import type { SourceLocation, SourceId } from "../types";
 
 type IncompleteLocation = {
   sourceId: SourceId,
@@ -18,7 +18,7 @@ export function createLocation({
   line,
   column,
   sourceUrl
-}: IncompleteLocation): Location {
+}: IncompleteLocation): SourceLocation {
   return {
     sourceId,
     line: line || 0,

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

@@ -12,7 +12,7 @@
  * @module utils/log
  */
 
-import { isDevelopment } from "devtools-environment";
+import { prefs } from "./prefs";
 
 /**
  * Produces a formatted console log line by imploding args, prefixed by [log]
@@ -24,9 +24,7 @@ import { isDevelopment } from "devtools-environment";
  * @static
  */
 export function log(...args: any[]) {
-  if (!isDevelopment()) {
+  if (prefs.logging) {
-    return;
+    console.log(...args);
   }
-
-  console.log.apply(console, ["[log]", ...args]);
 }

devtools/client/debugger/new/src/utils/pause/mapScopes/getApplicableBindingsForOriginalPosition.js

@@ -9,7 +9,7 @@ import { positionCmp } from "./positionCmp";
 import { filterSortedArray } from "./filtering";
 import { mappingContains } from "./mappingContains";
 
-import type { Source, Location, Position } from "../../../types";
+import type { Source, SourceLocation, PartialPosition } from "../../../types";
 
 import type { GeneratedBindingLocation } from "./buildGeneratedBindingList";
 
@@ -21,8 +21,8 @@ export type ApplicableBinding = {
 };
 
 type GeneratedRange = {
-  start: Position,
+  start: PartialPosition,
-  end: Position
+  end: PartialPosition
 };
 
 export async function originalRangeStartsInside(
@@ -31,8 +31,8 @@ export async function originalRangeStartsInside(
     start,
     end
   }: {
-    start: Location,
+    start: SourceLocation,
-    end: Location
+    end: SourceLocation
   },
   sourceMaps: any
 ) {
@@ -53,8 +53,8 @@ export async function getApplicableBindingsForOriginalPosition(
     start,
     end
   }: {
-    start: Location,
+    start: SourceLocation,
-    end: Location
+    end: SourceLocation
   },
   bindingType: BindingType,
   locationType: BindingLocationType,

devtools/client/debugger/new/src/utils/pause/mapScopes/index.js

@@ -36,7 +36,7 @@ import {
 
 import { log } from "../../log";
 import type {
-  Position,
+  PartialPosition,
   Frame,
   Scope,
   Source,
@@ -254,7 +254,7 @@ function batchScopeMappings(
     }
   };
 }
-function buildLocationKey(loc: Position): string {
+function buildLocationKey(loc: PartialPosition): string {
   return `${loc.line}:${locColumn(loc)}`;
 }
 

devtools/client/debugger/new/src/utils/pause/mapScopes/locColumn.js

@@ -4,9 +4,9 @@
 
 // @flow
 
-import type { Position } from "../../../types";
+import type { PartialPosition } from "../../../types";
 
-export function locColumn(loc: Position): number {
+export function locColumn(loc: PartialPosition): number {
   if (typeof loc.column !== "number") {
     // This shouldn't really happen with locations from the AST, but
     // the datatype we are using allows null/undefined column.

devtools/client/debugger/new/src/utils/pause/mapScopes/mappingContains.js

@@ -4,12 +4,12 @@
 
 // @flow
 
-import type { Position } from "../../../types";
+import type { PartialPosition } from "../../../types";
 import { positionCmp } from "./positionCmp";
 
 export function mappingContains(
-  mapped: { +start: Position, +end: Position },
+  mapped: { +start: PartialPosition, +end: PartialPosition },
-  item: { +start: Position, +end: Position }
+  item: { +start: PartialPosition, +end: PartialPosition }
 ) {
   return (
     positionCmp(item.start, mapped.start) >= 0 &&

devtools/client/debugger/new/src/utils/pause/mapScopes/positionCmp.js

@@ -4,7 +4,7 @@
 
 // @flow
 
-import type { Position } from "../../../types";
+import type { PartialPosition } from "../../../types";
 import { locColumn } from "./locColumn";
 
 /**
@@ -12,7 +12,7 @@ import { locColumn } from "./locColumn";
  * * < 0 - first position before second position
  * * > 0 - first position after second position
  */
-export function positionCmp(p1: Position, p2: Position) {
+export function positionCmp(p1: PartialPosition, p2: PartialPosition) {
   if (p1.line === p2.line) {
     const l1 = locColumn(p1);
     const l2 = locColumn(p2);

devtools/client/debugger/new/src/utils/pause/mapScopes/rangeMetadata.js

@@ -9,7 +9,7 @@ import { positionCmp } from "./positionCmp";
 import { filterSortedArray } from "./filtering";
 
 import type { SourceScope } from "../../../workers/parser";
-import type { Position, Frame, Source } from "../../../types";
+import type { PartialPosition, Frame, Source } from "../../../types";
 
 type SourceOriginalRange = {
   line: number,
@@ -118,7 +118,7 @@ export async function loadRangeMetadata(
 
 export function findMatchingRange(
   sortedOriginalRanges: Array<MappedOriginalRange>,
-  bindingRange: { +end: Position, +start: Position }
+  bindingRange: { +end: PartialPosition, +start: PartialPosition }
 ): ?MappedOriginalRange {
   return filterSortedArray(sortedOriginalRanges, range => {
     if (range.line < bindingRange.start.line) {

devtools/client/debugger/new/src/utils/pause/pausePoints.js

@@ -6,10 +6,10 @@
 import { reverse } from "lodash";
 
 import type { PausePoints } from "../../workers/parser";
-import type { ColumnPosition } from "../../types";
+import type { Position } from "../../types";
 
 type PausePoint = {
-  location: ColumnPosition,
+  location: Position,
   types: { break: boolean, step: boolean }
 };
 
@@ -23,11 +23,7 @@ export function convertToList(pausePoints: PausePoints): PausePoint[] {
   const list = [];
   for (const line in pausePoints) {
     for (const column in pausePoints[line]) {
-      const point = pausePoints[line][column];
+      list.push(pausePoints[line][column]);
-      list.push({
-        location: { line: parseInt(line, 10), column: parseInt(column, 10) },
-        types: point
-      });
     }
   }
   return list;
@@ -45,3 +41,16 @@ export function formatPausePoints(text: string, pausePoints: PausePoints) {
 
   return lines.join("\n");
 }
+
+export async function mapPausePoints(pausePoints, iteratee) {
+  const results = await Promise.all(convertToList(pausePoints).map(iteratee));
+
+  for (const line in pausePoints) {
+    const linePoints = pausePoints[line];
+    for (const column in linePoints) {
+      linePoints[column] = results.shift();
+    }
+  }
+
+  return pausePoints;
+}

devtools/client/debugger/new/src/utils/pause/stepping.js

@@ -37,7 +37,7 @@ export function shouldStep(rootFrame: ?Frame, state: State, sourceMaps: any) {
 
   const sameLocation = previousFrameLoc && isEqual(previousFrameLoc, frameLoc);
   const pausePoint = getPausePoint(state, frameLoc);
-  const invalidPauseLocation = pausePoint && !pausePoint.step;
+  const invalidPauseLocation = pausePoint && !pausePoint.types.step;
 
   // We always want to pause in generated locations
   if (!frameLoc || isGeneratedId(frameLoc.sourceId)) {

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

@@ -14,6 +14,7 @@ const prefsSchemaVersion = "1.0.5";
 const pref = Services.pref;
 
 if (isDevelopment()) {
+  pref("devtools.debugger.logging", false);
   pref("devtools.debugger.alphabetize-outline", false);
   pref("devtools.debugger.auto-pretty-print", false);
   pref("devtools.source-map.client-service.enabled", true);
@@ -50,7 +51,6 @@ if (isDevelopment()) {
   pref("devtools.debugger.features.root", true);
   pref("devtools.debugger.features.map-scopes", true);
   pref("devtools.debugger.features.remove-command-bar-options", true);
-  pref("devtools.debugger.features.event-listeners", false);
   pref("devtools.debugger.features.code-folding", false);
   pref("devtools.debugger.features.outline", true);
   pref("devtools.debugger.features.column-breakpoints", false);
@@ -64,6 +64,7 @@ if (isDevelopment()) {
 }
 
 export const prefs = new PrefsHelper("devtools", {
+  logging: ["Bool", "debugger.alphabetize-outline"],
   alphabetizeOutline: ["Bool", "debugger.alphabetize-outline"],
   autoPrettyPrint: ["Bool", "debugger.auto-pretty-print"],
   clientSourceMapsEnabled: ["Bool", "source-map.client-service.enabled"],
@@ -104,7 +105,6 @@ export const features = new PrefsHelper("devtools.debugger.features", {
   mapScopes: ["Bool", "map-scopes"],
   removeCommandBarOptions: ["Bool", "remove-command-bar-options"],
   workers: ["Bool", "workers"],
-  eventListeners: ["Bool", "event-listeners"],
   outline: ["Bool", "outline"],
   codeFolding: ["Bool", "code-folding"],
   pausePoints: ["Bool", "pause-points"],

devtools/client/debugger/new/src/utils/quick-open.js

@@ -5,7 +5,12 @@
 // @flow
 import classnames from "classnames";
 import { endTruncateStr } from "./utils";
-import { isPretty, getFilename, getSourceClassnames } from "./source";
+import {
+  isPretty,
+  getFilename,
+  getSourceClassnames,
+  getSourceQueryString
+} from "./source";
 
 import type { Location as BabelLocation } from "@babel/types";
 import type { Symbols } from "../reducers/ast";
@@ -53,9 +58,13 @@ export function parseLineColumn(query: string) {
 
 export function formatSourcesForList(source: Source, tabs: TabList) {
   const title = getFilename(source);
-  const subtitle = endTruncateStr(source.relativeUrl, 100);
+  const relativeUrlWithQuery = `${source.relativeUrl}${getSourceQueryString(
+    source
+  )}`;
+  const subtitle = endTruncateStr(relativeUrlWithQuery, 100);
+  const value = relativeUrlWithQuery;
   return {
-    value: source.relativeUrl,
+    value,
     title,
     subtitle,
     icon: tabs.some(tab => tab.url == source.url)
@@ -93,13 +102,12 @@ export function formatSymbol(symbol: SymbolDeclaration): QuickOpenResult {
 
 export function formatSymbols(symbols: ?Symbols): FormattedSymbolDeclarations {
   if (!symbols || symbols.loading) {
-    return { variables: [], functions: [] };
+    return { functions: [] };
   }
 
-  const { variables, functions } = symbols;
+  const { functions } = symbols;
 
   return {
-    variables: variables.map(formatSymbol),
     functions: functions.map(formatSymbol)
   };
 }

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

@@ -7,15 +7,15 @@
 import { isOriginalId } from "devtools-source-map";
 import { getSource } from "../selectors";
 
-import type { Location, MappedLocation, Source } from "../types";
+import type { SourceLocation, MappedLocation, Source } from "../types";
 import { isGenerated } from "../utils/source";
 
 export async function getGeneratedLocation(
   state: Object,
   source: Source,
-  location: Location,
+  location: SourceLocation,
   sourceMaps: Object
-): Promise<Location> {
+): Promise<SourceLocation> {
   if (!isOriginalId(location.sourceId)) {
     return location;
   }
@@ -41,8 +41,8 @@ export async function getGeneratedLocation(
 export async function getMappedLocation(
   state: Object,
   sourceMaps: Object,
-  location: Location
+  location: SourceLocation
-): Promise<Location> {
+): Promise<SourceLocation> {
   const source = getSource(state, location.sourceId);
 
   if (!source) {

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

@@ -21,7 +21,7 @@ export { isMinified } from "./isMinified";
 import { getURL, getFileExtension } from "./sources-tree";
 import { prefs } from "./prefs";
 
-import type { Source, Location, JsSource } from "../types";
+import type { Source, SourceLocation, JsSource } from "../types";
 import type { SourceMetaDataType } from "../reducers/ast";
 import type { SymbolDeclarations } from "../workers/parser";
 
@@ -386,7 +386,7 @@ export function isLoading(source: Source) {
   return source.loadedState === "loading";
 }
 
-export function getTextAtPosition(source: ?Source, location: Location) {
+export function getTextAtPosition(source: ?Source, location: SourceLocation) {
   if (!source || !source.text) {
     return "";
   }

devtools/client/debugger/new/src/workers/parser/getScopes/index.js

@@ -27,11 +27,11 @@ export type {
   BindingType
 };
 
-import type { Location } from "../../../types";
+import type { SourceLocation } from "../../../types";
 
 let parsedScopesCache = new Map();
 
-export default function getScopes(location: Location): SourceScope[] {
+export default function getScopes(location: SourceLocation): SourceScope[] {
   const { sourceId } = location;
   let parsedScopes = parsedScopesCache.get(sourceId);
   if (!parsedScopes) {
@@ -50,7 +50,10 @@ export { buildScopeList };
 /**
  * Searches all scopes and their bindings at the specific location.
  */
-function findScopes(scopes: ParsedScope[], location: Location): SourceScope[] {
+function findScopes(
+  scopes: ParsedScope[],
+  location: SourceLocation
+): SourceScope[] {
   // Find inner most in the tree structure.
   let searchInScopes: ?(ParsedScope[]) = scopes;
   const found = [];
@@ -82,7 +85,7 @@ function findScopes(scopes: ParsedScope[], location: Location): SourceScope[] {
   });
 }
 
-function compareLocations(a: Location, b: Location): number {
+function compareLocations(a: SourceLocation, b: SourceLocation): number {
   // According to type of Location.column can be undefined, if will not be the
   // case here, ignoring flow error.
   // $FlowIgnore

devtools/client/debugger/new/src/workers/parser/index.js

@@ -8,7 +8,7 @@ import { workerUtils } from "devtools-utils";
 const { WorkerDispatcher } = workerUtils;
 
 import type { AstLocation, AstPosition, PausePoints } from "./types";
-import type { Location, Source, SourceId } from "../../types";
+import type { SourceLocation, Source, SourceId } from "../../types";
 import type { SourceScope } from "./getScopes/visitor";
 import type { SymbolDeclarations } from "./getSymbols";
 
@@ -26,14 +26,15 @@ export const findOutOfScopeLocations = async (
 export const getNextStep = async (
   sourceId: SourceId,
   pausedPosition: AstPosition
-): Promise<?Location> =>
+): Promise<?SourceLocation> =>
   dispatcher.invoke("getNextStep", sourceId, pausedPosition);
 
 export const clearASTs = async (): Promise<void> =>
   dispatcher.invoke("clearASTs");
 
-export const getScopes = async (location: Location): Promise<SourceScope[]> =>
+export const getScopes = async (
-  dispatcher.invoke("getScopes", location);
+  location: SourceLocation
+): Promise<SourceScope[]> => dispatcher.invoke("getScopes", location);
 
 export const clearScopes = async (): Promise<void> =>
   dispatcher.invoke("clearScopes");

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

@@ -8,7 +8,7 @@ function openFirstBreakpointContextMenu(dbg){
 
 // Tests to see if we can trigger a breakpoint action via the context menu
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple2");
   await selectSource(dbg, "simple2");
   await waitForSelectedSource(dbg, "simple2");
 
@@ -16,7 +16,7 @@ add_task(async function() {
 
   openFirstBreakpointContextMenu(dbg)
   // select "Remove breakpoint"
-  selectMenuItem(dbg, 1);
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.remove);
 
   await waitForState(dbg, state => dbg.selectors.getBreakpointCount(state) === 0);
   ok("successfully removed the breakpoint");
@@ -36,7 +36,7 @@ add_task(async function() {
   openFirstBreakpointContextMenu(dbg);
   // select "Disable Others"
   let dispatched = waitForDispatch(dbg, "DISABLE_BREAKPOINT", 3);
-  selectMenuItem(dbg, 7);
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableOthers);
   await waitForState(dbg, state =>
     dbg.selectors.getBreakpointsList(state)
       .every(bp => (bp.location.line !== 1) === bp.disabled)
@@ -47,7 +47,7 @@ add_task(async function() {
   openFirstBreakpointContextMenu(dbg);
   // select "Disable All"
   dispatched = waitForDispatch(dbg, "DISABLE_ALL_BREAKPOINTS");
-  selectMenuItem(dbg, 9);
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableAll);
   await waitForState(dbg, state =>
     dbg.selectors.getBreakpointsList(state).every(bp => bp.disabled)
   );
@@ -57,7 +57,7 @@ add_task(async function() {
   openFirstBreakpointContextMenu(dbg);
   // select "Enable Others"
   dispatched = waitForDispatch(dbg, "ENABLE_BREAKPOINT", 3);
-  selectMenuItem(dbg, 3);
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.enableOthers);
   await waitForState(dbg, state =>
     dbg.selectors.getBreakpointsList(state)
       .every(bp => (bp.location.line === 1) === bp.disabled)
@@ -68,7 +68,7 @@ add_task(async function() {
   openFirstBreakpointContextMenu(dbg);
   // select "Remove Others"
   dispatched = waitForDispatch(dbg, "REMOVE_BREAKPOINT", 3);
-  selectMenuItem(dbg, 6);
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.removeOthers);
   await waitForState(dbg, state =>
     dbg.selectors.getBreakpointsList(state).length === 1 &&
     dbg.selectors.getBreakpointsList(state)[0].location.line === 1

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

@@ -38,8 +38,15 @@ async function assertConditionalBreakpointIsFocused(dbg) {
 }
 
 async function setConditionalBreakpoint(dbg, index, condition) {
+  const {
+    addConditionalBreakpoint,
+    editBreakpoint
+  } = selectors.gutterContextMenu;
+  // Make this work with either add or edit menu items
+  const selector = `${addConditionalBreakpoint},${editBreakpoint}`;
+
   rightClickElement(dbg, "gutter", index);
-  selectMenuItem(dbg, 2);
+  selectContextMenuItem(dbg, selector);
   await waitForElement(dbg, "conditionalPanelInput");
   await assertConditionalBreakpointIsFocused(dbg);
 
@@ -50,7 +57,7 @@ async function setConditionalBreakpoint(dbg, index, condition) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple2");
   await selectSource(dbg, "simple2");
   await waitForSelectedSource(dbg, "simple2");
 
@@ -86,7 +93,7 @@ add_task(async function() {
   //right click breakpoint in breakpoints list
   rightClickElement(dbg, "breakpointItem", 3)
   // select "remove condition";
-  selectMenuItem(dbg, 8);
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.removeCondition);
   await bpCondition;
   bp = findBreakpoint(dbg, "simple2", 5);
   is(bp.condition, undefined, "breakpoint condition removed");

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

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

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

@@ -44,8 +44,9 @@ function findBreakpoint(dbg, url, line) {
   return getBreakpoint(getState(), { sourceId: source.id, line });
 }
 
+// Test enabling and disabling a breakpoint using the check boxes
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple2");
 
   // Create two breakpoints
   await selectSource(dbg, "simple2");
@@ -65,3 +66,31 @@ add_task(async function() {
   bp2 = findBreakpoint(dbg, "simple2", 5);
   is(bp2.disabled, false, "second breakpoint is enabled");
 });
+
+// Test enabling and disabling a breakpoint using the context menu
+add_task(async function() {
+  const dbg = await initDebugger("doc-scripts.html");
+  await selectSource(dbg, "simple2");
+  await addBreakpoint(dbg, "simple2", 3);
+  await addBreakpoint(dbg, "simple2", 5);
+
+  rightClickElement(dbg, "breakpointItem", 3);
+  const disableBreakpointDispatch = waitForDispatch(dbg, "DISABLE_BREAKPOINT");
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.disableSelf);
+  await disableBreakpointDispatch;
+
+  let bp1 = findBreakpoint(dbg, "simple2", 3);
+  let bp2 = findBreakpoint(dbg, "simple2", 5);
+  is(bp1.disabled, true, "first breakpoint is disabled");
+  is(bp2.disabled, false, "second breakpoint is enabled");
+
+  rightClickElement(dbg, "breakpointItem", 3);
+  const enableBreakpointDispatch = waitForDispatch(dbg, "ENABLE_BREAKPOINT");
+  selectContextMenuItem(dbg, selectors.breakpointContextMenu.enableSelf);
+  await enableBreakpointDispatch;
+
+  bp1 = findBreakpoint(dbg, "simple2", 3);
+  bp2 = findBreakpoint(dbg, "simple2", 5);
+  is(bp1.disabled, false, "first breakpoint is enabled");
+  is(bp2.disabled, false, "second breakpoint is enabled");
+});

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

@@ -40,7 +40,7 @@ add_task(async function() {
   Services.prefs.setBoolPref("devtools.toolbox.splitconsoleEnabled", true);
   Services.prefs.setBoolPref("devtools.debugger.features.map-await-expression", true);
 
-  const dbg = await initDebugger("doc-script-switching.html");
+  const dbg = await initDebugger("doc-script-switching.html", "switching-01");
 
   await selectSource(dbg, "switching-01");
 

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

@@ -23,7 +23,7 @@ function getSplitConsole(dbg) {
 
 add_task(async function() {
   Services.prefs.setBoolPref("devtools.toolbox.splitconsoleEnabled", true);
-  const dbg = await initDebugger("doc-script-switching.html");
+  const dbg = await initDebugger("doc-script-switching.html", "switching-01");
 
   await selectSource(dbg, "switching-01");
 

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

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

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

@@ -6,7 +6,7 @@
 // doesn't exist.
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "long.js");
   const {
     selectors: { getSource },
     getState

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

@@ -4,7 +4,7 @@
 // Tests that the editor sets the correct mode for different file
 // types
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple1.js");
 
   await selectSource(dbg, "simple1.js");
   is(dbg.win.cm.getOption("mode").name, "javascript", "Mode is correct");

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

@@ -4,7 +4,7 @@
 // Tests that keyboard navigation into and out of debugger code editor
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple2");
   let doc = dbg.win.document;
 
   await selectSource(dbg, "simple2");

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

@@ -14,9 +14,7 @@ function getScopeNodeValue(dbg, index) {
 add_task(async function() {
   await pushPref("devtools.debugger.features.map-scopes", true);
 
-  const dbg = await initDebugger("doc-minified2.html");
+  const dbg = await initDebugger("doc-minified2.html", "sum.js");
-
-  await waitForSources(dbg, "sum.js");
 
   await selectSource(dbg, "sum.js");
   await addBreakpoint(dbg, "sum.js", 2);

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

@@ -11,7 +11,7 @@ function getNthItem(dbg, index) {
 
 // Tests the outline pane fuzzy filtering of outline items
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "long");
   await selectSource(dbg, "long", 1);
   findElementWithSelector(dbg, ".outline-tab").click();
 

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

@@ -11,7 +11,7 @@ function getNthItem(dbg, index) {
 
 // Tests that the length of outline functions for original and pretty printed source matches
 add_task(async function () {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple1");
   const {
     selectors: { getSelectedSource },
     getState

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

@@ -11,7 +11,7 @@ function getNthItem(dbg, index) {
 // Tests that the editor highlights the correct location when the
 // debugger pauses
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple1");
   const {
     selectors: { getSelectedSource },
     getState

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

@@ -29,7 +29,7 @@ async function testCase(dbg, { name, count, steps }) {
 }
 
 add_task(async function test() {
-  const dbg = await initDebugger("doc-pause-points.html");
+  const dbg = await initDebugger("doc-pause-points.html", "pause-points.js");
 
   await selectSource(dbg, "pause-points.js")
   await testCase(dbg, {

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

@@ -4,7 +4,7 @@
 // Tests pretty-printing a source that is currently paused.
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-minified.html");
+  const dbg = await initDebugger("doc-minified.html", "math.min.js");
 
   await selectSource(dbg, "math.min.js");
   await addBreakpoint(dbg, "math.min.js", 2);

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

@@ -4,7 +4,7 @@
 // Tests basic pretty-printing functionality.
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-minified.html");
+  const dbg = await initDebugger("doc-minified.html", "math.min.js");
 
   await selectSource(dbg, "math.min.js", 2);
   clickElement(dbg, "prettyPrintButton");

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

@@ -33,13 +33,12 @@ function assertPreviewPopup(dbg, { field, value, expression }) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-sourcemaps.html");
+  const dbg = await initDebugger("doc-sourcemaps.html", "entry.js", "output.js", "times2.js", "opts.js");
   const {
     selectors: { getSelectedSource },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "entry.js", "output.js", "times2.js", "opts.js");
   await selectSource(dbg, "times2");
   await addBreakpoint(dbg, "times2", 2);
 

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

@@ -14,7 +14,7 @@ async function previews(dbg, fnName, previews) {
 // Test hovering on an object, which will show a popup and on a
 // simple value, which will show a tooltip.
 add_task(async function() {
-  const dbg = await initDebugger("doc-preview.html");
+  const dbg = await initDebugger("doc-preview.html", "preview.js");
   await selectSource(dbg, "preview.js");
 
   await previews(dbg, "empties", [

devtools/client/debugger/new/test/mochitest/browser_dbg-quick-open.js

@@ -110,16 +110,6 @@ add_task(async function() {
   pressKey(dbg, "Escape");
   assertDisabled(dbg);
 
-  info("Testing variable search");
-  quickOpen(dbg, "sw2");
-  pressKey(dbg, "Enter");
-
-  quickOpen(dbg, "#");
-  is(resultCount(dbg), 1, "one variable result");
-  const results = findAllElements(dbg, "resultItems");
-  results.forEach(result => is(result.textContent, "x13"));
-  await waitToClose(dbg);
-
   info("Testing goto line:column");
   assertLine(dbg, 0);
   assertColumn(dbg, null);

devtools/client/debugger/new/test/mochitest/browser_dbg-react-app.js

@@ -1,10 +1,8 @@
 add_task(async function() {
   const dbg = await initDebugger("doc-react.html", "App.js");
 
-  await waitForSource(dbg, "App.js");
   await addBreakpoint(dbg, "App.js", 11);
 
-
   info('Test previewing an immutable Map inside of a react component')
   invokeInTab("clickButton");
   await waitForPaused(dbg);

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

@@ -18,9 +18,8 @@ async function waitForBreakpoint(dbg, location) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("ember/quickstart/dist/");
+  const dbg = await initDebugger("ember/quickstart/dist/", "ember-application/index.js");
 
-  await waitForSource(dbg, "ember-application/index.js");
   await selectSource(dbg, "ember-application/index.js");
 
   info("1. reload and hit breakpoint")

devtools/client/debugger/new/test/mochitest/browser_dbg-search-file.js

@@ -13,7 +13,7 @@ function getFocusedEl(dbg) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple1.js");
   const {
     selectors: { getBreakpoints, getBreakpoint, getActiveSearch },
     getState

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

@@ -39,13 +39,12 @@ 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 dbg = await initDebugger("doc-sourcemaps.html", "entry.js", "output.js", "times2.js", "opts.js");
   const {
     selectors: { getBreakpoint, getBreakpointCount },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "entry.js", "output.js", "times2.js", "opts.js");
   ok(true, "Original sources exist");
   const bundleSrc = findSource(dbg, "bundle.js");
 

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

@@ -18,14 +18,12 @@ function assertBpInGutter(dbg, lineNumber) {
 // This source map does not have source contents, so it's fetched separately
 add_task(async function() {
   // NOTE: the CORS call makes the test run times inconsistent
-  const dbg = await initDebugger("doc-sourcemaps2.html");
+  const dbg = await initDebugger("doc-sourcemaps2.html", "main.js", "main.min.js");
   const {
     selectors: { getBreakpoint, getBreakpointCount },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "main.js", "main.min.js");
-
   ok(true, "Original sources exist");
   const mainSrc = findSource(dbg, "main.js");
 

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

@@ -10,14 +10,12 @@ add_task(async function() {
   // NOTE: the CORS call makes the test run times inconsistent
   await pushPref("devtools.debugger.features.map-scopes", true);
 
-  const dbg = await initDebugger("doc-sourcemaps3.html");
+  const dbg = await initDebugger("doc-sourcemaps3.html", "bundle.js", "sorted.js", "test.js");
   const {
     selectors: { getBreakpoint, getBreakpointCount },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "bundle.js", "sorted.js", "test.js");
-
   ok(true, "Original sources exist");
   const sortedSrc = findSource(dbg, "sorted.js");
 

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

@@ -3,8 +3,7 @@
 
 // Test keyboard arrow behaviour
 add_task(async function() {
-  const dbg = await initDebugger("doc-sources.html");
+  const dbg = await initDebugger("doc-sources.html", "simple1", "simple2", "nested-source", "long.js");
-  await waitForSources(dbg, "simple1", "simple2", "nested-source", "long.js");
 
   await clickElement(dbg, "sourceDirectoryLabel", 2);
   await assertSourceCount(dbg, 7);

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

@@ -18,16 +18,13 @@ function getLabel(dbg, index) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-sources.html");
+  const dbg = await initDebugger("doc-sources.html", "simple1", "simple2", "nested-source", "long.js");
   const {
     selectors: { getSelectedSource },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "simple1", "simple2", "nested-source", "long.js");
+  info(`>>> contentTask: evaluate evaled.js\n`)
-
-
-  dump(`>>> contentTask: evaluate evaled.js\n`)
   ContentTask.spawn(gBrowser.selectedBrowser, null, function() {
     content.eval("window.evaledFunc = function() {} //# sourceURL=evaled.js");
   });

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

@@ -10,14 +10,12 @@ function getLabel(dbg, index) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-sources-querystring.html");
+  const dbg = await initDebugger("doc-sources-querystring.html", "simple1.js?x=1", "simple1.js?x=2");
   const {
     selectors: { getSelectedSource },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "simple1.js?x=1", "simple1.js?x=2");
-
   // Expand nodes and make sure more sources appear.
   await assertSourceCount(dbg, 2);
   await clickElement(dbg, "sourceDirectoryLabel", 2);
@@ -40,4 +38,8 @@ add_task(async function() {
     "simple1.js?x=1",
     "Breakpoint heading is simple1.js?x=1"
   );
+
+  pressKey(dbg, "quickOpen");
+  type(dbg, "simple1.js?x");
+  ok(findElement(dbg, "resultItems")[0].innerText.includes("simple.js?x=1"));
 });

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

@@ -10,14 +10,12 @@ function getLabel(dbg, index) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-sources.html");
+  const dbg = await initDebugger("doc-sources.html", "simple1", "simple2", "nested-source", "long.js");
   const {
     selectors: { getSelectedSource },
     getState
   } = dbg;
 
-  await waitForSources(dbg, "simple1", "simple2", "nested-source", "long.js");
-
   // Expand nodes and make sure more sources appear.
   await assertSourceCount(dbg, 2);
   await clickElement(dbg, "sourceDirectoryLabel", 2);

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

@@ -4,7 +4,7 @@
 // Tests re-opening pretty printed tabs on load
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-minified.html");
+  const dbg = await initDebugger("doc-minified.html", "math.min.js");
 
   await selectSource(dbg, "math.min.js");
   clickElement(dbg, "prettyPrintButton");
@@ -15,7 +15,7 @@ add_task(async function() {
 
   await waitForSelectedSource(dbg, "math.min.js:formatted");
   ok(true, "Pretty printed source is selected on reload");
-  
+
   await selectSource(dbg, "math.min.js:formatted");
   const source = findSource(dbg, "math.min.js:formatted");
   dbg.actions.showSource(source.id);

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

@@ -8,7 +8,7 @@ function countTabs(dbg) {
 }
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "simple1", "simple2");
 
   await selectSource(dbg, "simple1");
   await selectSource(dbg, "simple2");

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

@@ -6,7 +6,7 @@
 // Tests that you can switch tools, without losing your editor position
 
 add_task(async function() {
-  const dbg = await initDebugger("doc-scripts.html");
+  const dbg = await initDebugger("doc-scripts.html", "long");
 
   await selectSource(dbg, "long");
   getCM(dbg).scrollTo(0, 284);