Bug 1690662 - Port the add-on and browser update banners to the Proton AppMenu. r=ewright
authorMike Conley <mconley@mozilla.com>
Fri, 12 Feb 2021 17:59:49 +0000
changeset 567364 51f787a8d5463cd08519bc88fcb137bc4b631bc0
parent 567363 df4d5615fdb988e348a358cdca2b0f5d81226b92
child 567365 e03221c8abfcb7077fc41cdb152b0fdfdfa6edae
push id136372
push usermconley@mozilla.com
push dateFri, 12 Feb 2021 18:02:12 +0000
treeherderautoland@e03221c8abfc [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersewright
bugs1690662
milestone87.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 1690662 - Port the add-on and browser update banners to the Proton AppMenu. r=ewright Differential Revision: https://phabricator.services.mozilla.com/D104749
browser/base/content/browser.xhtml
browser/components/customizableui/content/panelUI.js
browser/themes/shared/customizableui/panelUI.inc.css
--- a/browser/base/content/browser.xhtml
+++ b/browser/base/content/browser.xhtml
@@ -951,16 +951,27 @@
     </panelview>
 
     <!-- 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"
+                       data-l10n-id="appmenuitem-update-banner"
+                       data-l10n-attrs="label-update-downloading"
+                       label-update-available="&updateAvailable.panelUI.label;"
+                       label-update-manual="&updateManual.panelUI.label;"
+                       label-update-unsupported="&updateUnsupported.panelUI.label;"
+                       label-update-restart="&updateRestart.panelUI.label2;"
+                       oncommand="PanelUI._onBannerItemSelected(event)"
+                       wrap="true"
+                       hidden="true"/>
         <toolbarbutton id="appMenu-new-tab-button2"
                        class="subviewbutton subviewbutton-iconic"
                        label="&tabCmd.label;"
                        key="key_newNavigatorTab"
                        command="cmd_newNavigatorTab"/>
         <toolbarbutton id="appMenu-new-window-button2"
                        class="subviewbutton subviewbutton-iconic"
                        data-l10n-id="appmenuitem-new-window"
--- a/browser/components/customizableui/content/panelUI.js
+++ b/browser/components/customizableui/content/panelUI.js
@@ -857,19 +857,22 @@ const PanelUI = {
           : "appMenu-mainView"
       );
     }
     return this._mainView;
   },
 
   get addonNotificationContainer() {
     if (!this._addonNotificationContainer) {
+      let bannerID = this.protonAppMenuEnabled
+        ? "appMenu-proton-addon-banners"
+        : "appMenu-addon-banners";
       this._addonNotificationContainer = PanelMultiView.getViewNode(
         document,
-        "appMenu-addon-banners"
+        bannerID
       );
     }
 
     return this._addonNotificationContainer;
   },
 
   _formatDescriptionMessage(n) {
     let text = {};
--- a/browser/themes/shared/customizableui/panelUI.inc.css
+++ b/browser/themes/shared/customizableui/panelUI.inc.css
@@ -30,35 +30,72 @@
   --arrowpanel-menuitem-margin: 0;
   --arrowpanel-menuitem-padding: 4px 12px;
   --arrowpanel-menuitem-border-radius: unset;
 
   --panelview-toolbarbutton-hover-bgcolor: var(--arrowpanel-dimmed);
   --panelview-toolbarbutton-hover-color: inherit;
   --panelview-toolbarbutton-active-bgcolor: var(--arrowpanel-dimmed-further);
   --panelview-toolbarbutton-active-color: inherit;
+  --panel-banner-item-color: black;
+  --panel-banner-item-background-color: hsla(96,65%,75%,.5);
+  --panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
+  --panel-banner-item-active-bgcolor: hsl(96,65%,75%);
+  --panel-banner-item-update-supported-bgcolor: #74BF43;
+  --panel-banner-item-update-unsupported-bgcolor: #FFE900;
+}
+
+:root[lwt-popup-brighttext] {
+  --panel-banner-item-color: @appmenuWarningColorBrightText@;
+  --panel-banner-item-background-color: rgba(48,230,11,.1);
+  --panel-banner-item-hover-bgcolor: rgba(48,230,11,.15);
+  --panel-banner-item-active-bgcolor: rgba(48,230,11,.2);
 }
 
 @supports -moz-bool-pref("browser.proton.appmenu.enabled") {
 :root {
   --panelview-toolbarbutton-hover-bgcolor: #0250BB;
   --panelview-toolbarbutton-hover-color: #FFFFFF;
   --panelview-toolbarbutton-active-bgcolor: #053E94;
   --panelview-toolbarbutton-active-color: #FFFFFF;
-
+  --panel-banner-item-color: rgba(8,64,63,1);
+  --panel-banner-item-background-color: rgba(209,255,238,1);
+
+  /**
+   * --panel-banner-item-hover-bgcolor, --panel-banner-item-active-bgcolor
+   * and --panel-banner-item-update-unsupported-bgcolor are temporary
+   * colours until the right ones are determined, which is tracked by
+   * bug 1692040.
+   */
+  --panel-banner-item-hover-bgcolor: hsla(96,65%,75%,.8);
+  --panel-banner-item-active-bgcolor: hsl(96,65%,75%);
+  --panel-banner-item-update-unsupported-bgcolor: #FFE900;
+
+  --panel-banner-item-update-supported-bgcolor: rgba(0,135,135,1);
   --arrowpanel-menuitem-margin: 0 8px;
   --arrowpanel-menuitem-padding: 8px 12px;
   --arrowpanel-menuitem-border-radius: 4px;
 }
 
 :root[lwt-popup-brighttext] {
   --panelview-toolbarbutton-hover-bgcolor: #00B4F5;
   --panelview-toolbarbutton-hover-color: #FFFFFF;
   --panelview-toolbarbutton-active-bgcolor: #008DEB;
   --panelview-toolbarbutton-active-color: #FFFFFF;
+
+  /**
+   * --panel-banner-item-color, --panel-banner-item-background-color,
+   * --panel-banner-item-hover-bgcolor and --panel-banner-item-active-bgcolor
+   * are temporary colours until the right ones are determined, which is
+   * tracked by bug 1692040.
+   */
+  --panel-banner-item-color: @appmenuWarningColorBrightText@;
+  --panel-banner-item-background-color: rgba(48,230,11,.1);
+  --panel-banner-item-hover-bgcolor: rgba(48,230,11,.15);
+  --panel-banner-item-active-bgcolor: rgba(48,230,11,.2);
 }
 
 } /*** END proton ***/
 
 :root:not([uidensity=compact], [chromehidden~="toolbar"]) #PanelUI-button {
   margin-inline-start: 3px;
   border-inline-start: 1px solid;
   border-image: linear-gradient(
@@ -114,33 +151,50 @@
 #PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
 }
 
 #PanelUI-menu-button[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   background: #FFE900 url(chrome://browser/skin/update-badge.svg) no-repeat center;
 }
 
+@supports -moz-bool-pref("browser.proton.appmenu.enabled") {
+.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon,
+.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon {
+  background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  border-radius: 50%;
+}
+
+.panel-banner-item[notificationid="update-unsupported"] > .toolbarbutton-icon {
+  background: var(--panel-banner-item-update-unsupported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  border-radius: 50%;
+}
+}
+
+@supports not -moz-bool-pref("browser.proton.appmenu.enabled") {
 .panel-banner-item[notificationid="update-available"]::after,
 .panel-banner-item[notificationid="update-downloading"]::after,
 .panel-banner-item[notificationid="update-manual"]::after,
 .panel-banner-item[notificationid="update-other-instance"]::after,
 .panel-banner-item[notificationid="update-restart"]::after {
-  background: #74BF43 url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  background: var(--panel-banner-item-update-supported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
   border-radius: 50%;
 }
 
 .panel-banner-item[notificationid="update-unsupported"]::after {
-  background: #FFE900 url(chrome://browser/skin/update-badge.svg) no-repeat center;
+  background: var(--panel-banner-item-update-unsupported-bgcolor) url(chrome://browser/skin/update-badge.svg) no-repeat center;
   border-radius: 50%;
 }
-
 .panel-banner-item[notificationid^=update] {
   list-style-image: url(chrome://branding/content/icon16.png);
 }
+} /** END not Proton **/
 
 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
   height: 13px;
   background: url(chrome://browser/skin/warning.svg) center / contain no-repeat transparent;
   box-shadow: none;
   border-radius: 0;
   /* Use the included fallbacks defined in the SVG file instead of inheriting from .toolbarbutton-1. */
@@ -557,16 +611,17 @@ toolbarbutton[constrain-size="true"][cui
 .addon-banner-item:hover {
   background-color: @appmenuWarningBackgroundColorHover@;
 }
 
 .addon-banner-item:hover:active {
   background-color: @appmenuWarningBackgroundColorActive@;
 }
 
+.panel-banner-item > .toolbarbutton-icon,
 .addon-banner-item > .toolbarbutton-icon {
   width: 16px;
   height: 16px;
 }
 
 .addon-banner-item::after {
   background: url(chrome://browser/skin/warning.svg) no-repeat center;
 }
@@ -586,16 +641,29 @@ toolbarbutton[constrain-size="true"][cui
   appearance: none;
   box-shadow: none;
   border: none;
   border-radius: 0;
   transition: background-color;
   -moz-box-orient: horizontal;
 }
 
+@supports -moz-bool-pref("browser.proton.appmenu.enabled") {
+.addon-banner-item,
+.panel-banner-item {
+  margin: 8px;
+  padding: 8px;
+  min-height: unset;
+  border-radius: 4px;
+  -moz-box-align: start;
+}
+
+} /** END Proton **/
+
+@supports not -moz-bool-pref("browser.proton.appmenu.enabled") {
 .panel-banner-item {
   border-block: 1px solid var(--panel-separator-color);
   padding-inline-start: 12px;
 }
 
 #appMenu-addon-banners:not(:empty) + .panel-banner-item {
   /* Overlap the .addon-banner-item border so there's one border. */
   margin-top: -1px;
@@ -604,24 +672,21 @@ toolbarbutton[constrain-size="true"][cui
 #appMenu-addon-banners > .addon-banner-item {
   padding-inline-start: 12px;
 }
 
 .panel-banner-item > .toolbarbutton-text {
   width: 0; /* Fancy cropping solution for flexbox. */
 }
 
-.panel-banner-item > .toolbarbutton-icon {
-  width: 16px;
-}
-
 #appMenu-addon-banners:not(:empty) ~ #appMenu-fxa-status,
 .panel-banner-item:not([hidden]) + #appMenu-fxa-status {
   margin-top: 6px;
 }
+} /** END not Proton **/
 
 /* FxAccount indicator bits. */
 
 #appMenu-fxa-label {
   -moz-context-properties: fill;
   fill: currentColor;
   list-style-image: var(--avatar-image-url);
 }
@@ -1034,41 +1099,27 @@ panelmultiview[mainViewId="PanelUI-fxa"]
   visibility: collapse;
 }
 
 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
   display: none;
 }
 
 .panel-banner-item {
-  color: black !important /* !important overrides the toolbarbutton:hover default style on Linux */;
-  background-color: hsla(96,65%,75%,.5);
+  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 {
-  background-color: hsla(96,65%,75%,.8);
+  background-color: var(--panel-banner-item-hover-bgcolor);
 }
 
 .panel-banner-item:not([disabled]):hover:active {
-  background-color: hsl(96,65%,75%);
-}
-
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]) {
-  background-color: rgba(48,230,11,.1);
-  color: @appmenuWarningColorBrightText@ !important;
-}
-
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):focus,
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):hover {
-  background-color: rgba(48,230,11,.15);
-}
-
-:root[lwt-popup-brighttext] .panel-banner-item:not([disabled]):active {
-  background-color: rgba(48,230,11,.2);
+  background-color: var(--panel-banner-item-active-bgcolor);
 }
 
 .panel-banner-item[notificationid="update-unsupported"] {
   background-color: @appmenuWarningBackgroundColor@;
 }
 
 .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):focus,
 .panel-banner-item[notificationid="update-unsupported"]:not([disabled]):hover {
@@ -1764,19 +1815,21 @@ toolbarpaletteitem[place="menu-panel"] >
 }
 
 #panic-button-success-closebutton:hover:active {
   background-color: #d0d0d0;
   border-color: #aaa;
 }
 
 @media (min-resolution: 1.1dppx) {
-  .panel-banner-item[notificationid^=update] {
-    list-style-image: url(chrome://branding/content/icon32.png);
-  }
+  @supports not -moz-bool-pref("browser.proton.appmenu.enabled") {
+    .panel-banner-item[notificationid^=update] {
+      list-style-image: url(chrome://branding/content/icon32.png);
+    }
+  } /** END not Proton **/
 
   #panic-button-success-icon,
   #PanelUI-panic-timeframe-icon {
     list-style-image: url(chrome://browser/skin/panic-panel/header@2x.png);
   }
 
   #PanelUI-panic-actionlist-cookies {
     background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons@2x.png), 0, 32, 32, 0);