From 452e532b31bba0c0ecb377b30f38321d95113485 Mon Sep 17 00:00:00 2001
From: Antonin Hildebrand <antonin@hildebrand.cz>
Date: Sat, 29 Apr 2017 19:11:49 +0200
Subject: [PATCH] squash 'resources/unpacked/devtools' changes from
 51d81804a..30ad697c3

30ad697c3 [Devtools] New structure and colorize rows for network products
d46aaf6cb [Devtools][Regression] Fixed websocket frame selection loss on frame received
fb9c65293 DevTools: Don't focus layers panel when it is shown
ba5491035 Reland of DevTools: fix aggregated donut chart cache population (patchset #1 id:1 of https://codereview.chromium.org/2839083002/ )
ef9fa0f54 Revert of DevTools: Show screenshots on the main flamechart (patchset #3 id:40001 of https://codereview.chromium.org/2830343004/ )
a75caaee6 [DevTools] Host paint profiles in PaintProfilerModel
97e80248b DevTools: clicking in console messages should not jump to bottom

git-subtree-dir: resources/unpacked/devtools
git-subtree-split: 30ad697c30890ace750ad6a594e19087ec9d4582
---
 BUILD.gn                                      |  15 +-
 front_end/console/ConsoleView.js              |  16 +-
 front_end/inspector.json                      |   4 +-
 front_end/layer_viewer/PaintProfilerView.js   |   4 +-
 front_end/layers/LayerPaintProfilerView.js    |   2 +-
 front_end/layers/LayerTreeModel.js            |  40 +++--
 front_end/layers/LayersPanel.js               |   1 -
 front_end/network/NetworkDataGridNode.js      | 120 +++++++-------
 front_end/network/NetworkGroupers.js          |  90 +++++++++++
 front_end/network/NetworkLogView.js           |  76 +++++----
 front_end/network/NetworkLogViewColumns.js    |  93 +++--------
 front_end/network/NetworkPanel.js             |  34 +---
 front_end/network/module.json                 |  18 ++-
 front_end/network/networkLogView.css          |  23 +++
 .../NetworkProductGroupLookup.js              | 148 ------------------
 front_end/network_group_lookup/module.json    |  34 ----
 .../product_registry/ProductNameForURL.js     |  95 -----------
 front_end/product_registry/ProductRegistry.js |  43 +++++
 front_end/product_registry/module.json        |   7 +-
 .../ProductRegistryData.js                    |   2 +-
 .../ProductRegistryImpl.js                    | 143 +++++++++++++++++
 front_end/product_registry_impl/module.json   |  18 +++
 .../sha1/README.chromium                      |   0
 .../sha1/sha1.js                              |   2 +-
 front_end/sdk/PaintProfiler.js                |  73 +++++----
 front_end/timeline/TimelineDetailsView.js     |  13 +-
 front_end/timeline/TimelineEventOverview.js   |  34 +++-
 .../TimelineFlameChartDataProvider.js         |  96 +++---------
 .../timeline/TimelinePaintProfilerView.js     |  21 ++-
 front_end/timeline/TimelineUIUtils.js         |  22 +--
 .../timeline_model/TimelineFrameModel.js      |   5 +-
 front_end/timeline_model/TracingLayerTree.js  |  15 +-
 32 files changed, 629 insertions(+), 678 deletions(-)
 create mode 100644 front_end/network/NetworkGroupers.js
 delete mode 100644 front_end/network_group_lookup/NetworkProductGroupLookup.js
 delete mode 100644 front_end/network_group_lookup/module.json
 delete mode 100644 front_end/product_registry/ProductNameForURL.js
 create mode 100644 front_end/product_registry/ProductRegistry.js
 rename front_end/{product_registry => product_registry_impl}/ProductRegistryData.js (99%)
 create mode 100644 front_end/product_registry_impl/ProductRegistryImpl.js
 create mode 100644 front_end/product_registry_impl/module.json
 rename front_end/{product_registry => product_registry_impl}/sha1/README.chromium (100%)
 rename front_end/{product_registry => product_registry_impl}/sha1/sha1.js (99%)

diff --git a/BUILD.gn b/BUILD.gn
index 2edd250da3..f350f94033 100644
--- a/BUILD.gn
+++ b/BUILD.gn
@@ -313,6 +313,7 @@ all_devtools_files = [
   "front_end/network/networkLogView.css",
   "front_end/network/NetworkLogView.js",
   "front_end/network/NetworkLogViewColumns.js",
+  "front_end/network/NetworkGroupers.js",
   "front_end/network/networkManageCustomHeadersView.css",
   "front_end/network/NetworkManageCustomHeadersView.js",
   "front_end/network/NetworkOverview.js",
@@ -339,8 +340,6 @@ all_devtools_files = [
   "front_end/network_conditions/module.json",
   "front_end/network_conditions/NetworkConditionsSelector.js",
   "front_end/network_conditions/networkConditionsSettingsTab.css",
-  "front_end/network_group_lookup/module.json",
-  "front_end/network_group_lookup/NetworkProductGroupLookup.js",
   "front_end/network_log/HAREntry.js",
   "front_end/network_log/module.json",
   "front_end/network_log/NetworkLog.js",
@@ -378,9 +377,11 @@ all_devtools_files = [
   "front_end/platform/module.json",
   "front_end/platform/utilities.js",
   "front_end/product_registry/module.json",
-  "front_end/product_registry/ProductNameForURL.js",
-  "front_end/product_registry/ProductRegistryData.js",
-  "front_end/product_registry/sha1/sha1.js",
+  "front_end/product_registry/ProductRegistry.js",
+  "front_end/product_registry_impl/module.json",
+  "front_end/product_registry_impl/ProductRegistryImpl.js",
+  "front_end/product_registry_impl/ProductRegistryData.js",
+  "front_end/product_registry_impl/sha1/sha1.js",
   "front_end/profiler/BottomUpProfileDataGrid.js",
   "front_end/profiler/CPUProfileFlameChart.js",
   "front_end/profiler/CPUProfileView.js",
@@ -870,6 +871,7 @@ generated_resources = [
   "$resources_out_dir/network/network_module.js",
   "$resources_out_dir/object_ui/object_ui_module.js",
   "$resources_out_dir/perf_ui/perf_ui_module.js",
+  "$resources_out_dir/product_registry/product_registry_module.js",
   "$resources_out_dir/profiler/profiler_module.js",
   "$resources_out_dir/quick_open/quick_open_module.js",
   "$resources_out_dir/resources/resources_module.js",
@@ -892,8 +894,7 @@ generated_remote_modules = [
   "$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",
-  "$resources_out_dir/network_group_lookup/network_group_lookup_module.js",
-  "$resources_out_dir/product_registry/product_registry_module.js",
+  "$resources_out_dir/product_registry_impl/product_registry_impl_module.js",
   "$resources_out_dir/screencast/screencast_module.js",
 ]
 
diff --git a/front_end/console/ConsoleView.js b/front_end/console/ConsoleView.js
index be61b1a8bb..4b64e34195 100644
--- a/front_end/console/ConsoleView.js
+++ b/front_end/console/ConsoleView.js
@@ -307,12 +307,8 @@ Console.ConsoleView = class extends UI.VBox {
    * @override
    */
   focus() {
-    if (this._prompt.hasFocus())
-      return;
-    // Set caret position before setting focus in order to avoid scrolling
-    // by focus().
-    this._prompt.moveCaretToEndOfPrompt();
-    this._prompt.focus();
+    if (!this._prompt.hasFocus())
+      this._prompt.focus();
   }
 
   /**
@@ -666,8 +662,14 @@ Console.ConsoleView = class extends UI.VBox {
    */
   _messagesClicked(event) {
     var targetElement = event.deepElementFromPoint();
-    if (!targetElement || targetElement.isComponentSelectionCollapsed())
+
+    // Do not focus prompt if messages have selection.
+    if (!targetElement || targetElement.isComponentSelectionCollapsed()) {
+      var clickedOutsideMessageList = event.target === this._messagesElement;
+      if (clickedOutsideMessageList)
+        this._prompt.moveCaretToEndOfPrompt();
       this.focus();
+    }
     var groupMessage = event.target.enclosingNodeOrSelfWithClass('console-group-title');
     if (!groupMessage)
       return;
diff --git a/front_end/inspector.json b/front_end/inspector.json
index 6977ad6e04..597a0bf3f4 100644
--- a/front_end/inspector.json
+++ b/front_end/inspector.json
@@ -17,11 +17,11 @@
         { "name": "services", "type": "autostart" },
         { "name": "elements", "condition": "!v8only" },
         { "name": "network", "condition": "!v8only" },
-        { "name": "network_group_lookup", "condition": "!v8only", "type": "remote" },
         { "name": "sources" },
         { "name": "timeline", "condition": "!v8only" },
         { "name": "timeline_model", "condition": "!v8only" },
-        { "name": "product_registry", "condition": "!v8only", "type": "remote" },
+        { "name": "product_registry", "condition": "!v8only" },
+        { "name": "product_registry_impl", "condition": "!v8only", "type": "remote" },
         { "name": "profiler" },
         { "name": "resources", "condition": "!v8only" },
         { "name": "audits", "condition": "!v8only" },
diff --git a/front_end/layer_viewer/PaintProfilerView.js b/front_end/layer_viewer/PaintProfilerView.js
index b2371364f1..e34c95c2c8 100644
--- a/front_end/layer_viewer/PaintProfilerView.js
+++ b/front_end/layer_viewer/PaintProfilerView.js
@@ -370,11 +370,9 @@ LayerViewer.PaintProfilerCommandLogView = class extends UI.ThrottledWidget {
   }
 
   /**
-   * @param {?SDK.Target} target
    * @param {!Array.<!SDK.PaintProfilerLogItem>} log
    */
-  setCommandLog(target, log) {
-    this._target = target;
+  setCommandLog(log) {
     this._log = log;
     /** @type {!Map<!SDK.PaintProfilerLogItem>} */
     this._treeItemCache = new Map();
diff --git a/front_end/layers/LayerPaintProfilerView.js b/front_end/layers/LayerPaintProfilerView.js
index e6bb3244de..629ff48c44 100644
--- a/front_end/layers/LayerPaintProfilerView.js
+++ b/front_end/layers/LayerPaintProfilerView.js
@@ -34,7 +34,7 @@ Layers.LayerPaintProfilerView = class extends UI.SplitWidget {
      * @this {Layers.LayerPaintProfilerView}
      */
     function setSnapshotAndLog(snapshot, log) {
-      this._logTreeView.setCommandLog(snapshot && snapshot.target(), log || []);
+      this._logTreeView.setCommandLog(log || []);
       this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], null);
       if (snapshot)
         snapshot.release();
diff --git a/front_end/layers/LayerTreeModel.js b/front_end/layers/LayerTreeModel.js
index b620d46627..c39653bb4c 100644
--- a/front_end/layers/LayerTreeModel.js
+++ b/front_end/layers/LayerTreeModel.js
@@ -34,7 +34,9 @@
 Layers.LayerTreeModel = class extends SDK.SDKModel {
   constructor(target) {
     super(target);
+    this._layerTreeAgent = target.layerTreeAgent();
     target.registerLayerTreeDispatcher(new Layers.LayerTreeDispatcher(this));
+    this._paintProfilerModel = /** @type {!SDK.PaintProfilerModel} */ (target.model(SDK.PaintProfilerModel));
     var resourceTreeModel = target.model(SDK.ResourceTreeModel);
     if (resourceTreeModel) {
       resourceTreeModel.addEventListener(
@@ -48,7 +50,7 @@ Layers.LayerTreeModel = class extends SDK.SDKModel {
     if (!this._enabled)
       return;
     this._enabled = false;
-    this.target().layerTreeAgent().disable();
+    this._layerTreeAgent.disable();
   }
 
   enable() {
@@ -61,8 +63,8 @@ Layers.LayerTreeModel = class extends SDK.SDKModel {
   _forceEnable() {
     this._lastPaintRectByLayerId = {};
     if (!this._layerTree)
-      this._layerTree = new Layers.AgentLayerTree(this.target());
-    this.target().layerTreeAgent().enable();
+      this._layerTree = new Layers.AgentLayerTree(this);
+    this._layerTreeAgent.enable();
   }
 
   /**
@@ -134,10 +136,11 @@ Layers.LayerTreeModel.Events = {
  */
 Layers.AgentLayerTree = class extends SDK.LayerTreeBase {
   /**
-   * @param {?SDK.Target} target
+   * @param {!Layers.LayerTreeModel} layerTreeModel
    */
-  constructor(target) {
-    super(target);
+  constructor(layerTreeModel) {
+    super(layerTreeModel.target());
+    this._layerTreeModel = layerTreeModel;
   }
 
   /**
@@ -186,7 +189,7 @@ Layers.AgentLayerTree = class extends SDK.LayerTreeBase {
       if (layer)
         layer._reset(layers[i]);
       else
-        layer = new Layers.AgentLayer(this.target(), layers[i]);
+        layer = new Layers.AgentLayer(this._layerTreeModel, layers[i]);
       this._layersById[layerId] = layer;
       var backendNodeId = layers[i].backendNodeId;
       if (backendNodeId)
@@ -218,11 +221,11 @@ Layers.AgentLayerTree = class extends SDK.LayerTreeBase {
  */
 Layers.AgentLayer = class {
   /**
-   * @param {?SDK.Target} target
+   * @param {!Layers.LayerTreeModel} layerTreeModel
    * @param {!Protocol.LayerTree.Layer} layerPayload
    */
-  constructor(target, layerPayload) {
-    this._target = target;
+  constructor(layerTreeModel, layerPayload) {
+    this._layerTreeModel = layerTreeModel;
     this._reset(layerPayload);
   }
 
@@ -401,14 +404,9 @@ Layers.AgentLayer = class {
    * @param {function(!Array.<string>)} callback
    */
   requestCompositingReasons(callback) {
-    if (!this._target) {
-      callback([]);
-      return;
-    }
-
     var wrappedCallback = Protocol.inspectorBackend.wrapClientCallback(
         callback, 'Protocol.LayerTree.reasonsForCompositingLayer(): ', undefined, []);
-    this._target.layerTreeAgent().compositingReasons(this.id(), wrappedCallback);
+    this._layerTreeModel._layerTreeAgent.compositingReasons(this.id(), wrappedCallback);
   }
 
   /**
@@ -436,11 +434,11 @@ Layers.AgentLayer = class {
    * @return {!Array<!Promise<?SDK.SnapshotWithRect>>}
    */
   snapshots() {
-    var rect = {x: 0, y: 0, width: this.width(), height: this.height()};
-    var promise = this._target.layerTreeAgent().makeSnapshot(
-        this.id(), (error, snapshotId) => error || !this._target ?
-            null :
-            {rect: rect, snapshot: new SDK.PaintProfilerSnapshot(this._target, snapshotId)});
+    var promise = this._layerTreeModel._paintProfilerModel.makeSnapshot(this.id()).then(snapshot => {
+      if (!snapshot)
+        return null;
+      return {rect: {x: 0, y: 0, width: this.width(), height: this.height()}, snapshot: snapshot};
+    });
     return [promise];
   }
 
diff --git a/front_end/layers/LayersPanel.js b/front_end/layers/LayersPanel.js
index 034b230faf..5fd204b6b0 100644
--- a/front_end/layers/LayersPanel.js
+++ b/front_end/layers/LayersPanel.js
@@ -81,7 +81,6 @@ Layers.LayersPanel = class extends UI.PanelWithSidebar {
     super.wasShown();
     if (this._model)
       this._model.enable();
-    this._layerTreeOutline.focus();
   }
 
   /**
diff --git a/front_end/network/NetworkDataGridNode.js b/front_end/network/NetworkDataGridNode.js
index a602a1f046..5936f76efa 100644
--- a/front_end/network/NetworkDataGridNode.js
+++ b/front_end/network/NetworkDataGridNode.js
@@ -38,14 +38,10 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
   constructor(parentView) {
     super({});
     this._parentView = parentView;
-    /** @type {!Map<string, ?Network.NetworkColumnExtensionInterface>} */
-    this._columnExtensions = new Map();
     this._isHovered = false;
     this._showingInitiatorChain = false;
     /** @type {?SDK.NetworkRequest} */
     this._requestOrFirstKnownChildRequest = null;
-    /** @type {!Map<string, !UI.Icon>} */
-    this._columnIcons = new Map();
     /** @type {?Common.Color} */
     this._backgroundColor = null;
   }
@@ -88,14 +84,6 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
     return /** @type {string} */ (color.asString(Common.Color.Format.HEX));
   }
 
-  /**
-   * @param {?Common.Color} color
-   */
-  setBackgroundColor(color) {
-    this._backgroundColor = color;
-    this._updateBackgroundColor();
-  }
-
   _updateBackgroundColor() {
     var element = this.existingElement();
     if (!element)
@@ -142,13 +130,6 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
     return this._parentView.rowHeight();
   }
 
-  /**
-   * @param {!Map<string, ?Network.NetworkColumnExtensionInterface>} columnExtensions
-   */
-  setColumnExtensions(columnExtensions) {
-    this._columnExtensions = columnExtensions;
-  }
-
   /**
    * @param {boolean} hovered
    * @param {boolean} showInitiatorChain
@@ -350,6 +331,22 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
     return aRequest.indentityCompare(bRequest);
   }
 
+  /**
+   * @param {!ProductRegistry.Registry} productRegistry
+   * @param {!Network.NetworkNode} a
+   * @param {!Network.NetworkNode} b
+   * @return {number}
+   */
+  static ProductComparator(productRegistry, a, b) {
+    var aRequest = a.request();
+    var bRequest = b.request();
+    if (!aRequest || !bRequest)
+      return !aRequest ? -1 : 1;
+    var aName = productRegistry.nameForUrl(aRequest.parsedURL) || '';
+    var bName = productRegistry.nameForUrl(bRequest.parsedURL) || '';
+    return aName.localeCompare(bName) || aRequest.indentityCompare(bRequest);
+  }
+
   /**
    * @param {!Network.NetworkNode} a
    * @param {!Network.NetworkNode} b
@@ -565,24 +562,6 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
     return aValue > bValue ? 1 : -1;
   }
 
-  /**
-   * @param {!Map<string, ?Network.NetworkColumnExtensionInterface>} extensionsMap
-   * @param {string} extensionId
-   * @param {!Network.NetworkNode} a
-   * @param {!Network.NetworkNode} b
-   * @return {number}
-   */
-  static ExtensionColumnComparator(extensionsMap, extensionId, a, b) {
-    var aRequest = a.requestOrFirstKnownChildRequest();
-    var bRequest = b.requestOrFirstKnownChildRequest();
-    if (!aRequest || !bRequest)
-      return !aRequest ? -1 : 1;
-    var instance = extensionsMap.get(extensionId);
-    if (!instance)
-      return aRequest.indentityCompare(bRequest);
-    return instance.requestComparator(aRequest, bRequest);
-  }
-
   /**
    * @override
    */
@@ -706,20 +685,10 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
 
     element.classList.toggle('network-error-row', this._isFailed());
     element.classList.toggle('network-navigation-row', this._isNavigationRequest);
-    for (var rowDecorator of this._parentView.rowDecorators())
-      rowDecorator.decorate(this);
     super.createCells(element);
     this._updateBackgroundColor();
   }
 
-  /**
-   * @param {string} columnId
-   * @param {!UI.Icon} icon
-   */
-  setIconForColumn(columnId, icon) {
-    this._columnIcons.set(columnId, icon);
-  }
-
   /**
    * @param {!Element} element
    * @param {string} text
@@ -736,21 +705,18 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
    */
   createCell(columnIdentifier) {
     var cell = this.createTD(columnIdentifier);
-    var icon = this._columnIcons.get(columnIdentifier);
-    if (icon)
-      cell.appendChild(icon);
-    // If the key exists but the value is null it means the extension instance has not resolved yet.
-    // The view controller will force all rows to update when extension is resolved.
-    if (this._columnExtensions.has(columnIdentifier)) {
-      var instance = this._columnExtensions.get(columnIdentifier);
-      if (instance)
-        this._setTextAndTitle(cell, instance.lookupColumnValue(this._request));
-      return cell;
-    }
     switch (columnIdentifier) {
       case 'name':
         this._renderNameCell(cell);
         break;
+      case 'product':
+        if (!Runtime.experiments.isEnabled('networkGroupingRequests')) {
+          this._setTextAndTitle(cell, this._request.responseHeaderValue(columnIdentifier) || '');
+          break;
+        }
+        if (this.request())
+          ProductRegistry.instance().then(this._renderProductCell.bind(this, cell));
+        break;
       case 'method':
         this._setTextAndTitle(cell, this._request.requestMethod);
         break;
@@ -898,6 +864,42 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
     cell.title = this._request.url();
   }
 
+  /**
+   * @param {!Element} cell
+   * @param {!ProductRegistry.Registry} productRegistry
+   */
+  _renderProductCell(cell, productRegistry) {
+    var request = this.request();
+    if (!request)
+      return;
+    var entry = productRegistry.entryForUrl(request.parsedURL);
+    if (!entry)
+      return;
+    this._setTextAndTitle(cell, entry.name);
+    if (entry.type !== null) {
+      var element = this.existingElement();
+      if (!element)
+        return;
+      switch (entry.type) {
+        case 0:
+          this._backgroundColor = Common.Color.fromRGBA([224, 247, 250, .6]);
+          cell.classList.add('product-ad');
+          break;
+        case 1:
+          this._backgroundColor = Common.Color.fromRGBA([255, 252, 225, .6]);
+          cell.classList.add('product-tracking');
+          break;
+        case 2:
+          this._backgroundColor = Common.Color.fromRGBA([211, 253, 211, .6]);
+          cell.classList.add('product-cdn');
+          break;
+        default:
+          this._backgroundColor = null;
+      }
+      this._updateBackgroundColor();
+    }
+  }
+
   /**
    * @param {!Element} cell
    */
@@ -1100,8 +1102,6 @@ Network.NetworkGroupNode = class extends Network.NetworkNode {
    */
   createCell(columnIdentifier) {
     var cell = this.createTD(columnIdentifier);
-    if (this._columnExtensions.has(columnIdentifier))
-      return cell;
     if (columnIdentifier === 'name') {
       var leftPadding = this.leftPadding ? this.leftPadding + 'px' : '';
       cell.style.setProperty('padding-left', leftPadding);
diff --git a/front_end/network/NetworkGroupers.js b/front_end/network/NetworkGroupers.js
new file mode 100644
index 0000000000..3f78ea0c42
--- /dev/null
+++ b/front_end/network/NetworkGroupers.js
@@ -0,0 +1,90 @@
+// Copyright 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.
+
+/**
+ * @implements {Network.GroupLookupInterface}
+ */
+Network.ProductGrouper = class {
+  constructor() {
+    /** @type {?ProductRegistry.Registry} */
+    this._productRegistry = null;
+  }
+
+  /**
+   * @override
+   * @return {!Promise}
+   */
+  initialize() {
+    return ProductRegistry.instance().then(productRegistry => this._productRegistry = productRegistry);
+  }
+
+  /**
+   * @override
+   * @param {!SDK.NetworkRequest} request
+   * @return {?*}
+   */
+  groupForRequest(request) {
+    if (!this._productRegistry)
+      return null;
+    var productName = this._productRegistry.nameForUrl(request.parsedURL);
+    if (!productName)
+      return null;
+    return productName;
+  }
+
+  /**
+   * @override
+   * @param {!*} key
+   * @return {string}
+   */
+  groupName(key) {
+    return /** @type {string} */ (key);
+  }
+};
+
+/**
+ * @implements {Network.GroupLookupInterface}
+ */
+Network.FrameGrouper = class {
+  constructor() {
+    /** @type {?ProductRegistry.Registry} */
+    this._productRegistry = null;
+  }
+
+  /**
+   * @override
+   * @return {!Promise}
+   */
+  initialize() {
+    return ProductRegistry.instance().then(productRegistry => this._productRegistry = productRegistry);
+  }
+
+  /**
+   * @override
+   * @param {!SDK.NetworkRequest} request
+   * @return {?*}
+   */
+  groupForRequest(request) {
+    var resourceTreeModel = request.networkManager().target().model(SDK.ResourceTreeModel);
+    if (!resourceTreeModel)
+      return null;
+    var frame = resourceTreeModel.frameForId(request.frameId);
+    if (!frame || frame.isMainFrame())
+      return null;
+    return frame;
+  }
+
+  /**
+   * @override
+   * @param {!*} frameArg
+   * @return {string}
+   */
+  groupName(frameArg) {
+    var frame = /** @type {!SDK.ResourceTreeFrame} */ (frameArg);
+    var entry = this._productRegistry ? this._productRegistry.entryForFrame(frame) : null;
+    if (entry)
+      return entry.name;
+    return (new Common.ParsedURL(frame.url)).host || frame.name || '<iframe>';
+  }
+};
diff --git a/front_end/network/NetworkLogView.js b/front_end/network/NetworkLogView.js
index 7e8d4a06d4..9b9910b5b3 100644
--- a/front_end/network/NetworkLogView.js
+++ b/front_end/network/NetworkLogView.js
@@ -57,9 +57,6 @@ Network.NetworkLogView = class extends UI.VBox {
     this._durationCalculator = new Network.NetworkTransferDurationCalculator();
     this._calculator = this._timeCalculator;
 
-    /** @type {?Network.NetworkGroupLookupInterface} */
-    this._activeGroupLookup = null;
-
     /**
      * @this {Network.NetworkLogView}
      */
@@ -76,9 +73,6 @@ Network.NetworkLogView = class extends UI.VBox {
     this._nodesByRequestId = new Map();
     /** @type {!Map<*, !Network.NetworkGroupNode>} */
     this._nodeGroups = new Map();
-    /** @type {!Set<!Network.NetworkRowDecorator>} */
-    this._rowDecorators = new Set();
-
     /** @type {!Object.<string, boolean>} */
     this._staleRequestIds = {};
     /** @type {number} */
@@ -106,6 +100,14 @@ Network.NetworkLogView = class extends UI.VBox {
 
     this._headerHeight = 0;
 
+    /** @type {!Map<string, !Network.GroupLookupInterface>} */
+    this._groupLookups = new Map();
+    this._groupLookups.set('Product', new Network.ProductGrouper());
+    this._groupLookups.set('Frame', new Network.FrameGrouper());
+
+    /** @type {?Network.GroupLookupInterface} */
+    this._activeGroupLookup = null;
+
     this._addFilters();
     this._resetSuggestionBuilder();
     this._initializeView();
@@ -352,19 +354,29 @@ Network.NetworkLogView = class extends UI.VBox {
   }
 
   /**
-   * @param {?Network.NetworkGroupLookupInterface} grouping
+   * @return {!Map<string, !Network.GroupLookupInterface>}
    */
-  setGrouping(grouping) {
-    this._activeGroupLookup = grouping;
-    this._nodeGroups.clear();
-    this._invalidateAllItems();
+  groupLookups() {
+    return this._groupLookups;
   }
 
   /**
-   * @return {!Set<!Network.NetworkRowDecorator>}
+   * @param {string} groupKey
    */
-  rowDecorators() {
-    return this._rowDecorators;
+  setGrouping(groupKey) {
+    var groupLookup = this._groupLookups.get(groupKey) || null;
+    this._activeGroupLookup = groupLookup;
+    if (!groupLookup) {
+      this._nodeGroups.clear();
+      this._invalidateAllItems();
+      return;
+    }
+    groupLookup.initialize().then(() => {
+      if (this._activeGroupLookup !== groupLookup)
+        return;
+      this._nodeGroups.clear();
+      this._invalidateAllItems();
+    });
   }
 
   /**
@@ -498,12 +510,6 @@ Network.NetworkLogView = class extends UI.VBox {
     this.element.id = 'network-container';
     this._setupDataGrid();
 
-    self.runtime.allInstances(Network.NetworkRowDecorator).then(instances => {
-      for (var instance of instances)
-        this._rowDecorators.add(instance);
-      this._invalidateAllItems(true);
-    });
-
     this._columns.show(this.element);
 
     this._summaryBarElement = this.element.createChild('div', 'network-summary-bar');
@@ -837,7 +843,8 @@ Network.NetworkLogView = class extends UI.VBox {
       var request = node.request();
       this._timeCalculator.updateBoundaries(request);
       this._durationCalculator.updateBoundaries(request);
-
+      if (node[Network.NetworkLogView._isFilteredOutSymbol] === isFilteredOut)
+        continue;
       node[Network.NetworkLogView._isFilteredOutSymbol] = isFilteredOut;
       var newParent = this._parentNodeForInsert(node);
       var removeFromParent = node.parent && (isFilteredOut || node.parent !== newParent);
@@ -900,7 +907,6 @@ Network.NetworkLogView = class extends UI.VBox {
     if (group)
       return group;
     group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName(groupKey));
-    group.setColumnExtensions(this._columns.columnExtensions());
     this._nodeGroups.set(groupKey, group);
     return group;
   }
@@ -962,7 +968,6 @@ Network.NetworkLogView = class extends UI.VBox {
    */
   _appendRequest(request) {
     var node = new Network.NetworkRequestNode(this, request);
-    node.setColumnExtensions(this._columns.columnExtensions());
     node[Network.NetworkLogView._isFilteredOutSymbol] = true;
     node[Network.NetworkLogView._isMatchingSearchQuerySymbol] = false;
 
@@ -1819,30 +1824,23 @@ Network.NetworkLogView.Filter;
 /**
  * @interface
  */
-Network.NetworkGroupLookupInterface = function() {};
+Network.GroupLookupInterface = function() {};
+
+Network.GroupLookupInterface.prototype = {
+  /**
+   * @return {!Promise}
+   */
+  initialize: function() {},
 
-Network.NetworkGroupLookupInterface.prototype = {
   /**
    * @param {!SDK.NetworkRequest} request
    * @return {?*}
    */
-  groupForRequest(request) {},
+  groupForRequest: function(request) {},
 
   /**
    * @param {!*} key
    * @return {string}
    */
-  groupName(key) {}
-};
-
-/**
- * @interface
- */
-Network.NetworkRowDecorator = function() {};
-
-Network.NetworkRowDecorator.prototype = {
-  /**
-   * @param {!Network.NetworkNode} node
-   */
-  decorate(node) {}
+  groupName: function(key) {}
 };
diff --git a/front_end/network/NetworkLogViewColumns.js b/front_end/network/NetworkLogViewColumns.js
index e206ff0684..96d19c5a06 100644
--- a/front_end/network/NetworkLogViewColumns.js
+++ b/front_end/network/NetworkLogViewColumns.js
@@ -29,12 +29,12 @@ Network.NetworkLogViewColumns = class {
     /** @type {!Array.<!Network.NetworkLogViewColumns.Descriptor>} */
     this._columns = [];
 
-    /** @type {!Map<string, ?Network.NetworkColumnExtensionInterface>} */
-    this._columnExtensions = new Map();
-
     this._waterfallRequestsAreStale = false;
     this._waterfallScrollerWidthIsStale = true;
 
+    /** @type {?ProductRegistry.Registry} */
+    this._productRegistryInstance = null;
+
     /** @type {!Components.Linkifier} */
     this._popupLinkifier = new Components.Linkifier();
 
@@ -78,6 +78,15 @@ Network.NetworkLogViewColumns = class {
 
   _setupDataGrid() {
     var defaultColumns = Network.NetworkLogViewColumns._defaultColumns;
+
+    if (Runtime.experiments.isEnabled('networkGroupingRequests')) {
+      defaultColumns.splice(1, 0, /** @type {!Network.NetworkLogViewColumns.Descriptor} */ ({
+                              id: 'product',
+                              title: Common.UIString('Product'),
+                              visible: true
+                            }));
+    }
+
     var defaultColumnConfig = Network.NetworkLogViewColumns._defaultColumnConfig;
 
     this._columns = /** @type {!Array<!Network.NetworkLogViewColumns.Descriptor>} */ ([]);
@@ -89,7 +98,6 @@ Network.NetworkLogViewColumns = class {
         columnConfig.titleDOMFragment = this._makeHeaderFragment(columnConfig.title, columnConfig.subtitle);
       this._columns.push(columnConfig);
     }
-    this._loadColumnExtensions();
     this._loadCustomColumnsAndSettings();
 
     this._popoverHelper = new UI.PopoverHelper(this._networkLogView.element, this._getPopoverRequest.bind(this));
@@ -279,6 +287,17 @@ Network.NetworkLogViewColumns = class {
       this._dataGrid.sortNodes(sortFunction, !this._dataGrid.isSortOrderAscending());
       this._networkLogView.dataGridSorted();
       return;
+    } else if (columnId === 'product' && !this._productRegistryInstance) {
+      ProductRegistry.instance().then(productRegistry => {
+        this._productRegistryInstance = productRegistry;
+        var columnConfig = this._columns.find(columnConfig => columnConfig.id === columnId);
+        if (!columnConfig)
+          return;
+        columnConfig.sortingFunction = Network.NetworkRequestNode.ProductComparator.bind(null, productRegistry);
+        if (this._dataGrid.sortColumnId() === 'product')
+          this._sortHandler();
+      });
+      return;
     }
     this._waterfallColumnSortIcon.setIconType('');
 
@@ -328,13 +347,6 @@ Network.NetworkLogViewColumns = class {
     this._updateColumns();
   }
 
-  /**
-   * @return {!Map<string, ?Network.NetworkColumnExtensionInterface>}
-   */
-  columnExtensions() {
-    return this._columnExtensions;
-  }
-
   /**
    * @param {!Network.NetworkLogViewColumns.Descriptor} columnConfig
    */
@@ -353,43 +365,6 @@ Network.NetworkLogViewColumns = class {
     this._persistantSettings.set(saveableSettings);
   }
 
-  _loadColumnExtensions() {
-    var extensions = self.runtime.extensions(Network.NetworkColumnExtensionInterface);
-    for (var i = 0; i < extensions.length; i++) {
-      var extension = extensions[i];
-      var title = extension.title();
-      var columnId = title.toLowerCase() + '-extension';
-
-      this._columnExtensions.set(columnId, null);
-      extension.instance().then(extensionInstanceResolved.bind(this, columnId));
-
-      var columnConfig = /** @type {!Network.NetworkLogViewColumns.Descriptor} */ (
-          Object.assign({}, Network.NetworkLogViewColumns._defaultColumnConfig, {
-            id: columnId,
-            title: title,
-            isResponseHeader: false,
-            isCustomHeader: false,
-            visible: true,
-            sortingFunction:
-                Network.NetworkRequestNode.ExtensionColumnComparator.bind(null, this._columnExtensions, columnId)
-          }));
-      const columnIndex = i + 1;
-      this._columns.splice(columnIndex, 0, columnConfig);
-      if (this._dataGrid)
-        this._dataGrid.addColumn(Network.NetworkLogViewColumns._convertToDataGridDescriptor(columnConfig), columnIndex);
-    }
-
-    /**
-     * @param {string} columnId
-     * @param {!Network.NetworkColumnExtensionInterface} instance
-     * @this {Network.NetworkLogViewColumns}
-     */
-    function extensionInstanceResolved(columnId, instance) {
-      this._columnExtensions.set(columnId, instance);
-      this._networkLogView.columnExtensionResolved();
-    }
-  }
-
   _loadCustomColumnsAndSettings() {
     var savedSettings = this._persistantSettings.get();
     var columnIds = Object.keys(savedSettings);
@@ -642,6 +617,8 @@ Network.NetworkLogViewColumns = class {
 };
 
 Network.NetworkLogViewColumns._initialSortColumn = 'waterfall';
+/** @type {?ProductRegistry.Registry} */
+Network.NetworkRequestNode._productRegistryInstance = null;
 
 /**
  * @typedef {{
@@ -854,23 +831,3 @@ Network.NetworkLogViewColumns.WaterfallSortIds = {
   Duration: 'duration',
   Latency: 'latency'
 };
-
-/**
- * @interface
- */
-Network.NetworkColumnExtensionInterface = function() {};
-
-Network.NetworkColumnExtensionInterface.prototype = {
-  /**
-   * @param {!SDK.NetworkRequest} request
-   * @return {string}
-   */
-  lookupColumnValue(request) {},
-
-  /**
-   * @param {!SDK.NetworkRequest} aRequest
-   * @param {!SDK.NetworkRequest} bRequest
-   * @return {number}
-   */
-  requestComparator(aRequest, bRequest) {}
-};
diff --git a/front_end/network/NetworkPanel.js b/front_end/network/NetworkPanel.js
index d7b9ae832d..a37bc9a383 100644
--- a/front_end/network/NetworkPanel.js
+++ b/front_end/network/NetworkPanel.js
@@ -40,8 +40,7 @@ Network.NetworkPanel = class extends UI.Panel {
     this._networkLogShowOverviewSetting = Common.settings.createSetting('networkLogShowOverview', true);
     this._networkLogLargeRowsSetting = Common.settings.createSetting('networkLogLargeRows', false);
     this._networkRecordFilmStripSetting = Common.settings.createSetting('networkRecordFilmStripSetting', false);
-    this._toggleRecordAction =
-        /** @type {!UI.Action }*/ (UI.actionRegistry.action('network.toggle-recording'));
+    this._toggleRecordAction = /** @type {!UI.Action }*/ (UI.actionRegistry.action('network.toggle-recording'));
 
     /** @type {?PerfUI.FilmStripView} */
     this._filmStripView = null;
@@ -89,8 +88,6 @@ Network.NetworkPanel = class extends UI.Panel {
     this._networkLogLargeRowsSetting.addChangeListener(this._toggleLargerRequests, this);
     this._networkRecordFilmStripSetting.addChangeListener(this._toggleRecordFilmStrip, this);
 
-    /** @type {!Map<string, !Runtime.Extension>} */
-    this._groupingExtensions = new Map();
     this._createToolbarButtons();
 
     this._toggleRecord(true);
@@ -188,35 +185,16 @@ Network.NetworkPanel = class extends UI.Panel {
   }
 
   _setupGroupingCombo() {
-    var extensions = self.runtime.extensions(Network.NetworkGroupLookupInterface);
-    if (!extensions.length)
+    if (!Runtime.experiments.isEnabled('networkGroupingRequests'))
       return;
-
-    var setting = Common.settings.createSetting('networkGrouping', '');
     /** @type {!Array<!{value: string, label: string, title: string}>} */
     var options = [{value: '', label: Common.UIString('No grouping'), title: Common.UIString('No grouping')}];
+    for (var name of this._networkLogView.groupLookups().keys())
+      options.push({value: name, label: Common.UIString(name), title: Common.UIString(name)});
 
-    extensions.forEach(extension => {
-      var identifier = extension.descriptor()['id'];
-      this._groupingExtensions.set(identifier, extension);
-      options.push({value: identifier, label: extension.title(), title: extension.title()});
-    });
+    var setting = Common.settings.createSetting('networkGrouping', '');
     this._panelToolbar.appendToolbarItem(new UI.ToolbarSettingComboBox(options, setting, Common.UIString('Group by')));
-    setting.addChangeListener(event => this._groupingChanged(/** @type {string} */ (event.data)));
-    this._groupingChanged(setting.get());
-  }
-
-  /**
-   * @param {string} identifier
-   */
-  _groupingChanged(identifier) {
-    var extension = this._groupingExtensions.get(identifier);
-    if (extension) {
-      extension.instance().then(
-          grouping => this._networkLogView.setGrouping(/** @type {?Network.NetworkGroupLookupInterface} */ (grouping)));
-    } else {
-      this._networkLogView.setGrouping(null);
-    }
+    setting.addChangeListener(event => this._networkLogView.setGrouping(/** @type {string} */ (event.data)));
   }
 
   /**
diff --git a/front_end/network/module.json b/front_end/network/module.json
index d8b62a3669..6827c7085b 100644
--- a/front_end/network/module.json
+++ b/front_end/network/module.json
@@ -92,6 +92,20 @@
             "order": 40,
             "className": "Network.NetworkConfigView",
             "tags": "disk cache, network throttling, useragent, user agent"
+        },
+        {
+          "type": "@Network.GroupLookupInterface",
+          "className": "Network.ProductGrouper",
+          "experiment": "networkGroupingRequests",
+          "title": "Product",
+          "id": "product"
+        },
+        {
+          "type": "@Network.GroupLookupInterface",
+          "className": "Network.FrameGrouper",
+          "experiment": "networkGroupingRequests",
+          "title": "Frame",
+          "id": "frame"
         }
     ],
     "dependencies": [
@@ -102,7 +116,8 @@
         "data_grid",
         "network_conditions",
         "object_ui",
-        "network_log"
+        "network_log",
+        "product_registry"
     ],
     "scripts": [
         "BlockedURLsPane.js",
@@ -117,6 +132,7 @@
         "NetworkTimeCalculator.js",
         "NetworkLogView.js",
         "NetworkLogViewColumns.js",
+        "NetworkGroupers.js",
         "NetworkManageCustomHeadersView.js",
         "NetworkOverview.js",
         "NetworkWaterfallColumn.js",
diff --git a/front_end/network/networkLogView.css b/front_end/network/networkLogView.css
index 37842b76b1..e46ae4264f 100644
--- a/front_end/network/networkLogView.css
+++ b/front_end/network/networkLogView.css
@@ -161,6 +161,29 @@
 .network-header-subtitle {
     color: gray;
 }
+.network-log-grid.data-grid .product-ad::before,
+.network-log-grid.data-grid .product-tracking::before,
+.network-log-grid.data-grid .product-cdn::before {
+    content: "";
+    border-radius: 5px;
+    height: 5px;
+    width: 5px;
+    margin-right: 3px;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.network-log-grid.data-grid .product-ad::before {
+    background-color: #00BCD4;
+}
+
+.network-log-grid.data-grid .product-tracking::before {
+    background-color: #FF9800;
+}
+
+.network-log-grid.data-grid .product-cdn::before {
+    background-color: #4CAF50;
+}
 
 .network-log-grid.data-grid.small .network-cell-subtitle,
 .network-log-grid.data-grid.small .network-header-subtitle {
diff --git a/front_end/network_group_lookup/NetworkProductGroupLookup.js b/front_end/network_group_lookup/NetworkProductGroupLookup.js
deleted file mode 100644
index 1262dd93ea..0000000000
--- a/front_end/network_group_lookup/NetworkProductGroupLookup.js
+++ /dev/null
@@ -1,148 +0,0 @@
-// Copyright 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.
-/**
- * @implements {Network.NetworkColumnExtensionInterface}
- * @implements {Network.NetworkGroupLookupInterface}
- */
-NetworkGroupLookup.NetworkProductGroupLookup = class {
-  /**
-   * @override
-   * @param {!SDK.NetworkRequest} request
-   * @return {?*}
-   */
-  groupForRequest(request) {
-    var productName = ProductRegistry.nameForUrl(request.parsedURL);
-    if (!productName)
-      return null;
-    return productName;
-  }
-
-  /**
-   * @override
-   * @param {!*} key
-   * @return {string}
-   */
-  groupName(key) {
-    return /** @type {string} */ (key);
-  }
-
-  /**
-   * @override
-   * @param {!SDK.NetworkRequest} request
-   * @return {string}
-   */
-  lookupColumnValue(request) {
-    return ProductRegistry.nameForUrl(request.parsedURL) || '';
-  }
-
-  /**
-   * @override
-   * @param {!SDK.NetworkRequest} aRequest
-   * @param {!SDK.NetworkRequest} bRequest
-   * @return {number}
-   */
-  requestComparator(aRequest, bRequest) {
-    var aValue = this.lookupColumnValue(aRequest);
-    var bValue = this.lookupColumnValue(bRequest);
-    if (aValue === bValue)
-      return aRequest.indentityCompare(bRequest);
-    return aValue > bValue ? 1 : -1;
-  }
-};
-
-/**
- * @implements {Network.NetworkGroupLookupInterface}
- */
-NetworkGroupLookup.NetworkProductFrameGroupLookup = class {
-  /**
-   * @override
-   * @param {!SDK.NetworkRequest} request
-   * @return {?*}
-   */
-  groupForRequest(request) {
-    var resourceTreeModel = request.networkManager().target().model(SDK.ResourceTreeModel);
-    if (!resourceTreeModel)
-      return null;
-    var frame = resourceTreeModel.frameForId(request.frameId);
-    if (!frame || frame.isMainFrame())
-      return null;
-    return frame;
-  }
-
-  /**
-   * @override
-   * @param {!*} frameArg
-   * @return {string}
-   */
-  groupName(frameArg) {
-    var frame = /** @type {!SDK.ResourceTreeFrame} */ (frameArg);
-    var name;
-    var frameParsedURL = new Common.ParsedURL(frame.url);
-    if (frame.url)
-      name = ProductRegistry.nameForUrl(frameParsedURL);
-    if (name)
-      return name;
-    // We are not caching the frame url result because it may change.
-    var symbol = NetworkGroupLookup.NetworkProductFrameGroupLookup._productFrameGroupNameSymbol;
-    if (frame[symbol])
-      return frame[symbol];
-    frame[symbol] = this._lookupFrameStacktraceName(frame) || frameParsedURL.host || frame.name || '<iframe>';
-    return frame[symbol];
-  }
-
-  /**
-   * @param {!SDK.ResourceTreeFrame} frame
-   * @return {?string}
-   */
-  _lookupFrameStacktraceName(frame) {
-    // TODO(allada) This probably belongs in another shared module with some lookup that console will use for execution
-    // context name lookup.
-    var stackTrace = frame.creationStackTrace();
-    var name;
-    while (stackTrace) {
-      for (var stack of stackTrace.callFrames) {
-        if (stack.url)
-          name = ProductRegistry.nameForUrl(new Common.ParsedURL(stack.url));
-        if (name)
-          return name;
-      }
-      stackTrace = frame.parent;
-    }
-    return null;
-  }
-};
-
-/**
- * @implements {Network.NetworkRowDecorator}
- */
-NetworkGroupLookup.NetworkProductTypeGroupLookup = class {
-  /**
-   * @override
-   * @param {!Network.NetworkNode} node
-   */
-  decorate(node) {
-    var request = node.request();
-    var element = node.existingElement();
-    if (!request || !element)
-      return;
-    var typeName = ProductRegistry.typeForUrl(request.parsedURL);
-    if (typeName === null)
-      return;
-    var icon = UI.Icon.create('smallicon-network-product');
-    var color;
-    if (typeName === 1) {
-      color = Common.Color.fromRGBA([255, 252, 225, .6]);
-      icon.style.filter = 'hue-rotate(220deg) brightness(1.5)';
-    } else if (typeName === 2) {
-      color = Common.Color.fromRGBA([211, 253, 211, .6]);
-      icon.style.filter = 'hue-rotate(-90deg) brightness(1.5)';
-    } else {
-      color = Common.Color.fromRGBA([224, 247, 250, .6]);
-    }
-    node.setIconForColumn('product-extension', icon);
-    node.setBackgroundColor(color);
-  }
-};
-
-NetworkGroupLookup.NetworkProductFrameGroupLookup._productFrameGroupNameSymbol = Symbol('ProductFrameGroupName');
diff --git a/front_end/network_group_lookup/module.json b/front_end/network_group_lookup/module.json
deleted file mode 100644
index 9753bb96dc..0000000000
--- a/front_end/network_group_lookup/module.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
-    "extensions": [
-        {
-          "type": "@Network.NetworkGroupLookupInterface",
-          "className": "NetworkGroupLookup.NetworkProductGroupLookup",
-          "title": "Product",
-          "id": "product"
-        },
-        {
-          "type": "@Network.NetworkGroupLookupInterface",
-          "className": "NetworkGroupLookup.NetworkProductFrameGroupLookup",
-          "title": "Frame",
-          "id": "frame"
-        },
-        {
-          "type": "@Network.NetworkColumnExtensionInterface",
-          "className": "NetworkGroupLookup.NetworkProductGroupLookup",
-          "title": "Product"
-        },
-        {
-          "type": "@Network.NetworkRowDecorator",
-          "className": "NetworkGroupLookup.NetworkProductTypeGroupLookup"
-        }
-    ],
-    "dependencies": [
-        "network",
-        "product_registry",
-        "sdk"
-    ],
-    "experiment": "networkGroupingRequests",
-    "scripts": [
-        "NetworkProductGroupLookup.js"
-    ]
-}
diff --git a/front_end/product_registry/ProductNameForURL.js b/front_end/product_registry/ProductNameForURL.js
deleted file mode 100644
index 271157a586..0000000000
--- a/front_end/product_registry/ProductNameForURL.js
+++ /dev/null
@@ -1,95 +0,0 @@
-// Copyright 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.
-/**
- * @param {!Common.ParsedURL} parsedUrl
- * @return {?string}
- */
-ProductRegistry.nameForUrl = function(parsedUrl) {
-  var entry = ProductRegistry.entryForUrl(parsedUrl);
-  if (entry)
-    return entry.name;
-  return null;
-};
-
-/**
- * @param {!Common.ParsedURL} parsedUrl
- * @return {?ProductRegistry.ProductEntry}
- */
-ProductRegistry.entryForUrl = function(parsedUrl) {
-  if (parsedUrl.isDataURL())
-    return null;
-  // TODO(allada) This should be expanded to allow paths as as well as domain to find a product.
-  var productsByDomainHash = ProductRegistry._productsByDomainHash;
-  // Remove leading www. if it is the only subdomain.
-  var domain = parsedUrl.domain().replace(/^www\.(?=[^.]+\.[^.]+$)/, '');
-
-  var previousIndex = -1;
-  var index = -1;
-  // Ensure we loop with full domain first, but do not loop over last part (ie: ".com").
-  for (var nextIndex = domain.indexOf('.'); nextIndex !== -1; nextIndex = domain.indexOf('.', nextIndex + 1)) {
-    var previousSubdomain = domain.substring(previousIndex + 1, index);
-    var subDomain = domain.substring(index + 1);
-    var prefixes = productsByDomainHash.get(ProductRegistry._hashForDomain(subDomain));
-    previousIndex = index;
-    index = nextIndex;
-    if (!prefixes)
-      continue;
-    // Exact match domains are always highest priority.
-    if ('' in prefixes && domain === subDomain)
-      return prefixes[''];
-    if (previousSubdomain) {
-      for (var prefix in prefixes) {
-        var domainPrefix = previousSubdomain.substr(0, prefix.length);
-        if (domainPrefix === prefix && prefix !== '')
-          return prefixes[prefix];
-      }
-    }
-    // Process wildcard subdomain if no better match found.
-    if (prefixes && '*' in prefixes)
-      return prefixes['*'];
-  }
-  return null;
-};
-
-/**
- * @param {!Common.ParsedURL} parsedUrl
- * @return {?number}
- */
-ProductRegistry.typeForUrl = function(parsedUrl) {
-  var entry = ProductRegistry.entryForUrl(parsedUrl);
-  if (entry)
-    return entry.type;
-  return null;
-};
-
-/**
- * @param {string} domain
- * @return {string}
- */
-ProductRegistry._hashForDomain = function(domain) {
-  return ProductRegistry.sha1(domain).substr(0, 16);
-};
-
-/**
- * @param {!Array<string>} productNames
- * @param {!Array<!{hash: string, prefixes: !Object<string, !{product: number, type: (number|undefined)}>}>} data
- */
-ProductRegistry.register = function(productNames, data) {
-  for (var i = 0; i < data.length; i++) {
-    var entry = data[i];
-    var prefixes = {};
-    for (var prefix in entry.prefixes) {
-      var prefixEntry = entry.prefixes[prefix];
-      var type = prefixEntry.type !== undefined ? prefixEntry.type : null;
-      prefixes[prefix] = {name: productNames[prefixEntry.product], type: type};
-    }
-    ProductRegistry._productsByDomainHash.set(entry.hash, prefixes);
-  }
-};
-
-/** @typedef {!{name: string, type: ?number}} */
-ProductRegistry.ProductEntry;
-
-/** @type {!Map<string, !Object<string, !ProductRegistry.ProductEntry>>}} */
-ProductRegistry._productsByDomainHash = new Map();
diff --git a/front_end/product_registry/ProductRegistry.js b/front_end/product_registry/ProductRegistry.js
new file mode 100644
index 0000000000..66f431c883
--- /dev/null
+++ b/front_end/product_registry/ProductRegistry.js
@@ -0,0 +1,43 @@
+// Copyright 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.
+/**
+ * @return {!Promise<!ProductRegistry.Registry>}
+ */
+ProductRegistry.instance = function() {
+  return self.runtime.extension(ProductRegistry.Registry).instance();
+};
+
+/**
+ * @interface
+ */
+ProductRegistry.Registry = function() {};
+
+ProductRegistry.Registry.prototype = {
+  /**
+   * @param {!Common.ParsedURL} parsedUrl
+   * @return {?string}
+   */
+  nameForUrl: function(parsedUrl) {},
+
+  /**
+   * @param {!Common.ParsedURL} parsedUrl
+   * @return {?ProductRegistry.Registry.ProductEntry}
+   */
+  entryForUrl: function(parsedUrl) {},
+
+  /**
+   * @param {!Common.ParsedURL} parsedUrl
+   * @return {?number}
+   */
+  typeForUrl: function(parsedUrl) {},
+
+  /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   * @return {?ProductRegistry.Registry.ProductEntry}
+   */
+  entryForFrame: function(frame) {}
+};
+
+/** @typedef {!{name: string, type: ?number}} */
+ProductRegistry.Registry.ProductEntry;
diff --git a/front_end/product_registry/module.json b/front_end/product_registry/module.json
index e02f9bd79e..3f3ce5c8ce 100644
--- a/front_end/product_registry/module.json
+++ b/front_end/product_registry/module.json
@@ -2,11 +2,10 @@
     "extensions": [
     ],
     "dependencies": [
-        "common"
+        "common",
+        "sdk"
     ],
     "scripts": [
-        "ProductNameForURL.js",
-        "ProductRegistryData.js",
-        "sha1/sha1.js"
+        "ProductRegistry.js"
     ]
 }
diff --git a/front_end/product_registry/ProductRegistryData.js b/front_end/product_registry_impl/ProductRegistryData.js
similarity index 99%
rename from front_end/product_registry/ProductRegistryData.js
rename to front_end/product_registry_impl/ProductRegistryData.js
index ed6e469520..4b93b1823e 100644
--- a/front_end/product_registry/ProductRegistryData.js
+++ b/front_end/product_registry_impl/ProductRegistryData.js
@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 // clang-format off
 /* eslint-disable */
-ProductRegistry.register([
+ProductRegistryImpl.register([
   "1&1 Internet AG",
   "A9",
   "AdGenie",
diff --git a/front_end/product_registry_impl/ProductRegistryImpl.js b/front_end/product_registry_impl/ProductRegistryImpl.js
new file mode 100644
index 0000000000..977720e594
--- /dev/null
+++ b/front_end/product_registry_impl/ProductRegistryImpl.js
@@ -0,0 +1,143 @@
+// Copyright 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.
+
+/**
+ * @implements {ProductRegistry.Registry}
+ */
+ProductRegistryImpl.Registry = class {
+  constructor() {
+  }
+
+  /**
+   * @override
+   * @param {!Common.ParsedURL} parsedUrl
+   * @return {?string}
+   */
+  nameForUrl(parsedUrl) {
+    var entry = this.entryForUrl(parsedUrl);
+    if (entry)
+      return entry.name;
+    return null;
+  }
+
+  /**
+   * @override
+   * @param {!Common.ParsedURL} parsedUrl
+   * @return {?ProductRegistry.Registry.ProductEntry}
+   */
+  entryForUrl(parsedUrl) {
+    if (parsedUrl.isDataURL())
+      return null;
+    // TODO(allada) This should be expanded to allow paths as as well as domain to find a product.
+    var productsByDomainHash = ProductRegistryImpl._productsByDomainHash;
+    // Remove leading www. if it is the only subdomain.
+    var domain = parsedUrl.domain().replace(/^www\.(?=[^.]+\.[^.]+$)/, '');
+
+    var previousIndex = -1;
+    var index = -1;
+    // Ensure we loop with full domain first, but do not loop over last part (ie: ".com").
+    for (var nextIndex = domain.indexOf('.'); nextIndex !== -1; nextIndex = domain.indexOf('.', nextIndex + 1)) {
+      var previousSubdomain = domain.substring(previousIndex + 1, index);
+      var subDomain = domain.substring(index + 1);
+      var prefixes = productsByDomainHash.get(ProductRegistryImpl._hashForDomain(subDomain));
+      previousIndex = index;
+      index = nextIndex;
+      if (!prefixes)
+        continue;
+      // Exact match domains are always highest priority.
+      if ('' in prefixes && domain === subDomain)
+        return prefixes[''];
+      if (previousSubdomain) {
+        for (var prefix in prefixes) {
+          var domainPrefix = previousSubdomain.substr(0, prefix.length);
+          if (domainPrefix === prefix && prefix !== '')
+            return prefixes[prefix];
+        }
+      }
+      // Process wildcard subdomain if no better match found.
+      if (prefixes && '*' in prefixes)
+        return prefixes['*'];
+    }
+    return null;
+  }
+
+  /**
+   * @override
+   * @param {!Common.ParsedURL} parsedUrl
+   * @return {?number}
+   */
+  typeForUrl(parsedUrl) {
+    var entry = this.entryForUrl(parsedUrl);
+    if (entry)
+      return entry.type;
+    return null;
+  }
+
+  /**
+   * @override
+   * @param {!SDK.ResourceTreeFrame} frame
+   * @return {?ProductRegistry.Registry.ProductEntry}
+   */
+  entryForFrame(frame) {
+    var entry;
+    if (frame.url)
+      entry = this.entryForUrl(new Common.ParsedURL(frame.url));
+    if (entry)
+      return entry;
+    // We are not caching the frame url result because it may change.
+    var symbol = ProductRegistryImpl.Registry._productEntryForFrameSymbol;
+    if (!(symbol in frame))
+      frame[symbol] = this._lookupStackTraceEntryForFrame(frame);
+    return frame[symbol];
+  }
+
+  /**
+   * @param {!SDK.ResourceTreeFrame} frame
+   * @return {?ProductRegistry.Registry.ProductEntry}
+   */
+  _lookupStackTraceEntryForFrame(frame) {
+    var stackTrace = frame.creationStackTrace();
+    var entry;
+    while (stackTrace) {
+      for (var stack of stackTrace.callFrames) {
+        if (stack.url)
+          entry = this.entryForUrl(new Common.ParsedURL(stack.url));
+        if (entry)
+          return entry;
+      }
+      stackTrace = frame.parent;
+    }
+    return null;
+  }
+};
+
+ProductRegistryImpl.Registry._productEntryForFrameSymbol = Symbol('ProductEntryForFrame');
+
+/**
+ * @param {string} domain
+ * @return {string}
+ */
+ProductRegistryImpl._hashForDomain = function(domain) {
+  return ProductRegistryImpl.sha1(domain).substr(0, 16);
+};
+
+/**
+ * @param {!Array<string>} productNames
+ * @param {!Array<!{hash: string, prefixes: !Object<string, !{product: number, type: (number|undefined)}>}>} data
+ */
+ProductRegistryImpl.register = function(productNames, data) {
+  for (var i = 0; i < data.length; i++) {
+    var entry = data[i];
+    var prefixes = {};
+    for (var prefix in entry.prefixes) {
+      var prefixEntry = entry.prefixes[prefix];
+      var type = prefixEntry.type !== undefined ? prefixEntry.type : null;
+      prefixes[prefix] = {name: productNames[prefixEntry.product], type: type};
+    }
+    ProductRegistryImpl._productsByDomainHash.set(entry.hash, prefixes);
+  }
+};
+
+/** @type {!Map<string, !Object<string, !ProductRegistry.Registry.ProductEntry>>}} */
+ProductRegistryImpl._productsByDomainHash = new Map();
diff --git a/front_end/product_registry_impl/module.json b/front_end/product_registry_impl/module.json
new file mode 100644
index 0000000000..39e1190e71
--- /dev/null
+++ b/front_end/product_registry_impl/module.json
@@ -0,0 +1,18 @@
+{
+    "extensions": [
+        {
+          "type": "@ProductRegistry.Registry",
+          "className": "ProductRegistryImpl.Registry"
+        }
+    ],
+    "dependencies": [
+        "common",
+        "product_registry",
+        "sdk"
+    ],
+    "scripts": [
+        "ProductRegistryImpl.js",
+        "ProductRegistryData.js",
+        "sha1/sha1.js"
+    ]
+}
diff --git a/front_end/product_registry/sha1/README.chromium b/front_end/product_registry_impl/sha1/README.chromium
similarity index 100%
rename from front_end/product_registry/sha1/README.chromium
rename to front_end/product_registry_impl/sha1/README.chromium
diff --git a/front_end/product_registry/sha1/sha1.js b/front_end/product_registry_impl/sha1/sha1.js
similarity index 99%
rename from front_end/product_registry/sha1/sha1.js
rename to front_end/product_registry_impl/sha1/sha1.js
index 5c7133e43e..5385d0ea41 100644
--- a/front_end/product_registry/sha1/sha1.js
+++ b/front_end/product_registry_impl/sha1/sha1.js
@@ -12,7 +12,7 @@
  * @param {string} str
  * @return {string}
  */
-ProductRegistry.sha1 = function(str) {
+ProductRegistryImpl.sha1 = function(str) {
   return rstr2hex(rstr_sha1(str2rstr_utf8(str)));
 
   /**
diff --git a/front_end/sdk/PaintProfiler.js b/front_end/sdk/PaintProfiler.js
index 6f07ce28b9..058e3e1811 100644
--- a/front_end/sdk/PaintProfiler.js
+++ b/front_end/sdk/PaintProfiler.js
@@ -27,49 +27,66 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
-/**
- * @typedef {!{x: number, y: number, picture: string}}
- */
-SDK.PictureFragment;
 
-/**
- * @unrestricted
- */
-SDK.PaintProfilerSnapshot = class {
+SDK.PaintProfilerModel = class extends SDK.SDKModel {
   /**
    * @param {!SDK.Target} target
-   * @param {string} snapshotId
    */
-  constructor(target, snapshotId) {
-    this._target = target;
-    this._id = snapshotId;
-    this._refCount = 1;
+  constructor(target) {
+    super(target);
+    this._layerTreeAgent = target.layerTreeAgent();
   }
 
   /**
-   * @param {!SDK.Target} target
    * @param {!Array.<!SDK.PictureFragment>} fragments
    * @return {!Promise<?SDK.PaintProfilerSnapshot>}
    */
-  static loadFromFragments(target, fragments) {
-    return target.layerTreeAgent().loadSnapshot(
-        fragments, (error, snapshotId) => error ? null : new SDK.PaintProfilerSnapshot(target, snapshotId));
+  loadSnapshotFromFragments(fragments) {
+    return this._layerTreeAgent.loadSnapshot(
+        fragments, (error, snapshotId) => error ? null : new SDK.PaintProfilerSnapshot(this, snapshotId));
   }
 
   /**
-   * @param {!SDK.Target} target
    * @param {string} encodedPicture
    * @return {!Promise<?SDK.PaintProfilerSnapshot>}
    */
-  static load(target, encodedPicture) {
+  loadSnapshot(encodedPicture) {
     var fragment = {x: 0, y: 0, picture: encodedPicture};
-    return SDK.PaintProfilerSnapshot.loadFromFragments(target, [fragment]);
+    return this.loadSnapshotFromFragments([fragment]);
+  }
+
+  /**
+   * @param {string} layerId
+   * @return {!Promise<?SDK.PaintProfilerSnapshot>}
+   */
+  makeSnapshot(layerId) {
+    return this._layerTreeAgent.makeSnapshot(
+        layerId, (error, snapshotId) => error ? null : new SDK.PaintProfilerSnapshot(this, snapshotId));
+  }
+};
+
+SDK.SDKModel.register(SDK.PaintProfilerModel, SDK.Target.Capability.DOM, false);
+
+/**
+ * @typedef {!{x: number, y: number, picture: string}}
+ */
+SDK.PictureFragment;
+
+SDK.PaintProfilerSnapshot = class {
+  /**
+   * @param {!SDK.PaintProfilerModel} paintProfilerModel
+   * @param {string} snapshotId
+   */
+  constructor(paintProfilerModel, snapshotId) {
+    this._paintProfilerModel = paintProfilerModel;
+    this._id = snapshotId;
+    this._refCount = 1;
   }
 
   release() {
     console.assert(this._refCount > 0, 'release is already called on the object');
     if (!--this._refCount)
-      this._target.layerTreeAgent().releaseSnapshot(this._id);
+      this._paintProfilerModel._layerTreeAgent.releaseSnapshot(this._id);
   }
 
   addReference() {
@@ -77,13 +94,6 @@ SDK.PaintProfilerSnapshot = class {
     console.assert(this._refCount > 0, 'Referencing a dead object');
   }
 
-  /**
-   * @return {!SDK.Target}
-   */
-  target() {
-    return this._target;
-  }
-
   /**
    * @param {?number} firstStep
    * @param {?number} lastStep
@@ -91,7 +101,7 @@ SDK.PaintProfilerSnapshot = class {
    * @return {!Promise<?string>}
    */
   replay(firstStep, lastStep, scale) {
-    return this._target.layerTreeAgent().replaySnapshot(
+    return this._paintProfilerModel._layerTreeAgent.replaySnapshot(
         this._id, firstStep || undefined, lastStep || undefined, scale || 1.0, (error, str) => error ? null : str);
   }
 
@@ -102,14 +112,14 @@ SDK.PaintProfilerSnapshot = class {
   profile(clipRect, callback) {
     var wrappedCallback =
         Protocol.inspectorBackend.wrapClientCallback(callback, 'Protocol.LayerTree.profileSnapshot(): ');
-    this._target.layerTreeAgent().profileSnapshot(this._id, 5, 1, clipRect || undefined, wrappedCallback);
+    this._paintProfilerModel._layerTreeAgent.profileSnapshot(this._id, 5, 1, clipRect || undefined, wrappedCallback);
   }
 
   /**
    * @return {!Promise<?Array<!SDK.PaintProfilerLogItem>>}
    */
   commandLog() {
-    return this._target.layerTreeAgent().snapshotCommandLog(this._id, processLog);
+    return this._paintProfilerModel._layerTreeAgent.snapshotCommandLog(this._id, processLog);
 
     /**
      * @param {?string} error
@@ -125,7 +135,6 @@ SDK.PaintProfilerSnapshot = class {
   }
 };
 
-
 /**
  * @typedef {!{method: string, params: ?Object<string, *>}}
  */
diff --git a/front_end/timeline/TimelineDetailsView.js b/front_end/timeline/TimelineDetailsView.js
index 446c177a52..edd10a8cce 100644
--- a/front_end/timeline/TimelineDetailsView.js
+++ b/front_end/timeline/TimelineDetailsView.js
@@ -122,7 +122,12 @@ Timeline.TimelineDetailsView = class extends UI.VBox {
         break;
       case Timeline.TimelineSelection.Type.Frame:
         var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._selection.object());
-        var filmStripFrame = Timeline.TimelineUIUtils.filmStripModelFrame(this._model.filmStripModel(), frame);
+        var screenshotTime = frame.idle ?
+            frame.startTime :
+            frame.endTime;  // For idle frames, look at the state at the beginning of the frame.
+        var filmStripFrame = this._model.filmStripModel().frameByTimestamp(screenshotTime);
+        if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
+          filmStripFrame = null;
         this._setContent(Timeline.TimelineUIUtils.generateDetailsContentForFrame(frame, filmStripFrame));
         if (frame.layerTree) {
           var layersView = this._layersView();
@@ -204,11 +209,11 @@ Timeline.TimelineDetailsView = class extends UI.VBox {
    * @param {!SDK.TracingModel.Event} event
    */
   _showEventInPaintProfiler(event) {
-    const target = SDK.targetManager.mainTarget();
-    if (!target)
+    const paintProfilerModel = SDK.targetManager.models(SDK.PaintProfilerModel)[0];
+    if (!paintProfilerModel)
       return;
     const paintProfilerView = this._paintProfilerView();
-    const hasProfileData = paintProfilerView.setEvent(target, event);
+    const hasProfileData = paintProfilerView.setEvent(paintProfilerModel, event);
     if (!hasProfileData)
       return;
     if (this._tabbedPane.hasTab(Timeline.TimelineDetailsView.Tab.PaintProfiler))
diff --git a/front_end/timeline/TimelineEventOverview.js b/front_end/timeline/TimelineEventOverview.js
index 71c8a933e0..45b6cab911 100644
--- a/front_end/timeline/TimelineEventOverview.js
+++ b/front_end/timeline/TimelineEventOverview.js
@@ -364,7 +364,7 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
     this._imageByFrame(frames[0]).then(image => {
       if (this._drawGeneration !== drawGeneration)
         return;
-      if (!image || !image.naturalWidth || !image.naturalHeight)
+      if (!image.naturalWidth || !image.naturalHeight)
         return;
       var imageHeight = this.height() - 2 * Timeline.TimelineFilmStripOverview.Padding;
       var imageWidth = Math.ceil(imageHeight * image.naturalWidth / image.naturalHeight);
@@ -376,15 +376,34 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
 
   /**
    * @param {!SDK.FilmStripModel.Frame} frame
-   * @return {!Promise<?HTMLImageElement>}
+   * @return {!Promise<!HTMLImageElement>}
    */
   _imageByFrame(frame) {
     var imagePromise = this._frameToImagePromise.get(frame);
     if (!imagePromise) {
-      imagePromise = frame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
+      imagePromise = frame.imageDataPromise().then(createImage);
       this._frameToImagePromise.set(frame, imagePromise);
     }
     return imagePromise;
+
+    /**
+     * @param {?string} data
+     * @return {!Promise<!HTMLImageElement>}
+     */
+    function createImage(data) {
+      var fulfill;
+      var promise = new Promise(f => fulfill = f);
+
+      var image = /** @type {!HTMLImageElement} */ (createElement('img'));
+      if (data) {
+        image.src = 'data:image/jpg;base64,' + data;
+        image.addEventListener('load', () => fulfill(image));
+        image.addEventListener('error', () => fulfill(image));
+      } else {
+        fulfill(image);
+      }
+      return promise;
+    }
   }
 
   /**
@@ -419,12 +438,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
 
     /**
      * @param {number} x
-     * @param {?HTMLImageElement} image
+     * @param {!HTMLImageElement} image
      * @this {Timeline.TimelineFilmStripOverview}
      */
     function drawFrameImage(x, image) {
       // Ignore draws deferred from a previous update call.
-      if (this._drawGeneration !== drawGeneration || !image)
+      if (this._drawGeneration !== drawGeneration)
         return;
       context.drawImage(image, x, 1, imageWidth, imageHeight);
     }
@@ -448,13 +467,12 @@ Timeline.TimelineFilmStripOverview = class extends Timeline.TimelineEventOvervie
 
     /**
      * @this {Timeline.TimelineFilmStripOverview}
-     * @param {?HTMLImageElement} image
+     * @param {!HTMLImageElement} image
      * @return {?Element}
      */
     function createFrameElement(image) {
       var element = createElementWithClass('div', 'frame');
-      if (image)
-        element.createChild('div', 'thumbnail').appendChild(image);
+      element.createChild('div', 'thumbnail').appendChild(image);
       this._lastFrame = frame;
       this._lastElement = element;
       return element;
diff --git a/front_end/timeline/TimelineFlameChartDataProvider.js b/front_end/timeline/TimelineFlameChartDataProvider.js
index 96a0b5c9d0..c29d535838 100644
--- a/front_end/timeline/TimelineFlameChartDataProvider.js
+++ b/front_end/timeline/TimelineFlameChartDataProvider.js
@@ -47,7 +47,6 @@ Timeline.TimelineFlameChartDataProvider = class {
     this._performanceModel = null;
     /** @type {?TimelineModel.TimelineModel} */
     this._model = null;
-    this._expandedFrameBarHeight = 5;  // Number of bars.
 
     this._consoleColorGenerator =
         new PerfUI.FlameChart.ColorGenerator({min: 30, max: 55}, {min: 70, max: 100, count: 6}, 50, 0.7);
@@ -71,10 +70,8 @@ Timeline.TimelineFlameChartDataProvider = class {
         (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1, collapsible: false}));
     this._staticHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {collapsible: false}));
-    this._framesHeader = /** @type {!PerfUI.FlameChart.GroupStyle} */
-        (Object.assign({}, defaultGroupStyle, {useFirstLineForOverview: true, shareHeaderLine: true}));
     this._interactionsHeaderLevel1 = /** @type {!PerfUI.FlameChart.GroupStyle} */
-        (Object.assign({}, defaultGroupStyle, {useFirstLineForOverview: true}));
+        (Object.assign({useFirstLineForOverview: true}, defaultGroupStyle));
     this._interactionsHeaderLevel2 = /** @type {!PerfUI.FlameChart.GroupStyle} */
         (Object.assign({}, defaultGroupStyle, {padding: 2, nestingLevel: 1}));
 
@@ -161,8 +158,6 @@ Timeline.TimelineFlameChartDataProvider = class {
     this._asyncColorByInteractionPhase = new Map();
     /** @type {!Array<!{title: string, model: !SDK.TracingModel}>} */
     this._extensionInfo = [];
-    /** @type {!Map<!TimelineModel.TimelineFrame, ?Promise<?Image>>} */
-    this._frameImageCache = new Map();
   }
 
   /**
@@ -191,6 +186,7 @@ Timeline.TimelineFlameChartDataProvider = class {
     this._timeSpan = this._model.isEmpty() ? 1000 : this._model.maximumRecordTime() - this._minimumBoundary;
     this._currentLevel = 0;
 
+    this._appendHeader(Common.UIString('Frames'), this._staticHeader);
     this._appendFrameBars(this._performanceModel.frames());
 
     this._appendHeader(Common.UIString('Interactions'), this._interactionsHeaderLevel1);
@@ -443,18 +439,14 @@ Timeline.TimelineFlameChartDataProvider = class {
    * @param {!Array.<!TimelineModel.TimelineFrame>} frames
    */
   _appendFrameBars(frames) {
-    var hasFilmStrtip = !!this._performanceModel.filmStripModel().frames().length;
-    this._framesHeader.collapsible = hasFilmStrtip;
-    this._appendHeader(Common.UIString('Frames'), this._framesHeader);
-    this._frameGroup = this._timelineData.groups.peekLast();
     var style = Timeline.TimelineUIUtils.markerStyleForFrame();
     this._entryTypeByLevel[this._currentLevel] = Timeline.TimelineFlameChartEntryType.Frame;
-    for (var frame of frames) {
+    for (var i = 0; i < frames.length; ++i) {
       this._markers.push(new Timeline.TimelineFlameChartMarker(
-          frame.startTime, frame.startTime - this._model.minimumRecordTime(), style));
-      this._appendFrame(frame);
+          frames[i].startTime, frames[i].startTime - this._model.minimumRecordTime(), style));
+      this._appendFrame(frames[i]);
     }
-    this._currentLevel += hasFilmStrtip ? this._expandedFrameBarHeight : 1;
+    ++this._currentLevel;
   }
 
   /**
@@ -557,66 +549,6 @@ Timeline.TimelineFlameChartDataProvider = class {
     return '';
   }
 
-  /**
-   * @param {number} entryIndex
-   * @param {!CanvasRenderingContext2D} context
-   * @param {?string} text
-   * @param {number} barX
-   * @param {number} barY
-   * @param {number} barWidth
-   * @param {number} barHeight
-   * @return {!Promise}
-   */
-  async _drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight) {
-    var /** @const */ hPadding = 1;
-    var frame = /** @type {!TimelineModel.TimelineFrame} */ (this._entryData[entryIndex]);
-    barX += hPadding;
-    barWidth -= 2 * hPadding;
-    context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
-    context.fillRect(barX, barY, barWidth, barHeight);
-
-    var imagePromise;
-    if (this._frameImageCache.has(frame)) {
-      imagePromise = this._frameImageCache.get(frame);
-    } else {
-      var modelFrame = Timeline.TimelineUIUtils.filmStripModelFrame(this._performanceModel.filmStripModel(), frame);
-      imagePromise = modelFrame &&
-          modelFrame.imageDataPromise().then(data => UI.loadImage(data ? 'data:image/jpg;base64,' + data : ''));
-      this._frameImageCache.set(frame, imagePromise);
-    }
-    var image = await imagePromise;
-    // ---------------- ASYNC ----------------
-    var maxTextWidth = barWidth;
-    if (image) {
-      var imageHeight = barHeight;
-      var imageY = barY;
-      if (this._frameGroup.expanded) {
-        imageHeight *= (this._expandedFrameBarHeight - 1);
-        imageY += barHeight;
-      }
-      var scale = imageHeight / image.naturalHeight;
-      var imageWidth = image.naturalWidth * scale;
-      if (!this._frameGroup.expanded)
-        maxTextWidth = Math.max(0, barWidth - imageWidth);
-      context.save();
-      context.beginPath();
-      context.rect(barX, imageY, barWidth, imageHeight);
-      context.clip();
-      context.drawImage(image, barX + barWidth - imageWidth, imageY, imageWidth, imageHeight);
-      context.restore();
-    }
-
-    var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
-    var textWidth = context.measureText(frameDurationText).width;
-    if (textWidth <= maxTextWidth) {
-      var font = this.entryFont(entryIndex);
-      if (font)
-        context.font = font;
-      context.fillStyle = this.textColor(entryIndex);
-      context.fillText(frameDurationText, barX + (maxTextWidth - textWidth) / 2, barY + barHeight - 4);
-    }
-  }
-
   /**
    * @override
    * @param {number} entryIndex
@@ -634,7 +566,21 @@ Timeline.TimelineFlameChartDataProvider = class {
     var data = this._entryData[entryIndex];
     var type = this._entryType(entryIndex);
     if (type === Timeline.TimelineFlameChartEntryType.Frame) {
-      this._drawFrame(entryIndex, context, text, barX, barY, barWidth, barHeight);
+      var /** @const */ vPadding = 1;
+      var /** @const */ hPadding = 1;
+      var frame = /** {!TimelineModel.TimelineFrame} */ (data);
+      barX += hPadding;
+      barWidth -= 2 * hPadding;
+      barY += vPadding;
+      barHeight -= 2 * vPadding + 1;
+      context.fillStyle = frame.idle ? 'white' : (frame.hasWarnings() ? '#fad1d1' : '#d7f0d1');
+      context.fillRect(barX, barY, barWidth, barHeight);
+      var frameDurationText = Number.preciseMillisToString(frame.duration, 1);
+      var textWidth = context.measureText(frameDurationText).width;
+      if (barWidth >= textWidth) {
+        context.fillStyle = this.textColor(entryIndex);
+        context.fillText(frameDurationText, barX + (barWidth - textWidth) / 2, barY + barHeight - 3);
+      }
       return true;
     }
 
diff --git a/front_end/timeline/TimelinePaintProfilerView.js b/front_end/timeline/TimelinePaintProfilerView.js
index 3b28a01699..e5e86d9f14 100644
--- a/front_end/timeline/TimelinePaintProfilerView.js
+++ b/front_end/timeline/TimelinePaintProfilerView.js
@@ -32,8 +32,8 @@ Timeline.TimelinePaintProfilerView = class extends UI.SplitWidget {
     this._pendingSnapshot = null;
     /** @type {?SDK.TracingModel.Event} */
     this._event = null;
-    /** @type {?SDK.Target} */
-    this._target = null;
+    /** @type {?SDK.PaintProfilerModel} */
+    this._paintProfilerModel = null;
     /** @type {?SDK.PaintProfilerSnapshot} */
     this._lastLoadedSnapshot = null;
   }
@@ -59,13 +59,13 @@ Timeline.TimelinePaintProfilerView = class extends UI.SplitWidget {
   }
 
   /**
-   * @param {!SDK.Target} target
+   * @param {!SDK.PaintProfilerModel} paintProfilerModel
    * @param {!SDK.TracingModel.Event} event
    * @return {boolean}
    */
-  setEvent(target, event) {
+  setEvent(paintProfilerModel, event) {
     this._releaseSnapshot();
-    this._target = target;
+    this._paintProfilerModel = paintProfilerModel;
     this._pendingSnapshot = null;
     this._event = event;
 
@@ -85,7 +85,7 @@ Timeline.TimelinePaintProfilerView = class extends UI.SplitWidget {
   }
 
   _update() {
-    this._logTreeView.setCommandLog(null, []);
+    this._logTreeView.setCommandLog([]);
     this._paintProfilerView.setSnapshotAndLog(null, [], null);
 
     var snapshotPromise;
@@ -93,10 +93,9 @@ Timeline.TimelinePaintProfilerView = class extends UI.SplitWidget {
       snapshotPromise = Promise.resolve({rect: null, snapshot: this._pendingSnapshot});
     } else if (this._event.name === TimelineModel.TimelineModel.RecordType.Paint) {
       var picture = TimelineModel.TimelineData.forEvent(this._event).picture;
-      snapshotPromise =
-          picture.objectPromise()
-              .then(data => SDK.PaintProfilerSnapshot.load(/** @type {!SDK.Target} */ (this._target), data['skp64']))
-              .then(snapshot => snapshot && {rect: null, snapshot: snapshot});
+      snapshotPromise = picture.objectPromise()
+                            .then(data => this._paintProfilerModel.loadSnapshot(data['skp64']))
+                            .then(snapshot => snapshot && {rect: null, snapshot: snapshot});
     } else if (this._event.name === TimelineModel.TimelineModel.RecordType.RasterTask) {
       snapshotPromise = this._frameModel.rasterTilePromise(this._event);
     } else {
@@ -122,7 +121,7 @@ Timeline.TimelinePaintProfilerView = class extends UI.SplitWidget {
      * @this {Timeline.TimelinePaintProfilerView}
      */
     function onCommandLogDone(snapshot, clipRect, log) {
-      this._logTreeView.setCommandLog(snapshot.target(), log || []);
+      this._logTreeView.setCommandLog(log || []);
       this._paintProfilerView.setSnapshotAndLog(snapshot, log || [], clipRect);
     }
   }
diff --git a/front_end/timeline/TimelineUIUtils.js b/front_end/timeline/TimelineUIUtils.js
index 3a8ec1a4f2..5da484d758 100644
--- a/front_end/timeline/TimelineUIUtils.js
+++ b/front_end/timeline/TimelineUIUtils.js
@@ -1046,13 +1046,14 @@ Timeline.TimelineUIUtils = class {
    */
   static _buildRangeStatsCacheIfNeeded(model) {
     var tasks = model.mainThreadTasks();
-    if (tasks.length && tasks[0][Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol])
+    var filter = Timeline.TimelineUIUtils._filterForStats();
+    var firstTask = tasks.find(filter);
+    if (!firstTask || firstTask[Timeline.TimelineUIUtils._categoryBreakdownCacheSymbol])
       return;
     var aggregatedStats = {};
     var ownTimes = [];
     TimelineModel.TimelineModel.forEachEvent(
-        model.mainThreadEvents(), onStartEvent, onEndEvent, undefined, undefined, undefined,
-        Timeline.TimelineUIUtils._filterForStats());
+        model.mainThreadEvents(), onStartEvent, onEndEvent, undefined, undefined, undefined, filter);
 
     /**
      * @param {!SDK.TracingModel.Event} e
@@ -1819,21 +1820,6 @@ Timeline.TimelineUIUtils = class {
       trimAt = 30;
     return url.startsWith('about:') ? `"${frame.name.trimMiddle(trimAt)}"` : frame.url.trimEnd(trimAt);
   }
-
-  /**
-   * @param {!SDK.FilmStripModel} filmStripModel
-   * @param {!TimelineModel.TimelineFrame} frame
-   * @return {?SDK.FilmStripModel.Frame}
-   */
-  static filmStripModelFrame(filmStripModel, frame) {
-    var screenshotTime = frame.idle ?
-        frame.startTime :
-        frame.endTime;  // For idle frames, look at the state at the beginning of the frame.
-    var filmStripFrame = filmStripModel.frameByTimestamp(screenshotTime);
-    if (filmStripFrame && filmStripFrame.timestamp - frame.endTime > 10)
-      filmStripFrame = null;
-    return filmStripFrame;
-  }
 };
 
 /**
diff --git a/front_end/timeline_model/TimelineFrameModel.js b/front_end/timeline_model/TimelineFrameModel.js
index 2679215438..5351a44a41 100644
--- a/front_end/timeline_model/TimelineFrameModel.js
+++ b/front_end/timeline_model/TimelineFrameModel.js
@@ -505,10 +505,11 @@ TimelineModel.LayerPaintEvent = class {
    * @return !Promise<?{rect: !Array<number>, snapshot: !SDK.PaintProfilerSnapshot}>}
    */
   snapshotPromise() {
+    var paintProfilerModel = this._target && this._target.model(SDK.PaintProfilerModel);
     return this.picturePromise().then(picture => {
-      if (!picture || !this._target)
+      if (!picture || !paintProfilerModel)
         return null;
-      return SDK.PaintProfilerSnapshot.load(this._target, picture.serializedPicture)
+      return paintProfilerModel.loadSnapshot(picture.serializedPicture)
           .then(snapshot => snapshot ? {rect: picture.rect, snapshot: snapshot} : null);
     });
   }
diff --git a/front_end/timeline_model/TracingLayerTree.js b/front_end/timeline_model/TracingLayerTree.js
index 37cca1190d..580a407f37 100644
--- a/front_end/timeline_model/TracingLayerTree.js
+++ b/front_end/timeline_model/TracingLayerTree.js
@@ -37,6 +37,7 @@ TimelineModel.TracingLayerTree = class extends SDK.LayerTreeBase {
     super(target);
     /** @type {!Map.<string, !TimelineModel.TracingLayerTile>} */
     this._tileById = new Map();
+    this._paintProfilerModel = target && target.model(SDK.PaintProfilerModel);
   }
 
   /**
@@ -129,7 +130,7 @@ TimelineModel.TracingLayerTree = class extends SDK.LayerTreeBase {
     if (layer)
       layer._reset(payload);
     else
-      layer = new TimelineModel.TracingLayer(this.target(), payload);
+      layer = new TimelineModel.TracingLayer(this._paintProfilerModel, payload);
     this._layersById[payload.layer_id] = layer;
     if (payload.owner_node)
       layer._setNode(this.backendNodeIdToNode().get(payload.owner_node) || null);
@@ -160,11 +161,11 @@ TimelineModel.TracingLayerTree = class extends SDK.LayerTreeBase {
  */
 TimelineModel.TracingLayer = class {
   /**
+   * @param {?SDK.PaintProfilerModel} paintProfilerModel
    * @param {!TimelineModel.TracingLayerPayload} payload
-   * @param {?SDK.Target} target
    */
-  constructor(target, payload) {
-    this._target = target;
+  constructor(paintProfilerModel, payload) {
+    this._paintProfilerModel = paintProfilerModel;
     this._reset(payload);
   }
 
@@ -387,14 +388,14 @@ TimelineModel.TracingLayer = class {
       var fragments =
           pictures.filter(picture => picture && rectsOverlap(picture.rect, targetRect))
               .map(picture => ({x: picture.rect[0], y: picture.rect[1], picture: picture.serializedPicture}));
-      if (!fragments.length || !this._target)
+      if (!fragments.length || !this._paintProfilerModel)
         return null;
       var x0 = fragments.reduce((min, item) => Math.min(min, item.x), Infinity);
       var y0 = fragments.reduce((min, item) => Math.min(min, item.y), Infinity);
       // Rect is in layer content coordinates, make it relative to picture by offsetting to the top left corner.
       var rect = {x: targetRect[0] - x0, y: targetRect[1] - y0, width: targetRect[2], height: targetRect[3]};
-      return SDK.PaintProfilerSnapshot.loadFromFragments(this._target, fragments)
-          .then(snapshot => snapshot ? {rect: rect, snapshot: snapshot} : null);
+      return this._paintProfilerModel.loadSnapshotFromFragments(fragments).then(
+          snapshot => snapshot ? {rect: rect, snapshot: snapshot} : null);
     });
 
     /**