Bug 1448096 - use promiseDocumentFlushed to avoid sync reflows when resizing devtools windows, r?bgrins,mconley draft
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Tue, 19 Jun 2018 18:12:42 +0100
changeset 810732 7fca73d6ef3738f1e4eb1fec0142cf3478e6c6ad
parent 810712 ca98b6f47b4e33673291a4dc2a4ebca28ce6db00
push id114076
push userbmo:gijskruitbosch+bugs@gmail.com
push dateTue, 26 Jun 2018 10:38:23 +0000
reviewersbgrins, mconley
bugs1448096
milestone63.0a1
Bug 1448096 - use promiseDocumentFlushed to avoid sync reflows when resizing devtools windows, r?bgrins,mconley MozReview-Commit-ID: HATxzjdbQDj
devtools/client/inspector/inspector.js
--- 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.