Bug 1699250 - Use proton dark theme in-content r=jaws

This also fixes up various about pages.

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

browser/app/profile/firefox.js

@@ -846,7 +846,6 @@ pref("browser.preferences.experimental", false);
 pref("browser.preferences.experimental.hidden", false);
 pref("browser.preferences.defaultPerformanceSettings.enabled", true);
 
-pref("browser.proton.enabled", false);
 pref("browser.proton.toolbar.version", 0);
 
 // Backspace and Shift+Backspace behavior

browser/components/protections/content/protections.css

@@ -855,7 +855,7 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
 
 #monitor-breaches-link,
 #monitor-partial-breaches-link {
-  color: var(--in-content-selected-text);
+  color: inherit;
   outline: none;
   text-decoration: none;
   width: 157.267px;
@@ -1002,9 +1002,22 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
   border: 1px solid transparent;
   border-radius: 2px;
   text-decoration: none;
-  color: var(--in-content-selected-text);
+  color: var(--in-content-primary-button-text-color);
+  font-weight: 600;
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+#manage-protections,
+#sign-up-for-monitor-link,
+#get-proxy-extension-link,
+#get-vpn-link,
+#vpn-banner-link,
+.monitor-partial-breaches-link-wrapper,
+.monitor-breaches-link-wrapper {
+  font-weight: inherit;
+}
+} /** END !proton **/
+
 #manage-protections:active,
 #sign-up-for-monitor-link:active,
 #get-proxy-extension-link:active,
@@ -1033,8 +1046,9 @@ label[for="tab-cryptominer"]:hover ~ #highlight-hover {
 #monitor-partial-breaches-link:focus,
 .monitor-block > a:focus,
 #monitor-breaches-link:focus {
-  box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
-  outline: none;
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: 2px;
+  -moz-outline-radius: 6px;
 }
 
 .monitor-card.loading::after,

browser/themes/shared/blockedSite.css

@@ -8,7 +8,7 @@
   --in-content-page-background: #A4000F;
   --in-content-page-color: white;
   --in-content-text-color: white;
-  --in-content-selected-text: black;
+  --in-content-primary-button-text-color: black;
   --in-content-button-background: transparent;
   --in-content-button-background-hover: #5a0002;
   --in-content-button-background-active: #3e0200;

layout/base/PresShell.cpp

@@ -33,6 +33,7 @@
 #include "mozilla/Sprintf.h"
 #include "mozilla/StaticAnalysisFunctions.h"
 #include "mozilla/StaticPrefs_apz.h"
+#include "mozilla/StaticPrefs_browser.h"
 #include "mozilla/StaticPrefs_dom.h"
 #include "mozilla/StaticPrefs_font.h"
 #include "mozilla/StaticPrefs_layout.h"
@@ -5317,7 +5318,8 @@ nscolor PresShell::GetDefaultBackgroundColorToDraw() {
       doc->PrefersColorScheme(Document::IgnoreRFP::Yes) ==
           StylePrefersColorScheme::Dark) {
     // Use --in-content-page-background for prefers-color-scheme: dark.
-    return NS_RGB(0x2A, 0x2A, 0x2E);
+    return StaticPrefs::browser_proton_enabled() ? NS_RGB(0x1C, 0x1B, 0x22)
+                                                 : NS_RGB(0x2A, 0x2A, 0x2E);
   }
 
   return backgroundColor;

layout/style/res/plaintext.css

@@ -21,9 +21,16 @@ html:not([dir]) pre { /* Not a UA sheet, so doesn't use :-moz-has-dir-attr */
   @media (prefers-color-scheme: dark) {
     :root {
       /* in-content-page-{color, background} for dark theme. */
+      background: rgb(28,27,34);
+      color: rgb(251,251,254);
+    }
+
+    @supports not -moz-bool-pref("browser.proton.enabled") {
+    :root {
       background: #2a2a2e;
       color: rgb(249, 249, 250);
     }
+    } /** END !proton **/
   }
 }
 

modules/libpref/init/StaticPrefList.yaml

@@ -1115,6 +1115,12 @@
   value: false
   mirror: always
 
+# Enable Proton restyle. Requires restart.
+- name: browser.proton.enabled
+  type: bool
+  value: false
+  mirror: always
+
 # Blocked plugin content
 - name: browser.safebrowsing.blockedURIs.enabled
   type: bool

toolkit/components/aboutperformance/content/aboutPerformance.css

@@ -202,7 +202,7 @@ td {
 
 #dispatch-tbody > tr[selected] > td {
   background-color: var(--in-content-item-selected);
-  color: var(--in-content-selected-text);
+  color: var(--in-content-item-selected-text);
 }
 #dispatch-tbody > tr:hover {
   background-color: var(--in-content-item-hover);

toolkit/components/aboutprocesses/content/aboutProcesses.css

@@ -117,7 +117,7 @@ td:first-child {
 
 tr[selected] > td {
   background-color: var(--in-content-item-selected);
-  color: var(--in-content-selected-text);
+  color: var(--in-content-item-selected-text);
 }
 #process-tbody > tr:hover {
   background-color: var(--in-content-item-hover);

toolkit/components/certviewer/content/components/certificate-section.css

@@ -57,6 +57,7 @@ h1 {
 
 .certificate-tab:focus-visible {
   z-index: 1;
+  outline: 2px solid var(--in-content-focus-outline-color);
 }
 
 .tab:hover {

toolkit/components/printing/content/print.css

@@ -12,7 +12,6 @@ body {
   flex-direction: column;
   justify-content: flex-start;
   overflow: hidden;
-  background: var(--in-content-box-background);
 }
 
 body[loading] #print {
@@ -116,7 +115,6 @@ input[type="number"],
 input[type="text"] {
   padding: 2px;
   padding-inline-start: 4px;
-  outline: none !important;
 }
 
 .toggle-group-label {
@@ -241,13 +239,6 @@ input[type="text"] {
   content: url("chrome://global/content/portrait.svg");
 }
 
-select:invalid,
-input[type="text"]:invalid,
-input[type="number"]:invalid {
-  border: 1px solid #D70022;
-  box-shadow: 0 0 0 1px #D70022, 0 0 0 4px rgba(215, 0, 34, 0.3);
-}
-
 .error-message {
   font-size: 12px;
   color: #D70022;

toolkit/components/printing/content/toggle-group.css

@@ -63,7 +63,7 @@
 
 .toggle-group-input:enabled:checked + .toggle-group-label {
   background-color: var(--in-content-primary-button-background);
-  color: var(--in-content-selected-text);
+  color: var(--in-content-primary-button-text-color);
 }
 
 .toggle-group-input:enabled:checked + .toggle-group-label:hover {

toolkit/mozapps/extensions/content/aboutaddons.css

@@ -309,6 +309,12 @@ addon-card[expanded] .update-postponed-bar + .addon-card-message {
   text-decoration: none;
 }
 
+.addon-name-link:-moz-focusring {
+  /* Since the parent is overflow:hidden to ellipsize the regular outline is hidden. */
+  outline-offset: -1px;
+  outline-width: 1px;
+}
+
 .addon-badge {
   display: inline-block;
   margin-inline-end: 8px;
@@ -445,9 +451,7 @@ recommended-addon-card .addon-description:not(:empty) {
 }
 
 .discopane-notice-content {
-  align-items: center;
-  display: flex;
-  width: 100%;
+  padding-block: 6px;
 }
 
 .discopane-notice-content > span {

toolkit/mozapps/extensions/content/aboutaddons.html

@@ -201,7 +201,7 @@
         <h3 class="disco-addon-name"></h3>
         <span class="disco-addon-author"><a data-l10n-name="author" target="_blank"></a></span>
       </div>
-      <button class="disco-cta-button primary" action="install-addon"></button>
+      <button class="disco-cta-button" action="install-addon"></button>
       <button class="disco-cta-button" data-l10n-id="manage-addon-button" action="manage-addon"></button>
     </template>
 
@@ -331,7 +331,10 @@
       <message-bar class="discopane-notice" dismissable>
         <div class="discopane-notice-content">
           <span data-l10n-id="discopane-notice-recommendations"></span>
-          <button data-l10n-id="discopane-notice-learn-more" action="notice-learn-more"></button>
+          <a is="support-link"
+             support-page="personalized-addons"
+             data-l10n-id="discopane-notice-learn-more"
+             action="notice-learn-more"></a>
         </div>
       </message-bar>
     </template>

toolkit/themes/osx/global/in-content/common.css

@@ -35,8 +35,6 @@ xul|*.radio-icon {
 }
 
 xul|*.text-link:-moz-focusring {
-  color: var(--in-content-link-highlight);
-  text-decoration: underline;
   box-shadow: none;
 }
 

toolkit/themes/shared/in-content/common.inc.css

@@ -11,13 +11,13 @@
   --in-content-page-background: #fff;
   --in-content-text-color: var(--grey-90);
   --in-content-deemphasized-text: var(--grey-60);
-  --in-content-selected-text: #fff;
   --in-content-box-background: #fff;
   --in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
   --in-content-box-border-color: var(--grey-90-a30);
   --in-content-box-info-background: #f0f0f4;
   --in-content-item-hover: rgba(69, 161, 255, 0.2); /* blue 40 a20 */
   --in-content-item-selected: #0a84ff;
+  --in-content-item-selected-text: #fff;
   --in-content-accent-color: #0a84ff;
   --in-content-accent-color-active: #0060df;
   --in-content-border-hover: var(--grey-90-a50);
@@ -31,6 +31,7 @@
   --in-content-button-background: rgba(207, 207, 216, 0.33);
   --in-content-button-background-hover: rgba(207, 207, 216, 0.66);
   --in-content-button-background-active: rgba(207, 207, 216, 1);
+  --in-content-primary-button-text-color: rgb(255,255,255);
   --in-content-primary-button-background: #0061e0;
   --in-content-primary-button-background-hover: #0250bb;
   --in-content-primary-button-background-active: #053e94;
@@ -124,22 +125,28 @@
 @media (prefers-color-scheme: dark) {
   :root {
     /* Keep these in sync with layout/base/PresShell.cpp, and plaintext.css */
-    --in-content-page-background: #2A2A2E;
-    --in-content-page-color: rgb(249, 249, 250);
-
+    --in-content-page-background: rgb(28,27,34);
+    --in-content-page-color: rgb(251,251,254);
     --in-content-text-color: var(--in-content-page-color);
-    --in-content-deemphasized-text: var(--grey-40);
+    --in-content-deemphasized-text: rgb(191,191,201);
+
     --in-content-box-background: #202023;
     --in-content-box-background-odd: rgba(249,249,250,0.05);
     --in-content-box-info-background: rgba(249,249,250,0.15);
 
     --in-content-border-color: rgba(249,249,250,0.2);
     --in-content-border-hover: rgba(249,249,250,0.3);
+    --in-content-border-invalid: rgb(255,132,139);
     --in-content-box-border-color: rgba(249,249,250,0.2);
 
-    --in-content-button-background: rgba(249,249,250,0.1);
-    --in-content-button-background-hover: rgba(249,249,250,0.15);
-    --in-content-button-background-active: rgba(249,249,250,0.2);
+    --in-content-button-background: rgb(43,42,51);
+    --in-content-button-background-hover: rgb(82,82,94);
+    --in-content-button-background-active: rgb(91,91,102);
+
+    --in-content-primary-button-text-color: rgb(21,20,26);
+    --in-content-primary-button-background: rgb(0,221,255);
+    --in-content-primary-button-background-hover: rgb(128,235,255);
+    --in-content-primary-button-background-active: rgb(170,242,255);
 
     --in-content-danger-button-background: #ff848b;
     --in-content-danger-button-background-hover: #ffbdc5;
@@ -150,12 +157,12 @@
     --in-content-table-header-background: #002b57;
     --in-content-dialog-header-background: rgba(249,249,250,0.05);
 
-    --in-content-accent-color: var(--blue-40);
-    --in-content-accent-color-active: var(--blue-50);
-    --in-content-link-color: var(--blue-40);
-    --in-content-link-color-hover: var(--blue-50);
-    --in-content-link-color-active: var(--blue-60);
-    --in-content-link-color-visited: var(--blue-40);
+    --in-content-accent-color: var(--in-content-primary-button-background);
+    --in-content-accent-color-active: var(--in-content-primary-button-background-hover);
+    --in-content-link-color: var(--in-content-primary-button-background);
+    --in-content-link-color-hover: var(--in-content-primary-button-background-hover);
+    --in-content-link-color-active: var(--in-content-primary-button-background-active);
+    --in-content-link-color-visited: var(--in-content-link-color);
 
     --card-outline-color: var(--grey-60);
 
@@ -165,6 +172,31 @@
   }
 }
 
+@supports not -moz-bool-pref("browser.proton.enabled") {
+@media (prefers-color-scheme: dark) {
+  :root {
+    --in-content-page-background: #2A2A2E;
+    --in-content-page-color: rgb(249, 249, 250);
+    --in-content-deemphasized-text: var(--grey-40);
+
+    --in-content-button-background: rgba(249,249,250,0.1);
+    --in-content-button-background-hover: rgba(249,249,250,0.15);
+    --in-content-button-background-active: rgba(249,249,250,0.2);
+
+    --in-content-primary-button-text-color: rgb(255,255,255);
+    --in-content-primary-button-background: var(--blue-60);
+    --in-content-primary-button-background-hover: var(--blue-70);
+    --in-content-primary-button-background-active: var(--blue-80);
+
+    --in-content-accent-color: var(--blue-40);
+    --in-content-accent-color-active: var(--blue-50);
+    --in-content-link-color: var(--blue-40);
+    --in-content-link-color-hover: var(--blue-50);
+    --in-content-link-color-active: var(--blue-60);
+    --in-content-link-color-visited: var(--blue-40);
+  }
+}
+}
 :root {
   font: message-box;
   appearance: none;
@@ -376,7 +408,7 @@ html|button[type="submit"],
 xul|button[default],
 button.primary {
   background-color: var(--in-content-primary-button-background);
-  color: var(--in-content-selected-text) !important;
+  color: var(--in-content-primary-button-text-color) !important;
 }
 
 html|button[autofocus]:enabled:hover,
@@ -468,7 +500,7 @@ xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuacti
 
 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
-  color: var(--in-content-selected-text);
+  color: var(--in-content-item-selected-text);
   background-color: var(--in-content-item-selected);
 }
 
@@ -574,6 +606,13 @@ html|a:hover:active,
   text-decoration: none;
 }
 
+html|a:-moz-focusring,
+.text-link:-moz-focusring {
+  outline: 2px solid var(--in-content-focus-outline-color);
+  outline-offset: 1px;
+  -moz-outline-radius: 2px;
+}
+
 /* Checkboxes and radio buttons */
 
 xul|checkbox {
@@ -612,8 +651,8 @@ xul|checkbox[checked] > xul|*.checkbox-check,
 html|input[type="checkbox"]:checked {
   -moz-context-properties: fill;
   fill: currentColor;
-  color: white;
-  background-color: var(--blue-60);
+  color: var(--in-content-primary-button-text-color);
+  background-color: var(--in-content-primary-button-background);
   border-color: transparent;
 
   /* Style the button also when printing with "Print Backgrounds" unchecked */
@@ -630,12 +669,12 @@ html|input[type="checkbox"]:checked {
 
 xul|checkbox:not([disabled="true"])[checked]:hover > xul|*.checkbox-check,
 html|input[type="checkbox"]:enabled:checked:hover {
-  background-color: var(--blue-70);
+  background-color: var(--in-content-primary-button-background-hover);
 }
 
 xul|checkbox:not([disabled="true"])[checked]:hover:active > xul|*.checkbox-check,
 html|input[type="checkbox"]:enabled:checked:hover:active {
-  background-color: var(--blue-80);
+  background-color: var(--in-content-primary-button-background-active);
 }
 
 xul|richlistitem > xul|*.checkbox-check {
@@ -682,8 +721,8 @@ html|input[type="radio"]:checked,
 xul|*.radio-check[selected] {
   -moz-context-properties: fill;
   fill: currentColor;
-  color: white;
-  background-color: var(--blue-60);
+  color: var(--in-content-primary-button-text-color);
+  background-color: var(--in-content-primary-button-background);
   border-color: transparent;
 
   /* Style the button also when printing with "Print Backgrounds" unchecked */
@@ -700,12 +739,12 @@ xul|*.radio-check[selected] {
 
 html|input[type="radio"]:enabled:checked:hover,
 xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
-  background-color: var(--blue-70);
+  background-color: var(--in-content-primary-button-background-hover);
 }
 
 html|input[type="radio"]:enabled:checked:hover:active,
 xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
-  background-color: var(--blue-80);
+  background-color: var(--in-content-primary-button-background-active);
 }
 
 xul|*.radio-label-box {
@@ -1034,7 +1073,7 @@ xul|treechildren::-moz-tree-row {
 xul|treechildren::-moz-tree-cell-text(selected),
 xul|treechildren::-moz-tree-twisty(selected),
 xul|treechildren::-moz-tree-image(selected) {
-  color: var(--in-content-selected-text);
+  color: var(--in-content-item-selected-text);
 }
 
 /* Message bars */

toolkit/themes/shared/in-content/info-pages.css

@@ -161,7 +161,7 @@ thead th {
 
 th {
   background-color: var(--in-content-table-header-background);
-  color: var(--in-content-selected-text);
+  color: rgb(255,255,255);
 }
 
 th.column {

toolkit/themes/shared/in-content/toggle-button.css

@@ -19,7 +19,6 @@ input[type="checkbox"].toggle-button {
   appearance: none;
   padding: 0;
   margin: 0;
-  outline: 0;
   border: var(--button-border-width) solid var(--border-color);
   height: var(--button-height);
   width: var(--button-width);
@@ -35,10 +34,6 @@ input[type="checkbox"].toggle-button:enabled:active {
   background: var(--in-content-button-background-active);
   border-color: var(--border-color);
 }
-input[type="checkbox"].toggle-button:focus {
-  outline: 2px solid var(--in-content-focus-outline-color);
-  outline-offset: var(--in-content-focus-outline-offset);
-}
 
 input[type="checkbox"].toggle-button:checked {
   background: var(--in-content-primary-button-background);