Bug 1463481 - Update Debugger Frontend v58. r=dwalsh

MozReview-Commit-ID: JS9wvG9Qmw6

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

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

@@ -1133,12 +1133,17 @@ html .toggle-button.end.vertical svg {
 
 .search-field .summary {
   line-height: 27px;
+  text-align: center;
   padding-right: 10px;
   color: var(--theme-body-color-inactive);
+  align-self: center;
+  padding-top: 1px;
+  white-space: nowrap;
 }
 
 .search-field.big .summary {
-  line-height: 40px;
+  padding: 5px 0 5px 0;
+  line-height: 2rem;
 }
 
 .search-field .search-nav-buttons {

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

@@ -7943,6 +7943,10 @@ class Tree extends Component {
         onExpand: this._onExpand,
         onCollapse: this._onCollapse,
         onClick: e => {
+          // We can stop the propagation since click handler on the node can be
+          // created in `renderItem`.
+          e.stopPropagation();
+
           // Since the user just clicked the node, there's no need to check if
           // it should be scrolled into view.
           this._focus(item, { preventAutoScroll: true });

devtools/client/debugger/new/src/actions/pause/extra.js

@@ -60,7 +60,7 @@ async function getExtraProps(getState, expression, result, evaluate) {
     props.react = await getReactProps(evaluate, component);
   }
 
-  if ((0, _preview.isImmutable)(result)) {
+  if ((0, _preview.isImmutablePreview)(result)) {
     props.immutable = await getImmutableProps(expression, evaluate);
   }
 

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

@@ -31,6 +31,8 @@ var _PreviewFunction2 = _interopRequireDefault(_PreviewFunction);
 
 var _editor = require("../../../utils/editor/index");
 
+var _preview = require("../../../utils/preview");
+
 var _Svg = require("devtools/client/debugger/new/dist/vendors").vendored["Svg"];
 
 var _Svg2 = _interopRequireDefault(_Svg);
@@ -135,22 +137,31 @@ class Popup extends _react.Component {
     });
   }
 
-  getChildren() {
+  getObjectProperties() {
     const {
       popupObjectProperties
     } = this.props;
     const root = this.getRoot();
     const value = getValue(root);
-    const actor = value ? value.actor : null;
-    const loadedRootProperties = popupObjectProperties[actor];
 
-    if (!loadedRootProperties) {
+    if (!value) {
+      return null;
+    }
+
+    return popupObjectProperties[value.actor];
+  }
+
+  getChildren() {
+    const properties = this.getObjectProperties();
+    const root = this.getRoot();
+
+    if (!properties) {
       return null;
     }
 
     const children = getChildren({
       item: root,
-      loadedProperties: new Map([[root.path, loadedRootProperties]])
+      loadedProperties: new Map([[root.path, properties]])
     });
 
     if (children.length > 0) {
@@ -221,12 +232,12 @@ class Popup extends _react.Component {
 
     let header = null;
 
-    if (extra.immutable) {
+    if ((0, _preview.isImmutable)(this.getObjectProperties())) {
       header = this.renderImmutable(extra.immutable);
       roots = roots.filter(r => r.type != NODE_TYPES.PROTOTYPE);
     }
 
-    if (extra.react) {
+    if ((0, _preview.isReactComponent)(this.getObjectProperties())) {
       header = this.renderReact(extra.react);
       roots = roots.filter(r => ["state", "props"].includes(r.name));
     }

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

@@ -24,6 +24,8 @@ var _actions2 = _interopRequireDefault(_actions);
 
 var _source = require("../../utils/source");
 
+var _devtoolsModules = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-modules"];
+
 var _clipboard = require("../../utils/clipboard");
 
 var _tabs = require("../../utils/tabs");
@@ -173,7 +175,7 @@ class Tab extends _react.PureComponent {
       shouldHide: icon => ["file", "javascript"].includes(icon)
     }), _react2.default.createElement("div", {
       className: "filename"
-    }, filename), _react2.default.createElement(_Button.CloseButton, {
+    }, (0, _devtoolsModules.getUnicodeUrlPath)(filename)), _react2.default.createElement(_Button.CloseButton, {
       handleClick: onClickClose,
       tooltip: L10N.getStr("sourceTabs.closeTabButtonTooltip")
     }));

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

@@ -289,10 +289,6 @@ class QuickOpenModal extends _react.Component {
         }
 
         if (results) {
-          if (this.isShortcutQuery()) {
-            return this.setModifier(results[selectedIndex]);
-          }
-
           return this.selectResultItem(e, results[selectedIndex]);
         }
       }
@@ -360,18 +356,6 @@ class QuickOpenModal extends _react.Component {
       });
     };
 
-    this.renderLoading = () => {
-      const {
-        symbolsLoading
-      } = this.props;
-
-      if ((this.isFunctionQuery() || this.isVariableQuery()) && symbolsLoading) {
-        return _react2.default.createElement("div", {
-          className: "loading-indicator"
-        }, L10N.getStr("loadingText"));
-      }
-    };
-
     this.state = {
       results: null,
       selectedIndex: 0
@@ -416,6 +400,18 @@ class QuickOpenModal extends _react.Component {
     return !this.getResultCount() && !!query;
   }
 
+  getSummaryMessage() {
+    let summaryMsg = "";
+
+    if (this.isGotoQuery()) {
+      summaryMsg = L10N.getStr("shortcuts.gotoLine");
+    } else if ((this.isFunctionQuery() || this.isVariableQuery()) && this.props.symbolsLoading) {
+      summaryMsg = L10N.getStr("loadingText");
+    }
+
+    return summaryMsg;
+  }
+
   render() {
     const {
       enabled,
@@ -433,7 +429,6 @@ class QuickOpenModal extends _react.Component {
     const newResults = results && results.slice(0, 100);
     const items = this.highlightMatching(query, newResults || []);
     const expanded = !!items && items.length > 0;
-    const summaryMsg = this.isGotoQuery() ? L10N.getStr("shortcuts.gotoLine") : "";
     return _react2.default.createElement(_Modal2.default, {
       "in": enabled,
       handleClose: this.closeModal
@@ -442,7 +437,7 @@ class QuickOpenModal extends _react.Component {
       hasPrefix: true,
       count: this.getResultCount(),
       placeholder: L10N.getStr("sourceSearch.search"),
-      summaryMsg: summaryMsg,
+      summaryMsg: this.getSummaryMessage(),
       showErrorEmoji: this.shouldShowErrorEmoji(),
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,
@@ -452,7 +447,7 @@ class QuickOpenModal extends _react.Component {
       selectedItemId: expanded && items[selectedIndex] ? items[selectedIndex].id : ""
     }, this.isSourceSearch() ? {
       size: "big"
-    } : {})), this.renderLoading(), newResults && _react2.default.createElement(_ResultList2.default, _extends({
+    } : {})), newResults && _react2.default.createElement(_ResultList2.default, _extends({
       key: "results",
       items: items,
       selected: selectedIndex,

devtools/client/debugger/new/src/components/SecondaryPanes/Frames/WhyPaused.js

@@ -23,7 +23,7 @@ function renderExceptionSummary(exception) {
 
   const preview = exception.preview;
 
-  if (!preview) {
+  if (!preview || !preview.name || !preview.message) {
     return;
   }
 

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

@@ -111,6 +111,20 @@ class SearchInput extends _react.Component {
     return [arrowBtn(handleNext, "arrow-down", (0, _classnames2.default)("nav-btn", "next"), L10N.getFormatStr("editor.searchResults.nextResult")), arrowBtn(handlePrev, "arrow-up", (0, _classnames2.default)("nav-btn", "prev"), L10N.getFormatStr("editor.searchResults.prevResult"))];
   }
 
+  renderSummaryMsg() {
+    const {
+      summaryMsg
+    } = this.props;
+
+    if (!summaryMsg) {
+      return null;
+    }
+
+    return _react2.default.createElement("div", {
+      className: "summary"
+    }, summaryMsg);
+  }
+
   renderNav() {
     const {
       count,
@@ -139,7 +153,6 @@ class SearchInput extends _react.Component {
       selectedItemId,
       showErrorEmoji,
       size,
-      summaryMsg,
       showClose
     } = this.props;
     const inputProps = {
@@ -169,9 +182,7 @@ class SearchInput extends _react.Component {
       "aria-haspopup": "listbox",
       "aria-owns": "result-list",
       "aria-expanded": expanded
-    }, this.renderSvg(), _react2.default.createElement("input", inputProps), summaryMsg && _react2.default.createElement("div", {
-      className: "summary"
-    }, summaryMsg), this.renderNav(), showClose && _react2.default.createElement(_Button.CloseButton, {
+    }, this.renderSvg(), _react2.default.createElement("input", inputProps), this.renderSummaryMsg(), this.renderNav(), showClose && _react2.default.createElement(_Button.CloseButton, {
       handleClick: handleClose,
       buttonClass: size
     })));

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.isImmutablePreview = isImmutablePreview;
 exports.isImmutable = isImmutable;
 exports.isReactComponent = isReactComponent;
 exports.isConsole = isConsole;
@@ -11,33 +12,28 @@ exports.isConsole = isConsole;
  * 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 IMMUTABLE_FIELDS = ["_root", "__ownerID", "__altered", "__hash"];
+const REACT_FIELDS = ["_reactInternalInstance", "_reactInternalFiber"];
+
+function isImmutablePreview(result) {
+  return result && isImmutable(result.preview);
+}
 
 function isImmutable(result) {
-  if (!result || !result.preview) {
-    return;
-  }
-
-  const ownProperties = result.preview.ownProperties;
-
-  if (!ownProperties) {
+  if (!result || typeof result.ownProperties != "object") {
     return;
   }
 
+  const ownProperties = result.ownProperties;
   return IMMUTABLE_FIELDS.every(field => Object.keys(ownProperties).includes(field));
 }
 
 function isReactComponent(result) {
-  if (!result || !result.preview) {
+  if (!result || typeof result.ownProperties != "object") {
     return;
   }
 
-  const ownProperties = result.preview.ownProperties;
-
-  if (!ownProperties) {
-    return;
-  }
-
-  return Object.keys(ownProperties).includes("_reactInternalInstance") || Object.keys(ownProperties).includes("_reactInternalFiber");
+  const ownProperties = result.ownProperties;
+  return REACT_FIELDS.some(field => Object.keys(ownProperties).includes(field));
 }
 
 function isConsole(expression) {

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

@@ -40,6 +40,8 @@ var _path = require("./path");
 
 var _url = require("devtools/client/debugger/new/dist/vendors").vendored["url"];
 
+var _devtoolsModules = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-modules"];
+
 var _sourcesTree = require("./sources-tree/index");
 
 const sourceTypes = exports.sourceTypes = {
@@ -151,9 +153,16 @@ function resolveFileURL(url, transformUrl = initialUrl => initialUrl) {
   const name = transformUrl(url);
   return (0, _utils.endTruncateStr)(name, 50);
 }
+/**
+ * Gets a readable filename from a URL for display purposes.
+ *
+ * @memberof utils/source
+ * @static
+ */
+
 
 function getFilenameFromURL(url) {
-  return resolveFileURL(url, initialUrl => (0, _path.basename)(initialUrl) || "(index)");
+  return resolveFileURL(url, initialUrl => (0, _devtoolsModules.getUnicodeUrlPath)((0, _path.basename)(initialUrl)) || "(index)");
 }
 
 function getFormattedSourceId(id) {
@@ -161,8 +170,8 @@ function getFormattedSourceId(id) {
   return `SOURCE${sourceId}`;
 }
 /**
- * Show a source url's filename.
- * If the source does not have a url, use the source id.
+ * Gets a readable filename from a source URL for display purposes.
+ * If the source does not have a URL, the source ID will be returned instead.
  *
  * @memberof utils/source
  * @static
@@ -189,8 +198,8 @@ function getFilename(source) {
   return filename;
 }
 /**
- * Show a source url.
- * If the source does not have a url, use the source id.
+ * Gets a readable source URL for display purposes.
+ * If the source does not have a URL, the source ID will be returned instead.
  *
  * @memberof utils/source
  * @static
@@ -207,7 +216,7 @@ function getFileURL(source) {
     return getFormattedSourceId(id);
   }
 
-  return resolveFileURL(url);
+  return resolveFileURL(url, _devtoolsModules.getUnicodeUrl);
 }
 
 const contentTypeModeMap = {

devtools/client/debugger/new/src/utils/sources-tree/getURL.js

@@ -10,6 +10,8 @@ var _url = require("devtools/client/debugger/new/dist/vendors").vendored["url"];
 
 var _lodash = require("devtools/client/shared/vendor/lodash");
 
+var _devtoolsModules = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-modules"];
+
 /* 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/>. */
@@ -111,7 +113,7 @@ function getURL(sourceUrl, debuggeeUrl = "") {
     case "https:":
       return (0, _lodash.merge)(def, {
         path: pathname,
-        group: host,
+        group: (0, _devtoolsModules.getUnicodeHostname)(host),
         filename: filename
       });
   }

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

@@ -1,13 +1,13 @@
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("devtools/client/shared/vendor/react"), require("devtools/client/shared/vendor/react-redux"), require("devtools/client/shared/vendor/redux"), require("devtools/client/shared/vendor/react-prop-types"), require("devtools/client/shared/vendor/react-dom-factories"));
+		module.exports = factory(require("devtools/client/shared/vendor/react"), require("Services"), require("devtools/client/shared/vendor/react-redux"), require("devtools/client/shared/vendor/redux"), require("devtools/client/shared/vendor/react-prop-types"), require("devtools/client/shared/vendor/react-dom-factories"));
 	else if(typeof define === 'function' && define.amd)
-		define(["devtools/client/shared/vendor/react", "devtools/client/shared/vendor/react-redux", "devtools/client/shared/vendor/redux", "devtools/client/shared/vendor/react-prop-types", "devtools/client/shared/vendor/react-dom-factories"], factory);
+		define(["devtools/client/shared/vendor/react", "Services", "devtools/client/shared/vendor/react-redux", "devtools/client/shared/vendor/redux", "devtools/client/shared/vendor/react-prop-types", "devtools/client/shared/vendor/react-dom-factories"], factory);
 	else {
-		var a = typeof exports === 'object' ? factory(require("devtools/client/shared/vendor/react"), require("devtools/client/shared/vendor/react-redux"), require("devtools/client/shared/vendor/redux"), require("devtools/client/shared/vendor/react-prop-types"), require("devtools/client/shared/vendor/react-dom-factories")) : factory(root["devtools/client/shared/vendor/react"], root["devtools/client/shared/vendor/react-redux"], root["devtools/client/shared/vendor/redux"], root["devtools/client/shared/vendor/react-prop-types"], root["devtools/client/shared/vendor/react-dom-factories"]);
+		var a = typeof exports === 'object' ? factory(require("devtools/client/shared/vendor/react"), require("Services"), require("devtools/client/shared/vendor/react-redux"), require("devtools/client/shared/vendor/redux"), require("devtools/client/shared/vendor/react-prop-types"), require("devtools/client/shared/vendor/react-dom-factories")) : factory(root["devtools/client/shared/vendor/react"], root["Services"], root["devtools/client/shared/vendor/react-redux"], root["devtools/client/shared/vendor/redux"], root["devtools/client/shared/vendor/react-prop-types"], root["devtools/client/shared/vendor/react-dom-factories"]);
 		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
 	}
-})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_3592__, __WEBPACK_EXTERNAL_MODULE_3593__, __WEBPACK_EXTERNAL_MODULE_3642__, __WEBPACK_EXTERNAL_MODULE_3643__) {
+})(typeof self !== 'undefined' ? self : this, function(__WEBPACK_EXTERNAL_MODULE_0__, __WEBPACK_EXTERNAL_MODULE_22__, __WEBPACK_EXTERNAL_MODULE_3592__, __WEBPACK_EXTERNAL_MODULE_3593__, __WEBPACK_EXTERNAL_MODULE_3642__, __WEBPACK_EXTERNAL_MODULE_3643__) {
 return /******/ (function(modules) { // webpackBootstrap
 /******/ 	// The module cache
 /******/ 	var installedModules = {};
@@ -136,6 +136,13 @@ var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
 }());
 
 
+/***/ }),
+
+/***/ 22:
+/***/ (function(module, exports) {
+
+module.exports = __WEBPACK_EXTERNAL_MODULE_22__;
+
 /***/ }),
 
 /***/ 3592:
@@ -4409,6 +4416,10 @@ class Tree extends Component {
         onExpand: this._onExpand,
         onCollapse: this._onCollapse,
         onClick: e => {
+          // We can stop the propagation since click handler on the node can be
+          // created in `renderItem`.
+          e.stopPropagation();
+
           // Since the user just clicked the node, there's no need to check if
           // it should be scrolled into view.
           this._focus(item, { preventAutoScroll: true });
@@ -4417,7 +4428,6 @@ class Tree extends Component {
           } else {
             this.props.onExpand(item, e.altKey);
           }
-          e.stopPropagation();
         }
       });
     });
@@ -6133,6 +6143,10 @@ module.exports = props => {
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _devtoolsServices = __webpack_require__(22);
+
+var _devtoolsServices2 = _interopRequireDefault(_devtoolsServices);
+
 var _devtoolsComponents = __webpack_require__(3669);
 
 var _devtoolsComponents2 = _interopRequireDefault(_devtoolsComponents);
@@ -6148,6 +6162,9 @@ const dom = __webpack_require__(3643);
 const { connect } = __webpack_require__(3592);
 const { bindActionCreators } = __webpack_require__(3593);
 
+const { appinfo } = _devtoolsServices2.default;
+const isMacOS = appinfo.OS === "Darwin";
+
 const Tree = createFactory(_devtoolsComponents2.default.Tree);
 __webpack_require__(3697);
 
@@ -6446,7 +6463,7 @@ class ObjectInspector extends Component {
         block: nodeIsBlock(item)
       }),
       onClick: e => {
-        if (e.metaKey && onCmdCtrlClick) {
+        if (onCmdCtrlClick && (isMacOS && e.metaKey || !isMacOS && e.ctrlKey)) {
           onCmdCtrlClick(item, {
             depth,
             event: e,

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

@@ -2146,7 +2146,7 @@ async function getAllGeneratedLocations(location, originalSource) {
   }));
 }
 
-async function getOriginalLocation(location) {
+async function getOriginalLocation(location, { search } = {}) {
   if (!isGeneratedId(location.sourceId)) {
     return location;
   }
@@ -2156,11 +2156,31 @@ async function getOriginalLocation(location) {
     return location;
   }
 
-  const { source: sourceUrl, line, column } = map.originalPositionFor({
+  // First check for an exact match
+  let match = map.originalPositionFor({
     line: location.line,
     column: location.column == null ? 0 : location.column
   });
 
+  // If there is not an exact match, look for a match with a bias at the
+  // current location and then on subsequent lines
+  if (search) {
+    let line = location.line;
+    let column = location.column == null ? 0 : location.column;
+
+    while (match.source === null) {
+      match = map.originalPositionFor({
+        line,
+        column,
+        bias: SourceMapConsumer[search]
+      });
+
+      line += search == "LEAST_UPPER_BOUND" ? 1 : -1;
+      column = search == "LEAST_UPPER_BOUND" ? 0 : Infinity;
+    }
+  }
+
+  const { source: sourceUrl, line, column } = match;
   if (sourceUrl == null) {
     // No url means the location didn't map.
     return location;