tor-browser

commit 9b1c48431ea80e6b0098ddfc111b210ee8c00e31
parent 407b6ab2994e1b75b3717a0a838eedb7411b9f4b
Author: Dão Gottwald <dao@mozilla.com>
Date:   Fri,  3 Oct 2025 13:59:21 +0000

Bug 1991283 - Prevent tab scroll button border-radius from shrinking the hit box. r=desktop-theme-reviewers,emilio

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

Diffstat:
M
browser/themes/shared/tabbrowser/tabs.css
 | 
25
++++++++-----------------
M
toolkit/themes/shared/arrowscrollbox.css
 | 
16
++++++++++++++++

2 files changed, 24 insertions(+), 17 deletions(-)
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
@@ -1640,32 +1640,23 @@ tab-group {
 
   &::part(scrollbutton-up),
   &::part(scrollbutton-down) {
+    --arrowscrollbox-scrollicon-border-radius: var(--tab-border-radius);
+    --arrowscrollbox-scrollicon-hover-background-color: var(--toolbarbutton-hover-background);
+    --arrowscrollbox-scrollicon-active-background-color: var(--toolbarbutton-active-background);
+    --arrowscrollbox-scrollicon-padding: var(--toolbarbutton-inner-padding) 2px;
+
     appearance: none;
-    background-clip: padding-box;
-    border: 4px solid transparent;
-    border-radius: calc(var(--tab-border-radius) + 4px);
+    padding: 0 4px;
     fill: var(--toolbarbutton-icon-fill);
     margin: 0;
   }
 
   #navigator-toolbox:not(:hover) &:not([highlight])::part(scrollbutton-down) {
-    transition: 1s background-color ease-out;
+    --arrowscrollbox-scrollicon-transition: 1s background-color ease-out;
   }
 
   &[highlight]::part(scrollbutton-down) {
-    background-color: SelectedItem;
-  }
-
-  &:not([scrolledtostart])::part(scrollbutton-up):hover,
-  &:not([scrolledtoend])::part(scrollbutton-down):hover {
-    background-color: var(--toolbarbutton-hover-background);
-    color: inherit;
-  }
-
-  &:not([scrolledtostart])::part(scrollbutton-up):hover:active,
-  &:not([scrolledtoend])::part(scrollbutton-down):hover:active {
-    background-color: var(--toolbarbutton-active-background);
-    color: inherit;
+    --arrowscrollbox-scrollicon-background-color: SelectedItem;
   }
 
   &[scrolledtostart]::part(overflow-start-indicator),
diff --git a/toolkit/themes/shared/arrowscrollbox.css b/toolkit/themes/shared/arrowscrollbox.css
@@ -36,6 +36,22 @@ toolbarbutton {
     fill-opacity: var(--toolbarbutton-disabled-opacity);
   }
 
+  > .toolbarbutton-icon {
+    padding: var(--arrowscrollbox-scrollicon-padding, 0);
+    /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-radius-tokens */
+    border-radius: var(--arrowscrollbox-scrollicon-border-radius, 0);
+    background-color: var(--arrowscrollbox-scrollicon-background-color, transparent);
+    transition: var(--arrowscrollbox-scrollicon-transition, none);
+  }
+
+  &:not([disabled]):hover > .toolbarbutton-icon {
+    background-color: var(--arrowscrollbox-scrollicon-hover-background-color, transparent);
+
+    :active > & {
+      background-color: var(--arrowscrollbox-scrollicon-active-background-color, transparent);
+    }
+  }
+
   :host([orient="horizontal"]) > & {
     list-style-image: url("chrome://global/skin/icons/arrow-left.svg");
   }