morgan pushed to branch tor-browser-152.0a1-16.0-2 at The Tor Project / Applications / Tor Browser Commits: a422ad59 by Henry Wilkes at 2026-06-08T12:27:13+01:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 44844: Rename CSS urlbar variables. - - - - - 2d5c2b7d by Henry Wilkes at 2026-06-08T12:42:11+01:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 44844: Move CSS padding/margin variables to main CSS block. - - - - - 4ba77e17 by Henry Wilkes at 2026-06-08T12:43:32+01:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 44844: Use CSS nesting and use `:not(.tor-button)` rather than `.tor-urlbar-button-plain`. - - - - - 24ebfbb7 by Henry Wilkes at 2026-06-08T12:43:36+01:00 fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser TB 44844: Add an outline for forced colors, and change the plain button background when the urlbar has focus. - - - - - 2 changed files: - browser/components/torconnect/content/torConnectUrlbarButton.js - browser/themes/shared/tor-urlbar-button.css Changes: ===================================== browser/components/torconnect/content/torConnectUrlbarButton.js ===================================== @@ -141,7 +141,6 @@ var gTorConnectUrlbarButton = { !this._isActive || !TorConnect.canBeginNormalBootstrap || TorConnect.potentiallyBlocked; - this.button.classList.toggle("tor-urlbar-button-plain", plainButton); this.button.classList.toggle("tor-button", !plainButton); }, }; ===================================== browser/themes/shared/tor-urlbar-button.css ===================================== @@ -1,45 +1,84 @@ -.tor-urlbar-button:not([hidden]) { - display: flex; +.tor-urlbar-button { + &:not([hidden]) { + display: flex; + } align-self: stretch; align-items: center; gap: var(--space-small); border-radius: var(--urlbar-inner-border-radius); - --tor-urlbar-button-inline-padding: var(--space-small); - padding-inline: var(--tor-urlbar-button-inline-padding); - margin: 0; -} - -.tor-urlbar-button > * { - flex: 0 0 auto; - margin: 0; -} - -.tor-urlbar-button:focus-visible { - /* This button lies within the urlbar, so if the outline extends beyond the - * button's boundary, it will be clipped by the urlbar. - * Most button's in the urlbar get around this by using --focus-outline-inset, - * but our button has a purple background, which does not contrast well with - * the focus outline. - * Therefore, we use an offset outline rather than an inset outline, and - * compensate by shrinking the button's width and height so that the outline - * fits within the non-focused button boundary. Essentially, this has a - * similar effect to using an inset outline that matches the color of the - * urlbar background, but we keep the rounded corners. */ - outline: var(--focus-outline); - outline-offset: var(--focus-outline-offset); - /* Calculate the difference between the button's border area and the outline - * area. */ - --tor-urlbar-focus-outline-difference: calc(var(--focus-outline-offset) + var(--focus-outline-width)); + outline: var(--toolbarbutton-outline); + outline-offset: var(--toolbarbutton-outline-offset); + --tor-urlbar-focus-outline-difference: 0px; /* For the inline direction, we shrink the padding by the difference, and * increase the margin by the same amount so that the button text remains in * the same position. * For the block direction, the height of the button is flexibly sized with * the urlbar height, so we should only need to increase the margin. */ - padding-inline: calc(var(--tor-urlbar-button-inline-padding) - var(--tor-urlbar-focus-outline-difference)); + padding-inline: calc(var(--space-small) - var(--tor-urlbar-focus-outline-difference)); margin: var(--tor-urlbar-focus-outline-difference); + + &:focus-visible { + /* This button lies within the urlbar, so if the outline extends beyond the + * button's boundary, it will be clipped by the urlbar. + * Most button's in the urlbar get around this by using + * --focus-outline-inset, but our button has a purple background, which does + * not contrast well with the focus outline. + * Therefore, we use an offset outline rather than an inset outline, and + * compensate by shrinking the button's width and height so that the outline + * fits within the non-focused button boundary. Essentially, this has a + * similar effect to using an inset outline that matches the color of the + * urlbar background, but we keep the rounded corners. */ + outline-style: solid; + outline-width: var(--focus-outline-width); + outline-offset: var(--focus-outline-offset); + /* Calculate the difference between the button's border area and the outline + * area. */ + --tor-urlbar-focus-outline-difference: calc(var(--focus-outline-offset) + var(--focus-outline-width)); + } + + &:not(.tor-button) { + /* Make the button look plain like the identity .identity-box-button. */ + background-color: var(--urlbar-box-background-color); + color: var(--urlbar-box-text-color); + + :where(#urlbar[focused]) & { + background-color: var(--urlbar-box-background-color-focus); + } + + &:focus-visible { + outline-color: var(--focus-outline-color); + } + + &:hover { + background-color: var(--urlbar-box-background-color-hover); + color: var(--urlbar-box-text-color-hover); + outline-color: var(--toolbarbutton-outline-color-hover); + } + + &:hover:active { + background-color: var(--urlbar-box-background-color-active); + color: var(--urlbar-box-text-color-hover); + outline-color: var(--toolbarbutton-outline-color-active); + } + } + + &.tor-button:not(:focus-visible) { + /* Set the outline color based on a primary button. */ + outline-color: var(--button-border-color-primary); + + &:hover { + outline-color: var(--button-border-color-primary-hover); + } + + &:hover:active { + outline-color: var(--button-border-color-primary-active); + } + } } -.tor-urlbar-button:focus-visible > * { +.tor-urlbar-button > * { + flex: 0 0 auto; + margin-inline: 0; /* Negate the margin that would be added on focus to ensure the button does * not grow in height. * Ideally, this should not change anything noticeable, otherwise the text @@ -51,23 +90,3 @@ /* Hide whilst the user is typing in the url bar. */ display: none; } - -/* Make the button look plain like the identity #urlbar-label-box. */ -.tor-urlbar-button.tor-urlbar-button-plain { - background-color: var(--urlbar-box-bgcolor); - color: var(--urlbar-box-text-color); -} - -.tor-urlbar-button.tor-urlbar-button-plain:focus-visible { - outline-color: var(--focus-outline-color); -} - -.tor-urlbar-button.tor-urlbar-button-plain:hover { - background-color: var(--urlbar-box-hover-bgcolor); - color: var(--urlbar-box-hover-text-color); -} - -.tor-urlbar-button.tor-urlbar-button-plain:hover:active { - background-color: var(--urlbar-box-active-bgcolor); - color: var(--urlbar-box-hover-text-color); -} View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/9ee131d... -- View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/9ee131d... You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications: https://gitlab.torproject.org/-/profile/notifications | Help: https://gitlab.torproject.org/help