Chrome DevTools中的3rd Party徽章：顏色

Question

是否想知道是否有人對DevTools中的3rd Party徽章的重要性以及其顏色有深刻的了解？ 他們各方面都各不相同，並且很好奇這是如何決定的以及為什么。

Answer 1

顏色是根據產品名稱生成的（因此重新加載之間保持一致）。 它們沒有任何特殊含義。

從BadgePool.js （其中entryName可能類似於“ Google Analytics（分析）”）：

  static colorForEntryName(entryName) {
    if (!ProductRegistry.BadgePool._colorGenerator) {
      ProductRegistry.BadgePool._colorGenerator =
          new Common.Color.Generator({min: 30, max: 330}, {min: 50, max: 80, count: 3}, 80);
    }
    return ProductRegistry.BadgePool._colorGenerator.colorForID(entryName);
  }

從Common.Color.Generator中：

  /**
   * @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})`;
  }