Temporary changes to about:torconnect for Android.

We are planning of tempoorarily using about:torconnect on Android, until
the native UX is ready.

toolkit/components/torconnect/content/aboutTorConnect.css

@@ -10,6 +10,11 @@
   --onion-radius: 75px;
 }
 
+html {
+  width: 100%;
+  height: 100%;
+}
+
 input[type="checkbox"]:focus, select:focus {
   outline:  none!important;
   box-shadow: 0 0 0 3px var(--purple-30) !important;
@@ -359,3 +364,137 @@ body {
   /* svg source is 6 onions wide and 2 onions tall */
   background-size: calc(6 * 2 * var(--onion-radius)) calc(2 * 2 * var(--onion-radius));;
 }
+
+: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;
+}
+
+.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

@@ -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"
@@ -59,16 +60,19 @@
           <label id="quickstartCheckboxLabel" for="quickstartCheckbox"></label>
         </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" class="primary" hidden="true"></button>
+        <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>
+            <button id="connectButton" class="primary" hidden="true"></button>
             <button id="tryBridgeButton" class="primary" hidden="true"></button>
+          </span>
         </div>
       </div>
     </div>

toolkit/components/torconnect/content/aboutTorConnect.js

@@ -70,8 +70,8 @@ class AboutTorConnect {
       connect: "button#connectButton",
       tryBridge: "button#tryBridgeButton",
       locationDropdownLabel: "#locationDropdownLabel",
-      locationDropdown: "form#locationDropdown",
-      locationDropdownSelect: "form#locationDropdown select",
+      locationDropdown: "#locationDropdown",
+      locationDropdownSelect: "#locationDropdown select",
     },
   });
 
@@ -666,6 +666,9 @@ class AboutTorConnect {
   }
 
   initElements(direction) {
+    const isAndroid = navigator.userAgent.indexOf("Android") !== -1;
+    document.body.classList.toggle("android", isAndroid);
+
     document.documentElement.setAttribute("dir", direction);
 
     this.elements.connectToTorLink.addEventListener("click", event => {