DevTools: render product badges behind the setting.

third_party/WebKit/Source/devtools/front_end/common/Color.js

Index: third_party/WebKit/Source/devtools/front_end/common/Color.js
diff --git a/third_party/WebKit/Source/devtools/front_end/common/Color.js b/third_party/WebKit/Source/devtools/front_end/common/Color.js
index 10db6092691ad3c40e3a3ad8a780b72c9affe8e4..a5330eb7c64a0c3a8ce189538157317ce2a2873e 100644
--- a/third_party/WebKit/Source/devtools/front_end/common/Color.js
+++ b/third_party/WebKit/Source/devtools/front_end/common/Color.js
@@ -817,3 +817,67 @@ Common.Color.PageHighlight = {
   Shape: Common.Color.fromRGBA([96, 82, 177, 0.8]),
   ShapeMargin: Common.Color.fromRGBA([96, 82, 127, .6])
 };
+
+Common.Color.Generator = class {
+  /**
+   * @param {!{min: number, max: number}|number=} hueSpace
+   * @param {!{min: number, max: number, count: (number|undefined)}|number=} satSpace
+   * @param {!{min: number, max: number, count: (number|undefined)}|number=} lightnessSpace
+   * @param {!{min: number, max: number, count: (number|undefined)}|number=} alphaSpace
+   */
+  constructor(hueSpace, satSpace, lightnessSpace, alphaSpace) {
+    this._hueSpace = hueSpace || {min: 0, max: 360};
+    this._satSpace = satSpace || 67;
+    this._lightnessSpace = lightnessSpace || 80;
+    this._alphaSpace = alphaSpace || 1;
+    /** @type {!Map<string, string>} */
+    this._colors = new Map();
+  }
+
+  /**
+   * @param {string} id
+   * @param {string} color
+   */
+  setColorForID(id, color) {
+    this._colors.set(id, color);
+  }
+
+  /**
+   * @param {string} id
+   * @return {string}
+   */
+  colorForID(id) {
+    var color = this._colors.get(id);
+    if (!color) {
+      color = this._generateColorForID(id);
+      this._colors.set(id, color);
+    }
+    return color;
+  }
+
+  /**
+   * @param {string} id
+   * @return {string}
+   */
+  _generateColorForID(id) {
+    var hash = String.hashCode(id);
+    var h = this._indexToValueInSpace(hash, this._hueSpace);
+    var s = this._indexToValueInSpace(hash >> 8, this._satSpace);
+    var l = this._indexToValueInSpace(hash >> 16, this._lightnessSpace);
+    var a = this._indexToValueInSpace(hash >> 24, this._alphaSpace);
+    return `hsla(${h}, ${s}%, ${l}%, ${a})`;
+  }
+
+  /**
+   * @param {number} index
+   * @param {!{min: number, max: number, count: (number|undefined)}|number} space
+   * @return {number}
+   */
+  _indexToValueInSpace(index, space) {
+    if (typeof space === 'number')
+      return space;
+    var count = space.count || space.max - space.min;
+    index %= count;
+    return space.min + Math.floor(index / (count - 1) * (space.max - space.min));
+  }
+};