Bug 1466062 - Update Debugger Frontend v62. r=jdescottes

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

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

@@ -1759,6 +1759,37 @@ menuseparator {
 .function-signature .comma {
   color: var(--object-color);
 }
+.source-icon {
+  position: relative;
+  background-color: var(--theme-comment);
+  mask-size: 100%;
+  display: inline-block;
+  margin-inline-end: 5px;
+}
+
+.source-icon,
+.source-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
+.source-icon.prettyPrint {
+  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
+  mask-size: 100%;
+  background: var(--theme-highlight-blue);
+  fill: var(--theme-textbox-box-shadow);
+}
+
+.source-icon.blackBox {
+  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
+  mask-size: 100%;
+  background: var(--theme-highlight-blue);
+}
+
+.source-icon.react {
+  mask-size: 100%;
+  background: var(--theme-highlight-bluegrey);
+}
 /* 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/>. */
@@ -2902,37 +2933,6 @@ debug-expression-error {
   border-radius: 2px;
   margin: 0 -1px -1px -1px;
 }
-.source-icon {
-  position: relative;
-  background-color: var(--theme-comment);
-  mask-size: 100%;
-  display: inline-block;
-  margin-inline-end: 5px;
-}
-
-.source-icon,
-.source-icon svg {
-  width: 15px;
-  height: 15px;
-}
-
-.source-icon.prettyPrint {
-  mask: url("chrome://devtools/skin/images/debugger/prettyPrint.svg") no-repeat;
-  mask-size: 100%;
-  background: var(--theme-highlight-blue);
-  fill: var(--theme-textbox-box-shadow);
-}
-
-.source-icon.blackBox {
-  mask: url("chrome://devtools/skin/images/debugger/blackBox.svg") no-repeat;
-  mask-size: 100%;
-  background: var(--theme-highlight-blue);
-}
-
-.source-icon.react {
-  mask-size: 100%;
-  background: var(--theme-highlight-bluegrey);
-}
 /* 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/>. */

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

@@ -239,7 +239,7 @@ class Editor extends _react.PureComponent {
   }
 
   setupEditor() {
-    const editor = (0, _editor.createEditor)(); // disables the default search shortcuts
+    const editor = (0, _editor.getEditor)(); // disables the default search shortcuts
     // $FlowIgnore
 
     editor._initShortcuts = () => {};
@@ -284,7 +284,6 @@ class Editor extends _react.PureComponent {
     this.setState({
       editor
     });
-    (0, _editor.setEditor)(editor);
     return editor;
   }
 

devtools/client/debugger/new/src/components/PrimaryPanes/SourcesTree.js

@@ -16,6 +16,10 @@ var _devtoolsContextmenu = require("devtools/client/debugger/new/dist/vendors").
 
 var _reactRedux = require("devtools/client/shared/vendor/react-redux");
 
+var _SourceIcon = require("../shared/SourceIcon");
+
+var _SourceIcon2 = _interopRequireDefault(_SourceIcon);
+
 var _selectors = require("../../selectors/index");
 
 var _sourceTree = require("../../actions/source-tree");
@@ -311,8 +315,8 @@ var _initialiseProps = function () {
     }
 
     const source = this.getSource(item);
-    return _react2.default.createElement("img", {
-      className: (0, _classnames2.default)((0, _source.getSourceClassnames)(source), "source-icon")
+    return _react2.default.createElement(_SourceIcon2.default, {
+      source: source
     });
   };
 

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

@@ -138,16 +138,16 @@ class Breakpoint extends _react.PureComponent {
 
   highlightText() {
     const text = this.getBreakpointText();
-    const codeMirror = (0, _editor.getCodeMirror)();
+    const editor = (0, _editor.getEditor)();
 
-    if (!text || !codeMirror) {
+    if (!editor.CodeMirror) {
       return {
-        __html: ""
+        __html: text
       };
     }
 
     const node = document.createElement("div");
-    codeMirror.constructor.runMode(text, "application/javascript", node);
+    editor.CodeMirror.runMode(text, "application/javascript", node);
     return {
       __html: node.innerHTML
     };

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

@@ -81,7 +81,8 @@ class Breakpoints extends _react.Component {
       key: source.url,
       onClick: () => this.props.selectSource(source.id)
     }, _react2.default.createElement(_SourceIcon2.default, {
-      source: source
+      source: source,
+      shouldHide: icon => ["file", "javascript"].includes(icon)
     }), (0, _source.getFilename)(source)), ...breakpoints.map(breakpoint => _react2.default.createElement(_Breakpoint2.default, {
       breakpoint: breakpoint,
       source: source,

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

@@ -51,21 +51,7 @@ Object.keys(_ui).forEach(function (key) {
     }
   });
 });
-
-var _createEditor = require("./create-editor");
-
-Object.keys(_createEditor).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _createEditor[key];
-    }
-  });
-});
-exports.setEditor = setEditor;
 exports.getEditor = getEditor;
-exports.getCodeMirror = getCodeMirror;
 exports.removeEditor = removeEditor;
 exports.shouldShowPrettyPrint = shouldShowPrettyPrint;
 exports.shouldShowFooter = shouldShowFooter;
@@ -84,6 +70,8 @@ exports.clearLineClass = clearLineClass;
 exports.getTextForLine = getTextForLine;
 exports.getCursorLine = getCursorLine;
 
+var _createEditor = require("./create-editor");
+
 var _source = require("../source");
 
 var _wasm = require("../wasm");
@@ -96,16 +84,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 let editor;
 
-function setEditor(_editor) {
-  editor = _editor;
-}
-
 function getEditor() {
-  return editor;
-}
+  if (editor) {
+    return editor;
+  }
 
-function getCodeMirror() {
-  return editor && editor.codeMirror;
+  editor = (0, _createEditor.createEditor)();
+  return editor;
 }
 
 function removeEditor() {

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

@@ -75,6 +75,10 @@ class SourceEditor {
     return this.editor;
   }
 
+  get CodeMirror() {
+    return CodeMirror;
+  }
+
   setText(str) {
     this.editor.setValue(str);
   }

devtools/client/sourceeditor/editor.js

@@ -217,6 +217,15 @@ Editor.prototype = {
   config: null,
   Doc: null,
 
+  /**
+   * Exposes the CodeMirror class. We want to be able to
+   * invoke static commands such as runMode for syntax highlighting.
+   */
+  get CodeMirror() {
+    const codeMirror = editors.get(this);
+    return codeMirror && codeMirror.constructor;
+  },
+
   /**
    * Exposes the CodeMirror instance. We want to get away from trying to
    * abstract away the API entirely, and this makes it easier to integrate in