#47 keep back compatibility

Author: janodvarko

chrome/content/network-content-script.js

@@ -23,8 +23,18 @@ window.on(EVENTS.RECEIVED_REQUEST_HEADERS, (event, from) => {
 
   // Append WebSocket icon in the UI
   var hbox = item._target;
-  var status = hbox.querySelector(".requests-menu-method");
-  status.classList.add("websocket");
+
+  var method = hbox.querySelector(".requests-menu-method");
+  method.classList.add("websocket");
+
+  // Fx 45 changed the DOM layout in the network panel and also
+  // the WS icon isn't overlapping the original status icon now.
+  // But, we need a little indentation for pre Fx45.
+  var statusIconNode = hbox.querySelector(".requests-menu-status-icon");
+  if (!statusIconNode) {
+    // We are in pre Fx45 world, use a little indentation.
+    method.classList.add("websocket-indent");
+  }
 
   // Register click handler and emit an event that is handled
   // in the 'WsmNetMonitorOverlay' overlay.

chrome/skin/classic/netmonitor.css

@@ -20,6 +20,13 @@
   filter: url(./filters.svg#invert);
 }
 
+/* The layout changed a bit in Fx45 and we need a little indentation
+ * of the background image for prev Fx45. See network-content-script.js
+ * for more details. */
+.requests-menu-method.websocket-indent {
+  background-position: 24px 1px;
+}
+
 .theme-firebug box.requests-menu-status.websocket {
   background-color: transparent !important;
 }