[Devtools] Updated format to store product registry data

Prepares the UI and product registry file format to add visual markers of
network resource classifications.

R=pfeldman
BUG=664704

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

third_party/WebKit/Source/devtools/front_end/Images/src/optimize_png.hashes

@@ -4,7 +4,7 @@
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "55c46735baa910dbe8f6b9602eb2f464",
+    "smallIcons.svg": "a612780441b0cc423900f6343ee572ab",
     "mediumIcons.svg": "e63ac6385b0a6efb783d9838517e5e44",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "treeoutlineTriangles.svg": "017d2f89437df0afc6b9cd5ff43735d9",

third_party/WebKit/Source/devtools/front_end/Images/src/svg2png.hashes

@@ -4,7 +4,7 @@
     "breakpointConditional.svg": "4cf90210b2af2ed84db2f60b07bcde28",
     "checkboxCheckmark.svg": "f039bf85cee42ad5c30ca3bfdce7912a",
     "errorWave.svg": "e183fa242a22ed4784a92f6becbc2c45",
-    "smallIcons.svg": "55c46735baa910dbe8f6b9602eb2f464",
+    "smallIcons.svg": "a612780441b0cc423900f6343ee572ab",
     "mediumIcons.svg": "e63ac6385b0a6efb783d9838517e5e44",
     "breakpoint.svg": "69cd92d807259c022791112809b97799",
     "treeoutlineTriangles.svg": "017d2f89437df0afc6b9cd5ff43735d9",

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

@@ -44,6 +44,8 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
     this._showingInitiatorChain = false;
     /** @type {?SDK.NetworkRequest} */
     this._requestOrFirstKnownChildRequest = null;
+    /** @type {!Map<string, !UI.Icon>} */
+    this._columnIcons = new Map();
   }
 
   /**
@@ -612,15 +614,25 @@ 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);
   }
 
+  /**
+   * @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.textContent = text;
+    element.createTextChild(text);
     element.title = text;
   }
 
@@ -631,6 +643,9 @@ 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)) {

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

@@ -76,6 +76,9 @@ Network.NetworkLogView = class extends UI.VBox {
     this._nodesByRequestId = new Map();
     /** @type {!Map<*, !Network.NetworkGroupNode>} */
     this._nodeGroups = new Map();
+    /** @type {!Set<!Network.NetworkRowDecorator>} */
+    this._rowDecorators = new Set();
+
     /** @type {!Object.<string, boolean>} */
     this._staleRequestIds = {};
     /** @type {number} */
@@ -357,6 +360,13 @@ Network.NetworkLogView = class extends UI.VBox {
     this._invalidateAllItems();
   }
 
+  /**
+   * @return {!Set<!Network.NetworkRowDecorator>}
+   */
+  rowDecorators() {
+    return this._rowDecorators;
+  }
+
   /**
    * @param {!SDK.NetworkRequest} request
    * @return {?Network.NetworkRequestNode}
@@ -488,6 +498,12 @@ Network.NetworkLogView = class extends UI.VBox {
     this.element.id = 'network-container';
     this._setupDataGrid();
 
+    self.runtime.allInstances(Network.NetworkRowDecorator).then(instances => {
+      for (var instance of instances)
+        this._rowDecorators.add(instance);
+      this._invalidateAllItems(true);
+    });
+
     this._columns.show(this.element);
 
     this._summaryBarElement = this.element.createChild('div', 'network-summary-bar');
@@ -1818,3 +1834,15 @@ Network.NetworkGroupLookupInterface.prototype = {
    */
   groupName(key) {}
 };
+
+/**
+ * @interface
+ */
+Network.NetworkRowDecorator = function() {};
+
+Network.NetworkRowDecorator.prototype = {
+  /**
+   * @param {!Network.NetworkNode} node
+   */
+  decorate(node) {}
+};

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

@@ -113,4 +113,29 @@ NetworkGroupLookup.NetworkProductFrameGroupLookup = class {
   }
 };
 
+/**
+ * @implements {Network.NetworkRowDecorator}
+ */
+NetworkGroupLookup.NetworkProductTypeGroupLookup = class {
+  /**
+   * @override
+   * @param {!Network.NetworkNode} node
+   */
+  decorate(node) {
+    var request = node.request();
+    var element = node.existingElement();
+    if (!request || !element)
+      return;
+    var typeName = ProductRegistry.typeForUrl(request.parsedURL);
+    if (!typeName)
+      return;
+    var icon = UI.Icon.create('smallicon-network-product');
+    if (typeName === 'Tracking')
+      icon.style.filter = 'hue-rotate(220deg) brightness(1.5)';
+    if (typeName === 'CDN')
+      icon.style.filter = 'hue-rotate(-90deg) brightness(1.5)';
+    node.setIconForColumn('product-extension', icon);
+  }
+};
+
 NetworkGroupLookup.NetworkProductFrameGroupLookup._productFrameGroupNameSymbol = Symbol('ProductFrameGroupName');

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

@@ -16,6 +16,10 @@
           "type": "@Network.NetworkColumnExtensionInterface",
           "className": "NetworkGroupLookup.NetworkProductGroupLookup",
           "title": "Product"
+        },
+        {
+          "type": "@Network.NetworkRowDecorator",
+          "className": "NetworkGroupLookup.NetworkProductTypeGroupLookup"
         }
     ],
     "dependencies": [

third_party/WebKit/Source/devtools/front_end/product_registry/ProductNameForURL.js

@@ -6,6 +6,17 @@
  * @return {?string}
  */
 ProductRegistry.nameForUrl = function(parsedUrl) {
+  var entry = ProductRegistry.entryForUrl(parsedUrl);
+  if (entry)
+    return entry.name;
+  return null;
+};
+
+/**
+ * @param {!Common.ParsedURL} parsedUrl
+ * @return {?ProductRegistry.ProductEntry}
+ */
+ProductRegistry.entryForUrl = function(parsedUrl) {
   if (parsedUrl.isDataURL())
     return null;
   // TODO(allada) This should be expanded to allow paths as as well as domain to find a product.
@@ -41,6 +52,17 @@ ProductRegistry.nameForUrl = function(parsedUrl) {
   return null;
 };
 
+/**
+ * @param {!Common.ParsedURL} parsedUrl
+ * @return {?string}
+ */
+ProductRegistry.typeForUrl = function(parsedUrl) {
+  var entry = ProductRegistry.entryForUrl(parsedUrl);
+  if (entry)
+    return entry.type;
+  return null;
+};
+
 /**
  * @param {string} domain
  * @return {string}
@@ -50,20 +72,29 @@ ProductRegistry._hashForDomain = function(domain) {
 };
 
 /**
+ * @param {!Array<string>} productTypes
  * @param {!Array<string>} productNames
- * @param {!Array<!{hash: string, prefixes: !Object<string, number>}>} data
+ * @param {!Array<!{hash: string, prefixes: !Object<string, !{product: number, type: (number|undefined)}>}>} data
  */
-ProductRegistry.register = function(productNames, data) {
+ProductRegistry.register = function(productTypes, productNames, data) {
+  var typesMap = /** @type {!Map<number, string>} */ (new Map());
+  for (var i = 0; i < productTypes.length; i++)
+    typesMap.set(i, productTypes[i]);
+
   for (var i = 0; i < data.length; i++) {
     var entry = data[i];
     var prefixes = {};
     for (var prefix in entry.prefixes) {
-      var productNameIndex = entry.prefixes[prefix];
-      prefixes[prefix] = productNames[productNameIndex];
+      var prefixEntry = entry.prefixes[prefix];
+      var type = prefixEntry.type !== undefined ? (typesMap.get(prefixEntry.type) || null) : null;
+      prefixes[prefix] = {name: productNames[prefixEntry.product], type: type};
     }
     ProductRegistry._productsByDomainHash.set(entry.hash, prefixes);
   }
 };
 
-/** @type {!Map<string, !Object<string, string>>}} */
+/** @typedef {!{name: string, type: ?string}} */
+ProductRegistry.ProductEntry;
+
+/** @type {!Map<string, !Object<string, !ProductRegistry.ProductEntry>>}} */
 ProductRegistry._productsByDomainHash = new Map();