fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser

Bug 41621: Tweak about:torconnect style.

toolkit/components/torconnect/content/aboutTorConnect.css

@@ -7,7 +7,6 @@
 :root {
   --onion-opacity: 1;
   --onion-color: var(--card-outline-color);
-  --onion-radius: 75px;
 }
 
 html {
@@ -236,34 +235,47 @@ input[type="checkbox"]:not(:disabled):active:checked {
   }
 }
 
-#progressBar {
+#progressBar:not([hidden]) {
   position: fixed;
-  top: 0;
-  inset-inline-start: 0;
-  width: 0%;
-  padding: 0;
-  margin: 0;
-  animation: progressAnimation 5s ease infinite;
+  inset-block-start: 0;
+  inset-inline: 0;
+  display: grid;
+  --progress-percent: 0%;
+  --progress-animation: progressAnimation 5s ease infinite;
+  --progress-bar-height: 7px;
+}
+
+#progressBar > * {
+  grid-area: 1 / 1;
+}
+
+#progressBarBackground {
+  width: 100%;
+  height: var(--progress-bar-height);
+  background: var(--in-content-box-info-background);
 }
 
 #progressBackground {
+  z-index: 1;
+  width: var(--progress-percent);
   height: 66px;
-  margin-top: -26px;
+  margin-block-start: -26px;
   background-image:
     linear-gradient(var(--progressbar-shadow-start), var(--in-content-page-background) 100%),
     var(--progressbar-gradient);
-  background-position: inherit;
+  animation: var(--progress-animation);
   filter: blur(5px);
   border-end-end-radius: 33px;
 }
 
 #progressSolid {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  height: 7px;
+  z-index: 2;
+  width: var(--progress-percent);
+  height: var(--progress-bar-height);
+  border-start-end-radius: calc(var(--progress-bar-height) / 2);
+  border-end-end-radius: calc(var(--progress-bar-height) / 2);
   background-image: var(--progressbar-gradient);
-  background-position: inherit;
+  animation: var(--progress-animation);
 }
 
 #progressBackground, #progressSolid {
@@ -300,8 +312,8 @@ input[type="checkbox"]:not(:disabled):active:checked {
   max-width: 45em;
 }
 
-#quickstartCheckbox, #quickstartCheckboxLabel {
-  vertical-align: middle;
+#quickstartToggle {
+  width: max-content;
 }
 
 /* mirrors p element spacing */
@@ -309,18 +321,25 @@ input[type="checkbox"]:not(:disabled):active:checked {
   margin: 1em 0;
 }
 
-body {
-  padding: 0px !important;
+body.aboutTorConnect {
   justify-content: space-between;
-  background-color: var(--in-content-page-background);
+  background:
+    local
+    url("chrome://global/content/torconnect/onion-pattern.svg")
+    center bottom
+    repeat-x;
+  /* Always reserve 150px for the background, plus 15px padding with content. */
+  padding-block-end: 175px;
 }
 
-.title {
+body.aboutTorConnect .title {
   background-image: url("chrome://global/content/torconnect/tor-connect.svg");
   -moz-context-properties: stroke, fill, fill-opacity;
   fill-opacity: var(--onion-opacity);
   fill: var(--onion-color);
   stroke: var(--onion-color);
+  /* Make sure there is no padding between the title and #breadcrumbs. */
+  padding-block-start: 0;
 }
 
 .title.offline {
@@ -336,35 +355,6 @@ body {
   stroke: var(--warning-color);
 }
 
-.onion-pattern-container {
-  flex: auto;           /* grow to consume remaining space on the page */
-  display: flex;
-  margin: 0 auto;
-  width: 100%;
-  /* two onions tall, 4x the radius */
-  height: calc(4 * var(--onion-radius));
-  max-height: calc(4 * var(--onion-radius));
-  min-height: calc(4 * var(--onion-radius));
-  direction: ltr;
-}
-
-.onion-pattern-crop {
-  height: 100%;
-  width: 100%;
-
-  -moz-context-properties: fill;
-  fill: var(--onion-color, currentColor);
-  /* opacity of the entire div, not context-opacity */
-  opacity: var(--onion-opacity, 1);
-
-  background-image: url("chrome://global/content/torconnect/onion-pattern.svg");
-  background-repeat: repeat;
-  background-attachment: local;
-  background-position: center;
-  /* 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;

toolkit/components/torconnect/content/aboutTorConnect.html

@@ -6,18 +6,24 @@
       http-equiv="Content-Security-Policy"
       content="default-src chrome:; object-src 'none'"
     />
-    <meta name="viewport" content="width=device-width">
+    <meta name="viewport" content="width=device-width" />
     <link
       rel="stylesheet"
       href="chrome://global/content/torconnect/aboutTorConnect.css"
       type="text/css"
       media="all"
     />
+
+    <script
+      type="module"
+      src="chrome://global/content/elements/moz-toggle.mjs"
+    ></script>
   </head>
-  <body>
-    <div id="progressBar">
-      <div id="progressBackground"></div>
+  <body class="aboutTorConnect">
+    <div id="progressBar" hidden="hidden">
       <div id="progressSolid"></div>
+      <div id="progressBackground"></div>
+      <div id="progressBarBackground"></div>
     </div>
     <div id="connectPageContainer" class="container">
       <div id="breadcrumbs" class="hidden">
@@ -56,8 +62,7 @@
         <button id="viewLogButton"></button>
 
         <div id="quickstartContainer">
-          <input id="quickstartCheckbox" type="checkbox" />
-          <label id="quickstartCheckboxLabel" for="quickstartCheckbox"></label>
+          <moz-toggle id="quickstartToggle" label-align-after=""></moz-toggle>
         </div>
 
         <div class="button-container">
@@ -76,9 +81,6 @@
         </div>
       </div>
     </div>
-    <div class="onion-pattern-container">
-      <div class="onion-pattern-crop"></div>
-    </div>
     <script src="chrome://global/content/torconnect/aboutTorConnect.js"></script>
   </body>
 </html>

toolkit/components/torconnect/content/aboutTorConnect.js

@@ -60,8 +60,7 @@ class AboutTorConnect {
     },
     quickstart: {
       container: "div#quickstartContainer",
-      checkbox: "input#quickstartCheckbox",
-      label: "label#quickstartCheckboxLabel",
+      toggle: "#quickstartToggle",
     },
     buttons: {
       restart: "button#restartButton",
@@ -116,10 +115,7 @@ class AboutTorConnect {
     quickstartContainer: document.querySelector(
       this.selectors.quickstart.container
     ),
-    quickstartCheckbox: document.querySelector(
-      this.selectors.quickstart.checkbox
-    ),
-    quickstartLabel: document.querySelector(this.selectors.quickstart.label),
+    quickstartToggle: document.querySelector(this.selectors.quickstart.toggle),
     restartButton: document.querySelector(this.selectors.buttons.restart),
     configureButton: document.querySelector(this.selectors.buttons.configure),
     cancelButton: document.querySelector(this.selectors.buttons.cancel),
@@ -310,7 +306,10 @@ class AboutTorConnect {
     this.elements.progressDescription.textContent = description;
     if (visible) {
       this.show(this.elements.progressMeter);
-      this.elements.progressMeter.style.width = `${percent}%`;
+      this.elements.progressMeter.style.setProperty(
+        "--progress-percent",
+        `${percent}%`
+      );
     } else {
       this.hide(this.elements.progressMeter);
     }
@@ -407,7 +406,7 @@ class AboutTorConnect {
   updateUI(state) {
     // calls update_$state()
     this[`update_${state.State}`](state);
-    this.elements.quickstartCheckbox.checked = state.QuickStartEnabled;
+    this.elements.quickstartToggle.pressed = state.QuickStartEnabled;
   }
 
   /* Per-state updates */
@@ -762,12 +761,14 @@ class AboutTorConnect {
       RPMSendAsyncMessage("torconnect:view-tor-logs");
     });
 
-    this.elements.quickstartCheckbox.addEventListener("change", () => {
-      const quickstart = this.elements.quickstartCheckbox.checked;
+    this.elements.quickstartToggle.addEventListener("toggle", () => {
+      const quickstart = this.elements.quickstartToggle.pressed;
       RPMSendAsyncMessage("torconnect:set-quickstart", quickstart);
     });
-    this.elements.quickstartLabel.textContent =
-      TorStrings.settings.quickstartCheckbox;
+    this.elements.quickstartToggle.setAttribute(
+      "label",
+      TorStrings.settings.quickstartCheckbox
+    );
 
     this.elements.restartButton.textContent =
       TorStrings.torConnect.restartTorBrowser;