Bug 1608595 - More reliable highlight animation for debugger r=jlast

Differential Revision: https://phabricator.services.mozilla.com/D59584

--HG--
extra : moz-landing-system : lando

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

@@ -7,8 +7,7 @@
   --debug-expression-background: rgba(202, 227, 255, 0.5);
   --debug-line-error-border: rgb(255, 0, 0);
   --debug-expression-error-background: rgba(231, 116, 113, 0.3);
-  --highlight-line-duration: 1500ms;
-  --highlight-line-delay: 200ms;
+  --highlight-line-duration: 5000ms;
 }
 
 .theme-dark .editor-wrapper {
@@ -167,7 +166,7 @@ html[dir="rtl"] .editor-mount {
 .highlight-line .CodeMirror-line {
   animation-name: fade-highlight-out;
   animation-duration: var(--highlight-line-duration);
-  animation-delay: var(--highlight-line-delay);
+  animation-timing-function: ease-out;
   animation-direction: forwards;
 }
 
@@ -175,6 +174,9 @@ html[dir="rtl"] .editor-mount {
   0% {
     background-color: var(--theme-contrast-background);
   }
+  30% {
+    background-color: var(--theme-contrast-background);
+  }
   100% {
     background-color: transparent;
   }

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

@@ -58,13 +58,6 @@ function isDocumentReady(selectedSource: ?SourceWithContent, selectedLocation) {
   );
 }
 
-function getCSSTiming(style: Object, variable: string): number {
-  const value = style.getPropertyValue(variable);
-  const variableNumber = value.match(/\d+/);
-
-  return variableNumber.length ? Number(variableNumber[0]) : 0;
-}
-
 export class HighlightLine extends Component<Props> {
   isStepping: boolean = false;
   previousEditorLine: ?number = null;
@@ -140,9 +133,12 @@ export class HighlightLine extends Component<Props> {
       return;
     }
 
-    const doc = getDocument(sourceId);
-    doc.addLineClass(editorLine, "line", "highlight-line");
-    this.resetHighlightLine(doc, editorLine);
+    // Wait for idle main thread to start animation
+    requestIdleCallback(() => {
+      const doc = getDocument(sourceId);
+      doc.addLineClass(editorLine, "line", "highlight-line");
+      this.resetHighlightLine(doc, editorLine);
+    });
   }
 
   resetHighlightLine(doc: SourceDocuments, editorLine: number) {
@@ -154,13 +150,16 @@ export class HighlightLine extends Component<Props> {
       return;
     }
 
-    const style = getComputedStyle(editorWrapper);
-    const duration = getCSSTiming(style, "--highlight-line-duration");
-    const delay = getCSSTiming(style, "--highlight-line-delay");
+    const duration = parseInt(
+      getComputedStyle(editorWrapper).getPropertyValue(
+        "--highlight-line-duration"
+      ),
+      10
+    );
 
     setTimeout(
       () => doc && doc.removeLineClass(editorLine, "line", "highlight-line"),
-      duration + delay
+      duration
     );
   }