Bug 1787666 - Make the panel/addon banner items a proper subviewbutton r=sfoster,desktop-theme-reviewers,dao
authorItiel <itiel_yn8@walla.com>
Tue, 20 Sep 2022 21:10:09 +0000
changeset 635939 d3673dd38f9076fecc481da3871fea2c132ae1ed
parent 635938 da630d5f9eb322cd71852b099f07c8a1029b22b0
child 635940 e0e02468d52611351aa16fc95296c4bbf9ade239
push id170083
push useritiel_yn8@walla.com
push dateTue, 20 Sep 2022 21:12:32 +0000
treeherderautoland@d3673dd38f90 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerssfoster, desktop-theme-reviewers, dao
bugs1787666
milestone107.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 1787666 - Make the panel/addon banner items a proper subviewbutton r=sfoster,desktop-theme-reviewers,dao Differential Revision: https://phabricator.services.mozilla.com/D155796
browser/base/content/appmenu-viewcache.inc.xhtml
browser/base/content/browser-addons.js
browser/themes/shared/customizableui/panelUI-shared.css
--- a/browser/base/content/appmenu-viewcache.inc.xhtml
+++ b/browser/base/content/appmenu-viewcache.inc.xhtml
@@ -16,17 +16,17 @@
 
   <!-- This is a placeholder app menu which should be replaced with the "real"
        Proton app menu before the Proton pref starts getting enabled. -->
   <panelview id="appMenu-protonMainView" class="PanelUI-subView"
              descriptionheightworkaround="true"
              lockpanelvertical="true">
     <vbox class="panel-subview-body">
       <vbox id="appMenu-proton-addon-banners"/>
-      <toolbarbutton id="appMenu-proton-update-banner" class="panel-banner-item"
+      <toolbarbutton id="appMenu-proton-update-banner" class="panel-banner-item subviewbutton"
                      oncommand="PanelUI._onBannerItemSelected(event)"
                      wrap="true"
                      hidden="true"/>
       <toolbaritem id="appMenu-fxa-status2"
                    closemenu="none"
                    class="subviewbutton toolbaritem-combined-buttons">
         <html:div id="appMenu-fxa-text" data-l10n-id="appmenu-fxa-sync-and-save-data2"/>
         <toolbarbutton id="appMenu-fxa-label2"
--- a/browser/base/content/browser-addons.js
+++ b/browser/base/content/browser-addons.js
@@ -1000,17 +1000,17 @@ var gExtensionsNotifications = {
   _createAddonButton(text, icon, callback) {
     let button = document.createXULElement("toolbarbutton");
     button.setAttribute("wrap", "true");
     button.setAttribute("label", text);
     button.setAttribute("tooltiptext", text);
     const DEFAULT_EXTENSION_ICON =
       "chrome://mozapps/skin/extensions/extensionGeneric.svg";
     button.setAttribute("image", icon || DEFAULT_EXTENSION_ICON);
-    button.className = "addon-banner-item";
+    button.className = "addon-banner-item subviewbutton";
 
     button.addEventListener("command", callback);
     PanelUI.addonNotificationContainer.appendChild(button);
   },
 
   updateAlerts() {
     let sideloaded = ExtensionsUI.sideloaded;
     let updates = ExtensionsUI.updates;
--- a/browser/themes/shared/customizableui/panelUI-shared.css
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -436,58 +436,72 @@ toolbarbutton[constrain-size="true"][cui
 }
 
 #zoom-in-button > .toolbarbutton-text,
 #zoom-out-button > .toolbarbutton-text,
 #zoom-reset-button > .toolbarbutton-icon {
   display: none;
 }
 
+/* Main menu banner menuitems */
+
+#appMenu-popup .panel-banner-item,
+#appMenu-popup .addon-banner-item {
+  -moz-box-align: start;
+  color: var(--panel-banner-item-color);
+  background-color: var(--panel-banner-item-background-color);
+  margin-bottom: 4px;
+  font-weight: 600;
+}
+
+:root[uidensity="compact"] .panel-banner-item,
+:root[uidensity="compact"] .addon-banner-item {
+  /* Without some padding the button gets too crowded even for compact mode
+     when the text wraps to a newline. */
+  padding-block: 4px;
+}
+
+#appMenu-popup .panel-banner-item:not([disabled]):hover,
+#appMenu-popup .addon-banner-item:not([disabled]):hover {
+  background-color: var(--panel-banner-item-hover-bgcolor);
+}
+
+#appMenu-popup .panel-banner-item:not([disabled]):hover:active,
+#appMenu-popup .addon-banner-item:not([disabled]):hover:active {
+  background-color: var(--panel-banner-item-active-bgcolor);
+}
+
+#appMenu-popup .panel-banner-item > .toolbarbutton-text,
+#appMenu-popup .addon-banner-item > .toolbarbutton-text {
+  display: inline-block;
+  padding: 0;
+}
+
+.panel-banner-item > .toolbarbutton-icon {
+  width: 16px;
+  height: 16px;
+  /* Move the icon to appear after the text label. */
+  -moz-box-ordinal-group: 2;
+}
+
+.addon-banner-item > .toolbarbutton-icon {
+  display: none;
+}
 
 /* Addon banners use that one for the addon's icon and need a content element
    added to put their generic notification in. */
 .addon-banner-item::after {
   content: "";
-  width: 16px;
-  height: 16px;
-  margin-inline: 10px 12px;
   display: -moz-box;
-}
-
-.addon-banner-item {
-  -moz-image-region: rect(0, 16px, 16px, 0);
-}
-
-.panel-banner-item > .toolbarbutton-icon,
-.addon-banner-item > .toolbarbutton-icon {
+  background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
   width: 16px;
   height: 16px;
-}
-
-.addon-banner-item::after {
-  background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
-  margin-inline-end: 8px;
   -moz-context-properties: fill;
   fill: var(--warning-icon-bgcolor);
-}
-
-.addon-banner-item,
-.panel-banner-item {
-  margin: 0 8px 4px;
-  padding: 8px;
-  padding-inline-start: 0;
-  -moz-box-align: start;
-  box-sizing: border-box;
-  appearance: none;
-  box-shadow: none;
-  border: none;
-  border-radius: 4px;
-  transition: background-color;
-  -moz-box-orient: horizontal;
-  font-weight: 600;
+  margin-inline-start: 10px;
 }
 
 /* FxAccount indicator bits. */
 
 @keyframes syncRotate {
   from { transform: rotate(0); }
   to { transform: rotate(360deg); }
 }
@@ -596,43 +610,16 @@ toolbarbutton[constrain-size="true"][cui
 }
 
 #appMenu-fxa-status2[fxastatus="unverified"] #appMenu-fxa-label2::after {
   content: url("chrome://global/skin/icons/info-filled.svg");
   -moz-context-properties: fill;
   fill: var(--panel-banner-item-info-icon-bgcolor);
 }
 
-
-/* Tracking Protection Button & Toggle */
-
-.addon-banner-item > .toolbarbutton-text,
-.panel-banner-item > .toolbarbutton-text {
-  text-align: start;
-  margin-inline: 8px;
-  padding: 0;
-}
-
-.addon-banner-item > .toolbarbutton-icon,
-.panel-banner-item > .toolbarbutton-icon {
-  margin-inline-end: 0;
-  /* Move the icon to appear after the text label. */
-  -moz-box-ordinal-group: 2;
-}
-
-.addon-banner-item {
-  flex: 1;
-  padding-inline: 0;
-  width: auto;
-}
-
-.addon-banner-item > .toolbarbutton-icon {
-  display: none;
-}
-
 /* Firefox Account Toolbar Panel */
 
 #fxa-avatar-image {
   width: 16px;
   height: 16px;
 }
 
 :root {
@@ -895,34 +882,16 @@ panelmultiview[mainViewId="PanelUI-fxa"]
 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
   display: none;
 }
 
 #PanelUI-fxa-remotetabs-deck:not([syncingtabs]) {
   display: none;
 }
 
-.panel-banner-item,
-.addon-banner-item {
-  color: var(--panel-banner-item-color) !important /* !important overrides the toolbarbutton:hover default style on Linux */;
-  background-color: var(--panel-banner-item-background-color);
-}
-
-.panel-banner-item:not([disabled]):focus,
-.panel-banner-item:not([disabled]):hover,
-.addon-banner-item:not([disabled]):focus,
-.addon-banner-item:not([disabled]):hover {
-  background-color: var(--panel-banner-item-hover-bgcolor);
-}
-
-.panel-banner-item:not([disabled]):hover:active,
-.addon-banner-item:not([disabled]):hover:active {
-  background-color: var(--panel-banner-item-active-bgcolor);
-}
-
 #customization-palette .toolbarbutton-text {
   display: none;
 }
 
 .subview-subheader {
   display: -moz-box;
 }
 
@@ -979,29 +948,24 @@ panelview .toolbarbutton-1,
 .subviewbutton > .menu-iconic-left,
 .subviewbutton > .menu-iconic-text {
   padding-block: 0;
 }
 
 #BMB_bookmarksPopup .subviewbutton > .menu-iconic-text,
 #PlacesToolbar menu > .menu-iconic-text,
 #PlacesToolbar menuitem > .menu-iconic-text,
-.addon-banner-item > .toolbarbutton-text,
 .subviewbutton-iconic > .toolbarbutton-text,
 .subviewbutton[image] > .toolbarbutton-text,
 .subviewbutton[targetURI] > .toolbarbutton-text,
 .subviewbutton.bookmark-item > .toolbarbutton-text,
 .subviewbutton[checked="true"] > .toolbarbutton-text {
   padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */
 }
 
-.addon-banner-item > .toolbarbutton-text {
-  padding-inline-start: 0;
-}
-
 .subviewbutton-iconic > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
   -moz-context-properties: fill;
   fill: currentColor;
 }
 
 /* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons,