[Devtools] Added frame grouping to network panel

third_party/WebKit/Source/devtools/front_end/network_group_lookup/NetworkProductGroupLookup.js

Index: third_party/WebKit/Source/devtools/front_end/network_group_lookup/NetworkProductGroupLookup.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network_group_lookup/NetworkProductGroupLookup.js b/third_party/WebKit/Source/devtools/front_end/network_group_lookup/NetworkProductGroupLookup.js
index c264d77c74023341d17753232b8edb1a0b8a1563..82e1936c17451359e40f7e4b3f6c08ad72f96882 100644
--- a/third_party/WebKit/Source/devtools/front_end/network_group_lookup/NetworkProductGroupLookup.js
+++ b/third_party/WebKit/Source/devtools/front_end/network_group_lookup/NetworkProductGroupLookup.js
@@ -9,10 +9,22 @@ NetworkGroupLookup.NetworkProductGroupLookup = class {
   /**
    * @override
    * @param {!SDK.NetworkRequest} request
-   * @return {?string}
+   * @return {?*}
+   */
+  groupForRequest(request) {
+    var productName = ProductRegistry.nameForUrl(request.parsedURL);
+    if (!productName)
+      return null;
+    return productName;
+  }
+
+  /**
+   * @override
+   * @param {!*} key
+   * @return {string}
    */
-  lookup(request) {
-    return ProductRegistry.nameForUrl(request.parsedURL);
+  groupNameForKey(key) {
+    return /** @type {string} */ (key);
   }
 
   /**
@@ -21,7 +33,7 @@ NetworkGroupLookup.NetworkProductGroupLookup = class {
    * @return {string}
    */
   lookupColumnValue(request) {
-    return this.lookup(request) || '';
+    return ProductRegistry.nameForUrl(request.parsedURL) || '';
   }
 
   /**
@@ -38,3 +50,65 @@ NetworkGroupLookup.NetworkProductGroupLookup = class {
     return aValue > bValue ? 1 : -1;
   }
 };
+
+/**
+ * @implements {Network.NetworkGroupLookupInterface}
+ */
+NetworkGroupLookup.NetworkProductFrameGroupLookup = class {
+  /**
+   * @override
+   * @param {!SDK.NetworkRequest} request
+   * @return {?*}
+   */
+  groupForRequest(request) {
+    var resourceTreeModel = request.target().model(SDK.ResourceTreeModel);
+    if (!resourceTreeModel)
+      return null;
+    var frame = resourceTreeModel.frameForId(request.frameId);
+    if (!frame || frame.isMainFrame())
+      return null;
+    return frame;
+  }
+
+  /**
+   * @override
+   * @param {!*} frame
+   * @return {string}
+   */
+  groupNameForKey(frame) {
+    frame = /** @type {!SDK.ResourceTreeFrame} */ (frame);

[pfeldman, 2017/04/04 20:11:59]

nit: var frame = /** */ (key); - for better readability and easy migration to
let in the future.

[allada, 2017/04/04 21:25:56]

Done.

+    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) {

[pfeldman, 2017/04/04 20:11:59]

I've just seen this code in the context's version, which makes me thing that
there is a place for the frame namer. You could place it into the
ProductRegistry for now and then we'll see where it belongs. You can do it when
the second instance (console) emerges.

[allada, 2017/04/04 21:25:56]

Acknowledged.

+    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;
+  }
+};
+
+NetworkGroupLookup.NetworkProductFrameGroupLookup._productFrameGroupNameSymbol = Symbol('ProductFrameGroupName');