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

[tor-commits] [Git][tpo/applications/tor-browser][tor-browser-128.2.0esr-14.0-1] fixup! Bug 7494: Create local home page for TBB.

Title: GitLab

morgan pushed to branch tor-browser-128.2.0esr-14.0-1 at The Tor Project / Applications / Tor Browser

Commits:

  • 22170540
    by Henry Wilkes at 2024-09-11T02:09:21+00:00 
    fixup! Bug 7494: Create local home page for TBB.

Bug 43131: Reduce layout jank when loading about:tor.

We wait until the initialization is complete before we reveal the page
content. So on refresh, the page just shows a single flash, but no
change in layout.

We also speed up the usual page load by having l10n load both the stable
and testing headings at initiation, rather than waiting for the
"InitialData" event from the page actor.

In the case where we have an update to show, we wait a little longer for
the l10n to complete.

5 changed files:

Changes:

  • browser/components/BrowserGlue.sys.mjs
    ... ... @@ -513,6 +513,7 @@ let JSWINDOWACTORS = {
    513 513
    514 514 
           events: {
    515 515 
             DOMContentLoaded: {},
    516 
    +        L10nMutationsFinished: {},
    516 517 
             SubmitSearchOnionize: { wantUntrusted: true },
    517 518 
           },
    518 519 
         },

  • browser/components/abouttor/AboutTorChild.sys.mjs
    ... ... @@ -16,6 +16,12 @@ export class AboutTorChild extends JSWindowActorChild {
    16 16 
           case "SubmitSearchOnionize":
    17 17 
             this.sendAsyncMessage("AboutTor:SetSearchOnionize", !!event.detail);
    18 18 
             break;
    19 
    +      case "L10nMutationsFinished":
    20 
    +        // Pass on chrome-only event for completed localization to content.
    21 
    +        this.contentWindow.dispatchEvent(
    22 
    +          new this.contentWindow.CustomEvent("L10nMutationsFinished")
    23 
    +        );
    24 
    +        break;
    19 25 
         }
    20 26 
       }
    21 27 
     }

  • browser/components/abouttor/content/aboutTor.css
    ... ... @@ -29,6 +29,13 @@ body {
    29 29 
         repeat-x;
    30 30 
     }
    31 31
    32 
    +body:not(.initialized) {
    33 
    +  /* Hide the components before the page is initialized.
    34 
    +   * NOTE: The layout can still be adjusted or measured in this time since we
    35 
    +   * use visibility rather than `display: none`. */
    36 
    +  visibility: hidden;
    37 
    +}
    38 
    +
    32 39 
     h1 {
    33 40 
       grid-area: heading;
    34 41 
       display: flex;
    ... ... @@ -45,6 +52,14 @@ h1 {
    45 52 
       flex: 0 0 auto;
    46 53 
     }
    47 54
    55 
    +body.is-testing #tor-browser-home-heading-stable {
    56 
    +  display: none;
    57 
    +}
    58 
    +
    59 
    +body:not(.is-testing) #tor-browser-home-heading-testing {
    60 
    +  display: none;
    61 
    +}
    62 
    +
    48 63 
     #tor-check {
    49 64 
       grid-area: tor-check;
    50 65 
       max-width: var(--form-max-width);

  • browser/components/abouttor/content/aboutTor.html
    ... ... @@ -35,7 +35,14 @@
    35 35 
             alt=""
    36 36 
             src="">"chrome://branding/content/about-logo.svg"
    37 37 
           />
    38 
    -      <span id="tor-browser-home-heading-text"></span>
    38 
    +      <span
    39 
    +        id="tor-browser-home-heading-stable"
    40 
    +        data-l10n-id="tor-browser-home-heading-stable"
    41 
    +      ></span>
    42 
    +      <span
    43 
    +        id="tor-browser-home-heading-testing"
    44 
    +        data-l10n-id="tor-browser-home-heading-testing"
    45 
    +      ></span>
    39 46 
         </h1>
    40 47 
         <p id="tor-check">
    41 48 
           <img

  • browser/components/abouttor/content/aboutTor.js
    ... ... @@ -137,12 +137,7 @@ const MessageArea = {
    137 137 
         }
    138 138
    139 139 
         // Set heading.
    140 
    -    document.l10n.setAttributes(
    141 
    -      document.getElementById("tor-browser-home-heading-text"),
    142 
    -      this._isStable
    143 
    -        ? "tor-browser-home-heading-stable"
    144 
    -        : "tor-browser-home-heading-testing"
    145 
    -    );
    140 
    +    document.body.classList.toggle("is-testing", !this._isStable);
    146 141
    147 142 
         document.body.classList.toggle("show-tor-check", !this._torConnectEnabled);
    148 143
    ... ... @@ -167,6 +162,20 @@ const MessageArea = {
    167 162 
             "shown-message"
    168 163 
           );
    169 164 
         }
    165 
    +
    166 
    +    // In the case where we set the update message, we are still waiting for the
    167 
    +    // l10n message to complete. We wait until then before showing the content.
    168 
    +    if (document.hasPendingL10nMutations) {
    169 
    +      window.addEventListener(
    170 
    +        "L10nMutationsFinished",
    171 
    +        () => {
    172 
    +          document.body.classList.add("initialized");
    173 
    +        },
    174 
    +        { once: true }
    175 
    +      );
    176 
    +    } else {
    177 
    +      document.body.classList.add("initialized");
    178 
    +    }
    170 179 
       },
    171 180 
     };
    172 181

    • —
    View it on GitLab.
    You're receiving this email because of your account on gitlab.torproject.org. Manage all notifications · Help 

    _______________________________________________
tor-commits mailing list
tor-commits@xxxxxxxxxxxxxxxxxxxx
https://lists.torproject.org/cgi-bin/mailman/listinfo/tor-commits