foo.diff

diff --git a/src/devtools/client/debugger/src/components/Editor/Breakpoints/Panel.js b/src/devtools/client/debugger/src/components/Editor/Breakpoints/Panel.js
index 1177eb57..e4f4ee70 100644
--- a/src/devtools/client/debugger/src/components/Editor/Breakpoints/Panel.js
+++ b/src/devtools/client/debugger/src/components/Editor/Breakpoints/Panel.js
@@ -3,7 +3,7 @@
  * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */
 
 //
-import React, { PureComponent } from "react";
+import React, { PureComponent, useEffect } from "react";
 import ReactDOM from "react-dom";
 import classnames from "classnames";
 import { connect } from "devtools/client/debugger/src/utils/connect";
@@ -14,29 +14,40 @@ import { BreakpointEditor } from "./Editor";
 
 import "./Panel.css";
 
+
+function Widget({ }) {
+  const cbPanel = useRef(null)
+
+  const panel = document.createElement("div");
+  panel.classList.add("logpoint-panel");
+
+  useEffect(() => {
+    const { line } = this.props;
+    cbPanel.current = editor.codeMirror.addLineWidget(line, panel, {
+      // coverGutter: true,
+      noHScroll: true,
+    });
+
+    return () => cbPanel.current.clear()
+  }, [])
+
+  return ReactDOM.createPortal(<div className="breakpoint-panel">{...children}</div>, panel);
+}
+
 export class Panel extends PureComponent {
   cbPanel;
   input;
   codeMirror;
   panelNode;
 
-  constructor() {
-    super();
-    this.cbPanel = null;
-
-    this.panel = document.createElement("div");
-    this.panel.classList.add("logpoint-panel");
-
-    this.state = {
-      editing: false,
-      logValue: null,
-      conditionValue: null,
-      editCondition: false,
-    };
-  }
+  state = {
+    editing: false,
+    logValue: null,
+    conditionValue: null,
+    editCondition: false,
+  };
 
   componentDidMount() {
-    this.renderToWidget(this.props);
     const { breakpoint } = this.props;
     this.setState({
       logValue: breakpoint.options.logValue,
@@ -44,7 +55,7 @@ export class Panel extends PureComponent {
     });
   }
 
-  componentDidUpdate(_, prevState) {
+  componentDidUpdate() {
     const { editCondition } = this.state;
 
     if (editCondition) {
@@ -52,34 +63,6 @@ export class Panel extends PureComponent {
     }
   }
 
-  componentWillUnmount() {
-    // This is called if CodeMirror is re-initializing itself before the
-    // user closes the panel. Clear the widget, and re-render it
-    // as soon as this component gets remounted
-    return this.clearPanel();
-  }
-
-  renderToWidget() {
-    const { breakpoint, editor } = this.props;
-    const { location } = breakpoint;
-
-    if (this.cbPanel) {
-      this.clearPanel();
-    }
-
-    const editorLine = toEditorLine(location.sourceId, location.line || 0);
-    this.cbPanel = editor.codeMirror.addLineWidget(editorLine, this.panel, {
-      // coverGutter: true,
-      noHScroll: true,
-    });
-  }
-
-  clearPanel() {
-    if (this.cbPanel) {
-      this.cbPanel.clear();
-      this.cbPanel = null;
-    }
-  }
 
   setBreakpoint() {
     const { cx, breakpoint } = this.props;
@@ -244,8 +227,8 @@ export class Panel extends PureComponent {
               {this.renderLogSummary()}
             </>
           ) : (
-            this.renderLogSummary()
-          )}
+              this.renderLogSummary()
+            )}
         </div>
         <div className="action" tabIndex="0" onClick={this.toggleEditingOn}>
           Edit
@@ -271,10 +254,10 @@ export class Panel extends PureComponent {
         Remove Condition
       </div>
     ) : (
-      <div className="action" tabIndex="0" onClick={() => this.setConditionValue("")}>
-        Add Condition
-      </div>
-    );
+        <div className="action" tabIndex="0" onClick={() => this.setConditionValue("")}>
+          Add Condition
+        </div>
+      );
   }
 
   renderHeader() {
@@ -292,10 +275,13 @@ export class Panel extends PureComponent {
 
   render() {
     const { editing, conditionValue } = this.state;
+    const { breakpoint: { location } } = this.props
     const hasCondition = conditionValue !== null;
-    const panel = this.panel;
 
-    const panelElem = (
+    const editorLine = toEditorLine(location.sourceId, location.line || 0);
+
+
+    return <Widget line={editorLine}>
       <div
         className={classnames("breakpoint-panel log-point", { editing, conditional: hasCondition })}
         ref={node => (this.panelNode = node)}
@@ -303,9 +289,7 @@ export class Panel extends PureComponent {
         {editing ? this.renderHeader() : null}
         {editing ? this.renderLogpointForm() : this.renderSummary()}
       </div>
-    );
-
-    return ReactDOM.createPortal(panelElem, panel);
+    </Widget>
   }
 }