1544930 - Extend visibility for currently highlighted line

Status: RESOLVED FIXED

(DevTools :: Debugger, enhancement, P3)

Description

[:Harald Kirschner :digitarald]

Follow up from https://github.com/firefox-devtools/debugger/issues/4318

Ideas:

• Extend duration
• Ease out with longer high visible state
• Only start fading out when the UI is fully loaded and/or after the user interacted with the debugger/document
• More vibrant color (Chrome uses yellow)

Comment 1

[:Harald Kirschner :digitarald]

Attachment: Firefox / Chrome comparison, 50% slowed down

Comment 2

[:Harald Kirschner :digitarald]

One option to not have the highlight start when the debugger is still churning on loading (animation ends up choppy and noisy because of ongoing loading): The highlight should be applied as early as possible but the fade out should only be triggered in a requestIdleCallback or an event that the debugger fires when it is fully loaded.

Comment 3

[Victoria Wang [:victoria]]

Agreed on everything! Maybe just not for the first line when first opening a file.

Also: we should try a subtle blue row highlight based on the Inspector hover color.

Other places where this can be applied, off the top of my head: link box model to rules, Markup changed DOM highlight.

Comment 4

[:Harald Kirschner :digitarald]

Also: we should try a subtle blue row highlight based on the Inspector hover color.

That does not seem very consistent across editors. Style Editor highlights the current line, while Inspector highlights the currently focused element in the tree. To keep this bug focused, it is maybe worth filing a separate issue with a better problem statement.

Related: https://github.com/firefox-devtools/debugger/issues/8007

Comment 5

[David Walsh :davidwalsh]

Victoria: Inconsistencies aside, can you recommend a better (yellow) highlight color and opacity for this line?

Comment 6

[David Walsh :davidwalsh]

Victoria: Inconsistencies aside, can you recommend a better (yellow) highlight color and opacity for this line?

Comment 7

[Victoria Wang [:victoria]]

Hi! There's new yellow flash styling currently in progress for the Markup view: https://bugzilla.mozilla.org/show_bug.cgi?id=1541278

I'm not sure what it looks like yet - was planning to take a closer look after it lands. But the yellow should be 'Yellow 50' at 40% opacity.

I also think all our flash effects should have a longer duration so it would be great if you move forward on that as well.

Comment 8

[David Walsh :davidwalsh]

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

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/f377025d40ef
Improve visibility of the highlighted line r=jlast

Comment 10

[Arthur Iakab [arthur_iakab]]

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