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

[morgan (@morgan)]

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/22170540a1ea2ffdc8fe540be9229bf32fd205e2

-- 
View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/22170540a1ea2ffdc8fe540be9229bf32fd205e2
You're receiving this email because of your account on gitlab.torproject.org.


-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.torproject.org/pipermail/tor-commits/attachments/20240911/b58eac51/attachment-0001.htm>