1571349 - Hovering console message causes a reflow

Status: RESOLVED FIXED

(DevTools :: Console, defect, P1)

Description

[Nicolas Chevobbe [:nchevobbe]]

This is because of the blue border that we add on hover (it's a before pseudo element, which explains the reflow)

Now that we have border on messages, let's remove the border.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes.

Now that we have top and bottom borders, we might
not need it.

Comment 2

[Florens Verschelde :fvsch]

If we want to keep the border on hover but avoid using a pseudo-element, we may be able to use one of:

• box-shadow: inset 4px 0 0 var(--theme-highlight-blue);
• background-image: linear-gradient(to right, var(--theme-highlight-blue) 4px, transparent 4px);

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

we'd have to test it, if I remember correctly both gradients and shadows are quite costly

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/deb12c7740ce
Fix unwanted reflows on message hover. r=jdescottes.

Comment 5

[Cosmin Sabou [:CosminS]]

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception&revision=deb12c7740ce2b54d43c1dc7cb0cd30ba7709eb3&selectedJob=260332114

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=260332114&repo=autoland&lineNumber=1076

Backout link: https://hg.mozilla.org/integration/autoland/rev/2ab4e8957a5304e32135cb40a53670006eb5a558

Comment 6

[Florens Verschelde :fvsch]

Woops missed that in review, the correct invisible background-color value would be background-color: transparent; and not background-color: none;

Alternatively, we can use opacity: 0; and opacity: 1; on hover.

Tip: DevTools CSS is tested by the browser/base/content/test/static/browser_parsable_css.js test, which can be run with ./mach test browser_parsable_css (not sure which test suite it's in).

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c80eb9715805
Fix unwanted reflows on message hover. r=jdescottes.

Comment 8

[Stefan Hindli [:stefan_hindli]]

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

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

clearing ni

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

Comment on attachment 9082936 [details]
Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes.

Beta/Release Uplift Approval Request

• User impact if declined: Hovering messages in webconsole is slow
• Is this code covered by automated tests?: No
• Has the fix been verified in Nightly?: Yes
• Needs manual test from QE?: No
• If yes, steps to reproduce:
• List of other uplifts needed: None
• Risk to taking this patch: Low
• Why is the change risky/not risky? (and alternatives if risky): devtools CSS only change
• String changes made/needed:

Comment 11

[Ryan VanderMeulen [:RyanVM]]

Comment on attachment 9082936 [details]
Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes.

Minor Devtools perf fix. Approved for 69.0b13.

Comment 12

[Sebastian Hengst [:aryx] (needinfo me if it's about an intermittent or backout)]

https://hg.mozilla.org/releases/mozilla-beta/rev/48cb377f63cf