[Editor] highlight line flashes when it is scrolled into view

[jasonLaster]

STR:

1. click a breakpoint, which navigates to that location
2. scroll the editor so that that line is out of view
3. scroll it back into view

ER: nothing happens
AR: the line highlights again

The reason for this is that the HighlightLine component adds a class to the selected line and never removes it

Here's a start...

diff --git a/src/components/Editor/Editor.css b/src/components/Editor/Editor.css
index aed8d41c7..6f8e982f3 100644
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -9,6 +9,7 @@
   --debug-line-error-border: rgb(255, 0, 0);
   --debug-expression-error-background: rgba(231, 116, 113, 0.3);
   --editor-header-height: 30px;
+  --highlight-line-duration: 1.5s;
 }
 
@@ -260,8 +263,9 @@ debug-expression-error {
 .new-debug-line-error .CodeMirror-activeline-background {
   display: none;
 }
+
 .highlight-line .CodeMirror-line {
-  animation: fade-highlight-out 1.5s normal forwards;
+  animation: fade-highlight-out var(--highlight-line-duration) normal forwards;
 }
 
 @keyframes fade-highlight-out {
diff --git a/src/components/Editor/HighlightLine.js b/src/components/Editor/HighlightLine.js
index 9c6530d13..f4107f4f0 100644
--- a/src/components/Editor/HighlightLine.js
+++ b/src/components/Editor/HighlightLine.js
@@ -121,7 +121,18 @@ export class HighlightLine extends Component<Props> {
     }
 
     const doc = getDocument(sourceId);
+    // adds the line here, but does not remove it
     doc.addLineClass(editorLine, "line", "highlight-line");
+    this.resetHighlightLine(doc, editorLine);
+  }
+
+  resetHighlightLine(doc, editorLine) {
+    const style = getComputedStyle(document.querySelector(".editor-wrapper"));
+    const duration = style.getPropertyValue("--highlight-line-duration");
+    setTimeout(
+      () => doc && doc.removeLineClass(editorLine, "line", "highlight-line"),
+      duration
+    );
   }

[zerefwayne]

@jasonLaster I would like to work on this.

[zerefwayne]

/claim

[claim]

Thanks for claiming the issue! 👋

!!! Please check your email and confirm the invitation

Here are some links for getting setup, contributing, and developing. We're always happy to answer questions in slack! If you become busy, feel free to /unclaim it.

🦊 Debugger team!