Bug 1033395 - Panels Should Be Anchored from the Same Height on the Toolbar. r=johannh
authorErica Wright <ewright@mozilla.com>
Wed, 13 Sep 2017 15:49:32 -0400
changeset 386838 e2129917e3d5e3ea73bc8bd8ca8d160211e0cd52
parent 386837 5d96e43add50b18635bb7104a6aff7b801a3bec7
child 386839 37a3dec05168410ecd3e5531b9dd414cb3e96ced
push id96311
push userarchaeopteryx@coole-files.de
push dateWed, 18 Oct 2017 09:52:02 +0000
treeherdermozilla-inbound@a8a1e8cc1980 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjohannh
bugs1033395
milestone58.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1033395 - Panels Should Be Anchored from the Same Height on the Toolbar. r=johannh MozReview-Commit-ID: 6bhlfeD1esE
browser/components/customizableui/content/panelUI.js
browser/components/downloads/content/downloads.js
browser/components/downloads/content/indicator.js
browser/components/downloads/test/browser/browser_overflow_anchor.js
browser/themes/osx/controlcenter/panel.css
browser/themes/osx/downloads/downloads.css
browser/themes/shared/customizableui/panelUI.inc.css
browser/themes/shared/toolbarbuttons.inc.css
browser/themes/shared/urlbar-searchbar.inc.css
browser/themes/windows/customizableui/panelUI.css
--- 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;
+}