[Devtools] New structure and colorize rows for network products

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

Index: third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js
diff --git a/third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js b/third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js
index a602a1f0462ce67c62869cefa9a9aabd56ee898b..5936f76efacc558498248eaa753e88c7cbdb6b30 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js
+++ b/third_party/WebKit/Source/devtools/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)
@@ -143,13 +131,6 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
   }
 
   /**
-   * @param {!Map<string, ?Network.NetworkColumnExtensionInterface>} columnExtensions
-   */
-  setColumnExtensions(columnExtensions) {
-    this._columnExtensions = columnExtensions;
-  }
-
-  /**
    * @param {boolean} hovered
    * @param {boolean} showInitiatorChain
    */
@@ -351,6 +332,22 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
   }
 
   /**
+   * @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
    * @return {number}
@@ -566,24 +563,6 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
   }
 
   /**
-   * @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
    */
   showingInitiatorChainChanged() {
@@ -706,21 +685,11 @@ 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;
@@ -900,6 +866,42 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
 
   /**
    * @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)

[pfeldman, 2017/04/28 21:08:35]

When does this happen?

[allada, 2017/04/28 22:21:09]

It should not happen, however if I call element() when and existingElement() is
null it will construct it calling this function again (ie: infinite loop).

Since this function does not need to do anything in the event that the element
does not exist we simply bail if we don't have an element.

Plus... Closure complains if you don't do this check.

+        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
    */
   _renderStatusCell(cell) {
     cell.classList.toggle(
@@ -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);