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.

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

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);

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

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

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).

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

clearing ni

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 on attachment 9082936 [details]
Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes.

Minor Devtools perf fix. Approved for 69.0b13.

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