1514915 - Find places in DevTools Inspector where "contain: layout size" makes sense

Status: NEW

(DevTools :: Inspector, enhancement, P2)

Description

[Daniel Holbert [:dholbert]]

I'm looking for places where we can get speedups from adding CSS Containment in devtools code.

(For reference, https://wiki.mozilla.org/Platform/Layout/CSS_Containment_Best_Practices has a rough summary of things to look for when finding candidates for usage of this feature. )

Strawman idea: the devtools Inspector seems like one good place -- perhaps at the granularity of a "pane" (e.g. each pane in the 3-panel-layout being a reflow root with "contain:layout size").

Specifically, the class "devtools-inspector-tab-panel" might make a good spot to add "contain:layout size", since it's got a specified size (height:100%;width:100%) and since it can have descendants with rapid changes (if the page is dynamically changing and the left pane updates to reflect that, for example; or, if the user is rapidly typing inside the specified-style-inspector to add some new CSS.)

Comment 1

[Daniel Holbert [:dholbert]]

(In reply to Daniel Holbert [:dholbert] from comment #0)
> Strawman idea: [...] the class "devtools-inspector-tab-panel" might make a good
> spot to add "contain:layout size", since it's got a specified size
> (height:100%;width:100%) and since it can have descendants with rapid
> changes

I tried this ^^ and ran some speculative stress tests[1] yesterday, but I didn't get any measurable benefits (as reported by reflow times in the profiler).  We probably need to come up with a known-janky-in-current-builds stress test that we can hope to address here.

[1] the "stress tests" that I ran were:
 - expanding the DOM tree (does interactive navigation/expansion of a complex doc get any faster): visit https://en.wikipedia.org/wiki/Barack_Obama, right-click the "Barak Obama" header text and choose "inspect", press uparrow, and then press rightarrow 12 times.
 - manually typing in some specified styles (middle pane) while there are changes occurring in the dom view (left pane), with a page that rapidly updates an attribute value on 16 different divs. (I was hoping/guessing that my typing might be janky in current Nightly due to layout flushes having to flush content in the left pane, but it didn't seem to be janky, and adding this "contain" styling didn't make my overall keypress-handling duration any shorter.)