Bug 1697947 - Apply Proton button stylings to the footers of more panels. r=harry
authorMike Conley <mconley@mozilla.com>
Tue, 16 Mar 2021 21:48:37 +0000
changeset 571502 b4f65bafec7d094c4be82f31caaff45c9a2b09f6
parent 571501 458e9aec2d06db9ea88d13916ca9dd1aeeb1c32a
child 571503 f1ae93d282f6eed8537eedf87afea7aeff696971
push id38293
push usermalexandru@mozilla.com
push dateWed, 17 Mar 2021 09:53:31 +0000
treeherdermozilla-central@9ad67cd4d216 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharry
bugs1697947
milestone88.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 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
browser/components/controlcenter/content/protectionsPanel.inc.xhtml
browser/components/downloads/content/downloadsPanel.inc.xhtml
browser/themes/shared/browser-custom-colors.inc.css
browser/themes/shared/downloads/downloads.inc.css
browser/themes/shared/places/editBookmarkPanel.inc.css
toolkit/themes/shared/global.inc.css
toolkit/themes/shared/popupnotification.inc.css
--- a/browser/components/controlcenter/content/identityPanel.inc.xhtml
+++ b/browser/components/controlcenter/content/identityPanel.inc.xhtml
@@ -86,17 +86,17 @@
                 class="identity-popup-expander"
                 when-connection="not-secure secure secure-ev secure-cert-user-overridden cert-error-page https-only-error-page"
                 oncommand="gIdentityHandler.showSecuritySubView();"/>
       </hbox>
 
       <!-- 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);"/>
       </vbox>
     </panelview>
 
     <!-- Security SubView -->
     <panelview id="identity-popup-securityView"
@@ -174,17 +174,17 @@
                 class="panel-button"
                 oncommand="gIdentityHandler.disableMixedContentProtection()"/>
         <button when-mixedcontent="active-loaded"
                 data-l10n-id="identity-enable-mixed-content-blocking"
                 class="panel-button"
                 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"
                 oncommand="gIdentityHandler.handleMoreInfoClick(event);"/>
       </vbox>
 
     </panelview>
   </panelmultiview>
--- a/browser/components/controlcenter/content/protectionsPanel.inc.xhtml
+++ b/browser/components/controlcenter/content/protectionsPanel.inc.xhtml
@@ -212,81 +212,81 @@
     <panelview id="protections-popup-trackersView"
                role="document"
                descriptionheightworkaround="true">
         <vbox id="protections-popup-trackersView-description" class="protections-popup-description">
           <description data-l10n-id="protections-panel-tracking-content"></description>
         </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');"/>
         </vbox>
     </panelview>
 
     <!-- Social Block SubView -->
     <panelview id="protections-popup-socialblockView"
                role="document"
                descriptionheightworkaround="true">
         <vbox id="protections-popup-socialblockView-heading" class="protections-popup-description">
           <description data-l10n-id="protections-panel-social-media-trackers"></description>
         </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');"/>
         </vbox>
     </panelview>
 
     <!-- Cookies SubView -->
     <panelview id="protections-popup-cookiesView"
                role="document"
                descriptionheightworkaround="true">
         <vbox id="protections-popup-cookiesView-heading" class="protections-popup-description">
           <description data-l10n-id="protections-panel-cross-site-tracking-cookies"></description>
         </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');"/>
         </vbox>
     </panelview>
 
     <!-- Fingerprinters SubView -->
     <panelview id="protections-popup-fingerprintersView"
                role="document"
                descriptionheightworkaround="true">
         <vbox id="protections-popup-fingerprinters-heading" class="protections-popup-description">
           <description data-l10n-id="protections-panel-fingerprinters"></description>
         </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');"/>
         </vbox>
     </panelview>
 
     <!-- Cryptominers SubView -->
     <panelview id="protections-popup-cryptominersView"
                role="document"
                descriptionheightworkaround="true">
         <vbox id="protections-popup-cryptominers-heading" class="protections-popup-description">
           <description data-l10n-id="protections-panel-cryptominers"></description>
         </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');"/>
         </vbox>
     </panelview>
 
     <!-- Send Report SubView -->
     <panelview id="protections-popup-sendReportView"
@@ -307,17 +307,17 @@
             <label control="protections-popup-sendReportView-collection-comments" data-l10n-id="protections-panel-content-blocking-breakage-report-view-collection-comments"></label>
             <html:textarea id="protections-popup-sendReportView-collection-comments" data-l10n-id="protections-panel-content-blocking-breakage-report-view-collection-comments-label"/>
           </vbox>
           <label id="protections-popup-sendReportView-report-error"
             data-l10n-id="protections-panel-sendreportview-error"
             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();"/>
           <button id="protections-popup-sendReportView-submit"
                   default="true"
                   data-l10n-id="protections-panel-content-blocking-breakage-report-view-send-report"
                   oncommand="gProtectionsHandler.onSendReportClicked(); gProtectionsHandler.recordClick('send_report_submit');"/>
         </vbox>
--- a/browser/components/downloads/content/downloadsPanel.inc.xhtml
+++ b/browser/components/downloads/content/downloadsPanel.inc.xhtml
@@ -144,17 +144,17 @@
               <html:progress id="downloadsSummaryProgress"
                              class="downloadProgress"
                              max="100"/>
               <description id="downloadsSummaryDetails"
                            crop="end"/>
             </vbox>
           </hbox>
           <hbox id="downloadsFooterButtons"
-                class="panel-footer">
+                class="panel-footer panel-footer-menulike">
             <button id="downloadsHistory"
                     data-l10n-id="downloads-history"
                     class="downloadsPanelFooterButton"
                     flex="1"
                     oncommand="DownloadsPanel.showDownloadsHistory();"
                     pack="start"/>
           </hbox>
         </stack>
--- a/browser/themes/shared/browser-custom-colors.inc.css
+++ b/browser/themes/shared/browser-custom-colors.inc.css
@@ -1,16 +1,19 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @media not (prefers-contrast) {
   @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-button-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);
     --buttons-secondary-color: rgb(21,20,26);
     --buttons-box-shadow: transparent;
 
     --focus-outline-color: var(--buttons-primary-button-bgcolor);
     --focus-outline-offset: 2px;
--- a/browser/themes/shared/downloads/downloads.inc.css
+++ b/browser/themes/shared/downloads/downloads.inc.css
@@ -49,19 +49,21 @@
 
 #downloadsSummary {
   background: var(--arrowpanel-dimmed);
   border-top: 1px solid var(--panel-separator-color);
   /* Reserve the same space as the button and separator in download items. */
   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;
 }
 
 @item@:hover > toolbarseparator {
   margin: 0;
 }
--- a/browser/themes/shared/places/editBookmarkPanel.inc.css
+++ b/browser/themes/shared/places/editBookmarkPanel.inc.css
@@ -152,15 +152,17 @@ html|img#editBookmarkPanelFavicon[src] {
 #editBMPanel_folderTree {
   min-width: 27em;
 }
 
 #editBookmarkPanelBottomButtons {
   display: flex;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
 .editBookmarkPanelBottomButton {
   flex: 1;
 }
 
 .editBookmarkPanelBottomButton:not(:last-child) {
   border-inline-end: 1px solid var(--panel-separator-color);
 }
+} /** END not Proton **/
--- a/toolkit/themes/shared/global.inc.css
+++ b/toolkit/themes/shared/global.inc.css
@@ -128,17 +128,16 @@ xul|label[disabled="true"] {
 }
 
 /* Panel footers */
 
 @supports not -moz-bool-pref("browser.proton.doorhangers.enabled") {
 .panel-footer {
   background-color: var(--arrowpanel-dimmed);
 }
-} /** END not Proton **/
 
 .panel-footer > xul|button {
   appearance: none;
   border-top: 1px solid var(--panel-separator-color);
   /* !important overrides :hover and :active colors from button.css: */
   color: inherit !important;
   min-width: 0;
   margin: 0;
@@ -175,8 +174,9 @@ xul|label[disabled="true"] {
 
 .panel-footer > xul|button:not([disabled])[default]:hover:active {
   background-color: #002275;
 }
 
 .panel-footer > xul|button > .button-box {
   padding: 0;
 }
+} /** END not Proton **/
--- a/toolkit/themes/shared/popupnotification.inc.css
+++ b/toolkit/themes/shared/popupnotification.inc.css
@@ -105,52 +105,103 @@
 }
 
 .popup-notification-warning {
   color: #d74345;
 }
 
 /** 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 {
   margin-inline-start: 0;
   border-start-start-radius: 0;
   border-end-start-radius: 0;
 }
 
 .popup-notification-button-container > toolbarseparator {
   margin-block: 0;
   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:not(.panel-footer-menulike) > button {
+  background-color: var(--buttons-secondary-bgcolor, color-mix(in srgb, currentColor 13%, transparent));
+}
+
+.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 > .popup-notification-button:not([disabled]):hover {
-  background-color: var(--buttons-secondary-hover-bgcolor, var(--arrowpanel-dimmed-further));
+.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 > .popup-notification-button:not([disabled]):hover:active {
-  background-color: var(--buttons-secondary-active-bgcolor, var(--arrowpanel-dimmed-even-further));
+.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,
 .popup-notification-primary-button {
   flex: unset;
 }
 
 .panel-footer > .popup-notification-secondary-button:not([dropmarkerhidden="true"]) {