DevTools: coverage polish, part 2

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);
     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
       },
       {
         id: 'unusedSize',
         title: Common.UIString('Unused Bytes'),
         width: '60px',
         fixedWidth: true,
         sortable: true,
         align: DataGrid.DataGrid.Align.Right,
         sort: DataGrid.DataGrid.Order.Descending
       },
-      {id: 'bars', title: '', width: '500px', fixedWidth: false, sortable: false}
+      {id: 'bars', title: '', width: '500px', fixedWidth: false, sortable: true}
     ];
     this._dataGrid = new DataGrid.SortableDataGrid(columns);
     this._dataGrid.setResizeMethod(DataGrid.DataGrid.ResizeMethod.Last);
     this._dataGrid.element.classList.add('flex-auto');
-    this._dataGrid.element.addEventListener('dblclick', this._onDoubleClick.bind(this), false);
     this._dataGrid.element.addEventListener('keydown', this._onKeyDown.bind(this), false);
+    this._dataGrid.addEventListener(DataGrid.DataGrid.Events.OpenedNode, this._onOpenedNode, this);
     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 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();
   }
 
   /**
-   * @param {!Event} event
+   * @param {!Common.Event} event
    */
-  _onDoubleClick(event) {
-    if (!event.target || !(event.target instanceof Node))
-      return;
-    event.consume(true);
-    this._revealSourceForNode(this._dataGrid.dataGridNodeFromNode(event.target));
+  _onOpenedNode(event) {
+    var node = /** @type Coverage.CoverageListView.GridNode */ (event.data);
+    this._revealSourceForNode(node);
   }
 
   /**
    * @param {!Event} event
    */
   _onKeyDown(event) {
     if (!isEnterKey(event))
       return;
     event.consume(true);
     this._revealSourceForNode(this._dataGrid.selectedNode);
@@ skipping 15 matching lines @@
   _sortingChanged() {
     var columnId = this._dataGrid.sortColumnId();
     if (!columnId)
       return;
     var sortFunction;
     switch (columnId) {
       case 'url':
         sortFunction = compareURL;
         break;
       case 'type':
-        sortFunction = compareNumericField.bind(null, 'type');
+        sortFunction = compareType;
         break;
       case 'size':
         sortFunction = compareNumericField.bind(null, 'size');
         break;
+      case 'bars':
       case 'unusedSize':
         sortFunction = compareNumericField.bind(null, 'unusedSize');
         break;
       default:
         console.assert(false, 'Unknown sort field: ' + columnId);
         return;
     }
 
     this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
 
@@ skipping 14 matching lines @@
      * @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]();
     }
+
+    /**
+     * @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);
+    }
   }
 
   /**
    * @param {!Coverage.CoverageType} type
    */
   static _typeToString(type) {
     var types = [];
     if (type & Coverage.CoverageType.CSS)
       types.push(Common.UIString('CSS'));
     if (type & Coverage.CoverageType.JavaScript)
@@ skipping 29 matching lines @@
         var prefix = outer.createChild('div', 'url-prefix');
         var suffix = outer.createChild('div', 'url-suffix');
         var splitURL = /^(.*)(\/[^/]*)$/.exec(this._url);
         prefix.textContent = splitURL ? splitURL[1] : this._url;
         suffix.textContent = splitURL ? splitURL[2] : '';
         break;
       case 'type':
         cell.textContent = Coverage.CoverageListView._typeToString(this._coverageInfo.type());
         break;
       case 'size':
-        cell.classList.add('numeric-column');
         cell.textContent = Number.withThousandsSeparator(this._coverageInfo.size() || 0);
         break;
       case 'unusedSize':
-        cell.classList.add('numeric-column');
-        cell.textContent = Number.withThousandsSeparator(this._coverageInfo.unusedSize() || 0);
-        if (this._coverageInfo.size())
-          cell.title = Math.round(100 * this._coverageInfo.unusedSize() / this._coverageInfo.size()) + '%';
+        var unusedSize = this._coverageInfo.unusedSize() || 0;
+        var unusedSizeSpan = cell.createChild('span');
+        var unusedPercentsSpan = cell.createChild('span', 'percent-value');
+        unusedSizeSpan.textContent = Number.withThousandsSeparator(unusedSize);
+        unusedPercentsSpan.textContent = Common.UIString('%.1f\u2009%%', unusedSize / this._coverageInfo.size() * 100);
         break;
       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.ceil(100 * this._coverageInfo.usedSize() / this._maxSize) + '%';
     }
     return cell;
   }
 };