DevTools: brush up new details cards on timeline.

third_party/WebKit/Source/devtools/front_end/timeline/timelinePanel.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 657 matching lines @@
 .timeline-details-view-body {
     flex: auto;
     overflow: auto;
     position: relative;
     background-color: #f3f3f3;
 }
 
 .timeline-details-view-block {
     flex: none;
     display: flex;
+    box-shadow: #ccc 1px 1px 3px;
+    background-color: white;
     flex-direction: column;
+    margin: 3px 4px;
+    padding-bottom: 5px;
 }
 
 .timeline-details-view-row {
+    padding-left: 10px;
+    flex-direction: row;
     display: flex;
-    box-shadow: #ccc 1px 1px 3px;
-    flex-direction: column;
-    background-color: white;
-    margin: 2px 3px;
-    padding: 3px 10px;
+    line-height: 21px;
+}
+
+.timeline-details-view-block .timeline-details-stack-values {
+    flex-direction: column !important;
+}
+
+.timeline-details-chip-title {
+    font-size: 13px;
+    padding: 8px;
+    display: flex;
+    align-items: center;
+}
+
+.timeline-details-chip-title > div {
+    width: 12px;
+    height: 12px;
+    display: inline-block;
+    margin-right: 4px;
+    content: " ";
 }
 
 .timeline-details-view-row-title {
     color: rgb(152, 152, 152);
-    line-height: 21px;
-    flex: none;
-    position: relative;
     overflow: hidden;
 }
 
-.timeline-details-warning .timeline-details-view-row-title::after {
-    width: 16px;
-    height: 16px;
-    background-color: red;
-    position: absolute;
-    right: -8px;
-    top: -8px;
-    transform: rotate(45deg);
-    content: "";
+.timeline-details-warning {
+    background-color: rgba(250, 209, 209, 0.48);
+}
+
+.timeline-details-warning .timeline-details-view-row-title {
+    color: red;
 }
 
 .timeline-details-warning .timeline-details-view-row-value {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 .timeline-details-view-row-value {
-    padding-left: 20px;
-    min-height: 20px;
-    line-height: 20px;
     -webkit-user-select: text;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    margin-right: 5px;
+    padding-left: 10px;
 }
 
 .timeline-details-view-row-value .stack-preview-container {
     line-height: 11px;
 }
 
 .timeline-details-view-row-value .timeline-details-warning-marker {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
 }
 
 .timeline-details-view-pie-chart-wrapper {
     margin: 4px 0;
 }
 
 .timeline-details-view-pie-chart {
     margin-top: 5px;
 }
 
 .timeline-details-view-pie-chart-total {
     width: 100px;
     margin-top: 10px;
     text-align: center;
 }
 
 .timeline-details-view-row-stack-trace {
+    padding: 4px 0;
     line-height: inherit;
 }
 
 .timeline-details-view-row-stack-trace div {
     white-space: nowrap;
     text-overflow: ellipsis;
     line-height: 12px;
 }
 
 .timeline-aggregated-info-legend > div {
@@ skipping 135 matching lines @@
 
 .timeline-gap {
     flex: none;
 }
 
 .timeline-filmstrip-preview {
     margin-top: 10px;
     max-width: 200px;
     max-height: 200px;
     cursor: pointer;
+    border: 1px solid #ddd;
 }
 
 .timeline-overview-popover .frame .time {
     display: none;
 }
 
 .timeline-overview-popover .frame .thumbnail img {
     max-width: 200px;
 }
 
@@ skipping 117 matching lines @@
 }
 
 .timeline-tree-view .data-grid .data-container {
     top: 21px;
 }
 
 .timeline-tree-view .data-grid th {
     border-bottom: 1px solid #ddd;
     background-color: #f3f3f3
 }