Bug 1595772 - make overflow panel arrow position in customize mode more reliably correct, r=dao
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Fri, 15 Nov 2019 10:25:06 +0000
changeset 502149 74da59be71238a3f51b1e51d654b5c612f3b4397
parent 502148 9cfd6d345f8d512d19c0ab89f80f110c5f6548e0
child 502150 530bb2d5095a391392439b7972b6bd02f62640d5
push id114172
push userdluca@mozilla.com
push dateTue, 19 Nov 2019 11:31:10 +0000
treeherdermozilla-inbound@b5c5ba07d3db [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdao
bugs1595772
milestone72.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 1595772 - make overflow panel arrow position in customize mode more reliably correct, r=dao Differential Revision: https://phabricator.services.mozilla.com/D52934
browser/components/customizableui/CustomizeMode.jsm
browser/themes/shared/customizableui/customizeMode.inc.css
--- a/browser/components/customizableui/CustomizeMode.jsm
+++ b/browser/components/customizableui/CustomizeMode.jsm
@@ -379,16 +379,18 @@ CustomizeMode.prototype = {
 
       let customizableToolbars = document.querySelectorAll(
         "toolbar[customizable=true]:not([autohide=true]):not([collapsed=true])"
       );
       for (let toolbar of customizableToolbars) {
         toolbar.setAttribute("customizing", true);
       }
 
+      this._updateOverflowPanelArrowOffset();
+
       await this._doTransition(true);
 
       // Let everybody in this window know that we're about to customize.
       CustomizableUI.dispatchToolboxEvent("customizationstarting", {}, window);
 
       await this._wrapToolbarItems();
       this.populatePalette();
 
@@ -582,16 +584,49 @@ CustomizeMode.prototype = {
       docEl.setAttribute("customize-entered", true);
     } else {
       docEl.removeAttribute("customizing");
       docEl.removeAttribute("customize-entered");
     }
     return Promise.resolve();
   },
 
+  /**
+   * The overflow panel in customize mode should have its arrow pointing
+   * at the overflow button. In order to do this correctly, we pass the
+   * distance between the inside of window and the middle of the button
+   * to the customize mode markup in which the arrow and panel are placed.
+   */
+  async _updateOverflowPanelArrowOffset() {
+    let currentDensity = this.document.documentElement.getAttribute(
+      "uidensity"
+    );
+    let offset = await this.window.promiseDocumentFlushed(() => {
+      let overflowButton = this.$("nav-bar-overflow-button");
+      let buttonRect = overflowButton.getBoundingClientRect();
+      let endDistance;
+      if (this.window.RTL_UI) {
+        endDistance = buttonRect.left;
+      } else {
+        endDistance = this.window.innerWidth - buttonRect.right;
+      }
+      return endDistance + buttonRect.width / 2;
+    });
+    if (
+      !this.document ||
+      currentDensity != this.document.documentElement.getAttribute("uidensity")
+    ) {
+      return;
+    }
+    this.$("customization-panelWrapper").style.setProperty(
+      "--panel-arrow-offset",
+      offset + "px"
+    );
+  },
+
   _getCustomizableChildForNode(aNode) {
     // NB: adjusted from _getCustomizableParent to keep that method fast
     // (it's used during drags), and avoid multiple DOM loops
     let areas = CustomizableUI.areas;
     // Caching this length is important because otherwise we'll also iterate
     // over items we add to the end from within the loop.
     let numberOfAreas = areas.length;
     for (let i = 0; i < numberOfAreas; i++) {
@@ -1361,16 +1396,17 @@ CustomizeMode.prototype = {
     let getMoreURL = Services.urlFormatter.formatURLPref(
       "lightweightThemes.getMoreURL"
     );
     this.window.openTrustedLinkIn(getMoreURL, "tab");
   },
 
   updateUIDensity(mode) {
     this.window.gUIDensity.update(mode);
+    this._updateOverflowPanelArrowOffset();
   },
 
   setUIDensity(mode) {
     let win = this.window;
     let gUIDensity = win.gUIDensity;
     let currentDensity = gUIDensity.getCurrentDensity();
     let panel = win.document.getElementById("customization-uidensity-menu");
 
@@ -1379,20 +1415,22 @@ CustomizeMode.prototype = {
     // If the user is choosing a different UI density mode while
     // the mode is overriden to Touch, remove the override.
     if (currentDensity.overridden) {
       Services.prefs.setBoolPref(gUIDensity.autoTouchModePref, false);
     }
 
     this._onUIChange();
     panel.hidePopup();
+    this._updateOverflowPanelArrowOffset();
   },
 
   resetUIDensity() {
     this.window.gUIDensity.update();
+    this._updateOverflowPanelArrowOffset();
   },
 
   onUIDensityMenuShowing() {
     let win = this.window;
     let doc = win.document;
     let gUIDensity = win.gUIDensity;
     let currentDensity = gUIDensity.getCurrentDensity();
 
--- a/browser/themes/shared/customizableui/customizeMode.inc.css
+++ b/browser/themes/shared/customizableui/customizeMode.inc.css
@@ -37,17 +37,18 @@
 
 :root[lwtheme-image] #customization-header {
   text-shadow: 0 0 1em var(--toolbar-non-lwt-bgcolor),
                0 0 1em var(--toolbar-non-lwt-bgcolor),
                0 0 .5em var(--toolbar-non-lwt-bgcolor);
 }
 
 #customization-panel-container {
-  padding: 0 20px 25px;
+  --customization-panel-padding: 20px;
+  padding: 0 var(--customization-panel-padding) 25px;
 }
 
 #customization-footer {
   border-top: 1px solid rgba(0,0,0,.15);
   padding: 10px;
 }
 
 %if defined(XP_MACOSX) || defined(XP_WIN)
@@ -483,32 +484,21 @@ toolbarpaletteitem > #search-container >
   padding: 0 1px;
   /* specify width for hidpi image to fit correctly */
   width: 20px;
 %endif
   list-style-image: url("chrome://global/skin/arrow/panelarrow-vertical.svg");
   -moz-context-properties: fill, stroke;
   fill: var(--arrowpanel-background);
   stroke: var(--arrowpanel-border-color);
-  /* The arrow needs to point to the overflow button. The numbers involved
-   * are:
-   * overflow button width: (16px + 2 * 2px padding
-   * + 2 * toolbarbutton-inner-padding)
-   * hamburger button width: (16px + 2 * 5px padding
-   * + 2 * toolbarbutton-inner-padding)
-   * hamburger button border + margin: 1px + 2px
-   * The total desired offset from the right edge of the window is thus:
-   * 10px + 1 * toolbarbutton-inner-padding (center of overflow button) +
-   * 29px + 2 * toolbarbutton-inner-padding
-   * The #customization-panel-container has a 20px margin, so that leaves:
-   * 19px + 3 * toolbarbutton-inner-padding
-   * Finally, we need to center the arrow, which is 20px wide, so subtract
-   * 10px.
+  /* JS code sets --panel-arrow-offset to the distance between the middle of the
+   * overflow button and the end of the window. We subtract the padding of our
+   * container (#customization-panel-container) and half our own width:
    */
-  margin-inline-end: calc(9px + 3 * var(--toolbarbutton-inner-padding));
+  margin-inline-end: calc(var(--panel-arrow-offset) - var(--customization-panel-padding) - 10px);
   vertical-align: top;
 }
 
 #customization-panelDescription {
   font-size: 1.1em;
   padding: 2px 12px 10px;
   margin: 0;
 }