зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1505791 - Separate the browser panel from the notification box. r=dao,bgrins
This clarifies the intention of each caller, and opens up the possibility of converting the notificationbox element to a class that creates the DOM nodes on demand. Differential Revision: https://phabricator.services.mozilla.com/D10577 --HG-- extra : rebase_source : e311dd7144cf9f7cd513761f97bb3dd0a35dce71 extra : source : 9532194794ba9c87025da92cf70f76c21a277220
This commit is contained in:
Paolo Amadini
Родитель
2c8bf5ba4e
Коммит
4270e25239
|
|
@ -727,7 +727,7 @@ var gHistorySwipeAnimation = {
|
|||
*/
|
||||
_addBoxes: function HSA__addBoxes() {
|
||||
let browserStack =
|
||||
document.getAnonymousElementByAttribute(gBrowser.getNotificationBox(),
|
||||
document.getAnonymousElementByAttribute(gBrowser.getPanel(),
|
||||
"class", "browserStack");
|
||||
this._container = this._createElement("historySwipeAnimationContainer",
|
||||
"stack");
|
||||
|
|
|
|||
|
|
@ -295,9 +295,9 @@ window._gBrowser = {
|
|||
browser.loadURI = _loadURI.bind(null, browser);
|
||||
|
||||
let uniqueId = this._generateUniquePanelID();
|
||||
let notificationbox = this.getNotificationBox(browser);
|
||||
notificationbox.id = uniqueId;
|
||||
this.tabpanels.appendChild(notificationbox);
|
||||
let panel = this.getPanel(browser);
|
||||
panel.id = uniqueId;
|
||||
this.tabpanels.appendChild(panel);
|
||||
|
||||
let tab = this.tabs[0];
|
||||
tab.linkedPanel = uniqueId;
|
||||
|
|
@ -507,8 +507,14 @@ window._gBrowser = {
|
|||
async _createFindBar(aTab) {
|
||||
let findBar = document.createXULElement("findbar");
|
||||
let browser = this.getBrowserForTab(aTab);
|
||||
let browserContainer = this.getBrowserContainer(browser);
|
||||
browserContainer.appendChild(findBar);
|
||||
|
||||
// The findbar should be inserted after the browserStack and, if present for
|
||||
// this tab, after the StatusPanel as well.
|
||||
let insertAfterElement = browser.parentNode;
|
||||
if (insertAfterElement.nextElementSibling == StatusPanel.panel) {
|
||||
insertAfterElement = StatusPanel.panel;
|
||||
}
|
||||
insertAfterElement.insertAdjacentElement("afterend", findBar);
|
||||
|
||||
await new Promise(r => requestAnimationFrame(r));
|
||||
delete aTab._pendingFindBar;
|
||||
|
|
@ -529,9 +535,8 @@ window._gBrowser = {
|
|||
},
|
||||
|
||||
_appendStatusPanel() {
|
||||
let browser = this.selectedBrowser;
|
||||
let browserContainer = this.getBrowserContainer(browser);
|
||||
browserContainer.insertBefore(StatusPanel.panel, browser.parentNode.nextElementSibling);
|
||||
this.selectedBrowser.parentNode.insertAdjacentElement("afterend",
|
||||
StatusPanel.panel);
|
||||
},
|
||||
|
||||
_updateTabBarForPinnedTabs() {
|
||||
|
|
@ -640,11 +645,7 @@ window._gBrowser = {
|
|||
return this._tabForBrowser.get(aBrowser);
|
||||
},
|
||||
|
||||
getNotificationBox(aBrowser) {
|
||||
return this.getSidebarContainer(aBrowser).parentNode;
|
||||
},
|
||||
|
||||
getSidebarContainer(aBrowser) {
|
||||
getPanel(aBrowser) {
|
||||
return this.getBrowserContainer(aBrowser).parentNode;
|
||||
},
|
||||
|
||||
|
|
@ -652,6 +653,10 @@ window._gBrowser = {
|
|||
return (aBrowser || this.selectedBrowser).parentNode.parentNode;
|
||||
},
|
||||
|
||||
getNotificationBox(aBrowser) {
|
||||
return this.getBrowserContainer(aBrowser).firstElementChild;
|
||||
},
|
||||
|
||||
getTabModalPromptBox(aBrowser) {
|
||||
let browser = (aBrowser || this.selectedBrowser);
|
||||
if (!browser.tabModalPromptBox) {
|
||||
|
|
@ -1735,7 +1740,7 @@ window._gBrowser = {
|
|||
let browser = this._getPreloadedBrowser();
|
||||
|
||||
if (browser) {
|
||||
browser.remove();
|
||||
this.getPanel(browser).remove();
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -1786,8 +1791,8 @@ window._gBrowser = {
|
|||
let browser = this._createBrowser({ isPreloadBrowser: true, remoteType });
|
||||
this._preloadedBrowser = browser;
|
||||
|
||||
let notificationbox = this.getNotificationBox(browser);
|
||||
this.tabpanels.appendChild(notificationbox);
|
||||
let panel = this.getPanel(browser);
|
||||
this.tabpanels.appendChild(panel);
|
||||
|
||||
if (remoteType != E10SUtils.NOT_REMOTE) {
|
||||
// For remote browsers, we need to make sure that the webProgress is
|
||||
|
|
@ -1909,33 +1914,29 @@ window._gBrowser = {
|
|||
b.setAttribute("name", name);
|
||||
}
|
||||
|
||||
// Create the browserStack container
|
||||
let stack = document.createXULElement("stack");
|
||||
stack.className = "browserStack";
|
||||
stack.appendChild(b);
|
||||
stack.setAttribute("flex", "1");
|
||||
let notificationbox = document.createXULElement("notificationbox");
|
||||
notificationbox.setAttribute("notificationside", "top");
|
||||
|
||||
// We set large flex on both containers to allow the devtools toolbox to
|
||||
// set a flex attribute. We don't want the toolbox to actually take up free
|
||||
// space, but we do want it to collapse when the window shrinks, and with
|
||||
// flex=0 it can't. When the toolbox is on the bottom it's a sibling of
|
||||
// browserSidebarContainer, and when it's on the side it's a sibling of
|
||||
// browserStack, and when it's on the side it's a sibling of
|
||||
// browserContainer.
|
||||
let stack = document.createXULElement("stack");
|
||||
stack.className = "browserStack";
|
||||
stack.appendChild(b);
|
||||
stack.setAttribute("flex", "10000");
|
||||
|
||||
let browserContainer = document.createXULElement("vbox");
|
||||
browserContainer.className = "browserContainer";
|
||||
browserContainer.appendChild(notificationbox);
|
||||
browserContainer.appendChild(stack);
|
||||
browserContainer.setAttribute("flex", "10000");
|
||||
|
||||
let browserSidebarContainer = document.createXULElement("hbox");
|
||||
browserSidebarContainer.className = "browserSidebarContainer";
|
||||
browserSidebarContainer.appendChild(browserContainer);
|
||||
browserSidebarContainer.setAttribute("flex", "10000");
|
||||
|
||||
// Add the Message and the Browser to the box
|
||||
let notificationbox = document.createXULElement("notificationbox");
|
||||
notificationbox.setAttribute("flex", "1");
|
||||
notificationbox.setAttribute("notificationside", "top");
|
||||
notificationbox.appendChild(browserSidebarContainer);
|
||||
|
||||
// Prevent the superfluous initial load of a blank document
|
||||
// if we're going to load something other than about:blank.
|
||||
|
|
@ -2071,19 +2072,19 @@ window._gBrowser = {
|
|||
delete aTab._browserParams;
|
||||
delete aTab._cachedCurrentURI;
|
||||
|
||||
let notificationbox = this.getNotificationBox(browser);
|
||||
let panel = this.getPanel(browser);
|
||||
let uniqueId = this._generateUniquePanelID();
|
||||
notificationbox.id = uniqueId;
|
||||
panel.id = uniqueId;
|
||||
aTab.linkedPanel = uniqueId;
|
||||
|
||||
// Inject the <browser> into the DOM if necessary.
|
||||
if (!notificationbox.parentNode) {
|
||||
if (!panel.parentNode) {
|
||||
// NB: this appendChild call causes us to run constructors for the
|
||||
// browser element, which fires off a bunch of notifications. Some
|
||||
// of those notifications can cause code to run that inspects our
|
||||
// state, so it is important that the tab element is fully
|
||||
// initialized by this point.
|
||||
this.tabpanels.appendChild(notificationbox);
|
||||
this.tabpanels.appendChild(panel);
|
||||
}
|
||||
|
||||
// wire up a progress listener for the new browser object.
|
||||
|
|
@ -2190,7 +2191,7 @@ window._gBrowser = {
|
|||
}
|
||||
|
||||
aBrowser.destroy();
|
||||
this.getNotificationBox(aBrowser).remove();
|
||||
this.getPanel(aBrowser).remove();
|
||||
tab.removeAttribute("linkedpanel");
|
||||
|
||||
this._createLazyBrowser(tab);
|
||||
|
|
@ -2502,8 +2503,7 @@ window._gBrowser = {
|
|||
if (t.linkedBrowser) {
|
||||
this._tabFilters.delete(t);
|
||||
this._tabListeners.delete(t);
|
||||
let notificationbox = this.getNotificationBox(t.linkedBrowser);
|
||||
notificationbox.remove();
|
||||
this.getPanel(t.linkedBrowser).remove();
|
||||
}
|
||||
throw e;
|
||||
}
|
||||
|
|
@ -3100,7 +3100,7 @@ window._gBrowser = {
|
|||
// browser removal. So we remove the browser and the panel in two
|
||||
// steps.
|
||||
|
||||
var panel = this.getNotificationBox(browser);
|
||||
var panel = this.getPanel(browser);
|
||||
|
||||
// In the multi-process case, it's possible an asynchronous tab switch
|
||||
// is still underway. If so, then it's possible that the last visible
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ add_task(async function() {
|
|||
is(win.gBrowser.browsers.length, 1, "Window has one browser");
|
||||
is(win.gBrowser.selectedTab, newTab, "Remaining tab is selected");
|
||||
is(win.gBrowser.selectedBrowser, newBrowser, "Browser for remaining tab is selected");
|
||||
is(win.gBrowser.tabbox.selectedPanel, newBrowser.parentNode.parentNode.parentNode.parentNode, "Panel for remaining tab is selected");
|
||||
is(win.gBrowser.tabbox.selectedPanel, newBrowser.parentNode.parentNode.parentNode, "Panel for remaining tab is selected");
|
||||
}
|
||||
|
||||
await promiseWindowClosed(win);
|
||||
|
|
|
|||
|
|
@ -36,8 +36,8 @@ function testBottomHost() {
|
|||
checkHostType(toolbox, BOTTOM);
|
||||
|
||||
// test UI presence
|
||||
const nbox = gBrowser.getNotificationBox();
|
||||
const iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
|
||||
const panel = gBrowser.getPanel();
|
||||
const iframe = panel.querySelector(".devtools-toolbox-bottom-iframe");
|
||||
ok(iframe, "toolbox bottom iframe exists");
|
||||
|
||||
checkToolboxLoaded(iframe);
|
||||
|
|
@ -48,11 +48,11 @@ async function testLeftHost() {
|
|||
checkHostType(toolbox, LEFT);
|
||||
|
||||
// test UI presence
|
||||
const nbox = gBrowser.getNotificationBox();
|
||||
const bottom = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
|
||||
const panel = gBrowser.getPanel();
|
||||
const bottom = panel.querySelector(".devtools-toolbox-bottom-iframe");
|
||||
ok(!bottom, "toolbox bottom iframe doesn't exist");
|
||||
|
||||
const iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
|
||||
const iframe = panel.querySelector(".devtools-toolbox-side-iframe");
|
||||
ok(iframe, "toolbox side iframe exists");
|
||||
|
||||
checkToolboxLoaded(iframe);
|
||||
|
|
@ -63,11 +63,11 @@ async function testRightHost() {
|
|||
checkHostType(toolbox, RIGHT);
|
||||
|
||||
// test UI presence
|
||||
const nbox = gBrowser.getNotificationBox();
|
||||
const bottom = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
|
||||
const panel = gBrowser.getPanel();
|
||||
const bottom = panel.querySelector(".devtools-toolbox-bottom-iframe");
|
||||
ok(!bottom, "toolbox bottom iframe doesn't exist");
|
||||
|
||||
const iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
|
||||
const iframe = panel.querySelector(".devtools-toolbox-side-iframe");
|
||||
ok(iframe, "toolbox side iframe exists");
|
||||
|
||||
checkToolboxLoaded(iframe);
|
||||
|
|
@ -77,8 +77,8 @@ async function testWindowHost() {
|
|||
await toolbox.switchHost(WINDOW);
|
||||
checkHostType(toolbox, WINDOW);
|
||||
|
||||
const nbox = gBrowser.getNotificationBox();
|
||||
const sidebar = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
|
||||
const panel = gBrowser.getPanel();
|
||||
const sidebar = panel.querySelector(".devtools-toolbox-side-iframe");
|
||||
ok(!sidebar, "toolbox sidebar iframe doesn't exist");
|
||||
|
||||
const win = Services.wm.getMostRecentWindow("devtools:toolbox");
|
||||
|
|
|
|||
|
|
@ -17,21 +17,21 @@ add_task(async function() {
|
|||
Services.prefs.setIntPref("devtools.toolbox.sidebar.width", 10000);
|
||||
|
||||
const tab = await addTab(URL);
|
||||
const nbox = gBrowser.getNotificationBox();
|
||||
const {clientHeight: nboxHeight, clientWidth: nboxWidth} = nbox;
|
||||
const panel = gBrowser.getPanel();
|
||||
const {clientHeight: panelHeight, clientWidth: panelWidth} = panel;
|
||||
const target = await TargetFactory.forTab(tab);
|
||||
const toolbox = await gDevTools.showToolbox(target);
|
||||
|
||||
is(nbox.clientHeight, nboxHeight, "Opening the toolbox hasn't changed the height of the nbox");
|
||||
is(nbox.clientWidth, nboxWidth, "Opening the toolbox hasn't changed the width of the nbox");
|
||||
is(panel.clientHeight, panelHeight, "Opening the toolbox hasn't changed the height of the panel");
|
||||
is(panel.clientWidth, panelWidth, "Opening the toolbox hasn't changed the width of the panel");
|
||||
|
||||
let iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
|
||||
is(iframe.clientHeight, nboxHeight - 25, "The iframe fits within the available space");
|
||||
let iframe = panel.querySelector(".devtools-toolbox-bottom-iframe");
|
||||
is(iframe.clientHeight, panelHeight - 25, "The iframe fits within the available space");
|
||||
|
||||
await toolbox.switchHost(Toolbox.HostType.RIGHT);
|
||||
iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
|
||||
iframe = panel.querySelector(".devtools-toolbox-side-iframe");
|
||||
iframe.style.minWidth = "1px"; // Disable the min width set in css
|
||||
is(iframe.clientWidth, nboxWidth - 25, "The iframe fits within the available space");
|
||||
is(iframe.clientWidth, panelWidth - 25, "The iframe fits within the available space");
|
||||
|
||||
await cleanup(toolbox);
|
||||
});
|
||||
|
|
@ -43,19 +43,19 @@ add_task(async function() {
|
|||
Services.prefs.setIntPref("devtools.toolbox.sidebar.width", 100);
|
||||
|
||||
const tab = await addTab(URL);
|
||||
const nbox = gBrowser.getNotificationBox();
|
||||
const {clientHeight: nboxHeight, clientWidth: nboxWidth} = nbox;
|
||||
const panel = gBrowser.getPanel();
|
||||
const {clientHeight: panelHeight, clientWidth: panelWidth} = panel;
|
||||
const target = await TargetFactory.forTab(tab);
|
||||
const toolbox = await gDevTools.showToolbox(target);
|
||||
|
||||
is(nbox.clientHeight, nboxHeight, "Opening the toolbox hasn't changed the height of the nbox");
|
||||
is(nbox.clientWidth, nboxWidth, "Opening the toolbox hasn't changed the width of the nbox");
|
||||
is(panel.clientHeight, panelHeight, "Opening the toolbox hasn't changed the height of the panel");
|
||||
is(panel.clientWidth, panelWidth, "Opening the toolbox hasn't changed the width of the panel");
|
||||
|
||||
let iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-bottom-iframe");
|
||||
let iframe = panel.querySelector(".devtools-toolbox-bottom-iframe");
|
||||
is(iframe.clientHeight, 100, "The iframe is resized properly");
|
||||
|
||||
await toolbox.switchHost(Toolbox.HostType.RIGHT);
|
||||
iframe = document.getAnonymousElementByAttribute(nbox, "class", "devtools-toolbox-side-iframe");
|
||||
iframe = panel.querySelector(".devtools-toolbox-side-iframe");
|
||||
iframe.style.minWidth = "1px"; // Disable the min width set in css
|
||||
is(iframe.clientWidth, 100, "The iframe is resized properly");
|
||||
|
||||
|
|
|
|||
|
|
@ -50,7 +50,8 @@ BottomHost.prototype = {
|
|||
|
||||
const gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
|
||||
const ownerDocument = gBrowser.ownerDocument;
|
||||
this._nbox = gBrowser.getNotificationBox(this.hostTab.linkedBrowser);
|
||||
this._browserContainer =
|
||||
gBrowser.getBrowserContainer(this.hostTab.linkedBrowser);
|
||||
|
||||
this._splitter = ownerDocument.createXULElement("splitter");
|
||||
this._splitter.setAttribute("class", "devtools-horizontal-splitter");
|
||||
|
|
@ -62,11 +63,11 @@ BottomHost.prototype = {
|
|||
this.frame.className = "devtools-toolbox-bottom-iframe";
|
||||
this.frame.height = Math.min(
|
||||
Services.prefs.getIntPref(this.heightPref),
|
||||
this._nbox.clientHeight - MIN_PAGE_SIZE
|
||||
this._browserContainer.clientHeight - MIN_PAGE_SIZE
|
||||
);
|
||||
|
||||
this._nbox.appendChild(this._splitter);
|
||||
this._nbox.appendChild(this.frame);
|
||||
this._browserContainer.appendChild(this._splitter);
|
||||
this._browserContainer.appendChild(this.frame);
|
||||
|
||||
this.frame.tooltip = "aHTMLTooltip";
|
||||
|
||||
|
|
@ -107,10 +108,10 @@ BottomHost.prototype = {
|
|||
this._destroyed = true;
|
||||
|
||||
Services.prefs.setIntPref(this.heightPref, this.frame.height);
|
||||
this._nbox.removeChild(this._splitter);
|
||||
this._nbox.removeChild(this.frame);
|
||||
this._browserContainer.removeChild(this._splitter);
|
||||
this._browserContainer.removeChild(this.frame);
|
||||
this.frame = null;
|
||||
this._nbox = null;
|
||||
this._browserContainer = null;
|
||||
this._splitter = null;
|
||||
}
|
||||
|
||||
|
|
@ -137,8 +138,8 @@ class SidebarHost {
|
|||
await gDevToolsBrowser.loadBrowserStyleSheet(this.hostTab.ownerGlobal);
|
||||
const gBrowser = this.hostTab.ownerDocument.defaultView.gBrowser;
|
||||
const ownerDocument = gBrowser.ownerDocument;
|
||||
this._browser = gBrowser.getBrowserContainer(this.hostTab.linkedBrowser);
|
||||
this._sidebar = gBrowser.getSidebarContainer(this.hostTab.linkedBrowser);
|
||||
this._browserContainer = gBrowser.getBrowserContainer(this.hostTab.linkedBrowser);
|
||||
this._browserPanel = gBrowser.getPanel(this.hostTab.linkedBrowser);
|
||||
|
||||
this._splitter = ownerDocument.createXULElement("splitter");
|
||||
this._splitter.setAttribute("class", "devtools-side-splitter");
|
||||
|
|
@ -149,7 +150,7 @@ class SidebarHost {
|
|||
|
||||
this.frame.width = Math.min(
|
||||
Services.prefs.getIntPref(this.widthPref),
|
||||
this._sidebar.clientWidth - MIN_PAGE_SIZE
|
||||
this._browserPanel.clientWidth - MIN_PAGE_SIZE
|
||||
);
|
||||
|
||||
// We should consider the direction when changing the dock position.
|
||||
|
|
@ -159,11 +160,11 @@ class SidebarHost {
|
|||
|
||||
if (isLTR && this.type == "right" ||
|
||||
!isLTR && this.type == "left") {
|
||||
this._sidebar.appendChild(this._splitter);
|
||||
this._sidebar.appendChild(this.frame);
|
||||
this._browserPanel.appendChild(this._splitter);
|
||||
this._browserPanel.appendChild(this.frame);
|
||||
} else {
|
||||
this._sidebar.insertBefore(this.frame, this._browser);
|
||||
this._sidebar.insertBefore(this._splitter, this._browser);
|
||||
this._browserPanel.insertBefore(this.frame, this._browserContainer);
|
||||
this._browserPanel.insertBefore(this._splitter, this._browserContainer);
|
||||
}
|
||||
|
||||
this.frame.tooltip = "aHTMLTooltip";
|
||||
|
|
@ -203,8 +204,8 @@ class SidebarHost {
|
|||
this._destroyed = true;
|
||||
|
||||
Services.prefs.setIntPref(this.widthPref, this.frame.width);
|
||||
this._sidebar.removeChild(this._splitter);
|
||||
this._sidebar.removeChild(this.frame);
|
||||
this._browserPanel.removeChild(this._splitter);
|
||||
this._browserPanel.removeChild(this.frame);
|
||||
}
|
||||
|
||||
return promise.resolve(null);
|
||||
|
|
|
|||
|
|
@ -917,12 +917,7 @@ Tester.prototype = {
|
|||
ChromeUtils.import("resource://gre/modules/BackgroundPageThumbs.jsm", {});
|
||||
BackgroundPageThumbs._destroy();
|
||||
|
||||
// Destroy preloaded browsers.
|
||||
if (gBrowser._preloadedBrowser) {
|
||||
let browser = gBrowser._preloadedBrowser;
|
||||
gBrowser._preloadedBrowser = null;
|
||||
gBrowser.getNotificationBox(browser).remove();
|
||||
}
|
||||
gBrowser.removePreloadedBrowser();
|
||||
}
|
||||
|
||||
// Schedule GC and CC runs before finishing in order to detect
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче