Optimizing error events by adding error css, centering the error resp…

…onse pane
venukbh · Aug 14, 2020 · 1fe1a24 · 1fe1a24
1 parent 76f1c68
commit 1fe1a24
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 5 deletions.
diff --git a/src/css/styles.css b/src/css/styles.css
@@ -21,6 +21,10 @@
   border-color: black;
 }
 
+.web_event_style_error {
+  color: #FF0000;
+}
+
 .web_event_list_hide {
   display: none;
 }
@@ -137,6 +141,10 @@
   border-bottom: 1px solid;
 }
 
+.web_event_response_header_details {
+  width: 100%;
+}
+
 .urls_list_heading {
   text-align: center;
   border: 1px solid;

diff --git a/src/html/http-tracker.html b/src/html/http-tracker.html
@@ -69,7 +69,7 @@
             <table id="request_headers_details"></table>
           </td>
           <td id="web_event_details_selected_response" class="web_event_detail_td">
-            <table id="response_headers_details"></table>
+            <table id="response_headers_details" class="web_event_response_header_details"></table>
           </td>
         </tr>
       </table>

diff --git a/src/js/httpTrackerProcessor.js b/src/js/httpTrackerProcessor.js
@@ -191,10 +191,11 @@ var eventTracker = (function() {
       // update the already captured url with details
       if (webEvent.callerName === "onErrorOccurred") {
         // onErrorOccurred, webEvent will have webEvent.error instead of webEvent.statusCode
-        document.getElementById("web_events_list_" + webEvent.requestIdEnhanced).style.color = "red";
+        document.getElementById("web_events_list_" + webEvent.requestIdEnhanced).classList.add("web_event_style_error");
         document.getElementById("web_event_status_" + webEvent.requestIdEnhanced).innerHTML = "ERROR";
       } else if (webEvent.statusCode) {
         // do not update if statusCode is not available (ex: service workers in firefox are missing response events)
+        document.getElementById("web_events_list_" + webEvent.requestIdEnhanced).classList.remove("web_event_style_error");
         document.getElementById("web_event_status_" + webEvent.requestIdEnhanced).innerHTML = webEvent.statusCode;
       }
       if (webEvent.fromCache !== undefined && webEvent.fromCache !== null) {
@@ -319,8 +320,7 @@ var eventTracker = (function() {
         }
       }
     } else {
-      tableContent = "Could not capture response for various reasons";
-      // console.debug("response is null");
+      tableContent = "<tr><td class='web_event_style_error' style='text-align: center;'>Response not available</td></tr>";
     }
     return tableContent + headersContent;
   }

diff --git a/src/js/openHttpTracker.js b/src/js/openHttpTracker.js
@@ -49,7 +49,7 @@ addOnWindowId = null;
 // open the addon window, or if already opened, bring to front
 // this will not open multiple windows when the addon icon is clicked
 function OpenAddonWindow() {
-  // console.debug("addOnWindowId" + addOnWindowId);
+  // console.debug("addOnWindowId: " + addOnWindowId);
   if (addOnWindowId) {
     httpTracker.webEventConsumer.windows.get(addOnWindowId, focusExistingWindow);
   } else {