Bug 1033395 - Panels Should Be Anchored from the Same Height on the Toolbar. r?johannh
MozReview-Commit-ID: 6bhlfeD1esE
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -466,16 +466,20 @@ const PanelUI = {
viewNode.removeEventListener("ViewShown", listener);
panelRemover();
return;
}
CustomizableUI.addPanelCloseListeners(tempPanel);
tempPanel.addEventListener("popuphidden", panelRemover);
+ if (aAnchor.parentNode.id == "PersonalToolbar") {
+ tempPanel.classList.add("bookmarks-toolbar");
+ }
+
let anchor = this._getPanelAnchor(aAnchor);
if (aAnchor != anchor && aAnchor.id) {
anchor.setAttribute("consumeanchor", aAnchor.id);
}
tempPanel.openPopup(anchor, {
position: "bottomcenter topright",
@@ -842,16 +846,18 @@ const PanelUI = {
_getPopupId(notification) { return "appMenu-" + notification.id + "-notification"; },
_getBadgeStatus(notification) { return notification.id; },
_getPanelAnchor(candidate) {
let iconAnchor =
document.getAnonymousElementByAttribute(candidate, "class",
+ "toolbarbutton-badge-stack") ||
+ document.getAnonymousElementByAttribute(candidate, "class",
"toolbarbutton-icon");
return iconAnchor || candidate;
},
_addedShortcuts: false,
_ensureShortcutsShown() {
if (this._addedShortcuts) {
return;
--- a/browser/components/downloads/content/downloads.js
+++ b/browser/components/downloads/content/downloads.js
@@ -553,16 +553,19 @@ var DownloadsPanel = {
return;
}
if (!anchor) {
DownloadsCommon.error("Downloads button cannot be found.");
return;
}
+ let onBookmarksToolbar = !!anchor.closest("#PersonalToolbar");
+ this.panel.classList.toggle("bookmarks-toolbar", onBookmarksToolbar);
+
// When the panel is opened, we check if the target files of visible items
// still exist, and update the allowed items interactions accordingly. We
// do these checks on a background thread, and don't prevent the panel to
// be displayed while these checks are being performed.
for (let viewItem of DownloadsView._visibleViewItems.values()) {
viewItem.download.refresh().catch(Cu.reportError);
}
--- a/browser/components/downloads/content/indicator.js
+++ b/browser/components/downloads/content/indicator.js
@@ -621,19 +621,22 @@ const DownloadsIndicatorView = {
}
return this._indicator = indicator;
},
get indicatorAnchor() {
let widgetGroup = CustomizableUI.getWidget("downloads-button");
if (widgetGroup.areaType == CustomizableUI.TYPE_MENU_PANEL) {
- return widgetGroup.forWindow(window).anchor;
+ let overflowIcon = widgetGroup.forWindow(window).anchor;
+ return document.getAnonymousElementByAttribute(overflowIcon, "class", "toolbarbutton-icon");
}
- return document.getElementById("downloads-indicator-anchor");
+
+ return document.getAnonymousElementByAttribute(this.indicator, "class",
+ "toolbarbutton-badge-stack");
},
get _progressIcon() {
return this.__progressIcon ||
(this.__progressIcon = document.getElementById("downloads-indicator-progress-inner"));
},
get notifier() {
--- a/browser/components/downloads/test/browser/browser_overflow_anchor.js
+++ b/browser/components/downloads/test/browser/browser_overflow_anchor.js
@@ -7,17 +7,17 @@ const kForceOverflowWidthPx = 200;
registerCleanupFunction(async function() {
// Clean up when the test finishes.
await task_resetState();
});
/**
* Make sure the downloads button and indicator overflows into the nav-bar
* chevron properly, and then when those buttons are clicked in the overflow
- * panel that the downloads panel anchors to the chevron.
+ * panel that the downloads panel anchors to the chevron`s icon.
*/
add_task(async function test_overflow_anchor() {
await SpecialPowers.pushPrefEnv({set: [["browser.download.autohideButton", false]]});
// Ensure that state is reset in case previous tests didn't finish.
await task_resetState();
// The downloads button should not be overflowed to begin with.
let button = CustomizableUI.getWidget("downloads-button")
@@ -29,24 +29,28 @@ add_task(async function test_overflow_an
let promise = promisePanelOpened();
EventUtils.sendMouseEvent({ type: "mousedown", button: 0 }, button.node);
info("waiting for panel to open");
await promise;
let panel = DownloadsPanel.panel;
let chevron = document.getElementById("nav-bar-overflow-button");
- is(panel.anchorNode, chevron, "Panel should be anchored to the chevron.");
+ let chevronIcon = document.getAnonymousElementByAttribute(chevron,
+ "class", "toolbarbutton-icon");
+ is(panel.anchorNode, chevronIcon, "Panel should be anchored to the chevron`s icon.");
DownloadsPanel.hidePanel();
gCustomizeMode.addToToolbar(button.node);
// Now try opening the panel again.
promise = promisePanelOpened();
EventUtils.sendMouseEvent({ type: "mousedown", button: 0 }, button.node);
await promise;
- is(panel.anchorNode.id, "downloads-indicator-anchor");
+ let downloadsAnchor = document.getAnonymousElementByAttribute(button.node, "class",
+ "toolbarbutton-badge-stack");
+ is(panel.anchorNode, downloadsAnchor);
DownloadsPanel.hidePanel();
});
--- a/browser/themes/osx/controlcenter/panel.css
+++ b/browser/themes/osx/controlcenter/panel.css
@@ -1,19 +1,15 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../shared.inc
%include ../../shared/controlcenter/panel.inc.css
-#identity-popup {
- margin-top: 1px;
-}
-
.identity-popup-expander:-moz-focusring,
.identity-popup-permission-remove-button:-moz-focusring {
box-shadow: var(--focus-ring-box-shadow);
}
#identity-popup-multiView > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
border-bottom-right-radius: 3.5px;
}
--- a/browser/themes/osx/downloads/downloads.css
+++ b/browser/themes/osx/downloads/downloads.css
@@ -1,20 +1,16 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%include ../../shared/downloads/downloads.inc.css
/*** Panel and outer controls ***/
-#downloadsPanel {
- margin-top: -1px;
-}
-
@keyfocus@ #downloadsSummary:focus,
@keyfocus@ .downloadsPanelFooterButton:focus {
outline: 2px -moz-mac-focusring solid;
outline-offset: -2px;
}
/*** List items and similar elements in the summary ***/
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -194,16 +194,68 @@
transform: translateX(-@menuPanelWidth@);
}
panelview {
-moz-box-orient: vertical;
-moz-box-flex: 1;
}
+/* This section is to anchor all the drop down panels at the same height, shift the
+ panel`s top margin according to its positioning and the uidensity of the window. */
+#downloadsPanel,
+#widget-overflow,
+#appMenu-popup,
+#customizationui-widget-panel {
+ margin-top: -6px;
+}
+
+/* The difference between the toolbar buttons` padding and the urlbar-icons` padding,
+ then subtract 6px. */
+#pageActionActivatedActionPanel,
+#pageActionPanel,
+#editBookmarkPanel,
+.browser-extension-panel {
+ margin-top: calc(var(--toolbarbutton-inner-padding) - var(--urlbar-icon-padding) - 6px)
+}
+
+/* The identity popup does not have any padding of its own,
+ otherwise would use the same formula as above. */
+#identity-popup {
+ margin-top: calc(var(--toolbarbutton-inner-padding) - 6px);
+}
+
+/* The bookmarks toolbar is too thin to have the panels overlap 6px. */
+#downloadsPanel.bookmarks-toolbar,
+#widget-overflow.bookmarks-toolbar,
+#appMenu-popup.bookmarks-toolbar,
+#customizationui-widget-panel.bookmarks-toolbar {
+ margin-top: -1px;
+}
+
+/* The BMB_bookmarksPopup is unique because it is built into the
+ bookmarks-menu-button, resulting in many edge cases. */
+#BMB_bookmarksPopup {
+ margin-top: -8px;
+}
+
+:root:not([uidensity]) #nav-bar #BMB_bookmarksPopup {
+ margin-top: -11px;
+}
+
+:root[uidensity=touch] #nav-bar #BMB_bookmarksPopup,
+:root[uidensity=touch] #TabsToolbar #BMB_bookmarksPopup,
+:root[uidensity=compact] #BMB_bookmarksPopup {
+ margin-top: -9px;
+}
+
+:root[uidensity=compact] #TabsToolbar #BMB_bookmarksPopup {
+ margin-top: -7px;
+}
+
.panel-subview-body {
overflow-y: auto;
overflow-x: hidden;
-moz-box-flex: 1;
}
.panel-view-body-unscrollable {
overflow: hidden;
--- a/browser/themes/shared/toolbarbuttons.inc.css
+++ b/browser/themes/shared/toolbarbuttons.inc.css
@@ -107,20 +107,16 @@ toolbar .toolbarbutton-1 {
padding-inline-start: 5px;
padding-inline-end: 5px;
}
toolbar .toolbarbutton-1 > menupopup {
margin-top: -3px;
}
-toolbar .toolbarbutton-1 > menupopup.cui-widget-panel {
- margin-top: -8px;
-}
-
.findbar-button > .toolbarbutton-text,
toolbarbutton.bookmark-item:not(.subviewbutton),
toolbar .toolbarbutton-1 > .toolbarbutton-icon,
toolbar .toolbarbutton-1 > .toolbarbutton-text,
toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
padding: var(--toolbarbutton-inner-padding);
border-radius: var(--toolbarbutton-border-radius);
}
--- a/browser/themes/shared/urlbar-searchbar.inc.css
+++ b/browser/themes/shared/urlbar-searchbar.inc.css
@@ -1,14 +1,29 @@
%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif
+:root {
+ /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
+ --urlbar-icon-padding: 6px;
+}
+
+:root[uidensity=compact] {
+ /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
+ --urlbar-icon-padding: 4px;
+}
+
+:root[uidensity=touch] {
+ /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
+ --urlbar-icon-padding: 7px;
+}
+
#urlbar,
.searchbar-textbox {
-moz-appearance: none;
background-clip: content-box;
border: 1px solid hsla(240,5%,5%,.25);
border-radius: var(--toolbarbutton-border-radius);
box-shadow: 0 1px 4px rgba(0,0,0,.05);
padding: 0;
@@ -164,36 +179,31 @@
#urlbar-zoom-button {
margin-left: 6px;
margin-right: 6px;
}
.urlbar-icon {
width: 28px;
height: 28px;
- /* 28x28 box - 16x16 image = 12x12 padding, 6 on each side */
- padding: 6px;
+ padding: var(--urlbar-icon-padding);
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
color: inherit;
}
:root[uidensity=compact] .urlbar-icon {
width: 24px;
height: 24px;
- /* 24x24 box - 16x16 image = 8x8 padding, 4 on each side */
- padding: 4px;
}
:root[uidensity=touch] .urlbar-icon {
width: 30px;
height: 30px;
- /* 30x30 box - 16x16 image = 14x14 padding, 7 on each side */
- padding: 7px;
}
.urlbar-icon:hover,
.urlbar-icon-wrapper:hover {
background-color: hsla(0,0%,80%,.4);
}
.urlbar-icon[open],
--- a/browser/themes/windows/customizableui/panelUI.css
+++ b/browser/themes/windows/customizableui/panelUI.css
@@ -78,8 +78,13 @@ menu.subviewbutton > .menu-right:-moz-lo
#edit-controls@inAnyPanel@,
#zoom-controls@inAnyPanel@,
#edit-controls@inAnyPanel@ > toolbarbutton,
#zoom-controls@inAnyPanel@ > toolbarbutton {
border-radius: 0;
}
}
+/* Anchor the bookmark menu drop down panel at the same height as other
+ panels when in the #toolbar-menubar */
+#toolbar-menubar #BMB_bookmarksPopup {
+ margin-top: -6px;
+}