[Devtools] Restructure network nodes for friendlier products/grouping

Restructures how NetworkNodes are managed to push more of the code into
the individual implementations of the NetworkGrouper. Grouper is now
more like a factory for a NetworkNode.

In the case here, we are setting up FrameGroupNode as an extension of
NetworkGroupNode which is a lightweight wrapper for groupable items.
When a cell is being rendered we are now able to intercept the calls and
render them with special content (like we do here with product and name
column).

R=pfeldman,dgozman
BUG=718236

Review-Url: https://codereview.chromium.org/2859063003
Cr-Commit-Position: refs/heads/master@{#469583}

third_party/WebKit/Source/devtools/BUILD.gn

@@ -318,7 +318,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/NetworkFrameGrouper.js",
   "front_end/network/networkManageCustomHeadersView.css",
   "front_end/network/NetworkManageCustomHeadersView.js",
   "front_end/network/NetworkOverview.js",

third_party/WebKit/Source/devtools/front_end/network/NetworkFrameGrouper.js

+// 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.FrameGrouper = class {
+  /**
+   * @param {!Network.NetworkLogView} parentView
+   */
+  constructor(parentView) {
+    this._parentView = parentView;
+    /** @type {?ProductRegistry.Registry} */
+    this._productRegistry = null;
+    /** @type {!Map<!SDK.ResourceTreeFrame, !Network.FrameGroupNode>} */
+    this._activeGroups = new Map();
+  }
+
+  /**
+   * @override
+   * @return {!Promise}
+   */
+  initialize() {
+    return ProductRegistry.instance().then(productRegistry => {
+      this._productRegistry = productRegistry;
+      this._activeGroups.forEach(node => node.refresh());
+    });
+  }
+
+  /**
+   * @override
+   * @param {!SDK.NetworkRequest} request
+   * @return {?Network.NetworkGroupNode}
+   */
+  groupNodeForRequest(request) {
+    var frame = SDK.ResourceTreeModel.frameForRequest(request);
+    if (!frame || frame.isMainFrame())
+      return null;
+    var groupNode = this._activeGroups.get(frame);
+    if (groupNode)
+      return groupNode;
+    groupNode = new Network.FrameGroupNode(this._parentView, frame, this);
+    this._activeGroups.set(frame, groupNode);
+    return groupNode;
+  }
+
+  /**
+   * @override
+   */
+  reset() {
+    this._activeGroups.clear();
+  }
+};
+
+Network.FrameGroupNode = class extends Network.NetworkGroupNode {
+  /**
+   * @param {!Network.NetworkLogView} parentView
+   * @param {!SDK.ResourceTreeFrame} frame
+   * @param {!Network.FrameGrouper} grouper
+   */
+  constructor(parentView, frame, grouper) {
+    super(parentView);
+    this._frame = frame;
+    this._grouper = grouper;
+    /** @type {?ProductRegistry.Registry.ProductEntry|undefined} */
+    this._productEntryCache;
+  }
+
+  /**
+   * @override
+   * @return {boolean}
+   */
+  isFromFrame() {
+    return true;
+  }
+
+  /**
+   * @override
+   */
+  displayName() {
+    var entry = this._entry();
+    return entry ? entry.name : (new Common.ParsedURL(this._frame.url)).host || this._frame.name || '<iframe>';
+  }
+
+  /**
+   * @override
+   * @param {!Element} cell
+   * @param {string} columnId
+   */
+  renderCell(cell, columnId) {
+    super.renderCell(cell, columnId);
+    if (columnId === 'name') {
+      var name = this.displayName();
+      cell.textContent = name;
+      cell.title = name;
+    }
+    if (columnId === 'product') {
+      var entry = this._entry();
+      if (!entry)
+        return;
+      cell.textContent = entry.name;
+      cell.title = entry.name;
+    }
+  }
+
+  /**
+   * @return {?ProductRegistry.Registry.ProductEntry}
+   */
+  _entry() {
+    if (this._productEntryCache !== undefined)
+      return this._productEntryCache;
+    var productRegistry = this._grouper._productRegistry;
+    if (!productRegistry)
+      return null;
+    this._productEntryCache = productRegistry.entryForFrame(this._frame);
+    return this._productEntryCache;
+  }
+};

third_party/WebKit/Source/devtools/front_end/network/NetworkGroupers.js

-// 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>';
-  }
-};

third_party/WebKit/Source/devtools/front_end/network/NetworkLogView.js

@@ -71,8 +71,6 @@ Network.NetworkLogView = class extends UI.VBox {
 
     /** @type {!Map.<string, !Network.NetworkRequestNode>} */
     this._nodesByRequestId = new Map();
-    /** @type {!Map<*, !Network.NetworkGroupNode>} */
-    this._nodeGroups = new Map();
     /** @type {!Object.<string, boolean>} */
     this._staleRequestIds = {};
     /** @type {number} */
@@ -102,8 +100,7 @@ Network.NetworkLogView = class extends UI.VBox {
 
     /** @type {!Map<string, !Network.GroupLookupInterface>} */
     this._groupLookups = new Map();
-    this._groupLookups.set('Product', new Network.ProductGrouper());
-    this._groupLookups.set('Frame', new Network.FrameGrouper());
+    this._groupLookups.set('Frame', new Network.FrameGrouper(this));
 
     /** @type {?Network.GroupLookupInterface} */
     this._activeGroupLookup = null;
@@ -367,14 +364,13 @@ Network.NetworkLogView = class extends UI.VBox {
     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._activeGroupLookup.reset();
       this._invalidateAllItems();
     });
   }
@@ -899,16 +895,10 @@ Network.NetworkLogView = class extends UI.VBox {
     if (!this._activeGroupLookup)
       return this._dataGrid.rootNode();
 
-    var groupKey = this._activeGroupLookup.groupForRequest(node.request());
-    if (!groupKey)
+    var groupNode = this._activeGroupLookup.groupNodeForRequest(node.request());
+    if (!groupNode)
       return this._dataGrid.rootNode();
-
-    var group = this._nodeGroups.get(groupKey);
-    if (group)
-      return group;
-    group = new Network.NetworkGroupNode(this, this._activeGroupLookup.groupName(groupKey));
-    this._nodeGroups.set(groupKey, group);
-    return group;
+    return groupNode;
   }
 
   reset() {
@@ -929,7 +919,8 @@ Network.NetworkLogView = class extends UI.VBox {
     for (var i = 0; i < nodes.length; ++i)
       nodes[i].dispose();
 
-    this._nodeGroups.clear();
+    if (this._activeGroupLookup)
+      this._activeGroupLookup.reset();
     this._nodesByRequestId.clear();
     this._staleRequestIds = {};
     this._resetSuggestionBuilder();
@@ -1834,13 +1825,9 @@ Network.GroupLookupInterface.prototype = {
 
   /**
    * @param {!SDK.NetworkRequest} request
-   * @return {?*}
+   * @return {?Network.NetworkGroupNode}
    */
-  groupForRequest: function(request) {},
+  groupNodeForRequest: function(request) {},
 
-  /**
-   * @param {!*} key
-   * @return {string}
-   */
-  groupName: function(key) {}
+  reset: function() {}
 };

third_party/WebKit/Source/devtools/front_end/network/module.json

@@ -92,20 +92,6 @@
             "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": [
@@ -132,7 +118,7 @@
         "NetworkTimeCalculator.js",
         "NetworkLogView.js",
         "NetworkLogViewColumns.js",
-        "NetworkGroupers.js",
+        "NetworkFrameGrouper.js",
         "NetworkManageCustomHeadersView.js",
         "NetworkOverview.js",
         "NetworkWaterfallColumn.js",

third_party/WebKit/Source/devtools/front_end/network/networkLogView.css

@@ -161,29 +161,6 @@
 .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 {

third_party/WebKit/Source/devtools/front_end/sdk/ResourceTreeModel.js

@@ -58,6 +58,17 @@ SDK.ResourceTreeModel = class extends SDK.SDKModel {
     this._isInterstitialShowing = false;
   }
 
+  /**
+   * @param {!SDK.NetworkRequest} request
+   * @return {?SDK.ResourceTreeFrame}
+   */
+  static frameForRequest(request) {
+    var resourceTreeModel = request.networkManager().target().model(SDK.ResourceTreeModel);
+    if (!resourceTreeModel)
+      return null;
+    return resourceTreeModel.frameForId(request.frameId);
+  }
+
   /**
    * @return {!Array.<!SDK.ResourceTreeFrame>}
    */