Bug 1697947 - Apply Proton button stylings to the footers of more panels. r=harry

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

browser/components/controlcenter/content/identityPanel.inc.xhtml

@@ -91,7 +91,7 @@
       <!-- Clear Site Data Button -->
       <vbox hidden="true"
             id="identity-popup-clear-sitedata-footer"
-            class="panel-footer">
+            class="panel-footer panel-footer-menulike">
         <button id="identity-popup-clear-sitedata-button"
                 data-l10n-id="identity-clear-site-data"
                 oncommand="gIdentityHandler.clearSiteData(event);"/>
@@ -179,7 +179,7 @@
                 oncommand="gIdentityHandler.enableMixedContentProtection()"/>
       </vbox>
 
-      <vbox id="identity-popup-more-info-footer" class="panel-footer">
+      <vbox id="identity-popup-more-info-footer" class="panel-footer panel-footer-menulike">
         <!-- More Security Information -->
         <button id="identity-popup-more-info"
                 data-l10n-id="identity-more-info-link-text"

browser/components/controlcenter/content/protectionsPanel.inc.xhtml

@@ -217,7 +217,7 @@
         </vbox>
         <vbox id="protections-popup-trackersView-list" class="protections-popup-list">
         </vbox>
-        <vbox class="panel-footer">
+        <vbox class="panel-footer panel-footer-menulike">
           <button id="protections-popup-trackersView-settings-button"
                   data-l10n-id="protections-panel-content-blocking-manage-settings"
                   oncommand="gProtectionsHandler.openPreferences(); gProtectionsHandler.recordClick('subview_settings', 'trackers');"/>
@@ -233,7 +233,7 @@
         </vbox>
         <vbox id="protections-popup-socialblockView-list" class="protections-popup-list">
         </vbox>
-        <vbox class="panel-footer">
+        <vbox class="panel-footer panel-footer-menulike">
           <button id="protections-popup-socialblockView-settings-button"
                   data-l10n-id="protections-panel-content-blocking-manage-settings"
                   oncommand="gProtectionsHandler.openPreferences(); gProtectionsHandler.recordClick('subview_settings', 'social');"/>
@@ -249,7 +249,7 @@
         </vbox>
         <vbox id="protections-popup-cookiesView-list" class="protections-popup-list">
         </vbox>
-        <vbox class="panel-footer">
+        <vbox class="panel-footer panel-footer-menulike">
           <button id="protections-popup-cookiesView-settings-button"
                   data-l10n-id="protections-panel-content-blocking-manage-settings"
                   oncommand="gProtectionsHandler.openPreferences(); gProtectionsHandler.recordClick('subview_settings', 'cookies');"/>
@@ -265,7 +265,7 @@
         </vbox>
         <vbox id="protections-popup-fingerprintersView-list" class="protections-popup-list">
         </vbox>
-        <vbox class="panel-footer">
+        <vbox class="panel-footer panel-footer-menulike">
           <button id="protections-popup-fingerprintersView-settings-button"
                   data-l10n-id="protections-panel-content-blocking-manage-settings"
                   oncommand="gProtectionsHandler.openPreferences(); gProtectionsHandler.recordClick('subview_settings', 'fingerprinters');"/>
@@ -281,7 +281,7 @@
         </vbox>
         <vbox id="protections-popup-cryptominersView-list" class="protections-popup-list">
         </vbox>
-        <vbox class="panel-footer">
+        <vbox class="panel-footer panel-footer-menulike">
           <button id="protections-popup-cryptominersView-settings-button"
                   data-l10n-id="protections-panel-content-blocking-manage-settings"
                   oncommand="gProtectionsHandler.openPreferences(); gProtectionsHandler.recordClick('subview_settings', 'cryptominers');"/>
@@ -312,7 +312,7 @@
             hidden="true" role="alert"></label>
         </vbox>
         <vbox id="protections-popup-sendReportView-footer"
-              class="panel-footer">
+              class="panel-footer panel-footer-menulike">
           <button id="protections-popup-sendReportView-cancel"
                   data-l10n-id="protections-panel-content-blocking-breakage-report-view-cancel"
                   oncommand="gProtectionsHandler._protectionsPopupMultiView.goBack();"/>

browser/components/downloads/content/downloadsPanel.inc.xhtml

@@ -149,7 +149,7 @@
             </vbox>
           </hbox>
           <hbox id="downloadsFooterButtons"
-                class="panel-footer">
+                class="panel-footer panel-footer-menulike">
             <button id="downloadsHistory"
                     data-l10n-id="downloads-history"
                     class="downloadsPanelFooterButton"

browser/themes/shared/browser-custom-colors.inc.css

@@ -6,6 +6,9 @@
   @supports -moz-bool-pref("browser.proton.enabled") {
   :root:not(:-moz-lwtheme) {
     --buttons-primary-button-bgcolor: rgb(0,97,224);
+    --buttons-primary-button-hover-bgcolor: rgb(2,80,187);
+    --buttons-primary-button-active-bgcolor: rgb(5,62,148);
+    --buttons-primary-color: rgb(251,251,254);
     --buttons-secondary-bgcolor: rgb(240,240,244);
     --buttons-secondary-hover-bgcolor: rgb(224,224,230);
     --buttons-secondary-active-bgcolor: rgb(207,207,216);

browser/themes/shared/downloads/downloads.inc.css

@@ -54,9 +54,11 @@
   padding-inline-end: 59px;
 }
 
+@supports not -moz-bool-pref("browser.proton.doorhangers.enabled") {
 #downloadsHistory {
   padding-inline: 14px;
 }
+} /** END not Proton **/
 
 @item@ > toolbarseparator {
   margin: 10px 0;

browser/themes/shared/places/editBookmarkPanel.inc.css

@@ -157,6 +157,7 @@ html|img#editBookmarkPanelFavicon[src] {
   display: flex;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
 .editBookmarkPanelBottomButton {
   flex: 1;
 }
@@ -164,3 +165,4 @@ html|img#editBookmarkPanelFavicon[src] {
 .editBookmarkPanelBottomButton:not(:last-child) {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
+} /** END not Proton **/

toolkit/themes/shared/global.inc.css

@@ -133,7 +133,6 @@ xul|label[disabled="true"] {
 .panel-footer {
   background-color: var(--arrowpanel-dimmed);
 }
-} /** END not Proton **/
 
 .panel-footer > xul|button {
   appearance: none;
@@ -180,3 +179,4 @@ xul|label[disabled="true"] {
 .panel-footer > xul|button > .button-box {
   padding: 0;
 }
+} /** END not Proton **/

toolkit/themes/shared/popupnotification.inc.css

@@ -110,18 +110,44 @@
 
 /** PopupNotifications **/
 @supports -moz-bool-pref("browser.proton.doorhangers.enabled") {
-.panel-footer.popup-notification-button-container {
+.panel-footer {
   justify-content: flex-end;
   margin-inline: 16px;
   margin-bottom: 16px;
 }
 
-.panel-footer > .popup-notification-button {
+.panel-footer.panel-footer-menulike {
+  margin-inline: 8px;
+  margin-bottom: 6px;
+  border-top: 1px solid var(--panel-separator-color);
+}
+
+.panel-footer > button {
+  appearance: none;
   border: 0;
   border-radius: 4px;
   padding: 8px 16px;
   font-weight: 600;
-  margin-inline-start: 8px;
+  min-width: 0;
+  margin-inline: 8px 0;
+}
+
+.panel-footer.panel-footer-menulike > button {
+  font-weight: unset;
+  padding: 8px;
+  margin: 4px 0 0;
+}
+
+.panel-footer.panel-footer-menulike > button:hover:active {
+  color: inherit;
+}
+
+.panel-footer.panel-footer-menulike > button > .button-box {
+  display: inline;
+}
+
+.panel-footer.panel-footer-menulike > button > .button-box > .button-text {
+  margin-inline: 0;
 }
 
 .panel-footer > .popup-notification-dropmarker {
@@ -135,17 +161,42 @@
   border-color: transparent;
 }
 
-.panel-footer > .popup-notification-button:not([disabled]) {
+.panel-footer > button {
   color: var(--buttons-secondary-color);
-  background-color: var(--buttons-secondary-bgcolor, var(--arrowpanel-dimmed));
 }
 
-.panel-footer > .popup-notification-button:not([disabled]):hover {
-  background-color: var(--buttons-secondary-hover-bgcolor, var(--arrowpanel-dimmed-further));
+.panel-footer:not(.panel-footer-menulike) > button {
+  background-color: var(--buttons-secondary-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
 }
 
-.panel-footer > .popup-notification-button:not([disabled]):hover:active {
-  background-color: var(--buttons-secondary-active-bgcolor, var(--arrowpanel-dimmed-even-further));
+.panel-footer:not(.panel-footer-menulike) > button[disabled] {
+  opacity: 0.4;
+}
+
+.panel-footer > button:not([disabled]):hover {
+  background-color: var(--buttons-secondary-hover-bgcolor, color-mix(in srgb, currentColor 17%, transparent));
+}
+
+.panel-footer > button:not([disabled]):hover:active {
+  /**
+   * We override the colour here because on macOS, buttons default to
+   * having :hover:active buttons have color -moz-mac-buttonactivetext
+   */
+  color: var(--buttons-secondary-color);
+  background-color: var(--buttons-secondary-active-bgcolor, color-mix(in srgb, currentColor 30%, transparent));
+}
+
+.panel-footer > button:not([disabled])[default] {
+  color: var(--buttons-primary-button-color, -moz-accent-color-foreground) !important;
+  background-color: var(--buttons-primary-button-bgcolor, -moz-accent-color);
+}
+
+.panel-footer > button:not([disabled])[default]:hover {
+  background-color: var(--buttons-primary-button-hover-bgcolor, color-mix(in srgb, black 10%, -moz-accent-color));
+}
+
+.panel-footer > button:not([disabled])[default]:hover:active {
+  background-color: var(--buttons-primary-button-active-bgcolor, color-mix(in srgb, black 20%, -moz-accent-color));
 }
 
 .popup-notification-button,