[Devtools] Network waterfall and grid rows feed bg color from same place

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 015fb7df46cfd91fd8e5f46bbdcf4d6dcb5368d6..050c513bdcf1d2a217827de7c980b1330dd51ed0 100644
--- a/third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js
+++ b/third_party/WebKit/Source/devtools/front_end/network/NetworkDataGridNode.js
@@ -49,6 +49,63 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
   }
 
   /**
+   * @return {!Network.NetworkNode._SupportedBackgroundColors}
+   */
+  static _themedBackgroundColors() {
+    if (Network.NetworkNode._themedBackgroundColorsCache)
+      return Network.NetworkNode._themedBackgroundColorsCache;
+    var colorUsage = UI.ThemeSupport.ColorUsage;

[pfeldman, 2017/04/19 19:52:03]

style: You extracted it to use only once.

[allada, 2017/04/19 23:38:46]

Done.

+    var bgColors = Network.NetworkNode._backgroundColors;
+    var themedColors = {};
+    for (var name in bgColors) {
+      var patchedColor = bgColors[name].slice(0);
+      UI.themeSupport.patchHSLA(patchedColor, colorUsage.Background);

[pfeldman, 2017/04/19 19:52:03]

Why don't you manipulate colors instead? Isn't this method private?

[allada, 2017/04/19 23:38:46]

I exposed this method instead. It does exactly what I need. The only thing
that's strange is it manipulates the input parameter. I could change it, but I
figured it does this for speed reasons since timeline is a huge user of this
color stuff and probably wants it fast.

+      Common.Color.hsl2rgb(patchedColor, patchedColor, true);
+      themedColors[name] = patchedColor;
+    }
+    Network.NetworkNode._themedBackgroundColorsCache =
+        /** @type {!Network.NetworkNode._SupportedBackgroundColors} */ (themedColors);
+    return Network.NetworkNode._themedBackgroundColorsCache;
+  }
+
+  /**
+   * @return {string}
+   */
+  backgroundColor() {
+    var bgColors = Network.NetworkNode._themedBackgroundColors();
+    var color = this.isStriped() ? bgColors.Stripe.slice(0) : bgColors.Default.slice(0);
+    if (this.isNavigationRequest())
+      Common.Color.blendColors(bgColors.Navigation, color, color);
+    if (this.hovered())
+      Common.Color.blendColors(bgColors.Hovered, color, color);
+    if (this.isOnInitiatorPath())
+      Common.Color.blendColors(bgColors.InitiatorPath, color, color);
+    if (this.isOnInitiatedPath())
+      Common.Color.blendColors(bgColors.InitiatedPath, color, color);
+    if (this.selected)
+      Common.Color.blendColors(bgColors.Selected, color, color);
+
+    return /** @type {string} */ (Common.Color.fromRGBA(color).asString(Common.Color.Format.HEX));
+  }
+
+  _updateBackgroundColor() {
+    var element = this.existingElement();
+    if (!element)
+      return;
+    element.style.backgroundColor = this.backgroundColor();
+    this._parentView.stylesChanged();
+  }
+
+  /**
+   * @override
+   * @param {boolean} isStriped
+   */
+  setStriped(isStriped) {
+    super.setStriped(isStriped);
+    this._updateBackgroundColor();
+  }
+
+  /**
    * @return {!Network.NetworkLogView}
    */
   parentView() {
@@ -101,6 +158,7 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
       this.showingInitiatorChainChanged();
     }
     this._parentView.stylesChanged();
+    this._updateBackgroundColor();
   }
 
   /**
@@ -184,6 +242,30 @@ Network.NetworkNode = class extends DataGrid.SortableDataGridNode {
   }
 };
 
+/** @type {!Network.NetworkNode._SupportedBackgroundColors} */
+Network.NetworkNode._backgroundColors = {
+  Default: [0, 0.0, 1.0, 1.0],
+  Stripe: [0, 0.0, 0.96, 1.0],
+  Navigation: [0.6, 1.0, 0.93, 1.0],
+  Hovered: [0.62, 0.74, 0.95, 0.7],
+  InitiatorPath: [0.35, 0.6, 0.54, 0.2],
+  InitiatedPath: [0.03, 0.68, 0.54, 0.2],
+  Selected: [0.63, 0.68, 0.54, .8]
+};
+
+/** @type {!Network.NetworkNode._SupportedBackgroundColors|undefined} */
+Network.NetworkNode._themedBackgroundColorsCache;
+
+/** @typedef {!{
+  Default: !Array<number>,
+  Stripe: !Array<number>,
+  Navigation: !Array<number>,
+  Hovered: !Array<number>,
+  InitiatorPath: !Array<number>,
+  InitiatedPath: !Array<number>
+}} */
+Network.NetworkNode._SupportedBackgroundColors;
+
 /**
  * @unrestricted
  */
@@ -524,7 +606,7 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
     if (this._isOnInitiatorPath === isOnInitiatorPath || !this.attached())
       return;
     this._isOnInitiatorPath = isOnInitiatorPath;
-    this.element().classList.toggle('network-node-on-initiator-path', isOnInitiatorPath);
+    this._updateBackgroundColor();
   }
 
   /**
@@ -542,7 +624,7 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
     if (this._isOnInitiatedPath === isOnInitiatedPath || !this.attached())
       return;
     this._isOnInitiatedPath = isOnInitiatedPath;
-    this.element().classList.toggle('network-node-on-initiated-path', isOnInitiatedPath);
+    this._updateBackgroundColor();
   }
 
   /**
@@ -594,6 +676,7 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
   markAsNavigationRequest() {
     this._isNavigationRequest = true;
     this.refresh();
+    this._updateBackgroundColor();
   }
 
   /**
@@ -617,6 +700,7 @@ Network.NetworkRequestNode = class extends Network.NetworkNode {
     for (var rowDecorator of this._parentView.rowDecorators())
       rowDecorator.decorate(this);
     super.createCells(element);
+    this._updateBackgroundColor();
   }
 
   /**