982456 - When hovering a line of the console, highlight the line

Status: RESOLVED FIXED

(DevTools :: Console, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Attachment: console.png

when the window is large, the connection in between the error and the line number is not obvious. Highlighting the line by hovering it with the pointer would solve the issue.

It's helpful when you need to click the right line number to access the code in the CSS for example.

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 982456.patch

Added background colours for line hovers in the console. Got some feedback that this would be very helpful from the other interns.

Comment 2

[Victor Porof [:vporof][:vp]]

On a related note (for which there may be a different bug filed already), can we add a (very subtle) border between each console entry (much like the old Browser Console used to have)? It's sometimes very hard to distinguish where a message starts and were it ends, especially when there's a lot of text per message (spanning across multiple lines). Fixing this bug obviously helps a lot with that, but I wouldn't want to constantly hover over messages to make sense of the output.

Comment 3

[Rob Campbell [:rc] (:robcee)]

Comment on attachment 8451759 [details] [diff] [review]
982456.patch

I'm going to pass this request to Victor for reasons he will understand.

Comment 4

[Victor Porof [:vporof][:vp]]

Comment on attachment 8451759 [details] [diff] [review]
982456.patch

Review of attachment 8451759 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/shared/devtools/webconsole.inc.css
@@ +203,5 @@
> +  background-color: #f0f8ff !important;
> +}
> +
> +.theme-dark .message:hover {
> +  background-color: #283B4B !important;

Can we please use colors from the palette instead? A common practice at this point is even using the `rgba` values and playing with the opacity.

Comment 5

[Victor Porof [:vporof][:vp]]

Palette: https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors

Comment 6

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: 982456.patch

Updated colours using palettes from https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors

Comment 7

[Victor Porof [:vporof][:vp]]

Comment on attachment 8451789 [details] [diff] [review]
982456.patch

Review of attachment 8451789 [details] [diff] [review]:
-----------------------------------------------------------------

Looks pretty. I would also try to get some ui feedback on this. Maybe :darrin.

Comment 8

[Darrin Henein [:darrin]]

If possible can you post screenshots of the various states to be reviewed? Easier for designers and also lets us have a visual record of nits, etc. At that point, I'd be more than happy to review :) Thanks!

Comment 9

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: dark-theme with stack frame

Comment 10

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: light-theme with stack frame

Comment 11

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: light-theme console line

Comment 12

[Gabriel Luong [:gl] (ΦωΦ)]

Attachment: dark-theme console line

Comment 13

[Darrin Henein [:darrin]]

Comment on attachment 8451789 [details] [diff] [review]
982456.patch

Looks awesome, thanks!

Comment 14

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/integration/fx-team/rev/e23a86020a70

Comment 15

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/e23a86020a70