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

HTML-ize about:torconnect. Changed file extension, updated the HTML tag, removed short-tags on tags that are expected to have a closing tag. Also, removed the preprocessor and moved the onion pattern to this commit, since it is used only here.

fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser
1ad1d839 · Pier Angelo Vendrame · 6a649d7f · 1ad1d839 · 1ad1d839 · 1ad1d839
Verified Commit 1ad1d839 authored Dec 5, 2023 by Pier Angelo Vendrame
--- a/docshell/base/nsAboutRedirector.cpp
+++ b/docshell/base/nsAboutRedirector.cpp
@@ -169,7 +169,7 @@ static const RedirEntry kRedirMap[] = {
 #endif
    {"telemetry", "chrome://global/content/aboutTelemetry.xhtml",
     nsIAboutModule::ALLOW_SCRIPT | nsIAboutModule::IS_SECURE_CHROME_UI},
-    {"torconnect", "chrome://global/content/torconnect/aboutTorConnect.xhtml",
+    {"torconnect", "chrome://global/content/torconnect/aboutTorConnect.html",
     nsIAboutModule::URI_SAFE_FOR_UNTRUSTED_CONTENT |
         nsIAboutModule::URI_CAN_LOAD_IN_CHILD | nsIAboutModule::ALLOW_SCRIPT |
         nsIAboutModule::HIDE_FROM_ABOUTABOUT |


--- a/toolkit/components/torconnect/content/aboutTorConnect.css
+++ b/toolkit/components/torconnect/content/aboutTorConnect.css
@@ -330,3 +330,32 @@ body {
  background-image: url("chrome://global/content/torconnect/connection-location.svg");
  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));;
+}
--- a/toolkit/components/torconnect/content/aboutTorConnect.xhtml
+++ b/toolkit/components/torconnect/content/aboutTorConnect.xhtml
 <!-- Copyright (c) 2021, The Tor Project, Inc. -->
 <!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html>
  <head>
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src chrome:; object-src 'none'"
    />
-    <link
-      rel="stylesheet"
-      href="chrome://global/skin/onionPattern.css"
-      type="text/css"
-      media="all"
-    />
    <link
      rel="stylesheet"
      href="chrome://global/content/torconnect/aboutTorConnect.css"
@@ -21,48 +15,48 @@
  </head>
  <body>
    <div id="progressBar">
-      <div id="progressBackground" />
-      <div id="progressSolid" />
+      <div id="progressBackground"></div>
+      <div id="progressSolid"></div>
    </div>
    <div id="connectPageContainer" class="container">
      <div id="breadcrumbs" class="hidden">
        <span id="connect-to-tor" class="breadcrumb-item">
-          <span id="connect-to-tor-icon" class="breadcrumb-icon" />
-          <span class="breadcrumb-label" />
+          <span id="connect-to-tor-icon" class="breadcrumb-icon"></span>
+          <span class="breadcrumb-label"></span>
        </span>
        <span
          id="connection-assist-separator"
          class="breadcrumb-separator breadcrumb-icon"
-        />
+        ></span>
        <span id="connection-assist" class="breadcrumb-item">
-          <span id="connection-assist-icon" class="breadcrumb-icon" />
-          <span class="breadcrumb-label" />
+          <span id="connection-assist-icon" class="breadcrumb-icon"></span>
+          <span class="breadcrumb-label"></span>
        </span>
        <span
          id="try-bridge-separator"
          class="breadcrumb-separator breadcrumb-icon"
-        />
+        ></span>
        <span id="try-bridge" class="breadcrumb-item">
-          <span id="try-bridge-icon" class="breadcrumb-icon" />
-          <span class="breadcrumb-label" />
+          <span id="try-bridge-icon" class="breadcrumb-icon"></span>
+          <span class="breadcrumb-label"></span>
        </span>
      </div>
      <div id="text-container">
        <div class="title">
-          <h1 class="title-text" />
+          <h1 class="title-text"></h1>
        </div>
        <div id="connectLongContent">
-          <p id="connectLongContentText" />
+          <p id="connectLongContentText"></p>
        </div>
        <div id="connectShortDesc">
-          <p id="connectShortDescText" />
+          <p id="connectShortDescText"></p>
        </div>

        <button id="viewLogButton"></button>

        <div id="quickstartContainer">
          <input id="quickstartCheckbox" type="checkbox" />
-          <label id="quickstartCheckboxLabel" for="quickstartCheckbox" />
+          <label id="quickstartCheckboxLabel" for="quickstartCheckbox"></label>
        </div>

        <div id="connectButtonContainer" class="button-container">
@@ -70,7 +64,7 @@
          <button id="configureButton" hidden="true"></button>
          <button id="cancelButton" hidden="true"></button>
          <button id="connectButton" class="primary" hidden="true"></button>
-          <label id="locationDropdownLabel" for="countries" />
+          <label id="locationDropdownLabel" for="countries"></label>
          <form id="locationDropdown" hidden="true">
            <select id="countries"></select>
          </form>
@@ -78,7 +72,9 @@
        </div>
      </div>
    </div>
-#include ../../../themes/shared/onionPattern.inc.xhtml
+    <div class="onion-pattern-container">
+      <div class="onion-pattern-crop"></div>
+    </div>
+    <script src="chrome://global/content/torconnect/aboutTorConnect.js"></script>
  </body>
-  <script src="chrome://global/content/torconnect/aboutTorConnect.js" />
 </html>
--- a/toolkit/components/torconnect/content/onion-pattern.svg
+++ b/toolkit/components/torconnect/content/onion-pattern.svg
--- a/toolkit/components/torconnect/jar.mn
+++ b/toolkit/components/torconnect/jar.mn
@@ -3,12 +3,13 @@ toolkit.jar:
    content/global/torconnect/torConnectTitlebarStatus.js                    (content/torConnectTitlebarStatus.js)
    content/global/torconnect/torConnectTitlebarStatus.css                   (content/torConnectTitlebarStatus.css)
    content/global/torconnect/aboutTorConnect.css                            (content/aboutTorConnect.css)
-*   content/global/torconnect/aboutTorConnect.xhtml                          (content/aboutTorConnect.xhtml)
+    content/global/torconnect/aboutTorConnect.html                           (content/aboutTorConnect.html)
    content/global/torconnect/aboutTorConnect.js                             (content/aboutTorConnect.js)
    content/global/torconnect/arrow-right.svg                                (content/arrow-right.svg)
    content/global/torconnect/bridge.svg                                     (content/bridge.svg)
    content/global/torconnect/connection-failure.svg                         (content/connection-failure.svg)
    content/global/torconnect/connection-location.svg                        (content/connection-location.svg)
+    content/global/torconnect/onion-pattern.svg                              (content/onion-pattern.svg)
    content/global/torconnect/tor-connect.svg                                (content/tor-connect.svg)
    content/global/torconnect/tor-not-connected-to-connected-animated.svg    (content/tor-not-connected-to-connected-animated.svg)
    content/global/torconnect/tor-connect-broken.svg                         (content/tor-connect-broken.svg)