commit 97167a20358c0bcfe942125668f45171c6b7e7c0
parent 6aa548f73a7d91671d3f272a7463b1de27117755
Author: Beatriz Rizental <bea@torproject.org>
Date: Wed, 3 Sep 2025 14:42:37 +0200
Temporary changes to about:torconnect for Android.
Diffstat:
3 files changed, 171 insertions(+), 11 deletions(-)
diff --git a/toolkit/components/torconnect/content/aboutTorConnect.css b/toolkit/components/torconnect/content/aboutTorConnect.css
@@ -4,6 +4,11 @@
@import url("chrome://global/skin/tor-colors.css");
@import url("chrome://global/skin/onion-pattern.css");
+html {
+ width: 100%;
+ height: 100%;
+}
+
body:not(.loaded) {
/* Keep blank whilst loading. */
display: none;
@@ -270,3 +275,147 @@ body.aboutTorConnect .title.location {
background-image: url("chrome://global/content/torconnect/connection-location.svg");
stroke: var(--icon-color-warning);
}
+
+/* Android-specific CSS, to be removed when we use only the native UI. */
+:root {
+ --android-dark-accents-buttons: #9059ff;
+ --android-dark-background-secondary: #e1e0e7;
+ --android-dark-text-primary: #fbfbfe;
+ --android-light-text-primary: #15141a;
+}
+
+[hidden="true"] {
+ display: none !important;
+}
+
+body.android {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0 24px !important;
+ color: var(--android-dark-text-primary);
+ background: linear-gradient(194deg, #692e9d -0.93%, #393270 48.91%);
+ font: menu;
+ font-size: var(--font-size-small);
+ display: flex;
+}
+
+.android #connectPageContainer {
+ max-width: none;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.android #breadcrumbs {
+ display: none;
+}
+
+.android #text-container {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+}
+
+.android .title {
+ background-position: left 0;
+ background-repeat: no-repeat;
+ background-size: 40px;
+ padding-top: 64px;
+ font-size: var(--font-size-xlarge);
+ line-height: 28px;
+}
+
+.android h1 {
+ font-weight: var(--font-weight);
+ font-size: inherit;
+ margin: 0 0 16px 0;
+}
+
+.android p {
+ margin: 0;
+ padding-bottom: 8px;
+ line-height: 20px;
+}
+
+.android #quickstartContainer {
+ margin-top: 24px;
+}
+
+.android .button-container {
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+}
+
+.android #locationDropdown {
+ width: 100%;
+ max-width: none;
+ margin: 0;
+}
+
+.android select {
+ background: transparent;
+ border: none;
+ /* stylelint-disable-next-line stylelint-plugin-mozilla/use-border-color-tokens */
+ border-bottom: 1px solid var(--android-dark-text-primary);
+ color: var(--android-dark-text-primary);
+ display: block;
+ width: 100%;
+ margin-top: 10px;
+ padding: 8px;
+}
+
+.android #buttonPadding {
+ flex: 1;
+}
+
+body:not(.android) #connectButtonContainer {
+ /* Use the .button-container context */
+ display: contents;
+}
+
+.android #connectButtonContainer {
+ width: 100%;
+ padding-bottom: 18px;
+ display: grid;
+}
+
+/* Be sure not to match the togglee */
+.android #connectButtonContainer button {
+ display: block;
+ width: 100%;
+ margin: 4px 0;
+ padding: 11px 30px;
+ font-size: var(--font-size-small);
+ font-weight: var(--font-weight);
+ border: none;
+ border-radius: var(--border-radius-small);
+}
+
+.android #connectButton,
+.android #tryBridgeButton,
+.android #configureButton.primary {
+ color: var(--android-dark-text-primary);
+ background-color: var(--android-dark-accents-buttons);
+}
+
+.android #configureButton {
+ order: 1;
+}
+
+.android #restartButton {
+ order: 2;
+}
+
+.android #restartButton,
+.android #cancelButton,
+.android #configureButton {
+ color: var(--android-light-text-primary);
+ background-color: var(--android-dark-background-secondary);
+}
+
+.android .onion-pattern-container {
+ display: none;
+}
diff --git a/toolkit/components/torconnect/content/aboutTorConnect.html b/toolkit/components/torconnect/content/aboutTorConnect.html
@@ -6,6 +6,7 @@
http-equiv="Content-Security-Policy"
content="default-src chrome:; object-src 'none'"
/>
+ <meta name="viewport" content="width=device-width" />
<link
rel="stylesheet"
href="chrome://global/content/torconnect/aboutTorConnect.css"
@@ -64,11 +65,7 @@
<moz-toggle id="quickstartToggle"></moz-toggle>
</div>
- <div id="connectButtonContainer" class="button-container">
- <button id="restartButton" hidden="true"></button>
- <button id="configureButton" hidden="true"></button>
- <button id="cancelButton" hidden="true"></button>
- <button id="connectButton" hidden="true" class="tor-button"></button>
+ <div class="button-container">
<label id="locationDropdownLabel" for="countries"></label>
<form id="locationDropdown" hidden="true">
<select id="regions-select">
@@ -77,11 +74,22 @@
<optgroup id="full-regions-option-group"></optgroup>
</select>
</form>
- <button
- id="tryBridgeButton"
- hidden="true"
- class="tor-button"
- ></button>
+ <span id="buttonPadding"></span>
+ <span id="connectButtonContainer">
+ <button id="restartButton" hidden="true"></button>
+ <button id="configureButton" hidden="true"></button>
+ <button id="cancelButton" hidden="true"></button>
+ <button
+ id="connectButton"
+ hidden="true"
+ class="tor-button"
+ ></button>
+ <button
+ id="tryBridgeButton"
+ hidden="true"
+ class="tor-button"
+ ></button>
+ </span>
</div>
</div>
</div>
diff --git a/toolkit/components/torconnect/content/aboutTorConnect.js b/toolkit/components/torconnect/content/aboutTorConnect.js
@@ -66,7 +66,7 @@ class AboutTorConnect {
connect: "button#connectButton",
tryBridge: "button#tryBridgeButton",
locationDropdownLabel: "#locationDropdownLabel",
- locationDropdown: "form#locationDropdown",
+ locationDropdown: "#locationDropdown",
locationDropdownSelect: "#regions-select",
},
});
@@ -757,6 +757,9 @@ class AboutTorConnect {
}
initElements(direction) {
+ const isAndroid = navigator.userAgent.includes("Android");
+ document.body.classList.toggle("android", isAndroid);
+
document.documentElement.setAttribute("dir", direction);
this.elements.connectToTorLink.addEventListener("click", () => {
