Skip to content
Snippets Groups Projects
Commit e37f4bfc authored by Pier Angelo Vendrame's avatar Pier Angelo Vendrame :jack_o_lantern: Committed by morgan
Browse files

Temporary changes to about:torconnect for Android.

We are planning of tempoorarily using about:torconnect on Android, until
the native UX is ready.
parent 86da394d
Branches
Tags
2 merge requests!1202Bug_43099: 2024 YEC Strings,!1136Bug 43085: Rebased alpha onto 128.2.0esr
......@@ -49,6 +49,7 @@ public class TorIntegrationAndroid implements BundleEventListener {
private static final String EVENT_TOR_LOGS = "GeckoView:Tor:Logs";
private static final String EVENT_SETTINGS_READY = "GeckoView:Tor:SettingsReady";
private static final String EVENT_SETTINGS_CHANGED = "GeckoView:Tor:SettingsChanged";
private static final String EVENT_SETTINGS_OPEN = "GeckoView:Tor:OpenSettings";
// Events we emit
private static final String EVENT_SETTINGS_GET = "GeckoView:Tor:SettingsGet";
......@@ -119,7 +120,8 @@ public class TorIntegrationAndroid implements BundleEventListener {
EVENT_CONNECT_ERROR,
EVENT_BOOTSTRAP_PROGRESS,
EVENT_BOOTSTRAP_COMPLETE,
EVENT_TOR_LOGS);
EVENT_TOR_LOGS,
EVENT_SETTINGS_OPEN);
}
@Override // BundleEventListener
......@@ -176,6 +178,10 @@ public class TorIntegrationAndroid implements BundleEventListener {
for (TorLogListener listener: mLogListeners) {
listener.onLog(type, msg);
}
} else if (EVENT_SETTINGS_OPEN.equals(event)) {
for (BootstrapStateChangeListener listener: mBootstrapStateListeners) {
listener.onSettingsRequested();
}
}
}
......@@ -576,6 +582,7 @@ public class TorIntegrationAndroid implements BundleEventListener {
void onBootstrapProgress(double progress, boolean hasWarnings);
void onBootstrapComplete();
void onBootstrapError(String code, String message, String phase, String reason);
void onSettingsRequested();
}
public interface TorLogListener {
......
......@@ -9,6 +9,11 @@
--onion-color: var(--card-outline-color);
}
html {
width: 100%;
height: 100%;
}
#breadcrumbs {
display: flex;
align-items: center;
......@@ -276,3 +281,143 @@ body.aboutTorConnect .title.location {
background-image: url("chrome://global/content/torconnect/connection-location.svg");
stroke: var(--in-content-warning-icon-color);
}
/* 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 {
--onion-color: var(--android-dark-text-primary);
width: 100%;
height: 100%;
box-sizing: border-box;
margin: 0;
padding: 0 24px !important;
color: var(--onion-color);
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;
}
......@@ -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,7 +65,13 @@
<moz-toggle id="quickstartToggle" label-align-after=""></moz-toggle>
</div>
<div id="connectButtonContainer" class="button-container">
<div class="button-container">
<label id="locationDropdownLabel" for="countries"></label>
<form id="locationDropdown" hidden="true">
<select id="countries"></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>
......@@ -73,15 +80,12 @@
hidden="true"
class="tor-button"
></button>
<label id="locationDropdownLabel" for="countries"></label>
<form id="locationDropdown" hidden="true">
<select id="countries"></select>
</form>
<button
id="tryBridgeButton"
hidden="true"
class="tor-button"
></button>
</span>
</div>
</div>
</div>
......
......@@ -72,8 +72,8 @@ class AboutTorConnect {
connect: "button#connectButton",
tryBridge: "button#tryBridgeButton",
locationDropdownLabel: "#locationDropdownLabel",
locationDropdown: "form#locationDropdown",
locationDropdownSelect: "form#locationDropdown select",
locationDropdown: "#locationDropdown",
locationDropdownSelect: "#locationDropdown select",
},
});
......@@ -720,6 +720,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", () => {
......
......@@ -8,6 +8,7 @@ const lazy = {};
ChromeUtils.defineESModuleGetters(lazy, {
BrowserWindowTracker: "resource:///modules/BrowserWindowTracker.sys.mjs",
EventDispatcher: "resource://gre/modules/Messaging.sys.mjs",
MoatRPC: "resource://gre/modules/Moat.sys.mjs",
TorBootstrapRequest: "resource://gre/modules/TorBootstrapRequest.sys.mjs",
TorProviderBuilder: "resource://gre/modules/TorProviderBuilder.sys.mjs",
......@@ -1183,6 +1184,12 @@ export const TorConnect = {
Further external commands and helper methods
*/
openTorPreferences() {
if (lazy.TorLauncherUtil.isAndroid) {
lazy.EventDispatcher.instance.sendRequest({
type: "GeckoView:Tor:OpenSettings",
});
return;
}
const win = lazy.BrowserWindowTracker.getTopWindow();
win.switchToTabHavingURI("about:preferences#connection", true);
},
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment