Bug 1544930 - Improve visibility of the highlighted line r=jlast

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

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

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

@@ -8,6 +8,7 @@
   --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;
 }
 
 .theme-dark .editor-wrapper {
@@ -164,25 +165,15 @@ html[dir="rtl"] .editor-mount {
   display: none;
 }
 .highlight-line .CodeMirror-line {
-  animation: fade-highlight-out var(--highlight-line-duration) normal forwards;
+  animation-name: fade-highlight-out;
+  animation-duration: var(--highlight-line-duration);
+  animation-delay: var(--highlight-line-delay);
+  animation-direction: forwards;
 }
 
 @keyframes fade-highlight-out {
   0% {
-    background-color: var(--theme-highlight-gray);
-  }
-  100% {
-    background-color: transparent;
-  }
-}
-
-.theme-dark .highlight-line .CodeMirror-line {
-  animation: fade-highlight-out-dark 1s normal forwards;
-}
-
-@keyframes fade-highlight-out-dark {
-  0% {
-    background-color: var(--theme-comment);
+    background-color: var(--theme-contrast-background);
   }
   100% {
     background-color: transparent;

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

@@ -51,6 +51,13 @@ 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;
@@ -141,14 +148,12 @@ export class HighlightLine extends Component<Props> {
     }
 
     const style = getComputedStyle(editorWrapper);
-    const durationString = style.getPropertyValue("--highlight-line-duration");
-
-    let duration = durationString.match(/\d+/);
-    duration = duration.length ? Number(duration[0]) : 0;
+    const duration = getCSSTiming(style, "--highlight-line-duration");
+    const delay = getCSSTiming(style, "--highlight-line-delay");
 
     setTimeout(
       () => doc && doc.removeLineClass(editorLine, "line", "highlight-line"),
-      duration
+      duration + delay
     );
   }