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:

- browser/components/BrowserGlue.sys.mjs - browser/components/abouttor/AboutTorChild.sys.mjs - browser/components/abouttor/content/aboutTor.css - browser/components/abouttor/content/aboutTor.html - browser/components/abouttor/content/aboutTor.js

Changes:

===================================== browser/components/BrowserGlue.sys.mjs ===================================== @@ -513,6 +513,7 @@ let JSWINDOWACTORS = {

events: { DOMContentLoaded: {}, + L10nMutationsFinished: {}, SubmitSearchOnionize: { wantUntrusted: true }, }, },

===================================== browser/components/abouttor/AboutTorChild.sys.mjs ===================================== @@ -16,6 +16,12 @@ export class AboutTorChild extends JSWindowActorChild { case "SubmitSearchOnionize": this.sendAsyncMessage("AboutTor:SetSearchOnionize", !!event.detail); break; + case "L10nMutationsFinished": + // Pass on chrome-only event for completed localization to content. + this.contentWindow.dispatchEvent( + new this.contentWindow.CustomEvent("L10nMutationsFinished") + ); + break; } } }

===================================== browser/components/abouttor/content/aboutTor.css ===================================== @@ -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);

===================================== browser/components/abouttor/content/aboutTor.html ===================================== @@ -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

===================================== browser/components/abouttor/content/aboutTor.js ===================================== @@ -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"); + } }, };

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/22170540...