Open Bug 1448130 Opened 4 years ago Updated 3 years ago

Overpainting (full-area paint flashing) in browser UI (toolbars, devtools, sidebars) when resizing window


(Core :: Web Painting, defect, P3)




Tracking Status
firefox61 --- affected


(Reporter: dholbert, Unassigned)



(Keywords: perf, Whiteboard: [qf:p3])


(1 file)

 1. set nglayout.debug.paint_flashing = true
 2. Visit
 3. (Optional but useful): hit Ctrl+B and also F12, to open bookmarks sidebar & devtools panel.
 3. Resize your Firefox window vertically, e.g. by dragging bottom border up & down.

- Very little paint flashing in content area (just at the edges).
- Toolbars, bookmarks sidebar, & devtools area all flash continuously, despite the fact that they're basically unaffected by the resize operation!

Less repainting.  Ideally we'd like these sidebars / toolbars (or large pieces of them) to be layerized so that they don't need repainting when they're simply moved (in the case of devtools).

Note that the toolbars aren't even being moved here, so I don't know what's going on there.

This bug may belong in Firefox|[Something], but we might want someone to investigate on the layout/graphics side first to get some clues about what tweaks on which elements would help here.

BTW, I tried this with e10s disabled (browser.tabs.remote.autostart=false), too, and I got the same result. So this isn't just a chrome-process-vs-content-process distinction.
Attached video screencast of bug
(For the devtools bar at the bottom, I get EXPECTED RESULTS for the Inspector panel, so we might be doing something correctly there that we need to mimic in the other panels & in our other UI.)

See attached screncast (which shows the inspector panel at the very end, which doesn't paintflash the whole thing on every tick like the rest of the UI does).
See Also: → 1448096
Summary: Full-content paint flashing in browser UI (toolbars, devtools, sidebars) when resizing window → Overpainting (full-area paint flashing) in browser UI (toolbars, devtools, sidebars) when resizing window
Keywords: perf
Whiteboard: [qf]
mattwoodrow, is there anything obvious we can/should be doing here? Or is this an instance of a known issue?
Flags: needinfo?(matt.woodrow)
I don't see any of the top chrome flashing, and devtools appears to be repainting the top toolbar (selecting which tool to use), and sometime the computed style panel.

Bookmarks is indeed repainting the whole panel every time. This is using XUL tree, which doesn't use display items, and implements invalidation manually (and not super well apparently).

Fixing XUL tree properly would require us to output separate display items for each piece, or just putting a bunch of work into making the manual invalidation logic smarter. We've talked about this before, but it's never been a priority. I'd much rather we worked on making the HTML equivalents work well enough for everyone.
Flags: needinfo?(matt.woodrow)
Hmm, it sounds like you're seeing less invalidation than I am. As shown in my screencast, I'm seeing basically all of the chrome flashing.  I wonder if there's some additional platform-specific component here (I'm on Linux, and I'm guessing you're on Mac)
Indeed, your screencast shows considerably worse behaviour than I see on Mac.

The browser chrome doesn't invalidate on Windows either, but devtools does in it's entirety.

This isn't ideal, but it's also probably not a huge priority, resizing with devtools open should be relatively rare.
Component: Layout → Layout: Web Painting
Priority: -- → P3
Developers sometime resize the browser window to see how the website works with various resolutions.
Kind of cheap responsive design feature...

Also, it doesn't help identifying and fixing the repaints due to devtools codebase when there is so many repaints due to the platform/Firefox UI. I tried tweaking devtool's iframe CSS (size/display/position) but nothing makes these repaints stop.

It looks like any iframe added to browser.xul will repaint.
See what happens when adding an iframe at the bottom of browser.xul:
  var i=document.createElement("iframe"); i.src="data:text/html,foo"; document.documentElement.appendChild(i);
  (same repaints than devtools on Linux and Windows)

Also, it isn't clear why some particular content within devtools iframes correctly get repainted.
For example try resizing vertically with the options panel of devtools opened.
This particular panel isn't repainted!
Whiteboard: [qf] → [qf:f64][qf:p3]
Whiteboard: [qf:f64][qf:p3] → [qf:p3:f64]
Whiteboard: [qf:p3:f64] → [qf:p3]
You need to log in before you can comment on or make changes to this bug.