richard pushed to branch tor-browser-102.12.0esr-12.5-1 at The Tor Project / Applications / Tor Browser

Commits: 01f3492c by Henry Wilkes at 2023-06-07T20:39:37+01:00 fixup! Bug 27476: Implement about:torconnect captive portal within Tor Browser

Bug 41726 - Animate the connection icon.

- - - - -

5 changed files:

- browser/base/content/navigator-toolbox.inc.xhtml - + browser/components/torconnect/content/tor-not-connected-to-connected-animated.svg - browser/components/torconnect/content/torConnectTitlebarStatus.css - browser/components/torconnect/content/torConnectTitlebarStatus.js - browser/components/torconnect/jar.mn

Changes:

===================================== browser/base/content/navigator-toolbox.inc.xhtml ===================================== @@ -94,7 +94,9 @@ <hbox class="private-browsing-indicator"/>

<html:div id="tor-connect-titlebar-status" role="status"> - <html:img alt="" id="tor-connect-titlebar-status-icon" /> + <html:img id="tor-connect-titlebar-status-icon" + 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/tor-not-connected-to-connected-animated.svg ===================================== @@ -0,0 +1,27 @@ +<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" /> + <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" /> + <path d="m 46.5604,5.36771 0.8877,0.88763 C 47.6222,6.20033 47.8076,6.17067 48,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 50.8667,9.0122 51,8.5216 51,8 51,6.34399 49.656,5 48,5 47.4785,5 46.9878,5.13332 46.5604,5.36771 Z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 48,0.50133 c -1.0025,0 -1.9591,0.19675 -2.8333,0.55373 V 1.05319 C 42.4292,2.17055 40.5,4.85935 40.5,7.9987 c 0,2.0865 0.8519,3.9736 2.2272,5.3326 0.9889,0.9777 2.2486,1.6823 3.6568,1.9914 0.352,0.0773 0.7093,0.1306 1.0773,0.1546 v -5.4291 l 1.0774,1.0773 v 4.3518 c 0.368,-0.024 0.7253,-0.0773 1.0773,-0.1546 0.7997,-0.1756 1.5515,-0.4786 2.233,-0.8868 l 1.3048,1.3048 c 0.2597,0.2597 0.6808,0.2597 0.9405,0 0.2597,-0.2597 0.2597,-0.6808 0,-0.9405 L 45.5277,6.23361 c -0.2597,-0.2597 -0.6808,-0.2597 -0.9405,0 -0.2597,0.2597 -0.2597,0.68075 0,0.94045 L 45.0249,7.6118 C 45.0085,7.7389 45,7.8684 45,8 c 0,1.0613 0.552,1.9947 1.384,2.528 v 1.2164 c -1.4476,-0.6242 -2.4607,-2.0667 -2.4607,-3.7437 0,-2.25337 1.824,-4.07736 4.0774,-4.07736 0.0919,0 0.1832,0.00304 0.2736,0.00902 2.1252,0.1409 3.803,1.90649 3.803,4.06764 0,0.8206 -0.2425,1.585 -0.6598,2.2248 l 0.8434,0.8434 C 52.8837,10.2055 53.2507,9.1457 53.2507,8 53.2507,5.10133 50.8987,2.74933 48,2.74933 c -1.1451,0 -2.2049,0.36706 -3.0681,0.98988 C 43.6101,4.69295 42.75,6.24712 42.75,8.0007 c 0,2.3357 1.525,4.3143 3.634,4.9945 v 1.1221 C 45.9591,14.0058 45.5517,13.8511 45.1667,13.6584 44.5655,13.3575 44.0189,12.963 43.5459,12.4949 42.3887,11.3492 41.672,9.7592 41.672,8 c 0,-1.56821 0.5699,-3.00282 1.5139,-4.10813 L 43.1845,3.89053 c 0.2914,-0.34111 0.6184,-0.65087 0.9752,-0.9235 l 0.0014,0.00132 C 45.2256,2.15502 46.5562,1.67199 48,1.67199 c 3.496,0 6.328,2.83201 6.328,6.32801 0,1.4444 -0.4832,2.7747 -1.2965,3.8388 l 0.8337,0.8337 C 54.8876,11.3911 55.4987,9.7671 55.4987,8 55.4987,3.85865 52.1414,0.50133 48,0.50133 Z m 1.616,11.70147 v 1.9145 c 0.4831,-0.1268 0.9436,-0.3093 1.3742,-0.5402 l -0.8039,-0.804 c -0.1846,0.0845 -0.375,0.1586 -0.5703,0.2216 z" fill="context-fill" /> + <path d="m 48,8.21 c 0.116,0 0.21,-0.094 0.21,-0.21 0,-0.116 -0.094,-0.21 -0.21,-0.21 -0.116,0 -0.21,0.094 -0.21,0.21 0,0.116 0.094,0.21 0.21,0.21 z" fill="context-fill" /> + <path fill-rule="evenodd" d="M 67.9987,0.5 H 68 v 0.00133 c 4.1414,0 7.4987,3.35732 7.4987,7.49867 0,1.7671 -0.6111,3.3911 -1.6335,4.6725 L 73.0315,11.8388 C 73.8448,10.7747 74.328,9.4444 74.328,8 74.328,4.504 71.496,1.67199 68,1.67199 c -1.4438,0 -2.7744,0.48303 -3.8389,1.29636 L 64.1597,2.96703 c -1.5132,1.15605 -2.489,2.97944 -2.489,5.03167 0,2.204 1.125,4.1425 2.8316,5.2743 0.5689,0.3773 1.2024,0.665 1.8804,0.843 V 12.9947 C 64.2744,12.3141 62.75,10.3359 62.75,8.0007 62.75,6.24712 63.6107,4.69363 64.9326,3.73989 65.7957,3.11707 66.8549,2.74933 68,2.74933 c 2.8987,0 5.2507,2.352 5.2507,5.25067 0,1.1457 -0.367,2.2055 -0.9898,3.0682 L 71.4175,10.2248 C 71.8348,9.585 72.0773,8.8206 72.0773,8 c 0,-2.16115 -1.6778,-3.92736 -3.803,-4.06827 -0.0904,-0.00598 -0.1817,-0.00839 -0.2736,-0.00839 -2.2534,0 -4.0774,1.82399 -4.0774,4.07736 0,1.6765 1.0124,3.1186 2.4594,3.7431 v -1.2171 c -0.832,-0.5334 -1.384,-1.4667 -1.384,-2.528 0,-1.65603 1.344,-3.00003 3,-3.00003 H 68 V 5 c 1.656,0 3,1.34399 3,3 0,0.5216 -0.1333,1.0122 -0.3676,1.4397 L 69.7447,8.552 C 69.7997,8.3778 69.8294,8.1924 69.8294,8 69.8294,6.98934 69.0107,6.17067 68,6.17067 c -0.1924,0 -0.3778,0.02966 -0.5519,0.08467 L 67.4467,6.254 c -0.7407,0.23396 -1.2774,0.92639 -1.2774,1.7447 0,0.3258 0.0851,0.6317 0.2342,0.8966 -0.0799,-0.2328 -0.027,-0.501 0.1587,-0.6867 0.2597,-0.2597 0.6807,-0.2597 0.9404,0 l 6.5917,6.5916 c 0.2597,0.2597 0.2597,0.6808 0,0.9405 -0.2597,0.2597 -0.6808,0.2597 -0.9405,0 L 71.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 11.1255 L 67.46,10.0469 V 15.476 C 67.092,15.452 66.7347,15.3987 66.3827,15.3214 65.9631,15.2293 65.5567,15.1021 65.1667,14.943 62.4288,13.8261 60.5,11.1382 60.5,7.9987 60.5,4.89266 62.3885,2.22766 65.0799,1.08929 65.977,0.70983 66.9633,0.5 67.9987,0.5 Z m 1.6173,11.7028 v 1.9145 c 0.4831,-0.1268 0.9436,-0.3093 1.3742,-0.5402 l -0.804,-0.804 c -0.1845,0.0845 -0.3749,0.1586 -0.5702,0.2216 z" fill="context-fill" /> + <path d="m 68,8.42 c 0.2319,0 0.42,-0.188 0.42,-0.42 0,-0.232 -0.1881,-0.42 -0.42,-0.42 -0.232,0 -0.42,0.188 -0.42,0.42 0,0.232 0.188,0.42 0.42,0.42 z" fill="context-fill" /> + <path d="M 87.9987,0.5 H 88 v 0.00133 c 4.1414,0 7.4987,3.35732 7.4987,7.49867 0,1.7671 -0.6111,3.3911 -1.6335,4.6725 L 93.0315,11.8388 C 93.8448,10.7747 94.328,9.4444 94.328,8 94.328,4.504 91.496,1.67199 88,1.67199 c -1.4438,0 -2.7744,0.48303 -3.8389,1.29636 L 84.1597,2.96703 c -1.5132,1.15605 -2.489,2.97944 -2.489,5.03167 0,2.204 1.125,4.1425 2.8316,5.2743 0.5689,0.3773 1.2024,0.665 1.8804,0.843 V 12.9947 C 84.2744,12.3141 82.75,10.3359 82.75,8.0007 82.75,6.24712 83.6107,4.69363 84.9326,3.73989 85.7957,3.11707 86.8549,2.74933 88,2.74933 c 2.8987,0 5.2507,2.352 5.2507,5.25067 0,1.1457 -0.367,2.2055 -0.9898,3.0682 L 91.4175,10.2248 C 91.8348,9.585 92.0773,8.8206 92.0773,8 c 0,-2.16115 -1.6778,-3.92736 -3.803,-4.06827 -0.0904,-0.00598 -0.1817,-0.00839 -0.2736,-0.00839 -2.2534,0 -4.0774,1.82399 -4.0774,4.07736 0,1.6765 1.0124,3.1186 2.4594,3.7431 v -1.2171 c -0.832,-0.5334 -1.384,-1.4667 -1.384,-2.528 0,-1.65603 1.344,-3.00003 3,-3.00003 H 88 V 5 c 1.656,0 3,1.34399 3,3 0,0.5216 -0.1333,1.0122 -0.3676,1.4397 L 89.7447,8.552 C 89.7997,8.3778 89.8294,8.1924 89.8294,8 89.8294,6.98934 89.0107,6.17067 88,6.17067 c -0.1924,0 -0.3778,0.02966 -0.5519,0.08467 L 87.4467,6.254 c -0.7407,0.23396 -1.2774,0.92639 -1.2774,1.7447 0,0.824 0.544,1.52 1.2907,1.7493 v 5.728 C 87.092,15.452 86.7347,15.3987 86.3827,15.3214 85.9631,15.2293 85.5567,15.1021 85.1667,14.943 82.4288,13.8261 80.5,11.1382 80.5,7.9987 80.5,4.89266 82.3885,2.22766 85.0799,1.08929 85.977,0.70983 86.9633,0.5 87.9987,0.5 Z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 88.5387,11.1255 -0.7798,-0.7798 c -0.2597,-0.2597 -0.2597,-0.6807 0,-0.9404 0.2597,-0.2597 0.6807,-0.2597 0.9404,0 l 5.395,5.3949 c 0.2597,0.2597 0.2597,0.6808 0,0.9405 -0.2597,0.2597 -0.6808,0.2597 -0.9405,0 L 91.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 z m 1.0773,1.0774 v 1.9144 c 0.4831,-0.1268 0.9436,-0.3093 1.3742,-0.5402 l -0.804,-0.804 c -0.1845,0.0845 -0.3749,0.1586 -0.5702,0.2216 z" fill="context-fill" /> + <path d="m 88,8.63 c 0.3479,0 0.63,-0.2821 0.63,-0.63 0,-0.3479 -0.2821,-0.63 -0.63,-0.63 -0.3479,0 -0.63,0.2821 -0.63,0.63 0,0.3479 0.2821,0.63 0.63,0.63 z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 100.5,7.9987 c 0,-4.14137 3.357,-7.4987 7.499,-7.4987 2.061,0 3.927,0.83143 5.283,2.17715 1.369,1.35859 2.217,3.24172 2.217,5.32285 0,1.7671 -0.611,3.3911 -1.634,4.6725 l -0.834,-0.8337 c 0.413,-0.5403 0.741,-1.1493 0.964,-1.807 h -0.002 c 0.216,-0.6379 0.334,-1.3217 0.334,-2.0331 0,-1.75964 -0.718,-3.35103 -1.876,-4.49778 -1.143,-1.13084 -2.715,-1.82893 -4.451,-1.82893 -1.444,0 -2.774,0.48303 -3.839,1.29636 L 104.16,2.96702 c -1.513,1.15606 -2.489,2.97945 -2.489,5.03168 0,2.9387 2,5.4053 4.712,6.1173 v -1.1213 c -2.109,-0.6806 -3.633,-2.6588 -3.633,-4.994 0,-1.75358 0.861,-3.30707 2.183,-4.26081 0.863,-0.62282 1.922,-0.99056 3.067,-0.99056 2.899,0 5.251,2.352 5.251,5.25067 0,1.1457 -0.367,2.2055 -0.99,3.0682 l -0.844,-0.8434 c 0.418,-0.6398 0.66,-1.4042 0.66,-2.2248 0,-2.16115 -1.678,-3.92736 -3.803,-4.06827 -0.09,-0.00598 -0.181,-0.00839 -0.273,-0.00839 -2.254,0 -4.078,1.82399 -4.078,4.07736 0,1.6765 1.013,3.1186 2.46,3.7431 v -1.2171 c -0.832,-0.5334 -1.384,-1.4667 -1.384,-2.528 0,-1.65603 1.344,-3.00003 3,-3.00003 1.656,0 3,1.344 3,3.00003 0,1.0081 -0.498,1.9008 -1.261,2.4449 l 0.001,0.0013 c -0.04,0.0287 -0.081,0.0564 -0.123,0.0831 v 0.1942 c 0.206,-0.036 0.426,0.0257 0.585,0.1848 l 3.893,3.8932 c 0.26,0.2597 0.26,0.6808 0,0.9405 -0.259,0.2597 -0.68,0.2597 -0.94,0 l -1.305,-1.3048 c -0.682,0.4082 -1.433,0.7112 -2.233,0.8868 -0.352,0.0773 -0.709,0.1306 -1.077,0.1546 v -0.0014 l -0.002,1e-4 V 9.748 c 0.747,-0.2293 1.291,-0.9253 1.291,-1.7493 0,-1.01069 -0.819,-1.82936 -1.829,-1.82936 -1.011,0 -1.83,0.81867 -1.83,1.82936 0,0.824 0.544,1.52 1.291,1.7493 v 5.728 c -0.368,-0.024 -0.725,-0.0773 -1.077,-0.1546 -3.366,-0.7387 -5.883,-3.736 -5.883,-7.3227 z m 9.116,6.1169 v -1.9127 0.7918 c 0.195,-0.063 0.386,-0.1371 0.57,-0.2216 l 0.804,0.804 c -0.179,0.0963 -0.364,0.1842 -0.554,0.2631 v -0.0019 c -0.265,0.1104 -0.538,0.2033 -0.82,0.2773 z" fill="context-fill" /> + <path d="m 108,8.84 c 0.464,0 0.84,-0.3761 0.84,-0.84 0,-0.4639 -0.376,-0.84 -0.84,-0.84 -0.464,0 -0.84,0.3761 -0.84,0.84 0,0.4639 0.376,0.84 0.84,0.84 z" fill="context-fill" /> + <path d="m 127.999,0.5 c -4.142,0 -7.499,3.35733 -7.499,7.4987 0,3.5867 2.517,6.584 5.883,7.3227 0.352,0.0773 0.709,0.1306 1.077,0.1546 V 9.748 c -0.747,-0.2293 -1.291,-0.9253 -1.291,-1.7493 0,-1.01069 0.819,-1.82936 1.83,-1.82936 1.01,0 1.829,0.81867 1.829,1.82936 0,0.824 -0.544,1.52 -1.291,1.7493 v 5.728 l 0.002,-1e-4 v 0.0014 c 0.368,-0.024 0.725,-0.0773 1.077,-0.1546 0.8,-0.1756 1.551,-0.4786 2.233,-0.8868 l 1.305,1.3048 c 0.26,0.2597 0.681,0.2597 0.94,0 0.26,-0.2597 0.26,-0.6808 0,-0.9405 l -2.132,-2.1327 c -0.26,-0.2597 -0.681,-0.2597 -0.941,0 -0.249,0.2494 -0.259,0.6477 -0.03,0.9089 -0.18,0.0966 -0.365,0.1847 -0.555,0.2638 v -0.0019 c -0.265,0.1104 -0.538,0.2033 -0.82,0.2773 V 10.528 c 0.042,-0.0267 0.083,-0.0544 0.123,-0.0831 l -0.001,-0.0013 c 0.763,-0.5441 1.261,-1.4368 1.261,-2.4449 0,-1.65603 -1.344,-3.00003 -3,-3.00003 -1.656,0 -3,1.344 -3,3.00003 0,1.0613 0.552,1.9946 1.384,2.528 v 1.2171 c -1.447,-0.6245 -2.46,-2.0666 -2.46,-3.7431 0,-2.25337 1.824,-4.07736 4.078,-4.07736 2.253,0 4.077,1.82399 4.077,4.07736 0,1.3054 -0.614,2.4688 -1.569,3.2146 -0.272,0.2125 -0.572,0.3904 -0.893,0.5287 v 1.2507 c 0,-10e-5 0,10e-5 0,0 2.109,-0.68 3.635,-2.658 3.635,-4.994 0,-2.8987 -2.352,-5.2507 -5.25,-5.2507 -2.899,0 -5.251,2.35201 -5.251,5.2507 0,2.3352 1.524,4.3134 3.633,4.994 v 1.1213 c -2.712,-0.712 -4.712,-3.1786 -4.712,-6.1173 0,-2.05223 0.976,-3.87562 2.489,-5.03168 l 0.001,0.00133 c 1.065,-0.81333 2.395,-1.29636 3.839,-1.29636 1.736,0 3.308,0.69809 4.451,1.82893 1.158,1.14675 1.876,2.73814 1.876,4.49778 0,0.7114 -0.118,1.3952 -0.334,2.0331 h 0.002 c -0.223,0.6577 -0.551,1.2667 -0.964,1.807 l 0.834,0.8337 c 1.023,-1.2814 1.634,-2.9054 1.634,-4.6725 0,-2.08113 -0.848,-3.96426 -2.217,-5.32285 C 131.926,1.33143 130.06,0.5 127.999,0.5 Z" fill="context-fill" /> + <path d="m 128,8.84 c 0.464,0 0.84,-0.3761 0.84,-0.84 0,-0.4639 -0.376,-0.84 -0.84,-0.84 -0.464,0 -0.84,0.3761 -0.84,0.84 0,0.4639 0.376,0.84 0.84,0.84 z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 152.493,14.139 c 0.259,-0.2597 0.68,-0.2597 0.94,0 l 0.661,0.6612 c 0.26,0.2597 0.26,0.6808 0,0.9405 -0.259,0.2597 -0.68,0.2597 -0.94,0 l -0.661,-0.6612 c -0.26,-0.2597 -0.26,-0.6808 0,-0.9405 z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 140.5,7.9987 c 0,-4.14137 3.357,-7.4987 7.499,-7.4987 4.141,0 7.498,3.35733 7.498,7.4987 0,3.5867 -2.517,6.584 -5.882,7.3227 -0.352,0.0773 -0.71,0.1306 -1.078,0.1546 V 9.748 c 0.747,-0.2293 1.291,-0.9253 1.291,-1.7493 0,-1.01069 -0.819,-1.82936 -1.829,-1.82936 -1.011,0 -1.83,0.81867 -1.83,1.82936 0,0.824 0.544,1.52 1.291,1.7493 v 5.728 c -0.368,-0.024 -0.725,-0.0773 -1.077,-0.1546 -3.366,-0.7387 -5.883,-3.736 -5.883,-7.3227 z m 9.115,2.528 v 3.5893 c 2.712,-0.712 4.712,-3.1786 4.712,-6.1173 0,-3.49602 -2.832,-6.32802 -6.328,-6.32802 -3.496,0 -6.328,2.83199 -6.328,6.32802 0,2.9387 2,5.4053 4.712,6.1173 v -1.1213 c -2.109,-0.6806 -3.633,-2.6588 -3.633,-4.994 0,-2.89869 2.352,-5.2507 5.251,-5.2507 2.898,0 5.25,2.352 5.25,5.2507 0,2.336 -1.525,4.3147 -3.634,4.9947 v -1.2507 c 1.448,-0.624 2.461,-2.0667 2.461,-3.744 0,-2.25337 -1.824,-4.07736 -4.077,-4.07736 -2.254,0 -4.078,1.82399 -4.078,4.07736 0,1.6765 1.013,3.1186 2.46,3.7431 v -1.2171 c -0.832,-0.5334 -1.384,-1.4667 -1.384,-2.528 0,-1.65603 1.344,-3.00003 3,-3.00003 1.656,0 3,1.344 3,3.00003 0,1.0613 -0.552,1.9946 -1.384,2.528 z" fill="context-fill" /> + <path d="m 148,8.84 c 0.464,0 0.84,-0.3761 0.84,-0.84 0,-0.4639 -0.376,-0.84 -0.84,-0.84 -0.464,0 -0.84,0.3761 -0.84,0.84 0,0.4639 0.376,0.84 0.84,0.84 z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 168.001,2.75 c -2.899,0 -5.251,2.35201 -5.251,5.2507 0,2.336 1.525,4.3147 3.635,4.9947 v -1.2507 c -1.448,-0.624 -2.462,-2.0667 -2.462,-3.744 0,-2.25337 1.824,-4.07736 4.078,-4.07736 2.253,0 4.077,1.82399 4.077,4.07736 0,1.6773 -1.013,3.12 -2.461,3.744 v 1.2507 c 2.109,-0.68 3.634,-2.6587 3.634,-4.9947 0,-2.8987 -2.352,-5.2507 -5.25,-5.2507 z" fill="context-fill" /> + <path fill-rule="evenodd" d="m 167.999,0.5 c -4.142,0 -7.499,3.35733 -7.499,7.4987 0,3.5867 2.517,6.584 5.883,7.3227 0.352,0.0773 0.709,0.1306 1.077,0.1546 V 9.748 c -0.747,-0.2293 -1.291,-0.9253 -1.291,-1.7493 0,-1.01069 0.819,-1.82936 1.83,-1.82936 1.01,0 1.829,0.81867 1.829,1.82936 0,0.824 -0.544,1.52 -1.291,1.7493 v 5.728 c 0.368,-0.024 0.726,-0.0773 1.078,-0.1546 3.365,-0.7387 5.882,-3.736 5.882,-7.3227 0,-4.14137 -3.357,-7.4987 -7.498,-7.4987 z m 1.616,13.616 v -3.5893 c 0.832,-0.5334 1.384,-1.4667 1.384,-2.528 0,-1.65603 -1.344,-3.00003 -3,-3.00003 -1.656,0 -3,1.344 -3,3.00003 0,1.0613 0.552,1.9946 1.384,2.528 v 3.5893 c -2.712,-0.712 -4.712,-3.1786 -4.712,-6.1173 0,-3.49603 2.832,-6.32802 6.328,-6.32802 3.496,0 6.328,2.832 6.328,6.32802 0,2.9387 -2,5.4053 -4.712,6.1173 z" fill="context-fill" /> + <path d="m 168,8.84 c 0.464,0 0.84,-0.3761 0.84,-0.84 0,-0.4639 -0.376,-0.84 -0.84,-0.84 -0.464,0 -0.84,0.3761 -0.84,0.84 0,0.4639 0.376,0.84 0.84,0.84 z" fill="context-fill" /> +</svg>

===================================== browser/components/torconnect/content/torConnectTitlebarStatus.css ===================================== @@ -15,10 +15,32 @@ fill: currentColor; width: 16px; height: 16px; + object-fit: none; + --num-animation-steps: 8; + /* First frame has no offset. */ + --tor-not-connected-offset: 0; + /* Each frame/step is offset by 20px from the previous. */ + --tor-connected-offset: calc(-20px * var(--num-animation-steps)); + object-position: var(--tor-not-connected-offset); +} + +#tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked:not( + .tor-connect-status-connected +) { + fill: #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-icon.tor-connect-status-connected { fill: var(--purple-60); + object-position: var(--tor-connected-offset); }

@media (prefers-color-scheme: dark) { @@ -27,12 +49,24 @@ } }

-#tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked { - fill: #c50042; +@keyframes onion-not-connected-to-connected { + from { + object-position: var(--tor-not-connected-offset); + } + + to { + object-position: var(--tor-connected-offset); + } }

-@media (prefers-color-scheme: dark) { - #tor-connect-titlebar-status-icon.tor-connect-status-potentially-blocked { - fill: #ff9aa2; +@media (prefers-reduced-motion: no-preference) { + #tor-connect-titlebar-status-icon.tor-connect-status-connected { + transition: fill 1000ms; + animation-name: onion-not-connected-to-connected; + animation-delay: 200ms; + animation-fill-mode: both; + /* Run animation at 60 frames-per-second. */ + animation-duration: calc(var(--num-animation-steps) * 1000ms / 60); + animation-timing-function: steps(var(--num-animation-steps)); } }

===================================== browser/components/torconnect/content/torConnectTitlebarStatus.js ===================================== @@ -91,12 +91,6 @@ var gTorConnectTitlebarStatus = { break; } this.label.textContent = this._strings[textId]; - this.icon.setAttribute( - "src", - connected - ? "chrome://browser/content/torconnect/tor-connect.svg" - : "chrome://browser/content/torconnect/tor-connect-broken.svg" - ); this.icon.classList.toggle("tor-connect-status-connected", connected); this.icon.classList.toggle( "tor-connect-status-potentially-blocked",

===================================== browser/components/torconnect/jar.mn ===================================== @@ -1,13 +1,14 @@ browser.jar: - content/browser/torconnect/torConnectUrlbarButton.js (content/torConnectUrlbarButton.js) - content/browser/torconnect/torConnectTitlebarStatus.js (content/torConnectTitlebarStatus.js) - content/browser/torconnect/torConnectTitlebarStatus.css (content/torConnectTitlebarStatus.css) - content/browser/torconnect/aboutTorConnect.css (content/aboutTorConnect.css) -* content/browser/torconnect/aboutTorConnect.xhtml (content/aboutTorConnect.xhtml) - content/browser/torconnect/aboutTorConnect.js (content/aboutTorConnect.js) - content/browser/torconnect/arrow-right.svg (content/arrow-right.svg) - content/browser/torconnect/bridge.svg (content/bridge.svg) - content/browser/torconnect/connection-failure.svg (content/connection-failure.svg) - content/browser/torconnect/connection-location.svg (content/connection-location.svg) - content/browser/torconnect/tor-connect.svg (content/tor-connect.svg) - content/browser/torconnect/tor-connect-broken.svg (content/tor-connect-broken.svg) + content/browser/torconnect/torConnectUrlbarButton.js (content/torConnectUrlbarButton.js) + content/browser/torconnect/torConnectTitlebarStatus.js (content/torConnectTitlebarStatus.js) + content/browser/torconnect/torConnectTitlebarStatus.css (content/torConnectTitlebarStatus.css) + content/browser/torconnect/aboutTorConnect.css (content/aboutTorConnect.css) +* content/browser/torconnect/aboutTorConnect.xhtml (content/aboutTorConnect.xhtml) + content/browser/torconnect/aboutTorConnect.js (content/aboutTorConnect.js) + content/browser/torconnect/arrow-right.svg (content/arrow-right.svg) + content/browser/torconnect/bridge.svg (content/bridge.svg) + content/browser/torconnect/connection-failure.svg (content/connection-failure.svg) + content/browser/torconnect/connection-location.svg (content/connection-location.svg) + content/browser/torconnect/tor-connect.svg (content/tor-connect.svg) + content/browser/torconnect/tor-not-connected-to-connected-animated.svg (content/tor-not-connected-to-connected-animated.svg) + content/browser/torconnect/tor-connect-broken.svg (content/tor-connect-broken.svg)

View it on GitLab: https://gitlab.torproject.org/tpo/applications/tor-browser/-/commit/01f3492c...