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

Source/devtools/front_end/networkPanel.css

 /*
  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
  *     notice, this list of conditions and the following disclaimer.
@@ skipping 66 matching lines @@
 }
 
 .resource-timing-view {
     display: none;
     position: absolute;
     top: 0;
     right: 0;
     left: 0;
     bottom: 0;
     margin: 6px;
-    font-weight: bold;
-    font-size: 11px;
     color: rgb(30%, 30%, 30%);
 }
 
 .resource-timing-view table {
     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;
 }
 
-.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-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;
+}
+
+.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);
 }
 
 .resource-timing-view.visible {
     display: block;
 }
 
 .panel.network .split-view {
     flex: auto;
     position: relative;
 }
 
 .network-filters-header {
     flex: 0 0 23px;
     padding-right: 4px;
 }