Bug 1476123 - Update Debugger Frontend v72. r=dwalsh

MozReview-Commit-ID: GFb5n8CDtLR

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

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

@@ -2706,6 +2706,38 @@ html[dir="rtl"] .editor-mount {
   direction: ltr;
 }
 
+.theme-light {
+  --gutter-hover-background-color: #dde1e4;
+}
+
+.theme-dark {
+  --gutter-hover-background-color: #414141;
+}
+
+:not(.empty-line):not(.new-breakpoint)
+  > .CodeMirror-gutter-wrapper:hover
+  > .CodeMirror-linenumber {
+  height: 13px;
+  color: var(--theme-body-color);
+  /* Add 1px offset to the background to match it
+    with the actual breakpoint image dimensions */
+  background: linear-gradient(to bottom, transparent 1px, var(--gutter-hover-background-color) 0);
+}
+
+:not(.empty-line):not(.new-breakpoint)
+  > .CodeMirror-gutter-wrapper:hover
+  > .CodeMirror-linenumber::after {
+    content: '';
+    position: absolute;
+    top: 1px;
+    height: 12px;
+    width: 9px;
+    background-color: var(--gutter-hover-background-color);
+    mask: url("chrome://devtools/skin/images/debugger/breakpoint.svg") no-repeat;
+    mask-size: auto 12px;
+    mask-position: right;
+  }
+
 .editor-wrapper .breakpoints {
   position: absolute;
   top: 0;
@@ -2753,6 +2785,11 @@ html[dir="rtl"] .editor-mount {
   border: 1px solid #00b6ff;
 }
 
+.editor .breakpoint {
+    position: absolute;
+    right: -2px;
+}
+
 .editor.new-breakpoint.folding-enabled svg {
   right: -16px;
 }

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

@@ -1943,9 +1943,9 @@ var _frameworks = __webpack_require__(1703);
 
 var _pausePoints = __webpack_require__(3612);
 
-var _mapOriginalExpression = __webpack_require__(3613);
+var _mapExpression = __webpack_require__(3755);
 
-var _mapOriginalExpression2 = _interopRequireDefault(_mapOriginalExpression);
+var _mapExpression2 = _interopRequireDefault(_mapExpression);
 
 var _devtoolsUtils = __webpack_require__(1363);
 
@@ -1969,7 +1969,7 @@ self.onmessage = workerHandler({
   hasSyntaxError: _validate.hasSyntaxError,
   getFramework: _frameworks.getFramework,
   getPausePoints: _pausePoints.getPausePoints,
-  mapOriginalExpression: _mapOriginalExpression2.default
+  mapExpression: _mapExpression2.default
 });
 
 /***/ }),
@@ -25386,6 +25386,170 @@ module.exports = {
 
 /***/ }),
 
+/***/ 3755:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mapExpression;
+
+var _mapOriginalExpression = __webpack_require__(3613);
+
+var _mapOriginalExpression2 = _interopRequireDefault(_mapOriginalExpression);
+
+var _mapBindings = __webpack_require__(3756);
+
+var _mapBindings2 = _interopRequireDefault(_mapBindings);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+
+function mapExpression(expression, mappings, bindings, shouldMapBindings = true) {
+  let originalExpression = expression;
+  if (mappings) {
+    originalExpression = (0, _mapOriginalExpression2.default)(expression, mappings);
+  }
+
+  let safeExpression = originalExpression;
+  if (shouldMapBindings) {
+    safeExpression = (0, _mapBindings2.default)(originalExpression, bindings);
+  }
+
+  return safeExpression;
+}
+
+/***/ }),
+
+/***/ 3756:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mapExpressionBindings;
+
+var _ast = __webpack_require__(1375);
+
+var _generator = __webpack_require__(2365);
+
+var _generator2 = _interopRequireDefault(_generator);
+
+var _types = __webpack_require__(2268);
+
+var t = _interopRequireWildcard(_types);
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// translates new bindings `var a = 3` into `self.a = 3`
+// and existing bindings `var a = 3` into `a = 3` for re-assignments
+function globalizeDeclaration(node, bindings) {
+  return node.declarations.map(declaration => {
+    const identifier = bindings.includes(declaration.id.name) ? declaration.id : t.memberExpression(t.identifier("self"), declaration.id);
+
+    return t.expressionStatement(t.assignmentExpression("=", identifier, declaration.init));
+  });
+}
+
+// translates new bindings `a = 3` into `self.a = 3`
+// and keeps assignments the same for existing bindings.
+/* 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 globalizeAssignment(node, bindings) {
+  if (bindings.includes(node.left.name)) {
+    return node;
+  }
+
+  const identifier = t.memberExpression(t.identifier("self"), node.left);
+  return t.assignmentExpression(node.operator, identifier, node.right);
+}
+
+function isTopLevel(ancestors) {
+  return ancestors.filter(ancestor => ancestor.key == "body").length == 1;
+}
+
+function replaceNode(ancestors, node) {
+  const parent = ancestors[ancestors.length - 1];
+
+  if (typeof parent.index === "number") {
+    if (Array.isArray(node)) {
+      parent.node[parent.key].splice(parent.index, 1, ...node);
+    } else {
+      parent.node[parent.key][parent.index] = node;
+    }
+  } else {
+    parent.node[parent.key] = node;
+  }
+}
+
+function hasDestructuring(node) {
+  return node.declarations.some(declaration => t.isPattern(declaration.id));
+}
+
+function mapExpressionBindings(expression, bindings = []) {
+  const ast = (0, _ast.parseScript)(expression);
+  let shouldUpdate = true;
+  t.traverse(ast, (node, ancestors) => {
+    const parent = ancestors[ancestors.length - 1];
+
+    if (t.isWithStatement(node)) {
+      shouldUpdate = false;
+      return;
+    }
+
+    if (!isTopLevel(ancestors)) {
+      return;
+    }
+
+    if (t.isAssignmentExpression(node)) {
+      if (t.isIdentifier(node.left)) {
+        const newNode = globalizeAssignment(node, bindings);
+        return replaceNode(ancestors, newNode);
+      }
+
+      if (t.isPattern(node.left)) {
+        shouldUpdate = false;
+        return;
+      }
+    }
+
+    if (!t.isVariableDeclaration(node)) {
+      return;
+    }
+
+    if (hasDestructuring(node)) {
+      shouldUpdate = false;
+      return;
+    }
+
+    if (!t.isForStatement(parent.node)) {
+      const newNodes = globalizeDeclaration(node, bindings);
+      replaceNode(ancestors, newNodes);
+    }
+  });
+
+  if (!shouldUpdate) {
+    return expression;
+  }
+
+  return (0, _generator2.default)(ast).code;
+}
+
+/***/ }),
+
 /***/ 398:
 /***/ (function(module, exports, __webpack_require__) {
 

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

@@ -8384,10 +8384,6 @@ var _url = __webpack_require__(334);
 
 var url = _interopRequireWildcard(_url);
 
-var _lodashMove = __webpack_require__(3751);
-
-var lodashMove = _interopRequireWildcard(_lodashMove);
-
 var _classnames = __webpack_require__(175);
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -8396,6 +8392,10 @@ var _devtoolsSplitter = __webpack_require__(1440);
 
 var _devtoolsSplitter2 = _interopRequireDefault(_devtoolsSplitter);
 
+var _lodashMove = __webpack_require__(3751);
+
+var _lodashMove2 = _interopRequireDefault(_lodashMove);
+
 var _Svg = __webpack_require__(1359);
 
 var _Svg2 = _interopRequireDefault(_Svg);
@@ -8408,6 +8408,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 // (eg. "my-module/Test") which is why they are nested in "vendored".
 // The keys of the vendored object should match the module names
 // !!! Should remain synchronized with .babel/transform-mc.js !!!
+
+
+// Modules imported without destructuring
 /* 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/>. */
@@ -8435,7 +8438,7 @@ const vendored = exports.vendored = {
   "devtools-splitter": _devtoolsSplitter2.default,
   "devtools-utils": devtoolsUtils,
   "fuzzaldrin-plus": fuzzaldrinPlus,
-  "lodash-move": lodashMove,
+  "lodash-move": _lodashMove2.default,
   "react-transition-group/Transition": transition,
   reselect,
   // Svg is required via relative paths, so the key is not imported path.
@@ -8444,8 +8447,6 @@ const vendored = exports.vendored = {
   url
 };
 
-// Modules imported without destructuring
-
 /***/ }),
 
 /***/ 3750:

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

@@ -20,6 +20,8 @@ var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
 
 var _expressions = require("../utils/expressions");
 
+var _prefs = require("../utils/prefs");
+
 var _parser = require("../workers/parser/index");
 
 var parser = _interopRequireWildcard(_parser);
@@ -215,11 +217,12 @@ function getMappedExpression(expression) {
     sourceMaps
   }) {
     const mappings = (0, _selectors.getSelectedScopeMappings)(getState());
+    const bindings = (0, _selectors.getSelectedFrameBindings)(getState());
 
-    if (!mappings) {
+    if (!mappings && !bindings) {
       return expression;
     }
 
-    return parser.mapOriginalExpression(expression, mappings);
+    return parser.mapExpression(expression, mappings, bindings, _prefs.features.mapExpressionBindings);
   };
 }

devtools/client/debugger/new/src/actions/file-search.js

@@ -90,7 +90,7 @@ function searchContents(query, editor) {
     const modifiers = (0, _selectors.getFileSearchModifiers)(getState());
     const selectedSource = (0, _selectors.getSelectedSource)(getState());
 
-    if (!query || !editor || !selectedSource || !selectedSource.text || !modifiers) {
+    if (!editor || !selectedSource || !selectedSource.text || !modifiers) {
       return;
     }
 
@@ -99,6 +99,11 @@ function searchContents(query, editor) {
       cm: editor.codeMirror
     };
 
+    if (!query) {
+      (0, _editor.clearSearch)(ctx.cm, query);
+      return;
+    }
+
     const _modifiers = modifiers.toJS();
 
     const matches = await (0, _search.getMatches)(query, selectedSource.text, _modifiers);

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

@@ -85,7 +85,7 @@ function loadSourceText(source) {
     try {
       await dispatch({
         type: "LOAD_SOURCE_TEXT",
-        sourceId: id,
+        sourceId: source.id,
         [_promise.PROMISE]: loadSource(source, {
           sourceMaps,
           client

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

@@ -10,16 +10,18 @@ var _react2 = _interopRequireDefault(_react);
 
 var _reactRedux = require("devtools/client/shared/vendor/react-redux");
 
+var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
+
+var _classnames = require("devtools/client/debugger/new/dist/vendors").vendored["classnames"];
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
 var _actions = require("../../actions/index");
 
 var _actions2 = _interopRequireDefault(_actions);
 
 var _selectors = require("../../selectors/index");
 
-var _classnames = require("devtools/client/debugger/new/dist/vendors").vendored["classnames"];
-
-var _classnames2 = _interopRequireDefault(_classnames);
-
 var _prefs = require("../../utils/prefs");
 
 var _source = require("../../utils/source");
@@ -148,7 +150,7 @@ class SourceFooter extends _react.PureComponent {
       selectedSource
     } = this.props;
 
-    if (!mappedSource) {
+    if (!mappedSource || !(0, _devtoolsSourceMap.isOriginalId)(selectedSource.id)) {
       return null;
     }
 

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

@@ -411,15 +411,7 @@ class Editor extends _react.PureComponent {
       editor
     } = this.state;
 
-    if (!nextProps.selectedSource || !editor || !nextProps.selectedLocation) {
-      return false;
-    }
-
-    if (!(0, _source.isLoaded)(nextProps.selectedSource)) {
-      return false;
-    }
-
-    if (!nextProps.selectedLocation.line) {
+    if (!editor || !nextProps.selectedSource || !nextProps.selectedLocation || !(0, _source.isLoaded)(nextProps.selectedSource)) {
       return false;
     }
 

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

@@ -21,6 +21,7 @@ exports.getFrames = getFrames;
 exports.getGeneratedFrameScope = getGeneratedFrameScope;
 exports.getOriginalFrameScope = getOriginalFrameScope;
 exports.getFrameScopes = getFrameScopes;
+exports.getSelectedFrameBindings = getSelectedFrameBindings;
 exports.getFrameScope = getFrameScope;
 exports.getSelectedScope = getSelectedScope;
 exports.getSelectedScopeMappings = getSelectedScopeMappings;
@@ -381,6 +382,33 @@ function getFrameScopes(state) {
   return state.pause.frameScopes;
 }
 
+function getSelectedFrameBindings(state) {
+  const scopes = getFrameScopes(state);
+  const selectedFrameId = getSelectedFrameId(state);
+
+  if (!scopes || !selectedFrameId) {
+    return null;
+  }
+
+  const frameScope = scopes.generated[selectedFrameId];
+
+  if (!frameScope || frameScope.pending) {
+    return;
+  }
+
+  let currentScope = frameScope.scope;
+  let frameBindings = [];
+
+  while (currentScope && currentScope.type != "object") {
+    const bindings = Object.keys(currentScope.bindings.variables);
+    const args = [].concat(...currentScope.bindings.arguments.map(argument => Object.keys(argument)));
+    frameBindings = [...frameBindings, ...bindings, ...args];
+    currentScope = currentScope.parent;
+  }
+
+  return frameBindings;
+}
+
 function getFrameScope(state, sourceId, frameId) {
   return getOriginalFrameScope(state, sourceId, frameId) || getGeneratedFrameScope(state, frameId);
 }

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

@@ -26,6 +26,8 @@ var _reselect = require("devtools/client/debugger/new/dist/vendors").vendored["r
 
 var _lodashMove = require("devtools/client/debugger/new/dist/vendors").vendored["lodash-move"];
 
+var _lodashMove2 = _interopRequireDefault(_lodashMove);
+
 var _source = require("../utils/source");
 
 var _devtoolsSourceMap = require("devtools/client/shared/source-map/index.js");
@@ -34,6 +36,8 @@ var _lodash = require("devtools/client/shared/vendor/lodash");
 
 var _prefs = require("../utils/prefs");
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
@@ -256,7 +260,7 @@ function updateTabList(tabs, url, newIndex) {
   if (currentIndex === -1) {
     tabs = [url, ...tabs];
   } else if (newIndex !== undefined) {
-    tabs = (0, _lodashMove.move)(tabs, currentIndex, newIndex);
+    tabs = (0, _lodashMove2.default)(tabs, currentIndex, newIndex);
   }
 
   _prefs.prefs.tabs = tabs;

devtools/client/debugger/new/src/utils/editor/source-search.js

@@ -7,6 +7,7 @@ exports.buildQuery = undefined;
 exports.getMatchIndex = getMatchIndex;
 exports.searchSourceForHighlight = searchSourceForHighlight;
 exports.removeOverlay = removeOverlay;
+exports.clearSearch = clearSearch;
 exports.find = find;
 exports.findNext = findNext;
 exports.findPrev = findPrev;

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

@@ -66,6 +66,7 @@ if (isDevelopment()) {
   pref("devtools.debugger.features.component-pane", false);
   pref("devtools.debugger.features.skip-pausing", true);
   pref("devtools.debugger.features.autocomplete-expressions", false);
+  pref("devtools.debugger.features.map-expression-bindings", true);
 }
 
 const prefs = exports.prefs = new PrefsHelper("devtools", {
@@ -113,8 +114,8 @@ const features = exports.features = new PrefsHelper("devtools.debugger.features"
   replay: ["Bool", "replay"],
   pausePoints: ["Bool", "pause-points"],
   skipPausing: ["Bool", "skip-pausing"],
-  componentPane: ["Bool", "component-pane"],
-  autocompleteExpression: ["Bool", "autocomplete-expressions"]
+  autocompleteExpression: ["Bool", "autocomplete-expressions"],
+  mapExpressionBindings: ["Bool", "map-expression-bindings"]
 });
 
 if (prefs.debuggerPrefsSchemaVersion !== prefsSchemaVersion) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.replaceOriginalVariableName = exports.getPausePoints = exports.getFramework = exports.mapOriginalExpression = exports.hasSyntaxError = exports.clearSources = exports.setSource = exports.hasSource = exports.getNextStep = exports.clearASTs = exports.clearScopes = exports.clearSymbols = exports.findOutOfScopeLocations = exports.getScopes = exports.getSymbols = exports.getClosestExpression = exports.stop = exports.start = undefined;
+exports.replaceOriginalVariableName = exports.getPausePoints = exports.getFramework = exports.mapExpression = exports.hasSyntaxError = exports.clearSources = exports.setSource = exports.hasSource = exports.getNextStep = exports.clearASTs = exports.clearScopes = exports.clearSymbols = exports.findOutOfScopeLocations = exports.getScopes = exports.getSymbols = exports.getClosestExpression = exports.stop = exports.start = undefined;
 
 var _devtoolsUtils = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-utils"];
 
@@ -28,7 +28,7 @@ const hasSource = exports.hasSource = dispatcher.task("hasSource");
 const setSource = exports.setSource = dispatcher.task("setSource");
 const clearSources = exports.clearSources = dispatcher.task("clearSources");
 const hasSyntaxError = exports.hasSyntaxError = dispatcher.task("hasSyntaxError");
-const mapOriginalExpression = exports.mapOriginalExpression = dispatcher.task("mapOriginalExpression");
+const mapExpression = exports.mapExpression = dispatcher.task("mapExpression");
 const getFramework = exports.getFramework = dispatcher.task("getFramework");
 const getPausePoints = exports.getPausePoints = dispatcher.task("getPausePoints");
 const replaceOriginalVariableName = exports.replaceOriginalVariableName = dispatcher.task("replaceOriginalVariableName");

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

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mapExpressionBindings;
+
+var _ast = require("./utils/ast");
+
+var _generator = require("@babel/generator/index");
+
+var _generator2 = _interopRequireDefault(_generator);
+
+var _types = require("@babel/types/index");
+
+var t = _interopRequireWildcard(_types);
+
+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)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+// translates new bindings `var a = 3` into `self.a = 3`
+// and existing bindings `var a = 3` into `a = 3` for re-assignments
+function globalizeDeclaration(node, bindings) {
+  return node.declarations.map(declaration => {
+    const identifier = bindings.includes(declaration.id.name) ? declaration.id : t.memberExpression(t.identifier("self"), declaration.id);
+    return t.expressionStatement(t.assignmentExpression("=", identifier, declaration.init));
+  });
+} // translates new bindings `a = 3` into `self.a = 3`
+// and keeps assignments the same for existing bindings.
+
+
+function globalizeAssignment(node, bindings) {
+  if (bindings.includes(node.left.name)) {
+    return node;
+  }
+
+  const identifier = t.memberExpression(t.identifier("self"), node.left);
+  return t.assignmentExpression(node.operator, identifier, node.right);
+}
+
+function isTopLevel(ancestors) {
+  return ancestors.filter(ancestor => ancestor.key == "body").length == 1;
+}
+
+function replaceNode(ancestors, node) {
+  const parent = ancestors[ancestors.length - 1];
+
+  if (typeof parent.index === "number") {
+    if (Array.isArray(node)) {
+      parent.node[parent.key].splice(parent.index, 1, ...node);
+    } else {
+      parent.node[parent.key][parent.index] = node;
+    }
+  } else {
+    parent.node[parent.key] = node;
+  }
+}
+
+function hasDestructuring(node) {
+  return node.declarations.some(declaration => t.isPattern(declaration.id));
+}
+
+function mapExpressionBindings(expression, bindings = []) {
+  const ast = (0, _ast.parseScript)(expression);
+  let shouldUpdate = true;
+  t.traverse(ast, (node, ancestors) => {
+    const parent = ancestors[ancestors.length - 1];
+
+    if (t.isWithStatement(node)) {
+      shouldUpdate = false;
+      return;
+    }
+
+    if (!isTopLevel(ancestors)) {
+      return;
+    }
+
+    if (t.isAssignmentExpression(node)) {
+      if (t.isIdentifier(node.left)) {
+        const newNode = globalizeAssignment(node, bindings);
+        return replaceNode(ancestors, newNode);
+      }
+
+      if (t.isPattern(node.left)) {
+        shouldUpdate = false;
+        return;
+      }
+    }
+
+    if (!t.isVariableDeclaration(node)) {
+      return;
+    }
+
+    if (hasDestructuring(node)) {
+      shouldUpdate = false;
+      return;
+    }
+
+    if (!t.isForStatement(parent.node)) {
+      const newNodes = globalizeDeclaration(node, bindings);
+      replaceNode(ancestors, newNodes);
+    }
+  });
+
+  if (!shouldUpdate) {
+    return expression;
+  }
+
+  return (0, _generator2.default)(ast).code;
+}

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = mapExpression;
+
+var _mapOriginalExpression = require("./mapOriginalExpression");
+
+var _mapOriginalExpression2 = _interopRequireDefault(_mapOriginalExpression);
+
+var _mapBindings = require("./mapBindings");
+
+var _mapBindings2 = _interopRequireDefault(_mapBindings);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+function mapExpression(expression, mappings, bindings, shouldMapBindings = true) {
+  let originalExpression = expression;
+
+  if (mappings) {
+    originalExpression = (0, _mapOriginalExpression2.default)(expression, mappings);
+  }
+
+  let safeExpression = originalExpression;
+
+  if (shouldMapBindings) {
+    safeExpression = (0, _mapBindings2.default)(originalExpression, bindings);
+  }
+
+  return safeExpression;
+}

devtools/client/debugger/new/src/workers/parser/moz.build

@@ -13,6 +13,8 @@ DevToolsModules(
     'frameworks.js',
     'getSymbols.js',
     'index.js',
+    'mapBindings.js',
+    'mapExpression.js',
     'mapOriginalExpression.js',
     'pausePoints.js',
     'sources.js',

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

@@ -22,9 +22,9 @@ var _frameworks = require("./frameworks");
 
 var _pausePoints = require("./pausePoints");
 
-var _mapOriginalExpression = require("./mapOriginalExpression");
+var _mapExpression = require("./mapExpression");
 
-var _mapOriginalExpression2 = _interopRequireDefault(_mapOriginalExpression);
+var _mapExpression2 = _interopRequireDefault(_mapExpression);
 
 var _devtoolsUtils = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-utils"];
 
@@ -50,5 +50,5 @@ self.onmessage = workerHandler({
   hasSyntaxError: _validate.hasSyntaxError,
   getFramework: _frameworks.getFramework,
   getPausePoints: _pausePoints.getPausePoints,
-  mapOriginalExpression: _mapOriginalExpression2.default
+  mapExpression: _mapExpression2.default
 });

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

@@ -124,6 +124,7 @@ support-files =
   examples/doc-sourcemaps3.html
   examples/doc-sourcemap-bogus.html
   examples/doc-sources.html
+  examples/doc-strict.html
   examples/doc-pause-points.html
   examples/doc-return-values.html
   examples/doc-wasm-sourcemaps.html
@@ -174,6 +175,7 @@ skip-if = (verify && !debug && (os == 'linux'))
 [browser_dbg-chrome-debugging.js]
 [browser_dbg-console.js]
 [browser_dbg-console-link.js]
+[browser_dbg-console-map-bindings.js]
 [browser_dbg-content-script-sources.js]
 skip-if = (os == "win" && ccov) # Bug 1424154
 [browser_dbg-debugger-buttons.js]

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

@@ -0,0 +1,45 @@
+// Return a promise with a reference to jsterm, opening the split
+// console if necessary.  This cleans up the split console pref so
+// it won't pollute other tests.
+function getSplitConsole(dbg) {
+  const { toolbox, win } = dbg;
+
+  if (!win) {
+    win = toolbox.win;
+  }
+
+  if (!toolbox.splitConsole) {
+    pressKey(dbg, "Escape");
+  }
+
+  return new Promise(resolve => {
+    toolbox.getPanelWhenReady("webconsole").then(() => {
+      ok(toolbox.splitConsole, "Split console is shown.");
+      let jsterm = toolbox.getPanel("webconsole").hud.jsterm;
+      resolve(jsterm);
+    });
+  });
+}
+
+async function evaluate(dbg, expression) {
+  const { toolbox } = dbg;
+  let jsterm = toolbox.getPanel("webconsole").hud.jsterm;
+  const msg = await jsterm.execute(expression);
+  return msg.innerText;
+}
+
+add_task(async function() {
+  Services.prefs.setBoolPref("devtools.toolbox.splitconsoleEnabled", true);
+  const dbg = await initDebugger("doc-strict.html");
+
+  await getSplitConsole(dbg);
+  ok(dbg.toolbox.splitConsole, "Split console is shown.");
+
+  invokeInTab("strict", 2);
+
+  await waitForPaused(dbg);
+  const msg = await evaluate(dbg, "var c = 3");
+  const msg2 = await evaluate(dbg, "c");
+
+  is(msg2, "3");
+});

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

@@ -49,7 +49,7 @@ add_task(async function() {
 
   info(`Test previewing in the original location`);
   await assertPreviews(dbg, [
-    { line: 2, column: 10, result: 4, expression: "x" }
+    { line: 2, column: 10, result: 4, expression: "x;" }
   ]);
 
   info(`Test previewing in the generated location`);

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

@@ -28,19 +28,19 @@ function testForOf(dbg) {
     {
       line: 5,
       column: 7,
-      expression: "doThing",
+      expression: "doThing;",
       result: "doThing(arg)"
     },
     {
       line: 5,
       column: 13,
-      expression: "x",
+      expression: "x;",
       result: "1"
     },
     {
       line: 8,
       column: 16,
-      expression: "doThing",
+      expression: "doThing;",
       result: "doThing(arg)"
     }
   ]);
@@ -59,7 +59,7 @@ function testShadowing(dbg) {
       {
         line: 2,
         column: 9,
-        expression: "aVar",
+        expression: "aVar;",
         result: '"var3"'
       },
       {
@@ -77,7 +77,7 @@ function testShadowing(dbg) {
       {
         line: 10,
         column: 11,
-        expression: "aVar",
+        expression: "aVar;",
         result: '"var3"'
       },
       {
@@ -97,7 +97,7 @@ function testShadowing(dbg) {
       {
         line: 14,
         column: 13,
-        expression: "aVar",
+        expression: "aVar;",
         result: '"var3"'
       },
       {
@@ -145,7 +145,7 @@ function testImportedBindings(dbg) {
     {
       line: 26,
       column: 16,
-      expression: "aNamespace",
+      expression: "aNamespace;",
       fields: [["aNamed", "a-named"], ["default", "a-default"]]
     },
     {
@@ -175,7 +175,7 @@ function testImportedBindings(dbg) {
     {
       line: 35,
       column: 20,
-      expression: "aNamespace2",
+      expression: "aNamespace2;",
       fields: [["aNamed", "a-named2"], ["default", "a-default2"]]
     }
   ]);

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

@@ -15,4 +15,7 @@ add_task(async function() {
 
   await waitForSelectedSource(dbg, "math.min.js:formatted");
   ok(true, "Pretty printed source is selected on reload");
+
+  const breakpointTab = findElementWithSelector(dbg, ".source-tab.active .filename");
+  is(breakpointTab.textContent, "math.min.js", ":formatted does not display in tab label");
 });

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

@@ -0,0 +1,20 @@
+ <!-- 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/. -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Debugger test page</title>
+  </head>
+
+  <body>
+    <script>
+      function strict(a) {
+        "use strict"
+        var b = 2;
+        debugger;
+      }
+    </script>
+  </body>
+</html>

devtools/client/jar.mn

@@ -264,6 +264,7 @@ devtools.jar:
     skin/images/debugger/arrow.svg (themes/images/debugger/arrow.svg)
     skin/images/debugger/back.svg (themes/images/debugger/back.svg)
     skin/images/debugger/blackBox.svg (themes/images/debugger/blackBox.svg)
+    skin/images/debugger/breakpoint.svg (themes/images/debugger/breakpoint.svg)
     skin/images/debugger/close.svg (themes/images/debugger/close.svg)
     skin/images/debugger/coffeescript.svg (themes/images/debugger/coffeescript.svg)
     skin/images/debugger/disable-pausing.svg (themes/images/debugger/disable-pausing.svg)

devtools/client/preferences/debugger.js

@@ -66,3 +66,4 @@ pref("devtools.debugger.features.component-stack", false);
 pref("devtools.debugger.features.async-stepping", true);
 pref("devtools.debugger.features.skip-pausing", true);
 pref("devtools.debugger.features.autocomplete-expressions", false);
+pref("devtools.debugger.features.map-expression-bindings", true);

devtools/client/themes/images/debugger/breakpoint.svg

@@ -0,0 +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 60 12">
+  <path id="base-path" d="M53.9,0H1C0.4,0,0,0.4,0,1v10c0,0.6,0.4,1,1,1h52.9c0.6,0,1.2-0.3,1.5-0.7L60,6l-4.4-5.3C55,0.3,54.5,0,53.9,0z"/>
+</svg>