commit c693ad2d52236942db018a73632a4b910f54b488
parent 7282401cc640e013961831404ea7cf2ceec98a46
Author: Dão Gottwald <dao@mozilla.com>
Date: Mon, 6 Oct 2025 12:25:58 +0000
Bug 1992450 - Align space around and border radii of unified search button and address bar result rows. r=desktop-theme-reviewers,emilio
Differential Revision: https://phabricator.services.mozilla.com/D267435
Diffstat:
5 files changed, 23 insertions(+), 24 deletions(-)
diff --git a/browser/themes/shared/browser-shared.css b/browser/themes/shared/browser-shared.css
@@ -104,9 +104,10 @@ body {
--urlbar-min-height: max(32px, 1.4em);
--urlbar-icon-padding: calc((var(--urlbar-min-height) - 2px /* border */ - 2px /* padding */ - 16px /* icon */) / 2);
- /* This should be used for icons and chiclets inside the input field. It makes
- the gap around them more uniform when they are close to the field edges */
- --urlbar-icon-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
+ /* This should be used for icons and chiclets inside the input field, as well
+ as result rows. It makes the gap around them more uniform when they are
+ close to the field edges. */
+ --urlbar-inner-border-radius: calc(var(--toolbarbutton-border-radius) - 1px);
--urlbar-searchmodeswitcher-inline-padding: 6px;
--urlbar-searchmodeswitcher-margin-inline-end: 0.45em;
diff --git a/browser/themes/shared/identity-block/identity-block.css b/browser/themes/shared/identity-block/identity-block.css
@@ -39,7 +39,7 @@
.identity-box-button {
padding-inline: var(--urlbar-icon-padding);
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
}
.identity-box-button,
@@ -86,7 +86,7 @@
background-color: var(--urlbar-box-bgcolor);
color: var(--urlbar-box-text-color);
padding-inline: 8px;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
}
#urlbar[focused] {
@@ -255,7 +255,7 @@
#tracking-protection-icon-container {
padding-inline: var(--urlbar-icon-padding);
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
/* This is needed in order to position the blue dot indicator. */
position: relative;
}
@@ -301,7 +301,7 @@
#trust-icon-container {
padding-inline: var(--urlbar-icon-padding);
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
margin-inline-end: var(--identity-box-margin-inline);
-moz-context-properties: fill, fill-opacity;
diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css
@@ -10,7 +10,7 @@
fill: currentColor;
fill-opacity: var(--urlbar-icon-fill-opacity);
color: inherit;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
&:hover {
background-color: hsla(0, 0%, 70%, 0.2);
@@ -45,7 +45,7 @@
&:focus-visible {
outline: var(--focus-outline);
outline-offset: var(--focus-outline-inset);
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
}
#nav-bar:not([keyNav]) & {
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
@@ -481,7 +481,7 @@
color: var(--urlbar-box-text-color);
margin-inline-end: 8px;
align-items: center;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
padding-inline: 8px 6px;
#urlbar[focused] > .urlbar-input-container > & {
@@ -502,7 +502,7 @@
-moz-context-properties: fill, fill-opacity;
fill-opacity: 0.6;
fill: currentColor;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
flex-shrink: 0;
@media (prefers-contrast) {
@@ -588,7 +588,7 @@
.search-go-button {
width: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
padding: var(--urlbar-icon-padding);
color: inherit;
outline: var(--toolbarbutton-outline);
@@ -758,7 +758,7 @@
#cfr-label-container {
width: 0;
overflow: hidden;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
padding-inline-start: 28px;
mask-image: linear-gradient(to right, transparent 0, black 0);
mask-position-x: var(--cfr-label-width);
@@ -943,7 +943,7 @@
appearance: none;
font-size: 0.8em;
padding: 3px 7px;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
background-color: var(--urlbar-box-bgcolor);
color: var(--urlbar-box-text-color);
margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - 1px /* border */ - var(--urlbar-container-padding));
@@ -1117,7 +1117,7 @@
.searchmode-switcher {
appearance: none;
- border-radius: var(--urlbar-icon-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
margin: 0;
margin-inline-end: var(--urlbar-searchmodeswitcher-margin-inline-end);
padding-inline: var(--urlbar-searchmodeswitcher-inline-padding);
@@ -1166,7 +1166,7 @@
.searchmode-switcher-chicklet {
background-color: var(--urlbar-box-bgcolor);
border-start-end-radius: var(--toolbarbutton-border-radius);
- border-end-end-radius: var(--urlbar-icon-border-radius);
+ border-end-end-radius: var(--urlbar-inner-border-radius);
align-items: center;
height: 100%;
max-width: 40%;
diff --git a/browser/themes/shared/urlbarView.css b/browser/themes/shared/urlbarView.css
@@ -20,7 +20,7 @@
--urlbarView-small-font-size: 0.85em;
- --urlbarView-results-padding: 4px;
+ --urlbarView-results-padding: 7px;
--urlbarView-row-gutter: 2px;
--urlbarView-item-inline-padding: var(--urlbar-icon-padding);
--urlbarView-item-block-padding: 6px;
@@ -97,10 +97,8 @@
display: block;
text-shadow: none;
overflow: clip;
- margin-inline: calc(5px + var(--urlbar-container-padding));
- width: calc(100% - 2 * (5px + var(--urlbar-container-padding)));
- /* Match urlbar-background's border. */
- border-inline: 1px solid transparent;
+ margin-inline: var(--urlbarView-results-padding);
+ width: calc(100% - 2 * var(--urlbarView-results-padding));
}
.urlbarView-body-inner {
@@ -113,7 +111,7 @@
}
.urlbarView-results {
- padding-block: var(--urlbarView-results-padding);
+ padding-block: calc(var(--urlbarView-results-padding) - var(--urlbarView-row-gutter));
white-space: nowrap;
/* Vertically center the one-offs when no results are present. */
@@ -151,7 +149,7 @@
hover area is contiguous and a row is always hovered as the user moves the
mouse across rows, even though each row's highlighted area is smaller. */
border: var(--urlbarView-row-gutter) solid transparent;
- border-radius: calc(var(--urlbarView-row-gutter) + var(--toolbarbutton-border-radius));
+ border-radius: calc(var(--urlbarView-row-gutter) + var(--urlbar-inner-border-radius));
background-clip: padding-box;
/* Must hide the overflowing rows while the view is updating */
@@ -480,7 +478,7 @@
.urlbarView-button:where(:not(:empty):not(.urlbarView-button-result-menu)),
.urlbarView-splitbutton-dropmarker {
- border-radius: var(--toolbarbutton-border-radius);
+ border-radius: var(--urlbar-inner-border-radius);
padding: 0.5em 1em;
font-size: 0.93em;
font-weight: var(--font-weight-bold);
