Bug 1880428 - [devtools] Make line highlight background color semi-transparent so text selection is visible. r=ochameau,devtools-reviewers.

The background color of the line highlight was opaque, hiding any
text selection that could be on that line.
Using a color with some transparency makes the selection visible.
We take this as an opportunity to fix and refactor the CSS for
line highlight.

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

Author: nchevobbe

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

@@ -159,15 +159,13 @@ html[dir="rtl"] .editor-mount {
   animation-name: fade-highlight-out;
   animation-duration: var(--highlight-line-duration);
   animation-timing-function: ease-out;
-  animation-direction: forwards;
+  animation-fill-mode: forwards;
 }
 
 @keyframes fade-highlight-out {
-  0% {
-    background-color: var(--theme-contrast-background);
-  }
-  30% {
-    background-color: var(--theme-contrast-background);
+  0%, 30% {
+    /* We want to use a color with some transparency so text selection is visible through it */
+    background-color: var(--theme-contrast-background-alpha);
   }
   100% {
     background-color: transparent;