Temporary changes to about:torconnect for Android. (392f40e2) · Commits · The Tor Project / Applications / Tor Browser

toolkit/components/torconnect/content/aboutTorConnect.css

+148 −0

Original line number	Diff line number	Diff line
		@@ -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;
		@@ -279,3 +284,146 @@ 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: 14px;
		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: 22px;
		line-height: 28px;
		}

		.android h1 {
		font-weight: normal;
		font-size: 100%;
		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;
		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: 14px;
		font-weight: 500;
		border: none;
		border-radius: 4px;
		}

		.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;
		}

toolkit/components/torconnect/content/aboutTorConnect.html

+18 −14

Original line number	Diff line number	Diff line
		@@ -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,15 +65,7 @@
		<moz-toggle id="quickstartToggle" label-align-after=""></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">
		@@ -81,11 +74,22 @@
		<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>
		</div>
		</div>
		</div>

toolkit/components/torconnect/content/aboutTorConnect.js

+4 −1

Original line number	Diff line number	Diff line
		@@ -67,7 +67,7 @@ class AboutTorConnect {
		connect: "button#connectButton",
		tryBridge: "button#tryBridgeButton",
		locationDropdownLabel: "#locationDropdownLabel",
		locationDropdown: "form#locationDropdown",
		locationDropdown: "#locationDropdown",
		locationDropdownSelect: "#regions-select",
		},
		});
		@@ -759,6 +759,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", () => {