Bug 1695702, correctly position appMenu and panels when proton enabled r=mconley

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

browser/themes/osx/browser.css

@@ -301,6 +301,17 @@ 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;
+}
+
+@media not (-moz-proton) {
 #BMB_bookmarksPopup[side="top"],
 #BMB_bookmarksPopup[side="bottom"] {
   margin-inline: -26px;
@@ -310,6 +321,7 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
 #BMB_bookmarksPopup[side="right"] {
   margin-block: -26px;
 }
+} /** END not Proton **/
 
 /* Bookmarking panel */
 

browser/themes/osx/customizableui/panelUI.css

@@ -23,6 +23,26 @@
 }
 } /** END not Proton **/
 
+@media (-moz-proton) {
+#downloadsPanel,
+#widget-overflow,
+#appMenu-popup,
+#customizationui-widget-panel,
+#identity-popup,
+#permission-popup,
+#protections-popup {
+  margin-top: -1px; /* Overrides value from panelUI.inc.css */
+}
+
+#BMB_bookmarksPopup {
+  margin-top: -4px; /* Overrides value from panelUI.inc.css */
+}
+
+#notification-popup {
+  margin-top: 5px; /* Overrides value from panelUI.inc.css */
+}
+} /** END Proton **/
+
 panelmultiview .toolbaritem-combined-buttons > spacer.before-label {
   width: 42px; /* 18px toolbarbutton padding + 16px icon + 8px label padding start */
 }

browser/themes/shared/customizableui/panelUI.inc.css

@@ -248,6 +248,27 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
   overflow-y: hidden;
 }
 
+#downloadsPanel,
+#widget-overflow,
+#appMenu-popup,
+#customizationui-widget-panel,
+#identity-popup,
+#permission-popup,
+#protections-popup {
+  margin-top: -4px;
+}
+
+#BMB_bookmarksPopup {
+  margin-top: -8px;
+}
+
+@media (-moz-proton) {
+#notification-popup {
+  margin-top: 2px;
+}
+} /** END Proton **/
+
+@media not (-moz-proton) {
 /* 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,
@@ -277,12 +298,6 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
   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;
 }
@@ -304,6 +319,7 @@ panelmultiview[transitioning] > .panel-viewcontainer > .panel-viewstack > panelv
 :root[uidensity=touch] #PersonalToolbar #BMB_bookmarksPopup {
   margin-top: -5px;
 }
+} /** END not Proton **/
 
 .panel-subview-body {
   overflow-y: auto;

toolkit/themes/linux/global/popup.css

@@ -28,11 +28,59 @@ panel[type="arrow"][side="bottom"] {
   margin-inline: -20px;
 }
 
+@media (-moz-proton) {
+#identity-popup[type="arrow"][side="top"],
+#notification-popup[type="arrow"][side="top"],
+#identity-popup[type="arrow"][side="bottom"],
+#notification-popup[type="arrow"][side="bottom"] {
+  margin-inline: -16px;
+}
+
+#permission-popup[type="arrow"][side="top"],
+#permission-popup[type="arrow"][side="bottom"] {
+  margin-inline: calc(-24px - 2 * var(--urlbar-container-padding));
+}
+
+#protections-popup[type="arrow"][side="top"],
+#protections-popup[type="arrow"][side="bottom"] {
+  margin-inline: calc(-20px + 2 * var(--urlbar-container-padding));
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
+  margin-inline: -13px;
+}
+} /** END Proton **/
+
 panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-block: -20px;
 }
 
+@media (-moz-proton) {
+#identity-popup[type="arrow"][side="left"],
+#identity-popup[type="arrow"][side="right"],
+#notification-popup[type="arrow"][side="left"],
+#notification-popup[type="arrow"][side="right"] {
+  margin-block: -16px;
+}
+
+#permission-popup[type="arrow"][side="left"],
+#permission-popup[type="arrow"][side="right"] {
+  margin-block: calc(-24px - 2 * var(--urlbar-container-padding));
+}
+
+#protections-popup[type="arrow"][side="left"],
+#protections-popup[type="arrow"][side="right"] {
+  margin-block: calc(-20px + 2 * var(--urlbar-container-padding));
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="left"],
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
+  margin-block: -13px;
+}
+} /** END Proton **/
+
 .panel-arrowcontent {
   padding: var(--arrowpanel-padding);
   color: var(--arrowpanel-color);

toolkit/themes/osx/global/popup.css

@@ -31,6 +31,55 @@ panel[type="arrow"] {
   background: transparent;
 }
 
+panel[type="arrow"][side="top"],
+panel[type="arrow"][side="bottom"] {
+  margin-inline: -16px;
+}
+
+#identity-popup[type="arrow"][side="top"],
+#identity-popup[type="arrow"][side="bottom"],
+#notification-popup[type="arrow"][side="top"],
+#notification-popup[type="arrow"][side="bottom"],
+#permission-popup[type="arrow"][side="top"],
+#permission-popup[type="arrow"][side="bottom"] {
+  margin-inline: calc(-12px - 2 * var(--urlbar-container-padding));
+}
+
+#protections-popup[type="arrow"][side="top"],
+#protections-popup[type="arrow"][side="bottom"] {
+  margin-inline: calc(-16px + 2 * var(--urlbar-container-padding));
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
+  margin-inline: -8px;
+}
+
+panel[type="arrow"][side="left"],
+panel[type="arrow"][side="right"] {
+  margin-block: -16px;
+}
+
+#identity-popup[type="arrow"][side="left"],
+#identity-popup[type="arrow"][side="right"],
+#notification-popup[type="arrow"][side="left"],
+#notification-popup[type="arrow"][side="right"],
+#permission-popup[type="arrow"][side="left"],
+#permission-popup[type="arrow"][side="right"] {
+  margin-block: calc(-12px - 2 * var(--urlbar-container-padding));
+}
+
+#protections-popup[viewId="PanelUI-profiler"][type="arrow"][side="left"],
+#protections-popup[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
+  margin-block: calc(-16px + 2 * var(--urlbar-container-padding));
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="left"],
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
+  margin-block: -8px;
+}
+
+@media not (-moz-proton) {
 panel[type="arrow"][side="top"],
 panel[type="arrow"][side="bottom"] {
   margin-inline: -25px;
@@ -40,6 +89,7 @@ panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-block: -25px;
 }
+} /** END not Proton **/
 
 .panel-arrowcontent {
   appearance: none;

toolkit/themes/windows/global/popup.css

@@ -81,11 +81,59 @@ panel[type="arrow"][side="bottom"] {
   margin-inline: -20px;
 }
 
+@media (-moz-proton) {
+#identity-popup[type="arrow"][side="top"],
+#notification-popup[type="arrow"][side="top"],
+#identity-popup[type="arrow"][side="bottom"],
+#notification-popup[type="arrow"][side="bottom"] {
+  margin-inline: -16px;
+}
+
+#permission-popup[type="arrow"][side="top"],
+#permission-popup[type="arrow"][side="bottom"] {
+  margin-inline: calc(-24px - 2 * var(--urlbar-container-padding));
+}
+
+#protections-popup[type="arrow"][side="top"],
+#protections-popup[type="arrow"][side="bottom"] {
+  margin-inline: calc(-20px + 2 * var(--urlbar-container-padding));
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="top"],
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="bottom"] {
+  margin-inline: -13px;
+}
+} /** END Proton **/
+
 panel[type="arrow"][side="left"],
 panel[type="arrow"][side="right"] {
   margin-block: -20px;
 }
 
+@media (-moz-proton) {
+#identity-popup[type="arrow"][side="left"],
+#identity-popup[type="arrow"][side="right"],
+#notification-popup[type="arrow"][side="left"],
+#notification-popup[type="arrow"][side="right"] {
+  margin-block: -16px;
+}
+
+#permission-popup[type="arrow"][side="left"],
+#permission-popup[type="arrow"][side="right"] {
+  margin-block: calc(-24px - 2 * var(--urlbar-container-padding));
+}
+
+#protections-popup[type="arrow"][side="left"],
+#protections-popup[type="arrow"][side="right"] {
+  margin-block: calc(-20px + 2 * var(--urlbar-container-padding));
+}
+
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="left"],
+#customizationui-widget-panel[viewId="PanelUI-profiler"][type="arrow"][side="right"] {
+  margin-block: -13px;
+}
+} /** END Proton **/
+
 .panel-arrowcontent {
   padding: var(--arrowpanel-padding);
   color: var(--arrowpanel-color);