[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..5cd8cf69506198d8ec6fd564b1197afc67166907 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
    */
@@ -355,6 +336,24 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
    * @param {!Network.NetworkNode} b
    * @return {number}
    */
+  static ProductComparitor(a, b) {

[pfeldman, 2017/04/27 22:20:48]

ProductComparator.

[allada, 2017/04/28 01:20:06]

Done.

+    var aRequest = a.request();
+    var bRequest = b.request();
+    if (!aRequest || !bRequest)
+      return !aRequest ? -1 : 1;
+    var productRegistry = ProductRegistry.existingInstance();
+    if (!productRegistry)
+      return aRequest.indentityCompare(bRequest);
+    var aName = productRegistry.nameForUrl(aRequest.parsedURL) || '';
+    var bName = productRegistry.nameForUrl(bRequest.parsedURL) || '';
+    return aName.compareTo(bName) || aRequest.indentityCompare(bRequest);

[pfeldman, 2017/04/27 22:20:48]

localeCompare

[allada, 2017/04/28 01:20:06]

Done.

+  }
+
+  /**
+   * @param {!Network.NetworkNode} a
+   * @param {!Network.NetworkNode} b
+   * @return {number}
+   */
   static SizeComparator(a, b) {
     // TODO(allada) Handle this properly for group nodes.
     var aRequest = a.requestOrFirstKnownChildRequest();
@@ -566,24 +565,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 +687,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 +707,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;
+        }
+        this._parentView.initializeProductRegistryIfNeeded();
+        this._renderProductCell(cell);

[pfeldman, 2017/04/27 22:20:48]

This should be chained after the promise.

[allada, 2017/04/28 01:20:06]

Done.

+        break;
       case 'method':
         this._setTextAndTitle(cell, this._request.requestMethod);
         break;
@@ -901,6 +869,41 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
   /**
    * @param {!Element} cell
    */
+  _renderProductCell(cell) {
+    var productRegistry = ProductRegistry.existingInstance();

[pfeldman, 2017/04/27 22:20:48]

Don't use it here, just chain.

[allada, 2017/04/28 01:20:06]

Done.

+    var request = this.request();
+    if (!productRegistry || !request)
+      return productRegistry;
+    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;
+      }
+    }
+  }
+
+  /**
+   * @param {!Element} cell
+   */
   _renderStatusCell(cell) {
     cell.classList.toggle(
         'network-dim-cell', !this._isFailed() && (this._request.cached() || !this._request.statusCode));
@@ -1100,8 +1103,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);