Bug 1457989 - Update Debugger Frontend v47. r=jdescottes

MozReview-Commit-ID: Jfu0ZavS3e2

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

devtools/client/debugger/new/debugger.css

@@ -3072,6 +3072,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code,
 .CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-scroll {
   cursor: default;
+  pointer-events: none;
 }
 /* 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
@@ -3141,7 +3142,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 
 .expression-container {
   border: 1px;
-  padding: 0.25em 1em 0.25em 0.5em;
+  padding: 0.6em 1em 0.6em 0.5em;
   width: 100%;
   color: var(--theme-body-color);
   background-color: var(--theme-body-background);
@@ -4004,6 +4005,21 @@ html .welcomebox .toggle-button-end.collapsed {
   fill: var(--theme-body-color);
 }
 
+img.moreTabs {
+  mask: url("chrome://devtools/skin/images/command-chevron.svg") no-repeat;
+  mask-size: 100%;
+  width: 12px;
+  height: 12px;
+  display: block;
+  background: var(--theme-body-color);
+  margin-left: 6px;
+}
+
+html[dir="rtl"] img.moreTabs {
+  transform: rotate(180deg);
+  margin-right: 6px;
+}
+
 .source-tab .filename {
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -4032,6 +4048,7 @@ html .welcomebox .toggle-button-end.collapsed {
   --width: 150px;
   background: var(--theme-body-background);
   border: 1px solid var(--theme-splitter-color);
+  border-radius: 4px;
   box-shadow: 0 4px 4px 0 var(--search-overlays-semitransparent);
   max-height: 300px;
   position: absolute;
@@ -4071,6 +4088,7 @@ html[dir="rtl"] .dropdown {
   height: 30px;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: block;
 }
 
 .dropdown li:hover {
@@ -4100,6 +4118,8 @@ html[dir="rtl"] .dropdown {
 .dropdown-icon.file {
   mask: url("chrome://devtools/skin/images/debugger/file.svg") no-repeat;
   mask-size: 100%;
+  margin-bottom: 7px;
+
 }
 
 .dropdown ul {

devtools/client/debugger/new/debugger.js

@@ -5705,6 +5705,10 @@ function evaluateExpression(expression) {
 function getMappedExpression(expression) {
   return async function ({ dispatch, getState, client, sourceMaps }) {
     const mappings = (0, _selectors.getSelectedScopeMappings)(getState());
+    if (!mappings) {
+      return expression;
+    }
+
     return parser.mapOriginalExpression(expression, mappings);
   };
 }
@@ -15580,10 +15584,7 @@ class SearchBar extends _react.Component {
 
   // Renderers
   buildSummaryMsg() {
-    const {
-      searchResults: { matchIndex, count, index },
-      query
-    } = this.props;
+    const { searchResults: { matchIndex, count, index }, query } = this.props;
 
     if (query.trim() == "") {
       return "";
@@ -15601,18 +15602,12 @@ class SearchBar extends _react.Component {
   }
 
   shouldShowErrorEmoji() {
-    const {
-      query,
-      searchResults: { count }
-    } = this.props;
+    const { query, searchResults: { count } } = this.props;
     return !!query && !count;
   }
 
   render() {
-    const {
-      searchResults: { count },
-      searchOn
-    } = this.props;
+    const { searchResults: { count }, searchOn } = this.props;
 
     if (!searchOn) {
       return _react2.default.createElement("div", null);
@@ -15935,14 +15930,9 @@ __webpack_require__(1328);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const {
-  REPS: { Rep },
-  MODE,
-  ObjectInspector,
-  ObjectInspectorUtils
-} = _devtoolsReps2.default; /* 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/>. */
+const { REPS: { Rep }, MODE, ObjectInspector, ObjectInspectorUtils } = _devtoolsReps2.default; /* 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/>. */
 
 const {
   createNode,
@@ -16881,9 +16871,7 @@ function getCallSites(symbols, breakpoints) {
   }
 
   function findBreakpoint(callSite) {
-    const {
-      location: { start, end }
-    } = callSite;
+    const { location: { start, end } } = callSite;
 
     const breakpointId = (0, _lodash.range)(start.column - 1, end.column).map(column => locationKey({ line: start.line, column })).find(key => bpLocationMap[key]);
 
@@ -17496,9 +17484,7 @@ function getMenuItems(event, {
     accesskey: copyFunctionKey,
     disabled: !functionText,
     click: () => {
-      const {
-        location: { start, end }
-      } = getFunctionLocation(sourceLine);
+      const { location: { start, end } } = getFunctionLocation(sourceLine);
       flashLineRange({
         start: start.line,
         end: end.line,
@@ -17650,9 +17636,7 @@ function findFunctionText(line, source, symbols) {
     return null;
   }
 
-  const {
-    location: { start, end }
-  } = func;
+  const { location: { start, end } } = func;
   const lines = source.text.split("\n");
   const firstLine = lines[start.line - 1].slice(start.column);
   const lastLine = lines[end.line - 1].slice(0, end.column);
@@ -17890,6 +17874,8 @@ var _reactRedux = __webpack_require__(3592);
 
 var _redux = __webpack_require__(3593);
 
+var _immutable = __webpack_require__(3594);
+
 var _actions = __webpack_require__(1354);
 
 var _actions2 = _interopRequireDefault(_actions);
@@ -17954,6 +17940,10 @@ __webpack_require__(1342);
 
 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 debugBtn(onClick, type, className, tooltip) {
   return _react2.default.createElement(
     "button",
@@ -17965,9 +17955,7 @@ function debugBtn(onClick, type, className, tooltip) {
     },
     _react2.default.createElement(_Svg2.default, { name: type, title: tooltip, "aria-label": tooltip })
   );
-} /* This Source Code Form is subject to the terms of the Mozilla Public
-   * License, v. 2.0. If a copy of the MPL was not distributed with this
-   * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
+}
 
 class SecondaryPanes extends _react.Component {
   constructor(props) {
@@ -18019,6 +18007,12 @@ class SecondaryPanes extends _react.Component {
   }
 
   watchExpressionHeaderButtons() {
+    const { expressions } = this.props;
+
+    if (!expressions.size) {
+      return [];
+    }
+
     return [debugBtn(evt => {
       evt.stopPropagation();
       this.props.evaluateExpressions();
@@ -18052,9 +18046,7 @@ class SecondaryPanes extends _react.Component {
   }
 
   getComponentItem() {
-    const {
-      extra: { react }
-    } = this.props;
+    const { extra: { react } } = this.props;
 
     return {
       header: react.displayName,
@@ -18246,6 +18238,7 @@ SecondaryPanes.contextTypes = {
 };
 
 exports.default = (0, _reactRedux.connect)(state => ({
+  expressions: (0, _selectors.getExpressions)(state),
   extra: (0, _selectors.getExtra)(state),
   hasFrames: !!(0, _selectors.getTopFrame)(state),
   breakpoints: (0, _selectors.getBreakpoints)(state),
@@ -20388,8 +20381,9 @@ class Tabs extends _react.PureComponent {
       null,
       hiddenTabs.map(this.renderDropdownSource)
     );
+    const icon = _react2.default.createElement("img", { className: "moreTabs" });
 
-    return _react2.default.createElement(_Dropdown2.default, { panel: Panel, icon: "»" });
+    return _react2.default.createElement(_Dropdown2.default, { panel: Panel, icon: icon });
   }
 
   renderStartPanelToggleButton() {
@@ -22652,9 +22646,7 @@ class QuickOpenModal extends _react.Component {
     };
 
     this.searchSymbols = query => {
-      const {
-        symbols: { functions, variables }
-      } = this.props;
+      const { symbols: { functions, variables } } = this.props;
 
       let results = functions;
       if (this.isVariableQuery()) {
@@ -32981,9 +32973,7 @@ const {
   isOriginalId
 } = __webpack_require__(3652);
 
-const {
-  workerUtils: { WorkerDispatcher }
-} = __webpack_require__(3651);
+const { workerUtils: { WorkerDispatcher } } = __webpack_require__(3651);
 
 const dispatcher = new WorkerDispatcher();
 

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

@@ -24783,7 +24783,7 @@ function onEnter(node, ancestors, state) {
   if (isReturn(node)) {
     // We do not want to pause at the return and the call e.g. return foo()
     if (isCall(node.argument)) {
-      return addStopPoint(state, startLocation);
+      return addEmptyPoint(state, startLocation);
     }
     return addStopPoint(state, startLocation);
   }
@@ -24922,13 +24922,12 @@ function locationKey(start) {
   return `${start.line}:${start.column}`;
 }
 
-function getReplacements(ast, mappings) {
-  if (!mappings) {
-    return {};
-  }
-
+function mapOriginalExpression(expression, mappings) {
+  const ast = (0, _ast.parseScript)(expression);
   const scopes = (0, _getScopes.buildScopeList)(ast, "");
+
   const nodes = new Map();
+
   const replacements = new Map();
 
   // The ref-only global bindings are the ones that are accessed, but not
@@ -24961,45 +24960,24 @@ function getReplacements(ast, mappings) {
     }
   }
 
-  return replacements;
-}
+  if (replacements.size === 0) {
+    // Avoid the extra code generation work and also avoid potentially
+    // reformatting the user's code unnecessarily.
+    return expression;
+  }
 
-function mapOriginalExpression(expression, mappings) {
-  const ast = (0, _ast.parseScript)(expression);
-  const replacements = getReplacements(ast, mappings);
-
-  let didUpdate = false;
   t.traverse(ast, (node, ancestors) => {
-    const parent = ancestors[ancestors.length - 1];
-    if (!parent) {
+    if (!t.isIdentifier(node) && !t.isThisExpression(node)) {
       return;
     }
-    const parentNode = parent.node;
 
-    if (replacements.size > 0 && (t.isIdentifier(node) || t.isThisExpression(node))) {
-      const replacement = replacements.get(locationKey(node.loc.start));
-      if (replacement) {
-        didUpdate = true;
-        replaceNode(ancestors, t.cloneNode(replacement));
-      }
-    }
-
-    if (t.isVariableDeclaration(node) && !t.isBlockStatement(parentNode)) {
-      const parts = node.declarations.map(({ id, init }) => {
-        if (init) {
-          return t.ifStatement(t.unaryExpression("!", t.callExpression(t.memberExpression(t.identifier("window"), t.identifier("hasOwnProperty")), [t.stringLiteral(id.name)])), t.expressionStatement(t.assignmentExpression("=", t.memberExpression(t.identifier("window"), id), init)));
-        }
-      });
-
-      didUpdate = true;
-      const lastAncestor = ancestors[ancestors.length - 1];
-      const { index } = lastAncestor;
-      parent.node[parent.key].splice(index, 1, ...parts);
+    const replacement = replacements.get(locationKey(node.loc.start));
+    if (replacement) {
+      replaceNode(ancestors, t.cloneNode(replacement));
     }
   });
 
-  const mappedExpression = didUpdate ? (0, _generator2.default)(ast).code : expression;
-  return mappedExpression;
+  return (0, _generator2.default)(ast).code;
 }
 
 /***/ }),
@@ -25021,9 +24999,7 @@ const {
   isOriginalId
 } = __webpack_require__(3652);
 
-const {
-  workerUtils: { WorkerDispatcher }
-} = __webpack_require__(3651);
+const { workerUtils: { WorkerDispatcher } } = __webpack_require__(3651);
 
 const dispatcher = new WorkerDispatcher();
 

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

@@ -23,7 +23,11 @@ function getValue(dbg, index) {
 }
 
 async function addExpression(dbg, input) {
-  findElementWithSelector(dbg, expressionSelectors.plusIcon).click();
+  const plusIcon = findElementWithSelector(dbg, expressionSelectors.plusIcon);
+  if(plusIcon) {
+    plusIcon.click();
+  }
+  
   const evaluation = waitForDispatch(dbg, "EVALUATE_EXPRESSION");
   findElementWithSelector(dbg, expressionSelectors.input).focus();
   type(dbg, input);

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

@@ -34,7 +34,11 @@ function assertEmptyValue(dbg, index) {
 
 async function addExpression(dbg, input) {
   info("Adding an expression");
-  findElementWithSelector(dbg, expressionSelectors.plusIcon).click();
+
+  const plusIcon = findElementWithSelector(dbg, expressionSelectors.plusIcon);
+  if(plusIcon) {
+    plusIcon.click();
+  }
   findElementWithSelector(dbg, expressionSelectors.input).focus();
   type(dbg, input);
   pressKey(dbg, "Enter");

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

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

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

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