corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1606785 - Format urlbar CSS files with Prettier r=urlbar-reviewers,desktop-theme-reviewers,dao

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D249180
This commit is contained in:
hannajones
2025-05-21 03:51:44 +00:00
committed by hjones@mozilla.com
parent 41bc4d5237
commit a7a4f31251
5 changed files with 118 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
browser/components/urlbar/tests/browser/dynamicResult0.css
View File

@@ -5,7 +5,7 @@
--testDynamicResult0: ok0; --testDynamicResult0: ok0;
} }
.urlbarView-row[dynamicType=test] > .urlbarView-row-inner { .urlbarView-row[dynamicType="test"] > .urlbarView-row-inner {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 32px; min-height: 32px;
@@ -46,5 +46,8 @@
.urlbarView-dynamic-test-button2[selected] { .urlbarView-dynamic-test-button2[selected] {
color: white; color: white;
background-color: var(--urlbarView-primary-button-background); background-color: var(--urlbarView-primary-button-background);
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
} }

7
browser/components/urlbar/tests/browser/dynamicResult1.css
View File

@@ -5,7 +5,7 @@
--testDynamicResult1: ok1; --testDynamicResult1: ok1;
} }
.urlbarView-row[dynamicType=test] > .urlbarView-row-inner { .urlbarView-row[dynamicType="test"] > .urlbarView-row-inner {
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 32px; min-height: 32px;
@@ -46,5 +46,8 @@
.urlbarView-dynamic-test-button2[selected] { .urlbarView-dynamic-test-button2[selected] {
color: white; color: white;
background-color: var(--urlbarView-primary-button-background); background-color: var(--urlbarView-primary-button-background);
box-shadow: 0 0 0 1px #0a84ff inset, 0 0 0 1px #0a84ff, 0 0 0 4px rgba(10, 132, 255, 0.3); box-shadow:
0 0 0 1px #0a84ff inset,
0 0 0 1px #0a84ff,
0 0 0 4px rgba(10, 132, 255, 0.3);
} }

33
browser/themes/shared/urlbar-dynamic-results.css
View File

@@ -6,7 +6,7 @@
* Firefox Suggest contextual opt-in * Firefox Suggest contextual opt-in
*/ */
.urlbarView-row[dynamicType=quickSuggestContextualOptIn] { .urlbarView-row[dynamicType="quickSuggestContextualOptIn"] {
background-color: color-mix(in srgb, currentColor 3%, transparent); background-color: color-mix(in srgb, currentColor 3%, transparent);
> .urlbarView-row-inner { > .urlbarView-row-inner {
@@ -20,7 +20,7 @@
min-width: 32px; min-width: 32px;
height: 32px; height: 32px;
padding: 16px; padding: 16px;
margin-inline: 0 .7em; margin-inline: 0 0.7em;
} }
} }
} }
@@ -79,7 +79,7 @@
* Tab To Search onboarding * Tab To Search onboarding
*/ */
.urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner { .urlbarView-row[dynamicType="onboardTabToSearch"] > .urlbarView-row-inner {
min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */ min-height: 64px !important; /* Overriding :root:not([uidensity=compact]) .urlbarView-row-inner { min-height } in urlbarView.inc.css */
align-items: center; align-items: center;
@@ -104,7 +104,7 @@
} }
} }
.urlbarView-row[dynamicType=onboardTabToSearch][selected] { .urlbarView-row[dynamicType="onboardTabToSearch"][selected] {
fill-opacity: 1; fill-opacity: 1;
} }
@@ -123,6 +123,7 @@
margin-block-start: 2px; margin-block-start: 2px;
} }
/* prettier-ignore */
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container { .urlbarView-results[wrap] > .urlbarView-row[dynamicType=onboardTabToSearch] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-dynamic-onboardTabToSearch-text-container {
> .urlbarView-dynamic-onboardTabToSearch-first-row-container { > .urlbarView-dynamic-onboardTabToSearch-first-row-container {
flex-wrap: wrap; flex-wrap: wrap;
@@ -158,7 +159,7 @@
&::before { &::before {
content: "\2014"; content: "\2014";
margin: 0 .4em; margin: 0 0.4em;
opacity: 0.6; opacity: 0.6;
} }
} }
@@ -167,7 +168,7 @@
* Actions * Actions
*/ */
.urlbarView-row[dynamicType=actions] > .urlbarView-row-inner { .urlbarView-row[dynamicType="actions"] > .urlbarView-row-inner {
/* Reduce the padding to 2px so the outline does not get /* Reduce the padding to 2px so the outline does not get
cropped and the actions + outline are aligned with the cropped and the actions + outline are aligned with the
rest of the results */ rest of the results */
@@ -205,7 +206,7 @@
* Weather * Weather
*/ */
.urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { .urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner {
align-items: center; align-items: center;
} }
@@ -217,7 +218,7 @@
border-radius: 2px; border-radius: 2px;
text-align: center; text-align: center;
.urlbarView-row[dynamicType=weather]:is([selected], :hover) > .urlbarView-row-inner > & { .urlbarView-row[dynamicType="weather"]:is([selected], :hover) > .urlbarView-row-inner > & {
color: var(--urlbarView-result-button-selected-color); color: var(--urlbarView-result-button-selected-color);
background-color: var(--urlbarView-result-button-selected-background-color); background-color: var(--urlbarView-result-button-selected-background-color);
} }
@@ -263,7 +264,7 @@
align-items: center; align-items: center;
} }
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=weather] > .urlbarView-row-inner { .urlbarView-results[wrap] > .urlbarView-row[dynamicType="weather"] > .urlbarView-row-inner {
flex-wrap: nowrap; flex-wrap: nowrap;
> .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top { > .urlbarView-dynamic-weather-summary > .urlbarView-dynamic-weather-top {
@@ -306,15 +307,15 @@
} }
.urlbarView-dynamic-weather-summaryTextSeparator::before { .urlbarView-dynamic-weather-summaryTextSeparator::before {
content: '\00B7'; content: "\00B7";
margin: 0.25em; margin: 0.25em;
} }
.urlbarView-dynamic-weather-bottom { .urlbarView-dynamic-weather-bottom {
font-size: var(--urlbarView-small-font-size); font-size: var(--urlbarView-small-font-size);
margin-top: 0.40em; margin-top: 0.4em;
.urlbarView-row[dynamicType=weather]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & { .urlbarView-row[dynamicType="weather"]:not([selected]) > .urlbarView-row-inner > .urlbarView-dynamic-weather-summary > & {
opacity: 0.6; opacity: 0.6;
} }
} }
@@ -323,7 +324,7 @@
* Fakespot suggestions * Fakespot suggestions
*/ */
.urlbarView-results[wrap] > .urlbarView-row[dynamicType=fakespot] > .urlbarView-row-inner { .urlbarView-results[wrap] > .urlbarView-row[dynamicType="fakespot"] > .urlbarView-row-inner {
flex-wrap: nowrap; flex-wrap: nowrap;
} }
@@ -353,7 +354,7 @@
.urlbarView-dynamic-fakespot-badge { .urlbarView-dynamic-fakespot-badge {
display: flex; display: flex;
align-items: center; align-items: center;
color: #15141A; color: #15141a;
font-size: 0.75em; font-size: 0.75em;
padding-inline: 0 1em; padding-inline: 0 1em;
padding-block: 0.27em; padding-block: 0.27em;
@@ -379,14 +380,14 @@
border-width: 1px; border-width: 1px;
} }
&[grade=A] { &[grade="A"] {
background-color: rgba(231, 255, 246, 0.7); background-color: rgba(231, 255, 246, 0.7);
&::before { &::before {
content: "A"; content: "A";
background-color: rgb(179, 255, 227); background-color: rgb(179, 255, 227);
} }
} }
&[grade=B] { &[grade="B"] {
background-color: rgba(222, 250, 255, 0.7); background-color: rgba(222, 250, 255, 0.7);
&::before { &::before {
content: "B"; content: "B";

42
browser/themes/shared/urlbar-searchbar.css
View File

@@ -17,7 +17,7 @@
#urlbar[searchmode][breakout-extend] > .urlbar-input-container > #urlbar-label-box, #urlbar[searchmode][breakout-extend] > .urlbar-input-container > #urlbar-label-box,
#urlbar:not([searchmode]) > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode, #urlbar:not([searchmode]) > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode,
#urlbar[breakout-extend] > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode, #urlbar[breakout-extend] > .urlbar-input-container > #urlbar-label-box > #urlbar-label-search-mode,
.urlbar-input-container[pageproxystate=invalid] > #page-action-buttons > .urlbar-page-action, .urlbar-input-container[pageproxystate="invalid"] > #page-action-buttons > .urlbar-page-action,
#identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box), #identity-box.chromeUI ~ #page-action-buttons > .urlbar-page-action:not(#star-button-box),
#urlbar[usertyping] > .urlbar-input-container > #page-action-buttons > #urlbar-zoom-button, #urlbar[usertyping] > .urlbar-input-container > #page-action-buttons > #urlbar-zoom-button,
#urlbar:not([usertyping]) > .urlbar-input-container > .urlbar-go-button, #urlbar:not([usertyping]) > .urlbar-input-container > .urlbar-go-button,
@@ -40,7 +40,7 @@
padding-block: var(--urlbar-padding-block); padding-block: var(--urlbar-padding-block);
margin-inline: var(--urlbar-margin-inline); margin-inline: var(--urlbar-margin-inline);
:root[uidensity=touch] & { :root[uidensity="touch"] & {
padding-block: 5px; padding-block: 5px;
} }
} }
@@ -134,15 +134,15 @@
/* Make sure that the location bar's alignment changes according /* Make sure that the location bar's alignment changes according
to the input box direction if the user switches the text direction using to the input box direction if the user switches the text direction using
cmd_switchTextDirection (which applies a dir attribute to the <input>). */ cmd_switchTextDirection (which applies a dir attribute to the <input>). */
&[dir=ltr]:-moz-locale-dir(rtl) { &[dir="ltr"]:-moz-locale-dir(rtl) {
text-align: left !important; text-align: left !important;
} }
&[dir=rtl]:-moz-locale-dir(ltr) { &[dir="rtl"]:-moz-locale-dir(ltr) {
text-align: right !important; text-align: right !important;
} }
#urlbar:not([focused])[domaindir="ltr"]> .urlbar-input-container > .urlbar-input-box > & { #urlbar:not([focused])[domaindir="ltr"] > .urlbar-input-container > .urlbar-input-box > & {
direction: ltr; direction: ltr;
unicode-bidi: embed; unicode-bidi: embed;
} }
@@ -300,10 +300,10 @@
@keyframes urlbar-grow { @keyframes urlbar-grow {
0% { 0% {
transform: scaleX(.99) scaleY(.98); transform: scaleX(0.99) scaleY(0.98);
} }
100% { 100% {
transform: scale(1.0); transform: scale(1);
} }
} }
@@ -324,7 +324,6 @@
padding-inline-end: 0; padding-inline-end: 0;
} }
.urlbar-input-box { .urlbar-input-box {
/* Show the url scheme in a static box when overflowing to the left */ /* Show the url scheme in a static box when overflowing to the left */
position: relative; position: relative;
@@ -369,8 +368,8 @@
flex: 400 0 auto; flex: 400 0 auto;
} }
#nav-bar:not([keyNav=true]) #identity-box, #nav-bar:not([keyNav="true"]) #identity-box,
#nav-bar:not([keyNav=true]) #tracking-protection-icon-container { #nav-bar:not([keyNav="true"]) #tracking-protection-icon-container {
-moz-user-focus: normal; -moz-user-focus: normal;
} }
@@ -500,7 +499,7 @@
border-radius: var(--urlbar-icon-border-radius); border-radius: var(--urlbar-icon-border-radius);
@media (prefers-contrast) { @media (prefers-contrast) {
fill-opacity: 1.0; fill-opacity: 1;
} }
&:hover { &:hover {
@@ -645,11 +644,7 @@
} }
#urlbar-background { #urlbar-background {
background-image: repeating-linear-gradient( background-image: repeating-linear-gradient(-45deg, rgba(255, 60, 60, 0.25) 0 25px, rgba(175, 0, 0, 0.25) 25px 50px);
-45deg,
rgba(255, 60, 60, 0.25) 0 25px,
rgba(175, 0, 0, 0.25) 25px 50px
);
background-attachment: fixed; background-attachment: fixed;
/* Override the usual breakout animation so the gradient doesn't shift around /* Override the usual breakout animation so the gradient doesn't shift around
@@ -936,7 +931,7 @@
#urlbar-zoom-button { #urlbar-zoom-button {
appearance: none; appearance: none;
font-size: .8em; font-size: 0.8em;
padding: 3px 7px; padding: 3px 7px;
border-radius: var(--urlbar-icon-border-radius); border-radius: var(--urlbar-icon-border-radius);
background-color: var(--urlbar-box-bgcolor); background-color: var(--urlbar-box-bgcolor);
@@ -985,7 +980,7 @@
transform: scale(1.5); transform: scale(1.5);
} }
100% { 100% {
transform: scale(1.0); transform: scale(1);
} }
} }
@@ -1060,7 +1055,7 @@
.searchbar-search-icon-overlay { .searchbar-search-icon-overlay {
pointer-events: none; pointer-events: none;
.searchbar-search-button[addengines=true] > & { .searchbar-search-button[addengines="true"] > & {
list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg); list-style-image: url(chrome://browser/skin/search-indicator-badge-add.svg);
margin-inline: -15px 4px; margin-inline: -15px 4px;
margin-top: -10px; margin-top: -10px;
@@ -1072,7 +1067,7 @@
} }
} }
.searchbar-search-button:hover:not([addengines=true]) > & { .searchbar-search-button:hover:not([addengines="true"]) > & {
list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg); list-style-image: url(chrome://global/skin/icons/arrow-down-12.svg);
-moz-context-properties: fill; -moz-context-properties: fill;
margin-inline: -8px 2px; margin-inline: -8px 2px;
@@ -1132,7 +1127,7 @@
} }
/* No need space if page information icons such as lock and shield is shown */ /* No need space if page information icons such as lock and shield is shown */
#urlbar[pageproxystate=valid] & { #urlbar[pageproxystate="valid"] & {
margin-inline-end: 0; margin-inline-end: 0;
} }
@@ -1149,8 +1144,7 @@
} }
/* stylelint-disable media-query-no-invalid */ /* stylelint-disable media-query-no-invalid */
@media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and @media (not -moz-pref("browser.urlbar.searchModeSwitcher.featureGate")) and (not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) {
(not -moz-pref("browser.urlbar.scotchBonnet.enableOverride")) {
display: none; display: none;
} }
/* stylelint-enable media-query-no-invalid */ /* stylelint-enable media-query-no-invalid */
@@ -1265,7 +1259,7 @@
margin-inline-start: var(--urlbar-searchmodeswitcher-inline-padding); margin-inline-start: var(--urlbar-searchmodeswitcher-inline-padding);
} }
#urlbar[pageproxystate=invalid] { #urlbar[pageproxystate="invalid"] {
#identity-box, #identity-box,
#tracking-protection-icon-container { #tracking-protection-icon-container {
display: none; display: none;

129
browser/themes/shared/urlbarView.css
View File

@@ -45,9 +45,17 @@
--urlbarView-result-button-size: 24px; --urlbarView-result-button-size: 24px;
--urlbarView-result-button-background-opacity: 60%; --urlbarView-result-button-background-opacity: 60%;
--urlbarView-result-button-selected-color: var(--toolbar-field-focus-color); --urlbarView-result-button-selected-color: var(--toolbar-field-focus-color);
--urlbarView-result-button-selected-background-color: color-mix(in srgb, var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity), transparent); --urlbarView-result-button-selected-background-color: color-mix(
in srgb,
var(--toolbar-field-focus-background-color) var(--urlbarView-result-button-background-opacity),
transparent
);
--urlbarView-result-button-hover-color: var(--toolbar-field-focus-background-color); --urlbarView-result-button-hover-color: var(--toolbar-field-focus-background-color);
--urlbarView-result-button-hover-background-color: color-mix(in srgb, var(--toolbar-field-focus-color) var(--urlbarView-result-button-background-opacity), transparent); --urlbarView-result-button-hover-background-color: color-mix(
in srgb,
var(--toolbar-field-focus-color) var(--urlbarView-result-button-background-opacity),
transparent
);
--urlbarView-labeled-row-margin-top: calc(1.46em + 4px); --urlbarView-labeled-row-margin-top: calc(1.46em + 4px);
--urlbarView-labeled-row-label-top: calc(-1.27em - 2px); --urlbarView-labeled-row-label-top: calc(-1.27em - 2px);
@@ -75,8 +83,11 @@
/* stylelint-disable-next-line media-query-no-invalid */ /* stylelint-disable-next-line media-query-no-invalid */
@media -moz-pref("browser.urlbar.richSuggestions.featureGate") { @media -moz-pref("browser.urlbar.richSuggestions.featureGate") {
--urlbarView-favicon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2); --urlbarView-favicon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2);
--urlbarView-favicon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2)); --urlbarView-favicon-margin-end: calc(
} var(--urlbar-icon-padding) + var(--identity-box-margin-inline) +
((var(--urlbarView-rich-suggestion-default-icon-size) - var(--urlbarView-favicon-width)) / 2)
);
}
} }
.urlbarView { .urlbarView {
@@ -125,7 +136,9 @@
} }
&[rich-suggestion][icon-size="24"] { &[rich-suggestion][icon-size="24"] {
--urlbarView-icon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2); --urlbarView-icon-margin-start: calc((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2);
--urlbarView-icon-margin-end: calc(var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2)); --urlbarView-icon-margin-end: calc(
var(--urlbar-icon-padding) + var(--identity-box-margin-inline) + ((var(--urlbarView-rich-suggestion-default-icon-size) - 24px) / 2)
);
} }
} }
@@ -150,20 +163,20 @@
color: var(--urlbarView-highlight-color); color: var(--urlbarView-highlight-color);
} }
&:not([type=tip], [type=dynamic]) { &:not([type="tip"], [type="dynamic"]) {
:root:not([uidensity=compact]) & { :root:not([uidensity="compact"]) & {
min-height: 32px; min-height: 32px;
} }
:root[uidensity=touch] & { :root[uidensity="touch"] & {
padding-block: 11px; padding-block: 11px;
} }
} }
&[rich-suggestion][type=search] { &[rich-suggestion][type="search"] {
:root:not([uidensity=compact]) & { :root:not([uidensity="compact"]) & {
min-height: 46px; min-height: 46px;
} }
:root[uidensity=touch] & { :root[uidensity="touch"] & {
padding-block: 4px; padding-block: 4px;
} }
} }
@@ -183,7 +196,7 @@
padding-inline: var(--urlbarView-item-inline-padding); padding-inline: var(--urlbarView-item-inline-padding);
padding-block: var(--urlbarView-item-block-padding); padding-block: var(--urlbarView-item-block-padding);
:root:not([uidensity=compact]) & { :root:not([uidensity="compact"]) & {
min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */ min-height: 20px; /* row min-height 32px - (2 * padding-block 6px) */
} }
} }
@@ -194,8 +207,8 @@
flex-shrink: 0; flex-shrink: 0;
.urlbarView[action-override] .urlbarView-row[has-url] > .urlbarView-row-inner > &, .urlbarView[action-override] .urlbarView-row[has-url] > .urlbarView-row-inner > &,
.urlbarView-row[has-url]:not([type$=tab]) > .urlbarView-row-inner > &, .urlbarView-row[has-url]:not([type$="tab"]) > .urlbarView-row-inner > &,
.urlbarView-row[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > & { .urlbarView-row[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]) > .urlbarView-row-inner > & {
/* We prioritize icons + title + action over the url, so they can grow freely, /* We prioritize icons + title + action over the url, so they can grow freely,
but the url should never disappear when it's visible */ but the url should never disappear when it's visible */
max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px))); max-width: calc(70% - 2 * (var(--urlbarView-favicon-width) + (6px + 2px)));
@@ -231,16 +244,16 @@
/* Note: switchtab entries show the url only in override mode, /* Note: switchtab entries show the url only in override mode,
remotetab and sponsored ones only when selected or :hover. */ remotetab and sponsored ones only when selected or :hover. */
.urlbarView[action-override] &[has-url]:not([restyled-search]), .urlbarView[action-override] &[has-url]:not([restyled-search]),
&[has-url]:not([type$=tab], [sponsored], [restyled-search]), &[has-url]:not([type$="tab"], [sponsored], [restyled-search]),
&[has-url]:is([type=remotetab], [sponsored]):is(:hover, [selected]), &[has-url]:is([type="remotetab"], [sponsored]):is(:hover, [selected]),
&[type=tabtosearch] { &[type="tabtosearch"] {
/* This targets both rich and non-rich results, so not using the child selector here. */ /* This targets both rich and non-rich results, so not using the child selector here. */
.urlbarView-title-separator { .urlbarView-title-separator {
display: none; display: none;
} }
} }
&[type=tabtosearch] > .urlbarView-row-inner > .urlbarView-no-wrap { &[type="tabtosearch"] > .urlbarView-row-inner > .urlbarView-no-wrap {
flex-wrap: wrap; flex-wrap: wrap;
> .urlbarView-action { > .urlbarView-action {
@@ -308,7 +321,7 @@
visibility: hidden; visibility: hidden;
} }
.urlbarView-row[type=tabtosearch]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { .urlbarView-row[type="tabtosearch"]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
/* We use the URL color for this icon to inherit its accessibility /* We use the URL color for this icon to inherit its accessibility
properties, like adapting to high contrast modes. We also want to ensure properties, like adapting to high contrast modes. We also want to ensure
contrast from the result highlight. */ contrast from the result highlight. */
@@ -332,7 +345,7 @@
stroke: var(--toolbar-field-focus-background-color); stroke: var(--toolbar-field-focus-background-color);
/* Favicon badges have this priority: pinned > bookmark. */ /* Favicon badges have this priority: pinned > bookmark. */
.urlbarView-row[type=bookmark] > .urlbarView-row-inner > .urlbarView-no-wrap > & { .urlbarView-row[type="bookmark"] > .urlbarView-row-inner > .urlbarView-no-wrap > & {
background-image: url(chrome://browser/skin/bookmark-12.svg); background-image: url(chrome://browser/skin/bookmark-12.svg);
fill: var(--toolbarbutton-icon-fill-attention); fill: var(--toolbarbutton-icon-fill-attention);
} }
@@ -421,7 +434,7 @@
.urlbarView-button:not(:empty):not(.urlbarView-button-menu) { .urlbarView-button:not(:empty):not(.urlbarView-button-menu) {
border-radius: var(--toolbarbutton-border-radius); border-radius: var(--toolbarbutton-border-radius);
padding: .5em 1em; padding: 0.5em 1em;
margin-inline-end: 1.4em; margin-inline-end: 1.4em;
font-size: 0.93em; font-size: 0.93em;
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
@@ -454,7 +467,7 @@
/* Tip rows */ /* Tip rows */
.urlbarView-row[type=tip] { .urlbarView-row[type="tip"] {
padding-block: 18px; padding-block: 18px;
border-block: 0; border-block: 0;
border-radius: 0; border-radius: 0;
@@ -510,15 +523,15 @@
} }
} }
&:not([tip-type=dismissalAcknowledgment]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { &:not([tip-type="dismissalAcknowledgment"]) > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
width: 24px; width: 24px;
height: 24px; height: 24px;
margin-inline-end: 12px; margin-inline-end: 12px;
flex-basis: 24px; flex-basis: 24px;
flex-grow: 0; flex-grow: 0;
} }
&[tip-type=dismissalAcknowledgment] { &[tip-type="dismissalAcknowledgment"] {
padding-block: 6px; padding-block: 6px;
&:last-child { &:last-child {
@@ -527,7 +540,6 @@
} }
} }
/* Row label (a.k.a. group label) */ /* Row label (a.k.a. group label) */
.urlbarView-row[label] { .urlbarView-row[label] {
@@ -560,7 +572,7 @@
compensate so that the label remains the same distance from the previous compensate so that the label remains the same distance from the previous
row as it would have had we not moved the tip row down. +1px compensates row as it would have had we not moved the tip row down. +1px compensates
for the tip's top 1px border. */ for the tip's top 1px border. */
&[type=tip]::before { &[type="tip"]::before {
top: calc(var(--urlbarView-labeled-row-label-top) - var(--urlbarView-labeled-tip-margin-top-extra) + 1px); top: calc(var(--urlbarView-labeled-row-label-top) - var(--urlbarView-labeled-tip-margin-top-extra) + 1px);
} }
@@ -650,7 +662,7 @@
.urlbarView-title-separator { .urlbarView-title-separator {
&::before { &::before {
content: "\2014"; content: "\2014";
margin: 0 .4em; margin: 0 0.4em;
opacity: 0.6; opacity: 0.6;
} }
@@ -688,7 +700,7 @@
} }
.urlbarView-row[sponsored]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { .urlbarView-row[sponsored]:not([selected]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
opacity: .6; opacity: 0.6;
} }
.urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > & { .urlbarView-row:not([has-action], [has-url], [restyled-search]) > .urlbarView-row-inner > .urlbarView-no-wrap > & {
@@ -712,7 +724,8 @@
composition. We set opacity: 0 at the 0% keyframe to ensure the text is not composition. We set opacity: 0 at the 0% keyframe to ensure the text is not
seen by the user until after the delay. */ seen by the user until after the delay. */
@keyframes urlbarView-action-slide-in { @keyframes urlbarView-action-slide-in {
0%, 28.6% { 0%,
28.6% {
translate: var(--urlbarView-action-slide-in-distance); translate: var(--urlbarView-action-slide-in-distance);
opacity: 0; opacity: 0;
} }
@@ -723,14 +736,14 @@
} }
/* Switch-to-tab and Clipboard action text is styled as a chiclet. */ /* Switch-to-tab and Clipboard action text is styled as a chiclet. */
.urlbarView-row[has-action]:is([type=switchtab], [type=remotetab], [type=clipboard]) { .urlbarView-row[has-action]:is([type="switchtab"], [type="remotetab"], [type="clipboard"]) {
> .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action { > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-action {
border-radius: var(--toolbarbutton-border-radius); border-radius: var(--toolbarbutton-border-radius);
padding: 4px 8px; padding: 4px 8px;
margin-block: -2px; margin-block: -2px;
margin-inline-start: 8px; margin-inline-start: 8px;
:root[uidensity=compact] & { :root[uidensity="compact"] & {
padding-block: 3px; padding-block: 3px;
&.urlbarView-userContext { &.urlbarView-userContext {
@@ -778,9 +791,9 @@
} }
} }
.urlbarView:not([action-override]) .urlbarView-row[type=switchtab], .urlbarView:not([action-override]) .urlbarView-row[type="switchtab"],
.urlbarView-row[type=remotetab]:not([selected], :hover), .urlbarView-row[type="remotetab"]:not([selected], :hover),
.urlbarView-row[type=clipboard] { .urlbarView-row[type="clipboard"] {
> .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before { > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-title-separator::before {
/* We make the title separator transparent so it stays in the accessibility /* We make the title separator transparent so it stays in the accessibility
tree. We want screen readers to pause between the result title and the tree. We want screen readers to pause between the result title and the
@@ -807,9 +820,9 @@
color: var(--link-color); color: var(--link-color);
} }
.urlbarView-row:is([type=remotetab], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > &, .urlbarView-row:is([type="remotetab"], [sponsored]):not([selected], :hover) > .urlbarView-row-inner > &,
.urlbarView-row:is([show-action-text], [restyled-search]) > .urlbarView-row-inner > &, .urlbarView-row:is([show-action-text], [restyled-search]) > .urlbarView-row-inner > &,
.urlbarView:not([action-override]) .urlbarView-row[type=switchtab] > .urlbarView-row-inner > & { .urlbarView:not([action-override]) .urlbarView-row[type="switchtab"] > .urlbarView-row-inner > & {
/* Use visibility:collapse instead of display:none since the latter can /* Use visibility:collapse instead of display:none since the latter can
confuse the overflow state of these elements when their content confuse the overflow state of these elements when their content
changes while they're hidden (bug 1549787). */ changes while they're hidden (bug 1549787). */
@@ -830,7 +843,7 @@
.urlbarView-tag { .urlbarView-tag {
border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
padding: 0 4px; padding: 0 4px;
margin-inline-start: .4em; margin-inline-start: 0.4em;
border-radius: 4px; border-radius: 4px;
} }
@@ -924,13 +937,14 @@
} }
} }
/* prettier-ignore */
.urlbarView-row[rich-suggestion]:not([selected]) > .urlbarView-row-inner > .urlbarView-row-body > :is(.urlbarView-row-body-description, .urlbarView-row-body-bottom) { .urlbarView-row[rich-suggestion]:not([selected]) > .urlbarView-row-inner > .urlbarView-row-body > :is(.urlbarView-row-body-description, .urlbarView-row-body-bottom) {
color: var(--urlbarView-secondary-text-color); color: var(--urlbarView-secondary-text-color);
} }
/* Sponsored Firefox Suggest rows */ /* Sponsored Firefox Suggest rows */
.urlbarView-row[type$=_adm_sponsored][icon-size="16"] > .urlbarView-row-inner { .urlbarView-row[type$="_adm_sponsored"][icon-size="16"] > .urlbarView-row-inner {
/* Keep the status quo before these rows were rich suggestions, where the row /* Keep the status quo before these rows were rich suggestions, where the row
height is roughly the same as usual rows. */ height is roughly the same as usual rows. */
padding-block: 0; padding-block: 0;
@@ -938,28 +952,28 @@
/* Other Firefox Suggest rows */ /* Other Firefox Suggest rows */
.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-favicon, .urlbarView-row[type$="_pocket"] > .urlbarView-row-inner > .urlbarView-favicon,
.urlbarView-row[type$=_pocket] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon { .urlbarView-row[type$="_pocket"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon {
fill: var(--pocket-icon-fill); fill: var(--pocket-icon-fill);
fill-opacity: 1; fill-opacity: 1;
} }
.urlbarView-row:is([type$=_amo], [type$=_pocket])[icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon { .urlbarView-row:is([type$="_amo"], [type$="_pocket"])[icon-size="24"] > .urlbarView-row-inner > .urlbarView-favicon {
padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 24px) / 2); padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 24px) / 2);
background-color: var(--urlbar-box-focus-bgcolor); background-color: var(--urlbar-box-focus-bgcolor);
border-radius: 2px; border-radius: 2px;
} }
.urlbarView-row:is([type$=_amo], [type$=_pocket])[icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon { .urlbarView-row:is([type$="_amo"], [type$="_pocket"])[icon-size="24"]:is([selected], :hover) > .urlbarView-row-inner > .urlbarView-favicon {
background-color: var(--urlbarView-result-button-selected-background-color); background-color: var(--urlbarView-result-button-selected-background-color);
} }
.urlbarView-row[type$=_vpn][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon { .urlbarView-row[type$="_vpn"][icon-size="32"] > .urlbarView-row-inner > .urlbarView-favicon {
padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 32px) / 2); padding: calc((var(--urlbarView-top-pick-large-icon-box-size) - 32px) / 2);
} }
.urlbarView-row[dynamicType=weather], .urlbarView-row[dynamicType="weather"],
.urlbarView-row[type=weather] { .urlbarView-row[type="weather"] {
/* Use the colors in the icon SVG files except in HCM and when the row is /* Use the colors in the icon SVG files except in HCM and when the row is
selected. Note that the SVG uses light or dark colors as appropriate. */ selected. Note that the SVG uses light or dark colors as appropriate. */
&:not([selected]) > .urlbarView-row-inner > .urlbarView-favicon { &:not([selected]) > .urlbarView-row-inner > .urlbarView-favicon {
@@ -972,6 +986,7 @@
AccuWeather API response via Merino. These rules apply to both the older AccuWeather API response via Merino. These rules apply to both the older
weather UI treatments ("simpler" and "full", which use a dynamic result) weather UI treatments ("simpler" and "full", which use a dynamic result)
and the new treatment ("simplest", which is a standard rich suggestion). */ and the new treatment ("simplest", which is a standard rich suggestion). */
/* prettier-ignore */
> .urlbarView-row-inner > .urlbarView-dynamic-weather-currentConditions > .urlbarView-dynamic-weather-currentTemperature > .urlbarView-dynamic-weather-weatherIcon, > .urlbarView-row-inner > .urlbarView-dynamic-weather-currentConditions > .urlbarView-dynamic-weather-currentTemperature > .urlbarView-dynamic-weather-weatherIcon,
> .urlbarView-row-inner > .urlbarView-favicon { > .urlbarView-row-inner > .urlbarView-favicon {
/* icon-variation="1" is "Sunny", which we'll use as the default to ensure an /* icon-variation="1" is "Sunny", which we'll use as the default to ensure an
@@ -1063,7 +1078,9 @@
} }
.urlbarView-actions-container { .urlbarView-actions-container {
margin-inline-start: calc(var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)); margin-inline-start: calc(
var(--urlbarView-item-inline-padding) + var(--urlbarView-favicon-margin-start) + var(--urlbarView-favicon-width) + var(--urlbarView-icon-margin-end)
);
margin-block-end: var(--urlbarView-item-block-padding); margin-block-end: var(--urlbarView-item-block-padding);
} }
@@ -1072,7 +1089,7 @@
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
border-radius: var(--toolbarbutton-border-radius); border-radius: var(--toolbarbutton-border-radius);
border: 1px solid transparent; border: 1px solid transparent;
padding: .4em .6em; padding: 0.4em 0.6em;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background-color: var(--urlbarView-action-button-background-color); background-color: var(--urlbarView-action-button-background-color);
@@ -1081,7 +1098,7 @@
> img { > img {
width: 16px; width: 16px;
height: 16px; height: 16px;
margin-inline-end: .4em; margin-inline-end: 0.4em;
-moz-context-properties: fill, fill-opacity; -moz-context-properties: fill, fill-opacity;
} }
@@ -1098,11 +1115,11 @@
border-top-color: var(--identity-tab-color); border-top-color: var(--identity-tab-color);
} }
.urlbarView[action-override] &[data-action=tabswitch] { .urlbarView[action-override] &[data-action="tabswitch"] {
display: none; display: none;
} }
&[data-action^=tabgroup-] { &[data-action^="tabgroup-"] {
color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark)); color: light-dark(var(--tab-group-color-pale), var(--tab-group-label-text-dark));
background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert)); background-color: light-dark(var(--tab-group-color), var(--tab-group-color-invert));
max-width: 30%; max-width: 30%;
@@ -1136,7 +1153,7 @@
border-top: 1px solid var(--urlbarView-separator-color); border-top: 1px solid var(--urlbarView-separator-color);
} }
:root[uidensity=touch] #urlbar .search-one-offs:not([hidden]) { :root[uidensity="touch"] #urlbar .search-one-offs:not([hidden]) {
padding-block: 15px; padding-block: 15px;
} }
@@ -1173,7 +1190,7 @@
#urlbar .search-setting-button { #urlbar .search-setting-button {
/* Force empty space before the button */ /* Force empty space before the button */
margin-inline-start: calc(32px - /* settings start padding */ 8px ); margin-inline-start: calc(32px - /* settings start padding */ 8px);
} }
.urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon, .urlbarView-row[source="bookmarks"] > .urlbarView-row-inner > .urlbarView-no-wrap > .urlbarView-favicon,
@@ -1228,7 +1245,7 @@
--panel-border-color: var(--arrowpanel-border-color); --panel-border-color: var(--arrowpanel-border-color);
} }
#PopupSearchAutoComplete::part(content) { #PopupSearchAutoComplete::part(content) {
--panel-padding: var(--panel-subview-body-padding); --panel-padding: var(--panel-subview-body-padding);
/* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout /* NOTE(emilio): Once bug 1551637 is fixed we don't need to use block layout
* for this (though it doesn't really hurt) */ * for this (though it doesn't really hurt) */
@@ -1236,9 +1253,9 @@
} }
@media not (prefers-contrast) { @media not (prefers-contrast) {
#PopupSearchAutoComplete::part(content) { #PopupSearchAutoComplete::part(content) {
/* Remove the top border since the panel is flush with the input. */ /* Remove the top border since the panel is flush with the input. */
border-top-width: 0; border-top-width: 0;
} }
} }