Bug 1788273 - Tweak popup alignment so that it looks good on mirrored wayland popups. r=dao,mak

When these panels had arrows, I guess the bottomcenter topleft alignment
made sense so that you could precisely align the arrow, but that's not
what we do now.

Don't use bottomcenter / leftcenter / rightcenter, since we really want
the sides to align.

This shouldn't change behavior on any platform except Linux + Wayland,
where the alignment looks good now in the case of bug 1784876.

Differential Revision: https://phabricator.services.mozilla.com/D156099

browser/base/content/browser-addons.js

@@ -279,7 +279,7 @@ var gXPInstallObserver = {
 
     if (gUnifiedExtensions.isEnabled) {
       options.popupOptions = {
-        position: "bottomcenter topright",
+        position: "bottomright topright",
         x: 2,
         y: 0,
       };
@@ -516,7 +516,7 @@ var gXPInstallObserver = {
 
     if (gUnifiedExtensions.isEnabled) {
       options.popupOptions = {
-        position: "bottomcenter topright",
+        position: "bottomright topright",
         x: 2,
         y: 0,
       };

browser/base/content/browser-pageActions.js

@@ -344,7 +344,7 @@ var BrowserPageActions = {
 
     let anchorNode = this.panelAnchorNodeForAction(action);
     PanelMultiView.openPopup(panelNode, anchorNode, {
-      position: "bottomcenter topright",
+      position: "bottomright topright",
       triggerEvent: event,
     }).catch(Cu.reportError);
   },
@@ -921,7 +921,7 @@ var BrowserPageActions = {
   showPanel(event = null) {
     this.panelNode.hidden = false;
     PanelMultiView.openPopup(this.panelNode, this.mainButtonNode, {
-      position: "bottomcenter topright",
+      position: "bottomright topright",
       triggerEvent: event,
     }).catch(Cu.reportError);
   },

browser/base/content/browser-places.js

@@ -284,7 +284,7 @@ var StarUI = {
       isNewBookmark: this._isNewBookmark,
     });
 
-    this.panel.openPopup(BookmarkingUI.anchor, "bottomcenter topright");
+    this.panel.openPopup(BookmarkingUI.anchor, "bottomright topright");
   },
 
   _createPanelIfNeeded() {

browser/base/content/browser-siteIdentity.js

@@ -1204,7 +1204,7 @@ var gIdentityHandler = {
 
     // Now open the popup, anchored off the primary chrome element
     PanelMultiView.openPopup(this._identityPopup, this._identityIconBox, {
-      position: "bottomcenter topleft",
+      position: "bottomleft topleft",
       triggerEvent: event,
     }).catch(Cu.reportError);
   },

browser/base/content/browser-sitePermissionPanel.js

@@ -37,7 +37,7 @@ var gPermissionPanel = {
    * will be used as the anchor.
    */
   _popupAnchorNode: null,
-  _popupPosition: "bottomcenter topleft",
+  _popupPosition: "bottomleft topleft",
   setAnchor(anchorNode, popupPosition) {
     this._popupAnchorNode = anchorNode;
     this._popupPosition = popupPosition;

browser/base/content/browser-siteProtections.js

@@ -2175,7 +2175,7 @@ var gProtectionsHandler = {
       this._protectionsPopup,
       this._trackingProtectionIconContainer,
       {
-        position: "bottomcenter topleft",
+        position: "bottomleft topleft",
         triggerEvent: event,
       }
     ).catch(Cu.reportError);

browser/base/content/browser-webrtc.js

@@ -56,7 +56,7 @@ var gSharedTabWarning = {
     );
     allowForSessionCheckbox.checked = false;
 
-    panel.openPopup(tab, "bottomcenter topleft", 0, 0);
+    panel.openPopup(tab, "bottomleft topleft", 0, 0);
 
     return true;
   },

browser/base/content/main-popupset.inc.xhtml

@@ -291,7 +291,7 @@
          hidden="true"
          flip="slide"
          orient="vertical"
-         position="bottomcenter topleft">
+         position="bottomleft topleft">
     <toolbarbutton id="sidebar-switcher-bookmarks"
                    data-l10n-id="sidebar-menu-bookmarks"
                    class="subviewbutton"
@@ -458,7 +458,7 @@
            type="arrow"
            hidden="true"
            flip="slide"
-           position="bottomcenter topright"
+           position="bottomright topright"
            tabspecific="true"
            noautofocus="true">
       <panelmultiview id="pageActionPanelMultiView"
@@ -478,7 +478,7 @@
            role="alert"
            type="arrow"
            flip="slide"
-           position="bottomcenter topright"
+           position="bottomright topright"
            tabspecific="true"
            noautofocus="true">
       <hbox id="confirmation-hint-checkmark-animation-container">

browser/components/customizableui/CustomizeMode.jsm

@@ -2670,12 +2670,12 @@ CustomizeMode.prototype = {
     if (panelOnTheLeft) {
       // Tested in RTL, these get inverted automatically, so this does the
       // right thing without taking RTL into account explicitly.
-      position = "leftcenter topright";
+      position = "topleft topright";
       if (toolbarContainer) {
         offsetX = 8;
       }
     } else {
-      position = "rightcenter topleft";
+      position = "topright topleft";
       if (toolbarContainer) {
         offsetX = -8;
       }

browser/components/customizableui/content/panelUI.inc.xhtml

@@ -7,7 +7,7 @@
        role="group"
        type="arrow"
        noautofocus="true"
-       position="bottomcenter topright"
+       position="bottomright topright"
        hidden="true">
   <panelmultiview mainViewId="widget-overflow-mainView">
     <panelview id="widget-overflow-mainView"
@@ -67,7 +67,7 @@
 <html:template id="panicButtonNotificationTemplate">
   <panel id="panic-button-success-notification"
          type="arrow"
-         position="bottomcenter topright"
+         position="bottomright topright"
          hidden="true"
          role="alert"
          orient="vertical">
@@ -220,7 +220,7 @@
        type="arrow"
        hidden="true"
        flip="slide"
-       position="bottomcenter topright"
+       position="bottomright topright"
        noautofocus="true">
   <panelmultiview id="appMenu-multiView" mainViewId="appMenu-protonMainView"
                   viewCacheId="appMenu-viewCache">
@@ -233,7 +233,7 @@
          role="group"
          type="arrow"
          flip="slide"
-         position="bottomcenter topright"
+         position="bottomright topright"
          tabspecific="true">
     <popupnotification id="extension-new-tab-notification"
                        class="extension-controlled-notification"

browser/components/customizableui/content/panelUI.js

@@ -489,7 +489,7 @@ const PanelUI = {
 
       try {
         viewShown = await PanelMultiView.openPopup(tempPanel, anchor, {
-          position: "bottomcenter topright",
+          position: "bottomright topright",
           triggerEvent: aEvent,
         });
       } catch (ex) {
@@ -855,7 +855,7 @@ const PanelUI = {
         el.removeAttribute("data-lazy-l10n-id");
       });
 
-    this.notificationPanel.openPopup(anchor, "bottomcenter topright");
+    this.notificationPanel.openPopup(anchor, "bottomright topright");
   },
 
   _clearNotificationPanel() {

browser/components/customizableui/test/browser_PanelMultiView.js

@@ -85,7 +85,7 @@ async function openPopup(panelIndex, viewIndex) {
   PanelMultiView.openPopup(
     gPanels[panelIndex],
     gPanelAnchors[panelIndex],
-    "bottomcenter topright"
+    "bottomright topright"
   );
   await promiseShown;
 
@@ -440,7 +440,7 @@ add_task(async function test_cancel_mainview_event_sequence() {
   PanelMultiView.openPopup(
     gPanels[0],
     gPanelAnchors[0],
-    "bottomcenter topright"
+    "bottomright topright"
   );
   await promiseHidden;
 
@@ -519,7 +519,7 @@ add_task(async function test_close_while_showing_mainview_event_sequence() {
   PanelMultiView.openPopup(
     gPanels[0],
     gPanelAnchors[0],
-    "bottomcenter topright"
+    "bottomright topright"
   );
   await promiseHiding;
   await promiseHidden;

browser/components/customizableui/test/browser_PanelMultiView_keyboard.js

@@ -37,7 +37,7 @@ let gIframeIframe;
 
 async function openPopup() {
   let shown = BrowserTestUtils.waitForEvent(gMainView, "ViewShown");
-  PanelMultiView.openPopup(gPanel, gAnchor, "bottomcenter topright");
+  PanelMultiView.openPopup(gPanel, gAnchor, "bottomright topright");
   await shown;
 }
 

browser/components/downloads/content/downloads.js

@@ -638,7 +638,7 @@ var DownloadsPanel = {
       PanelMultiView.openPopup(
         this.panel,
         anchor,
-        "bottomcenter topright",
+        "bottomright topright",
         0,
         0,
         false,

browser/components/places/content/places-menupopup.js

@@ -594,7 +594,7 @@
 
       this.setAttribute("flip", "both");
       this.setAttribute("side", "top");
-      this.setAttribute("position", "bottomcenter topright");
+      this.setAttribute("position", "bottomright topright");
     }
 
     _setSideAttribute(event) {

browser/components/translation/content/translation-notification.js

@@ -249,10 +249,7 @@ class MozTranslationNotification extends MozElements.Notification {
         this._getAnonElt("thanksButton").setAttribute("label", strings[3]);
 
         let panel = this._getAnonElt("welcomePanel");
-        panel.openPopup(
-          this._getAnonElt("messageImage"),
-          "bottomcenter topleft"
-        );
+        panel.openPopup(this._getAnonElt("messageImage"), "bottomleft topleft");
 
         Services.prefs.setBoolPref(kWelcomePref, true);
       },

browser/components/uitour/UITour.jsm

@@ -1297,7 +1297,7 @@ var UITour = {
 
       tooltip.setAttribute("targetName", aAnchor.targetName);
 
-      let alignment = "bottomcenter topright";
+      let alignment = "bottomright topright";
       if (aAnchor.infoPanelPosition) {
         alignment = aAnchor.infoPanelPosition;
       }

browser/modules/ExtensionsUI.jsm

@@ -456,7 +456,7 @@ var ExtensionsUI = {
 
       if (browser.ownerGlobal.gUnifiedExtensions.isEnabled) {
         options.popupOptions = {
-          position: "bottomcenter topright",
+          position: "bottomright topright",
           x: 2,
           y: 0,
         };
@@ -517,7 +517,7 @@ var ExtensionsUI = {
 
       if (browser.ownerGlobal.gUnifiedExtensions.isEnabled) {
         options.popupOptions = {
-          position: "bottomcenter topright",
+          position: "bottomright topright",
           x: 2,
           y: 0,
         };

browser/themes/linux/customizableui/panelUI.css

@@ -4,16 +4,6 @@
 
 @import "chrome://browser/skin/customizableui/panelUI-shared.css";
 
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
-  margin-inline: -13px;
-}
-
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="left"],
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
-  margin-block: -13px;
-}
-
 #notification-popup {
   margin-block: -4px;
 }

browser/themes/osx/browser.css

@@ -246,19 +246,8 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
   border-top: 1px solid #C7C7C7;
 }
 
-#BMB_bookmarksPopup[side="top"],
-#BMB_bookmarksPopup[side="bottom"] {
-  margin-inline: -17px;
-}
-
-#BMB_bookmarksPopup[side="left"],
-#BMB_bookmarksPopup[side="right"] {
-  margin-block: -17px;
-}
-
 /* Bookmarking panel */
 
-
 /* The following elements come from editBookmarkPanel.inc.xhtml. Styling that's
    specific to the editBookmarkPanel should be in browser.css. Styling that
    should be shared by all editBookmarkPanel.inc.xhtml consumers should be in

browser/themes/osx/customizableui/panelUI.css

@@ -4,16 +4,6 @@
 
 @import "chrome://browser/skin/customizableui/panelUI-shared.css";
 
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
-  margin-inline: -8px;
-}
-
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="left"],
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
-  margin-block: -8px;
-}
-
 #downloadsPanel,
 #widget-overflow,
 #appMenu-popup,

browser/themes/shared/controlcenter/panel.css

@@ -35,63 +35,6 @@
   -moz-window-shadow: none;
 }
 
-/* Fine-tune panel margins */
-:is(
-  #identity-popup,
-  #notification-popup
-)[type="arrow"]:is([side="top"], [side="bottom"]) {
-  margin-inline: -16px;
-}
-
-:is(
-  #identity-popup,
-  #notification-popup
-)[type="arrow"]:is([side="left"], [side="right"]) {
-  margin-block: -16px;
-}
-
-#permission-popup[type="arrow"]:is([side="top"], [side="bottom"]) {
-  margin-inline: calc(-24px - 2 * var(--urlbar-container-padding));
-}
-
-#permission-popup[type="arrow"]:is([side="left"], [side="right"]) {
-  margin-block: calc(-24px - 2 * var(--urlbar-container-padding));
-}
-
-#protections-popup[type="arrow"]:is([side="top"], [side="bottom"]) {
-  margin-inline: calc(-20px + 2 * var(--urlbar-container-padding));
-}
-
-#protections-popup[type="arrow"]:is([side="left"],[side="right"]) {
-  margin-block: calc(-20px + 2 * var(--urlbar-container-padding));
-}
-
-@media (-moz-platform: macos) {
-  :is(
-    #identity-popup,
-    #notification-popup,
-    #permission-popup
-  )[type="arrow"]:is([side="top"],[side="bottom"]) {
-    margin-inline: calc(-12px - 2 * var(--urlbar-container-padding));
-  }
-
-  :is(
-    #identity-popup,
-    #notification-popup,
-    #permission-popup
-  )[type="arrow"]:is([side="left"],[side="right"]) {
-    margin-block: calc(-12px - 2 * var(--urlbar-container-padding));
-  }
-
-  #protections-popup[type="arrow"]:is([side="top"], [side="bottom"]) {
-    margin-inline: calc(-16px + 2 * var(--urlbar-container-padding));
-  }
-
-  #protections-popup[type="arrow"]:is([side="left"],[side="right"]) {
-    margin-block: calc(-16px + 2 * var(--urlbar-container-padding));
-  }
-}
-
 /* Show the right elements for the right connection states. */
 #identity-popup[customroot=true] [when-customroot=true],
 #identity-popup[connection=not-secure] [when-connection~=not-secure],

browser/themes/shared/toolbarbuttons.css

@@ -210,16 +210,6 @@ toolbar .toolbarbutton-1:focus-visible {
 
 /* bookmarks menu button */
 
-#BMB_bookmarksPopup[side="top"],
-#BMB_bookmarksPopup[side="bottom"] {
-  margin-inline: -20px;
-}
-
-#BMB_bookmarksPopup[side="left"],
-#BMB_bookmarksPopup[side="right"] {
-  margin-block: -20px;
-}
-
 /* ::::: bookmark buttons ::::: */
 
 #personal-toolbar-empty-description,

browser/themes/windows/customizableui/panelUI.css

@@ -4,16 +4,6 @@
 
 @import "chrome://browser/skin/customizableui/panelUI-shared.css";
 
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
-  margin-inline: -13px;
-}
-
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="left"],
-#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
-  margin-block: -13px;
-}
-
 #notification-popup {
   margin-block: -4px;
 }

toolkit/content/widgets/panel.js

@@ -41,7 +41,7 @@
           this.setAttribute("side", "top");
         }
         if (!this.hasAttribute("position")) {
-          this.setAttribute("position", "bottomcenter topleft");
+          this.setAttribute("position", "bottomleft topleft");
         }
         if (!this.hasAttribute("consumeoutsideclicks")) {
           this.setAttribute("consumeoutsideclicks", "false");

toolkit/modules/PopupNotifications.jsm

@@ -1345,7 +1345,7 @@ PopupNotifications.prototype = {
       if (popupOptions) {
         this.panel.openPopup(anchorElement, popupOptions);
       } else {
-        this.panel.openPopup(anchorElement, "bottomcenter topleft", 0, 0);
+        this.panel.openPopup(anchorElement, "bottomleft topleft", 0, 0);
       }
     });
   },

toolkit/themes/linux/global/popup.css

@@ -35,16 +35,6 @@ panel[type="arrow"] {
   background-color: transparent;
 }
 
-panel[type="arrow"][side="top"],
-panel[type="arrow"][side="bottom"] {
-  margin-inline: -20px;
-}
-
-panel[type="arrow"][side="left"],
-panel[type="arrow"][side="right"] {
-  margin-block: -20px;
-}
-
 :is(panel, menupopup)::part(content) {
   display: -moz-box;
   -moz-box-flex: 1;

toolkit/themes/osx/global/popup.css

@@ -38,16 +38,6 @@ panel[type="arrow"] {
   background: transparent;
 }
 
-panel[type="arrow"][side="top"],
-panel[type="arrow"][side="bottom"] {
-  margin-inline: -16px;
-}
-
-panel[type="arrow"][side="left"],
-panel[type="arrow"][side="right"] {
-  margin-block: -16px;
-}
-
 :is(panel, menupopup)::part(content) {
   display: -moz-box;
   -moz-box-flex: 1;

toolkit/themes/windows/global/popup.css

@@ -80,16 +80,6 @@ panel[type="arrow"] {
   border: none;
 }
 
-panel[type="arrow"][side="top"],
-panel[type="arrow"][side="bottom"] {
-  margin-inline: -20px;
-}
-
-panel[type="arrow"][side="left"],
-panel[type="arrow"][side="right"] {
-  margin-block: -20px;
-}
-
 :is(panel, menupopup)::part(content) {
   display: -moz-box;
   -moz-box-flex: 1;