DevTools: Show badges instead of products in ConsoleContextSelector

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

 // Copyright 2015 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.
 /**
  * @implements {SDK.SDKModelObserver<!SDK.RuntimeModel>}
  * @implements {UI.ListDelegate<!SDK.ExecutionContext>}
  */
 Console.ConsoleContextSelector = class {
   constructor() {
     this._toolbarItem = new UI.ToolbarItem(createElementWithClass('button', 'console-context'));
     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();
     this._glassPane.setMarginBehavior(UI.GlassPane.MarginBehavior.NoMargin);
     this._glassPane.setAnchorBehavior(UI.GlassPane.AnchorBehavior.PreferBottom);
     this._glassPane.setOutsideClickCallback(this._hide.bind(this));
     this._glassPane.setPointerEventsBehavior(UI.GlassPane.PointerEventsBehavior.BlockedByGlassPane);
     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);
 
     this._listWasShowing200msAgo = false;
     this._toolbarItem.element.addEventListener('mousedown', event => {
       if (this._listWasShowing200msAgo)
         this._hide(event);
       else
         this._show(event);
     }, false);
@@ skipping 40 matching lines @@
 
   /**
    * @param {!Event} event
    */
   _show(event) {
     if (this._glassPane.isShowing())
       return;
     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);
   }
 
   _updateGlasspaneSize() {
     var maxHeight = this._rowHeight * (Math.min(this._list.length(), 9));
     this._glassPane.setMaxContentSize(new UI.Size(315, maxHeight));
     this._list.viewportResized();
   }
 
   /**
    * @param {!Event} event
    */
   _hide(event) {
     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);
   }
 
   /**
    * @param {!Event} event
    */
   _onKeyDown(event) {
     var handled = false;
     switch (event.key) {
       case 'ArrowUp':
@@ skipping 134 matching lines @@
         break;
       }
       target = target.parentTarget();
     }
     depth += targetDepth;
     return depth;
   }
 
   /**
    * @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.
     // This check could be removed once we do not send this context to frontend.
     if (!executionContext.target().hasJSCapability())
       return;
 
     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();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onExecutionContextCreated(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
     this._executionContextCreated(executionContext);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
     this._updateGlasspaneSize();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onExecutionContextChanged(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
     if (this._list.indexOfItem(executionContext) === -1)
       return;
     this._executionContextDestroyed(executionContext);
     this._executionContextCreated(executionContext);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
   }
 
   /**
    * @param {!SDK.ExecutionContext} executionContext
    */
   _executionContextDestroyed(executionContext) {
     if (this._list.indexOfItem(executionContext) === -1)
       return;
     this._list.removeItem(executionContext);
     this._updateGlasspaneSize();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onExecutionContextDestroyed(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
     this._executionContextDestroyed(executionContext);
-    this._updateSelectionWarning();
+    this._updateSelectionTitle();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _executionContextChangedExternally(event) {
     var executionContext = /** @type {?SDK.ExecutionContext} */ (event.data);
     if (!executionContext || this._list.indexOfItem(executionContext) === -1)
       return;
     this._list.selectItem(executionContext);
     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());
   }
 
   /**
    * @param {?SDK.ExecutionContext} executionContext
    * @return {boolean}
    */
   _isTopContext(executionContext) {
     if (!executionContext || !executionContext.isDefault)
@@ skipping 36 matching lines @@
   }
 
   /**
    * @override
    * @param {!SDK.ExecutionContext} item
    * @return {!Element}
    */
   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))
         this._list.selectItem(item, false, /* Don't scroll */ true);
     });
     element.classList.toggle('disabled', !this.isItemSelectable(item));
     return element;
   }
 
   /**
    * @param {!SDK.ExecutionContext} executionContext
    * @return {string}
    */
   _subtitleFor(executionContext) {
     var target = executionContext.target();
     if (executionContext.frameId) {
       var resourceTreeModel = target.model(SDK.ResourceTreeModel);
       var frame = resourceTreeModel && resourceTreeModel.frameForId(executionContext.frameId);
     }
     if (executionContext.origin.startsWith('chrome-extension://'))
       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 '';
   }
 
   /**
    * @override
    * @param {!SDK.ExecutionContext} item
    * @return {number}
    */
   heightForItem(item) {
-    return 0;
+    return this._rowHeight;
   }
 
   /**
    * @override
    * @param {!SDK.ExecutionContext} item
    * @return {boolean}
    */
   isItemSelectable(item) {
     var callFrame = item.debuggerModel.selectedCallFrame();
     var callFrameContext = callFrame && callFrame.script.executionContext();
@@ skipping 15 matching lines @@
     SDK.OverlayModel.hideDOMNodeHighlight();
     if (to && to.frameId) {
       var resourceTreeModel = to.target().model(SDK.ResourceTreeModel);
       if (resourceTreeModel)
         resourceTreeModel.domModel().overlayModel().highlightFrame(to.frameId);
     }
   }
 
   _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() {
     var callFrame = UI.context.flavor(SDK.DebuggerModel.CallFrame);
     var callFrameContext = callFrame && callFrame.script.executionContext();
     if (callFrameContext)
       UI.context.setFlavor(SDK.ExecutionContext, callFrameContext);
   }
 
   /**
@@ skipping 11 matching lines @@
    * @param {!Common.Event} event
    */
   _frameNavigated(event) {
     var frameId = event.data.id;
     for (var i = 0; i < this._list.length(); i++) {
       if (frameId === this._list.itemAtIndex(i).frameId)
         this._list.refreshItemsInRange(i, i + 1);
     }
   }
 };