1020894 - Style inspector performance: avoid refreshing the views on browser resize

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Patrick Brosset <:pbro>]

Right now, both the rule and computed views (style-inspector) get refreshed whenever the browser window is resized.

Refreshing the views mean:
- requesting the new data from the style actor,
- emptying the views content,
- generating again the markup for the views,
- initializing the various tooltips, editors, etc.

Refreshing makes sense when resizing the page because CSS media queries could be invalidated as a result and therefore styles applied to the currently selected node could change.

But, right now, we refresh unconditionally, therefore decreasing performance of the inspector (see [1]).
There are a couple of things we should do to avoid refreshing all the times:

- throttle refreshes to avoid doing them too quickly
- and check if a refresh is at all needed when the page is resized:
  - does the page even have media queries?
  - is the currently selected element going to be affected by these media queries?
  - is there at least 1 media query that got in/validated as a result of the resize?

For info (from an IRC discussion with Paul): http://mxr.mozilla.org/mozilla-central/source/layout/base/nsPresContext.cpp#1875 is where media queries changes get reported to potential window.matchMedia listeners, so we could probably add a notification for an observer registered via the docShell (a little bit like reflow observers can be added).

For info, bug 1020438 is about making the clearing and generation of the DOM in the rule-view more efficient in all cases, so the present bug shouldn't be focusing on that part.

[1] About the inspector performance:
- open a page in firefox (toolbox closed),
- resize it like crazy, checking the responsiveness as you do it. The page should fluidly be redrawn and the window size should adapt as you move the mouse, with any visible lag
- now open the toolbox, with the webconsole (do not initialize the inspector yet)
- do the same test. You should come to the same kind of responsiveness
- now switch to the inspector
- repeat again. Now, you should probably be seeing a noticeable lag when resizing the window. The window doesn't follow the mouse position as quickly as it should.

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

filter on CLIMBING SHOES

It seems that we now do some kind of throttling ( refresh is called on actor "resize" event, which is emitted here : https://dxr.mozilla.org/mozilla-central/source/devtools/server/actors/layout.js#366 , and can be triggered only every 300ms )