Bug 1648175, remove history and library panel views from the main panel and place in template r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D80306
This commit is contained in:
Emma Malysz 2020-06-29 15:41:43 +00:00
Родитель 1bbd172984
Коммит 392c9ed354
20 изменённых файлов: 193 добавлений и 131 удалений

Просмотреть файл

@ -860,6 +860,13 @@ menupopup[emptyplacesresult="true"] > .hide-if-empty-places-result {
transform: rotate(180deg);
}
/* Pocket */
:root[pocketdisabled=true] #context-pocket,
:root[pocketdisabled=true] #context-savelinktopocket,
:root[pocketdisabled=true] #appMenu-library-pocket-button {
display: none;
}
/* Full Screen UI */
#fullscr-toggler {

Просмотреть файл

@ -717,7 +717,92 @@
</panel>
</html:template>
</popupset>
<box id="appMenu-viewCache" hidden="true"/>
<html:template id="appMenu-viewCache">
<panelview id="PanelUI-history" flex="1">
<vbox class="panel-subview-body">
<toolbarbutton id="appMenuViewHistorySidebar"
label="&appMenuHistory.viewSidebar.label;"
label-checked="&appMenuHistory.hideSidebar.label;"
label-unchecked="&appMenuHistory.viewSidebar.label;"
type="checkbox"
class="subviewbutton subviewbutton-iconic"
key="key_gotoHistory"
oncommand="SidebarUI.toggle('viewHistorySidebar');">
<observes element="sidebar-box" attribute="positionend"/>
</toolbarbutton>
<toolbarbutton id="appMenuClearRecentHistory"
label="&appMenuHistory.clearRecent.label;"
class="subviewbutton subviewbutton-iconic"
command="Tools:Sanitize"/>
<toolbarseparator/>
<toolbarbutton id="appMenuRecentlyClosedTabs"
label="&historyUndoMenu.label;"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedTabs', this)"/>
<toolbarbutton id="appMenuRecentlyClosedWindows"
label="&historyUndoWindowMenu.label;"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedWindows', this)"/>
<toolbarseparator/>
<label value="&appMenuHistory.recentHistory.label;"
class="subview-subheader"/>
<toolbaritem id="appMenu_historyMenu"
orient="vertical"
smoothscroll="false"
flatList="true"
tooltip="bhTooltip">
<!-- history menu items will go here -->
</toolbaritem>
</vbox>
<toolbarbutton id="PanelUI-historyMore"
class="panel-subview-footer subviewbutton"
label="&appMenuHistory.showAll.label;"
oncommand="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
</panelview>
<panelview id="appMenu-libraryView" class="PanelUI-subView">
<vbox class="panel-subview-body">
<toolbarbutton id="appMenu-library-bookmarks-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&bookmarksSubview.label;"
closemenu="none"
oncommand="BookmarkingUI.showSubView(this);"/>
<toolbarbutton id="appMenu-library-pocket-button"
class="subviewbutton subviewbutton-iconic"
label="&pocketMenuitem.label;"
oncommand="Pocket.openList(event)"/>
<toolbarbutton id="appMenu-library-history-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&historyMenu.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-history', this)"/>
<toolbarbutton id="appMenu-library-downloads-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&libraryDownloads.label;"
closemenu="none"
oncommand="DownloadsSubview.show(this);"/>
<toolbarbutton id="appMenu-library-remotetabs-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav sync-ui-item"
label="&appMenuRemoteTabs.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-remotetabs', this)"/>
<toolbarseparator hidden="true"/>
<label value="&appMenuRecentHighlights.label;"
hidden="true"
class="subview-subheader"/>
<toolbaritem id="appMenu-library-recentHighlights"
hidden="true"
orient="vertical"
smoothscroll="false"
flatList="true"
tooltip="bhTooltip">
<!-- Recent Highlights will go here -->
</toolbaritem>
</vbox>
</panelview>
</html:template>
<!-- Temporary wrapper until we move away from XUL flex to allow a negative
margin-top to slide the toolbox off screen in fullscreen layout.-->

Просмотреть файл

@ -62,9 +62,9 @@ add_task(async function testAppMenuButtonWrongKey() {
add_task(async function testLibraryButtonPress() {
let button = document.getElementById("library-button");
forceFocus(button);
EventUtils.synthesizeKey(" ");
let view = document.getElementById("appMenu-libraryView");
let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
EventUtils.synthesizeKey(" ");
await focused;
ok(true, "Focus inside Library menu after toolbar button pressed");
let hidden = BrowserTestUtils.waitForEvent(document, "popuphidden", true);

Просмотреть файл

@ -265,9 +265,9 @@ add_task(async function testArrowsOverflowButton() {
add_task(async function testArrowsInPanelMultiView() {
let button = document.getElementById("library-button");
forceFocus(button);
EventUtils.synthesizeKey(" ");
let view = document.getElementById("appMenu-libraryView");
let focused = BrowserTestUtils.waitForEvent(view, "focus", true);
EventUtils.synthesizeKey(" ");
let focusEvt = await focused;
ok(true, "Focus inside Library menu after toolbar button pressed");
EventUtils.synthesizeKey("KEY_ArrowLeft");

Просмотреть файл

@ -328,6 +328,19 @@ var PanelMultiView = class extends AssociatedToNode {
panelNode.remove();
}
}
/**
* Returns the element with the given id.
* For nodes that are lazily loaded and not yet in the DOM, the node should
* be retrieved from the view cache template.
*/
static getViewNode(doc, id) {
let viewCacheTemplate = doc.getElementById("appMenu-viewCache");
return (
doc.getElementById(id) ||
viewCacheTemplate.content.querySelector("#" + id)
);
}
/**
* Ensures that when the specified window is closed all the <panelmultiview>
@ -616,7 +629,7 @@ var PanelMultiView = class extends AssociatedToNode {
// Node.children and Node.children is live to DOM changes like the
// ones we're about to do, so iterate over a static copy:
let subviews = Array.from(this._viewStack.children);
let viewCache = this.document.getElementById(viewCacheId);
let viewCache = this.document.getElementById("appMenu-viewCache");
for (let subview of subviews) {
viewCache.appendChild(subview);
}
@ -649,7 +662,7 @@ var PanelMultiView = class extends AssociatedToNode {
async _showSubView(viewIdOrNode, anchor) {
let viewNode =
typeof viewIdOrNode == "string"
? this.document.getElementById(viewIdOrNode)
? PanelMultiView.getViewNode(this.document, viewIdOrNode)
: viewIdOrNode;
if (!viewNode) {
Cu.reportError(new Error(`Subview ${viewIdOrNode} doesn't exist.`));

Просмотреть файл

@ -437,49 +437,6 @@
#endif
</vbox>
</panelview>
<panelview id="PanelUI-history" flex="1">
<vbox class="panel-subview-body">
<toolbarbutton id="appMenuViewHistorySidebar"
label="&appMenuHistory.viewSidebar.label;"
label-checked="&appMenuHistory.hideSidebar.label;"
label-unchecked="&appMenuHistory.viewSidebar.label;"
type="checkbox"
class="subviewbutton subviewbutton-iconic"
key="key_gotoHistory"
oncommand="SidebarUI.toggle('viewHistorySidebar');">
<observes element="sidebar-box" attribute="positionend"/>
</toolbarbutton>
<toolbarbutton id="appMenuClearRecentHistory"
label="&appMenuHistory.clearRecent.label;"
class="subviewbutton subviewbutton-iconic"
command="Tools:Sanitize"/>
<toolbarseparator/>
<toolbarbutton id="appMenuRecentlyClosedTabs"
label="&historyUndoMenu.label;"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedTabs', this)"/>
<toolbarbutton id="appMenuRecentlyClosedWindows"
label="&historyUndoWindowMenu.label;"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
closemenu="none"
oncommand="PanelUI.showSubView('appMenu-library-recentlyClosedWindows', this)"/>
<toolbarseparator/>
<label value="&appMenuHistory.recentHistory.label;"
class="subview-subheader"/>
<toolbaritem id="appMenu_historyMenu"
orient="vertical"
smoothscroll="false"
flatList="true"
tooltip="bhTooltip">
<!-- history menu items will go here -->
</toolbaritem>
</vbox>
<toolbarbutton id="PanelUI-historyMore"
class="panel-subview-footer subviewbutton"
label="&appMenuHistory.showAll.label;"
oncommand="PlacesCommandHook.showPlacesOrganizer('History'); CustomizableUI.hidePanelForNode(this);"/>
</panelview>
<panelview id="appMenu-library-recentlyClosedTabs"/>
<panelview id="appMenu-library-recentlyClosedWindows"/>
@ -794,47 +751,6 @@
</vbox>
</panelview>
<panelview id="appMenu-libraryView" class="PanelUI-subView">
<vbox class="panel-subview-body">
<toolbarbutton id="appMenu-library-bookmarks-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&bookmarksSubview.label;"
closemenu="none"
oncommand="BookmarkingUI.showSubView(this);"/>
<toolbarbutton id="appMenu-library-pocket-button"
class="subviewbutton subviewbutton-iconic"
label="&pocketMenuitem.label;"
oncommand="Pocket.openList(event)"/>
<toolbarbutton id="appMenu-library-history-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&historyMenu.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-history', this)"/>
<toolbarbutton id="appMenu-library-downloads-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav"
label="&libraryDownloads.label;"
closemenu="none"
oncommand="DownloadsSubview.show(this);"/>
<toolbarbutton id="appMenu-library-remotetabs-button"
class="subviewbutton subviewbutton-iconic subviewbutton-nav sync-ui-item"
label="&appMenuRemoteTabs.label;"
closemenu="none"
oncommand="PanelUI.showSubView('PanelUI-remotetabs', this)"/>
<toolbarseparator hidden="true"/>
<label value="&appMenuRecentHighlights.label;"
hidden="true"
class="subview-subheader"/>
<toolbaritem id="appMenu-library-recentHighlights"
hidden="true"
orient="vertical"
smoothscroll="false"
flatList="true"
tooltip="bhTooltip">
<!-- Recent Highlights will go here -->
</toolbaritem>
</vbox>
</panelview>
<panelview id="PanelUI-fxa" title="&fxa.menu.account.label;" class="PanelUI-subView" descriptionheightworkaround="true">
<vbox id="PanelUI-fxa-menu" class="panel-subview-body">
<toolbarbutton id="fxa-manage-account-button"

Просмотреть файл

@ -41,8 +41,6 @@ const PanelUI = {
mainView: "appMenu-mainView",
multiView: "appMenu-multiView",
helpView: "PanelUI-helpView",
libraryView: "appMenu-libraryView",
libraryRecentHighlights: "appMenu-library-recentHighlights",
menuButton: "PanelUI-menu-button",
panel: "appMenu-popup",
addonNotificationContainer: "appMenu-addon-banners",
@ -192,7 +190,9 @@ const PanelUI = {
this.menuButton.removeEventListener("mousedown", this);
this.menuButton.removeEventListener("keypress", this);
CustomizableUI.removeListener(this);
this.libraryView.removeEventListener("ViewShowing", this);
if (this.libraryView) {
this.libraryView.removeEventListener("ViewShowing", this);
}
this.whatsNewPanel.removeEventListener("ViewShowing", this);
},
@ -433,7 +433,8 @@ const PanelUI = {
}
this._ensureEventListenersAdded();
let viewNode = document.getElementById(aViewId);
let viewNode = PanelMultiView.getViewNode(document, aViewId);
if (!viewNode) {
Cu.reportError("Could not show panel subview with id: " + aViewId);
return;
@ -480,6 +481,7 @@ const PanelUI = {
multiView.setAttribute("id", "customizationui-widget-multiview");
multiView.setAttribute("viewCacheId", "appMenu-viewCache");
multiView.setAttribute("mainViewId", viewNode.id);
multiView.appendChild(viewNode);
tempPanel.appendChild(multiView);
viewNode.classList.add("cui-widget-panelview");
@ -529,10 +531,14 @@ const PanelUI = {
* @param {panelview} viewNode The library view.
*/
ensureLibraryInitialized(viewNode) {
if (viewNode != this.libraryView || viewNode._initialized) {
if (viewNode.id != "appMenu-libraryView" || viewNode._initialized) {
return;
}
if (!this.libraryView) {
this.libraryView = viewNode;
}
viewNode._initialized = true;
viewNode.addEventListener("ViewShowing", this);
},
@ -552,6 +558,12 @@ const PanelUI = {
return;
}
if (!this.libraryRecentHighlights) {
this.libraryRecentHighlights = document.getElementById(
"appMenu-library-recentHighlights"
);
}
// Make the elements invisible synchronously, before the view is shown.
this.makeLibraryRecentHighlightsInvisible();

Просмотреть файл

@ -36,9 +36,10 @@ add_task(async function() {
let historyButton = document.getElementById("history-panelmenu");
ok(historyButton, "History button appears in Panel Menu");
historyButton.click();
let historyPanel = document.getElementById("PanelUI-history");
let promise = BrowserTestUtils.waitForEvent(historyPanel, "ViewShown");
historyButton.click();
await promise;
ok(historyPanel.getAttribute("visible"), "History Panel is in view");

Просмотреть файл

@ -37,12 +37,12 @@ add_task(async function test_appMenu_libraryView() {
return;
}
const libraryView = document.getElementById("appMenu-libraryView");
const button = document.getElementById("library-button");
let shownPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
// Should still open the panel when Ctrl key is pressed.
EventUtils.synthesizeMouseAtCenter(button, { ctrlKey: true });
const libraryView = document.getElementById("appMenu-libraryView");
let shownPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
await shownPromise;
ok(true, "Library menu shown after button pressed");

Просмотреть файл

@ -11,9 +11,9 @@ add_task(async function test_library_after_appMenu() {
await gCUITestUtils.openMainMenu();
// Show the Library view as a subview of the main menu.
document.getElementById("appMenu-library-button").click();
let libraryView = document.getElementById("appMenu-libraryView");
let promise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
document.getElementById("appMenu-library-button").click();
await promise;
// Show the Library view as the main view of the Library panel.
@ -22,9 +22,9 @@ add_task(async function test_library_after_appMenu() {
await promise;
// Navigate to the History subview.
document.getElementById("appMenu-library-history-button").click();
let historyView = document.getElementById("PanelUI-history");
promise = BrowserTestUtils.waitForEvent(historyView, "ViewShown");
document.getElementById("appMenu-library-history-button").click();
await promise;
Assert.ok(PanelView.forNode(historyView).active);

Просмотреть файл

@ -19,9 +19,9 @@ async function selectAppMenuView(buttonId, viewId) {
btn = document.getElementById(buttonId);
return btn;
}, "Should have the " + buttonId + "button");
btn.click();
let view = document.getElementById(viewId);
let viewPromise = BrowserTestUtils.waitForEvent(view, "ViewShown");
btn.click();
await viewPromise;
}

Просмотреть файл

@ -23,9 +23,9 @@ add_task(async function test_panelview_bookmarks_delete() {
await gCUITestUtils.openMainMenu();
document.getElementById("appMenu-library-button").click();
let libraryView = document.getElementById("appMenu-libraryView");
let promise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
document.getElementById("appMenu-library-button").click();
await promise;
let bookmarksView = document.getElementById("PanelUI-bookmarks");

Просмотреть файл

@ -134,10 +134,10 @@ add_task(async function testStayopenBookmarksClicks() {
);
appMenu.click();
await PopupShownPromise;
let libView = document.getElementById("appMenu-libraryView");
let libraryBtn = document.getElementById("appMenu-library-button");
let ViewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
libraryBtn.click();
let libView = document.getElementById("appMenu-libraryView");
let ViewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
await ViewShownPromise;
info("Library panel shown.");
let bookmarks = document.getElementById("appMenu-library-bookmarks-button");

Просмотреть файл

@ -9,9 +9,9 @@
async function openDownloadsInLibraryToolbarButton() {
let libraryBtn = document.getElementById("library-button");
libraryBtn.click();
let libView = document.getElementById("appMenu-libraryView");
let viewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
libraryBtn.click();
await viewShownPromise;
let downloadsButton;

Просмотреть файл

@ -23,9 +23,9 @@ let openedTabs = [];
async function openBookmarksPanelInLibraryToolbarButton() {
let libraryBtn = document.getElementById("library-button");
libraryBtn.click();
let libView = document.getElementById("appMenu-libraryView");
let viewShownPromise = BrowserTestUtils.waitForEvent(libView, "ViewShown");
libraryBtn.click();
await viewShownPromise;
let bookmarksButton;

Просмотреть файл

@ -303,14 +303,10 @@ var SaveToPocket = {
},
updateElementsInWindow(win, enabled) {
let elementIds = [
"context-pocket",
"context-savelinktopocket",
"appMenu-library-pocket-button",
];
let document = win.document;
for (let id of elementIds) {
document.getElementById(id).hidden = !enabled;
if (enabled) {
win.document.documentElement.removeAttribute("pocketdisabled");
} else {
win.document.documentElement.setAttribute("pocketdisabled", "true");
}
},

Просмотреть файл

@ -20,11 +20,11 @@ add_task(async function() {
);
let libraryButton = document.getElementById("library-button");
let libraryView = document.getElementById("appMenu-libraryView");
info("opening library menu");
let libraryPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
libraryButton.click();
let libraryView = document.getElementById("appMenu-libraryView");
let libraryPromise = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
await libraryPromise;
let pocketLibraryButton = document.getElementById(

Просмотреть файл

@ -17,9 +17,18 @@ add_task(async function test_setup() {
add_task(async function() {
await promisePocketEnabled();
checkElements(true, ["pocket-button", "appMenu-library-pocket-button"]);
let button = document.getElementById("pocket-button");
is(button.hidden, false, "Button should not have been hidden");
let libraryButton = document.getElementById("library-button");
libraryButton.click();
let libraryView = document.getElementById("appMenu-libraryView");
let popupShown = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
await popupShown;
checkElementsShown(true, ["appMenu-library-pocket-button"]);
// Close the Library panel.
let popupHidden = BrowserTestUtils.waitForEvent(document, "popuphidden");
libraryView.closest("panel").hidePopup();
// check context menu exists
info("checking content context menu");
@ -29,8 +38,8 @@ add_task(async function() {
);
let contextMenu = document.getElementById("contentAreaContextMenu");
let popupShown = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
let popupHidden = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
popupShown = BrowserTestUtils.waitForEvent(contextMenu, "popupshown");
popupHidden = BrowserTestUtils.waitForEvent(contextMenu, "popuphidden");
await BrowserTestUtils.synthesizeMouseAtCenter(
"body",
{
@ -41,7 +50,7 @@ add_task(async function() {
);
await popupShown;
checkElements(true, ["context-pocket"]);
checkElementsShown(true, ["pocket-button", "context-pocket"]);
contextMenu.hidePopup();
await popupHidden;
@ -57,7 +66,7 @@ add_task(async function() {
);
await popupShown;
checkElements(true, ["context-savelinktopocket"]);
checkElementsShown(true, ["context-savelinktopocket"]);
contextMenu.hidePopup();
await popupHidden;
@ -65,26 +74,35 @@ add_task(async function() {
await promisePocketDisabled();
checkElements(false, [
"appMenu-library-pocket-button",
checkElementsShown(false, [
"context-pocket",
"context-savelinktopocket",
"appMenu-library-pocket-button",
"pocket-button",
]);
button = document.getElementById("pocket-button");
is(button.hidden, true, "Button should have been hidden");
let newWin = await BrowserTestUtils.openNewBrowserWindow();
checkElements(
libraryButton = newWin.document.getElementById("library-button");
libraryButton.click();
libraryView = newWin.document.getElementById("appMenu-libraryView");
popupShown = BrowserTestUtils.waitForEvent(libraryView, "ViewShown");
await popupShown;
checkElementsShown(
false,
[
"appMenu-library-pocket-button",
"context-pocket",
"context-savelinktopocket",
"appMenu-library-pocket-button",
"pocket-button",
],
newWin
);
button = newWin.document.getElementById("pocket-button");
is(button.hidden, true, "Button should have been hidden");
// Close the Library panel.
popupHidden = BrowserTestUtils.waitForEvent(newWin.document, "popuphidden");
libraryView.closest("panel").hidePopup();
await BrowserTestUtils.closeWindow(newWin);

Просмотреть файл

@ -61,3 +61,17 @@ function checkElements(expectPresent, l, win = window) {
);
}
}
function checkElementsShown(expectPresent, l, win = window) {
for (let id of l) {
let el =
win.document.getElementById(id) ||
win.gNavToolbox.palette.querySelector("#" + id);
let elShown = window.getComputedStyle(el).display != "none";
is(
elShown,
expectPresent,
"element " + id + (expectPresent ? " is" : " is not") + " present"
);
}
}

Просмотреть файл

@ -33,9 +33,9 @@ var AppMenu = {
);
await reopenAppMenu(browserWindow);
browserWindow.document.getElementById("appMenu-library-button").click();
let view = browserWindow.document.getElementById("appMenu-libraryView");
let promiseViewShown = BrowserTestUtils.waitForEvent(view, "ViewShown");
browserWindow.document.getElementById("appMenu-library-button").click();
await promiseViewShown;
},