tor-browser

commit b34dc5f6f2d9b651ace58ac72949359721989770
parent bea43aaa93e1ce29a7278b65e81669eecee6f2cb
Author: Emilio Cobos Álvarez <emilio@crisal.io>
Date:   Fri, 21 Nov 2025 08:42:01 +0000

Bug 1997205 - Better align urlbar boxes on fractional DPIs. r=dao,desktop-theme-reviewers,urlbar-reviewers

Make sure that the space from the urlbar is an exact number of device
pixels.

Differential Revision: https://phabricator.services.mozilla.com/D271837

Diffstat:
M
browser/themes/shared/notification-icons.css
 | 
2
+-
M
browser/themes/shared/urlbar-searchbar.css
 | 
20
++++++++++++--------

2 files changed, 13 insertions(+), 9 deletions(-)
diff --git a/browser/themes/shared/notification-icons.css b/browser/themes/shared/notification-icons.css
@@ -5,7 +5,7 @@
 @namespace html url("http://www.w3.org/1999/xhtml");
 
 #notification-popup-box {
-  height: calc(var(--urlbar-min-height) - 2px /* border */ - 2 * var(--urlbar-container-padding));
+  height: calc(var(--urlbar-min-height) - 2 * var(--urlbar-container-border-padding));
   -moz-context-properties: fill, fill-opacity;
   fill: currentColor;
   fill-opacity: var(--urlbar-icon-fill-opacity);
diff --git a/browser/themes/shared/urlbar-searchbar.css b/browser/themes/shared/urlbar-searchbar.css
@@ -6,7 +6,11 @@
 
 :root {
   --urlbar-container-min-width: 310px;
-  --urlbar-container-padding: 1px;
+  /* Usually we wouldn't need snapping border widths manually, but we use this
+   * for other layout calculations too */
+  --urlbar-container-border-width: max(env(hairline), round(down, 1px, env(hairline)));
+  --urlbar-container-padding: round(up, 1px, env(hairline));
+  --urlbar-container-border-padding: calc(var(--urlbar-container-border-width) + var(--urlbar-container-padding));
   --urlbar-margin-inline: 5px;
   --urlbar-padding-block: 4px;
 
@@ -123,7 +127,7 @@
 #searchbar {
   background-color: var(--toolbar-field-background-color);
   background-clip: border-box;
-  border: 1px solid var(--toolbar-field-border-color);
+  border: var(--urlbar-container-border-width) solid var(--toolbar-field-border-color);
   border-radius: var(--toolbarbutton-border-radius);
 }
 
@@ -289,8 +293,7 @@
 }
 
 .urlbar-input-container {
-  /* Match urlbar-background's border. */
-  border: 1px solid transparent;
+  border: var(--urlbar-container-border-width) solid transparent;
   padding: var(--urlbar-container-padding);
   min-width: 0;
 }
@@ -587,8 +590,8 @@
 .urlbar-revert-button,
 .urlbar-go-button,
 .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));
+  width: calc(var(--urlbar-min-height) - 2 * var(--urlbar-container-border-padding));
+  height: calc(var(--urlbar-min-height) - 2 * var(--urlbar-container-border-padding));
   border-radius: var(--urlbar-inner-border-radius);
   padding: var(--urlbar-icon-padding);
   color: inherit;
@@ -691,6 +694,7 @@
   transition: margin-inline-start step-end var(--cfr-animation-duration);
 
   #urlbar[cfr-recommendation-state="expanded"] & {
+    width: auto;
     margin-inline-start: calc(var(--cfr-label-width) * -1);
     transition: margin-inline-start step-start var(--cfr-animation-duration);
   }
@@ -768,7 +772,7 @@
   transition-timing-function: ease-in-out, ease-in-out, step-end, step-end;
   transition-duration: var(--cfr-animation-duration);
   align-items: center;
-  margin-block: calc((var(--urlbar-min-height) - var(--urlbar-container-padding) - 2px /* border */ - 24px) / 2);
+  margin-block: calc((var(--urlbar-min-height) - 24px) / 2 - var(--urlbar-container-border-padding));
 
   &:-moz-locale-dir(rtl) {
     mask-position-x: calc(var(--cfr-label-width) * -1);
@@ -947,7 +951,7 @@
   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));
+  margin-block: calc((var(--urlbar-min-height) - 20px) / 2 - var(--urlbar-container-border-padding));
   overflow: hidden;
 
   :where(#urlbar[focused]) & {