DevTools: [network] make timing colors consistent in popover and tab, remove...

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

R=eustas@chromium.org, vsevik@chromium.org

Review URL: https://codereview.chromium.org/474453002

git-svn-id: svn://svn.chromium.org/blink/trunk@180198 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/devtools/front_end/inspectorCommon.css

@@ -180,38 +180,6 @@ iframe.view {
     margin-right: -2px;
 }
 
-/* Network timing is shared between popover and network item view pane */
-
-.network-timing-table td {
-    padding: 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;
-    opacity: 0.4;
-    top: 0;
-    bottom: 0;
-}
-
-.network-timing-bar-title {
-    position: absolute;
-    color: #222;
-    top: 1px;
-}
-
 .highlighted-search-result {
     border-radius: 1px;
     padding: 1px;

third_party/WebKit/Source/devtools/front_end/networkLogView.css

@@ -289,7 +289,6 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    margin: auto -7px;
     height: 13px;
     line-height: 13px;
     font-size: 90%;
@@ -317,7 +316,7 @@
     color: rgba(0, 0, 0, 0.7);
     text-shadow: none;
     text-align: right;
-    margin-right: 2px;
+    margin-right: -2px;
 }
 
 .network-graph-label.before::after {
@@ -330,7 +329,7 @@
     color: rgba(0, 0, 0, 0.7);
     text-shadow: none;
     text-align: left;
-    margin-left: 2px;
+    margin-left: -1px;
 }
 
 .network-graph-label.after::before {
@@ -343,15 +342,12 @@
     position: absolute;
     top: 0;
     bottom: 0;
-    margin: auto -7px;
+    margin: auto -1px;
     height: 12px;
-    min-width: 14px;
+    min-width: 2px;
     opacity: 0.65;
     border-width: 1px;
     border-style: solid;
-    border-radius: 7px / 6px;
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8);
-
     border-color: hsl(0, 0%, 65%);
     background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%));
 }
@@ -365,9 +361,6 @@
 
 .network-graph-bar.cached {
     background: hsl(0, 0%, 90%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(0, 0%, 73%),
-                inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85);
 }
 
 .network-graph-bar.document {
@@ -377,9 +370,6 @@
 
 .network-graph-bar.cached.document {
     background: hsl(215, 99%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(215, 71%, 61%),
-                inset 0 1px 0 2px hsla(215, 58%, 65%, 0.85);
 }
 
 .network-graph-bar.stylesheet {
@@ -389,9 +379,6 @@
 
 .network-graph-bar.cached.stylesheet {
     background: hsl(99, 100%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(99, 72%, 61%),
-                inset 0 1px 0 2px hsla(99, 59%, 65%, 0.85);
 }
 
 .network-graph-bar.image {
@@ -401,9 +388,6 @@
 
 .network-graph-bar.cached.image {
     background: hsl(272, 65%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(272, 47%, 61%),
-                inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85);
 }
 
 .network-graph-bar.media {
@@ -413,9 +397,6 @@
 
 .network-graph-bar.cached.media {
     background: hsl(272, 65%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(272, 47%, 61%),
-                inset 0 1px 0 2px hsla(273, 38%, 65%, 0.85);
 }
 
 .network-graph-bar.font {
@@ -425,9 +406,6 @@
 
 .network-graph-bar.cached.font {
     background: hsl(8, 100%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(8, 72%, 61%),
-                inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85);
 }
 
 .network-graph-bar.texttrack {
@@ -437,9 +415,6 @@
 
 .network-graph-bar.cached.texttrack {
     background: hsl(8, 100%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(8, 72%, 61%),
-                inset 0 1px 0 2px hsla(8, 59%, 65%, 0.85);
 }
 
 .network-graph-bar.script {
@@ -449,9 +424,6 @@
 
 .network-graph-bar.cached.script {
     background: hsl(31, 100%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(31, 78%, 61%),
-                inset 0 1px 0 2px hsla(31, 64%, 65%, 0.85);
 }
 
 .network-graph-bar.xhr {
@@ -461,9 +433,6 @@
 
 .network-graph-bar.cached.xhr {
     background: hsl(53, 100%, 86%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(53, 72%, 61%),
-                inset 0 1px 0 2px hsla(54, 59%, 65%, 0.85);
 }
 
 .network-graph-bar.websocket {
@@ -473,9 +442,6 @@
 
 .network-graph-bar.cached.websocket {
     background: hsl(0, 0%, 90%);
-    box-shadow: inset 0 1px 1px 0px rgba(255, 255, 255, 0.8),
-                inset 0 0 0 2px hsl(0, 0%, 73%),
-                inset 0 1px 0 2px hsla(0, 0%, 76%, 0.85);
 }
 
 .network-dim-cell {

third_party/WebKit/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,40 +91,60 @@
     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;
+    min-width: 1px;
+    top: 0;
+    bottom: 0;
+}
+
+.network-timing-bar-title {
+    position: absolute;
+    color: #222;
+    top: 1px;
 }
 
-.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));
-    border-left: 1px solid rgb(204, 204, 102);
+.network-timing-bar.blocking,
+.network-timing-bar.proxy {
+    background-color: rgb(205, 205, 205);
 }
 
-.resource-timing-view .network-timing-bar.dns {
-    background-image: linear-gradient(to bottom, rgb(194, 242, 194), rgb(102, 204, 102));
-    border-left: 1px solid rgb(102, 204, 102);
+.network-timing-bar.dns {
+    background-color: rgb(31, 124, 131);
 }
 
-.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));
-    border-left: 1px solid rgb(102, 204, 204);
+.network-timing-bar.connecting,
+.network-timing-bar.ssl {
+    background-color: rgb(229, 130, 38);
 }
 
-.resource-timing-view .network-timing-bar.sending {
-    background-image: linear-gradient(to bottom, rgb(194, 194, 242), rgb(102, 102, 204));
-    border-left: 1px solid rgb(102, 102, 204);
+.network-timing-bar.sending {
+    background-color: rgb(95, 221, 95);
 }
 
-.resource-timing-view .network-timing-bar.waiting {
-    background-image: linear-gradient(to bottom, rgb(242, 194, 242), rgb(204, 102, 204));
-    border-left: 1px solid rgb(204, 102, 204);
+.network-timing-bar.waiting {
+    background-color: rgb(95, 221, 95);
 }
 
-.resource-timing-view .network-timing-bar.receiving {
-    background-image: linear-gradient(to bottom, rgb(242, 194, 194), rgb(204, 102, 102));
-    border-left: 1px solid rgb(204, 102, 102);
+.network-timing-bar.receiving {
+    background-color: rgb(65, 137, 215);
 }
 
 .resource-timing-view.visible {