Closed Bug 1571349 Opened 3 months ago Closed 3 months ago

Hovering console message causes a reflow

Categories

(DevTools :: Console, defect, P1)

defect

Tracking

(firefox69 fixed, firefox70 fixed)

RESOLVED FIXED
Firefox 70
Tracking Status
firefox69 --- fixed
firefox70 --- fixed

People

(Reporter: nchevobbe, Assigned: nchevobbe)

References

(Blocks 2 open bugs)

Details

Attachments

(1 file)

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

Attachment #9082936 - Attachment description: Bug 1571349 - Remove message hover blue border. r=fvsch. → Bug 1571349 - Fix unwanted reflows on message hover. r=jdescottes.
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/deb12c7740ce
Fix unwanted reflows on message hover. r=jdescottes.

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

Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/c80eb9715805
Fix unwanted reflows on message hover. r=jdescottes.
Status: ASSIGNED → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70

clearing ni

Flags: needinfo?(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:
Attachment #9082936 - Flags: approval-mozilla-beta?

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

Minor Devtools perf fix. Approved for 69.0b13.

Attachment #9082936 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
You need to log in before you can comment on or make changes to this bug.