[Devtools] New structure and colorize rows for network products

third_party/WebKit/Source/devtools/front_end/network/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 143 matching lines @@
 }
 
 @-webkit-keyframes network-row-highlight-fadeout {
     from {background-color: rgba(255, 255, 120, 1); }
     to { background-color: rgba(255, 255, 120, 0); }
 }
 
 .network-header-subtitle {
     color: gray;
 }
+.network-log-grid.data-grid .product-ad::before,
+.network-log-grid.data-grid .product-tracking::before,
+.network-log-grid.data-grid .product-cdn::before {
+    content: "";
+    border-radius: 5px;
+    height: 5px;
+    width: 5px;
+    margin-right: 3px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.network-log-grid.data-grid .product-ad::before {
+    background-color: #00BCD4;
+}
+
+.network-log-grid.data-grid .product-tracking::before {
+    background-color: #FF9800;
+}
+
+.network-log-grid.data-grid .product-cdn::before {
+    background-color: #4CAF50;
+}
 
 .network-log-grid.data-grid.small .network-cell-subtitle,
 .network-log-grid.data-grid.small .network-header-subtitle {
     display: none;
 }
 
 /* Resource preview icons */
 
 .network-log-grid.data-grid .icon {
     content: url(Images/resourcePlainIcon.png);
@@ skipping 178 matching lines @@
     bottom: 1px;
     display: flex;
     align-items: center;
 }
 
 .network-waterfall-header .sort-order-icon {
     align-items: center;
     margin-right: 4px;
     margin-bottom: -2px;
 }