squash 'resources/unpacked/devtools' changes from e6e277b..eae34e4

eae34e4 Revert of [DevTools] Move 'this' evaluation from ExecutionContext to autocomplete. (patchset #1 id:1 of https://codereview.chromium.org/2729743002/ )
398859c [DevTools] Move 'this' evaluation from ExecutionContext to autocomplete.
11b4bbe DevTools: add metrics for command menu/quick open
658254c DevTools: do not update timeline tree view details if not visible.
9897b99 DevTools: Remove monospace from FilteredListWidget
f055b38 DevTools Timeline: fix NPE when collapsing the last group
10af4da Timeline: fix NPE in heavy stack view when clearing Timeline
64854c0 DevTools: keep count instead of boolean wasUsed internally
b70b505 Timeline: fix NPE when hovering over Interactions strip
d440cf6 DevTools: move the filtered items caption into the toolbar.
23ca7f7 DevTools: sort sourceMap mappings since they might not be ordered.
e4336f6 DevTools: finalize audits2 worker as remote module
0198df1 [DevTools] 'Continue to location markers' should be always correctly shown
587f32a DevTools: Support reading CPU profile format on Performance panel
50a62de DevTools: Collect UMA on CPU profile "focus" & "exclude"
214d1b6 DevTools: debug remote modules loaded by ServiceManager
7ac4fb3 DevTools: assorted polish for coverage pane
b5cfdfb [Devtools] Fixed flicker in network for large stream of requests

git-subtree-dir: resources/unpacked/devtools
git-subtree-split: eae34e4

BUILD.gn

@@ -824,7 +824,6 @@ generated_resources = [
   # this contains non-autostart non-remote modules only.
   "$resources_out_dir/animation/animation_module.js",
   "$resources_out_dir/audits/audits_module.js",
-  "$resources_out_dir/audits2_worker/audits2_worker_module.js",
   "$resources_out_dir/audits2/audits2_module.js",
   "$resources_out_dir/cm/cm_module.js",
   "$resources_out_dir/color_picker/color_picker_module.js",
@@ -859,6 +858,7 @@ generated_resources = [
 
 generated_remote_modules = [
   "$resources_out_dir/accessibility/accessibility_module.js",
+  "$resources_out_dir/audits2_worker/audits2_worker_module.js",
   "$resources_out_dir/cm_modes/cm_modes_module.js",
   "$resources_out_dir/emulated_devices/emulated_devices_module.js",
   "$resources_out_dir/gonzales/gonzales_module.js",

front_end/console/ConsoleView.js

@@ -60,10 +60,11 @@ Console.ConsoleView = class extends UI.VBox {
     this._executionContextComboBox.setMaxWidth(80);
     this._consoleContextSelector = new Console.ConsoleContextSelector(this._executionContextComboBox.selectElement());
 
+    this._filterStatusText = new UI.ToolbarText();
+    this._filterStatusText.element.classList.add('dimmed');
     this._showSettingsPaneSetting = Common.settings.createSetting('consoleShowSettingsToolbar', false);
     this._showSettingsPaneButton = new UI.ToolbarSettingToggle(
         this._showSettingsPaneSetting, 'largeicon-settings-gear', Common.UIString('Console settings'));
-
     this._progressToolbarItem = new UI.ToolbarItem(createElement('div'));
 
     var toolbar = new UI.Toolbar('', this._contentsElement);
@@ -76,7 +77,7 @@ Console.ConsoleView = class extends UI.VBox {
     toolbar.appendToolbarItem(this._filter._levelComboBox);
     toolbar.appendToolbarItem(this._progressToolbarItem);
     toolbar.appendSpacer();
-    toolbar.appendText('');
+    toolbar.appendToolbarItem(this._filterStatusText);
     toolbar.appendSeparator();
     toolbar.appendToolbarItem(this._showSettingsPaneButton);
 
@@ -121,11 +122,6 @@ Console.ConsoleView = class extends UI.VBox {
 
     this._viewportThrottler = new Common.Throttler(50);
 
-    this._filterStatusMessageElement = createElementWithClass('div', 'console-message');
-    this._messagesElement.insertBefore(this._filterStatusMessageElement, this._messagesElement.firstChild);
-    this._filterStatusTextElement = this._filterStatusMessageElement.createChild('span', 'console-info');
-    this._filterStatusMessageElement.createTextChild(' ');
-
     this._topGroup = Console.ConsoleGroup.createTopGroup();
     this._currentGroup = this._topGroup;
 
@@ -435,11 +431,10 @@ Console.ConsoleView = class extends UI.VBox {
   }
 
   _updateFilterStatus() {
-    this._filterStatusTextElement.removeChildren();
-    this._filterStatusTextElement.createTextChild(Common.UIString(
-        this._hiddenByFilterCount === 1 ? '1 message is hidden by filters.' :
-                                          this._hiddenByFilterCount + ' messages are hidden by filters.'));
-    this._filterStatusMessageElement.style.display = this._hiddenByFilterCount ? '' : 'none';
+    this._filterStatusText.setText(Common.UIString(
+        this._hiddenByFilterCount === 1 ? '1 item hidden by filters' :
+                                          this._hiddenByFilterCount + ' items hidden by filters'));
+    this._filterStatusText.setVisible(!!this._hiddenByFilterCount);
   }
 
   /**

front_end/coverage/CoverageListView.js

@@ -7,15 +7,16 @@ Coverage.CoverageListView = class extends UI.VBox {
     super(true);
     this.registerRequiredCSS('coverage/coverageListView.css');
     var columns = [
-      {id: 'url', title: Common.UIString('URL'), width: '300px', fixedWidth: false, sortable: true}, {
+      {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: 'type', title: Common.UIString('Type'), width: '30px', fixedWidth: true, sortable: true}, {
+      {
         id: 'unusedSize',
         title: Common.UIString('Unused Bytes'),
         width: '60px',
@@ -116,7 +117,7 @@ Coverage.CoverageListView = class extends UI.VBox {
       var nodeA = /** @type {!Coverage.CoverageListView.GridNode} */ (a);
       var nodeB = /** @type {!Coverage.CoverageListView.GridNode} */ (b);
 
-      return nodeA._coverageInfo.url.localeCompare(nodeB._coverageInfo.url);
+      return nodeA._displayURL.localeCompare(nodeB._displayURL);
     }
 
     /**
@@ -154,6 +155,7 @@ Coverage.CoverageListView.GridNode = class extends DataGrid.SortableDataGridNode
   constructor(coverageInfo, maxSize) {
     super();
     this._coverageInfo = coverageInfo;
+    this._displayURL = new Common.ParsedURL(coverageInfo.url).displayName;
     this._maxSize = maxSize;
   }
 
@@ -166,19 +168,26 @@ Coverage.CoverageListView.GridNode = class extends DataGrid.SortableDataGridNode
     var cell = this.createTD(columnId);
     switch (columnId) {
       case 'url':
-        cell.textContent = this._coverageInfo.url;
         cell.title = this._coverageInfo.url;
+        var outer = cell.createChild('div', 'url-outer');
+        var prefix = outer.createChild('div', 'url-prefix');
+        var suffix = outer.createChild('div', 'url-suffix');
+        var splitURL = /^(.*)(\/[^/]*)$/.exec(this._coverageInfo.url);
+        prefix.textContent = splitURL ? splitURL[1] : this._coverageInfo.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 = this._coverageInfo.size;
+        cell.textContent = Number.withThousandsSeparator(this._coverageInfo.size || 0);
         break;
       case 'unusedSize':
         cell.classList.add('numeric-column');
-        cell.textContent = this._coverageInfo.unusedSize;
+        cell.textContent = Number.withThousandsSeparator(this._coverageInfo.unusedSize || 0);
+        if (this._coverageInfo.size)
+          cell.title = Math.round(100 * this._coverageInfo.unusedSize / this._coverageInfo.size) + '%';
         break;
       case 'bars':
         var barContainer = cell.createChild('div', 'bar-container');

front_end/coverage/CoverageView.js

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/** @typedef {{range: !Common.TextRange, wasUsed: boolean}} */
-Coverage.RangeUsage;
+/** @typedef {{range: !Common.TextRange, count: number}} */
+Coverage.RangeUseCount;
 
-/** @typedef {{styleSheetHeader: !SDK.CSSStyleSheetHeader, ranges: !Array<!Coverage.RangeUsage>}} */
+/** @typedef {{styleSheetHeader: !SDK.CSSStyleSheetHeader, ranges: !Array<!Coverage.RangeUseCount>}} */
 Coverage.StyleSheetUsage;
 
 /** @typedef {{
@@ -14,7 +14,7 @@ Coverage.StyleSheetUsage;
  *    unusedSize: (number|undefined),
  *    usedSize: (number|undefined),
  *    type: !Coverage.CoverageType,
- *    ranges: !Array<!Coverage.RangeUsage>
+ *    ranges: !Array<!Coverage.RangeUseCount>
  * }}
  */
 Coverage.CoverageInfo;
@@ -169,7 +169,7 @@ Coverage.CoverageView = class extends UI.VBox {
         for (var range of func.ranges) {
           var textRange = new Common.TextRange(
               range.startLineNumber, range.startColumnNumber, range.endLineNumber, range.endColumnNumber);
-          ranges.push({range: textRange, wasUsed: !!range.count});
+          ranges.push({range: textRange, count: range.count});
         }
       }
       promises.push(Coverage.CoverageView._coverageInfoForText(script, script.lineOffset, script.columnOffset, ranges));
@@ -197,7 +197,7 @@ Coverage.CoverageView = class extends UI.VBox {
    * @return {!Promise<!Array<!Coverage.CoverageInfo>>}
    */
   static async _processCSSCoverage(cssModel, ruleUsageList) {
-    /** @type {!Map<?SDK.CSSStyleSheetHeader, !Array<!Coverage.RangeUsage>>} */
+    /** @type {!Map<?SDK.CSSStyleSheetHeader, !Array<!Coverage.RangeUseCount>>} */
     var rulesByStyleSheet = new Map();
     for (var rule of ruleUsageList) {
       var styleSheetHeader = cssModel.styleSheetHeaderForId(rule.styleSheetId);
@@ -211,7 +211,7 @@ Coverage.CoverageView = class extends UI.VBox {
           rule.range.startColumn + (rule.range.startLine ? 0 : styleSheetHeader.startColumn),
           rule.range.endLine + styleSheetHeader.startLine,
           rule.range.endColumn + (rule.range.endLine ? 0 : styleSheetHeader.startColumn));
-      ranges.push({range: textRange, wasUsed: rule.wasUsed});
+      ranges.push({range: textRange, count: Number(rule.wasUsed)});
     }
     return Promise.all(Array.from(
         rulesByStyleSheet.entries(), entry => Coverage.CoverageView._coverageInfoForText(
@@ -222,7 +222,7 @@ Coverage.CoverageView = class extends UI.VBox {
    * @param {!Common.ContentProvider} contentProvider
    * @param {number} startLine
    * @param {number} startColumn
-   * @param {!Array<!Coverage.RangeUsage>} ranges
+   * @param {!Array<!Coverage.RangeUseCount>} ranges
    * @return {!Promise<!Coverage.CoverageInfo>}
    */
   static async _coverageInfoForText(contentProvider, startLine, startColumn, ranges) {
@@ -246,7 +246,7 @@ Coverage.CoverageView = class extends UI.VBox {
       return {
         start: text.offsetFromPosition(range.startLine, range.startColumn),
         end: text.offsetFromPosition(range.endLine, range.endColumn),
-        wasUsed: r.wasUsed
+        count: r.count
       };
     });
 
@@ -271,7 +271,7 @@ Coverage.CoverageView = class extends UI.VBox {
     var usedSize = 0;
     var unusedSize = 0;
     for (var entry of offsetRanges) {
-      if (entry.wasUsed)
+      if (entry.count)
         usedSize += entry.ownSize;
       else
         unusedSize += entry.ownSize;
@@ -309,7 +309,7 @@ Coverage.CoverageView = class extends UI.VBox {
       if (!uiSourceCode)
         continue;
       for (var range of info.ranges)
-        uiSourceCode.addDecoration(range.range, Coverage.CoverageView.LineDecorator.type, range.wasUsed);
+        uiSourceCode.addDecoration(range.range, Coverage.CoverageView.LineDecorator.type, range.count);
     }
   }
 };

front_end/coverage/coverageListView.css

@@ -1,10 +1,41 @@
+.data-grid {
+  border: none;
+}
+
+.data-grid td .url-outer {
+  width: 100%;
+  display: inline-flex;
+  justify-content: flex-start;
+}
+
+.data-grid td .url-prefix {
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.data-grid td .url-suffix {
+  flex: none;
+}
+
 .data-grid td .bar {
   display: inline-block;
   height: 8px;
 }
 
 .data-grid .selected td .bar {
-  border: 0.5px solid white;
+  border-top: 1px white solid;
+  border-bottom: 1px white solid;
+}
+
+.data-grid .selected td .bar:last-child {
+  border-right: 1px white solid;
+}
+
+.data-grid .selected td .bar:first-child {
+  border-left: 1px white solid;
+}
+
+.data-grid td .bar-container {
 }
 
 .data-grid td .bar-slack-size {

front_end/data_grid/ViewportDataGrid.js

@@ -101,10 +101,10 @@ DataGrid.ViewportDataGrid = class extends DataGrid.DataGrid {
     this._updateAnimationFrameId = this.element.window().requestAnimationFrame(this._update.bind(this));
   }
 
-  updateInstantlyForTests() {
-    if (!this._updateAnimationFrameId)
-      return;
-    this.element.window().cancelAnimationFrame(this._updateAnimationFrameId);
+  // TODO(allada) This should be fixed to never be needed. It is needed right now for network because removing
+  // elements happens followed by a scheduleRefresh() which causes white space to be visible, but the waterfall
+  // updates instantly.
+  updateInstantly() {
     this._update();
   }
 

front_end/host/UserMetrics.js

@@ -84,6 +84,10 @@ Host.UserMetrics.Action = {
   ConnectToNodeJSFromFrontend: 19,
   ConnectToNodeJSDirectly: 20,
   CpuThrottlingEnabled: 21,
+  CpuProfileNodeFocused: 22,
+  CpuProfileNodeExcluded: 23,
+  SelectFileFromFilePicker: 24,
+  SelectCommandFromCommandMenu: 25,
 };
 
 Host.UserMetrics._PanelCodes = {

front_end/network/NetworkLogView.js

@@ -853,6 +853,8 @@ Network.NetworkLogView = class extends UI.VBox {
 
     if (nodesToInsert.size)
       this._columns.sortByCurrentColumn();
+
+    this._dataGrid.updateInstantly();
   }
 
   /**

front_end/perf_ui/FlameChart.js

@@ -353,7 +353,7 @@ PerfUI.FlameChart = class extends PerfUI.ChartViewport {
       var timelineData = this._timelineData();
       var level = timelineData.entryLevels[this._selectedEntryIndex];
       if (this._selectedEntryIndex >= 0 && level >= group.startLevel &&
-          (groupIndex === groups.length || groups[groupIndex + 1].startLevel > level))
+          (groupIndex >= groups.length - 1 || groups[groupIndex + 1].startLevel > level))
         this._selectedEntryIndex = -1;
     }
 

front_end/profiler/ProfileView.js

@@ -336,6 +336,7 @@ Profiler.ProfileView = class extends UI.SimpleView {
     this.profileDataGridTree.focus(this.dataGrid.selectedNode);
     this.refresh();
     this.refreshVisibleData();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuProfileNodeFocused);
   }
 
   /**
@@ -353,6 +354,7 @@ Profiler.ProfileView = class extends UI.SimpleView {
     this.profileDataGridTree.exclude(selectedNode);
     this.refresh();
     this.refreshVisibleData();
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuProfileNodeExcluded);
   }
 
   /**

front_end/quick_open/CommandMenu.js

@@ -217,14 +217,7 @@ QuickOpen.CommandMenuDelegate = class extends QuickOpen.FilteredListWidget.Deleg
     if (itemIndex === null)
       return;
     this._commands[itemIndex].execute();
-  }
-
-  /**
-   * @override
-   * @return {boolean}
-   */
-  renderMonospace() {
-    return false;
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.SelectCommandFromCommandMenu);
   }
 
   /**

front_end/quick_open/FilteredListWidget.js

@@ -41,11 +41,6 @@ QuickOpen.FilteredListWidget = class extends UI.VBox {
     this._itemElementsContainer.classList.add('container');
     this._bottomElementsContainer.appendChild(this._itemElementsContainer);
 
-    if (delegate.renderMonospace()) {
-      this._list.element.classList.add('monospace');
-      this._promptElement.classList.add('monospace');
-    }
-
     this._notFoundElement = this._bottomElementsContainer.createChild('div', 'not-found-text');
     this._notFoundElement.classList.add('hidden');
 
@@ -500,13 +495,6 @@ QuickOpen.FilteredListWidget.Delegate = class {
   renderItem(itemIndex, query, titleElement, subtitleElement) {
   }
 
-  /**
-   * @return {boolean}
-   */
-  renderMonospace() {
-    return true;
-  }
-
   /**
    * @return {boolean}
    */

front_end/sdk/SourceMap.js

@@ -83,6 +83,17 @@ SDK.SourceMapEntry = class {
     this.sourceColumnNumber = sourceColumnNumber;
     this.name = name;
   }
+
+  /**
+   * @param {!SDK.SourceMapEntry} entry1
+   * @param {!SDK.SourceMapEntry} entry2
+   * @return {number}
+   */
+  static compare(entry1, entry2) {
+    if (entry1.lineNumber !== entry2.lineNumber)
+      return entry1.lineNumber - entry2.lineNumber;
+    return entry1.columnNumber - entry2.columnNumber;
+  }
 };
 
 /**
@@ -481,6 +492,9 @@ SDK.TextSourceMap = class {
       this._mappings.push(new SDK.SourceMapEntry(
           lineNumber, columnNumber, sourceURL, sourceLineNumber, sourceColumnNumber, names[nameIndex]));
     }
+
+    // As per spec, mappings are not necessarily sorted.
+    this._mappings.stableSort(SDK.SourceMapEntry.compare);
   }
 
   /**