DevTools: Show badges instead of products in ConsoleContextSelector

third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js

Index: third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js
diff --git a/third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js b/third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js
index d1ca0b8632ab404c7ba7056106ed50293c0aef2d..df8a564f5cf3b323494247e072b6d85f7ec53eb6 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js
@@ -11,12 +11,9 @@ Console.ConsoleContextSelector = class {
     var shadowRoot =
         UI.createShadowRootWithCoreStyles(this._toolbarItem.element, 'console/consoleContextSelectorButton.css');
     this._titleElement = shadowRoot.createChild('span', 'title');
-    this._productRegistry = null;
 
-    ProductRegistry.instance().then(registry => {
-      this._productRegistry = registry;
-      this._list.refreshAllItems();
-    });
+    // TODO (einbinder) this can leak elements when executionContexts are destroyed
+    this._badgePool = new ProductRegistry.BadgePool();
     this._toolbarItem.element.classList.add('toolbar-has-dropdown');
     this._toolbarItem.element.tabIndex = 0;
     this._glassPane = new UI.GlassPane();
@@ -27,7 +24,7 @@ Console.ConsoleContextSelector = class {
     this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
     this._list.element.classList.add('context-list');
     this._list.element.tabIndex = -1;
-    this._rowHeight = 34;
+    this._rowHeight = 36;
     UI.createShadowRootWithCoreStyles(this._glassPane.contentElement, 'console/consoleContextSelector.css')
         .appendChild(this._list.element);
 
@@ -88,9 +85,11 @@ Console.ConsoleContextSelector = class {
     this._glassPane.setContentAnchorBox(this._toolbarItem.element.boxInWindow());
     this._glassPane.show(/** @type {!Document} **/ (this._toolbarItem.element.ownerDocument));
     this._updateGlasspaneSize();
-    var selectedItem = this._list.selectedItem();
-    if (selectedItem)
-      this._list.scrollItemIntoView(selectedItem, true);
+    var selectedContext = UI.context.flavor(SDK.ExecutionContext);

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

Why do we need this?

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

Trying to update selection in the list as late as possible. This avoids creating
dom elements before the list is shown.

+    if (selectedContext) {
+      this._list.selectItem(selectedContext);
+      this._list.scrollItemIntoView(selectedContext, true);
+    }
     this._toolbarItem.element.focus();
     event.consume(true);
     setTimeout(() => this._listWasShowing200msAgo = true, 200);
@@ -109,9 +108,6 @@ Console.ConsoleContextSelector = class {
     setTimeout(() => this._listWasShowing200msAgo = false, 200);
     this._glassPane.hide();
     SDK.OverlayModel.hideDOMNodeHighlight();
-    var selectedContext = UI.context.flavor(SDK.ExecutionContext);
-    if (selectedContext)
-      this._list.selectItem(selectedContext);
     event.consume(true);
   }
 
@@ -266,6 +262,20 @@ Console.ConsoleContextSelector = class {
 
   /**
    * @param {!SDK.ExecutionContext} executionContext
+   * @return {?Element}
+   */
+  _badgeFor(executionContext) {
+    if (!executionContext.frameId)
+      return null;
+    var resourceTreeModel = executionContext.target().model(SDK.ResourceTreeModel);

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

Do it for the main worlds only.

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

I don't follow.

[pfeldman, 2017/05/17 18:12:41]

You are showing frame badges on the content scripts, no? I don't think you
should.

[einbinder, 2017/05/17 20:45:31]

Done. I think?

+    var frame = resourceTreeModel && resourceTreeModel.frameForId(executionContext.frameId);
+    if (!frame)
+      return null;
+    return this._badgePool.badgeForFrame(frame, true);
+  }
+
+  /**
+   * @param {!SDK.ExecutionContext} executionContext
    */
   _executionContextCreated(executionContext) {
     // FIXME(413886): We never want to show execution context for the main thread of shadow page in service/shared worker frontend.
@@ -275,10 +285,8 @@ Console.ConsoleContextSelector = class {
 
     this._list.insertItemWithComparator(executionContext, executionContext.runtimeModel.executionContextComparator());
 
-    if (executionContext === UI.context.flavor(SDK.ExecutionContext)) {
-      this._list.selectItem(executionContext);
-      this._updateSelectedContext();
-    }
+    if (executionContext === UI.context.flavor(SDK.ExecutionContext))
+      this._updateSelectionTitle();
   }
 
   /**
@@ -287,7 +295,7 @@ Console.ConsoleContextSelector = class {
   _onExecutionContextCreated(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
     this._executionContextCreated(executionContext);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
     this._updateGlasspaneSize();
   }
 
@@ -300,7 +308,7 @@ Console.ConsoleContextSelector = class {
       return;
     this._executionContextDestroyed(executionContext);
     this._executionContextCreated(executionContext);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
   }
 
   /**
@@ -319,7 +327,7 @@ Console.ConsoleContextSelector = class {
   _onExecutionContextDestroyed(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
     this._executionContextDestroyed(executionContext);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
   }
 
   /**
@@ -333,8 +341,12 @@ Console.ConsoleContextSelector = class {
     this._updateSelectedContext();
   }
 
-  _updateSelectionWarning() {
+  _updateSelectionTitle() {
     var executionContext = UI.context.flavor(SDK.ExecutionContext);
+    if (executionContext)
+      this._titleElement.textContent = this._titleFor(executionContext);
+    else
+      this._titleElement.textContent = '';
     this._toolbarItem.element.classList.toggle(
         'warning', !this._isTopContext(executionContext) && this._hasTopContext());
   }
@@ -391,7 +403,14 @@ Console.ConsoleContextSelector = class {
   createElementForItem(item) {
     var element = createElementWithClass('div', 'context');
     element.style.paddingLeft = (8 + this._depthFor(item) * 15) + 'px';
-    element.createChild('div', 'title').textContent = this._titleFor(item).trimEnd(100);
+    // var titleArea = element.createChild('div', 'title-area');
+    var title = element.createChild('div', 'title');
+    var badgeElement = this._badgeFor(item);
+    if (badgeElement) {
+      badgeElement.classList.add('badge');
+      title.appendChild(badgeElement);

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

When you discard the list item, it would be helpful to unlink badge from it -
otherwise you leak connected dom substree instead of leaking just one div.

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

Done.

+    }
+    title.createTextChild(this._titleFor(item).trimEnd(100));
     element.createChild('div', 'subtitle').textContent = this._subtitleFor(item);
     element.addEventListener('mousemove', e => {
       if ((e.movementX || e.movementY) && this.isItemSelectable(item))
@@ -415,27 +434,14 @@ Console.ConsoleContextSelector = class {
       return Common.UIString('Extension');
     if (!frame || !frame.parentFrame || frame.parentFrame.securityOrigin !== executionContext.origin) {
       var url = executionContext.origin.asParsedURL();
-      if (url) {
-        if (this._productRegistry) {
-          var product = this._productRegistry.nameForUrl(url);
-          if (product)
-            return product;
-        }
+      if (url)
         return url.domain();
-      }
     }
 
     if (frame) {
       var callFrame = frame.findCreationCallFrame(callFrame => !!callFrame.url);
-      if (callFrame) {
-        var url = new Common.ParsedURL(callFrame.url);
-        if (this._productRegistry) {
-          var product = this._productRegistry.nameForUrl(url);
-          if (product)
-            return product;
-        }
-        return url.domain();
-      }
+      if (callFrame)
+        return new Common.ParsedURL(callFrame.url).domain();
     }
     return '';
   }
@@ -446,7 +452,7 @@ Console.ConsoleContextSelector = class {
    * @return {number}
    */
   heightForItem(item) {
-    return 0;
+    return this._rowHeight;
   }
 
   /**
@@ -482,12 +488,8 @@ Console.ConsoleContextSelector = class {
 
   _updateSelectedContext() {
     var context = this._list.selectedItem();
-    if (context)
-      this._titleElement.textContent = this._titleFor(context);
-    else
-      this._titleElement.textContent = '';
     UI.context.setFlavor(SDK.ExecutionContext, context);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
   }
 
   _callFrameSelectedInUI() {