[Devtools] New structure and colorize rows for network products

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

 /*
  * Copyright (C) 2007, 2008 Apple Inc.  All rights reserved.
  * Copyright (C) 2008, 2009 Anthony Ricaud <rik@webkit.org>
  * Copyright (C) 2011 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  *
  * 1.  Redistributions of source code must retain the above copyright
@@ skipping 20 matching lines @@
 /**
  * @unrestricted
  */
 Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
   /**
    * @param {!Network.NetworkLogView} parentView
    */
   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;
   }
 
   /**
    * @return {!Network.NetworkNode._SupportedBackgroundColors}
    */
   static _themedBackgroundColors() {
     if (Network.NetworkNode._themedBackgroundColorsCache)
       return Network.NetworkNode._themedBackgroundColorsCache;
@@ skipping 22 matching lines @@
     if (this.isOnInitiatorPath())
       color = color.blendWith(bgColors.InitiatorPath);
     if (this.isOnInitiatedPath())
       color = color.blendWith(bgColors.InitiatedPath);
     if (this.selected)
       color = color.blendWith(bgColors.Selected);
 
     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)
       return;
     element.style.backgroundColor = this.backgroundColor();
     this._parentView.stylesChanged();
   }
 
   /**
    * @override
@@ skipping 27 matching lines @@
 
   /**
    * @override
    * @return {number}
    */
   nodeSelfHeight() {
     return this._parentView.rowHeight();
   }
 
   /**
-   * @param {!Map<string, ?Network.NetworkColumnExtensionInterface>} columnExtensions
-   */
-  setColumnExtensions(columnExtensions) {
-    this._columnExtensions = columnExtensions;
-  }
-
-  /**
    * @param {boolean} hovered
    * @param {boolean} showInitiatorChain
    */
   setHovered(hovered, showInitiatorChain) {
     if (this._isHovered === hovered && this._showingInitiatorChain === showInitiatorChain)
       return;
     if (this._isHovered !== hovered) {
       this._isHovered = hovered;
       if (this.attached())
         this.element().classList.toggle('hover', hovered);
@@ skipping 181 matching lines @@
     var aRemoteAddress = aRequest.remoteAddress();
     var bRemoteAddress = bRequest.remoteAddress();
     if (aRemoteAddress > bRemoteAddress)
       return 1;
     if (bRemoteAddress > aRemoteAddress)
       return -1;
     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
    * @return {number}
    */
   static SizeComparator(a, b) {
     // TODO(allada) Handle this properly for group nodes.
     var aRequest = a.requestOrFirstKnownChildRequest();
     var bRequest = b.requestOrFirstKnownChildRequest();
     if (!aRequest || !bRequest)
       return !aRequest ? -1 : 1;
@@ skipping 195 matching lines @@
     var aHeader = aRequest.responseHeaderValue(propertyName);
     var bHeader = bRequest.responseHeaderValue(propertyName);
     var aValue = aHeader ? new Date(aHeader).getTime() : -Infinity;
     var bValue = bHeader ? new Date(bHeader).getTime() : -Infinity;
     if (aValue === bValue)
       return aRequest.indentityCompare(bRequest);
     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
    */
   showingInitiatorChainChanged() {
     var showInitiatorChain = this.showingInitiatorChain();
 
     var initiatorGraph = NetworkLog.networkLog.initiatorGraphForRequest(this._request);
     for (var request of initiatorGraph.initiators) {
       if (request === this._request)
         continue;
       var node = this.parentView().nodeForRequest(request);
@@ skipping 102 matching lines @@
   /**
    * @override
    * @param {!Element} element
    */
   createCells(element) {
     this._nameCell = null;
     this._initiatorCell = null;
 
     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
    */
   _setTextAndTitle(element, text) {
     element.createTextChild(text);
     element.title = text;
   }
 
   /**
    * @override
    * @param {string} columnIdentifier
    * @return {!Element}
    */
   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;
       case 'status':
         this._renderStatusCell(cell);
         break;
       case 'protocol':
         this._setTextAndTitle(cell, this._request.protocol);
         break;
       case 'scheme':
@@ skipping 129 matching lines @@
     iconElement.classList.add(this._request.resourceType().name());
 
     cell.appendChild(iconElement);
     cell.createTextChild(this._request.networkManager().target().decorateLabel(this._request.name()));
     this._appendSubtitle(cell, this._request.path());
     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
    */
   _renderStatusCell(cell) {
     cell.classList.toggle(
         'network-dim-cell', !this._isFailed() && (this._request.cached() || !this._request.statusCode));
 
     if (this._request.failed && !this._request.canceled && !this._request.wasBlocked()) {
       var failText = Common.UIString('(failed)');
       if (this._request.localizedFailDescription) {
         cell.createTextChild(failText);
         this._appendSubtitle(cell, this._request.localizedFailDescription);
@@ skipping 180 matching lines @@
     element.title = text;
   }
 
   /**
    * @override
    * @param {string} columnIdentifier
    * @return {!Element}
    */
   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);
       cell.classList.add('disclosure');
       this._setTextAndTitle(cell, this._displayName);
     }
     return cell;
   }
 
   /**
    * @override
    * @param {boolean=} supressSelectedEvent
    */
   select(supressSelectedEvent) {
     if (this.expanded) {
       this.collapse();
       return;
     }
     this.expand();
   }
 };