Bug 909251 - DevTools Themes - Improve UI for timeline in netmonitor

Bug 909251 - DevTools Themes - Improve UI for timeline in netmonitor; r=vporof

browser/devtools/netmonitor/netmonitor-view.js

@@ -1103,9 +1103,7 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     // Skipping "blocked" because it doesn't work yet.
 
     let timingsNode = $(".requests-menu-timings", target);
-    let startCapNode = $(".requests-menu-timings-cap.start", timingsNode);
+    let timingsTotal = $(".requests-menu-timings-total", timingsNode);
-    let endCapNode = $(".requests-menu-timings-cap.end", timingsNode);
-    let firstBox;
 
     // Add a set of boxes representing timing information.
     for (let key of sections) {
@@ -1117,23 +1115,10 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
         let timingBox = document.createElement("hbox");
         timingBox.className = "requests-menu-timings-box " + key;
         timingBox.setAttribute("width", width);
-        timingsNode.insertBefore(timingBox, endCapNode);
+        timingsNode.insertBefore(timingBox, timingsTotal);
-
-        // Make the start cap inherit the aspect of the first timing box.
-        if (!firstBox) {
-          firstBox = timingBox;
-          startCapNode.classList.add(key);
-        }
-        // Same goes for the end cap, inherit the aspect of the last timing box.
-        endCapNode.classList.add(key);
       }
     }
 
-    // Since at least one timing box should've been rendered, unhide the
-    // start and end timing cap nodes.
-    startCapNode.hidden = false;
-    endCapNode.hidden = false;
-
     // Don't paint things while the waterfall view isn't even visible.
     if (NetMonitorView.currentFrontendMode != "network-inspector-view") {
       return;
@@ -1174,8 +1159,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
     // accurately translate and resize as needed.
     for (let { target, attachment } of this) {
       let timingsNode = $(".requests-menu-timings", target);
-      let startCapNode = $(".requests-menu-timings-cap.start", target);
-      let endCapNode = $(".requests-menu-timings-cap.end", target);
       let totalNode = $(".requests-menu-timings-total", target);
       let direction = window.isRTL ? -1 : 1;
 
@@ -1192,8 +1175,6 @@ RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
       let revScaleX = "scaleX(" + (1 / scale) + ")";
 
       timingsNode.style.transform = scaleX + " " + translateX;
-      startCapNode.style.transform = revScaleX + " translateX(" + (direction * 0.5) + "px)";
-      endCapNode.style.transform = revScaleX + " translateX(" + (direction * -0.5) + "px)";
       totalNode.style.transform = revScaleX;
     }
   },

browser/devtools/netmonitor/netmonitor.xul

@@ -161,8 +161,6 @@
                 flex="1">
             <hbox class="requests-menu-timings"
                   align="center">
-              <hbox class="start requests-menu-timings-cap" hidden="true"/>
-              <hbox class="end requests-menu-timings-cap" hidden="true"/>
               <label class="plain requests-menu-timings-total"/>
             </hbox>
           </hbox>

browser/themes/shared/devtools/netmonitor.inc.css

@@ -158,81 +158,51 @@ box.requests-menu-status {
 }
 
 .theme-dark box.requests-menu-status:not([code]) {
-  box-shadow:
+  background-color: rgba(95, 115, 135, 1); /* dark grey */
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
 }
 
 .theme-light box.requests-menu-status:not([code]) {
-  box-shadow:
+  background-color: rgba(143, 161, 178, 1); /* grey */
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32, 0.5) inset;
 }
 
 .theme-dark box.requests-menu-status[code^="1"] {
-  box-shadow:
+  background-color: rgba(70, 175, 227, 1); /* light blue */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
 }
 
 .theme-light box.requests-menu-status[code^="1"] {
-  box-shadow:
+  background-color: rgba(0, 136, 204, 1); /* light blue */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,128,1) inset;
 }
 
 .theme-dark box.requests-menu-status[code^="2"] {
-  box-shadow:
+  background-color: rgba(112, 191, 83, 1); /* green */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
 }
 
 .theme-light box.requests-menu-status[code^="2"] {
-  box-shadow:
+  background-color: rgba(44, 187, 15, 1); /* green */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,128,0,1) inset;
 }
 
 .theme-dark box.requests-menu-status[code^="3"] {
-  box-shadow:
+  background-color: rgba(94, 136, 176, 1); /* grey */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
 }
 
 .theme-light box.requests-menu-status[code^="3"] {
-  box-shadow:
+  background-color: rgba(95, 136, 176, 1); /* blue grey */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(128,64,0,1) inset;
 }
 
 .theme-dark box.requests-menu-status[code^="4"] {
-  box-shadow:
+  background-color: rgba(235, 83, 104, 1); /* red */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
 }
 
 .theme-light box.requests-menu-status[code^="4"] {
-  box-shadow:
+  background-color: rgba(237, 38, 85, 1); /* red */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(128,0,0,1) inset;
 }
 
 .theme-dark box.requests-menu-status[code^="5"] {
-  box-shadow:
+  background-color: rgba(223, 128, 255, 1); /* pink? */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
 }
 
 .theme-light box.requests-menu-status[code^="5"] {
-  box-shadow:
+  background-color: rgba(184, 46, 229, 1); /* pink! */
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(128,0,128,1.0) inset;
 }
 
 /* Network requests table: waterfall header */
@@ -294,7 +264,7 @@ box.requests-menu-status {
 /* Network requests table: waterfall items */
 
 .requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
+  -moz-padding-start: 0px;
   -moz-padding-end: 4px;
   background-repeat: repeat-y; /* Background created on a <canvas> in js. */
   background-position: -1px center;
@@ -323,129 +293,50 @@ box.requests-menu-status {
 }
 
 .requests-menu-timings-total {
-  -moz-padding-start: 8px;
+  -moz-padding-start: 4px;
   font-size: 85%;
   font-weight: 600;
 }
 
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 8px;
-  box-shadow: none !important;
-}
-
-.theme-dark .requests-menu-timings-cap {
-  border: 1px solid #b8c8d9; /* Light content text */
-}
-
-.theme-light .requests-menu-timings-cap {
-  border: 1px solid #292e33; /* Dark content text */
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
 .requests-menu-timings-box {
-  height: 8px;
+  height: 9px;
 }
 
-.theme-dark .requests-menu-timings-box {
+.requests-menu-timings-box.blocked {
-  border-top: 1px solid #b8c8d9; /* Light content text */
+  background-color: rgba(235, 83, 104, 0.8); /* red */
-  border-bottom: 1px solid #b8c8d9;
 }
 
-.theme-light .requests-menu-timings-box {
+.requests-menu-timings-box.dns {
-  border-top: 1px solid #292e33; /* Dark content text */
+  background-color: rgba(223, 128, 255, 0.8); /* pink */
-  border-bottom: 1px solid #292e33;
 }
 
-.requests-menu-timings-box.blocked,
+.requests-menu-timings-box.connect {
-.requests-menu-timings-cap.blocked {
+  background-color: rgba(217, 102, 41, 0.8); /* orange */
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 2px 0 rgba(128,32,32,0.8),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 2px 0 rgba(128,128,255,1.0),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 2px 0 rgba(128,128,16,0.8),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
 }
 
 /* Use custom colors for dark and light theme on remaining timing types. */
-.theme-dark .requests-menu-timings-box.send,
+.theme-dark .requests-menu-timings-box.send {
-.theme-dark .requests-menu-timings-cap.send {
+  background-color: rgba(70, 175, 227, 0.8); /* light blue */
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 2px 0 rgba(128,255,128,0.8),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
 }
 
-.theme-light .requests-menu-timings-box.send,
+.theme-light .requests-menu-timings-box.send {
-.theme-light .requests-menu-timings-cap.send {
+  background-color: rgba(0, 136, 204, 0.8); /* blue */
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 2px 0 rgba(128,255,128,0.8),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
 }
 
-.theme-dark .requests-menu-timings-box.wait,
+.theme-dark .requests-menu-timings-box.wait {
-.theme-dark .requests-menu-timings-cap.wait {
+  background-color: rgba(94, 136, 176, 0.8); /* blue grey */
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 2px 0 rgba(128,255,255,0.4),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
 }
 
-.theme-light .requests-menu-timings-box.wait,
+.theme-light .requests-menu-timings-box.wait {
-.theme-light .requests-menu-timings-cap.wait {
+  background-color: rgba(95, 136, 176, 0.8); /* blue grey */
-  background-color: rgba(200, 200, 200, 0.8);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.4),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
 }
 
-.theme-dark .requests-menu-timings-box.receive,
+.theme-dark .requests-menu-timings-box.receive {
-.theme-dark .requests-menu-timings-cap.receive {
+  background-color: rgba(112, 191, 83, 0.8); /* green */
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 2px 0 rgba(128,255,255,1.0),
-              0 0 1px 0 rgba(255,255,255,1.0) inset;
 }
 
-.theme-light .requests-menu-timings-box.receive,
+.theme-light .requests-menu-timings-box.receive {
-.theme-light .requests-menu-timings-cap.receive {
+  background-color: rgba(44, 187, 15, 0.8); /* green */
-  background-color: rgba(0, 0, 0, 0.6);
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8),
-              0 0 1px 0 rgba(0,0,0,1.0) inset;
 }
 
 /* SideMenuWidget */