[Devtools] New network timeline experiment Part 1

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 58 matching lines @@
     line-height: 17px;
     height: 41px;
     border-left: 1px solid #e1e1e1;
     vertical-align: middle;
 }
 
 .network-log-grid.data-grid.small td {
     height: 21px;
 }
 
-.network-log-grid.data-grid th {
+.network-timeline-header, .network-log-grid.data-grid th {
     border-bottom: 1px solid rgb(205, 205, 205);
     border-left: 1px solid rgb(205, 205, 205);
     background: white;
 }
 
-.network-log-grid.data-grid .header-container {
+.network-timeline-header, .network-log-grid.data-grid .header-container {
     height: 31px;
 }
 
 .network-log-grid.data-grid .data-container {
     top: 31px;
 }
 
-.network-log-grid.data-grid.small .header-container {
+.network-timeline-header.small, .network-log-grid.data-grid.small .header-container {
     height: 27px;
 }
 
 .network-log-grid.data-grid.small .data-container {
     top: 27px;
 }
 
 .network-log-grid.data-grid select {
     -webkit-appearance: none;
     background-color: transparent;
@@ skipping 542 matching lines @@
     text-align: center;
     padding: 0 20px;
     overflow: auto;
 }
 
 .network-status-pane > .recording-hint {
     font-size: 14px;
     text-align: center;
     line-height: 28px;
 }
+
+.network-timeline-header {
+    position: absolute;
+    border-left: 0px;
+    width: 100%;
+    display: table;
+    z-index: 200;
+    background-color:transparent;
+}
+
+.network-timeline-header:hover {
+    background-color:hsla(0, 0%, 80%, .5);
+}
+
+.network-timeline-header div {
+    display: table-cell;
+    line-height: 14px;
+    margin: auto 0px;
+    vertical-align: middle;
+    text-align: left;
+    font-weight: normal;
+    padding: 0px 4px;
+    font-size: 11px;
+}
+
+.network-timeline-header .sort-order-icon-container {
+    position: absolute;
+    top: 1px;
+    right: 0;
+    bottom: 1px;
+    display: flex;
+    align-items: center;
+}
+
+.network-timeline-header .sort-order-icon {
+    margin-right: 4px;
+    background-image: url(Images/toolbarButtonGlyphs.png);
+    background-size: 352px 168px;
+    opacity: 0.5;
+    width: 8px;
+    height: 7px;
+    display: none;
+}
+
+.network-timeline-header .sort-ascending.sort-order-icon {
+    display: block;
+    background-position: -4px -111px;
+}
+
+.network-timeline-header .sort-descending.sort-order-icon {
+    display: block;
+    background-position: -20px -99px;
+}