Syntax-highlight breakpoints (#5864)

Author: darkwing

src/components/SecondaryPanes/BreakpointItem.js

@@ -4,12 +4,16 @@
 
 // @flow
 import React, { Component } from "react";
+import ReactDOM from "react-dom";
 import classnames from "classnames";
 
 import CloseButton from "../shared/Button/Close";
 
+import { createEditor } from "../../utils/breakpoint";
 import { features } from "../../utils/prefs";
+
 import type { LocalBreakpoint } from "./Breakpoints";
+import type SourceEditor from "../../utils/editor/source-editor";
 
 type Props = {
   breakpoint: LocalBreakpoint,
@@ -30,6 +34,54 @@ function getBreakpointLocation(source, line, column) {
 }
 
 class BreakpointItem extends Component<Props> {
+  editor: SourceEditor;
+
+  componentDidMount() {
+    this.setupEditor();
+  }
+  componentDidUpdate() {
+    this.setupEditor();
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.destroy();
+    }
+  }
+
+  shouldComponentUpdate(nextProps: Props) {
+    const prevBreakpoint = this.props.breakpoint;
+    const nextBreakpoint = nextProps.breakpoint;
+
+    return (
+      !prevBreakpoint ||
+      (prevBreakpoint.text != nextBreakpoint.text ||
+        prevBreakpoint.disabled != nextBreakpoint.disabled ||
+        prevBreakpoint.condition != nextBreakpoint.condition ||
+        prevBreakpoint.hidden != nextBreakpoint.hidden ||
+        prevBreakpoint.isCurrentlyPaused != nextBreakpoint.isCurrentlyPaused)
+    );
+  }
+
+  setupEditor() {
+    const { breakpoint } = this.props;
+    this.editor = createEditor(breakpoint.text);
+
+    // disables the default search shortcuts
+    // $FlowIgnore
+    this.editor._initShortcuts = () => {};
+
+    const node = ReactDOM.findDOMNode(this);
+    if (node instanceof HTMLElement) {
+      const mountNode = node.querySelector(".breakpoint-label");
+      if (node instanceof HTMLElement) {
+        // $FlowIgnore
+        mountNode.innerHTML = "";
+        this.editor.appendToLocalElement(mountNode);
+      }
+    }
+  }
+
   render() {
     const {
       breakpoint,

src/components/SecondaryPanes/Breakpoints.css

@@ -74,6 +74,7 @@ html .breakpoints-list .breakpoint.paused {
   font-size: 11px;
   color: var(--theme-comment);
   padding-top: 3px;
+  padding-inline-end: 2px;
   min-width: 14px;
   text-align: right;
 }
@@ -94,6 +95,7 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
   max-width: calc(100% - var(--breakpoint-expression-right-clear-space));
   display: inline-block;
   padding-inline-start: 2px;
+  padding-inline-end: 8px;
   cursor: default;
   flex-grow: 1;
   text-overflow: ellipsis;
@@ -139,3 +141,27 @@ html[dir="rtl"] .breakpoints-list .breakpoint .breakpoint-line {
 .breakpoint:hover .close {
   visibility: visible;
 }
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-lines {
+  padding: 0;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-sizer {
+  min-width: initial !important;
+}
+
+.breakpoints-list .breakpoint.disabled .CodeMirror.cm-s-mozilla-breakpoint {
+  transition: opacity 0.5s linear;
+  opacity: 0.5;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-line span[role=presentation] {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline-block;
+}
+
+.CodeMirror.cm-s-mozilla-breakpoint .CodeMirror-code {
+  cursor: default;
+}

src/components/SecondaryPanes/Breakpoints.js

@@ -99,10 +99,10 @@ class Breakpoints extends Component<Props> {
     this.props.removeBreakpoint(breakpoint.location);
   }
 
-  renderBreakpoint(breakpoint, key) {
+  renderBreakpoint(breakpoint) {
     return (
       <BreakpointItem
-        key={key}
+        key={breakpoint.locationId}
         breakpoint={breakpoint}
         onClick={() => this.selectBreakpoint(breakpoint)}
         onContextMenu={e =>
@@ -133,8 +133,8 @@ class Breakpoints extends Component<Props> {
             {filename}
           </div>,
           ...groupedBreakpoints[filename]
-            .filter(bp => !bp.hidden)
-            .map((bp, i) => this.renderBreakpoint(bp, `${filename}-${i}`))
+            .filter(bp => !bp.hidden && bp.text)
+            .map((bp, i) => this.renderBreakpoint(bp))
         ];
       })
     ];

src/utils/breakpoint/create-editor.js

@@ -0,0 +1,25 @@
+/* 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/>. */
+
+// @flow
+
+import SourceEditor from "../editor/source-editor";
+
+export function createEditor(value: string) {
+  return new SourceEditor({
+    mode: "javascript",
+    foldGutter: false,
+    enableCodeFolding: false,
+    readOnly: "nocursor",
+    lineNumbers: false,
+    theme: "mozilla mozilla-breakpoint",
+    styleActiveLine: false,
+    lineWrapping: false,
+    matchBrackets: false,
+    showAnnotationRuler: false,
+    gutters: false,
+    value: value || "",
+    scrollbarStyle: null
+  });
+}

src/utils/breakpoint/index.js

@@ -8,6 +8,8 @@ import { getBreakpoint } from "../../selectors";
 import assert from "../assert";
 import { features } from "../prefs";
 
+export { createEditor } from "./create-editor";
+
 export { getASTLocation, findScopeByName } from "./astBreakpointLocation";
 
 import type {

webpack.config.js

@@ -57,6 +57,7 @@ function buildConfig(envConfig) {
 
     extra.excludeMap = {
       "./source-editor": "devtools/client/sourceeditor/editor",
+      "../editor/source-editor": "devtools/client/sourceeditor/editor",
       "./test-flag": "devtools/shared/flags",
       "./fronts-device": "devtools/shared/fronts/device",
       react: "devtools/client/shared/vendor/react",