[Console] Clicking frame from console does not highlight line

[nchevobbe]

Steps to reproduce:

1. Go to https://mdn.github.io/webassembly-examples/js-api-examples/fail.html
2. Open the console (Cmd/Ctrl + K)
3. Click on the exception location

Expected results:
I see the line I wanted to navigate to highlighted

Actual results:
There is no highlight, and I'm a bit lost where I should look at

It may be due to something not being loaded yet ?

---

Also, if I go back to the console and click on the frame again, I do see the highlighter:

But if I looked away for a moment, I may missed it, and being as lost as in the STR case. Maybe we could show the highlighter until the user scrolls ?

[jasonLaster]

this is a dupe of #4318.

[digitarald]

@darkwing keeping the highlight too subtle and short is still an issue and affects all source/location navigation. One idea would be a bolder highlight (yellow) and a longer (3x longer?) lingering subtle highlight.

[nchevobbe]

Something like the following works a bit better:

diff --git a/devtools/client/debugger/new/dist/debugger.css b/devtools/client/debugger/new/dist/debugger.css
--- a/devtools/client/debugger/new/dist/debugger.css
+++ b/devtools/client/debugger/new/dist/debugger.css
@@ -2997,26 +2997,25 @@ debug-expression-error {
 }
 
 .highlight-line .CodeMirror-line {
-  animation: fade-highlight-out 1.5s normal forwards;
+  background-color: var(--theme-highlight-gray);
+  animation-name: fade-highlight-out;
+  animation-duration: 0.5s;
+  animation-delay: 1s;
+  animation-fill-mode: 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 1.5s normal forwards;
+  background-color: var(--theme-comment);
+  animation-name: fade-highlight-out-dark;
 }
 
 @keyframes fade-highlight-out-dark {
-  0% {
-    background-color: var(--theme-comment);
-  }
   100% {
     background-color: transparent;
   }

But there are still cases where the highlighter does not show up when clicking from the console (I guess a race condition somewhere, as the code I looked into should handle that).

Also, when did we switched to gray background ? It feels a bit odd to me, when tools we're used to (searchfox, github, …) show a yellow background.

One last thing: when you clicked on a location from the console, and the animation is over, clicking on the location again won't play the animation again. It should though, because you might have missed it the first time, or you just need a visual help to guide your eyes to that given line.

[darkwing]

I hit this error, clicked it, and the proper location was highlighted.