DevTools: add CSS/JS type indication to coverage view

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: 'size',
         title: Common.UIString('Total Bytes'),
         width: '60px',
         fixedWidth: true,
         sortable: true,
         align: DataGrid.DataGrid.Align.Right
       },
-      {
+      {id: 'type', title: Common.UIString('Type'), width: '30px', fixedWidth: true, sortable: true}, {
         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}
     ];
@@ skipping 55 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');
+        break;
       case 'size':
         sortFunction = compareNumericField.bind(null, 'size');
         break;
       case 'unusedSize':
         sortFunction = compareNumericField.bind(null, 'unusedSize');
         break;
       default:
         console.assert(false, 'Unknown sort field: ' + columnId);
         return;
     }
@@ skipping 18 matching lines @@
      * @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 {!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.CoverageInfo} coverageInfo
    * @param {number} maxSize
    */
   constructor(coverageInfo, maxSize) {
     super();
     this._coverageInfo = coverageInfo;
     this._maxSize = maxSize;
   }
 
   /**
    * @override
    * @param {string} columnId
    * @return {!Element}
    */
   createCell(columnId) {
     var cell = this.createTD(columnId);
     switch (columnId) {
       case 'url':
         cell.textContent = this._coverageInfo.url;
+        cell.title = this._coverageInfo.url;
+        break;
+      case 'type':
+        cell.textContent = Coverage.CoverageListView._typeToString(this._coverageInfo.type);
         break;
       case 'size':
         cell.classList.add('numeric-column');
         cell.textContent = this._coverageInfo.size;
         break;
       case 'unusedSize':
         cell.classList.add('numeric-column');
         cell.textContent = this._coverageInfo.unusedSize;
         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) + '%';
         var sizeBar = barContainer.createChild('div', 'bar bar-slack-size');
         var slackSize = this._coverageInfo.size - this._coverageInfo.unusedSize - this._coverageInfo.usedSize;
         sizeBar.style.width = Math.ceil(100 * slackSize / this._maxSize) + '%';
     }
     return cell;
   }
 };