DevTools: [network] make timing colors consistent in popover and tab, remove box shadows and round …

Source/devtools/front_end/networkPanel.css

Index: Source/devtools/front_end/networkPanel.css
diff --git a/Source/devtools/front_end/networkPanel.css b/Source/devtools/front_end/networkPanel.css
index abfae07141493922d3be38162b4e257854fa1e00..c8b701fd61b150dd5e6488d3910d911a03a199bf 100644
--- a/Source/devtools/front_end/networkPanel.css
+++ b/Source/devtools/front_end/networkPanel.css
@@ -84,8 +84,6 @@
     left: 0;
     bottom: 0;
     margin: 6px;
-    font-weight: bold;
-    font-size: 11px;
     color: rgb(30%, 30%, 30%);
 }
 
@@ -93,39 +91,66 @@
     border-spacing: 21px 0;
 }
 
-.resource-timing-view .network-timing-bar {
-    opacity: 1;
+/* Network timing is shared between popover and network item view pane */
+
+.network-timing-table td {
+    padding: 2px 0;
+}
+
+.network-timing-table td.caution {
+    font-weight: bold;
+    color: rgb(255, 128, 0);
+    padding: 2px 0;
+}
+
+.network-timing-row {
+    position: relative;
+    height: 16px;
+}
+
+.network-timing-bar {
+    position: absolute;
+    background-color: red;
+    border-left: 1px solid red;
+    top: 0;
+    bottom: 0;
+}
+
+.network-timing-bar-title {
+    position: absolute;
+    color: #222;
+    top: 2px;
 }
 
-.resource-timing-view .network-timing-bar.blocking,
-.resource-timing-view .network-timing-bar.proxy {
-    background-image: linear-gradient(to bottom, rgb(242, 242, 194), rgb(204, 204, 102));
+.network-timing-bar.blocking,
+.network-timing-bar.proxy {
+    background-color: rgb(242, 242, 194);
     border-left: 1px solid rgb(204, 204, 102);
 }
 
-.resource-timing-view .network-timing-bar.dns {
-    background-image: linear-gradient(to bottom, rgb(194, 242, 194), rgb(102, 204, 102));
+.network-timing-bar.dns {
     border-left: 1px solid rgb(102, 204, 102);
+    background-color: rgb(194, 242, 194);
 }
 
-.resource-timing-view .network-timing-bar.connecting,
-.resource-timing-view .network-timing-bar.ssl {
-    background-image: linear-gradient(to bottom, rgb(194, 242, 242), rgb(102, 204, 204));
+.network-timing-bar.connecting,
+.network-timing-bar.ssl {
+    background-color: rgb(194, 242, 242);
     border-left: 1px solid rgb(102, 204, 204);
 }
 
-.resource-timing-view .network-timing-bar.sending {
-    background-image: linear-gradient(to bottom, rgb(194, 194, 242), rgb(102, 102, 204));
+.network-timing-bar.sending {
+    background-color: rgb(194, 194, 242);
     border-left: 1px solid rgb(102, 102, 204);
 }
 
-.resource-timing-view .network-timing-bar.waiting {
-    background-image: linear-gradient(to bottom, rgb(242, 194, 242), rgb(204, 102, 204));
+.network-timing-bar.waiting {
+    background-color: rgb(242, 194, 242);
     border-left: 1px solid rgb(204, 102, 204);
 }
 
-.resource-timing-view .network-timing-bar.receiving {
-    background-image: linear-gradient(to bottom, rgb(242, 194, 194), rgb(204, 102, 102));
+.network-timing-bar.receiving {
+    background-color: rgb(242, 194, 194);
     border-left: 1px solid rgb(204, 102, 102);
 }