1358390 - 1.24ms uninterruptible reflow at useLandscapeMode@chrome://devtools/content/inspector/inspector.js:460:27

Status: NEW

(DevTools :: Inspector, defect, P4)

Description

[hazel ward]

Here's the stack:

useLandscapeMode@chrome://devtools/content/inspector/inspector.js:460:27
onPanelWindowResize@chrome://devtools/content/inspector/inspector.js:515:13
EventListener.handleEvent*setupSplitter@chrome://devtools/content/inspector/inspector.js:490:5
setupSidebar@chrome://devtools/content/inspector/inspector.js:648:5
_deferredOpen@chrome://devtools/content/inspector/inspector.js:288:5
Inspector.prototype.init<@chrome://devtools/content/inspector/inspector.js:145:18
_run@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:311:39
process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:922:23
walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:806:7
Promise*scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:739:11
schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:770:7
completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:707:7
onPacket/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1329:9
DevTools RDP*request@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1269:14
generateRequestMethods/</frontProto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1426:14
WalkerFront<.querySelector<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/fronts/inspector.js:621:12
_getDefaultNodeForSelection/<@chrome://devtools/content/inspector/inspector.js:342:14
process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:922:23
walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:806:7
Promise*scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:739:11
schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:770:7
completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:707:7
onPacket/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1329:9
DevTools RDP*request@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1269:14
generateRequestMethods/</frontProto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1426:14
InspectorFront<.getPageStyle<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/fronts/inspector.js:978:12
_getPageStyle@chrome://devtools/content/inspector/inspector.js:302:12
Inspector.prototype.init<@chrome://devtools/content/inspector/inspector.js:138:11
_run@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:311:39
process@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:922:23
walkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:806:7
Promise*scheduleWalkerLoop@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:739:11
schedulePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:770:7
completePromise@resource://gre/modules/Promise.jsm -> resource://gre/modules/Promise-backend.js:707:7
onPacket/<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1329:9
DevTools RDP*request@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1269:14
generateRequestMethods/</frontProto[name]@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/protocol.js:1426:14
initCssProperties<@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/fronts/css-properties.js:237:16
_run@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:311:39
TaskImpl@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:273:3
asyncFunction@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:247:14
Inspector.prototype.init<@chrome://devtools/content/inspector/inspector.js:135:33
_run@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:311:39
TaskImpl@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:273:3
asyncFunction@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/shared/task.js:247:14
open@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/inspector/panel.js:12:12
onLoad@resource://gre/modules/commonjs/toolkit/loader.js -> resource://devtools/client/framework/toolbox.js:1475:19

Comment 1

[Patrick Brosset <:pbro>]

useLandscapeMode causes a sync reflow because it the clientWidth of the #inspector-splitter-box DOM element.
It does this once when the panel is opened and every time the window that contains the inspector is resized.

The reason it does this is so that the splitter (which separates the markup-view from the various sidebar panels) knows if it needs to be be horizontal or vertical (e.g. when the inspector is narrow, the sidebar is actually displayed below the markup-view).

The splitter is a React component today: devtools/client/shared/components/splitter/split-box.js

Rather than reading this value from JS and, therefore, causing a sync reflow, we could handle the layout switch in CSS only, with media queries, since the inspector panel lives in its own iframe. That would get rid of this reflow.
This would however require quite a lot of changes on the split-box component.

Comment 2

[Florian Quèze [:florian]]

Marking P3 because it's not something we want to work on as part of the photon-performance project, but if the devtools team has cycles to fix it, feel free to change the priority.