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

Bug 41826 - Tweak tor connect status styling in titlebar and connection
preferences.

browser/base/content/navigator-toolbox.inc.xhtml

@@ -94,8 +94,7 @@
       <hbox class="private-browsing-indicator"/>
 
       <html:div id="tor-connect-titlebar-status" role="status">
-        <html:img id="tor-connect-titlebar-status-icon"
-                  alt=""
+        <html:img alt=""
                   src="chrome://browser/content/torconnect/tor-not-connected-to-connected-animated.svg" />
         <html:span id="tor-connect-titlebar-status-label"></html:span>
       </html:div>

browser/components/torconnect/content/aboutTorConnect.css

@@ -70,8 +70,9 @@ input[type="checkbox"]:focus, select:focus {
   display: inline list-item;
   height: 16px;
   list-style-position: inside;
+  -moz-context-properties: fill, stroke;
   fill: currentColor;
-  -moz-context-properties: fill;
+  stroke: currentColor;
 }
 
 .breadcrumb-item.active {
@@ -315,6 +316,7 @@ body {
   -moz-context-properties: stroke, fill, fill-opacity;
   fill-opacity: var(--onion-opacity);
   fill: var(--onion-color);
+  stroke: var(--onion-color);
 }
 
 .title.offline {

browser/components/torconnect/content/tor-connect-broken.svg

@@ -7,5 +7,5 @@
   <path d="M10.5086 11.2146L11.3423 12.0483C10.8375 12.4651 10.2534 12.7892 9.616 12.9947V11.744C9.93702 11.6057 10.2367 11.4271 10.5086 11.2146Z" fill="context-fill" fill-opacity="context-fill-opacity" />
   <path d="M4.78492 5.49092L3.95137 4.65737C3.20058 5.56555 2.74933 6.73033 2.74933 8C2.74933 10.336 4.27467 12.3147 6.384 12.9947V11.744C4.936 11.12 3.92267 9.67733 3.92267 8C3.92267 7.05341 4.24455 6.18259 4.78492 5.49092Z" fill="context-fill" fill-opacity="context-fill-opacity" />
   <path d="M7.16918 7.8752L8.12478 8.83079C8.08406 8.83686 8.04238 8.84 7.99997 8.84C7.53605 8.84 7.15997 8.46392 7.15997 8C7.15997 7.95759 7.16312 7.91592 7.16918 7.8752Z" fill="context-fill" fill-opacity="context-fill-opacity" />
-  <path d="M1.15533 1.85684L14.0906 14.7921C14.3511 15.0527 14.3511 15.4751 14.0906 15.7357L14.0906 15.7357C13.83 15.9963 13.4075 15.9963 13.1469 15.7357L0.211679 2.8005C-0.048903 2.53992 -0.0489032 2.11743 0.211682 1.85684C0.472265 1.59626 0.894753 1.59626 1.15533 1.85684Z" fill="context-fill" fill-opacity="context-fill-opacity" />
+  <path d="M1.15533 1.85684L14.0906 14.7921C14.3511 15.0527 14.3511 15.4751 14.0906 15.7357L14.0906 15.7357C13.83 15.9963 13.4075 15.9963 13.1469 15.7357L0.211679 2.8005C-0.048903 2.53992 -0.0489032 2.11743 0.211682 1.85684C0.472265 1.59626 0.894753 1.59626 1.15533 1.85684Z" fill="context-stroke" fill-opacity="context-fill-opacity" />
 </svg>

browser/components/torconnect/content/tor-not-connected-to-connected-animated.svg

 <svg width="176" height="16" viewBox="0 0 176 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M 3.32745,2.13475 C 4.60904,1.11241 6.23317,0.50133 8,0.50133 c 4.1414,0 7.4987,3.35732 7.4987,7.49867 0,1.7671 -0.6111,3.3911 -1.6335,4.6725 L 13.0315,11.8388 C 13.8448,10.7747 14.328,9.4444 14.328,8 14.328,4.504 11.496,1.67199 8,1.67199 c -1.4438,0 -2.77436,0.48303 -3.83895,1.29636 z" fill="context-fill" />
-  <path d="M 6.56042,5.36771 7.44805,6.25534 C 7.6222,6.20033 7.80763,6.17067 8,6.17067 c 1.0107,0 1.8294,0.81867 1.8294,1.82933 0,0.1924 -0.0297,0.3779 -0.0847,0.552 l 0.8877,0.8877 C 10.8667,9.0122 11,8.5216 11,8 11,6.34399 9.656,5 8,5 7.47846,5 6.98784,5.13332 6.56042,5.36771 Z" fill="context-fill" />
-  <path d="M 12.2609,11.0682 C 12.8837,10.2055 13.2507,9.1457 13.2507,8 c 0,-2.89867 -2.352,-5.25067 -5.25073,-5.25067 -1.14511,0 -2.20491,0.36706 -3.06809,0.98988 l 0.84285,0.84286 c 0.6397,-0.41709 1.40395,-0.6594 2.22524,-0.6594 2.25333,0 4.07733,1.82399 4.07733,4.07733 0,0.8206 -0.2425,1.585 -0.6598,2.2248 z" fill="context-fill" />
-  <path fill-rule="evenodd" d="M 14.0906,14.7921 1.15536,1.85684 c -0.26058,-0.26058 -0.68307,-0.26058 -0.94365,0 -0.26059,0.26059 -0.26059,0.68308 -1e-5,0.94366 L 1.56286,4.15166 C 0.88882,5.2767 0.50135,6.59311 0.50135,8 c 0,3.5867 2.51734,6.584 5.88267,7.3227 0.352,0.0773 0.70932,0.1306 1.07733,0.1546 v -5.4272 l 1.07735,1.0774 v 4.3498 C 8.9067,15.4533 9.264,15.4 9.616,15.3227 c 0.7992,-0.1755 1.5506,-0.4783 2.2318,-0.8861 l 1.2991,1.2991 c 0.2606,0.2606 0.6831,0.2606 0.9437,0 0.2606,-0.2606 0.2606,-0.683 0,-0.9436 z m -3.1017,-1.2144 -0.804,-0.804 c -0.1841,0.0843 -0.374,0.1582 -0.5689,0.221 v -0.7899 1.9125 c 0.4826,-0.1267 0.9427,-0.309 1.3729,-0.5396 z M 5.02472,7.6135 4.12828,6.71707 C 3.99487,7.1204 3.92268,7.5517 3.92268,8 c 0,1.6773 1.01333,3.12 2.46133,3.744 v 1.2507 C 4.27468,12.3147 2.74934,10.336 2.74934,8 c 0,-0.78002 0.17031,-1.52045 0.47575,-2.18611 L 2.42112,5.00992 C 1.94312,5.90024 1.67202,6.91834 1.67202,8 c 0,2.9387 2,5.4053 4.712,6.1173 V 10.528 C 5.55202,9.9947 5.00002,9.0613 5.00002,8 c 0,-0.1309 0.0084,-0.2599 0.0247,-0.3865 z" fill="context-fill" />
+  <!-- First frame, same as tor-connect-broken.svg -->
+  <path d="M3.32745 2.13476C4.60904 1.11242 6.23317 0.501331 8 0.501331C12.1414 0.501331 15.4987 3.85866 15.4987 8C15.4987 9.76709 14.8876 11.3911 13.8652 12.6725L13.0315 11.8388C13.8448 10.7747 14.328 9.44438 14.328 8C14.328 4.50401 11.496 1.672 8 1.672C6.5562 1.672 5.22564 2.15503 4.16105 2.96836L3.32745 2.13476Z" fill="context-fill" />
+  <path d="M2.35636 3.06235C1.20135 4.38144 0.501343 6.10899 0.501343 8C0.501343 11.5867 3.01868 14.584 6.38401 15.3227C6.73601 15.4 7.09333 15.4533 7.46134 15.4773V9.74933C6.71467 9.52 6.17068 8.82401 6.17068 8C6.17068 7.67615 6.25474 7.37202 6.40223 7.10822L5.55539 6.26138C5.20574 6.75196 5.00001 7.3521 5.00001 8C5.00001 9.06133 5.55201 9.99466 6.38401 10.528V14.1173C3.67201 13.4053 1.67201 10.9387 1.67201 8C1.67201 6.43179 2.24187 4.99718 3.18588 3.89187L2.35636 3.06235Z" fill="context-fill" />
+  <path d="M6.56041 5.36771L7.44804 6.25534C7.62219 6.20033 7.80762 6.17067 8.00001 6.17067C9.01067 6.17067 9.82934 6.98934 9.82934 8C9.82934 8.19242 9.79968 8.37785 9.7447 8.552L10.6324 9.43967C10.8667 9.01221 11 8.52156 11 8C11 6.34399 9.65601 5 8.00001 5C7.47845 5 6.98783 5.13332 6.56041 5.36771Z" fill="context-fill" />
+  <path d="M9.73889 10.4449L8.89214 9.59813C8.78095 9.66036 8.6626 9.71127 8.53868 9.74933V15.4773C8.90668 15.4533 9.26401 15.4 9.61601 15.3227C10.8695 15.0475 12.0054 14.459 12.9374 13.6434L12.1076 12.8136C11.396 13.4207 10.5481 13.8726 9.61601 14.1173V10.528C9.65768 10.5013 9.69865 10.4736 9.73889 10.4449Z" fill="context-fill" />
+  <path d="M12.2609 11.0682C12.8837 10.2055 13.2507 9.14573 13.2507 8C13.2507 5.10133 10.8987 2.74933 7.99999 2.74933C6.85488 2.74933 5.79508 3.11639 4.9319 3.73921L5.77475 4.58207C6.41445 4.16498 7.1787 3.92267 7.99999 3.92267C10.2533 3.92267 12.0773 5.74666 12.0773 8C12.0773 8.82056 11.8348 9.58497 11.4175 10.2248L12.2609 11.0682Z" fill="context-fill" />
+  <path d="M10.5086 11.2146L11.3423 12.0483C10.8375 12.4651 10.2534 12.7892 9.616 12.9947V11.744C9.93702 11.6057 10.2367 11.4271 10.5086 11.2146Z" fill="context-fill" />
+  <path d="M4.78492 5.49092L3.95137 4.65737C3.20058 5.56555 2.74933 6.73033 2.74933 8C2.74933 10.336 4.27467 12.3147 6.384 12.9947V11.744C4.936 11.12 3.92267 9.67733 3.92267 8C3.92267 7.05341 4.24455 6.18259 4.78492 5.49092Z" fill="context-fill" />
+  <path d="M7.16918 7.8752L8.12478 8.83079C8.08406 8.83686 8.04238 8.84 7.99997 8.84C7.53605 8.84 7.15997 8.46392 7.15997 8C7.15997 7.95759 7.16312 7.91592 7.16918 7.8752Z" fill="context-fill" />
+  <path d="M1.15533 1.85684L14.0906 14.7921C14.3511 15.0527 14.3511 15.4751 14.0906 15.7357L14.0906 15.7357C13.83 15.9963 13.4075 15.9963 13.1469 15.7357L0.211679 2.8005C-0.048903 2.53992 -0.0489032 2.11743 0.211682 1.85684C0.472265 1.59626 0.894753 1.59626 1.15533 1.85684Z" fill="context-stroke" />
+  <!-- End of first frame. -->
   <path d="m 26.5604,5.36771 0.8877,0.88763 C 27.6222,6.20033 27.8076,6.17067 28,6.17067 c 1.0107,0 1.8294,0.81867 1.8294,1.82933 0,0.1924 -0.0297,0.3779 -0.0847,0.552 l 0.8877,0.8877 C 30.8667,9.0122 31,8.5216 31,8 31,6.34399 29.656,5 28,5 27.4785,5 26.9878,5.13332 26.5604,5.36771 Z" fill="context-fill" />
   <path d="M 32.2609,11.0682 C 32.8837,10.2055 33.2507,9.1457 33.2507,8 33.2507,5.10133 30.8987,2.74933 28,2.74933 c -1.1451,0 -2.2049,0.36706 -3.0681,0.98988 l 0.8428,0.84286 c 0.6397,-0.41709 1.404,-0.6594 2.2253,-0.6594 2.2533,0 4.0773,1.82399 4.0773,4.07733 0,0.8206 -0.2425,1.585 -0.6598,2.2248 z" fill="context-fill" />
   <path fill-rule="evenodd" d="M 25.1667,1.05506 C 26.0409,0.69808 26.9975,0.50133 28,0.50133 c 4.1414,0 7.4987,3.35732 7.4987,7.49867 0,1.7671 -0.6111,3.3911 -1.6335,4.6725 L 33.0315,11.8388 C 33.8448,10.7747 34.328,9.4444 34.328,8 34.328,4.504 31.496,1.67199 28,1.67199 c -1.4438,0 -2.7744,0.48303 -3.8389,1.29636 L 24.1597,2.96703 c -0.3568,0.27263 -0.6838,0.58239 -0.9752,0.9235 l 0.0014,0.00134 C 22.2419,4.99718 21.672,6.43179 21.672,8 c 0,1.7592 0.7167,3.3492 1.8739,4.4949 0.473,0.4681 1.0196,0.862 1.6208,1.1628 0.385,0.1928 0.7924,0.3481 1.2173,0.4596 V 10.528 C 25.552,9.9947 25,9.0613 25,8 25,7.8685 25.0085,7.7389 25.0249,7.6118 L 24.1287,6.71563 C 23.995,7.11937 23.9227,7.5512 23.9227,8 c 0,1.6773 1.0133,3.12 2.4613,3.744 v 1.2507 C 24.2747,12.3147 22.7493,10.336 22.7493,8 c 0,-0.78053 0.1706,-1.52142 0.4764,-2.18742 L 22.8632,5.45009 c -0.2597,-0.2597 -0.2597,-0.68075 0,-0.94045 0.2597,-0.2597 0.6808,-0.2597 0.9405,0 L 34.0943,14.8002 c 0.2597,0.2597 0.2597,0.6808 0,0.9405 -0.2597,0.2597 -0.6808,0.2597 -0.9405,0 L 31.849,14.4359 c -0.6815,0.4082 -1.4333,0.7112 -2.233,0.8868 -0.352,0.0773 -0.7093,0.1306 -1.0773,0.1546 v -4.3518 l -1.0774,-1.0773 v 5.4291 C 27.0933,15.4533 26.736,15.4 26.384,15.3227 24.9758,15.0136 23.7161,14.309 22.7272,13.3313 21.3519,11.9723 20.5,10.0852 20.5,7.9987 20.5,4.85935 22.4292,2.17055 25.1667,1.05319 Z M 29.616,14.1173 v -1.9144 0.7918 c 0.1953,-0.063 0.3857,-0.1371 0.5702,-0.2216 l 0.804,0.804 c -0.4306,0.2309 -0.8911,0.4134 -1.3742,0.5402 z" fill="context-fill" />

browser/components/torconnect/content/torConnectTitlebarStatus.css

@@ -10,9 +10,10 @@
   white-space: nowrap;
 }
 
-#tor-connect-titlebar-status-icon {
-  -moz-context-properties: fill;
+#tor-connect-titlebar-status img {
+  -moz-context-properties: fill, stroke;
   fill: currentColor;
+  stroke: currentColor;
   width: 16px;
   height: 16px;
   object-fit: none;
@@ -24,28 +25,31 @@
   object-position: var(--tor-not-connected-offset);
 }
 
-#tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked:not(
-  .tor-connect-status-connected
-) {
-  fill: #c50042;
+#tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {
+  /* NOTE: context-stroke is only used for the first "frame" for the slash. When
+   * we assign the potentially-blocked class, we do *not* expect to be connected
+   * at the same time, so we only expect this first frame to be visible in this
+   * state. */
+  stroke: #c50042;
 }
 
 @media (prefers-color-scheme: dark) {
-  #tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked:not(
-    .tor-connect-status-connected
-  ){
-    fill: #ff9aa2;
+  #tor-connect-titlebar-status.tor-connect-status-potentially-blocked img {
+    stroke: #ff9aa2;
   }
 }
 
-#tor-connect-titlebar-status-icon.tor-connect-status-connected {
-  fill: var(--purple-60);
+#tor-connect-titlebar-status.tor-connect-status-connected img {
   object-position: var(--tor-connected-offset);
 }
 
+#tor-connect-titlebar-status.tor-connect-status-connected {
+  color: var(--purple-60);
+}
+
 @media (prefers-color-scheme: dark) {
-  #tor-connect-titlebar-status-icon.tor-connect-status-connected {
-    fill: var(--purple-30);
+  #tor-connect-titlebar-status.tor-connect-status-connected {
+    color: var(--purple-30);
   }
 }
 
@@ -60,8 +64,11 @@
 }
 
 @media (prefers-reduced-motion: no-preference) {
-  #tor-connect-titlebar-status-icon.tor-connect-status-connected {
-    transition: fill 1000ms;
+  #tor-connect-titlebar-status.tor-connect-status-connected {
+    transition: color 1000ms;
+  }
+
+  #tor-connect-titlebar-status.tor-connect-status-connected img {
     animation-name: onion-not-connected-to-connected;
     animation-delay: 200ms;
     animation-fill-mode: both;

browser/components/torconnect/content/torConnectTitlebarStatus.js

@@ -16,12 +16,6 @@ var gTorConnectTitlebarStatus = {
    * @type {Element}
    */
   label: null,
-  /**
-   * The status icon.
-   *
-   * @type {Element}
-   */
-  icon: null,
 
   /**
    * Initialize the component.
@@ -34,7 +28,6 @@ var gTorConnectTitlebarStatus = {
     this._strings = TorStrings.torConnect;
 
     this.node = document.getElementById("tor-connect-titlebar-status");
-    this.icon = document.getElementById("tor-connect-titlebar-status-icon");
     this.label = document.getElementById("tor-connect-titlebar-status-label");
     // The title also acts as an accessible name for the role="status".
     this.node.setAttribute("title", this._strings.titlebarStatusName);
@@ -91,8 +84,8 @@ var gTorConnectTitlebarStatus = {
         break;
     }
     this.label.textContent = this._strings[textId];
-    this.icon.classList.toggle("tor-connect-status-connected", connected);
-    this.icon.classList.toggle(
+    this.node.classList.toggle("tor-connect-status-connected", connected);
+    this.node.classList.toggle(
       "tor-connect-status-potentially-blocked",
       potentiallyBlocked
     );