fixup! Bug 7494: Create local home page for TBB.

Bug 32328: Add info box to let users know when Tor Browser does not
control the Tor Network connection configuration. And provide a link to
check.torproject.org

browser/components/abouttor/AboutTorParent.sys.mjs

@@ -4,6 +4,7 @@ const lazy = {};
 
 ChromeUtils.defineESModuleGetters(lazy, {
   AboutTorMessage: "resource:///modules/AboutTorMessage.sys.mjs",
+  TorConnect: "resource:///modules/TorConnect.sys.mjs",
 });
 
 export class AboutTorParent extends JSWindowActorParent {
@@ -12,6 +13,7 @@ export class AboutTorParent extends JSWindowActorParent {
     switch (message.name) {
       case "AboutTor:GetInitialData":
         return Promise.resolve({
+          torConnectEnabled: lazy.TorConnect.enabled,
           messageData: lazy.AboutTorMessage.getNext(),
           isStable: AppConstants.MOZ_UPDATE_CHANNEL === "release",
           searchOnionize: Services.prefs.getBoolPref(onionizePref, false),

browser/components/abouttor/content/aboutTor.css

@@ -4,10 +4,12 @@ body {
   margin: 0;
   min-height: 100vh;
   display: grid;
+  --form-max-width: 600px;
   grid-template:
     /* Start space: unfilled. */
     ". . ." 1fr
     "heading heading heading" auto
+    "tor-check tor-check tor-check" auto
     ". form ." min-content
     "message message message" auto
     /* End space: unfilled.
@@ -16,8 +18,8 @@ body {
      * not shrink to zero, but will instead shrink to a minimum size of
      * 75px = (150px * 1fr / 2fr) */
     ". . ." minmax(150px, 2fr)
-    /* NOTE: "form" will be given a maximum width of 600px. */
-    / 1fr minmax(max-content, 600px) 1fr;
+    /* NOTE: "form" will be given a maximum width of --form-max-width. */
+    / 1fr minmax(max-content, var(--form-max-width)) 1fr;
   justify-items: center;
   padding-inline: 20px;
   background:
@@ -44,6 +46,32 @@ h1 {
   flex: 0 0 auto;
 }
 
+#tor-check {
+  grid-area: tor-check;
+  max-width: var(--form-max-width);
+  box-sizing: border-box;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  padding-inline: 24px;
+  padding-block: 12px;
+  border-radius: 8px;
+  margin-block-start: 0;
+  margin-block-end: 30px;
+}
+
+body:not(.show-tor-check) #tor-check {
+  display: none;
+}
+
+#tor-check-icon {
+  flex: 0 0 auto;
+  width: 16px;
+  height: 16px;
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
 .home-message:not(.shown-message) {
   display: none;
 }
@@ -64,7 +92,10 @@ h1 {
   margin-inline-end: 0.3em;
 }
 
-.home-message a {
+:is(
+  .home-message,
+  #tor-check,
+) a {
   /* Increase gap between the link and the rest of the text. */
   margin-inline: 0.4em;
 }
@@ -136,7 +167,11 @@ h1 {
 
 @media (prefers-contrast) {
   #search-form {
-    border-color: -moz-DialogText;
+    border-color: var(--in-content-box-border-color);
+  }
+
+  #tor-check {
+    background-color: var(--in-content-box-info-background);
   }
 }
 
@@ -150,6 +185,10 @@ h1 {
     --in-content-focus-outline: var(--focus-outline);
   }
 
+  #tor-check {
+    background-color: #1f0333;
+  }
+
   body > :not(#search-form) {
     /* Same as --in-content-page-color when "prefers-color-scheme: dark" */
     --in-content-page-color: #fbfbfe;

browser/components/abouttor/content/aboutTor.html

@@ -37,6 +37,20 @@
       />
       <span id="tor-browser-home-heading-text"></span>
     </h1>
+    <p id="tor-check">
+      <img
+        id="tor-check-icon"
+        alt=""
+        src="chrome://global/skin/icons/info.svg"
+      />
+      <span data-l10n-id="tor-browser-home-tor-check-warning">
+        <a
+          data-l10n-name="tor-check-link"
+          href="https://check.torproject.org/"
+          target="_blank"
+        ></a>
+      </span>
+    </p>
     <form id="search-form" method="get" rel="noreferrer">
       <img
         id="dax-logo"

browser/components/abouttor/content/aboutTor.js

@@ -97,6 +97,7 @@ const MessageArea = {
   _initialized: false,
   _messageData: null,
   _isStable: null,
+  _torConnectEnabled: null,
 
   /**
    * Initialize the message area and heading once elements are available.
@@ -112,10 +113,13 @@ const MessageArea = {
    * @param {MessageData} messageData - The message data, indicating which
    *   message to show.
    * @param {boolean} isStable - Whether this is the stable release version.
+   * @param {boolean} torConnectEnabled - Whether TorConnect is enabled, and
+   *   therefore the Tor process was configured with about:torconnect.
    */
-  setMessageData(messageData, isStable) {
+  setMessageData(messageData, isStable, torConnectEnabled) {
     this._messageData = messageData;
     this._isStable = isStable;
+    this._torConnectEnabled = torConnectEnabled;
     this._update();
   },
 
@@ -140,6 +144,8 @@ const MessageArea = {
         : "tor-browser-home-heading-testing"
     );
 
+    document.body.classList.toggle("show-tor-check", !this._torConnectEnabled);
+
     const { updateVersion, updateURL, number } = this._messageData;
 
     if (updateVersion) {
@@ -170,7 +176,8 @@ window.addEventListener("DOMContentLoaded", () => {
 });
 
 window.addEventListener("InitialData", event => {
-  const { isStable, searchOnionize, messageData } = event.detail;
+  const { torConnectEnabled, isStable, searchOnionize, messageData } =
+    event.detail;
   SearchWidget.setOnionizeState(!!searchOnionize);
-  MessageArea.setMessageData(messageData, !!isStable);
+  MessageArea.setMessageData(messageData, !!isStable, !!torConnectEnabled);
 });