[DevTools] Introduce Common.List used as a backend for list controls

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');
 
     /** @type {!Map<!SDK.ExecutionContext, !ProductRegistry.BadgePool>} */
     this._badgePoolForExecutionContext = new Map();
 
     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);
+    /** @type {!UI.ListControl<!SDK.ExecutionContext>} */
     this._list = new UI.ListControl(this, UI.ListMode.EqualHeightItems);
     this._list.element.classList.add('context-list');
+    this._items = this._list.source();
     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);
@@ skipping 52 matching lines @@
     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));
+    var maxHeight = this._rowHeight * (Math.min(this._items.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();
@@ skipping 10 matching lines @@
       case 'ArrowUp':
         handled = this._list.selectPreviousItem(false, false);
         break;
       case 'ArrowDown':
         handled = this._list.selectNextItem(false, false);
         break;
       case 'ArrowRight':
         var currentExecutionContext = this._list.selectedItem();
         if (!currentExecutionContext)
           break;
-        var nextExecutionContext = this._list.itemAtIndex(this._list.selectedIndex() + 1);
+        var nextExecutionContext = this._items.itemAtIndex(this._list.selectedIndex() + 1);
         if (nextExecutionContext && this._depthFor(currentExecutionContext) < this._depthFor(nextExecutionContext))
           handled = this._list.selectNextItem(false, false);
         break;
       case 'ArrowLeft':
         var currentExecutionContext = this._list.selectedItem();
         if (!currentExecutionContext)
           break;
         var depth = this._depthFor(currentExecutionContext);
         for (var i = this._list.selectedIndex() - 1; i >= 0; i--) {
-          if (this._depthFor(this._list.itemAtIndex(i)) < depth) {
+          if (this._depthFor(this._items.itemAtIndex(i)) < depth) {
             handled = true;
-            this._list.selectItem(this._list.itemAtIndex(i), false);
+            this._list.selectItem(this._items.itemAtIndex(i), false);
             break;
           }
         }
         break;
       case 'PageUp':
         handled = this._list.selectItemPreviousPage(false);
         break;
       case 'PageDown':
         handled = this._list.selectItemNextPage(false);
         break;
       case 'Home':
-        for (var i = 0; i < this._list.length(); i++) {
-          if (this.isItemSelectable(this._list.itemAtIndex(i))) {
-            this._list.selectItem(this._list.itemAtIndex(i));
+        for (var i = 0; i < this._items.length(); i++) {
+          if (this.isItemSelectable(this._items.itemAtIndex(i))) {
+            this._list.selectItem(this._items.itemAtIndex(i));
             handled = true;
             break;
           }
         }
         break;
       case 'End':
-        for (var i = this._list.length() - 1; i >= 0; i--) {
-          if (this.isItemSelectable(this._list.itemAtIndex(i))) {
-            this._list.selectItem(this._list.itemAtIndex(i));
+        for (var i = this._items.length() - 1; i >= 0; i--) {
+          if (this.isItemSelectable(this._items.itemAtIndex(i))) {
+            this._list.selectItem(this._items.itemAtIndex(i));
             handled = true;
             break;
           }
         }
         break;
       case 'Escape':
         this._hide(event);
         break;
       case 'Tab':
         if (!this._glassPane.isShowing())
           break;
         this._updateSelectedContext();
         this._hide(event);
         break;
       case 'Enter':
         if (!this._glassPane.isShowing()) {
           this._show(event);
           break;
         }
         this._updateSelectedContext();
         this._hide(event);
         break;
       case ' ':
         this._show(event);
         break;
       default:
         if (event.key.length === 1) {
           var selectedIndex = this._list.selectedIndex();
           var letter = event.key.toUpperCase();
-          for (var i = 0; i < this._list.length(); i++) {
-            var context = this._list.itemAtIndex((selectedIndex + i + 1) % this._list.length());
+          for (var i = 0; i < this._items.length(); i++) {
+            var context = this._items.itemAtIndex((selectedIndex + i + 1) % this._items.length());
             if (this._titleFor(context).toUpperCase().startsWith(letter)) {
               this._list.selectItem(context);
               break;
             }
           }
           handled = true;
         }
         break;
     }
 
@@ skipping 82 matching lines @@
 
   /**
    * @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());
+    this._items.insertItemWithComparator(executionContext, executionContext.runtimeModel.executionContextComparator());
 
     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._updateSelectionTitle();
     this._updateGlasspaneSize();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onExecutionContextChanged(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
-    if (this._list.indexOfItem(executionContext) === -1)
+    if (this._items.indexOfItem(executionContext) === -1)
       return;
     this._executionContextDestroyed(executionContext);
     this._executionContextCreated(executionContext);
     this._updateSelectionTitle();
   }
 
   /**
    * @param {!SDK.ExecutionContext} executionContext
    */
   _executionContextDestroyed(executionContext) {
-    if (this._list.indexOfItem(executionContext) === -1)
+    if (this._items.indexOfItem(executionContext) === -1)
       return;
     this._disposeExecutionContextBadge(executionContext);
-    this._list.removeItem(executionContext);
+    this._items.removeItem(executionContext);
     this._updateGlasspaneSize();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onExecutionContextDestroyed(event) {
     var executionContext = /** @type {!SDK.ExecutionContext} */ (event.data);
     this._executionContextDestroyed(executionContext);
     this._updateSelectionTitle();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _executionContextChangedExternally(event) {
     var executionContext = /** @type {?SDK.ExecutionContext} */ (event.data);
-    if (!executionContext || this._list.indexOfItem(executionContext) === -1)
+    if (!executionContext || this._items.indexOfItem(executionContext) === -1)
       return;
     this._list.selectItem(executionContext);
     this._updateSelectedContext();
   }
 
   _updateSelectionTitle() {
     var executionContext = UI.context.flavor(SDK.ExecutionContext);
     if (executionContext)
       this._titleElement.textContent = this._titleFor(executionContext);
     else
@@ skipping 13 matching lines @@
     var frame = executionContext.frameId && resourceTreeModel && resourceTreeModel.frameForId(executionContext.frameId);
     if (!frame)
       return false;
     return frame.isMainFrame();
   }
 
   /**
    * @return {boolean}
    */
   _hasTopContext() {
-    for (var i = 0; i < this._list.length(); i++) {
-      if (this._isTopContext(this._list.itemAtIndex(i)))
+    for (var i = 0; i < this._items.length(); i++) {
+      if (this._isTopContext(this._items.itemAtIndex(i)))
         return true;
     }
     return false;
   }
 
   /**
    * @override
    * @param {!SDK.RuntimeModel} runtimeModel
    */
   modelAdded(runtimeModel) {
     runtimeModel.executionContexts().forEach(this._executionContextCreated, this);
   }
 
   /**
    * @override
    * @param {!SDK.RuntimeModel} runtimeModel
    */
   modelRemoved(runtimeModel) {
-    for (var i = 0; i < this._list.length(); i++) {
-      if (this._list.itemAtIndex(i).runtimeModel === runtimeModel)
-        this._executionContextDestroyed(this._list.itemAtIndex(i));
+    for (var i = 0; i < this._items.length(); i++) {
+      if (this._items.itemAtIndex(i).runtimeModel === runtimeModel)
+        this._executionContextDestroyed(this._items.itemAtIndex(i));
     }
   }
 
   /**
    * @override
    * @param {!SDK.ExecutionContext} item
    * @return {!Element}
    */
   createElementForItem(item) {
     var element = createElementWithClass('div', 'context');
@@ skipping 94 matching lines @@
     var callFrameContext = callFrame && callFrame.script.executionContext();
     if (callFrameContext)
       UI.context.setFlavor(SDK.ExecutionContext, callFrameContext);
   }
 
   /**
    * @param {!Common.Event} event
    */
   _callFrameSelectedInModel(event) {
     var debuggerModel = /** @type {!SDK.DebuggerModel} */ (event.data);
-    for (var i = 0; i < this._list.length(); i++) {
-      if (this._list.itemAtIndex(i).debuggerModel === debuggerModel) {
-        this._disposeExecutionContextBadge(this._list.itemAtIndex(i));
-        this._list.refreshItemsInRange(i, i + 1);
+    for (var i = 0; i < this._items.length(); i++) {
+      var executionContext = this._items.itemAtIndex(i);
+      if (executionContext.debuggerModel === debuggerModel) {
+        this._disposeExecutionContextBadge(executionContext);
+        this._list.refreshItem(executionContext);
       }
     }
   }
 
   /**
    * @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._disposeExecutionContextBadge(this._list.itemAtIndex(i));
-        this._list.refreshItemsInRange(i, i + 1);
+    for (var i = 0; i < this._items.length(); i++) {
+      var executionContext = this._items.itemAtIndex(i);
+      if (frameId === executionContext.frameId) {
+        this._disposeExecutionContextBadge(executionContext);
+        this._list.refreshItem(executionContext);
       }
     }
   }
 };