Bug 1465547 - Update Debugger Frontend v61 r=jdescottes
authorDavid Walsh <dwalsh@mozilla.com>
Wed, 30 May 2018 12:37:35 -0500
changeset 420686 335af54ff2cb34ba24bd927bd79c8efcc31d1a11
parent 420685 197e13dd04ab54a694402c46a64258c8f0a8287a
child 420687 0336998b51de99bb534c82dfb0fe854f03e4e3a0
push id34077
push usernerli@mozilla.com
push dateThu, 31 May 2018 21:51:59 +0000
treeherdermozilla-central@42880a726964 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1465547
milestone62.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1465547 - Update Debugger Frontend v61 r=jdescottes
devtools/client/debugger/new/README.mozilla
devtools/client/debugger/new/dist/debugger.css
devtools/client/debugger/new/dist/parser-worker.js
devtools/client/debugger/new/dist/vendors.js
devtools/client/debugger/new/src/actions/pause/extra.js
devtools/client/debugger/new/src/client/index.js
devtools/client/debugger/new/src/components/Editor/Preview/Popup.js
devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
devtools/client/debugger/new/src/utils/editor/source-documents.js
devtools/client/debugger/new/src/utils/path.js
devtools/client/debugger/new/src/utils/result-list.js
devtools/client/debugger/new/src/utils/source.js
devtools/client/debugger/new/src/utils/sources-tree/addToTree.js
devtools/client/debugger/new/src/utils/sources-tree/index.js
devtools/client/debugger/new/src/utils/sources-tree/utils.js
devtools/client/debugger/new/src/utils/task.js
devtools/client/debugger/new/src/utils/text.js
devtools/client/debugger/new/src/utils/utils.js
devtools/client/debugger/new/src/utils/wasm.js
devtools/client/debugger/new/src/workers/parser/utils/helpers.js
devtools/client/shared/components/reps/reps.css
devtools/client/shared/components/reps/reps.js
--- a/devtools/client/debugger/new/README.mozilla
+++ b/devtools/client/debugger/new/README.mozilla
@@ -1,13 +1,13 @@
 This is the debugger.html project output.
 See https://github.com/devtools-html/debugger.html
 
-Version 60
+Version 61
 
-Comparison: https://github.com/devtools-html/debugger.html/compare/release-59...release-60
+Comparison: https://github.com/devtools-html/debugger.html/compare/release-60...release-61
 
 Packages:
 - babel-plugin-transform-es2015-modules-commonjs @6.26.2
 - babel-preset-react @6.24.1
 - react @16.2.0
 - react-dom @16.2.0
 - webpack @3.11.0
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -2112,16 +2112,20 @@ menuseparator {
   color: var(--string-color);
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
   font-size: 0.8em;
   padding: 0 2px;
 }
 
+.objectBox-node.clickable {
+  cursor: pointer;
+}
+
 /******************************************************************************/
 
 .objectBox-event,
 .objectBox-eventLog,
 .objectBox-regexp,
 .objectBox-object {
   color: var(--object-color);
   white-space: pre-wrap;
@@ -2218,16 +2222,17 @@ menuseparator {
 
 button.open-inspector {
   mask: url("chrome://devtools/skin/images/devtools-reps/open-inspector.svg") no-repeat;
   display: inline-block;
   background-color: var(--comment-node-color);
   height: 16px;
   margin-left: 0.25em;
   vertical-align: middle;
+  cursor: pointer;
 }
 
 .objectBox-node:hover .open-inspector,
 .objectBox-textNode:hover .open-inspector,
 .open-inspector:hover {
   background-color: var(--theme-highlight-blue);
 }
 
--- a/devtools/client/debugger/new/dist/parser-worker.js
+++ b/devtools/client/debugger/new/dist/parser-worker.js
@@ -1217,17 +1217,17 @@ function isAwaitExpression(path) {
 }
 
 function isYieldExpression(path) {
   const { node, parent } = path;
   return t.isYieldExpression(node) || t.isYieldExpression(parent.init) || t.isYieldExpression(parent);
 }
 
 function isObjectShorthand(parent) {
-  return t.isObjectProperty(parent) && parent.key.start == parent.value.start && parent.key.loc.identifierName === parent.value.loc.identifierName;
+  return t.isObjectProperty(parent) && parent.value && parent.key.start == parent.value.start && parent.key.loc.identifierName === parent.value.loc.identifierName;
 }
 
 function getObjectExpressionValue(node) {
   const { value } = node;
 
   if (t.isIdentifier(value)) {
     return value.name;
   }
--- a/devtools/client/debugger/new/dist/vendors.js
+++ b/devtools/client/debugger/new/dist/vendors.js
@@ -8169,17 +8169,17 @@ var _Svg2 = _interopRequireDefault(_Svg)
 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; } }
 
 // We cannot directly export literals containing special characters
 // (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 !!!
-const vendored = {
+const vendored = exports.vendored = {
   classnames: _classnames2.default,
   "devtools-components": devtoolsComponents,
   "devtools-config": devtoolsConfig,
   "devtools-contextmenu": devtoolsContextmenu,
   "devtools-environment": devtoolsEnvironment,
   "devtools-modules": devtoolsModules,
   "devtools-splitter": _devtoolsSplitter2.default,
   "devtools-utils": devtoolsUtils,
@@ -8205,17 +8205,16 @@ const vendored = {
  * same way:
  * - always with destructuring (import { a } from "modA";)
  * - always without destructuring (import modB from "modB")
  *
  * Both are fine, but cannot be mixed for the same module.
  */
 
 // Modules imported with destructuring
-exports.vendored = vendored;
 
 /***/ }),
 
 /***/ 4:
 /***/ (function(module, exports) {
 
 module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
 
--- a/devtools/client/debugger/new/src/actions/pause/extra.js
+++ b/devtools/client/debugger/new/src/actions/pause/extra.js
@@ -86,15 +86,15 @@ function getExtra(expression, result) {
     dispatch,
     getState,
     client,
     sourceMaps
   }) => {
     const selectedFrame = (0, _selectors.getSelectedFrame)(getState());
 
     if (!selectedFrame) {
-      return;
+      return {};
     }
 
     const extra = await getExtraProps(getState, expression, result, expr => client.evaluateInFrame(expr, selectedFrame.id));
     return extra;
   };
 }
\ No newline at end of file
--- a/devtools/client/debugger/new/src/client/index.js
+++ b/devtools/client/debugger/new/src/client/index.js
@@ -1,14 +1,14 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.onConnect = undefined;
+exports.onConnect = onConnect;
 
 var _firefox = require("./firefox");
 
 var firefox = _interopRequireWildcard(_firefox);
 
 var _prefs = require("../utils/prefs");
 
 var _dbg = require("../utils/dbg");
@@ -63,11 +63,9 @@ async function onConnect(connection, {
   });
   (0, _bootstrap.bootstrapApp)(store);
   return {
     store,
     actions,
     selectors,
     client: commands
   };
-}
-
-exports.onConnect = onConnect;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/components/Editor/Preview/Popup.js
+++ b/devtools/client/debugger/new/src/components/Editor/Preview/Popup.js
@@ -232,17 +232,17 @@ class Popup extends _react.Component {
 
     let header = null;
 
     if ((0, _preview.isImmutable)(this.getObjectProperties())) {
       header = this.renderImmutable(extra.immutable);
       roots = roots.filter(r => r.type != NODE_TYPES.PROTOTYPE);
     }
 
-    if ((0, _preview.isReactComponent)(this.getObjectProperties())) {
+    if (extra.react && (0, _preview.isReactComponent)(this.getObjectProperties())) {
       header = this.renderReact(extra.react);
       roots = roots.filter(r => ["state", "props"].includes(r.name));
     }
 
     return _react2.default.createElement("div", {
       className: "preview-popup"
     }, header, this.renderObjectInspector(roots));
   }
--- a/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
+++ b/devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js
@@ -119,157 +119,166 @@ class SourcesTree extends _react.Compone
         debuggeeUrl,
         projectRoot,
         uncollapsedTree,
         sourceTree
       }));
     }
   }
 
+  // NOTE: we get the source from sources because item.contents is cached
+  getSource(item) {
+    return this.props.sources.get(item.contents.id);
+  }
+
+  isEmpty() {
+    const {
+      sourceTree
+    } = this.state;
+    return sourceTree.contents.length === 0;
+  }
+
   renderItemName(name) {
     const hosts = {
       "ng://": "Angular",
       "webpack://": "Webpack",
       "moz-extension://": L10N.getStr("extensionsText")
     };
     return hosts[name] || name;
   }
 
   renderEmptyElement(message) {
     return _react2.default.createElement("div", {
+      key: "empty",
       className: "no-sources-message"
     }, message);
   }
 
-  render() {
+  renderProjectRootHeader() {
     const {
-      expanded,
       projectRoot
     } = this.props;
     const {
-      focusedItem,
-      highlightItems,
-      listItems,
-      parentMap,
       sourceTree
     } = this.state;
 
-    const onExpand = (item, expandedState) => {
-      this.props.setExpandedState(expandedState);
-    };
-
-    const onCollapse = (item, expandedState) => {
-      this.props.setExpandedState(expandedState);
-    };
-
-    const isEmpty = sourceTree.contents.length === 0;
-    const isCustomRoot = projectRoot !== "";
-
-    let roots = () => sourceTree.contents;
-
-    let clearProjectRootButton = null; // The "sourceTree.contents[0]" check ensures that there are contents
-    // A custom root with no existing sources will be ignored
-
-    if (isCustomRoot) {
-      const sourceContents = sourceTree.contents[0];
-      let rootLabel = projectRoot.split("/").pop();
+    if (!projectRoot) {
+      return null;
+    }
 
-      roots = () => sourceContents.contents;
-
-      if (sourceContents && sourceContents.name !== rootLabel) {
-        rootLabel = sourceContents.contents[0].name;
-
-        roots = () => sourceContents.contents[0].contents;
-      }
+    const sourceContents = sourceTree.contents[0];
+    let rootLabel = projectRoot.split("/").pop();
 
-      clearProjectRootButton = _react2.default.createElement("button", {
-        className: "sources-clear-root",
-        onClick: () => this.props.clearProjectDirectoryRoot(),
-        title: L10N.getStr("removeDirectoryRoot.label")
-      }, _react2.default.createElement(_Svg2.default, {
-        name: "home"
-      }), _react2.default.createElement(_Svg2.default, {
-        name: "breadcrumb",
-        "class": true
-      }), _react2.default.createElement("span", {
-        className: "sources-clear-root-label"
-      }, rootLabel));
+    if (sourceContents && sourceContents.name !== rootLabel) {
+      rootLabel = sourceContents.contents[0].name;
     }
 
-    if (isEmpty && !isCustomRoot) {
-      return this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailable"));
-    }
+    return _react2.default.createElement("div", {
+      key: "root",
+      className: "sources-clear-root-container"
+    }, _react2.default.createElement("button", {
+      className: "sources-clear-root",
+      onClick: () => this.props.clearProjectDirectoryRoot(),
+      title: L10N.getStr("removeDirectoryRoot.label")
+    }, _react2.default.createElement(_Svg2.default, {
+      name: "home"
+    }), _react2.default.createElement(_Svg2.default, {
+      name: "breadcrumb",
+      "class": true
+    }), _react2.default.createElement("span", {
+      className: "sources-clear-root-label"
+    }, rootLabel)));
+  }
 
+  renderTree() {
+    const {
+      expanded
+    } = this.props;
+    const {
+      highlightItems,
+      listItems,
+      parentMap
+    } = this.state;
     const treeProps = {
       autoExpandAll: false,
       autoExpandDepth: expanded ? 0 : 1,
       expanded,
       getChildren: item => (0, _sourcesTree.nodeHasChildren)(item) ? item.contents : [],
       getParent: item => parentMap.get(item),
       getPath: this.getPath,
-      getRoots: roots,
+      getRoots: this.getRoots,
       highlightItems,
       itemHeight: 21,
-      key: isEmpty ? "empty" : "full",
+      key: this.isEmpty() ? "empty" : "full",
       listItems,
-      onCollapse,
-      onExpand,
+      onCollapse: this.onCollapse,
+      onExpand: this.onExpand,
       onFocus: this.focusItem,
       renderItem: this.renderItem
     };
-
-    const tree = _react2.default.createElement(_ManagedTree2.default, treeProps);
+    return _react2.default.createElement(_ManagedTree2.default, treeProps);
+  }
 
-    const onKeyDown = e => {
-      if (e.keyCode === 13 && focusedItem) {
-        this.selectItem(focusedItem);
-      }
-    };
-
+  renderPane(...children) {
+    const {
+      projectRoot
+    } = this.props;
     return _react2.default.createElement("div", {
+      key: "pane",
       className: (0, _classnames2.default)("sources-pane", {
-        "sources-list-custom-root": isCustomRoot
+        "sources-list-custom-root": projectRoot
       })
-    }, isCustomRoot ? _react2.default.createElement("div", {
-      className: "sources-clear-root-container"
-    }, clearProjectRootButton) : null, isEmpty ? this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailableRoot")) : _react2.default.createElement("div", {
+    }, children);
+  }
+
+  render() {
+    const {
+      projectRoot
+    } = this.props;
+
+    if (this.isEmpty()) {
+      if (projectRoot) {
+        return this.renderPane(this.renderProjectRootHeader(), this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailableRoot")));
+      }
+
+      return this.renderPane(this.renderEmptyElement(L10N.getStr("sources.noSourcesAvailable")));
+    }
+
+    return this.renderPane(this.renderProjectRootHeader(), _react2.default.createElement("div", {
+      key: "tree",
       className: "sources-list",
-      onKeyDown: onKeyDown
-    }, tree));
+      onKeyDown: this.onKeyDown
+    }, this.renderTree()));
   }
 
 }
 
 var _initialiseProps = function () {
   this.focusItem = item => {
     this.setState({
       focusedItem: item
     });
   };
 
   this.selectItem = item => {
-    if (!(0, _sourcesTree.nodeHasChildren)(item)) {
-      this.props.selectLocation({
-        sourceId: item.contents.get("id")
-      });
+    if (!(0, _sourcesTree.isDirectory)(item)) {
+      this.props.selectSource(item.contents.id);
     }
   };
 
   this.getPath = item => {
-    const {
-      sources
-    } = this.props;
-    const obj = item.contents.get && item.contents.get("id");
-    let blackBoxedPart = "";
+    const path = `${item.path}/${item.name}`;
 
-    if (typeof obj !== "undefined" && sources.has(obj) && sources.get(obj).get("isBlackBoxed")) {
-      blackBoxedPart = "update";
+    if ((0, _sourcesTree.isDirectory)(item)) {
+      return path;
     }
 
-    return `${item.path}/${item.name}/${blackBoxedPart}`;
+    const source = this.getSource(item);
+    const blackBoxedPart = source.isBlackBoxed ? ":blackboxed" : "";
+    return `${path}${blackBoxedPart}`;
   };
 
   this.getIcon = (sources, item, depth) => {
     const {
       debuggeeUrl,
       projectRoot
     } = this.props;
 
@@ -290,48 +299,45 @@ var _initialiseProps = function () {
     if (depth === 0 && projectRoot === "") {
       return _react2.default.createElement("img", {
         className: (0, _classnames2.default)("domain", {
           debuggee: debuggeeUrl && debuggeeUrl.includes(item.name)
         })
       });
     }
 
-    if (!(0, _sourcesTree.nodeHasChildren)(item)) {
-      const obj = item.contents.get("id");
-      const source = sources.get(obj);
-      const className = (0, _classnames2.default)((0, _source.getSourceClassnames)(source), "source-icon");
+    if ((0, _sourcesTree.isDirectory)(item)) {
       return _react2.default.createElement("img", {
-        className: className
+        className: "folder"
       });
     }
 
+    const source = this.getSource(item);
     return _react2.default.createElement("img", {
-      className: "folder"
+      className: (0, _classnames2.default)((0, _source.getSourceClassnames)(source), "source-icon")
     });
   };
 
   this.onContextMenu = (event, item) => {
     const copySourceUri2Label = L10N.getStr("copySourceUri2");
     const copySourceUri2Key = L10N.getStr("copySourceUri2.accesskey");
     const setDirectoryRootLabel = L10N.getStr("setDirectoryRoot.label");
     const setDirectoryRootKey = L10N.getStr("setDirectoryRoot.accesskey");
     const removeDirectoryRootLabel = L10N.getStr("removeDirectoryRoot.label");
     event.stopPropagation();
     event.preventDefault();
     const menuOptions = [];
 
     if (!(0, _sourcesTree.isDirectory)(item)) {
-      const source = item.contents.get("url");
       const copySourceUri2 = {
         id: "node-menu-copy-source",
         label: copySourceUri2Label,
         accesskey: copySourceUri2Key,
         disabled: false,
-        click: () => (0, _clipboard.copyToTheClipboard)(source)
+        click: () => (0, _clipboard.copyToTheClipboard)(item.contents.url)
       };
       menuOptions.push(copySourceUri2);
     }
 
     if ((0, _sourcesTree.isDirectory)(item) && _prefs.features.root) {
       const {
         path
       } = item;
@@ -355,16 +361,34 @@ var _initialiseProps = function () {
           click: () => this.props.setProjectDirectoryRoot(path)
         });
       }
     }
 
     (0, _devtoolsContextmenu.showMenu)(event, menuOptions);
   };
 
+  this.onExpand = (item, expandedState) => {
+    this.props.setExpandedState(expandedState);
+  };
+
+  this.onCollapse = (item, expandedState) => {
+    this.props.setExpandedState(expandedState);
+  };
+
+  this.onKeyDown = e => {
+    const {
+      focusedItem
+    } = this.state;
+
+    if (e.keyCode === 13 && focusedItem) {
+      this.selectItem(focusedItem);
+    }
+  };
+
   this.renderItem = (item, depth, focused, _, expanded, {
     setExpanded
   }) => {
     const arrow = (0, _sourcesTree.nodeHasChildren)(item) ? _react2.default.createElement("img", {
       className: (0, _classnames2.default)("arrow", {
         expanded: expanded
       })
     }) : _react2.default.createElement("i", {
@@ -388,28 +412,50 @@ var _initialiseProps = function () {
           this.selectItem(item);
         }
       },
       onContextMenu: e => this.onContextMenu(e, item)
     }, arrow, icon, _react2.default.createElement("span", {
       className: "label"
     }, " ", this.renderItemName(item.name), " "));
   };
+
+  this.getRoots = () => {
+    const {
+      projectRoot
+    } = this.props;
+    const {
+      sourceTree
+    } = this.state;
+    const sourceContents = sourceTree.contents[0];
+    const rootLabel = projectRoot.split("/").pop(); // The "sourceTree.contents[0]" check ensures that there are contents
+    // A custom root with no existing sources will be ignored
+
+    if (projectRoot) {
+      if (sourceContents && sourceContents.name !== rootLabel) {
+        return sourceContents.contents[0].contents;
+      }
+
+      return sourceContents.contents;
+    }
+
+    return sourceTree.contents;
+  };
 };
 
 const mapStateToProps = state => {
   return {
     shownSource: (0, _selectors.getShownSource)(state),
     selectedSource: (0, _selectors.getSelectedSource)(state),
     debuggeeUrl: (0, _selectors.getDebuggeeUrl)(state),
     expanded: (0, _selectors.getExpandedState)(state),
     projectRoot: (0, _selectors.getProjectDirectoryRoot)(state),
     sources: (0, _selectors.getSources)(state)
   };
 };
 
 const actionCreators = {
   setExpandedState: _sourceTree.setExpandedState,
-  selectLocation: _sources.selectLocation,
+  selectSource: _sources.selectSource,
   setProjectDirectoryRoot: _ui.setProjectDirectoryRoot,
   clearProjectDirectoryRoot: _ui.clearProjectDirectoryRoot
 };
 exports.default = (0, _reactRedux.connect)(mapStateToProps, actionCreators)(SourcesTree);
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/editor/source-documents.js
+++ b/devtools/client/debugger/new/src/utils/editor/source-documents.js
@@ -1,14 +1,24 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showLoading = exports.showErrorMessage = exports.showSourceText = exports.clearEditor = exports.updateDocument = exports.updateLineNumberFormat = exports.clearDocuments = exports.removeDocument = exports.hasDocument = exports.setDocument = exports.getDocument = undefined;
+exports.getDocument = getDocument;
+exports.hasDocument = hasDocument;
+exports.setDocument = setDocument;
+exports.removeDocument = removeDocument;
+exports.clearDocuments = clearDocuments;
+exports.updateLineNumberFormat = updateLineNumberFormat;
+exports.updateDocument = updateDocument;
+exports.clearEditor = clearEditor;
+exports.showLoading = showLoading;
+exports.showErrorMessage = showErrorMessage;
+exports.showSourceText = showSourceText;
 
 var _source = require("../source");
 
 var _wasm = require("../wasm");
 
 var _ui = require("../ui");
 
 var _sourceEditor = require("devtools/client/sourceeditor/editor");
@@ -163,21 +173,9 @@ function showSourceText(editor, source, 
   }
 
   const doc = editor.createDocument();
   setDocument(source.id, doc);
   editor.replaceDocument(doc);
   setEditorText(editor, source);
   editor.setMode((0, _source.getMode)(source, symbols));
   updateLineNumberFormat(editor, source.id);
-}
-
-exports.getDocument = getDocument;
-exports.setDocument = setDocument;
-exports.hasDocument = hasDocument;
-exports.removeDocument = removeDocument;
-exports.clearDocuments = clearDocuments;
-exports.updateLineNumberFormat = updateLineNumberFormat;
-exports.updateDocument = updateDocument;
-exports.clearEditor = clearEditor;
-exports.showSourceText = showSourceText;
-exports.showErrorMessage = showErrorMessage;
-exports.showLoading = showLoading;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/path.js
+++ b/devtools/client/debugger/new/src/utils/path.js
@@ -1,13 +1,18 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.basename = basename;
+exports.dirname = dirname;
+exports.isURL = isURL;
+exports.isAbsolute = isAbsolute;
+exports.join = join;
 
 /* 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 basename(path) {
   return path.split("/").pop();
 }
 
@@ -21,15 +26,9 @@ function isURL(str) {
 }
 
 function isAbsolute(str) {
   return str[0] === "/";
 }
 
 function join(base, dir) {
   return `${base}/${dir}`;
-}
-
-exports.basename = basename;
-exports.dirname = dirname;
-exports.isURL = isURL;
-exports.isAbsolute = isAbsolute;
-exports.join = join;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/result-list.js
+++ b/devtools/client/debugger/new/src/utils/result-list.js
@@ -1,14 +1,14 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.scrollList = undefined;
+exports.scrollList = scrollList;
 
 var _devtoolsEnvironment = require("devtools/client/debugger/new/dist/vendors").vendored["devtools-environment"];
 
 var _Modal = require("../components/shared/Modal");
 
 /* 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/>. */
@@ -48,11 +48,9 @@ function chromeScrollList(elem, index) {
 
   const resultsHeight = resultsEl.clientHeight;
   const itemHeight = resultsEl.children[0].clientHeight;
   const numVisible = resultsHeight / itemHeight;
   const positionsToScroll = index - numVisible + 1;
   const itemOffset = resultsHeight % itemHeight;
   const scroll = positionsToScroll * (itemHeight + 2) + itemOffset;
   resultsEl.scrollTop = Math.max(0, scroll);
-}
-
-exports.scrollList = scrollList;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/source.js
+++ b/devtools/client/debugger/new/src/utils/source.js
@@ -421,27 +421,22 @@ function isLoaded(source) {
   return source.get("loadedState") === "loaded";
 }
 
 function isLoading(source) {
   return source.get("loadedState") === "loading";
 }
 
 function getTextAtPosition(source, location) {
-  if (!source || !source.text) {
+  if (!source || !source.text || source.isWasm) {
     return "";
   }
 
   const line = location.line;
   const column = location.column || 0;
-
-  if (source.isWasm) {
-    return "";
-  }
-
   const lineText = source.text.split("\n")[line - 1];
 
   if (!lineText) {
     return "";
   }
 
   return lineText.slice(column, column + 100).trim();
 }
@@ -461,10 +456,10 @@ function getSourceClassnames(source, sou
   if (isPretty(source)) {
     return "prettyPrint";
   }
 
   if (source.isBlackBoxed) {
     return "blackBox";
   }
 
-  return sourceTypes[(0, _sourcesTree.getExtension)(source.url)] || defaultClassName;
+  return sourceTypes[(0, _sourcesTree.getFileExtension)(source.url)] || defaultClassName;
 }
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/sources-tree/addToTree.js
+++ b/devtools/client/debugger/new/src/utils/sources-tree/addToTree.js
@@ -124,17 +124,17 @@ function addSourceToNode(node, url, sour
 }
 /**
  * @memberof utils/sources-tree
  * @static
  */
 
 
 function addToTree(tree, source, debuggeeUrl, projectRoot) {
-  const url = (0, _getURL.getURL)(source.get("url"), debuggeeUrl);
+  const url = (0, _getURL.getURL)(source.get ? source.get("url") : source.url, debuggeeUrl);
   const debuggeeHost = (0, _treeOrder.getDomain)(debuggeeUrl);
 
   if ((0, _utils.isInvalidUrl)(url, source) || !isUnderRoot(url, projectRoot)) {
     return;
   }
 
   const finalNode = traverseTree(url, tree, debuggeeHost, projectRoot);
   finalNode.contents = addSourceToNode(finalNode, url, source);
--- a/devtools/client/debugger/new/src/utils/sources-tree/index.js
+++ b/devtools/client/debugger/new/src/utils/sources-tree/index.js
@@ -97,16 +97,22 @@ Object.defineProperty(exports, "createNo
   }
 });
 Object.defineProperty(exports, "createParentMap", {
   enumerable: true,
   get: function () {
     return _utils.createParentMap;
   }
 });
+Object.defineProperty(exports, "getFileExtension", {
+  enumerable: true,
+  get: function () {
+    return _utils.getFileExtension;
+  }
+});
 Object.defineProperty(exports, "getRelativePath", {
   enumerable: true,
   get: function () {
     return _utils.getRelativePath;
   }
 });
 Object.defineProperty(exports, "isDirectory", {
   enumerable: true,
@@ -126,15 +132,9 @@ Object.defineProperty(exports, "isNotJav
     return _utils.isNotJavaScript;
   }
 });
 Object.defineProperty(exports, "nodeHasChildren", {
   enumerable: true,
   get: function () {
     return _utils.nodeHasChildren;
   }
-});
-Object.defineProperty(exports, "getExtension", {
-  enumerable: true,
-  get: function () {
-    return _utils.getExtension;
-  }
 });
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/sources-tree/utils.js
+++ b/devtools/client/debugger/new/src/utils/sources-tree/utils.js
@@ -1,17 +1,17 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nodeHasChildren = nodeHasChildren;
 exports.isExactUrlMatch = isExactUrlMatch;
 exports.isDirectory = isDirectory;
-exports.getExtension = getExtension;
+exports.getFileExtension = getFileExtension;
 exports.isNotJavaScript = isNotJavaScript;
 exports.isInvalidUrl = isInvalidUrl;
 exports.partIsFile = partIsFile;
 exports.createNode = createNode;
 exports.createParentMap = createParentMap;
 exports.getRelativePath = getRelativePath;
 
 var _url = require("devtools/client/debugger/new/dist/vendors").vendored["url"];
@@ -42,32 +42,32 @@ function isExactUrlMatch(pathPart, debug
 
 function isDirectory(url) {
   const parts = url.path.split("/").filter(p => p !== ""); // Assume that all urls point to files except when they end with '/'
   // Or directory node has children
 
   return (parts.length === 0 || url.path.slice(-1) === "/" || nodeHasChildren(url)) && url.name != "(index)";
 }
 
-function getExtension(url = "") {
+function getFileExtension(url = "") {
   const parsedUrl = (0, _url.parse)(url).pathname;
 
   if (!parsedUrl) {
     return "";
   }
 
   return parsedUrl.split(".").pop();
 }
 
 function isNotJavaScript(source) {
-  return ["css", "svg", "png"].includes(getExtension(source.url));
+  return ["css", "svg", "png"].includes(getFileExtension(source.url));
 }
 
 function isInvalidUrl(url, source) {
-  return IGNORED_URLS.indexOf(url) != -1 || !source.get("url") || !url.group || (0, _source.isPretty)(source) || isNotJavaScript(source);
+  return IGNORED_URLS.indexOf(url) != -1 || !(source.get ? source.get("url") : source.url) || !url.group || (0, _source.isPretty)(source) || isNotJavaScript(source);
 }
 
 function partIsFile(index, parts, url) {
   const isLastPart = index === parts.length - 1;
   return !isDirectory(url) && isLastPart;
 }
 
 function createNode(name, path, contents) {
--- a/devtools/client/debugger/new/src/utils/task.js
+++ b/devtools/client/debugger/new/src/utils/task.js
@@ -10,17 +10,17 @@ Object.defineProperty(exports, "__esModu
 
 /* 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/>. */
 
 /**
  * This object provides the public module functions.
  */
-const Task = {
+const Task = exports.Task = {
   // XXX: Not sure if this works in all cases...
   async: function (task) {
     return function () {
       return Task.spawn(task, this, arguments);
     };
   },
 
   /**
@@ -44,10 +44,9 @@ const Task = {
           reject(error);
           iterator.throw(error);
         });
       };
 
       callNext(undefined);
     });
   }
-};
-exports.Task = Task;
\ No newline at end of file
+};
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/text.js
+++ b/devtools/client/debugger/new/src/utils/text.js
@@ -1,14 +1,15 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.truncateMiddleText = exports.formatKeyShortcut = undefined;
+exports.formatKeyShortcut = formatKeyShortcut;
+exports.truncateMiddleText = truncateMiddleText;
 
 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/>. */
 
 /**
@@ -54,12 +55,9 @@ function formatKeyShortcut(shortcut) {
 function truncateMiddleText(sourceText, maxLength) {
   let truncatedText = sourceText;
 
   if (sourceText.length > maxLength) {
     truncatedText = `${sourceText.substring(0, Math.round(maxLength / 2) - 2)}...${sourceText.substring(sourceText.length - Math.round(maxLength / 2 - 1))}`;
   }
 
   return truncatedText;
-}
-
-exports.formatKeyShortcut = formatKeyShortcut;
-exports.truncateMiddleText = truncateMiddleText;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/utils.js
+++ b/devtools/client/debugger/new/src/utils/utils.js
@@ -1,13 +1,17 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.handleError = handleError;
+exports.promisify = promisify;
+exports.endTruncateStr = endTruncateStr;
+exports.waitForMs = waitForMs;
 
 /* 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/>. */
 
 /**
  * Utils for utils, by utils
  * @module utils/utils
@@ -49,14 +53,9 @@ function endTruncateStr(str, size) {
     return `...${str.slice(str.length - size)}`;
   }
 
   return str;
 }
 
 function waitForMs(ms) {
   return new Promise(resolve => setTimeout(resolve, ms));
-}
-
-exports.handleError = handleError;
-exports.promisify = promisify;
-exports.endTruncateStr = endTruncateStr;
-exports.waitForMs = waitForMs;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/utils/wasm.js
+++ b/devtools/client/debugger/new/src/utils/wasm.js
@@ -1,14 +1,20 @@
 "use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderWasmText = exports.clearWasmStates = exports.wasmOffsetToLine = exports.lineToWasmOffset = exports.isWasm = exports.getWasmLineNumberFormatter = exports.getWasmText = undefined;
+exports.getWasmText = getWasmText;
+exports.getWasmLineNumberFormatter = getWasmLineNumberFormatter;
+exports.isWasm = isWasm;
+exports.lineToWasmOffset = lineToWasmOffset;
+exports.wasmOffsetToLine = wasmOffsetToLine;
+exports.clearWasmStates = clearWasmStates;
+exports.renderWasmText = renderWasmText;
 
 var _WasmParser = require("devtools/client/shared/vendor/WasmParser");
 
 var _WasmDis = require("devtools/client/shared/vendor/WasmDis");
 
 /* 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/>. */
@@ -174,17 +180,9 @@ function renderWasmText(sourceId, {
   const MAX_LINES = 1000000;
 
   if (lines.length > MAX_LINES) {
     lines.splice(MAX_LINES, lines.length - MAX_LINES);
     lines.push(";; .... text is truncated due to the size");
   }
 
   return lines;
-}
-
-exports.getWasmText = getWasmText;
-exports.getWasmLineNumberFormatter = getWasmLineNumberFormatter;
-exports.isWasm = isWasm;
-exports.lineToWasmOffset = lineToWasmOffset;
-exports.wasmOffsetToLine = wasmOffsetToLine;
-exports.clearWasmStates = clearWasmStates;
-exports.renderWasmText = renderWasmText;
\ No newline at end of file
+}
\ No newline at end of file
--- a/devtools/client/debugger/new/src/workers/parser/utils/helpers.js
+++ b/devtools/client/debugger/new/src/workers/parser/utils/helpers.js
@@ -51,17 +51,17 @@ function isYieldExpression(path) {
   const {
     node,
     parent
   } = path;
   return t.isYieldExpression(node) || t.isYieldExpression(parent.init) || t.isYieldExpression(parent);
 }
 
 function isObjectShorthand(parent) {
-  return t.isObjectProperty(parent) && parent.key.start == parent.value.start && parent.key.loc.identifierName === parent.value.loc.identifierName;
+  return t.isObjectProperty(parent) && parent.value && parent.key.start == parent.value.start && parent.key.loc.identifierName === parent.value.loc.identifierName;
 }
 
 function getObjectExpressionValue(node) {
   const {
     value
   } = node;
 
   if (t.isIdentifier(value)) {
--- a/devtools/client/shared/components/reps/reps.css
+++ b/devtools/client/shared/components/reps/reps.css
@@ -221,16 +221,20 @@ html[dir="rtl"] .tree-node img.arrow {
   color: var(--string-color);
   border-width: 1px;
   border-style: solid;
   border-radius: 2px;
   font-size: 0.8em;
   padding: 0 2px;
 }
 
+.objectBox-node.clickable {
+  cursor: pointer;
+}
+
 /******************************************************************************/
 
 .objectBox-event,
 .objectBox-eventLog,
 .objectBox-regexp,
 .objectBox-object {
   color: var(--object-color);
   white-space: pre-wrap;
@@ -327,16 +331,17 @@ html[dir="rtl"] .tree-node img.arrow {
 
 button.open-inspector {
   mask: url("chrome://devtools/skin/images/devtools-reps/open-inspector.svg") no-repeat;
   display: inline-block;
   background-color: var(--comment-node-color);
   height: 16px;
   margin-left: 0.25em;
   vertical-align: middle;
+  cursor: pointer;
 }
 
 .objectBox-node:hover .open-inspector,
 .objectBox-textNode:hover .open-inspector,
 .open-inspector:hover {
   background-color: var(--theme-highlight-blue);
 }
 
--- a/devtools/client/shared/components/reps/reps.js
+++ b/devtools/client/shared/components/reps/reps.js
@@ -5675,17 +5675,18 @@ function ElementNode(props) {
   const baseConfig = {
     "data-link-actor-id": object.actor,
     className: "objectBox objectBox-node"
   };
   let inspectIcon;
   if (isInTree) {
     if (onDOMNodeClick) {
       Object.assign(baseConfig, {
-        onClick: _ => onDOMNodeClick(object)
+        onClick: _ => onDOMNodeClick(object),
+        className: `${baseConfig.className} clickable`
       });
     }
 
     if (onDOMNodeMouseOver) {
       Object.assign(baseConfig, {
         onMouseOver: _ => onDOMNodeMouseOver(object)
       });
     }