Pier Angelo Vendrame pushed to branch tor-browser-115.3.0esr-13.0-1 at The Tor Project / Applications / Tor Browser

Commits: 158d784f by Henry Wilkes at 2023-10-02T15:09:09+01:00 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

- - - - - 76c3008e by Henry Wilkes at 2023-10-03T17:05:40+01:00 fixup! Tor Browser strings

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

- - - - -

5 changed files:

- browser/components/abouttor/AboutTorParent.sys.mjs - browser/components/abouttor/content/aboutTor.css - browser/components/abouttor/content/aboutTor.html - browser/components/abouttor/content/aboutTor.js - browser/locales/en-US/browser/tor-browser.ftl

Changes:

===================================== 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 ===================================== @@ -70,6 +70,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,9 +176,10 @@ 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); });

// YEC 2023 (year end campaign).

===================================== browser/locales/en-US/browser/tor-browser.ftl ===================================== @@ -14,6 +14,11 @@ appmenu-open-tor-manual = tor-browser-home-heading-stable = Explore. Privately. tor-browser-home-heading-testing = Test. Thoroughly.

+# Only shown when underlying Tor process was not started by Tor Browser. +# "Tails" refers to the operating system, and should be translated as a brand name. +# <a data-l10n-name="tor-check-link"> should contain the link text and close with </a>. +tor-browser-home-tor-check-warning = Your connection to Tor is not being managed by Tor Browser. Some operating systems (like Tails) will manage this for you, or you could have set up a custom configuration. <a data-l10n-name="tor-check-link">Test your connection</a> + tor-browser-home-duck-duck-go-input = .placeholder = Search with DuckDuckGo # Toggle to switch from DuckDuckGo's plain ".com" domain to its ".onion" domain.

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/compare/1b12102...