DevTools: Use badges to render products in timeline details.

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

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 ProductRegistry.BadgePool = class {
   constructor() {
     this._setting = Common.settings.moduleSetting('product_registry.badges-visible');
     this._setting.addChangeListener(this._settingUpdated.bind(this));
     /** @type {!Map<!Element, function():!Promise<!Common.ParsedURL>>}*/
     this._badgeElements = new Map();
   }
 
   /**
    * @param {!SDK.ResourceTreeFrame} frame
+   * @param {boolean=} showName
    * @return {!Element}
    */
-  badgeForFrame(frame) {
-    return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame));
+  badgeForFrame(frame, showName) {
+    return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame), showName);
   }
 
   /**
    * @param {!Common.ParsedURL} parsedUrl
+   * @param {boolean=} showName
    * @return {!Element}
    */
-  badgeForURL(parsedUrl) {
-    return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl));
+  badgeForURL(parsedUrl, showName) {
+    return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl), showName);
   }
 
   reset() {
     this._badgeElements.clear();
   }
 
   /**
    * @param {function():!Promise<!Common.ParsedURL>} urlResolver
+   * @param {boolean=} showName
    * @return {!Element}
    */
-  _badgeForFrameOrUrl(urlResolver) {
+  _badgeForFrameOrUrl(urlResolver, showName) {
     var element = createElement('span');
     var root = UI.createShadowRootWithCoreStyles(element, 'product_registry/badge.css');
-    var badgeElement = root.createChild('span', 'product-registry-badge monospace hidden');
-    badgeElement.setAttribute('data-initial', '  ');
-    badgeElement.title = '';
+    var badgeElement = root.createChild('span');
+    badgeElement.classList.toggle('hide-badge-title', !showName);

[pfeldman, 2017/05/18 20:18:33]

'hide'

[alph, 2017/05/18 22:56:02]

Done.

     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);
     return element;
   }
 
   /**
    * @param {?SDK.ResourceTreeFrame} frame
    * @return {!Promise<!Common.ParsedURL>}
    */
   async _resolveUrl(frame) {
     var registry = await ProductRegistry.instance();
     var parsedUrl = new Common.ParsedURL(frame.url);
     var entry = registry.entryForUrl(parsedUrl);
     if (!entry) {
       frame.findCreationCallFrame(callFrame => {
         if (!callFrame.url)
           return false;
         parsedUrl = new Common.ParsedURL(callFrame.url);
         return !!registry.entryForUrl(parsedUrl);
       });
     }
     return parsedUrl;
   }
 
   /**
-   * @param {!Element} badgeElement
+   * @param {!Element} element
    */
-  async _renderBadge(badgeElement) {
+  async _renderBadge(element) {

[pfeldman, 2017/05/18 20:18:33]

I thought you could do it in one line.

[alph, 2017/05/18 22:56:02]

I can't

     var registry = await ProductRegistry.instance();
-    if (!this._badgeElements.has(badgeElement))
+    if (!this._badgeElements.has(element))
       return;
-    var parsedUrl = await this._badgeElements.get(badgeElement)();
+    element.removeChildren();
+    element.classList.add('hidden');
+
+    var parsedUrl = await this._badgeElements.get(element)();
     var entryName = registry.nameForUrl(parsedUrl);
+    if (!entryName)
+      return;
 
-    if (!entryName) {
-      badgeElement.setAttribute('data-initial', '  ');
-      badgeElement.title = '';
-      badgeElement.style.removeProperty('background-color');
-      return;
-    }
+    var tokens = entryName.replace(/[a-z]*/g, '').split(' ');
+    var label = tokens.length > 1 ? tokens[0][0] + tokens[1][0] : entryName;
 
-    var label;
-    var tokens = entryName.replace(/[a-z]*/g, '').split(' ');
-    if (tokens.length > 1)
-      label = tokens[0][0] + tokens[1][0];
-    else
-      label = entryName;
-
+    var badgeElement = element.createChild('span', 'product-registry-badge monospace');
     badgeElement.setAttribute('data-initial', label.substring(0, 2).toUpperCase());
     badgeElement.title = entryName;
     badgeElement.style.backgroundColor = ProductRegistry.BadgePool.colorForEntryName(entryName);
-    badgeElement.classList.toggle('hidden', !this._setting.get());
+
+    element.createChild('span', 'badge-title').textContent = entryName;
+    element.classList.toggle('hidden', !this._setting.get());
   }
 
   _settingUpdated() {
     var enabled = this._setting.get();
     if (!enabled) {
       for (var badgeElement of this._badgeElements.keys())
         badgeElement.classList.add('hidden');
       return;
     }
     for (var badgeElement of this._badgeElements.keys())
@@ skipping 37 matching lines @@
    * @return {string}
    */
   static colorForEntryName(entryName) {
     if (!ProductRegistry.BadgePool._colorGenerator) {
       ProductRegistry.BadgePool._colorGenerator =
           new Common.Color.Generator({min: 30, max: 330}, {min: 50, max: 80, count: 3}, 80);
     }
     return ProductRegistry.BadgePool._colorGenerator.colorForID(entryName);
   }
 };