DevTools: Show badges instead of products in ConsoleContextSelector

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 814e27b7ba43d4699d47febbbc0c3763c040f78a..f334ca0b0158bd52ed14dc3b5593ec3b71bafb39 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=} notClickable
    * @return {!Element}
    */
-  badgeForFrame(frame) {
-    return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame));
+  badgeForFrame(frame, notClickable) {

[pfeldman, 2017/05/16 23:16:05]

pointer-events: none on the outer element should do the trick.

[einbinder, 2017/05/16 23:58:27]

That removes the title hover effect.

+    return this._badgeForFrameOrUrl(this._resolveUrl.bind(this, frame), notClickable);
   }
 
   /**
    * @param {!Common.ParsedURL} parsedUrl
+   * @param {boolean=} notClickable
    * @return {!Element}
    */
-  badgeForURL(parsedUrl) {
-    return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl));
+  badgeForURL(parsedUrl, notClickable) {
+    return this._badgeForFrameOrUrl(() => Promise.resolve(parsedUrl), notClickable);
   }
 
   reset() {
@@ -32,19 +34,24 @@ ProductRegistry.BadgePool = class {
 
   /**
    * @param {function():!Promise<!Common.ParsedURL>} urlResolver
+   * @param {boolean=} notClickable
    * @return {!Element}
    */
-  _badgeForFrameOrUrl(urlResolver) {
-    var element = createElement('span');
+  _badgeForFrameOrUrl(urlResolver, notClickable) {
+    var element = createElementWithClass('span', 'hidden');
     var root = UI.createShadowRootWithCoreStyles(element, 'product_registry/badge.css');
-    var badgeElement = root.createChild('span', 'product-registry-badge monospace hidden');
+    var badgeElement = root.createChild('span', 'product-registry-badge monospace');
     badgeElement.setAttribute('data-initial', '  ');
     badgeElement.title = '';
-    badgeElement.addEventListener('mousedown', event => event.consume());
-    badgeElement.addEventListener('click', event => {
-      this._showPopup(badgeElement);
-      event.consume();
-    }, false);
+    badgeElement.container = element;
+    if (!notClickable) {
+      badgeElement.classList.add('clickable');
+      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())
@@ -99,14 +106,14 @@ ProductRegistry.BadgePool = class {
     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());
+    badgeElement.container.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');
+        badgeElement.container.classList.add('hidden');
       return;
     }
     for (var badgeElement of this._badgeElements.keys())