Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 08:15:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1691535 - Add Proton styles for the Urlbar results panel. r=mak,desktop-theme-reviewers,ntim

Browse Source 
This patch changes the selection colour in the Urlbar view. It only changes the colours when a theme is not applied, to not break the many themes that depend on the panel background/color being Highlight/HighlightText. It also only changes the default theme on macOS and the default Windows theme. Windows High Contrast and Linux OS themes would break if the autocomplete background was not Highlight.

This patch also reduces the padding in the search one-offs and changes the color of arrowpanel-dimmed slightly to better match the spec. The hover colour shown in the spec is rgb(240,240,244). The new arrowpanel-dimmed colour is rgb(240,240,240).

Differential Revision: https://phabricator.services.mozilla.com/D105535
This commit is contained in:
harry 2021-02-24 16:02:40 +00:00
parent 27e7bad0be
commit 9399451d61
6 changed files with 74 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/themes/addons/alpenglow/manifest.json
View File

@ -60,6 +60,7 @@
"popup_text": "hsla(255, 100%, 94%, 1)",
"popup_border": "hsla(255, 100%, 94%, .32)",
"popup_highlight": "hsla(255, 100%, 94%, .12)",
"popup_highlight_text": "hsla(0, 0%, 100%, 1)",
"sidebar": "hsla(240, 15%, 95%, 1)",
"sidebar_text": "hsla(261, 53%, 15%, 1)",
"sidebar_border": "hsla(261, 53%, 15%, .24)",
@ -116,6 +117,7 @@
"popup_text": "hsla(255, 100%, 94%, 1)",
"popup_border": "hsla(255, 100%, 94%, .32)",
"popup_highlight": "hsla(255, 100%, 94%, .12)",
"popup_highlight_text": "hsla(0, 0%, 100%, 1)",
"sidebar": "hsla(250, 43%, 25%, 1)",
"sidebar_text": "hsla(255, 100%, 94%, 1)",
"sidebar_border": "hsla(255, 100%, 94%, .24)",

6
browser/themes/linux/browser.css
View File

@ -18,7 +18,7 @@
--toolbarbutton-icon-fill-opacity: .85;
--panel-separator-color: ThreeDShadow;
--arrowpanel-dimmed: hsla(0,0%,80%,.35);
--arrowpanel-dimmed: hsla(0,0%,80%,.3);
--arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
@ -204,9 +204,11 @@ menuitem.bookmark-item {
%include ../shared/urlbarView.inc.css
:root {
:root:not(:-moz-lwtheme) {
--urlbar-popup-url-color: -moz-nativehyperlinktext;
--urlbar-popup-action-color: -moz-nativehyperlinktext;
--autocomplete-popup-highlight-background: Highlight;
--autocomplete-popup-highlight-color: HighlightText;
}
/* Translation infobar */

7
browser/themes/osx/browser.css
View File

@ -18,7 +18,7 @@
--toolbarbutton-icon-fill-opacity: .7;
--panel-separator-color: hsla(210,4%,10%,.14);
--arrowpanel-dimmed: hsla(0,0%,80%,.35);
--arrowpanel-dimmed: hsla(0,0%,80%,.3);
--arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
@ -247,11 +247,6 @@
%include ../shared/urlbarView.inc.css
:root {
--urlbar-popup-url-color: hsl(210, 77%, 47%);
--urlbar-popup-action-color: hsl(178, 100%, 28%);
}
.urlbarView:not(:-moz-lwtheme),
#PopupSearchAutoComplete:not(:-moz-lwtheme) {
/* Set custom disabled text color since native graytext is too faint on macOS 10.14+. */

11
browser/themes/shared/compacttheme.inc.css
View File

@ -15,12 +15,15 @@
}
:root:-moz-lwtheme-darktext {
--lwt-toolbar-field-background-color: #F0F0F4 !important;
--lwt-toolbar-field-background-color: #f0f0f4 !important;
--autocomplete-popup-highlight-background: #e0e0e6 !important;
--autocomplete-popup-highlight-color: black !important;
}
/* TODO: Bug 1692046: Add brighttext --lwt-toolbar-field-background-color
override. */
}
/* TODO: Bug 1692046: Add brighttext --lwt-toolbar-field-background-color,
--autocomplete-popup-highlight-background, and
--autocomplete-popup-highlight-color overrides. */
} /*** END proton ***/
:root:-moz-lwtheme-brighttext {
/* !important to override LightweightThemeConsumer.jsm */

64
browser/themes/shared/urlbarView.inc.css
View File

@ -19,6 +19,9 @@
--autocomplete-popup-highlight-background: Highlight;
--autocomplete-popup-highlight-color: HighlightText;
--urlbar-popup-url-color: hsl(210, 77%, 47%);
--urlbar-popup-action-color: hsl(178, 100%, 28%);
/* Colors copied from in-content button styling */
--urlbarView-button-background: rgba(12, 12, 13, 0.1);
--urlbarView-button-background-hover: rgba(12, 12, 13, 0.2);
@ -30,11 +33,6 @@
--urlbarView-action-slide-in-distance: 200px;
}
:root:-moz-lwtheme {
--urlbar-popup-url-color: hsl(210, 77%, 47%);
--urlbar-popup-action-color: hsl(178, 100%, 28%);
}
:root:-moz-lwtheme[lwt-toolbar-field-focus-brighttext] {
--urlbar-popup-url-color: @lwtPopupBrighttextLinkColor@;
--urlbar-popup-action-color: #30e60b;
@ -45,6 +43,32 @@
--urlbarView-button-background-active: rgba(249, 249, 250, 0.2);
}
@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
:root {
--urlbar-popup-action-color: #005e5e;
}
@media not (prefers-contrast) {
:root {
--autocomplete-popup-highlight-background: #e0e0e6;
--autocomplete-popup-highlight-color: black;
/* TODO: Bug 1692046: Add override for --autocomplete-popup-highlight-background
and --autocomplete-popup-highlight-color in
:root[lwt-default-theme-in-dark-mode]. */
}
}
/* Fallback colours for when theme authors don't define
popup_highlight/popup_highlight_text. */
:root:-moz-lwtheme {
--autocomplete-popup-highlight-background: rgb(0, 99, 255);
--autocomplete-popup-highlight-color: white;
}
:root[lwt-toolbar-field-brighttext] {
--autocomplete-popup-highlight-background: rgb(0, 99, 225);
}
} /*** END proton ***/
:root:-moz-locale-dir(rtl) {
--urlbarView-action-slide-in-distance: -200px;
}
@ -108,6 +132,12 @@
padding-block: 6px;
}
@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-row-inner {
border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/
:root[uidensity=touch] .urlbarView-row:not([type=tip], [type=dynamic]) {
padding-block: 11px;
}
@ -335,6 +365,12 @@
-moz-context-properties: fill, fill-opacity;
}
@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-help {
border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/
.urlbarView-help[selected] {
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3);
}
@ -398,6 +434,12 @@
flex-shrink: 0;
}
@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
.urlbarView-tip-button {
border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/
.urlbarView-tip-button:hover {
background-color: var(--urlbarView-button-background-hover);
}
@ -570,6 +612,12 @@
flex-wrap: wrap;
}
@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar .search-one-offs:not([hidden]) {
padding-block: 12px;
}
}
.urlbarView[noresults] > .search-one-offs {
border-top: none;
}
@ -599,6 +647,12 @@
margin-inline-end: 8px;
}
@supports -moz-bool-pref("browser.proton.urlbar.enabled") {
#urlbar .searchbar-engine-one-off-item {
border-radius: var(--toolbarbutton-border-radius);
}
} /*** END proton ***/
#urlbar .searchbar-engine-one-off-item:last-child {
/* This applies to both the last one-off and the compact settings button */
margin-inline-end: 0;

7
browser/themes/windows/browser.css
View File

@ -18,7 +18,7 @@
--toolbarbutton-icon-fill-opacity: 1;
--panel-separator-color: ThreeDLightShadow;
--arrowpanel-dimmed: hsla(0,0%,80%,.35);
--arrowpanel-dimmed: hsla(0,0%,80%,.3);
--arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
--arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);
@ -557,11 +557,6 @@ menuitem.bookmark-item {
%include ../shared/urlbarView.inc.css
:root {
--urlbar-popup-url-color: hsl(210, 77%, 47%);
--urlbar-popup-action-color: hsl(178, 100%, 28%);
}
@media (-moz-windows-default-theme: 0) {
:root:not(:-moz-lwtheme) {
--urlbar-popup-url-color: -moz-nativehyperlinktext;