DevTools: support live coverage

third_party/WebKit/Source/devtools/front_end/coverage/CoverageListView.js

 // Copyright (c) 2017 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.
 
 Coverage.CoverageListView = class extends UI.VBox {
   constructor() {
     super(true);
+    /** @type {!Map<!Coverage.URLCoverageInfo, !Coverage.CoverageListView.GridNode>} */
+    this._nodeForCoverageInfo = new Map();
     this.registerRequiredCSS('coverage/coverageListView.css');
     var columns = [
       {id: 'url', title: Common.UIString('URL'), width: '300px', fixedWidth: false, sortable: true},
       {id: 'type', title: Common.UIString('Type'), width: '45px', fixedWidth: true, sortable: true}, {
         id: 'size',
         title: Common.UIString('Total Bytes'),
         width: '60px',
         fixedWidth: true,
         sortable: true,
         align: DataGrid.DataGrid.Align.Right
@@ skipping 17 matching lines @@
     this._dataGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this._sortingChanged, this);
 
     var dataGridWidget = this._dataGrid.asWidget();
     dataGridWidget.show(this.contentElement);
   }
 
   /**
    * @param {!Array<!Coverage.URLCoverageInfo>} coverageInfo
    */
   update(coverageInfo) {
+    var hadUpdates = false;
     var maxSize = coverageInfo.reduce((acc, entry) => Math.max(acc, entry.size()), 0);
     var rootNode = this._dataGrid.rootNode();
-    rootNode.removeChildren();
-    for (var entry of coverageInfo)
-      rootNode.appendChild(new Coverage.CoverageListView.GridNode(entry, maxSize));
-    this._sortingChanged();
+    for (var entry of coverageInfo) {
+      var node = this._nodeForCoverageInfo.get(entry);
+      if (node) {
+        hadUpdates = node._refreshIfNeeded(maxSize) || hadUpdates;
+        continue;
+      }
+      hadUpdates = true;
+      node = new Coverage.CoverageListView.GridNode(entry, maxSize);
+      this._nodeForCoverageInfo.set(entry, node);
+      rootNode.appendChild(node);
+    }
+    if (hadUpdates)
+      this._sortingChanged();
+  }
+
+  reset() {
+    this._nodeForCoverageInfo.clear();
+    this._dataGrid.rootNode().removeChildren();
   }
 
   /**
    * @param {!Common.Event} event
    */
   _onOpenedNode(event) {
     var node = /** @type Coverage.CoverageListView.GridNode */ (event.data);
     this._revealSourceForNode(node);
   }
 
@@ skipping 67 matching lines @@
     /**
      * @param {string} fieldName
      * @param {!DataGrid.DataGridNode} a
      * @param {!DataGrid.DataGridNode} b
      * @return {number}
      */
     function compareNumericField(fieldName, a, b) {
       var nodeA = /** @type {!Coverage.CoverageListView.GridNode} */ (a);
       var nodeB = /** @type {!Coverage.CoverageListView.GridNode} */ (b);
 
-      return nodeA._coverageInfo[fieldName]() - nodeB._coverageInfo[fieldName]();
+      return nodeA._coverageInfo[fieldName]() - nodeB._coverageInfo[fieldName]() || compareURL(a, b);
     }
 
     /**
      * @param {!DataGrid.DataGridNode} a
      * @param {!DataGrid.DataGridNode} b
      * @return {number}
      */
     function compareType(a, b) {
       var nodeA = /** @type {!Coverage.CoverageListView.GridNode} */ (a);
       var nodeB = /** @type {!Coverage.CoverageListView.GridNode} */ (b);
       var typeA = Coverage.CoverageListView._typeToString(nodeA._coverageInfo.type());
       var typeB = Coverage.CoverageListView._typeToString(nodeB._coverageInfo.type());
-      return typeA.localeCompare(typeB);
+      return typeA.localeCompare(typeB) || compareURL(a, b);
     }
   }
 
   /**
    * @param {!Coverage.CoverageType} type
    */
   static _typeToString(type) {
     var types = [];
     if (type & Coverage.CoverageType.CSS)
       types.push(Common.UIString('CSS'));
     if (type & Coverage.CoverageType.JavaScript)
       types.push(Common.UIString('JS'));
     return types.join('+');
   }
 };
 
 Coverage.CoverageListView.GridNode = class extends DataGrid.SortableDataGridNode {
   /**
    * @param {!Coverage.URLCoverageInfo} coverageInfo
    * @param {number} maxSize
    */
   constructor(coverageInfo, maxSize) {
     super();
     this._coverageInfo = coverageInfo;
+    /** @type {number|undefined} */
+    this._lastUsedSize;
     this._url = coverageInfo.url();
     this._displayURL = new Common.ParsedURL(this._url).displayName;
     this._maxSize = maxSize;
   }
 
   /**
+   * @param {number} maxSize
+   * @return {boolean}
+   */
+  _refreshIfNeeded(maxSize) {
+    if (this._lastUsedSize === this._coverageInfo.usedSize() && maxSize === this._maxSize)
+      return false;
+    this._lastUsedSize = this._coverageInfo.usedSize();
+    this._maxSize = maxSize;
+    this.refresh();
+    return true;
+  }
+
+  /**
    * @override
    * @param {string} columnId
    * @return {!Element}
    */
   createCell(columnId) {
     var cell = this.createTD(columnId);
     switch (columnId) {
       case 'url':
         cell.title = this._url;
         var outer = cell.createChild('div', 'url-outer');
@@ skipping 19 matching lines @@
       case 'bars':
         var barContainer = cell.createChild('div', 'bar-container');
         var unusedSizeBar = barContainer.createChild('div', 'bar bar-unused-size');
         unusedSizeBar.style.width = Math.ceil(100 * this._coverageInfo.unusedSize() / this._maxSize) + '%';
         var usedSizeBar = barContainer.createChild('div', 'bar bar-used-size');
         usedSizeBar.style.width = Math.floor(100 * this._coverageInfo.usedSize() / this._maxSize) + '%';
     }
     return cell;
   }
 };