Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-25 05:41:12 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1690334: update findbar styling when proton is enabled r=mconley,desktop-theme-reviewers,ntim

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D108149
This commit is contained in:
Emma Malysz 2021-03-22 15:02:13 +00:00
parent f6cb811758
commit 1706325439
10 changed files with 186 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
browser/themes/addons/proton-dark/manifest.json
View File

@ -31,6 +31,7 @@
"toolbar_field_text": "rgb(251,251,254)",
"toolbar_field_focus": "rgb(66,65,77)",
"toolbar_field_separator": "rgb(82,82,94)",
"toolbar_text": "#BFBFC9",
"ntp_background": "#2A2A2E",
"ntp_text": "rgb(249, 249, 250)",
"sidebar": "#38383D",
@ -38,7 +39,20 @@
"sidebar_border": "rgba(255, 255, 255, 0.1)",
"buttons_secondary": "rgb(43,42,51)",
"buttons_secondary_hover": "rgb(82,82,94)",
"buttons_secondary_active": "rgb(91,91,102)"
"buttons_secondary_active": "rgb(91,91,102)",
"checkbox_border_color": "rgb(143, 143, 157)",
"checkbox_unchecked_background": "rgb(43, 42, 51)",
"checkbox_unchecked_background_hover": "rgb(82, 82, 94)",
"checkbox_unchecked_background_active": "rgb(91, 91, 102)",
"checkbox_checked_background": "rgb(0, 221, 255)",
"checkbox_checked_color": "rgb(43, 42, 51)",
"checkbox_checked_background_hover": "rgb(128, 235, 255)",
"checkbox_checked_background_active": "rgb(170, 242, 255)",
"error_text_color": "rgb(255, 154, 162)",
"input_background": "#42414D",
"input_color": "#BFBFC9",
"input_border": "#8f8f9d",
"input_border_error": "rgb(255, 132, 138)"
},
"properties": {
"panel_hover": "color-mix(in srgb, currentColor 9%, transparent)",
@ -52,7 +66,20 @@
"colors": {
"buttons_secondary": "--buttons-secondary-bgcolor",
"buttons_secondary_hover": "--buttons-secondary-hover-bgcolor",
"buttons_secondary_active": "--buttons-secondary-active-bgcolor"
"buttons_secondary_active": "--buttons-secondary-active-bgcolor",
"checkbox_border_color": "--checkbox-border-color",
"checkbox_unchecked_background": "--checkbox-unchecked-bgcolor",
"checkbox_unchecked_background_hover": "--checkbox-unchecked-hover-bgcolor",
"checkbox_unchecked_background_active": "--checkbox-unchecked-active-bgcolor",
"checkbox_checked_background": "--checkbox-checked-bgcolor",
"checkbox_checked_color": "--checkbox-checked-color",
"checkbox_checked_background_hover": "--checkbox-checked-hover-bgcolor",
"checkbox_checked_background_active": "--checkbox-checked-active-bgcolor",
"error_text_color": "--error-text-color",
"input_background": "--input-bgcolor",
"input_color": "--input-color",
"input_border": "--input-border-color",
"input_border_error": "--input-error-border-color"
},
"properties": {
"panel_hover": "--arrowpanel-dimmed",

1
browser/themes/addons/proton-light/manifest.json
View File

@ -33,6 +33,7 @@
"toolbar_field_border": "transparent",
"toolbar_field_focus": "white",
"toolbar_field_separator": "rgb(240,240,244)",
"toolbar_text": "#5B5B66",
"ntp_background": "#F9F9FA",
"ntp_text": "rgb(12, 12, 13)",
"popup_action_color": "rgb(21,20,26)",

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

@ -197,13 +197,6 @@
%include ../shared/toolbarbutton-icons.inc.css
%include ../shared/menupanel.inc.css
/* Override OSX-specific toolkit findbar button styles */
.findbar-button {
background-image: none !important;
box-shadow: none !important;
border: none;
}
@supports not -moz-bool-pref("browser.proton.enabled") {
/* On Mac, native buttons keep their full opacity when they become disabled
* and only the glyph or text on top of them becomes less opaque. */
@ -495,12 +488,6 @@ moz-input-box > menupopup .context-menu-add-engine > .menu-iconic-left {
/* ----- CONTENT ----- */
.browserContainer > findbar {
/* Use the default background gradient from findBar.css */
background-color: transparent;
color: -moz-DialogText;
}
.openintabs-menuitem {
list-style-image: none;
}

4
browser/themes/shared/browser-custom-colors.inc.css
View File

@ -34,6 +34,10 @@
--arrowpanel-dimmed: color-mix(in srgb, currentColor 12%, transparent);
--arrowpanel-dimmed-further: color-mix(in srgb, currentColor 20%, transparent);
--arrowpanel-dimmed-even-further: color-mix(in srgb, currentColor 27%, transparent);
--error-text-color: #C50042;
--input-error-border-color: #E22850;
}
} /** END Proton **/

6
browser/themes/shared/browser.inc.css
View File

@ -311,6 +311,12 @@ menupopup::part(drop-indicator) {
background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
}
@supports -moz-bool-pref("browser.proton.enabled") {
.browserContainer > findbar {
padding: 6px;
}
} /*** END proton ***/
/* Private browsing and accessibility indicators */
.accessibility-indicator,

10
browser/themes/shared/toolbarbuttons.inc.css
View File

@ -125,11 +125,6 @@
background-color: Highlight;
}
.findbar-button {
appearance: none;
color: inherit;
}
toolbar .toolbarbutton-1 {
appearance: none;
margin: 0;
@ -157,7 +152,6 @@ toolbar .toolbarbutton-1 > menupopup {
margin-top: -3px;
}
.findbar-button,
toolbar .toolbarbutton-1 > .toolbarbutton-icon,
toolbar .toolbarbutton-1 > .toolbarbutton-text,
toolbar .toolbarbutton-1 > .toolbarbutton-badge-stack {
@ -224,7 +218,6 @@ toolbar[brighttext] .toolbaritem-combined-buttons > separator {
#PersonalToolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover,
#tabbrowser-arrowscrollbox:not([scrolledtostart=true])::part(scrollbutton-up):hover,
#tabbrowser-arrowscrollbox:not([scrolledtoend=true])::part(scrollbutton-down):hover,
.findbar-button:not([checked="true"],[disabled="true"]):hover,
toolbarbutton.bookmark-item:not(.subviewbutton, [disabled=true], [open]):hover,
toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-icon,
toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover > .toolbarbutton-text,
@ -234,7 +227,6 @@ toolbar .toolbarbutton-1:not([disabled=true], [checked], [open], :active):hover
}
#PersonalToolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active),
.findbar-button:not([disabled=true]):is([checked="true"],:hover:active),
toolbarbutton.bookmark-item:hover:active:not(.subviewbutton, [disabled="true"]),
toolbarbutton.bookmark-item[open="true"],
toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active) > .toolbarbutton-icon,
@ -246,7 +238,6 @@ toolbar .toolbarbutton-1:not([disabled=true]):is([open],[checked],:hover:active)
/* Keyboard focus styling */
#PersonalToolbar .toolbarbutton-1:-moz-focusring,
.findbar-button:-moz-focusring,
findbar toolbarbutton.tabbable:-moz-focusring,
toolbarbutton.bookmark-item:not(.subviewbutton):-moz-focusring,
toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
@ -258,7 +249,6 @@ toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-b
outline-offset: calc(var(--focus-outline-width) * -1);
}
:root[uidensity=compact] .findbar-button:-moz-focusring,
:root[uidensity=compact] findbar toolbarbutton.tabbable:-moz-focusring,
:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-icon,
:root[uidensity=compact] toolbar:not(#PersonalToolbar) .toolbarbutton-1:-moz-focusring > .toolbarbutton-text,

15
toolkit/content/widgets/findbar.js
View File

@ -42,6 +42,8 @@
static get markup() {
return `
<hbox anonid="findbar-container" class="findbar-container" flex="1" align="center">
<toolbarbutton anonid="find-closebutton" class="findbar-closebutton tabbable close-icon"
data-l10n-id="findbar-find-button-close" oncommand="close();" />
<hbox anonid="findbar-textbox-wrapper" align="stretch">
<html:input anonid="findbar-textbox" class="findbar-textbox findbar-find-fast" />
<toolbarbutton anonid="find-previous" class="findbar-find-previous tabbable"
@ -50,13 +52,13 @@
<toolbarbutton anonid="find-next" class="findbar-find-next tabbable"
data-l10n-id="findbar-next" oncommand="onFindAgainCommand(false);" disabled="true" />
</hbox>
<toolbarbutton anonid="highlight" class="findbar-highlight findbar-button tabbable"
<checkbox anonid="highlight" class="findbar-highlight tabbable"
data-l10n-id="findbar-highlight-all2" oncommand="toggleHighlight(this.checked);" type="checkbox" />
<toolbarbutton anonid="find-case-sensitive" class="findbar-case-sensitive findbar-button tabbable"
<checkbox anonid="find-case-sensitive" class="findbar-case-sensitive tabbable"
data-l10n-id="findbar-case-sensitive" oncommand="_setCaseSensitivity(this.checked ? 1 : 0);" type="checkbox" />
<toolbarbutton anonid="find-match-diacritics" class="findbar-match-diacritics findbar-button tabbable"
<checkbox anonid="find-match-diacritics" class="findbar-match-diacritics tabbable"
data-l10n-id="findbar-match-diacritics" oncommand="_setDiacriticMatching(this.checked ? 1 : 0);" type="checkbox" />
<toolbarbutton anonid="find-entire-word" class="findbar-entire-word findbar-button tabbable"
<checkbox anonid="find-entire-word" class="findbar-entire-word tabbable"
data-l10n-id="findbar-entire-word" oncommand="toggleEntireWord(this.checked);" type="checkbox" />
<label anonid="match-case-status" class="findbar-find-fast" />
<label anonid="match-diacritics-status" class="findbar-find-fast" />
@ -65,8 +67,6 @@
<image anonid="find-status-icon" class="findbar-find-fast find-status-icon" />
<description anonid="find-status" control="findbar-textbox" class="findbar-find-fast findbar-find-status" />
</hbox>
<toolbarbutton anonid="find-closebutton" class="findbar-closebutton close-icon"
data-l10n-id="findbar-find-button-close" oncommand="close();" />
`;
}
@ -1067,6 +1067,7 @@
this._findField.removeAttribute("status");
break;
case Ci.nsITypeAheadFind.FIND_NOTFOUND:
this._findStatusDesc.setAttribute("status", "notfound");
this._findStatusIcon.setAttribute("status", "notfound");
this._findStatusDesc.textContent = this._notFoundStr;
this._findField.setAttribute("status", "notfound");
@ -1075,12 +1076,14 @@
this._findStatusIcon.setAttribute("status", "pending");
this._findStatusDesc.textContent = "";
this._findField.removeAttribute("status");
this._findStatusDesc.removeAttribute("status");
break;
case Ci.nsITypeAheadFind.FIND_FOUND:
default:
this._findStatusIcon.removeAttribute("status");
this._findStatusDesc.textContent = "";
this._findField.removeAttribute("status");
this._findStatusDesc.removeAttribute("status");
break;
}
}

100
toolkit/themes/osx/global/findBar.css
View File

@ -7,11 +7,46 @@
%include ../../shared/findBar.inc.css
findbar {
background-image: linear-gradient(#e8e8e8, #d0d0d0);
border-top-color: #888;
@supports not -moz-bool-pref("browser.proton.enabled") {
html|input.findbar-textbox {
background-image: url("chrome://global/skin/icons/search-textbox.svg");
padding-inline-start: 19px;
}
.findbar-find-next:not(:-moz-lwtheme),
.findbar-find-previous:not(:-moz-lwtheme) {
border-color: @findUiDefaultBorderColor@;
color: black;
background-image: linear-gradient(#f6f6f6, #e9e9e9);
}
.findbar-find-next:-moz-lwtheme,
.findbar-find-previous:-moz-lwtheme {
border-color: var(--lwt-toolbar-field-border-color, @findUiDefaultBorderColor@);
}
.findbar-find-next:not(:-moz-lwtheme, [disabled]):hover:active,
.findbar-find-previous:not(:-moz-lwtheme, [disabled]):hover:active {
background-image: linear-gradient(#dadada, #dadada);
box-shadow: 0 1px rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.2);
}
html|input.findbar-textbox {
border-color: var(--input-border-color, var(--lwt-toolbar-field-border-color, @findUiDefaultBorderColor@));
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.8;
background-repeat: no-repeat;
background-position: 5px center;
margin: 0;
}
html|input.findbar-textbox:-moz-locale-dir(rtl) {
background-position-x: right 5px;
}
}
/*** END !proton ***/
.findbar-container {
padding-inline-start: 2px;
}
@ -25,62 +60,3 @@ label.findbar-find-fast {
label.findbar-find-fast:-moz-lwtheme {
color: inherit;
}
.findbar-closebutton {
margin-inline: 4px 0;
padding-inline: 0 8px;
border: none;
/* make sure the closebutton is displayed as the first element in the bar: */
-moz-box-ordinal-group: 0;
}
.findbar-find-next:not(:-moz-lwtheme),
.findbar-find-previous:not(:-moz-lwtheme),
.findbar-button {
border-style: solid;
border-color: @findUiDefaultBorderColor@;
color: black;
background-image: linear-gradient(#f6f6f6, #e9e9e9);
}
.findbar-button {
appearance: none;
border-width: 1px;
margin-inline-end: 5px;
padding: 2px 9px;
border-radius: 10000px;
}
.findbar-find-next:-moz-lwtheme,
.findbar-find-previous:-moz-lwtheme {
border-color: var(--lwt-toolbar-field-border-color, @findUiDefaultBorderColor@);
}
.findbar-find-next:not(:-moz-lwtheme, [disabled]):hover:active,
.findbar-find-previous:not(:-moz-lwtheme, [disabled]):hover:active,
.findbar-button:not([disabled]):hover:active,
.findbar-button:not([disabled])[checked="true"] {
background-image: linear-gradient(#dadada, #dadada);
box-shadow: 0 1px rgba(255,255,255,.4), inset 0 1px 3px rgba(0,0,0,.2);
}
html|input.findbar-textbox {
border: 1px solid var(--lwt-toolbar-field-border-color, @findUiDefaultBorderColor@);
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.8;
background-image: url("chrome://global/skin/icons/search-textbox.svg");
background-repeat: no-repeat;
background-position: 5px center;
margin: 0;
padding-inline-start: 19px;
}
html|input.findbar-textbox:focus {
box-shadow: 0 0 0 1px var(--toolbar-field-focus-border-color) inset,
0 0 0 1px var(--toolbar-field-focus-border-color);
}
html|input.findbar-textbox:-moz-locale-dir(rtl) {
background-position-x: right 5px;
}

8
toolkit/themes/shared/close-icon.css
View File

@ -6,7 +6,7 @@
appearance: none;
-moz-context-properties: fill, fill-opacity;
list-style-image: url(chrome://global/skin/icons/close.svg);
border-radius: 2px;
border-radius: 4px;
color: inherit !important;
fill: currentColor;
padding: 2px;
@ -14,6 +14,12 @@
height: auto;
}
@supports not -moz-bool-pref("browser.proton.enabled") {
.close-icon {
border-radius: 2px;
}
} /*** END !proton ***/
.close-icon:hover {
background-color: color-mix(in srgb, currentColor 10%, transparent);
}

114
toolkit/themes/shared/findBar.inc.css
View File

@ -27,9 +27,8 @@ findbar[noanim] {
transition-delay: 0s !important;
}
.findbar-container {
padding-block: 4px;
padding-inline-start: 8px;
.findbar-container > checkbox {
margin: 0 8px;
}
.findbar-closebutton {
@ -51,29 +50,30 @@ html|html[lwtheme-image] findbar {
html|input.findbar-textbox {
appearance: none;
background-color: Field;
border: 1px solid var(--lwt-toolbar-field-border-color, ThreeDShadow);
border-start-start-radius: 2px;
border-end-start-radius: 2px;
border: 1px solid var(--input-border-color, var(--lwt-toolbar-field-border-color, ThreeDShadow));
border-radius: 4px;
outline: none;
margin: 0;
padding: 2px 5px;
width: 14em;
padding-inline-start: 8px;
width: 18em;
}
html|input.findbar-textbox:-moz-lwtheme {
background-color: var(--lwt-toolbar-field-background-color, Field);
color: var(--lwt-toolbar-field-color, FieldText);
background-color: var(--input-bgcolor, var(--lwt-toolbar-field-background-color, Field));
color: var(--input-color, var(--lwt-toolbar-field-color, FieldText));
}
html|input.findbar-textbox:focus {
background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, Field));
color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, FieldText));
border-color: var(--toolbar-field-focus-border-color, Highlight);
/* Make a 2px border without shifting contents */
border-color: var(--focus-outline-color, -moz-accent-color);
outline: 1px solid var(--focus-outline-color, -moz-accent-color);
}
html|input.findbar-textbox[status="notfound"] {
background-color: rgba(255,0,57,.3);
color: inherit;
/* Make a 2px border without shifting contents */
border-color: var(--input-error-border-color, #E22850);
outline: 1px solid var(--input-error-border-color, #E22850);
}
html|input.findbar-textbox[flash="true"] {
@ -89,36 +89,38 @@ html|input.findbar-textbox.minimal {
.findbar-find-next {
margin-inline-start: 0;
appearance: none;
background: rgba(255,255,255,.2);
border: 1px solid ThreeDShadow;
padding: 2px 5px;
line-height: 1em;
-moz-context-properties: fill;
fill: currentColor;
color: inherit;
border-radius: 4px;
}
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
padding: 2px;
}
.findbar-find-previous:not([disabled]):hover,
.findbar-find-next:not([disabled]):hover {
background: rgba(190,190,190,.2);
background: var(--buttons-secondary-hover-bgcolor, rgba(190,190,190,.2));
}
.findbar-find-previous:not([disabled]):hover:active,
.findbar-find-next:not([disabled]):hover:active {
background: rgba(23,50,76,.2);
box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
background: var(--buttons-secondary-active-bgcolor, rgba(23,50,76,.2));
}
.findbar-find-previous {
list-style-image: url(chrome://global/skin/icons/find-previous-arrow.svg);
border-inline-width: 0;
margin-inline-end: 0;
margin-inline: 8px 0;
}
.findbar-find-next {
margin-inline-end: 8px;
list-style-image: url(chrome://global/skin/icons/find-next-arrow.svg);
border-start-end-radius: 2px;
border-end-end-radius: 2px;
}
.findbar-find-next:-moz-lwtheme,
@ -163,6 +165,66 @@ html|input.findbar-textbox.minimal {
opacity: .6;
}
.findbar-closebutton {
/* Override margin-inline from close-icon.css */
margin-inline: 4px 8px !important;
width: 16px;
}
@supports not -moz-bool-pref("browser.proton.enabled") {
html|input.findbar-textbox {
border-radius: 0;
border-start-start-radius: 2px;
border-end-start-radius: 2px;
width: 14em;
}
html|input.findbar-textbox:focus {
background-color: var(--lwt-toolbar-field-focus, var(--lwt-toolbar-field-background-color, Field));
color: var(--lwt-toolbar-field-focus-color, var(--lwt-toolbar-field-color, FieldText));
}
html|input.findbar-textbox[status="notfound"] {
border-color: var(--focus-outline-color, -moz-accent-color);
outline-color: var(--focus-outline-color, -moz-accent-color);
background-color: rgba(255,0,57,.3);
color: inherit;
}
.findbar-container {
padding-block: 4px;
padding-inline-start: 8px;
}
.findbar-find-previous,
.findbar-find-next {
background: rgba(255,255,255,.2);
border: 1px solid ThreeDShadow;
border-inline-start: none;
border-radius: 0;
}
.findbar-find-previous > .toolbarbutton-icon,
.findbar-find-next > .toolbarbutton-icon {
padding: 0;
}
.findbar-find-previous {
margin-inline-start: 0;
}
.findbar-find-next {
border-start-end-radius: 2px;
border-end-end-radius: 2px;
margin-inline-end: 0;
}
.findbar-find-previous:not([disabled]):hover:active,
.findbar-find-next:not([disabled]):hover:active {
box-shadow: 0 1px 2px rgba(10,31,51,.2) inset;
}
.find-status-icon[status="pending"] {
list-style-image: url("chrome://global/skin/icons/loading.png");
}
@ -173,3 +235,11 @@ html|input.findbar-textbox.minimal {
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
}
}
} /*** END !proton ***/
@supports -moz-bool-pref("browser.proton.enabled") {
.findbar-find-status[status="notfound"] {
color: var(--error-text-color, color-mix(in srgb, currentColor 40%, #C50042));
opacity: 0.8;
}
}/*** END proton ***/