Backed out changeset c18051672452 (bug 1887649) for causing dt failures in browser_dbg-breakpoints-cond-ui-state.js. CLOSED TREE

devtools/client/debugger/src/components/Editor/Breakpoints.css

@@ -95,16 +95,12 @@
   right: -16px;
 }
 
-.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg,
-/* Codemirror 6*/
-.cm6-gutter-breakpoint .breakpoint-marker.has-condition svg {
+.new-breakpoint.has-condition .CodeMirror-gutter-wrapper svg {
   fill: var(--breakpoint-condition-fill);
   stroke: var(--breakpoint-condition-stroke);
 }
 
-.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg,
-/* Codemirror 6*/
-.cm6-gutter-breakpoint .breakpoint-marker.has-log svg {
+.new-breakpoint.has-log .CodeMirror-gutter-wrapper svg {
   fill: var(--logpoint-fill);
   stroke: var(--logpoint-stroke);
 }

devtools/client/debugger/src/components/Editor/ConditionalPanel.css

@@ -37,8 +37,3 @@
   /* Match the color of the placeholder text to existing inputs in the Debugger */
   color: var(--theme-text-color-alt);
 }
-
-/* Removing the line padding for Codemirror 6 */
-.cm-line:has(div.conditional-breakpoint-panel) {
-  padding: 0;
-}

devtools/client/debugger/src/components/Editor/ConditionalPanel.js

@@ -11,8 +11,7 @@ import ReactDOM from "devtools/client/shared/vendor/react-dom";
 import PropTypes from "devtools/client/shared/vendor/react-prop-types";
 import { connect } from "devtools/client/shared/vendor/react-redux";
 import { toEditorLine } from "../../utils/editor/index";
-import { createEditor } from "../../utils/editor/create-editor";
-import { prefs, features } from "../../utils/prefs";
+import { prefs } from "../../utils/prefs";
 import actions from "../../actions/index";
 
 import {
@@ -22,7 +21,6 @@ import {
 } from "../../selectors/index";
 
 const classnames = require("resource://devtools/client/shared/classnames.js");
-const CONDITIONAL_BP_MARKER = "conditional-breakpoint-panel-marker";
 
 function addNewLine(doc) {
   const cursor = doc.getCursor();
@@ -51,7 +49,6 @@ export class ConditionalPanel extends PureComponent {
       log: PropTypes.bool.isRequired,
       openConditionalPanel: PropTypes.func.isRequired,
       setBreakpointOptions: PropTypes.func.isRequired,
-      selectedSource: PropTypes.object.isRequired,
     };
   }
 
@@ -114,53 +111,17 @@ export class ConditionalPanel extends PureComponent {
     }
   };
 
-  showConditionalPanel(prevProps) {
-    const { location, editor, breakpoint, selectedSource } = this.props;
-    // When breakpoint is removed
-    if (prevProps?.breakpoint && !breakpoint) {
-      editor.removeLineContentMarker(CONDITIONAL_BP_MARKER);
-      return;
-    }
-    if (selectedSource.id !== location.source.id) {
-      editor.removeLineContentMarker(CONDITIONAL_BP_MARKER);
-      return;
-    }
-    const editorLine = toEditorLine(location.source.id, location.line || 0);
-    editor.setLineContentMarker({
-      id: CONDITIONAL_BP_MARKER,
-      condition: line => line == editorLine,
-      createLineElementNode: () => {
-        // Create a Codemirror 5 editor for the breakpoint panel
-        // TODO: Switch to use Codemirror 6 version Bug 1890205
-        const breakpointPanelEditor = createEditor();
-        breakpointPanelEditor.appendToLocalElement(
-          document.createElement("div")
-        );
-        return this.renderConditionalPanel(this.props, breakpointPanelEditor);
-      },
-    });
-  }
-
   // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
   UNSAFE_componentWillMount() {
-    if (features.codemirrorNext) {
-      this.showConditionalPanel();
-    } else {
-      this.renderToWidget(this.props);
-    }
+    return this.renderToWidget(this.props);
   }
 
   // FIXME: https://bugzilla.mozilla.org/show_bug.cgi?id=1774507
   UNSAFE_componentWillUpdate() {
-    if (!features.codemirrorNext) {
-      this.clearConditionalPanel();
-    }
+    return this.clearConditionalPanel();
   }
 
-  componentDidUpdate(prevProps) {
-    if (features.codemirrorNext) {
-      this.showConditionalPanel(prevProps);
-    }
+  componentDidUpdate() {
     this.keepFocusOnInput();
   }
 
@@ -168,12 +129,7 @@ export class ConditionalPanel extends PureComponent {
     // This is called if CodeMirror is re-initializing itself before the
     // user closes the conditional panel. Clear the widget, and re-render it
     // as soon as this component gets remounted
-    const { editor } = this.props;
-    if (features.codemirrorNext) {
-      editor.removeLineContentMarker(CONDITIONAL_BP_MARKER);
-    } else {
-      this.clearConditionalPanel();
-    }
+    return this.clearConditionalPanel();
   }
 
   renderToWidget(props) {
@@ -185,7 +141,7 @@ export class ConditionalPanel extends PureComponent {
     const editorLine = toEditorLine(location.source.id, location.line || 0);
     this.cbPanel = editor.codeMirror.addLineWidget(
       editorLine,
-      this.renderConditionalPanel(props, editor),
+      this.renderConditionalPanel(props),
       {
         coverGutter: true,
         noHScroll: true,
@@ -212,8 +168,8 @@ export class ConditionalPanel extends PureComponent {
     }
   }
 
-  createEditor = (input, editor) => {
-    const { log, closeConditionalPanel } = this.props;
+  createEditor = input => {
+    const { log, editor, closeConditionalPanel } = this.props;
     const codeMirror = editor.CodeMirror.fromTextArea(input, {
       mode: "javascript",
       theme: "mozilla",
@@ -233,11 +189,8 @@ export class ConditionalPanel extends PureComponent {
 
     codeMirror.on("blur", (cm, e) => {
       if (
-        // if there is no actual element getting the focus or the focus is the conditional panel
-        // do not close the conditional panel
-        e?.relatedTarget == null ||
-        (e?.relatedTarget &&
-          e.relatedTarget.closest(".conditional-breakpoint-panel"))
+        e?.relatedTarget &&
+        e.relatedTarget.closest(".conditional-breakpoint-panel")
       ) {
         return;
       }
@@ -264,7 +217,7 @@ export class ConditionalPanel extends PureComponent {
     return log ? options.logValue : options.condition;
   }
 
-  renderConditionalPanel(props, editor) {
+  renderConditionalPanel(props) {
     const { log } = props;
     const defaultValue = this.getDefaultValue();
 
@@ -286,7 +239,7 @@ export class ConditionalPanel extends PureComponent {
         ),
         textarea({
           defaultValue,
-          ref: input => this.createEditor(input, editor),
+          ref: input => this.createEditor(input),
         })
       ),
       panel

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

@@ -283,7 +283,7 @@ class Editor extends PureComponent {
     }
   };
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps) {
     const {
       selectedSource,
       blackboxedRanges,
@@ -298,8 +298,30 @@ class Editor extends PureComponent {
 
     // Sets the breakables lines for codemirror 6
     if (features.codemirrorNext) {
+      const shouldUpdateBreakableLines =
+        prevProps.breakableLines.size !== this.props.breakableLines.size ||
+        prevProps.selectedSource?.id !== selectedSource.id;
+
       const isSourceWasm = isWasm(selectedSource.id);
-      function blackboxCondition(line) {
+
+      if (shouldUpdateBreakableLines) {
+        editor.setLineGutterMarkers([
+          {
+            id: "empty-line-marker",
+            lineClassName: "empty-line",
+            condition: line => {
+              const lineNumber = fromEditorLine(
+                selectedSource.id,
+                line,
+                isSourceWasm
+              );
+              return !breakableLines.has(lineNumber);
+            },
+          },
+        ]);
+      }
+
+      function condition(line) {
         const lineNumber = fromEditorLine(selectedSource.id, line);
 
         return isLineBlackboxed(
@@ -310,29 +332,16 @@ class Editor extends PureComponent {
       }
 
       editor.setLineGutterMarkers([
-        {
-          id: "empty-line-marker",
-          lineClassName: "empty-line",
-          condition: line => {
-            const lineNumber = fromEditorLine(
-              selectedSource.id,
-              line,
-              isSourceWasm
-            );
-            return !breakableLines.has(lineNumber);
-          },
-        },
         {
           id: "blackboxed-line-gutter-marker",
           lineClassName: "blackboxed-line",
-          condition: blackboxCondition,
+          condition,
         },
       ]);
-
       editor.setLineContentMarker({
         id: "blackboxed-line-marker",
         lineClassName: "blackboxed-line",
-        condition: blackboxCondition,
+        condition,
       });
     }
   }
@@ -815,13 +824,7 @@ class Editor extends PureComponent {
           editor,
         }),
         React.createElement(DebugLine, { editor, selectedSource }),
-        React.createElement(Exceptions, { editor }),
-        conditionalPanelLocation
-          ? React.createElement(ConditionalPanel, {
-              editor,
-              selectedSource,
-            })
-          : null
+        React.createElement(Exceptions, { editor })
       );
     }
 

devtools/client/shared/sourceeditor/editor.js

@@ -707,17 +707,10 @@ class Editor extends EventEmitter {
    */
   #lineContentMarkersExtension({ markers, domEventHandlers }) {
     const {
-      codemirrorView: { Decoration, ViewPlugin, WidgetType },
+      codemirrorView: { Decoration, ViewPlugin },
       codemirrorState: { RangeSetBuilder, RangeSet },
     } = this.#CodeMirror6;
 
-    class LineContentWidget extends WidgetType {
-      constructor(createElementNode) {
-        super();
-        this.toDOM = createElementNode;
-      }
-    }
-
     // Build and return the decoration set
     function buildDecorations(view) {
       if (!markers) {
@@ -727,20 +720,13 @@ class Editor extends EventEmitter {
       for (const { from, to } of view.visibleRanges) {
         for (let pos = from; pos <= to; ) {
           const line = view.state.doc.lineAt(pos);
-          for (const marker of markers) {
-            if (marker.condition(line.number)) {
-              if (marker.lineClassName) {
-                const classDecoration = Decoration.line({
-                  class: marker.lineClassName,
-                });
-                builder.add(line.from, line.from, classDecoration);
-              }
-              if (marker.createLineElementNode) {
-                const nodeDecoration = Decoration.widget({
-                  widget: new LineContentWidget(marker.createLineElementNode),
-                });
-                builder.add(line.to, line.to, nodeDecoration);
-              }
+          for (const { lineClassName, condition } of markers) {
+            if (condition(line.number)) {
+              builder.add(
+                line.from,
+                line.from,
+                Decoration.line({ class: lineClassName })
+              );
             }
           }
           pos = line.to + 1;
@@ -812,8 +798,6 @@ class Editor extends EventEmitter {
    *   @property {string}     marker.lineClassName - The css class to add to the line
    *   @property {function}   marker.condition - The condition that decides if the marker/class gets added or removed.
    *                                             The line is passed as an argument.
-   *   @property {function}   marker.createLineElementNode - This should return the DOM element which
-   *                                            is used for the marker. This is optional.
    */
   setLineContentMarker(marker) {
     const cm = editors.get(this);