diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js index ac874287ba4b..58b69d83a883 100644 --- a/browser/app/profile/firefox.js +++ b/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 diff --git a/browser/components/protections/content/protections.css b/browser/components/protections/content/protections.css index c35f92b04333..f89f75d54993 100644 --- a/browser/components/protections/content/protections.css +++ b/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, diff --git a/browser/themes/shared/blockedSite.css b/browser/themes/shared/blockedSite.css index 5e2b1ab05fca..fa3602648398 100644 --- a/browser/themes/shared/blockedSite.css +++ b/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; diff --git a/layout/base/PresShell.cpp b/layout/base/PresShell.cpp index 2d145bfe5dae..aaaee87b130b 100644 --- a/layout/base/PresShell.cpp +++ b/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; diff --git a/layout/style/res/plaintext.css b/layout/style/res/plaintext.css index 968247173d76..9294e4886b60 100644 --- a/layout/style/res/plaintext.css +++ b/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 **/ } } diff --git a/modules/libpref/init/StaticPrefList.yaml b/modules/libpref/init/StaticPrefList.yaml index 6ae7e38fe8f9..ebd40e889a3a 100644 --- a/modules/libpref/init/StaticPrefList.yaml +++ b/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 diff --git a/toolkit/components/aboutperformance/content/aboutPerformance.css b/toolkit/components/aboutperformance/content/aboutPerformance.css index 2f61ded9b126..063e5d7adb95 100644 --- a/toolkit/components/aboutperformance/content/aboutPerformance.css +++ b/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); diff --git a/toolkit/components/aboutprocesses/content/aboutProcesses.css b/toolkit/components/aboutprocesses/content/aboutProcesses.css index bdf277c74d11..8b77a377ca23 100644 --- a/toolkit/components/aboutprocesses/content/aboutProcesses.css +++ b/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); diff --git a/toolkit/components/certviewer/content/components/certificate-section.css b/toolkit/components/certviewer/content/components/certificate-section.css index c111a158ec05..7699ccabde2d 100644 --- a/toolkit/components/certviewer/content/components/certificate-section.css +++ b/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 { diff --git a/toolkit/components/printing/content/print.css b/toolkit/components/printing/content/print.css index b553ddade612..3e458387b55e 100644 --- a/toolkit/components/printing/content/print.css +++ b/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; diff --git a/toolkit/components/printing/content/toggle-group.css b/toolkit/components/printing/content/toggle-group.css index c3491bd1875d..0db88909f7cd 100644 --- a/toolkit/components/printing/content/toggle-group.css +++ b/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 { diff --git a/toolkit/mozapps/extensions/content/aboutaddons.css b/toolkit/mozapps/extensions/content/aboutaddons.css index cd19569f1cfc..06e7057f5e71 100644 --- a/toolkit/mozapps/extensions/content/aboutaddons.css +++ b/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 { diff --git a/toolkit/mozapps/extensions/content/aboutaddons.html b/toolkit/mozapps/extensions/content/aboutaddons.html index 1aa1521c4378..be123956501a 100644 --- a/toolkit/mozapps/extensions/content/aboutaddons.html +++ b/toolkit/mozapps/extensions/content/aboutaddons.html @@ -201,7 +201,7 @@

- + @@ -331,7 +331,10 @@
- +
diff --git a/toolkit/themes/osx/global/in-content/common.css b/toolkit/themes/osx/global/in-content/common.css index aa3a80ed69cc..427c9888a7b9 100644 --- a/toolkit/themes/osx/global/in-content/common.css +++ b/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; } diff --git a/toolkit/themes/shared/in-content/common.inc.css b/toolkit/themes/shared/in-content/common.inc.css index 54c56e1dd8af..2cfee35dfac6 100644 --- a/toolkit/themes/shared/in-content/common.inc.css +++ b/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 */ diff --git a/toolkit/themes/shared/in-content/info-pages.css b/toolkit/themes/shared/in-content/info-pages.css index 8025606974c6..1ec955707785 100644 --- a/toolkit/themes/shared/in-content/info-pages.css +++ b/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 { diff --git a/toolkit/themes/shared/in-content/toggle-button.css b/toolkit/themes/shared/in-content/toggle-button.css index 10b351f9ee05..47c17c3578d4 100644 --- a/toolkit/themes/shared/in-content/toggle-button.css +++ b/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);