Bug 1394451 - Add an illustration to net errors. r=ewright draft
authorJohann Hofmann <jhofmann@mozilla.com>
Wed, 20 Sep 2017 18:29:20 +0200
changeset 667689 bc195aba89b3d10c84b4037c018b24f788fb426f
parent 667637 0c49ebf4195ce51072b24aacf01eaaffdcff9be6
child 732483 2c270621a51e803bf2c227db44697f3d571d445b
push id80818
push userbmo:jhofmann@mozilla.com
push dateWed, 20 Sep 2017 16:30:01 +0000
reviewersewright
bugs1394451
milestone57.0a1
Bug 1394451 - Add an illustration to net errors. r=ewright MozReview-Commit-ID: LSfyFYEgUMS
browser/base/content/aboutNetError.xhtml
browser/base/content/illustrations/error-connection-failure.svg
browser/base/jar.mn
browser/themes/shared/aboutNetError.css
--- a/browser/base/content/aboutNetError.xhtml
+++ b/browser/base/content/aboutNetError.xhtml
@@ -157,17 +157,20 @@
         if (cssClass == "badStsCert") {
           document.getElementById("badStsCertExplanation").removeAttribute("hidden");
         }
       }
 
       function initPage() {
         var err = getErrorCode();
         // List of error pages with an illustration.
-        let illustratedErrors = ["malformedURI", "dnsNotFound"];
+        let illustratedErrors = [
+          "malformedURI", "dnsNotFound", "connectionFailure", "netInterrupt",
+          "netTimeout", "netReset", "netOffline",
+        ];
         if (illustratedErrors.includes(err)) {
           document.body.classList.add("illustrated", err);
         }
 
         gIsCertError = (err == "nssBadCert");
         // Only worry about captive portals if this is a cert error.
         let showCaptivePortalUI = isCaptive() && gIsCertError;
         if (showCaptivePortalUI) {
new file mode 100644
--- /dev/null
+++ b/browser/base/content/illustrations/error-connection-failure.svg
@@ -0,0 +1,49 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
+  <defs>
+    <linearGradient id="a" x1="-300.021" y1="-272.736" x2="547.138" y2="574.423" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#ccfbff"/>
+      <stop offset="1" stop-color="#c9e4ff"/>
+    </linearGradient>
+    <linearGradient id="b" x1="-18.672" y1="23.78" x2="279.805" y2="322.256" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#00c8d7"/>
+      <stop offset="1" stop-color="#0a84ff"/>
+    </linearGradient>
+  </defs>
+  <path d="M224.245 144.067h-10.733c.136.343.274.674.41 1h10.323a.5.5 0 0 0 0-1zm2.454-11.821a.5.5 0 0 0-.5-.5h-20.26c.373.357.727.688 1.065 1h19.2a.5.5 0 0 0 .496-.5zm8.546 11.821h-3a.5.5 0 1 0 0 1h3a.5.5 0 0 0 0-1zm5 0h-1a.5.5 0 1 0 0 1h1a.5.5 0 0 0 0-1zm-3.3-6.66h-25.78a12.767 12.767 0 0 1 .862 2h24.918a1 1 0 0 0 0-2zm20.422 6.66h-8.122a.5.5 0 1 0 0 1h8.122a.5.5 0 0 0 0-1z" fill="#eaeaee"/>
+  <path d="M269.53 87.757h-24.236c-2.108-3.9-7.559-12.718-14.4-14.023-8.952-1.707-10.737 7.217-10.737 7.217s-5.949-15.468-21-13.419c-16.878 2.3-8.928 20.065-8.928 20.065h-25.408l8.181.159h-8.184a1 1 0 0 0 0 2H269.53a1 1 0 0 0 0-2z" fill="#fff"/>
+  <path d="M118.373 63.908h-13.69c-1.129-2.112-4.19-7.156-8.057-7.894-4.978-.949-5.971 4.013-5.971 4.013s-3.309-8.6-11.68-7.462c-9.386 1.278-4.965 11.158-4.965 11.158H59.88l9.471.185h-9.212a1 1 0 0 0 0 2h58.233a1 1 0 1 0 0-2z" fill="#fff"/>
+  <ellipse cx="143.566" cy="245.472" rx="55.042" ry="8.362" fill="#eaeaee"/>
+  <path d="M102.31 121.507H60.818a1 1 0 0 0 0 2h41.492a1 1 0 1 0 0-2zM70.336 117.6H82.1a.5.5 0 0 0 0-1H70.336a.5.5 0 0 0 0 1z" fill="#eaeaee"/>
+  <path d="M111.457 174.8h-78.3a1 1 0 0 0 0 2h78.3a1 1 0 1 0 0-2zm-26.742-3.793h1a.5.5 0 0 0 0-1h-1a.5.5 0 0 0 0 1zm10 0h3.1a.5.5 0 0 0 0-1h-3.1a.5.5 0 0 0 0 1zm-17 0h3a.5.5 0 0 0 0-1h-3a.5.5 0 0 0 0 1zm-20 0h12a.5.5 0 0 0 0-1h-12a.5.5 0 0 0 0 1z" fill="#eaeaee"/>
+  <path d="M206.885 62.973l.045-.1c-.058.027-.063.059-.045.1z" fill="#fff"/>
+  <path d="M77.937 214.941H39.95a1 1 0 1 1 0-2h37.987a1 1 0 1 1 0 2z" fill="#eaeaee"/>
+  <path d="M258.931 214.941h-61.813a1 1 0 0 1 0-2h61.813a1 1 0 0 1 0 2z" fill="#eaeaee"/>
+  <path d="M265.745 85.333h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-8.07a.5.5 0 0 1-.447-.277c-.007-.014-.724-1.425-1.979-3.342a.5.5 0 1 1 .837-.548c.393.6 1.444 2.293 1.888 3.167h7.772a.5.5 0 0 1 0 1zm-66.489-.712h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 1 0 1zm-11 0h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zM190.1 83.13a.5.5 0 0 1-.474-.339c-.1-.29-.2-.615-.31-.971a.5.5 0 1 1 .958-.287c.1.343.2.657.3.937a.5.5 0 0 1-.474.661zm30.5-5.156a.5.5 0 0 1-.467-.32 23.7 23.7 0 0 0-2.182-4.039.5.5 0 0 1 .834-.552 27.291 27.291 0 0 1 1.719 2.982 10.522 10.522 0 0 1 3.679-5.015.5.5 0 0 1 .571.82 10.181 10.181 0 0 0-3.665 5.721.5.5 0 0 1-.448.4zm18.345-2.964a.5.5 0 0 1-.339-.132q-.361-.333-.735-.651a.5.5 0 0 1 .647-.762q.39.331.765.678a.5.5 0 0 1-.339.868zm-49.923-1.725a.47.47 0 0 1-.09-.008.5.5 0 0 1-.4-.581c.792-4.351 3.544-7.229 8.18-8.556a.5.5 0 0 1 .275.962c-4.24 1.212-6.753 3.828-7.472 7.773a.5.5 0 0 1-.499.411zm45.893-1.218a.5.5 0 0 1-.237-.06 12.545 12.545 0 0 0-2.666-1.081.5.5 0 1 1 .261-.966 13.559 13.559 0 0 1 2.88 1.167.5.5 0 0 1-.238.94zM212.146 67.4a.5.5 0 0 1-.28-.086q-.4-.27-.82-.524a.5.5 0 1 1 .516-.856q.444.267.865.552a.5.5 0 0 1-.281.914zm-4.47-2.2a.5.5 0 0 1-.154-.024 16.724 16.724 0 0 0-2.832-.647.5.5 0 0 1 .137-.99 17.6 17.6 0 0 1 3 .686.5.5 0 0 1-.154.976z" fill="#eaeaee"/>
+  <path d="M72.315 62.052h-12a.5.5 0 0 1 0-1h12a.5.5 0 0 1 0 1zm45.582-.184h-1.8a.5.5 0 0 1 0-1h1.8a.5.5 0 0 1 0 1zm-10.8 0h-1a.5.5 0 0 1 0-1h1a.5.5 0 0 1 0 1zm-3.491-2.881a.5.5 0 0 1-.39-.186 18.484 18.484 0 0 0-2-2.129.5.5 0 0 1 .668-.744A19.433 19.433 0 0 1 104 58.174a.5.5 0 0 1-.389.814zm-12.521-.631a.5.5 0 0 1-.466-.319 13.8 13.8 0 0 0-3.857-5.165.5.5 0 0 1 .623-.782 14.47 14.47 0 0 1 3.624 4.438A5.414 5.414 0 0 1 94.12 53.5a.5.5 0 1 1 .326.945 4.994 4.994 0 0 0-2.867 3.51.5.5 0 0 1-.49.401zm-17.637-2.037h-.051a.5.5 0 0 1-.447-.548 6.454 6.454 0 0 1 1.057-3.036.5.5 0 1 1 .824.566 5.46 5.46 0 0 0-.886 2.571.5.5 0 0 1-.497.447zm4.193-5.039a.5.5 0 0 1-.151-.977 10.27 10.27 0 0 1 1.017-.264.5.5 0 0 1 .2.979 9.033 9.033 0 0 0-.917.237.5.5 0 0 1-.148.025z" fill="#eaeaee"/>
+  <path d="M216.326 144.72c-1.079-4.2-3.73-8.616-7.88-13.117a84.471 84.471 0 0 0-8.921-9.988 5.558 5.558 0 0 0-2.261-1.3c-7.177-6.885-21.972-19.819-32.5-20.546a27.625 27.625 0 0 0-1.889-.063 47.155 47.155 0 0 0-15.147 2.913l-5.114-1.4a5 5 0 0 0-6.142 3.5l-.969 3.545a68.668 68.668 0 0 0-7.844 5.3l-2.052-.048h-.116a5 5 0 0 0-5 4.884l-.042 1.829a45.575 45.575 0 0 0-5.648 7.656 5 5 0 0 0-2.515 5.326c-1.882 5.474-2.848 13.743-2.875 24.633a100.416 100.416 0 0 1-1.646 7.791l-4.279 2.594a6.312 6.312 0 0 0-2.125 8.657l1.516 2.5q-.375.778-.761 1.518l-4.037 1.24a6.312 6.312 0 0 0-4.176 7.877l.6 1.953q-.516.587-1.038 1.143l-1.616-.127a5.926 5.926 0 0 0-.5-.02 6.334 6.334 0 0 0-6.277 5.8l-.115 1.456c-2.741 2.043-5.415 4.547-5.415 9.117 0 6.528 10.272 10.568 13.648 11.9a68.955 68.955 0 0 0 24.224 4.781q.566 0 1.127-.012c.607 2.411 1.208 4.468 1.8 6.144a54.956 54.956 0 0 0 4.745 10.264c1.748 2.839 4.22 6.1 7.845 6.1a5.673 5.673 0 0 0 3.572-1.268c1.746-1.421 2.429-3.072 2.482-10.087a86.865 86.865 0 0 0 16.862 1.533 80.987 80.987 0 0 0 14.53-1.463c-.215 6.82.472 8.55 2.275 10.017a5.672 5.672 0 0 0 3.571 1.268c5.645 0 9.953-8.9 12.573-16.361a52.867 52.867 0 0 0 1.069-3.467c1.432-3.724 4.539-13.353 4.892-27.476.161-6.428 0-12.95-.488-19.419a7.56 7.56 0 0 0 1.131-4.949c6.461-1.2 10.808-3.919 15.1-9.34 3.4-4.308 8-14.308 5.826-22.788z" fill="#fff"/>
+  <path d="M211.476 145.947c-1.092-4.252-4.261-8.341-6.9-11.168a78.846 78.846 0 0 0-8.482-9.533.649.649 0 0 0-.907.018c-10.173-10.009-23.029-19.987-30.783-20.521-4.534-.313-10.392.808-16.48 3.1l-6.645-1.817-1.521 5.561a63.823 63.823 0 0 0-10.4 7l-3.884-.09-.087 3.744a40.534 40.534 0 0 0-7.123 9.675l-1.083.338.36 1.153c-2.227 5.146-3.144 14.255-3.147 24.842a104.047 104.047 0 0 1-2.33 10.6l-6 3.638a1.452 1.452 0 0 0-.685 1.835l3.021 4.978a54.736 54.736 0 0 1-2.883 5.777l-5.979 1.836a1.305 1.305 0 0 0-.864 1.63l1.394 4.541a51.394 51.394 0 0 1-4.691 5.189l-3.93-.31a1.3 1.3 0 0 0-1.4 1.2l-.3 3.752c-3.258 2.357-5.218 3.541-5.218 6.422 0 4.144 20.8 13.416 37.9 11.39a88.878 88.878 0 0 0 2.615 9.761c2.852 8.125 6.861 14.032 8.287 12.871.675-.549.711-6.554.562-12.73.446.174 8.025 3.054 21.939 3.054a88.332 88.332 0 0 0 19.876-2.718c-.4 5.844-.626 11.816.085 12.394 1.426 1.161 5.418-4.745 8.269-12.871.357-1.018.7-2.159 1.031-3.377 1.276-3.253 4.307-12.338 4.649-26.035a191.885 191.885 0 0 0-.651-21.1 2.592 2.592 0 0 0-.475-4.743 128.961 128.961 0 0 0-.36-2.871 28.465 28.465 0 0 0 4.578-.19c6.147-.82 9.835-2.869 13.728-7.786 2.797-3.536 6.551-12.06 4.914-18.439z" fill="url(#a)"/>
+  <path d="M193.99 124.155c.033.013.067.031.1.045-9.986-9.641-22.2-18.942-29.683-19.457-4.534-.313-10.392.808-16.48 3.1l-6.645-1.817-1.521 5.561a63.823 63.823 0 0 0-10.4 7l-3.884-.09-.087 3.744a40.534 40.534 0 0 0-7.123 9.675l-1.083.338.36 1.153c-2.227 5.146-3.144 14.255-3.147 24.842a109.944 109.944 0 0 1-.921 4.824c.168-.72.327-1.43.475-2.127.061 3.039.177 6.023.332 8.836-1.014 1.2-4.408 5.548-2.546 8.155a10.876 10.876 0 0 0 3.445 2.858c.069.589.138 1.155.209 1.681 1.015 7.544 4.11 29 6.408 38.3.207-.021.417-.036.623-.061a88.878 88.878 0 0 0 2.615 9.761c2.852 8.125 6.861 14.032 8.287 12.871.675-.549.711-6.554.562-12.73.038.015.145.054.283.1V222.3a46 46 0 0 0 27.634 3.451c15.651-3.043 21.467-14.705 22.172-22.607 1.194-13.372-1.415-19.893-1.415-19.893l6.558-2.852c-.011-.135-.022-.284-.034-.417a2.592 2.592 0 0 0-.475-4.743l-11.158 4.316s-.109-1.739-2.5-4.348c-3.174-3.462-10.521-6.355-11.428-6.7a84.091 84.091 0 0 0 24.884 5.065l-.109-.839c-10.706-.609-24.216-5.348-24.216-5.348s23.783 4.316 33.476-.761c6.847-3.587 11.086-13.369 9.456-21.846-1.731-9.023-13.024-20.623-13.024-20.623z" fill="#f9f9fa"/>
+  <path d="M149.523 146.54l-5.537-1.957a1 1 0 0 0-1.219 1.406l1.99 3.81a1 1 0 0 0 1.349.423l3.547-1.853a1 1 0 0 0-.13-1.829z" fill="#fff"/>
+  <g fill="url(#b)">
+    <path d="M268.754 200.7h-.768c-17.152 0-33.29 0-42.937.322-8.333.277-16.774 1.994-16.787 4.736-.008 1.811 4.646 3.3 13.565 5.982 7.387 2.225 17.5 5.271 17.736 7.75a2.9 2.9 0 0 1-1.2 2.046c-2.984 2.772-11.281 5.909-19.089 4.588a25.1 25.1 0 0 1-12.468-6.4c-4.383-3.888-6.191-7.86-7.786-11.364-.619-1.359-1.2-2.643-1.9-3.837a22.145 22.145 0 0 0-5.357-6.126 194.068 194.068 0 0 0-.6-17.308 4.6 4.6 0 0 0-.2-6.523c.75-.036 1.463-.1 2.13-.188 6.749-.9 10.823-3.211 15.032-8.527 3.282-4.146 7.092-13.147 5.287-20.18-1.2-4.662-4.606-9.055-7.29-11.947a80.769 80.769 0 0 0-8.657-9.724 2.62 2.62 0 0 0-1.653-.713 133.306 133.306 0 0 0-15.775-13.264c-6.315-4.414-11.527-6.79-15.492-7.064a24.782 24.782 0 0 0-1.683-.056 45.119 45.119 0 0 0-15.027 3.055l-6.025-1.648a2 2 0 0 0-2.457 1.4l-1.3 4.745a65.633 65.633 0 0 0-9.391 6.332l-3.141-.073h-.047a2 2 0 0 0-2 1.953l-.069 2.965a42.572 42.572 0 0 0-6.522 8.837l-.3.093a2 2 0 0 0-1.312 2.506l.145.465c-1.993 5.12-3.01 13.443-3.023 24.766a102.594 102.594 0 0 1-2.05 9.47L105.03 171a3.309 3.309 0 0 0-1.114 4.538l2.345 3.87a56.333 56.333 0 0 1-2.1 4.209l-5.216 1.6a3.309 3.309 0 0 0-2.189 4.129l1.082 3.524a49.795 49.795 0 0 1-3.217 3.554l-3.023-.238a3.177 3.177 0 0 0-.267-.011 3.318 3.318 0 0 0-3.287 3.043l-.223 2.83c-2.965 2.13-5.3 3.833-5.3 7.5 0 2.65 3.4 5.1 6.95 6.946a89.372 89.372 0 0 0-1.57 3.365c-1.866 4.156-3.1 6.9-7.448 8.232-8.459 2.584-20.437.244-26.315-3.564-1.825-1.182-2.9-2.432-3.041-3.519-.264-2.111 5.188-4.187 9.167-5.7 3.919-1.492 6.152-2.394 6.47-3.56a1.66 1.66 0 0 0-.295-1.493C64.48 207.69 53.977 207.22 34 207.22a.5.5 0 0 0 0 1c12.5 0 29.627 0 31.645 2.642a.661.661 0 0 1 .125.623c-.2.732-3.339 1.928-5.861 2.888-5 1.9-10.165 3.871-9.8 6.761.176 1.405 1.382 2.869 3.489 4.234 4.275 2.77 11.581 4.841 18.68 4.841a29.2 29.2 0 0 0 8.471-1.16c4.784-1.462 6.161-4.531 8.068-8.778a89.007 89.007 0 0 1 1.552-3.326 54.676 54.676 0 0 0 3.9 1.709 65.842 65.842 0 0 0 23.126 4.572c1.177 0 2.336-.042 3.462-.126a80.823 80.823 0 0 0 2.292 8.265c.516 1.469 5.171 14.354 9.759 14.354a2.629 2.629 0 0 0 1.678-.595c.831-.677 1.5-1.223 1.353-11.536a76.69 76.69 0 0 0 19.885 2.308 86.392 86.392 0 0 0 17.71-2.167c-.585 10.114.149 10.711.989 11.395a2.628 2.628 0 0 0 1.677.595c4.572 0 9.226-12.885 9.742-14.354.347-.989.7-2.137 1.046-3.412 1.345-3.458 4.4-12.766 4.747-26.612.014-.552.01-1.108.019-1.662a20.857 20.857 0 0 1 4.507 5.34c.668 1.152 1.242 2.415 1.851 3.751 1.636 3.595 3.491 7.669 8.032 11.7a26.054 26.054 0 0 0 12.965 6.641 24.08 24.08 0 0 0 4.006.325c6.5 0 12.949-2.4 15.93-5.166a3.735 3.735 0 0 0 1.514-2.872c-.274-2.93-7.481-5.313-18.444-8.614-5.427-1.634-12.859-3.872-12.854-5.02.006-1.314 5.643-3.4 15.82-3.742 9.631-.321 25.785-.326 42.9-.321h.768a.5.5 0 0 0 0-1zM204.579 135c2.636 2.827 5.805 6.916 6.9 11.168 1.637 6.379-2.117 14.9-4.918 18.441-3.893 4.918-7.581 6.967-13.728 7.786-.7.093-1.432.142-2.179.172a.988.988 0 0 0-.354-.077 73.652 73.652 0 0 1-26.1-5.54 1 1 0 0 0-.826 1.821 74.46 74.46 0 0 0 25.115 5.664c.039.323.08.659.121 1.021a2.579 2.579 0 0 1 1.39 3.874.484.484 0 0 0-.243.11c-1.838 1.634-8.407 3.132-8.474 3.146a.5.5 0 0 0-.113.041l-2.2 1.1a.5.5 0 0 0-.274.5c.006.061.561 6.134-2.275 8.973a5.1 5.1 0 0 1-3.97 1.438l.82-4.449a.5.5 0 0 0-.383-.579l-2.605-.579c-.139-1-.37-4.182 1.943-5.917.976-.731 8.157-3.579 10.842-4.614a.5.5 0 0 0-.359-.933c-1 .386-9.818 3.8-11.082 4.747-3.262 2.447-2.312 7.043-2.27 7.237a.492.492 0 0 0 .107.2q-1.276-.217-2.6-.406c-.048-1.62-.626-3.782-2.151-4.88a3.922 3.922 0 0 0-3.715-.379.507.507 0 0 0-.086.039 5.413 5.413 0 0 0-2.65 4.454c0 2.46 1.4 5.3 3.473 5.614a5.187 5.187 0 0 0 .772.059 4.147 4.147 0 0 0 2.763-1 4.691 4.691 0 0 0 1.526-2.9q2.748.39 5.267.9l-.694 3.765a.5.5 0 0 0 .444.588q.446.043.87.043a6.04 6.04 0 0 0 4.449-1.735 6.78 6.78 0 0 0 .928-1.172 40.237 40.237 0 0 1 11.732 5.419q-.012 1.546-.051 3.143c-.342 13.7-3.374 22.782-4.649 26.035a48.73 48.73 0 0 1-1.031 3.377c-2.611 7.438-6.177 13.017-7.855 13.017a.639.639 0 0 1-.415-.146c-.669-.545-.51-5.868-.153-11.366a19.327 19.327 0 0 0 5.9-3.617.5.5 0 0 0-.717-.7 18.885 18.885 0 0 1-5.594 3.4 87.371 87.371 0 0 1-19.4 2.607c-11.281 0-18.4-1.892-20.923-2.7l-.26-6.109a.5.5 0 1 0-1 .043l.243 5.714c.149 6.176.113 12.181-.562 12.73a.639.639 0 0 1-.415.146c-1.681 0-5.261-5.579-7.872-13.017a88.882 88.882 0 0 1-2.615-9.761h-.005c-2.551-10.248-4.636-21.971-4.657-22.089a.5.5 0 1 0-.984.175c.021.118 2.091 11.756 4.633 22-1.324.122-2.662.2-4.013.2a63.607 63.607 0 0 1-26.1-6.059 44.608 44.608 0 0 1 6.949-9.4c9.072-9.555 18.343-13.569 25.331-15.21a6.619 6.619 0 0 0 2.526 3.172 5.232 5.232 0 0 0 2.774.9 4.77 4.77 0 0 0 3.579-1.983.5.5 0 0 0 .052-.57l-1.467-2.574q2.151-.118 4.317-.032c1.077 3.689 5.807 4.056 5.858 4.06h.033a.5.5 0 0 0 .464-.314 8.392 8.392 0 0 0 .432-1.968h2.691a.5.5 0 1 0 0-1h-2.606a18.073 18.073 0 0 0-.152-3.239h2.437a.5.5 0 0 0 0-1h-2.593a24.74 24.74 0 0 0-.512-2.243.5.5 0 0 0-.564-.359 11.053 11.053 0 0 0-3 1.03c-1.867.989-2.77 2.376-2.658 4.025a46.151 46.151 0 0 0-4.689.068l-.048-.084 2.933-.3a.5.5 0 0 0 .449-.484c.005-.2.1-4.931-2.952-6.689-1.677-.968-11.4-4.872-11.818-5.037a.5.5 0 0 0-.372.928c.1.041 10.074 4.043 11.69 4.976 2.05 1.183 2.388 4.223 2.442 5.359l-3.237.333a.5.5 0 0 0-.383.745l2.271 3.988c-1.076 1.186-2.506 2.067-4.831.615-3.425-2.138-3.069-8.563-3.019-9.262 0-.022.005-.044 0-.066v-.007a.5.5 0 0 0-.052-.266.985.985 0 0 0-.548-.63c-.037-.016-3.859-1.7-7.521-3.205-3.062-1.261-3.5-3.464-3.524-3.584a1 1 0 0 0-1.975.313c.021.138.568 3.4 4.738 5.121 3.645 1.5 7.452 3.176 7.488 3.191.056.024.2.091.35.158a17.069 17.069 0 0 0 .664 4.966c-7.122 1.693-16.53 5.791-25.719 15.47a45.518 45.518 0 0 0-7.118 9.64c-3.625-1.887-5.88-3.8-5.88-5.166 0-2.882 1.96-4.065 5.218-6.422l.3-3.752a1.306 1.306 0 0 1 1.293-1.2h.11l2.534.2a15.544 15.544 0 0 1-1.922 1.463.5.5 0 0 0 .545.839 15.693 15.693 0 0 0 2.715-2.2h.058a51.394 51.394 0 0 0 4.691-5.189l-1.394-4.541a1.305 1.305 0 0 1 .864-1.63l4.352-1.336-1.57 2.34a.5.5 0 1 0 .83.558l2.256-3.363.111-.034a59.576 59.576 0 0 0 3-6.032l-2.884-4.76a1.305 1.305 0 0 1 .439-1.792l4.593-2.784-.9 2.5a.5.5 0 0 0 .941.338l1.316-3.665.051-.031c.038-.137.069-.27.106-.406l.078-.218a.5.5 0 0 0 .027-.185 105.18 105.18 0 0 0 2.119-9.789c0-9.717.779-18.179 2.627-23.484l.683 1.709a.5.5 0 0 0 .929-.371l-1.144-2.862-.308-.986 1.083-.338a39.766 39.766 0 0 1 6.223-8.725 12.852 12.852 0 0 0 .241 1.72.5.5 0 0 0 .629.315.5.5 0 0 0 .32-.631 24.71 24.71 0 0 1-.287-2.484l.084-3.613 3.884.09a63.833 63.833 0 0 1 10.4-7l1.521-5.561 5.138 1.405-2.527 1.118a.5.5 0 1 0 .409.912l3.7-1.659a44.04 44.04 0 0 1 14.851-3.124q.8 0 1.545.052c7.754.535 20.609 10.512 30.783 20.521a.655.655 0 0 1 .465-.193.639.639 0 0 1 .442.176m0 0a78.848 78.848 0 0 1 8.484 9.535m-14.79 61.935a42.035 42.035 0 0 0-11.248-5.1 15.357 15.357 0 0 0 1.207-6.3.955.955 0 0 0 .1.016.989.989 0 0 0 .292-.044l9.149-2.784c.288 4.005.511 8.839.5 14.208z"/>
+    <path d="M193.225 139.669a1.412 1.412 0 0 0 1.41-1.41V135.1a1.41 1.41 0 0 0-2.821 0v3.162a1.412 1.412 0 0 0 1.411 1.407z"/>
+    <path d="M193.225 144.475a5.736 5.736 0 0 0 4.644-2.413 1 1 0 1 0-1.679-1.088 3.76 3.76 0 0 1-2.965 1.5 3.71 3.71 0 0 1-2.969-1.506 1 1 0 0 0-1.675 1.094 5.736 5.736 0 0 0 4.644 2.413z"/>
+    <path d="M163.852 142.719a1 1 0 0 0 1.674-1.094 5.674 5.674 0 0 0-9.286 0 1 1 0 0 0 1.674 1.095 3.679 3.679 0 0 1 5.938 0z"/>
+    <path d="M159.473 135.1v3.162c0 .036.008.07.011.106a6.569 6.569 0 0 1 2.8 0c0-.036.011-.07.011-.106V135.1a1.41 1.41 0 1 0-2.821 0z"/>
+    <path d="M160.912 130.086a5.733 5.733 0 0 0 4.643-2.412 1 1 0 0 0-1.674-1.095 3.679 3.679 0 0 1-5.937 0 1 1 0 0 0-1.674 1.094 5.733 5.733 0 0 0 4.642 2.413z"/>
+    <path d="M155.934 155.646a18.515 18.515 0 0 0-4.51-8.323c-5.144-5.145-12.507-4.867-12.817-4.857a1 1 0 0 0 .089 2 16.68 16.68 0 0 1 3.159.279 18.431 18.431 0 0 0 1.1 3.47 6.118 6.118 0 0 0-1.562.513 7.174 7.174 0 0 0-2.41 2.27.5.5 0 1 0 .84.542 6.254 6.254 0 0 1 2.014-1.917 5.319 5.319 0 0 1 1.6-.478 4.113 4.113 0 0 0 .928 1.091 6.669 6.669 0 0 0-.955 2.347 7.171 7.171 0 0 0 .372 3.29.5.5 0 0 0 .469.326.494.494 0 0 0 .174-.031.5.5 0 0 0 .295-.643 6.214 6.214 0 0 1-.326-2.76 5.734 5.734 0 0 1 .894-2.1 2.673 2.673 0 0 0 .474.054 9.686 9.686 0 0 0 4.458-1.746 16.947 16.947 0 0 1 3.75 7.1 1 1 0 0 0 1.956-.42zm-10.821-6.082c-1.027-.642-1.8-3.029-2.178-4.592a15.045 15.045 0 0 1 6.547 3.285c-1.517.943-3.507 1.843-4.37 1.307z"/>
+    <path d="M193.839 116.06a1 1 0 0 0 .71-.3l2.533-2.554a1 1 0 1 0-1.42-1.408l-2.533 2.554a1 1 0 0 0 .71 1.7z"/>
+    <path d="M199.708 117.691a1 1 0 0 0 .409-.088l3.512-1.576a1 1 0 0 0-.818-1.825l-3.512 1.576a1 1 0 0 0 .41 1.913z"/>
+    <path d="M193.882 183.558a.5.5 0 0 0 .106.988.487.487 0 0 0 .105-.011 5.176 5.176 0 0 0 3-7.9.5.5 0 0 0-.807.591 4.178 4.178 0 0 1-2.41 6.327z"/>
+    <path d="M195.435 187.387a.487.487 0 0 0 .105-.011 7.781 7.781 0 0 0 4.512-11.856.5.5 0 1 0-.807.591 6.884 6.884 0 0 1 .676 6.146 6.8 6.8 0 0 1-4.593 4.142.5.5 0 0 0 .105.989z"/>
+    <path d="M127.087 198.745a5.134 5.134 0 0 0 1.54.239 5.254 5.254 0 0 0 3.143-1.063.5.5 0 0 0-.637-.771 4.178 4.178 0 0 1-6.463-2.021.5.5 0 0 0-.962.271 5.206 5.206 0 0 0 3.379 3.345z"/>
+    <path d="M132.43 200.03a6.783 6.783 0 0 1-10.508-3.284.5.5 0 0 0-.963.27 7.773 7.773 0 0 0 12.108 3.785.5.5 0 0 0-.638-.771z"/>
+  </g>
+  <g fill="#f9f9fa">
+    <path d="M160.366 188.859a.5.5 0 0 1-.43-.754l1.345-2.283a.5.5 0 1 1 .861.508l-1.345 2.283a.5.5 0 0 1-.431.246z"/>
+    <path d="M161.086 192.527a.5.5 0 0 1-.43-.754l1.344-2.282a.5.5 0 1 1 .861.508l-1.345 2.282a.5.5 0 0 1-.43.246z"/>
+  </g>
+</svg>
--- a/browser/base/jar.mn
+++ b/browser/base/jar.mn
@@ -34,16 +34,17 @@ browser.jar:
         content/browser/abouthome/bookmarks@2x.png     (content/abouthome/bookmarks@2x.png)
         content/browser/abouthome/history@2x.png       (content/abouthome/history@2x.png)
         content/browser/abouthome/addons@2x.png        (content/abouthome/addons@2x.png)
         content/browser/abouthome/sync@2x.png          (content/abouthome/sync@2x.png)
         content/browser/abouthome/settings@2x.png      (content/abouthome/settings@2x.png)
         content/browser/abouthome/restore@2x.png       (content/abouthome/restore@2x.png)
         content/browser/abouthome/restore-large@2x.png (content/abouthome/restore-large@2x.png)
 
+        content/browser/illustrations/error-connection-failure.svg (content/illustrations/error-connection-failure.svg)
         content/browser/illustrations/error-server-not-found.svg (content/illustrations/error-server-not-found.svg)
         content/browser/illustrations/error-malformed-url.svg (content/illustrations/error-malformed-url.svg)
         content/browser/aboutNetError.xhtml            (content/aboutNetError.xhtml)
 
 #ifdef MOZ_SERVICES_HEALTHREPORT
         content/browser/abouthealthreport/abouthealth.xhtml   (content/abouthealthreport/abouthealth.xhtml)
         content/browser/abouthealthreport/abouthealth.js      (content/abouthealthreport/abouthealth.js)
         content/browser/abouthealthreport/abouthealth.css     (content/abouthealthreport/abouthealth.css)
--- a/browser/themes/shared/aboutNetError.css
+++ b/browser/themes/shared/aboutNetError.css
@@ -179,16 +179,24 @@ span#hostname {
   padding-inline-start: 38%;
 }
 
 .illustrated #errorPageContainer {
   background-repeat: no-repeat;
   background-size: 38%;
 }
 
+.connectionFailure #errorPageContainer,
+.netInterrupt #errorPageContainer,
+.netTimeout #errorPageContainer,
+.netReset #errorPageContainer,
+.netOffline #errorPageContainer {
+  background-image: url("chrome://browser/content/illustrations/error-connection-failure.svg");
+}
+
 .dnsNotFound #errorPageContainer {
   background-image: url("chrome://browser/content/illustrations/error-server-not-found.svg");
 }
 
 .malformedURI #errorPageContainer {
   background-image: url("chrome://browser/content/illustrations/error-malformed-url.svg");
 }