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

NEW
Unassigned

Status

defect
P4
normal
2 years ago
11 months ago

People

(Reporter: rjward0, Unassigned)

Tracking

(Blocks 1 bug, {perf})

unspecified
Dependency tree / graph
Bug Flags:
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [ohnoreflow][qf:p3][fxperf:p3])

Reporter

Description

2 years ago
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
Component: Untriaged → Developer Tools: Inspector
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.
Flags: qe-verify?
Priority: -- → P2
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.
Priority: P2 → P3
Whiteboard: [ohnoreflow][qf][photon-performance] → [ohnoreflow][qf][reserve-photon-performance]
Whiteboard: [ohnoreflow][qf][reserve-photon-performance] → [ohnoreflow][qf:p3][reserve-photon-performance]
Flags: qe-verify? → qe-verify-
Priority: P3 → P4
Keywords: perf
Whiteboard: [ohnoreflow][qf:p3][reserve-photon-performance] → [ohnoreflow][qf:p3][fxperf]
Whiteboard: [ohnoreflow][qf:p3][fxperf] → [ohnoreflow][qf:p3][fxperf:p3]

Updated

11 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.