commit 9f26e2a434251442c1210649c78e3096e3a6f875
parent 97167a20358c0bcfe942125668f45171c6b7e7c0
Author: clairehurst <clairehurst@torproject.org>
Date: Thu, 15 Jan 2026 17:08:04 -0700
fixup! Temporary changes to about:torconnect for Android.
This reverts commit aed2663396d9fe060829290ac9e64774131ac1c3.
Diffstat:
3 files changed, 11 insertions(+), 171 deletions(-)
diff --git a/toolkit/components/torconnect/content/aboutTorConnect.css b/toolkit/components/torconnect/content/aboutTorConnect.css
@@ -4,11 +4,6 @@
@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;
@@ -275,147 +270,3 @@ 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,7 +6,6 @@
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"
@@ -65,7 +64,11 @@
<moz-toggle id="quickstartToggle"></moz-toggle>
</div>
- <div class="button-container">
+ <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>
<label id="locationDropdownLabel" for="countries"></label>
<form id="locationDropdown" hidden="true">
<select id="regions-select">
@@ -74,22 +77,11 @@
<optgroup id="full-regions-option-group"></optgroup>
</select>
</form>
- <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>
+ <button
+ id="tryBridgeButton"
+ hidden="true"
+ class="tor-button"
+ ></button>
</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: "#locationDropdown",
+ locationDropdown: "form#locationDropdown",
locationDropdownSelect: "#regions-select",
},
});
@@ -757,9 +757,6 @@ 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", () => {
