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

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 f6e003fdcef0182045b6a8af7a7ab44940677ac3..808131a4d3039e68dc753d3fcb09c186c0aa2ac8 100644
--- a/third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js
+++ b/third_party/WebKit/Source/devtools/front_end/console/ConsoleContextSelector.js
@@ -22,8 +22,10 @@ Console.ConsoleContextSelector = class {
     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);
@@ -96,7 +98,7 @@ Console.ConsoleContextSelector = class {
   }
 
   _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();
   }
@@ -127,7 +129,7 @@ Console.ConsoleContextSelector = class {
         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;
@@ -137,9 +139,9 @@ Console.ConsoleContextSelector = class {
           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;
           }
         }
@@ -151,18 +153,18 @@ Console.ConsoleContextSelector = class {
         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;
           }
@@ -192,8 +194,8 @@ Console.ConsoleContextSelector = class {
         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;
@@ -296,7 +298,7 @@ Console.ConsoleContextSelector = class {
     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();
@@ -317,7 +319,7 @@ Console.ConsoleContextSelector = class {
    */
   _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);
@@ -328,10 +330,10 @@ Console.ConsoleContextSelector = class {
    * @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();
   }
 
@@ -349,7 +351,7 @@ Console.ConsoleContextSelector = class {
    */
   _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();
@@ -383,8 +385,8 @@ Console.ConsoleContextSelector = class {
    * @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;
@@ -403,9 +405,9 @@ Console.ConsoleContextSelector = class {
    * @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));
     }
   }
 
@@ -520,10 +522,11 @@ Console.ConsoleContextSelector = class {
    */
   _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);
       }
     }
   }
@@ -533,10 +536,11 @@ Console.ConsoleContextSelector = class {
    */
   _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);
       }
     }
   }