Skip to content
Snippets Groups Projects
Verified Commit 585da35e authored by henry's avatar henry Committed by Pier Angelo Vendrame
Browse files

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
parent 5926379a
Branches
Tags
1 merge request!815Rebased onto Firefox 115.3.1esr
......@@ -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),
......
......
......@@ -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;
......
......
......@@ -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"
......
......
......@@ -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);
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment