Bug 1448096 - use promiseDocumentFlushed to avoid sync reflows when resizing devtools windows, r?bgrins,mconley
MozReview-Commit-ID: HATxzjdbQDj
--- a/devtools/client/inspector/inspector.js
+++ b/devtools/client/inspector/inspector.js
@@ -32,26 +32,31 @@ loader.lazyRequireGetter(this, "Highligh
loader.lazyRequireGetter(this, "nodeConstants", "devtools/shared/dom-node-constants");
loader.lazyRequireGetter(this, "Menu", "devtools/client/framework/menu");
loader.lazyRequireGetter(this, "MenuItem", "devtools/client/framework/menu-item");
loader.lazyRequireGetter(this, "ExtensionSidebar", "devtools/client/inspector/extensions/extension-sidebar");
loader.lazyRequireGetter(this, "CommandUtils", "devtools/client/shared/developer-toolbar", true);
loader.lazyRequireGetter(this, "clipboardHelper", "devtools/shared/platform/clipboard");
loader.lazyRequireGetter(this, "openContentLink", "devtools/client/shared/link", true);
+loader.lazyImporter(this, "DeferredTask", "resource://gre/modules/DeferredTask.jsm");
+
const {LocalizationHelper, localizeMarkup} = require("devtools/shared/l10n");
const INSPECTOR_L10N =
new LocalizationHelper("devtools/client/locales/inspector.properties");
loader.lazyGetter(this, "TOOLBOX_L10N", function() {
return new LocalizationHelper("devtools/client/locales/toolbox.properties");
});
// Sidebar dimensions
const INITIAL_SIDEBAR_SIZE = 350;
+// How long we wait to debounce resize events
+const LAZY_RESIZE_INTERVAL_MS = 200;
+
// If the toolbox's width is smaller than the given amount of pixels, the sidebar
// automatically switches from 'landscape/horizontal' to 'portrait/vertical' mode.
const PORTRAIT_MODE_WIDTH_THRESHOLD = 700;
// If the toolbox's width docked to the side is smaller than the given amount of pixels,
// the sidebar automatically switches from 'landscape/horizontal' to 'portrait/vertical'
// mode.
const SIDE_PORTAIT_MODE_WIDTH_THRESHOLD = 1000;
@@ -577,28 +582,43 @@ Inspector.prototype = {
teardownSplitter: function() {
this.panelWin.removeEventListener("resize", this.onPanelWindowResize, true);
this.sidebar.off("show", this.onSidebarShown);
this.sidebar.off("hide", this.onSidebarHidden);
this.sidebar.off("destroy", this.onSidebarHidden);
},
+ _onLazyPanelResize: async function() {
+ // We can be called on a closed window because of the deferred task.
+ if (window.closed) {
+ return;
+ }
+ // Use window.top because promiseDocumentFlushed() in a subframe doesn't
+ // work, see https://bugzilla.mozilla.org/show_bug.cgi?id=1441173
+ const useLandscapeMode = await window.top.promiseDocumentFlushed(() => {
+ return this.useLandscapeMode();
+ });
+ if (window.closed) {
+ return;
+ }
+ this.splitBox.setState({ vert: useLandscapeMode });
+ this.emit("inspector-resize");
+ },
+
/**
* If Toolbox width is less than 600 px, the splitter changes its mode
* to `horizontal` to support portrait view.
*/
onPanelWindowResize: function() {
- window.cancelIdleCallback(this._resizeTimerId);
- this._resizeTimerId = window.requestIdleCallback(() => {
- this.splitBox.setState({
- vert: this.useLandscapeMode(),
- });
- this.emit("inspector-resize");
- });
+ if (!this._lazyResizeHandler) {
+ this._lazyResizeHandler = new DeferredTask(this._onLazyPanelResize.bind(this),
+ LAZY_RESIZE_INTERVAL_MS, 0);
+ }
+ this._lazyResizeHandler.arm();
},
getSidebarSize: function() {
let width;
let height;
let splitSidebarWidth;
// Initialize splitter size from preferences.