[Author Prev][Author Next][Thread Prev][Thread Next][Author Index][Thread Index]

[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-152.0a1-16.0-2] 4 commits: fixup! TB 27476: Implement about:torconnect captive portal within Tor Browser

Title: GitLab

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:

Changes:

  • browser/components/torconnect/content/torConnectUrlbarButton.js
    ... ... @@ -141,7 +141,6 @@ var gTorConnectUrlbarButton = {
    141 141 
           !this._isActive ||
    142 142 
           !TorConnect.canBeginNormalBootstrap ||
    143 143 
           TorConnect.potentiallyBlocked;
    144 
    -    this.button.classList.toggle("tor-urlbar-button-plain", plainButton);
    145 144 
         this.button.classList.toggle("tor-button", !plainButton);
    146 145 
       },
    147 146 
     };

  • browser/themes/shared/tor-urlbar-button.css
    1 
    -.tor-urlbar-button:not([hidden]) {
    2 
    -  display: flex;
    1 
    +.tor-urlbar-button {
    2 
    +  &:not([hidden]) {
    3 
    +    display: flex;
    4 
    +  }
    3 5 
       align-self: stretch;
    4 6 
       align-items: center;
    5 7 
       gap: var(--space-small);
    6 8 
       border-radius: var(--urlbar-inner-border-radius);
    7 
    -  --tor-urlbar-button-inline-padding: var(--space-small);
    8 
    -  padding-inline: var(--tor-urlbar-button-inline-padding);
    9 
    -  margin: 0;
    10 
    -}
    11 
    -
    12 
    -.tor-urlbar-button > * {
    13 
    -  flex: 0 0 auto;
    14 
    -  margin: 0;
    15 
    -}
    16 
    -
    17 
    -.tor-urlbar-button:focus-visible {
    18 
    -  /* This button lies within the urlbar, so if the outline extends beyond the
    19 
    -   * button's boundary, it will be clipped by the urlbar.
    20 
    -   * Most button's in the urlbar get around this by using --focus-outline-inset,
    21 
    -   * but our button has a purple background, which does not contrast well with
    22 
    -   * the focus outline.
    23 
    -   * Therefore, we use an offset outline rather than an inset outline, and
    24 
    -   * compensate by shrinking the button's width and height so that the outline
    25 
    -   * fits within the non-focused button boundary. Essentially, this has a
    26 
    -   * similar effect to using an inset outline that matches the color of the
    27 
    -   * urlbar background, but we keep the rounded corners. */
    28 
    -  outline: var(--focus-outline);
    29 
    -  outline-offset: var(--focus-outline-offset);
    30 
    -  /* Calculate the difference between the button's border area and the outline
    31 
    -   * area. */
    32 
    -  --tor-urlbar-focus-outline-difference: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    9 
    +  outline: var(--toolbarbutton-outline);
    10 
    +  outline-offset: var(--toolbarbutton-outline-offset);
    11 
    +  --tor-urlbar-focus-outline-difference: 0px;
    33 12 
       /* For the inline direction, we shrink the padding by the difference, and
    34 13 
        * increase the margin by the same amount so that the button text remains in
    35 14 
        * the same position.
    36 15 
        * For the block direction, the height of the button is flexibly sized with
    37 16 
        * the urlbar height, so we should only need to increase the margin. */
    38 
    -  padding-inline: calc(var(--tor-urlbar-button-inline-padding) - var(--tor-urlbar-focus-outline-difference));
    17 
    +  padding-inline: calc(var(--space-small) - var(--tor-urlbar-focus-outline-difference));
    39 18 
       margin: var(--tor-urlbar-focus-outline-difference);
    19 
    +
    20 
    +  &:focus-visible {
    21 
    +    /* This button lies within the urlbar, so if the outline extends beyond the
    22 
    +     * button's boundary, it will be clipped by the urlbar.
    23 
    +     * Most button's in the urlbar get around this by using
    24 
    +     * --focus-outline-inset, but our button has a purple background, which does
    25 
    +     * not contrast well with the focus outline.
    26 
    +     * Therefore, we use an offset outline rather than an inset outline, and
    27 
    +     * compensate by shrinking the button's width and height so that the outline
    28 
    +     * fits within the non-focused button boundary. Essentially, this has a
    29 
    +     * similar effect to using an inset outline that matches the color of the
    30 
    +     * urlbar background, but we keep the rounded corners. */
    31 
    +    outline-style: solid;
    32 
    +    outline-width: var(--focus-outline-width);
    33 
    +    outline-offset: var(--focus-outline-offset);
    34 
    +    /* Calculate the difference between the button's border area and the outline
    35 
    +     * area. */
    36 
    +    --tor-urlbar-focus-outline-difference: calc(var(--focus-outline-offset) + var(--focus-outline-width));
    37 
    +  }
    38 
    +
    39 
    +  &:not(.tor-button) {
    40 
    +    /* Make the button look plain like the identity .identity-box-button. */
    41 
    +    background-color: var(--urlbar-box-background-color);
    42 
    +    color: var(--urlbar-box-text-color);
    43 
    +
    44 
    +    :where(#urlbar[focused]) & {
    45 
    +      background-color: var(--urlbar-box-background-color-focus);
    46 
    +    }
    47 
    +
    48 
    +    &:focus-visible {
    49 
    +      outline-color: var(--focus-outline-color);
    50 
    +    }
    51 
    +
    52 
    +    &:hover {
    53 
    +      background-color: var(--urlbar-box-background-color-hover);
    54 
    +      color: var(--urlbar-box-text-color-hover);
    55 
    +      outline-color: var(--toolbarbutton-outline-color-hover);
    56 
    +    }
    57 
    +
    58 
    +    &:hover:active {
    59 
    +      background-color: var(--urlbar-box-background-color-active);
    60 
    +      color: var(--urlbar-box-text-color-hover);
    61 
    +      outline-color: var(--toolbarbutton-outline-color-active);
    62 
    +    }
    63 
    +  }
    64 
    +
    65 
    +  &.tor-button:not(:focus-visible) {
    66 
    +    /* Set the outline color based on a primary button. */
    67 
    +    outline-color: var(--button-border-color-primary);
    68 
    +
    69 
    +    &:hover {
    70 
    +      outline-color: var(--button-border-color-primary-hover);
    71 
    +    }
    72 
    +
    73 
    +    &:hover:active {
    74 
    +      outline-color: var(--button-border-color-primary-active);
    75 
    +    }
    76 
    +  }
    40 77 
     }
    41 78
    42 
    -.tor-urlbar-button:focus-visible > * {
    79 
    +.tor-urlbar-button > * {
    80 
    +  flex: 0 0 auto;
    81 
    +  margin-inline: 0;
    43 82 
       /* Negate the margin that would be added on focus to ensure the button does
    44 83 
        * not grow in height.
    45 84 
        * Ideally, this should not change anything noticeable, otherwise the text
    ... ... @@ -51,23 +90,3 @@
    51 90 
       /* Hide whilst the user is typing in the url bar. */
    52 91 
       display: none;
    53 92 
     }
    54 
    -
    55 
    -/* Make the button look plain like the identity #urlbar-label-box. */
    56 
    -.tor-urlbar-button.tor-urlbar-button-plain {
    57 
    -  background-color: var(--urlbar-box-bgcolor);
    58 
    -  color: var(--urlbar-box-text-color);
    59 
    -}
    60 
    -
    61 
    -.tor-urlbar-button.tor-urlbar-button-plain:focus-visible {
    62 
    -  outline-color: var(--focus-outline-color);
    63 
    -}
    64 
    -
    65 
    -.tor-urlbar-button.tor-urlbar-button-plain:hover {
    66 
    -  background-color: var(--urlbar-box-hover-bgcolor);
    67 
    -  color: var(--urlbar-box-hover-text-color);
    68 
    -}
    69 
    -
    70 
    -.tor-urlbar-button.tor-urlbar-button-plain:hover:active {
    71 
    -  background-color: var(--urlbar-box-active-bgcolor);
    72 
    -  color: var(--urlbar-box-hover-text-color);
    73 
    -}

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help Notification message regarding https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/9ee131d9034e887bc3dabcf3f897c4797aa021a9...24ebfbb75f56b13197ded5efa6c76670eaee7653 at 1780928037 

    _______________________________________________
tor-commits mailing list -- tor-commits@xxxxxxxxxxxxxxxxxxxx
To unsubscribe send an email to tor-commits-leave@xxxxxxxxxxxxxxxxxxxx