Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-13 13:25:37 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1448096 - use promiseDocumentFlushed to avoid sync reflows when resizing devtools windows, r=bgrins,mconley

Browse Source 
MozReview-Commit-ID: HATxzjdbQDj

--HG--
extra : rebase_source : 374e1915b04ac76f3b82ac42bf4ad170e366ef0a
This commit is contained in:
Gijs Kruitbosch 2018-06-19 18:12:42 +01:00
parent b9474d997c
commit 5f6ae8c428
1 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
devtools/client/inspector/inspector.js
View File

@ -37,6 +37,8 @@ loader.lazyRequireGetter(this, "CommandUtils", "devtools/client/shared/developer
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");
@ -47,6 +49,9 @@ loader.lazyGetter(this, "TOOLBOX_L10N", function() {
// 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;
@ -582,18 +587,33 @@ Inspector.prototype = {
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() {