Highlight failed requests

Closes #110

src/assets/styles/base.scss

@@ -24,6 +24,9 @@ $success-color-dark: darken($success-color, 20%);
 $warning-color-dark: darken($warning-color, 20%);
 $error-color-dark: darken($error-color, 20%);
 
+$warning-color-background: #fcebeb;
+$dark-warning-color-background: #AE0303;
+
 @font-face {
   font-family: 'Source Sans Pro';
   font-style: normal;
@@ -84,4 +87,4 @@ label.disabled input {
   &:hover {
     color: #fff;
   }
-}
+}

src/devtools/panel.js

@@ -919,6 +919,27 @@ window.Omnibug = (() => {
         requestPanel.appendChild(request);
     }
 
+    function addRequestError({ request }) {
+        let errorRequests = d.querySelectorAll(`.request[data-request-id="${request.id}"]`);
+        errorRequests.forEach((entryElement) => {
+            entryElement.classList.add("request-error");
+
+            const warningIcon = createElement("i", {
+                "classes": ["fas", "fa-exclamation-triangle", "request-error-icon"],
+                "title": "This request was not successful",
+            });
+            const entryTitle = entryElement.querySelector("summary > .container .label + span");
+            entryTitle.append(warningIcon);
+
+            const entryDetailsElement = entryElement.querySelector("div.redirect");
+            const errorInfoPanel = createElement("div", {
+                "classes": ["request-error-message"],
+                "text": "This request was NOT successful because " + ((typeof request.error === "number") ? `the server rejected it (HTTP ${request.error})` : `your browser stopped this request (${request.error})`),
+            });
+            entryDetailsElement.parentNode.insertBefore(errorInfoPanel, entryDetailsElement);
+        });
+    }
+
     /**
      * Load in new settings/styles
      *
@@ -1197,6 +1218,9 @@ window.Omnibug = (() => {
                 case "webNavigation":
                     addNavigation(message);
                     break;
+                case "requestError":
+                    addRequestError(message);
+                    break;
                 case "settings":
                     loadSettings(message.data, true);
                     break;

src/devtools/panel.scss

@@ -100,14 +100,29 @@ nav.navbar {
 
   .redirected:hover .redirect-icon,
   .redirected:focus .redirect-icon {
-    color: $error-color;
+    color: red;
   }
-}
-.request:nth-of-type(odd) {
-  background-color: $body-background-color;
-}
-.request:nth-of-type(even) {
-  background-color: darken($body-background-color, 5%);
+  &:nth-of-type(odd) {
+    background-color: $body-background-color;
+    &.request-error > summary {
+      background-color: $warning-color-background;
+    }
+  }
+  &:nth-of-type(even) {
+    background-color: darken($body-background-color, 5%);
+    &.request-error > summary {
+      background-color: darken($warning-color-background, 5%);
+    }
+  }
+  &.request-error {
+    > summary {
+      color: $dark-warning-color-background;
+    }
+    .request-note {
+      margin-top: 0.4rem;
+    }
+  }
+
 }
 @keyframes request-highlight-odd {
   0% {
@@ -174,6 +189,17 @@ nav.navbar {
     color: $warning-color;
   }
 }
+.request.request-error {
+  .request-error-icon {
+    margin-left: 0.25rem;
+  }
+  .request-error-message {
+    padding: 0.15rem 0.25rem;
+    border: 0;
+    background: $dark-warning-color-background;
+    color: white;
+  }
+}
 .request.multipled {
   .multiple-icon {
     margin-left: .5em;
@@ -403,9 +429,18 @@ body.dark {
 
   .request:nth-of-type(odd) {
     background-color: $dark-body-background-color;
+    &.request-error > summary {
+      background-color: $dark-warning-color-background;
+    }
   }
   .request:nth-of-type(even) {
     background-color: darken($dark-body-background-color, 5%);
+    &.request-error > summary {
+      background-color: darken($dark-warning-color-background, 5%);
+    }
+  }
+  .request.request-error > summary {
+    color: $warning-color-background;
   }
 
   .request:nth-of-type(odd):not([open]) {
@@ -445,6 +480,11 @@ body.dark {
     border-color: #000;
   }
 
+  .request-error-message {
+    background: $dark-warning-color-background;
+    color: $warning-color-background;
+  }
+
   .request-note input:hover,
   .request-note input:focus {
     background: lighten($dark-body-background-alt-color, 15%);
@@ -530,4 +570,4 @@ body.dark {
   ::-webkit-scrollbar-thumb {
     background-color: darken($dark-body-background-color, 5%);
   }
-}
+}

src/eventPage.js

@@ -121,10 +121,47 @@
         ["requestBody"]
     );
 
+    // HTTP 4xx/5xx Errors
+    chrome.webRequest.onHeadersReceived.addListener(
+        (details) => {
+            // Ignore any requests for windows where devtools isn't open, or options requests
+            if (details.method === "OPTIONS" || !isValidTab(details.tabId) || !cached.pattern.test(details.url) || details.statusCode < 400) {
+                return;
+            }
+            tabs[details.tabId].port.postMessage({
+                "request": {
+                    "id": details.requestId,
+                    "error": details.statusCode,
+                },
+                "event": "requestError"
+            });
+        },
+        { urls: ["<all_urls>"]}
+    );
+
+    // Cancelled/blocked requests (other extensions e.g. adblockers, network errors, etc.)
+    chrome.webRequest.onErrorOccurred.addListener(
+        (details) => {
+            // Ignore any requests for windows where devtools isn't open, or options requests
+            if (details.method === "OPTIONS" || !isValidTab(details.tabId) || (!cached.pattern.test(details.url) && !/\/.well-known\//i.test(details.url))) {
+                return;
+            }
+            console.log("onErrorOccurred error:", details.url, details);
+            tabs[details.tabId].port.postMessage({
+                "request": {
+                    "id": details.requestId,
+                    "error": details.error,
+                },
+                "event": "requestError"
+            });
+        },
+        { urls: ["<all_urls>"]}
+    );
+
     /**
      * Listen for all navigations that occur on a top-level frame
      */
-    chrome.webNavigation.onBeforeNavigate.addListener(
+    chrome.webNavigation.onCommitted.addListener(
         (details) => {
             if (isValidTab(details.tabId) && details.frameId === 0) {
                 // We have a page load within a tab we care about, send a message to the devtools with the info