foo.diff

diff --git a/src/devtools/client/debugger/src/components/Editor/LineNumberPortal.js b/src/devtools/client/debugger/src/components/Editor/LineNumberPortal.js
index 7bd8265a..7b9b583a 100644
--- a/src/devtools/client/debugger/src/components/Editor/LineNumberPortal.js
+++ b/src/devtools/client/debugger/src/components/Editor/LineNumberPortal.js
@@ -1,48 +1,40 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useState } from "react";
 import { connect } from "../../utils/connect";
 
 import ReactDOM from "react-dom";
 import "./LineNumberPortal.css";
 import { selectors } from "ui/reducers";
+import { StaticTooltip } from "../shared/StaticTooltip";
 
-function LineNumberPortal({ targetNode, analysisPoints }) {
-  const [ready, setReady] = useState(false);
-  const timeoutKey = useRef(null);
-  const mounted = useRef(false);
+function LineNumberTooltip({ editor, hits, selectedSource }) {
+  const [target, setTarget] = useState();
+  editor.on("line-number-enter", onLineNumberEnter);
+  editor.on("line-number-leave", onLineNumberLeave);
 
-  useEffect(function debounceTooltipFirstRender() {
-    mounted.current = true;
+  const onLineNumberLeave = () => {
+    setHoveredLineNumber(null);
+    return setTarget(null);
+  };
 
-    timeoutKey.current = setTimeout(() => {
-      if (mounted.current) {
-        setReady(true);
-      }
-    }, 500);
+  const onLineNumberEnter = (target, lineNumber) => {
+    setHoveredGutterLocation({
+      sourceId: selectedSource.id,
+      sourceUrl: selectedSource.url,
+      column: undefined,
+      line: lineNumber,
+    });
 
-    return () => {
-      clearTimeout(timeoutKey);
-      mounted.current = false;
-    };
-  }, []);
+    setTarget(target);
+  };
 
-  if (!ready || !targetNode || !analysisPoints) {
+  if (!target) {
     return null;
   }
 
-  return ReactDOM.createPortal(
-    <LineNumberTooltip targetNode={targetNode} hits={analysisPoints.length} />,
-    targetNode
-  );
-}
-
-function LineNumberTooltip({ targetNode, hits }) {
-  const { top, left } = targetNode.getBoundingClientRect();
-  const docWidth = document.querySelector("html").getBoundingClientRect().width;
-
   return (
-    <div className="line-number-tooltip" style={{ top: `${top}px`, right: `${docWidth - left}px` }}>
-      {hits} hits
-    </div>
+    <StaticTooltip>
+      <div className="line-number-tooltip">{hits} hits</div>
+    </StaticTooltip>
   );
 }
 
@@ -62,4 +54,4 @@ const mapStateToProps = state => {
   };
 };
 
-export default connect(mapStateToProps)(LineNumberPortal);
+export default connect(mapStateToProps)(LineNumberTooltip);
diff --git a/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js b/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js
index f8dcc736..d76dab57 100644
--- a/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js
+++ b/src/devtools/client/debugger/src/components/Editor/Preview/Popup.js
@@ -33,10 +33,6 @@ export class Popup extends Component {
   pos;
   popover;
 
-  constructor(props) {
-    super(props);
-  }
-
   componentDidMount() {
     this.addHighlightToToken();
   }
diff --git a/src/devtools/client/debugger/src/components/Editor/index.js b/src/devtools/client/debugger/src/components/Editor/index.js
index d7cb499b..bc4736cc 100644
--- a/src/devtools/client/debugger/src/components/Editor/index.js
+++ b/src/devtools/client/debugger/src/components/Editor/index.js
@@ -149,62 +149,6 @@ class Editor extends PureComponent {
     return editor;
   }
 
-  onGutterMouseOver = (e, setHoveredLineNumberNode) => {
-    let target = e.target;
-    let shouldRunAnalysis = true;
-
-    const isBreakpointMarker = target.closest(".new-breakpoint");
-
-    // If hovered on a breakpoint marker, get the corresponding linenumber element.
-    if (isBreakpointMarker) {
-      shouldRunAnalysis = false;
-      target = target.closest(".Codemirror-gutter-elt")?.previousSibling;
-    }
-
-    if (!target || !target.classList) {
-      return;
-    }
-
-    const isValidLineNumber =
-      target.classList.contains("CodeMirror-linenumber") && !target.closest(".empty-line");
-
-    if (!isValidLineNumber) {
-      return;
-    }
-
-    const onMouseLeave = () => {
-      e.target.removeEventListener("mouseleave", onMouseLeave);
-      setHoveredLineNumberNode(null);
-    };
-
-    e.target.addEventListener("mouseleave", onMouseLeave);
-    setHoveredLineNumberNode(target, shouldRunAnalysis);
-  };
-
-  setHoveredLineNumberNode = (target, shouldRunAnalysis) => {
-    const { cx, selectedSource, runAnalysisOnLine } = this.props;
-
-    if (!target) {
-      this.props.setHoveredLineNumber(null);
-      return this.setState({ targetNode: null });
-    }
-
-    const line = JSON.parse(target.childNodes[0].textContent);
-    const location = {
-      sourceId: selectedSource.id,
-      sourceUrl: selectedSource.url,
-      column: undefined,
-      line,
-    };
-
-    if (shouldRunAnalysis) {
-      runAnalysisOnLine(cx, line);
-    }
-
-    this.props.setHoveredLineNumber(location);
-    this.setState({ targetNode: target });
-  };
-
   onClosePress = (key, e) => {
     const { cx, selectedSource } = this.props;
     if (selectedSource) {
diff --git a/src/devtools/client/debugger/src/utils/editor/token-events.js b/src/devtools/client/debugger/src/utils/editor/token-events.js
index bab9b392..226676f8 100644
--- a/src/devtools/client/debugger/src/utils/editor/token-events.js
+++ b/src/devtools/client/debugger/src/utils/editor/token-events.js
@@ -90,3 +90,40 @@ export function onMouseOver(codeMirror) {
     }
   };
 }
+
+/*
+
+  onGutterMouseOver = (e, setHoveredLineNumberNode) => {
+    let target = e.target;
+    let shouldRunAnalysis = true;
+
+    const isBreakpointMarker = target.closest(".new-breakpoint");
+
+    // If hovered on a breakpoint marker, get the corresponding linenumber element.
+    if (isBreakpointMarker) {
+      shouldRunAnalysis = false;
+      target = target.closest(".Codemirror-gutter-elt")?.previousSibling;
+    }
+
+    if (!target || !target.classList) {
+      return;
+    }
+
+    const isValidLineNumber =
+      target.classList.contains("CodeMirror-linenumber") && !target.closest(".empty-line");
+
+    if (!isValidLineNumber) {
+      return;
+    }
+
+    const onMouseLeave = () => {
+      e.target.removeEventListener("mouseleave", onMouseLeave);
+      setHoveredLineNumberNode(null);
+    };
+
+    e.target.addEventListener("mouseleave", onMouseLeave);
+    setHoveredLineNumberNode(target, shouldRunAnalysis);
+  };
+
+   const line = JSON.parse(target.childNodes[0].textContent);
+  */
diff --git a/src/ui/actions/app.ts b/src/ui/actions/app.ts
index 62ab061c..082b218d 100644
--- a/src/ui/actions/app.ts
+++ b/src/ui/actions/app.ts
@@ -187,7 +187,9 @@ export function setViewMode(viewMode: ViewMode): SetViewMode {
   return { type: "set_view_mode", viewMode };
 }
 
-export function setHoveredLineNumber(hoveredLineNumber: Location): SetHoveredLineNumber {
+export function setHoveredGutterLocation(location: Location): SetHoveredLineNumber {
+  runAnalysisOnLine(cx, location);
+
   return { type: "set_hovered_line_number", hoveredLineNumber };
 }