DevTools: Use badges to render products in timeline details.

third_party/WebKit/Source/devtools/front_end/product_registry/BadgePool.js

Index: third_party/WebKit/Source/devtools/front_end/product_registry/BadgePool.js
diff --git a/third_party/WebKit/Source/devtools/front_end/product_registry/BadgePool.js b/third_party/WebKit/Source/devtools/front_end/product_registry/BadgePool.js
index 31f719cf4e0d0d8e0a0305abd8df8a5501cf38f0..ca7734595de226b34934886d422e344850f2756a 100644
--- a/third_party/WebKit/Source/devtools/front_end/product_registry/BadgePool.js
+++ b/third_party/WebKit/Source/devtools/front_end/product_registry/BadgePool.js
@@ -12,18 +12,20 @@ ProductRegistry.BadgePool = class {
 
   /**
    * @param {!SDK.ResourceTreeFrame} frame
+   * @param {boolean=} showTitle
    * @return {!Element}
    */
-  badgeForFrame(frame) {
-    return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame));
+  badgeForFrame(frame, showTitle) {
+    return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame), showTitle);
   }
 
   /**
    * @param {!Common.ParsedURL} parsedUrl
+   * @param {boolean=} showTitle
    * @return {!Element}
    */
-  badgeForURL(parsedUrl) {
-    return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl));
+  badgeForURL(parsedUrl, showTitle) {
+    return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl), showTitle);
   }
 
   reset() {
@@ -32,20 +34,19 @@ ProductRegistry.BadgePool = class {
 
   /**
    * @param {function():!Promise<!Common.ParsedURL>} urlResolver
+   * @param {boolean=} showTitle
    * @return {!Element}
    */
-  _badgeForFrameOrUrl(urlResolver) {
+  _badgeForFrameOrUrl(urlResolver, showTitle) {
     var element = createElementWithClass('span', 'hidden');
     var root = UI.createShadowRootWithCoreStyles(element, 'product_registry/badge.css');
-    var badgeElement = root.createChild('span', 'product-registry-badge monospace');
-    badgeElement.setAttribute('data-initial', '  ');
-    badgeElement.title = '';
+    var badgeElement = root.createChild('span');
+    badgeElement.classList.toggle('hide-badge-title', !showTitle);
     badgeElement.addEventListener('mousedown', event => event.consume());
     badgeElement.addEventListener('click', event => {
       this._showPopup(badgeElement);
       event.consume();
     }, false);
-
     this._badgeElements.set(badgeElement, urlResolver);
     if (this._setting.get())
       this._renderBadge(badgeElement);
@@ -75,37 +76,40 @@ ProductRegistry.BadgePool = class {
    * @param {!Element} badgeElement
    */
   async _renderBadge(badgeElement) {
-    var registry = await ProductRegistry.instance();
     if (!this._badgeElements.has(badgeElement))
       return;
+    if (badgeElement.children.length) {
+      this._setBadgeElementHidden(badgeElement, false);
+      return;
+    }
+
     var parsedUrl = await this._badgeElements.get(badgeElement)();
+    var registry = await ProductRegistry.instance();
     var entryName = registry.nameForUrl(parsedUrl);
-
-    if (!entryName) {
-      badgeElement.setAttribute('data-initial', '  ');
-      badgeElement.title = '';
-      badgeElement.style.removeProperty('background-color');
+    if (!entryName)
       return;
-    }
 
-    var label;
     var tokens = entryName.replace(/[a-z]*/g, '').split(' ');
+    var label;
     if (tokens.length > 1)
       label = tokens[0][0] + tokens[1][0];
     else
       label = entryName;
 
-    badgeElement.setAttribute('data-initial', label.substring(0, 2).toUpperCase());
-    badgeElement.title = entryName;
-    badgeElement.style.backgroundColor = ProductRegistry.BadgePool.colorForEntryName(entryName);
-    badgeElement.parentNodeOrShadowHost().parentNodeOrShadowHost().classList.toggle('hidden', !this._setting.get());
+    var iconElement = badgeElement.createChild('span', 'product-registry-badge monospace');
+    iconElement.setAttribute('data-initial', label.substring(0, 2).toUpperCase());
+    iconElement.title = entryName;
+    iconElement.style.backgroundColor = ProductRegistry.BadgePool.colorForEntryName(entryName);
+
+    badgeElement.createChild('span', 'product-registry-badge-title').textContent = entryName;
+    this._setBadgeElementHidden(badgeElement, !this._setting.get());
   }
 
   _settingUpdated() {
     var enabled = this._setting.get();
     if (!enabled) {
       for (var badgeElement of this._badgeElements.keys())
-        badgeElement.parentNodeOrShadowHost().parentNodeOrShadowHost().classList.add('hidden');
+        this._setBadgeElementHidden(badgeElement, true);
       return;
     }
     for (var badgeElement of this._badgeElements.keys())
@@ -114,6 +118,14 @@ ProductRegistry.BadgePool = class {
 
   /**
    * @param {!Element} badgeElement
+   * @param {boolean} hide
+   */
+  _setBadgeElementHidden(badgeElement, hide) {
+    badgeElement.parentNodeOrShadowHost().parentNodeOrShadowHost().classList.toggle('hidden', hide);
+  }
+
+  /**
+   * @param {!Element} badgeElement
    */
   async _showPopup(badgeElement) {
     if (!this._badgeElements.has(badgeElement))