DevTools: Use badges to render products in timeline details.

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 346 matching lines @@
 
 .timeline-details-chip-title > div {
     width: 12px;
     height: 12px;
     border: 1px solid rgba(0, 0, 0, 0.2);
     display: inline-block;
     margin-right: 4px;
     content: " ";
 }
 
-.timeline-details-view-row-title {
+.timeline-details-view-row-title:not(:empty) {
     color: rgb(152, 152, 152);
     overflow: hidden;
+    padding-right: 10px;
 }
 
 .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 {
     -webkit-user-select: text;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    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;
@@ skipping 246 matching lines @@
 
 .timeline-landing-warning-close {
     float: right;
     margin-top: -10px;
     margin-right: -13px;
 }
 
 .timeline-landing-warning span[is=ui-icon] {
     margin: -8px;
 }