Bug 1634030: lazify main app menu r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D84014
This commit is contained in:
Emma Malysz
2020-08-07 22:02:32 +00:00
parent b8789f7008
commit 974077d255
14 changed files with 444 additions and 335 deletions

View File

@@ -171,7 +171,11 @@ var gSync = {
this._generateNodeGetters();
// Label for the sync buttons.
if (!this.appMenuLabel) {
const appMenuLabel = PanelMultiView.getViewNode(
document,
"appMenu-fxa-label"
);
if (!appMenuLabel) {
// We are in a window without our elements - just abort now, without
// setting this._initialized, so we don't attempt to remove observers.
return;
@@ -489,7 +493,10 @@ var gSync = {
"defaultLabel"
);
const appMenuFxAButtonEl = document.getElementById("appMenu-fxa-label");
const appMenuFxAButtonEl = PanelMultiView.getViewNode(
document,
"appMenu-fxa-label"
);
let panelTitle = this.fxaStrings.GetStringFromName("account.title");
@@ -617,13 +624,26 @@ var gSync = {
},
updatePanelPopup(state) {
let defaultLabel = this.appMenuStatus.getAttribute("defaultlabel");
const appMenuStatus = PanelMultiView.getViewNode(
document,
"appMenu-fxa-status"
);
const appMenuLabel = PanelMultiView.getViewNode(
document,
"appMenu-fxa-label"
);
const appMenuAvatar = PanelMultiView.getViewNode(
document,
"appMenu-fxa-avatar"
);
let defaultLabel = appMenuStatus.getAttribute("defaultlabel");
const status = state.status;
// Reset the status bar to its original state.
this.appMenuLabel.setAttribute("label", defaultLabel);
this.appMenuStatus.removeAttribute("fxastatus");
this.appMenuAvatar.style.removeProperty("list-style-image");
this.appMenuLabel.classList.remove("subviewbutton-nav");
appMenuLabel.setAttribute("label", defaultLabel);
appMenuStatus.removeAttribute("fxastatus");
appMenuAvatar.style.removeProperty("list-style-image");
appMenuLabel.classList.remove("subviewbutton-nav");
if (status == UIState.STATUS_NOT_CONFIGURED) {
return;
@@ -635,28 +655,28 @@ var gSync = {
"reconnectDescription",
[state.email]
);
let errorLabel = this.appMenuStatus.getAttribute("errorlabel");
this.appMenuStatus.setAttribute("fxastatus", "login-failed");
this.appMenuLabel.setAttribute("label", errorLabel);
this.appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
let errorLabel = appMenuStatus.getAttribute("errorlabel");
appMenuStatus.setAttribute("fxastatus", "login-failed");
appMenuLabel.setAttribute("label", errorLabel);
appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
return;
} else if (status == UIState.STATUS_NOT_VERIFIED) {
let tooltipDescription = this.fxaStrings.formatStringFromName(
"verifyDescription",
[state.email]
);
let unverifiedLabel = this.appMenuStatus.getAttribute("unverifiedlabel");
this.appMenuStatus.setAttribute("fxastatus", "unverified");
this.appMenuLabel.setAttribute("label", unverifiedLabel);
this.appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
let unverifiedLabel = appMenuStatus.getAttribute("unverifiedlabel");
appMenuStatus.setAttribute("fxastatus", "unverified");
appMenuLabel.setAttribute("label", unverifiedLabel);
appMenuStatus.setAttribute("tooltiptext", tooltipDescription);
return;
}
// At this point we consider sync to be logged-in.
this.appMenuStatus.setAttribute("fxastatus", "signedin");
this.appMenuLabel.setAttribute("label", state.displayName || state.email);
this.appMenuLabel.classList.add("subviewbutton-nav");
this.appMenuStatus.removeAttribute("tooltiptext");
appMenuStatus.setAttribute("fxastatus", "signedin");
appMenuLabel.setAttribute("label", state.displayName || state.email);
appMenuLabel.classList.add("subviewbutton-nav");
appMenuStatus.removeAttribute("tooltiptext");
},
updateState(state) {

View File

@@ -734,6 +734,225 @@
</popupset>
<html:template id="appMenu-viewCache">
<panelview id="appMenu-mainView" class="PanelUI-subView"
descriptionheightworkaround="true">
<vbox class="panel-subview-body">
<vbox id="appMenu-addon-banners"/>
<toolbarbutton id="appMenu-update-banner" class="panel-banner-item"
data-l10n-id="appmenuitem-update-banner"
data-l10n-attrs="label-update-downloading"
label-update-available="&updateAvailable.panelUI.label;"
label-update-manual="&updateManual.panelUI.label;"
label-update-unsupported="&updateUnsupported.panelUI.label;"
label-update-restart="&updateRestart.panelUI.label2;"
oncommand="PanelUI._onBannerItemSelected(event)"
wrap="true"
hidden="true"/>
<toolbaritem id="appMenu-fxa-status"
class="sync-ui-item"
defaultlabel="&fxa.menu.signin.label;"
flex="1">
<image id="appMenu-fxa-avatar"/>
<toolbarbutton id="appMenu-fxa-label"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&fxa.menu.signin.label;"
closemenu="none"
oncommand="gSync.toggleAccountPanel('PanelUI-fxa', this, event)"/>
</toolbaritem>
<toolbarseparator class="sync-ui-item"/>
<toolbaritem>
<toolbarbutton id="appMenu-protection-report-button"
class="subviewbutton subviewbutton-iconic"
oncommand="gProtectionsHandler.openProtections(); gProtectionsHandler.recordClick('open_full_report', null, 'app_menu');">
<image id="appMenu-protection-report-icon" class="toolbarbutton-icon"/>
<label id="appMenu-protection-report-text"
class="toolbarbutton-text"
data-l10n-id="appmenuitem-protection-dashboard-title">
</label>
</toolbarbutton>
</toolbaritem>
<toolbarseparator id="appMenu-tp-separator"/>
<toolbarbutton id="appMenu-new-window-button"
class="subviewbutton subviewbutton-iconic"
label="&newNavigatorCmd.label;"
key="key_newNavigator"
command="cmd_newNavigator"/>
<toolbarbutton id="appMenu-private-window-button"
class="subviewbutton subviewbutton-iconic"
label="&newPrivateWindow.label;"
key="key_privatebrowsing"
command="Tools:PrivateBrowsing"/>
#ifdef NIGHTLY_BUILD
<toolbarbutton id="appMenu-fission-window-button"
class="subviewbutton subviewbutton-iconic"
label="New Fission Window"
accesskey="s"
command="Tools:FissionWindow"/>
<toolbarbutton id="appMenu-non-fission-window-button"
class="subviewbutton subviewbutton-iconic"
label="New Non-Fission Window"
accesskey="s"
command="Tools:NonFissionWindow"/>
#endif
<toolbarbutton id="appMenuRestoreLastSession"
label="&appMenuHistory.restoreSession.label;"
class="subviewbutton subviewbutton-iconic"
command="Browser:RestoreLastSession"/>
<toolbarseparator/>
<toolbaritem id="appMenu-zoom-controls" class="toolbaritem-combined-buttons" closemenu="none">
<!-- Use a spacer, because panel sizing code gets confused when using CSS methods. -->
<spacer class="before-label"/>
<label value="&fullZoom.label;"/>
<!-- This spacer keeps the scrollbar from overlapping the view. -->
<spacer class="after-label"/>
<toolbarbutton id="appMenu-zoomReduce-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_fullZoomReduce"
data-l10n-id="appmenuitem-zoom-reduce"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-zoomReset-button"
class="subviewbutton"
command="cmd_fullZoomReset"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-zoomEnlarge-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_fullZoomEnlarge"
data-l10n-id="appmenuitem-zoom-enlarge"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarseparator orient="vertical"/>
<toolbarbutton id="appMenu-fullscreen-button"
class="subviewbutton subviewbutton-iconic"
label="&fullScreenCmd.label;"
observes="View:FullScreen"
type="checkbox"
closemenu="auto"
onclick="if (event.button == 0) this.closest('panel').hidePopup();"
tooltip="dynamic-shortcut-tooltip"/>
</toolbaritem>
<toolbarseparator/>
<toolbaritem id="appMenu-edit-controls" class="toolbaritem-combined-buttons" closemenu="none">
<!-- Use a spacer, because panel sizing code gets confused when using CSS methods. -->
<spacer class="before-label"/>
<label value="&editMenu.label;"/>
<!-- This spacer keeps the scrollbar from overlapping the view. -->
<spacer class="after-label"/>
<toolbarbutton id="appMenu-cut-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_cut"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-copy-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_copy"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-paste-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_paste"
tooltip="dynamic-shortcut-tooltip"/>
</toolbaritem>
<toolbarseparator/>
<toolbarbutton id="appMenu-library-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&places.library.title;"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-libraryView', this)"/>
<toolbarbutton id="appMenu-logins-button"
class="subviewbutton subviewbutton-iconic"
label="&logins.label;"
oncommand="LoginHelper.openPasswordManager(window, { entryPoint: 'mainmenu' })"
/>
<toolbarbutton id="appMenu-addons-button"
class="subviewbutton subviewbutton-iconic"
label="&addons.label;"
key="key_openAddons"
command="Tools:Addons"
/>
<toolbarbutton id="appMenu-ssb-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="Sites in App Mode"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-SSBView', this)"
hidden="true" persist="hidden"/>
<toolbarbutton id="appMenu-preferences-button"
class="subviewbutton subviewbutton-iconic"
#ifdef XP_WIN
label="&preferencesCmd2.label;"
#else
label="&preferencesCmdUnix.label;"
#ifdef XP_MACOSX
key="key_preferencesCmdMac"
#endif
#endif
oncommand="openPreferences()"
/>
<toolbarbutton id="appMenu-customize-button"
class="subviewbutton subviewbutton-iconic"
data-l10n-id="appmenuitem-customize-mode"
command="cmd_CustomizeToolbars"
/>
<toolbarseparator/>
<toolbarbutton id="appMenu-open-file-button"
class="subviewbutton"
label="&openFileCmd.label;"
key="openFileKb"
command="Browser:OpenFile"
/>
<toolbarbutton id="appMenu-save-file-button"
class="subviewbutton"
data-l10n-id="toolbar-button-page-save"
key="key_savePage"
command="Browser:SavePage"
/>
<toolbarbutton id="appMenu-print-button"
class="subviewbutton subviewbutton-iconic"
label="&printCmd.label;"
#ifdef XP_MACOSX
key="printKb"
command="cmd_print"
#else
command="cmd_printPreview"
#endif
/>
<toolbarseparator/>
<toolbarbutton id="appMenu-find-button"
class="subviewbutton subviewbutton-iconic"
label="&findOnCmd.label;"
key="key_find"
command="cmd_find"/>
<toolbarbutton id="appMenu-more-button"
class="subviewbutton subviewbutton-nav"
label="&moreMenu.label;"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-moreView', this)"/>
<toolbarbutton id="appMenu-developer-button"
class="subviewbutton subviewbutton-nav"
label="&webDeveloperMenu.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-developer', this)"/>
<toolbarbutton id="appMenu-whatsnew-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
hidden="true"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-whatsNew', this)"/>
<toolbarbutton id="appMenu-help-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&appMenuHelp.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-helpView', this)"/>
#ifndef XP_MACOSX
<toolbarseparator/>
<toolbarbutton id="appMenu-quit-button"
class="subviewbutton subviewbutton-iconic"
#ifdef XP_WIN
label="&quitApplicationCmdWin2.label;"
tooltiptext="&quitApplicationCmdWin2.tooltip;"
#else
label="&quitApplicationCmd.label;"
#endif
key="key_quitApplication"
command="cmd_quitApplication"/>
#endif
</vbox>
</panelview>
<panelview id="PanelUI-history" flex="1">
<vbox class="panel-subview-body">
<toolbarbutton id="appMenuViewHistorySidebar"

View File

@@ -22,7 +22,7 @@ add_task(async function test_ui_state_notification_calls_updateAllUI() {
});
add_task(async function test_ui_state_signedin() {
await openTabAndPanel();
await openTabAndRemoteTabsPanel();
const relativeDateAnchor = new Date();
let state = {
@@ -45,11 +45,6 @@ add_task(async function test_ui_state_signedin() {
};
gSync.updateAllUI(state);
checkPanelUIStatusBar({
label: "foo@bar.com",
fxastatus: "signedin",
syncing: false,
});
checkRemoteTabsPanel("PanelUI-remotetabs-main", false);
checkMenuBarItem("sync-syncnowitem");
checkFxaToolbarButtonPanel({
@@ -70,7 +65,17 @@ add_task(async function test_ui_state_signedin() {
});
checkFxAAvatar("signedin");
gSync.relativeTimeFormat = origRelativeTimeFormat;
await closeTabAndPanel();
await closeRemoteTabsPanel();
await openMainPanel();
checkPanelUIStatusBar({
label: "foo@bar.com",
fxastatus: "signedin",
syncing: false,
});
await closeTabAndMainPanel();
});
add_task(async function test_ui_state_syncing() {
@@ -101,7 +106,7 @@ add_task(async function test_ui_state_syncing() {
});
add_task(async function test_ui_state_unconfigured() {
await openTabAndPanel();
await openTabAndRemoteTabsPanel();
let state = {
status: UIState.STATUS_NOT_CONFIGURED,
@@ -133,11 +138,19 @@ add_task(async function test_ui_state_unconfigured() {
],
});
checkFxAAvatar("not_configured");
await closeTabAndPanel();
await closeRemoteTabsPanel();
await openMainPanel();
checkPanelUIStatusBar({
label: signedOffLabel,
});
await closeTabAndMainPanel();
});
add_task(async function test_ui_state_syncdisabled() {
await openTabAndPanel();
await openTabAndRemoteTabsPanel();
let state = {
status: UIState.STATUS_SIGNED_IN,
@@ -148,11 +161,6 @@ add_task(async function test_ui_state_syncdisabled() {
};
gSync.updateAllUI(state);
checkPanelUIStatusBar({
label: "foo@bar.com",
fxastatus: "signedin",
syncing: false,
});
checkRemoteTabsPanel("PanelUI-remotetabs-syncdisabled", false);
checkMenuBarItem("sync-enable");
checkFxaToolbarButtonPanel({
@@ -174,11 +182,21 @@ add_task(async function test_ui_state_syncdisabled() {
],
});
checkFxAAvatar("signedin");
await closeTabAndPanel();
await closeRemoteTabsPanel();
await openMainPanel();
checkPanelUIStatusBar({
label: "foo@bar.com",
fxastatus: "signedin",
syncing: false,
});
await closeTabAndMainPanel();
});
add_task(async function test_ui_state_unverified() {
await openTabAndPanel();
await openTabAndRemoteTabsPanel();
let state = {
status: UIState.STATUS_NOT_VERIFIED,
@@ -191,11 +209,6 @@ add_task(async function test_ui_state_unverified() {
const expectedLabel = gSync.fxaStrings.GetStringFromName(
"account.finishAccountSetup"
);
checkPanelUIStatusBar({
label: expectedLabel,
fxastatus: "unverified",
syncing: false,
});
checkRemoteTabsPanel("PanelUI-remotetabs-unverified", false);
checkMenuBarItem("sync-unverifieditem");
@@ -217,11 +230,20 @@ add_task(async function test_ui_state_unverified() {
],
});
checkFxAAvatar("unverified");
await closeTabAndPanel();
await closeRemoteTabsPanel();
await openMainPanel();
checkPanelUIStatusBar({
label: expectedLabel,
fxastatus: "unverified",
syncing: false,
});
await closeTabAndMainPanel();
});
add_task(async function test_ui_state_loginFailed() {
await openTabAndPanel();
await openTabAndRemoteTabsPanel();
let state = {
status: UIState.STATUS_LOGIN_FAILED,
@@ -234,11 +256,6 @@ add_task(async function test_ui_state_loginFailed() {
"account.reconnectToFxA"
);
checkPanelUIStatusBar({
label: expectedLabel,
fxastatus: "login-failed",
syncing: false,
});
checkRemoteTabsPanel("PanelUI-remotetabs-reauthsync", false);
checkMenuBarItem("sync-reauthitem");
checkFxaToolbarButtonPanel({
@@ -259,7 +276,56 @@ add_task(async function test_ui_state_loginFailed() {
],
});
checkFxAAvatar("login-failed");
await closeTabAndPanel();
await closeRemoteTabsPanel();
await openMainPanel();
checkPanelUIStatusBar({
label: expectedLabel,
fxastatus: "login-failed",
syncing: false,
});
await closeTabAndMainPanel();
});
add_task(async function test_account_settings_state_signedin() {
await BrowserTestUtils.openNewForegroundTab(gBrowser, "https://example.com/");
const relativeDateAnchor = new Date();
let state = {
status: UIState.STATUS_SIGNED_IN,
syncEnabled: true,
email: "foo@bar.com",
displayName: "Foo Bar",
avatarURL: "https://foo.bar",
lastSync: new Date(),
syncing: false,
};
const origRelativeTimeFormat = gSync.relativeTimeFormat;
gSync.relativeTimeFormat = {
formatBestUnit(date) {
return origRelativeTimeFormat.formatBestUnit(date, {
now: relativeDateAnchor,
});
},
};
gSync.updateAllUI(state);
await checkAccountPanel([
"PanelUI-fxa-menu-account-settings-button",
"PanelUI-fxa-menu-account-signout-button",
]);
await closeRemoteTabsPanel();
await openMainPanel();
checkPanelUIStatusBar({
label: "foo@bar.com",
fxastatus: "signedin",
syncing: false,
});
await closeTabAndMainPanel();
});
function checkPanelUIStatusBar({ label, fxastatus, syncing }) {
@@ -403,42 +469,6 @@ function checkFxAAvatar(fxaStatus) {
}
}
add_task(async function test_account_settings_state_signedin() {
await BrowserTestUtils.openNewForegroundTab(gBrowser, "https://example.com/");
const relativeDateAnchor = new Date();
let state = {
status: UIState.STATUS_SIGNED_IN,
syncEnabled: true,
email: "foo@bar.com",
displayName: "Foo Bar",
avatarURL: "https://foo.bar",
lastSync: new Date(),
syncing: false,
};
const origRelativeTimeFormat = gSync.relativeTimeFormat;
gSync.relativeTimeFormat = {
formatBestUnit(date) {
return origRelativeTimeFormat.formatBestUnit(date, {
now: relativeDateAnchor,
});
},
};
gSync.updateAllUI(state);
checkPanelUIStatusBar({
label: "foo@bar.com",
fxastatus: "signedin",
syncing: false,
});
await checkAccountPanel([
"PanelUI-fxa-menu-account-settings-button",
"PanelUI-fxa-menu-account-signout-button",
]);
await closeTabAndPanel();
});
async function checkAccountPanel(enabledItems) {
let fxaButton = document.getElementById("fxa-toolbar-menu-button");
fxaButton.click();
@@ -506,7 +536,7 @@ function promiseObserver(topic) {
});
}
async function openTabAndPanel() {
async function openTabAndRemoteTabsPanel() {
await BrowserTestUtils.openNewForegroundTab(gBrowser, "https://example.com/");
let fxaButton = document.getElementById("fxa-toolbar-menu-button");
@@ -524,11 +554,24 @@ async function openTabAndPanel() {
await BrowserTestUtils.waitForEvent(remoteTabsView, "ViewShown");
}
async function closeTabAndPanel() {
async function closeRemoteTabsPanel() {
let fxaView = document.getElementById("PanelUI-fxa");
let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);
fxaView.closest("panel").hidePopup();
await hidden;
}
async function openMainPanel() {
let menuButton = document.getElementById("PanelUI-menu-button");
menuButton.click();
await BrowserTestUtils.waitForEvent(window.PanelUI.mainView, "ViewShown");
}
async function closeTabAndMainPanel() {
let mainView = document.getElementById("appMenu-mainView");
let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);
mainView.closest("panel").hidePopup();
await hidden;
BrowserTestUtils.removeTab(gBrowser.selectedTab);
}

View File

@@ -782,7 +782,10 @@ var PanelMultiView = class extends AssociatedToNode {
*/
async _showMainView() {
let nextPanelView = PanelView.forNode(
this.document.getElementById(this.node.getAttribute("mainViewId"))
PanelMultiView.getViewNode(
this.document,
this.node.getAttribute("mainViewId")
)
);
// If the view is already open in another panel, close the panel first.

View File

@@ -218,225 +218,6 @@
noautofocus="true">
<panelmultiview id="appMenu-multiView" mainViewId="appMenu-mainView"
viewCacheId="appMenu-viewCache">
<panelview id="appMenu-mainView" class="PanelUI-subView"
descriptionheightworkaround="true">
<vbox class="panel-subview-body">
<vbox id="appMenu-addon-banners"/>
<toolbarbutton id="appMenu-update-banner" class="panel-banner-item"
data-l10n-id="appmenuitem-update-banner"
data-l10n-attrs="label-update-downloading"
label-update-available="&updateAvailable.panelUI.label;"
label-update-manual="&updateManual.panelUI.label;"
label-update-unsupported="&updateUnsupported.panelUI.label;"
label-update-restart="&updateRestart.panelUI.label2;"
oncommand="PanelUI._onBannerItemSelected(event)"
wrap="true"
hidden="true"/>
<toolbaritem id="appMenu-fxa-status"
class="sync-ui-item"
defaultlabel="&fxa.menu.signin.label;"
flex="1">
<image id="appMenu-fxa-avatar"/>
<toolbarbutton id="appMenu-fxa-label"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&fxa.menu.signin.label;"
closemenu="none"
oncommand="gSync.toggleAccountPanel('PanelUI-fxa', this, event)"/>
</toolbaritem>
<toolbarseparator class="sync-ui-item"/>
<toolbaritem>
<toolbarbutton id="appMenu-protection-report-button"
class="subviewbutton subviewbutton-iconic"
oncommand="gProtectionsHandler.openProtections(); gProtectionsHandler.recordClick('open_full_report', null, 'app_menu');">
<image id="appMenu-protection-report-icon" class="toolbarbutton-icon"/>
<label id="appMenu-protection-report-text"
class="toolbarbutton-text"
data-l10n-id="appmenuitem-protection-dashboard-title">
</label>
</toolbarbutton>
</toolbaritem>
<toolbarseparator id="appMenu-tp-separator"/>
<toolbarbutton id="appMenu-new-window-button"
class="subviewbutton subviewbutton-iconic"
label="&newNavigatorCmd.label;"
key="key_newNavigator"
command="cmd_newNavigator"/>
<toolbarbutton id="appMenu-private-window-button"
class="subviewbutton subviewbutton-iconic"
label="&newPrivateWindow.label;"
key="key_privatebrowsing"
command="Tools:PrivateBrowsing"/>
#ifdef NIGHTLY_BUILD
<toolbarbutton id="appMenu-fission-window-button"
class="subviewbutton subviewbutton-iconic"
label="New Fission Window"
accesskey="s"
command="Tools:FissionWindow"/>
<toolbarbutton id="appMenu-non-fission-window-button"
class="subviewbutton subviewbutton-iconic"
label="New Non-Fission Window"
accesskey="s"
command="Tools:NonFissionWindow"/>
#endif
<toolbarbutton id="appMenuRestoreLastSession"
label="&appMenuHistory.restoreSession.label;"
class="subviewbutton subviewbutton-iconic"
command="Browser:RestoreLastSession"/>
<toolbarseparator/>
<toolbaritem id="appMenu-zoom-controls" class="toolbaritem-combined-buttons" closemenu="none">
<!-- Use a spacer, because panel sizing code gets confused when using CSS methods. -->
<spacer class="before-label"/>
<label value="&fullZoom.label;"/>
<!-- This spacer keeps the scrollbar from overlapping the view. -->
<spacer class="after-label"/>
<toolbarbutton id="appMenu-zoomReduce-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_fullZoomReduce"
data-l10n-id="appmenuitem-zoom-reduce"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-zoomReset-button"
class="subviewbutton"
command="cmd_fullZoomReset"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-zoomEnlarge-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_fullZoomEnlarge"
data-l10n-id="appmenuitem-zoom-enlarge"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarseparator orient="vertical"/>
<toolbarbutton id="appMenu-fullscreen-button"
class="subviewbutton subviewbutton-iconic"
label="&fullScreenCmd.label;"
observes="View:FullScreen"
type="checkbox"
closemenu="auto"
onclick="if (event.button == 0) this.closest('panel').hidePopup();"
tooltip="dynamic-shortcut-tooltip"/>
</toolbaritem>
<toolbarseparator/>
<toolbaritem id="appMenu-edit-controls" class="toolbaritem-combined-buttons" closemenu="none">
<!-- Use a spacer, because panel sizing code gets confused when using CSS methods. -->
<spacer class="before-label"/>
<label value="&editMenu.label;"/>
<!-- This spacer keeps the scrollbar from overlapping the view. -->
<spacer class="after-label"/>
<toolbarbutton id="appMenu-cut-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_cut"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-copy-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_copy"
tooltip="dynamic-shortcut-tooltip"/>
<toolbarbutton id="appMenu-paste-button"
class="subviewbutton subviewbutton-iconic"
command="cmd_paste"
tooltip="dynamic-shortcut-tooltip"/>
</toolbaritem>
<toolbarseparator/>
<toolbarbutton id="appMenu-library-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&places.library.title;"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-libraryView', this)"/>
<toolbarbutton id="appMenu-logins-button"
class="subviewbutton subviewbutton-iconic"
label="&logins.label;"
oncommand="LoginHelper.openPasswordManager(window, { entryPoint: 'mainmenu' })"
/>
<toolbarbutton id="appMenu-addons-button"
class="subviewbutton subviewbutton-iconic"
label="&addons.label;"
key="key_openAddons"
command="Tools:Addons"
/>
<toolbarbutton id="appMenu-ssb-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="Sites in App Mode"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-SSBView', this)"
hidden="true" persist="hidden"/>
<toolbarbutton id="appMenu-preferences-button"
class="subviewbutton subviewbutton-iconic"
#ifdef XP_WIN
label="&preferencesCmd2.label;"
#else
label="&preferencesCmdUnix.label;"
#ifdef XP_MACOSX
key="key_preferencesCmdMac"
#endif
#endif
oncommand="openPreferences()"
/>
<toolbarbutton id="appMenu-customize-button"
class="subviewbutton subviewbutton-iconic"
data-l10n-id="appmenuitem-customize-mode"
command="cmd_CustomizeToolbars"
/>
<toolbarseparator/>
<toolbarbutton id="appMenu-open-file-button"
class="subviewbutton"
label="&openFileCmd.label;"
key="openFileKb"
command="Browser:OpenFile"
/>
<toolbarbutton id="appMenu-save-file-button"
class="subviewbutton"
data-l10n-id="toolbar-button-page-save"
key="key_savePage"
command="Browser:SavePage"
/>
<toolbarbutton id="appMenu-print-button"
class="subviewbutton subviewbutton-iconic"
label="&printCmd.label;"
#ifdef XP_MACOSX
key="printKb"
command="cmd_print"
#else
command="cmd_printPreview"
#endif
/>
<toolbarseparator/>
<toolbarbutton id="appMenu-find-button"
class="subviewbutton subviewbutton-iconic"
label="&findOnCmd.label;"
key="key_find"
command="cmd_find"/>
<toolbarbutton id="appMenu-more-button"
class="subviewbutton subviewbutton-nav"
label="&moreMenu.label;"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-moreView', this)"/>
<toolbarbutton id="appMenu-developer-button"
class="subviewbutton subviewbutton-nav"
label="&webDeveloperMenu.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-developer', this)"/>
<toolbarbutton id="appMenu-whatsnew-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
hidden="true"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-whatsNew', this)"/>
<toolbarbutton id="appMenu-help-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&appMenuHelp.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-helpView', this)"/>
#ifndef XP_MACOSX
<toolbarseparator/>
<toolbarbutton id="appMenu-quit-button"
class="subviewbutton subviewbutton-iconic"
#ifdef XP_WIN
label="&quitApplicationCmdWin2.label;"
tooltiptext="&quitApplicationCmdWin2.tooltip;"
#else
label="&quitApplicationCmd.label;"
#endif
key="key_quitApplication"
command="cmd_quitApplication"/>
#endif
</vbox>
</panelview>
</panelmultiview>
</panel>

View File

@@ -38,11 +38,9 @@ const PanelUI = {
*/
get kElements() {
return {
mainView: "appMenu-mainView",
multiView: "appMenu-multiView",
menuButton: "PanelUI-menu-button",
panel: "appMenu-popup",
addonNotificationContainer: "appMenu-addon-banners",
overflowFixedList: "widget-overflow-fixed-list",
overflowPanel: "widget-overflow",
navbar: "nav-bar",
@@ -960,6 +958,24 @@ const PanelUI = {
return this._notificationPanel;
},
get mainView() {
if (!this._mainView) {
this._mainView = PanelMultiView.getViewNode(document, "appMenu-mainView");
}
return this._mainView;
},
get addonNotificationContainer() {
if (!this._addonNotificationContainer) {
this._addonNotificationContainer = PanelMultiView.getViewNode(
document,
"appMenu-addon-banners"
);
}
return this._addonNotificationContainer;
},
_formatDescriptionMessage(n) {
let text = {};
let array = n.options.message.split("<>");

View File

@@ -41,6 +41,13 @@ add_task(async function test_updates_post_policy() {
info("Check that devtools menu items are hidden");
let toolsMenu = window.document.getElementById("webDeveloperMenu");
ok(toolsMenu.hidden, "The Web Developer item of the tools menu is hidden");
let menuButton = document.getElementById("PanelUI-menu-button");
menuButton.click();
await BrowserTestUtils.waitForEvent(
window.PanelUI.mainView,
"ViewShown",
"Panel did not open"
);
let hamburgerMenu = window.document.getElementById(
"appMenu-developer-button"
);

View File

@@ -478,7 +478,7 @@ class _ToolbarPanelHub {
}
_showElement(document, id, string_id) {
const el = document.getElementById(id);
const el = PanelMultiView.getViewNode(document, id);
document.l10n.setAttributes(el, string_id);
el.removeAttribute("hidden");
}

View File

@@ -37,17 +37,13 @@ add_task(async function test_with_rs_messages() {
{ clear: true }
);
UITour.showMenu(window, "appMenu");
await BrowserTestUtils.waitForEvent(window.PanelUI.mainView, "ViewShown");
const mainView = document.getElementById("appMenu-mainView");
const whatsNewBtn = document.getElementById("appMenu-whatsnew-button");
Assert.equal(whatsNewBtn.hidden, true, "What's New btn doesn't exist");
const mainView = document.getElementById("appMenu-mainView");
UITour.showMenu(window, "appMenu");
await BrowserTestUtils.waitForEvent(
mainView,
"ViewShown",
"Panel did not open"
);
// Reload the provider
await ASRouter._updateMessageProviders();
// Wait to load the WNPanel messages

View File

@@ -7,7 +7,7 @@ add_task(async () => {
let button = win.document.getElementById("appMenu-ssb-button");
Assert.ok(button.hidden, "Button should be hidden.");
Assert.equal(button, null, "Button should be not be available.");
Assert.equal(
win.document.querySelector("#appMenu-SSBView .panel-subview-body"),
null,
@@ -18,7 +18,8 @@ add_task(async () => {
Services.io.newURI(gHttpsTestRoot)
);
Assert.ok(button.hidden, "Button should be hidden.");
button = win.document.getElementById("appMenu-ssb-button");
Assert.equal(button, null, "Button should be not be available.");
Assert.equal(
win.document.querySelector("#appMenu-SSBView .panel-subview-body"),
null,
@@ -27,9 +28,10 @@ add_task(async () => {
await ssb.install();
// Button should still be hidden, we don't populate the list until it is
button = win.document.getElementById("appMenu-ssb-button");
// Button should still be unavailable, we don't populate the list until it is
// first opened.
Assert.ok(button.hidden, "Button should be hidden.");
Assert.equal(button, null, "Button should be not be available.");
Assert.equal(
win.document.querySelector("#appMenu-SSBView .panel-subview-body"),
null,
@@ -41,14 +43,15 @@ add_task(async () => {
"popupshown"
);
let buttonShown = BrowserTestUtils.waitForAttributeRemoval("hidden", button);
EventUtils.synthesizeMouseAtCenter(
win.document.getElementById("PanelUI-menu-button"),
{},
win
);
await Promise.all([appMenuOpened, buttonShown]);
await appMenuOpened;
button = win.document.getElementById("appMenu-ssb-button");
await BrowserTestUtils.waitForAttributeRemoval("hidden", button);
Assert.ok(!button.hidden, "Button should be visible.");

View File

@@ -64,6 +64,11 @@ ChromeUtils.defineModuleGetter(
"BrowserUsageTelemetry",
"resource:///modules/BrowserUsageTelemetry.jsm"
);
ChromeUtils.defineModuleGetter(
this,
"PanelMultiView",
"resource:///modules/PanelMultiView.jsm"
);
// See LOG_LEVELS in Console.jsm. Common examples: "All", "Info", "Warn", & "Error".
const PREF_LOG_LEVEL = "browser.uitour.loglevel";
@@ -1010,7 +1015,12 @@ var UITour = {
node = null;
}
} else {
node = aWindow.document.querySelector(targetQuery);
let viewCacheTemplate = aWindow.document.getElementById(
"appMenu-viewCache"
);
node =
aWindow.document.querySelector(targetQuery) ||
viewCacheTemplate.content.querySelector(targetQuery);
}
resolve({
@@ -1033,9 +1043,10 @@ var UITour = {
let targetElement = aTarget.node;
// Use the widget for filtering if it exists since the target may be the icon inside.
if (aTarget.widgetName) {
targetElement = aTarget.node.ownerDocument.getElementById(
aTarget.widgetName
);
let doc = aTarget.node.ownerGlobal.document;
targetElement =
doc.getElementById(aTarget.widgetName) ||
PanelMultiView.getViewNode(doc, aTarget.widgetName);
}
return targetElement.id.startsWith("appMenu-");

View File

@@ -13,6 +13,12 @@ const gContentPrefs = Cc["@mozilla.org/content-pref/service;1"].getService(
const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
const gZoomPropertyName = "browser.content.full-zoom";
ChromeUtils.defineModuleGetter(
this,
"PanelMultiView",
"resource:///modules/PanelMultiView.jsm"
);
var ZoomUI = {
init(aWindow) {
aWindow.addEventListener("EndSwapDocShells", onEndSwapDocShells, true);
@@ -123,7 +129,8 @@ async function updateZoomUI(aBrowser, aAnimate = false) {
return;
}
let appMenuZoomReset = win.document.getElementById(
let appMenuZoomReset = PanelMultiView.getViewNode(
win.document,
"appMenu-zoomReset-button"
);
let customizableZoomControls = win.document.getElementById("zoom-controls");

View File

@@ -63,8 +63,10 @@ var AppMenu = {
async function reopenAppMenu(browserWindow) {
browserWindow.PanelUI.hide();
let view = browserWindow.document.getElementById("appMenu-mainView");
let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
let promiseViewShown = BrowserTestUtils.waitForEvent(
PanelUI.panel,
"ViewShown"
);
browserWindow.PanelUI.show();
await promiseViewShown;
}

View File

@@ -483,9 +483,10 @@ DevToolsStartup.prototype = {
.getElementById("webDeveloperMenu")
.setAttribute("hidden", "true");
// This will hide the "Web Developer" item in the hamburger menu.
window.document
.getElementById("appMenu-developer-button")
.setAttribute("hidden", "true");
PanelMultiView.getViewNode(
window.document,
"appMenu-developer-button"
).setAttribute("hidden", "true");
},
onFirstWindowReady(window) {