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

Source/devtools/front_end/networkLogView.css

 /*
  * Copyright (C) 2013 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 271 matching lines @@
 .network-timeline-grid .resources-event-dividers,
 .network-timeline-grid .resources-dividers-label-bar {
     right: 12px;
     left: 12px;
 }
 
 .network-graph-label {
     position: absolute;
     top: 0;
     bottom: 0;
-    margin: auto -7px;
     height: 13px;
     line-height: 13px;
     font-size: 90%;
     color: rgba(0, 0, 0, 0.75);
     text-shadow: rgba(255, 255, 255, 0.25) 1px 0 0, rgba(255, 255, 255, 0.25) -1px 0 0, rgba(255, 255, 255, 0.333) 0 1px 0, rgba(255, 255, 255, 0.25) 0 -1px 0;
     z-index: 150;
     overflow: hidden;
     text-align: center;
     visibility: hidden;
 }
 
 .network-graph-side:hover .network-graph-label {
     visibility: visible;
 }
 
 .network-graph-label:empty {
     display: none;
 }
 
 .network-graph-label.waiting {
     margin-right: 5px;
 }
 
 .network-graph-label.before {
     color: rgba(0, 0, 0, 0.7);
     text-shadow: none;
     text-align: right;
-    margin-right: 2px;
+    margin-right: -2px;
 }
 
 .network-graph-label.before::after {
     padding-left: 2px;
     height: 6px;
     content: url(Images/graphLabelCalloutLeft.png);
 }
 
 .network-graph-label.after {
     color: rgba(0, 0, 0, 0.7);
     text-shadow: none;
     text-align: left;
-    margin-left: 2px;
+    margin-left: -1px;
 }
 
 .network-graph-label.after::before {
     padding-right: 2px;
     height: 6px;
     content: url(Images/graphLabelCalloutRight.png);
 }
 
 .network-graph-bar {
     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%));
 }
 
 .network-graph-bar.waiting {
     opacity: 0.35;
 }
 
 /* Resource categories */
 
 
 .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 {
     border-color: hsl(215, 49%, 52%);
     background: linear-gradient(0deg, hsl(215, 72%, 61%), hsl(215, 100%, 69%));
 }
 
 .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 {
     border-color: hsl(99, 34%, 52%);
     background: linear-gradient(0deg, hsl(100, 50%, 61%), hsl(90, 50%, 64%));
 }
 
 .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 {
     border-color: hsl(272, 31%, 52%);
     background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%));
 }
 
 .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 {
     border-color: hsl(272, 31%, 52%);
     background: linear-gradient(0deg, hsl(272, 46%, 61%), hsl(272, 64%, 69%));
 }
 
 .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 {
     border-color: hsl(8, 49%, 52%);
     background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%));
 }
 
 .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 {
     border-color: hsl(8, 49%, 52%);
     background: linear-gradient(0deg, hsl(8, 72%, 61%), hsl(8, 100%, 69%));
 }
 
 .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 {
     border-color: hsl(31, 49%, 52%);
     background: linear-gradient(0deg, hsl(31, 72%, 61%), hsl(31, 100%, 69%));
 }
 
 .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 {
     border-color: hsl(53, 49%, 52%);
     background: linear-gradient(0deg, hsl(53, 72%, 61%), hsl(53, 100%, 69%));
 }
 
 .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 {
     border-color: hsl(0, 0%, 65%);
     background: linear-gradient(0deg, hsl(0, 0%, 73%), hsl(0, 0%, 78%));
 }
 
 .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 {
     color: grey;
 }
 
 /* Dividers */
 
 .network-timeline-grid {
     position: absolute;
@@ skipping 75 matching lines @@
 
 #network-container {
     overflow-y: auto;
     overflow-x: hidden;
 }
 
 /* Brief mode peculiarities. */
 #network-container.brief-mode .network-timeline-grid {
     display: none;
 }