GitLab

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.

@@ -513,6 +513,7 @@ let JSWINDOWACTORS = {
        events: {
          DOMContentLoaded: {},
 +        L10nMutationsFinished: {},
          SubmitSearchOnionize: { wantUntrusted: true },
        },
      },

...	...	@@ -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	}

@@ -29,6 +29,13 @@ body {
      repeat-x;
+ }
 +body:not(.initialized) {
 +  /* Hide the components before the page is initialized.
 +   * NOTE: The layout can still be adjusted or measured in this time since we
 +   * use visibility rather than `display: none`. */
 +  visibility: hidden;
 +}
++
  h1 {
    grid-area: heading;
    display: flex;
@@ -45,6 +52,14 @@ h1 {
    flex: 0 0 auto;
+ }
 +body.is-testing #tor-browser-home-heading-stable {
 +  display: none;
 +}
++
 +body:not(.is-testing) #tor-browser-home-heading-testing {
 +  display: none;
 +}
++
  #tor-check {
    grid-area: tor-check;
    max-width: var(--form-max-width);

@@ -35,7 +35,14 @@
          alt=""
          src="chrome://branding/content/about-logo.svg"
        />
 -      <span id="tor-browser-home-heading-text"></span>
 +      <span
 +        id="tor-browser-home-heading-stable"
 +        data-l10n-id="tor-browser-home-heading-stable"
 +      ></span>
 +      <span
 +        id="tor-browser-home-heading-testing"
 +        data-l10n-id="tor-browser-home-heading-testing"
 +      ></span>
      </h1>
      <p id="tor-check">
        <img

@@ -137,12 +137,7 @@ const MessageArea = {
+     }
      // Set heading.
 -    document.l10n.setAttributes(
 -      document.getElementById("tor-browser-home-heading-text"),
 -      this._isStable
 -        ? "tor-browser-home-heading-stable"
 -        : "tor-browser-home-heading-testing"
 -    );
 +    document.body.classList.toggle("is-testing", !this._isStable);
      document.body.classList.toggle("show-tor-check", !this._torConnectEnabled);
@@ -167,6 +162,20 @@ const MessageArea = {
          "shown-message"
        );
+     }
++
 +    // In the case where we set the update message, we are still waiting for the
 +    // l10n message to complete. We wait until then before showing the content.
 +    if (document.hasPendingL10nMutations) {
 +      window.addEventListener(
 +        "L10nMutationsFinished",
 +        () => {
 +          document.body.classList.add("initialized");
 +        },
 +        { once: true }
 +      );
 +    } else {
 +      document.body.classList.add("initialized");
 +    }
    },
  };

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

Commits:

5 changed files:

Changes: