diff --git a/browser/devtools/netmonitor/netmonitor-view.js b/browser/devtools/netmonitor/netmonitor-view.js
index 2adb4b24e42..b15bd0cad46 100644
--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/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 endCapNode = $(".requests-menu-timings-cap.end", timingsNode);
- let firstBox;
+ let timingsTotal = $(".requests-menu-timings-total", timingsNode);
// 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);
-
- // 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);
+ timingsNode.insertBefore(timingBox, timingsTotal);
}
}
- // 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;
}
},
diff --git a/browser/devtools/netmonitor/netmonitor.xul b/browser/devtools/netmonitor/netmonitor.xul
index 52603057c0d..ebcecd2fec1 100644
--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@@ -161,8 +161,6 @@
flex="1">
diff --git a/browser/themes/shared/devtools/netmonitor.inc.css b/browser/themes/shared/devtools/netmonitor.inc.css
index 55d087430cb..e3bebac2a54 100644
--- a/browser/themes/shared/devtools/netmonitor.inc.css
+++ b/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:
- 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);
+ background-color: rgba(95, 115, 135, 1); /* dark grey */
}
.theme-light box.requests-menu-status:not([code]) {
- box-shadow:
- 0 0 0 1px rgba(255,255,255,0.4) inset,
- 0 -6px 4px 0 rgba(32,32,32, 0.5) inset;
+ background-color: rgba(143, 161, 178, 1); /* grey */
}
.theme-dark box.requests-menu-status[code^="1"] {
- box-shadow:
- 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);
+ background-color: rgba(70, 175, 227, 1); /* light blue */
}
.theme-light box.requests-menu-status[code^="1"] {
- box-shadow:
- 0 0 2px 1px rgba(255,255,255,0.8) inset,
- 0 -6px 4px 0 rgba(0,0,128,1) inset;
+ background-color: rgba(0, 136, 204, 1); /* light blue */
}
.theme-dark box.requests-menu-status[code^="2"] {
- box-shadow:
- 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);
+ background-color: rgba(112, 191, 83, 1); /* green */
}
.theme-light box.requests-menu-status[code^="2"] {
- box-shadow:
- 0 0 2px 1px rgba(255,255,255,0.8) inset,
- 0 -6px 4px 0 rgba(0,128,0,1) inset;
+ background-color: rgba(44, 187, 15, 1); /* green */
}
.theme-dark box.requests-menu-status[code^="3"] {
- box-shadow:
- 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);
+ background-color: rgba(94, 136, 176, 1); /* grey */
}
.theme-light box.requests-menu-status[code^="3"] {
- box-shadow:
- 0 0 2px 1px rgba(255,255,255,0.8) inset,
- 0 -6px 4px 0 rgba(128,64,0,1) inset;
+ background-color: rgba(95, 136, 176, 1); /* blue grey */
}
.theme-dark box.requests-menu-status[code^="4"] {
- box-shadow:
- 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);
+ background-color: rgba(235, 83, 104, 1); /* red */
}
.theme-light box.requests-menu-status[code^="4"] {
- box-shadow:
- 0 0 2px 1px rgba(255,255,255,0.8) inset,
- 0 -6px 4px 0 rgba(128,0,0,1) inset;
+ background-color: rgba(237, 38, 85, 1); /* red */
}
.theme-dark box.requests-menu-status[code^="5"] {
- box-shadow:
- 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);
+ background-color: rgba(223, 128, 255, 1); /* pink? */
}
.theme-light box.requests-menu-status[code^="5"] {
- box-shadow:
- 0 0 2px 1px rgba(255,255,255,0.8) inset,
- 0 -6px 4px 0 rgba(128,0,128,1.0) inset;
+ background-color: rgba(184, 46, 229, 1); /* pink! */
}
/* 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