chrome-devtools-frontend 1.0.979699 → 1.0.980166

package/front_end/core/common/Color.ts

@@ -33,10 +33,11 @@
 
 import * as Platform from '../platform/platform.js';
 
-import {blendColors, contrastRatioAPCA, desiredLuminanceAPCA, luminance, luminanceAPCA, rgbaToHsla} from './ColorUtils.js';
+import {blendColors, contrastRatioAPCA, desiredLuminanceAPCA, luminance, luminanceAPCA, rgbaToHsla, rgbaToHwba} from './ColorUtils.js';
 
 export class Color {
   #hslaInternal: number[]|undefined;
+  #hwbaInternal: number[]|undefined;
   #rgbaInternal: number[];
   #originalText: string|null;
   readonly #originalTextIsValid: boolean;
@@ -44,6 +45,7 @@ export class Color {
 
   constructor(rgba: number[], format: Format, originalText?: string) {
     this.#hslaInternal = undefined;
+    this.#hwbaInternal = undefined;
     this.#rgbaInternal = rgba;
     this.#originalText = originalText || null;
     this.#originalTextIsValid = Boolean(this.#originalText);
@@ -110,29 +112,12 @@ export class Color {
       return null;
     }
 
-    // rgb/rgba(), hsl/hsla()
-    match = text.toLowerCase().match(/^\s*(?:(rgba?)|(hsla?))\((.*)\)\s*$/);
-
+    // rgb/rgba(), hsl/hsla(), hwb/hwba()
+    match = text.toLowerCase().match(/^\s*(?:(rgba?)|(hsla?)|(hwba?))\((.*)\)\s*$/);
     if (match) {
-      const components = match[3].trim();
-      let values = components.split(/\s*,\s*/);
-      if (values.length === 1) {
-        values = components.split(/\s+/);
-        if (values[3] === '/') {
-          values.splice(3, 1);
-          if (values.length !== 4) {
-            return null;
-          }
-        } else if (
-            (values.length > 2 && values[2].indexOf('/') !== -1) ||
-            (values.length > 3 && values[3].indexOf('/') !== -1)) {
-          const alpha = values.slice(2, 4).join('');
-          values = values.slice(0, 2).concat(alpha.split(/\//)).concat(values.slice(4));
-        } else if (values.length >= 4) {
-          return null;
-        }
-      }
-      if (values.length !== 3 && values.length !== 4 || values.indexOf('') > -1) {
+      // hwb(a) must have white space delimiters between its parameters.
+      const values = this.splitColorFunctionParameters(match[4], !match[3]);
+      if (!values) {
         return null;
       }
       const hasAlpha = (values[3] !== undefined);
@@ -150,19 +135,23 @@ export class Color {
         return new Color((rgba as number[]), hasAlpha ? Format.RGBA : Format.RGB, text);
       }
 
-      if (match[2]) {  // hsl/hsla
-        const hsla = [
+      if (match[2] || match[3]) {  // hsl/hsla or hwb/hwba
+        const parameters = [
           Color.parseHueNumeric(values[0]),
           Color.parseSatLightNumeric(values[1]),
           Color.parseSatLightNumeric(values[2]),
           hasAlpha ? Color.parseAlphaNumeric(values[3]) : 1,
         ];
-        if (hsla.indexOf(null) > -1) {
+        if (parameters.indexOf(null) > -1) {
           return null;
         }
         const rgba: number[] = [];
-        Color.hsl2rgb((hsla as number[]), rgba);
-        return new Color(rgba, hasAlpha ? Format.HSLA : Format.HSL, text);
+        if (match[2]) {
+          Color.hsl2rgb((parameters as number[]), rgba);
+          return new Color(rgba, hasAlpha ? Format.HSLA : Format.HSL, text);
+        }
+        Color.hwb2rgb((parameters as number[]), rgba);
+        return new Color(rgba, hasAlpha ? Format.HWBA : Format.HWB, text);
       }
     }
 
@@ -179,6 +168,38 @@ export class Color {
     return new Color(rgba, Format.HSLA);
   }
 
+  /**
+   * Split the color parameters of (e.g.) rgb(a), hsl(a), hwb(a) functions.
+   */
+  static splitColorFunctionParameters(content: string, allowCommas: boolean): string[]|null {
+    const components = content.trim();
+    let values: string[] = [];
+
+    if (allowCommas) {
+      values = components.split(/\s*,\s*/);
+    }
+    if (!allowCommas || values.length === 1) {
+      values = components.split(/\s+/);
+      if (values[3] === '/') {
+        values.splice(3, 1);
+        if (values.length !== 4) {
+          return null;
+        }
+      } else if (
+          (values.length > 2 && values[2].indexOf('/') !== -1) ||
+          (values.length > 3 && values[3].indexOf('/') !== -1)) {
+        const alpha = values.slice(2, 4).join('');
+        values = values.slice(0, 2).concat(alpha.split(/\//)).concat(values.slice(4));
+      } else if (values.length >= 4) {
+        return null;
+      }
+    }
+    if (values.length !== 3 && values.length !== 4 || values.indexOf('') > -1) {
+      return null;
+    }
+    return values;
+  }
+
   static parsePercentOrNumber(value: string): number|null {
     // @ts-ignore: isNaN can accept strings
     if (isNaN(value.replace('%', ''))) {
@@ -309,6 +330,24 @@ export class Color {
     out_rgb[3] = hsl[3];
   }
 
+  // See https://drafts.csswg.org/css-color-4/#hwb-to-rgb for formula reference.
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  static hwb2rgb(hwb: number[], out_rgb: number[]): void {
+    const h = hwb[0];
+    const w = hwb[1];
+    const b = hwb[2];
+
+    if (w + b >= 1) {
+      out_rgb[0] = out_rgb[1] = out_rgb[2] = w / (w + b);
+      out_rgb[3] = hwb[3];
+    } else {
+      Color.hsl2rgb([h, 1, 0.5, hwb[3]], out_rgb);
+      for (let i = 0; i < 3; ++i) {
+        out_rgb[i] += w - (w + b) * out_rgb[i];
+      }
+    }
+  }
+
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
   // eslint-disable-next-line @typescript-eslint/naming-convention
   static hsva2rgba(hsva: number[], out_rgba: number[]): void {
@@ -478,6 +517,21 @@ export class Color {
     return [h, s !== 0 ? 2 * s / (l + s) : 0, (l + s), hsla[3]];
   }
 
+  /** HWBA with components within [0..1]
+     */
+  hwba(): number[] {
+    if (this.#hwbaInternal) {
+      return this.#hwbaInternal;
+    }
+    this.#hwbaInternal = rgbaToHwba(this.#rgbaInternal);
+    return this.#hwbaInternal;
+  }
+
+  canonicalHWBA(): number[] {
+    const hwba = this.hwba();
+    return [Math.round(hwba[0] * 360), Math.round(hwba[1] * 100), Math.round(hwba[2] * 100), hwba[3]];
+  }
+
   hasAlpha(): boolean {
     return this.#rgbaInternal[3] !== 1;
   }
@@ -546,6 +600,16 @@ export class Color {
         }
         return start + ')';
       }
+      case Format.HWB:
+      case Format.HWBA: {
+        const hwba = this.hwba();
+        const start = Platform.StringUtilities.sprintf(
+            'hwb(%ddeg %d% %d%', Math.round(hwba[0] * 360), Math.round(hwba[1] * 100), Math.round(hwba[2] * 100));
+        if (this.hasAlpha()) {
+          return start + Platform.StringUtilities.sprintf(' / %d%)', Math.round(hwba[3] * 100));
+        }
+        return start + ')';
+      }
       case Format.HEXA: {
         return Platform.StringUtilities
             .sprintf(
@@ -670,7 +734,7 @@ export class Color {
 }
 
 export const Regex: RegExp =
-    /((?:rgb|hsl)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
+    /((?:rgb|hsl|hwb)a?\([^)]+\)|#[0-9a-fA-F]{8}|#[0-9a-fA-F]{6}|#[0-9a-fA-F]{3,4}|\b[a-zA-Z]+\b(?!-))/g;
 
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
@@ -685,6 +749,8 @@ export enum Format {
   RGBA = 'rgba',
   HSL = 'hsl',
   HSLA = 'hsla',
+  HWB = 'hwb',
+  HWBA = 'hwba',
 }
 
 const COLOR_TO_RGBA_ENTRIES: Array<readonly[string, number[]]> = [

package/front_end/core/common/ColorUtils.ts

@@ -15,11 +15,10 @@ export function blendColors(fgRGBA: number[], bgRGBA: number[]): number[] {
   ];
 }
 
-export function rgbaToHsla([r, g, b, a]: number[]): number[] {
+function rgbToHue([r, g, b]: number[]): number {
   const max = Math.max(r, g, b);
   const min = Math.min(r, g, b);
   const diff = max - min;
-  const sum = max + min;
 
   let h;
   if (min === max) {
@@ -31,7 +30,16 @@ export function rgbaToHsla([r, g, b, a]: number[]): number[] {
   } else {
     h = (1 / 6 * (r - g) / diff) + 2 / 3;
   }
+  return h;
+}
+
+export function rgbaToHsla([r, g, b, a]: number[]): number[] {
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const diff = max - min;
+  const sum = max + min;
 
+  const h = rgbToHue([r, g, b]);
   const l = 0.5 * sum;
 
   let s;
@@ -48,6 +56,14 @@ export function rgbaToHsla([r, g, b, a]: number[]): number[] {
   return [h, s, l, a];
 }
 
+export function rgbaToHwba([r, g, b, a]: number[]): number[] {
+  const h = rgbToHue([r, g, b]);
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+
+  return [h, min, 1 - max, a];
+}
+
 /**
 * Calculate the luminance of this color using the WCAG algorithm.
 * See http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef

package/front_end/core/common/Settings.ts

@@ -1113,6 +1113,8 @@ export function detectColorFormat(color: Color): Format {
     format = cf.RGB;
   } else if (formatSetting === cf.HSL) {
     format = cf.HSL;
+  } else if (formatSetting === cf.HWB) {
+    format = cf.HWB;
   } else if (formatSetting === cf.HEX) {
     format = color.detectHEXFormat();
   } else {

package/front_end/models/persistence/PersistenceUtils.ts

@@ -53,9 +53,8 @@ export class PersistenceUtils {
       }
       const icon = UI.Icon.Icon.create('mediumicon-file-sync');
       UI.Tooltip.Tooltip.install(icon, PersistenceUtils.tooltipForUISourceCode(binding.network));
-      // TODO(allada) This will not work properly with dark theme.
       if (NetworkPersistenceManager.instance().project() === binding.fileSystem.project()) {
-        icon.style.filter = 'hue-rotate(160deg)';
+        icon.classList.add('purple-dot');
       }
       return icon;
     }

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -224,7 +224,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     this.alphaElementBackground = this.alphaElement.createChild('div', 'spectrum-alpha-background');
     this.alphaSlider = this.alphaElement.createChild('div', 'spectrum-slider');
 
-    // RGBA/HSLA display.
+    // RGBA/HSLA/HWBA display.
     this.displayContainer = toolsContainer.createChild('div', 'spectrum-text source-code');
     UI.ARIAUtils.markAsPoliteLiveRegion(this.displayContainer, true);
     this.textValues = [];
@@ -937,6 +937,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
         colorFormat = cf.RGB;
       } else if (colorFormat === cf.HSLA) {
         colorFormat = cf.HSL;
+      } else if (colorFormat === cf.HWBA) {
+        colorFormat = cf.HWB;
       } else if (colorFormat === cf.HEXA) {
         colorFormat = cf.HEX;
       } else if (colorFormat === cf.ShortHEXA) {
@@ -988,6 +990,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
       colorString = color.asString(cf.HEXA);
     } else if (this.colorFormat === cf.HSL) {
       colorString = color.asString(cf.HSLA);
+    } else if (this.colorFormat === cf.HWB) {
+      colorString = color.asString(cf.HWBA);
     } else {
       colorString = color.asString(cf.RGBA);
     }
@@ -1033,12 +1037,21 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
         this.hexValue.value = String(this.color().asString(this.color().hasAlpha() ? cf.HEXA : cf.HEX));
       }
     } else {
-      // RGBA, HSLA display.
+      // RGBA, HSLA, HWBA display.
       this.hexContainer.hidden = true;
       this.displayContainer.hidden = false;
-      const isRgb = this.colorFormat === cf.RGB;
-      this.textLabels.textContent = isRgb ? 'RGBA' : 'HSLA';
-      const colorValues = isRgb ? this.color().canonicalRGBA() : this.color().canonicalHSLA();
+      let colorValues;
+      if (this.colorFormat === cf.RGB) {
+        this.textLabels.textContent = 'RGBA';
+        colorValues = this.color().canonicalRGBA();
+      } else if (this.colorFormat === cf.HSL) {
+        this.textLabels.textContent = 'HSLA';
+        colorValues = this.color().canonicalHSLA();
+      } else {
+        this.textLabels.textContent = 'HWBA';
+        colorValues = this.color().canonicalHWBA();
+      }
+
       for (let i = 0; i < 3; ++i) {
         UI.ARIAUtils.setAccessibleName(
             this.textValues[i],
@@ -1047,7 +1060,7 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
               PH2: this.textLabels.textContent,
             }));
         this.textValues[i].value = String(colorValues[i]);
-        if (!isRgb && (i === 1 || i === 2)) {
+        if (this.colorFormat !== cf.RGB && (i === 1 || i === 2)) {
           this.textValues[i].value += '%';
         }
       }
@@ -1081,6 +1094,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     if (this.colorFormat === cf.RGB) {
       format = cf.HSL;
     } else if (this.colorFormat === cf.HSL) {
+      format = cf.HWB;
+    } else if (this.colorFormat === cf.HWB) {
       format = (this.originalFormat === cf.ShortHEX || this.originalFormat === cf.ShortHEXA) ? cf.ShortHEX : cf.HEX;
     }
     this.innerSetColor(undefined, '', undefined /* colorName */, format, ChangeSource.Other);
@@ -1121,10 +1136,9 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     if (this.colorFormat === cf.Nickname || this.colorFormat === cf.HEX || this.colorFormat === cf.ShortHEX) {
       colorString = this.hexValue.value;
     } else {
-      const format = this.colorFormat === cf.RGB ? 'rgb' : 'hsl';
       const values = this.textValues.slice(0, -1).map(elementValue).join(' ');
       const alpha = this.textValues.slice(-1).map(elementValue).join(' ');
-      colorString = Platform.StringUtilities.sprintf('%s(%s)', format, [values, alpha].join(' / '));
+      colorString = Platform.StringUtilities.sprintf('%s(%s)', this.colorFormat, [values, alpha].join(' / '));
     }
 
     const color = Common.Color.Color.parse(colorString);
@@ -1291,7 +1305,7 @@ export class PaletteGenerator {
   private async processStylesheet(stylesheet: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader): Promise<void> {
     let text: string = (await stylesheet.requestContent()).content || '';
     text = text.toLowerCase();
-    const regexResult = text.match(/((?:rgb|hsl)a?\([^)]+\)|#[0-9a-f]{6}|#[0-9a-f]{3})/g) || [];
+    const regexResult = text.match(/((?:rgb|hsl|hwb)a?\([^)]+\)|#[0-9a-f]{6}|#[0-9a-f]{3})/g) || [];
     for (const c of regexResult) {
       let frequency = this.frequencyMap.get(c) || 0;
       this.frequencyMap.set(c, ++frequency);

package/front_end/ui/legacy/components/inline_editor/ColorSwatch.ts

@@ -180,6 +180,7 @@ function nextColorFormat(color: Common.Color.Color, curFormat: string): string {
   // * original
   // * rgb(a)
   // * hsl(a)
+  // * hwb(a)
   // * nickname (if the color has a nickname)
   // * shorthex (if has short hex)
   // * hex
@@ -195,6 +196,10 @@ function nextColorFormat(color: Common.Color.Color, curFormat: string): string {
 
     case cf.HSL:
     case cf.HSLA:
+      return !color.hasAlpha() ? cf.HWB : cf.HWBA;
+
+    case cf.HWB:
+    case cf.HWBA:
       if (color.nickname()) {
         return cf.Nickname;
       }

package/front_end/ui/legacy/inspectorCommon.css

@@ -550,6 +550,15 @@ span[is="dt-icon-label"] {
   background: var(--override-force-white-icons-background) !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.mediumicon-file-sync.purple-dot {
+  filter: hue-rotate(160deg);
+}
+
+.-theme-with-dark-background [is="ui-icon"].icon-invert.mediumicon-file-sync.purple-dot,
+:host-context(.-theme-with-dark-background) [is="ui-icon"].icon-invert.mediumicon-file-sync.purple-dot {
+  filter: invert(80%) hue-rotate(350deg);
+}
+
 .expandable-inline-button {
   background-color: var(--color-background-elevation-2);
   color: var(--color-text-primary);

package/inspector_overlay/highlight_common.ts

@@ -28,7 +28,7 @@
 //  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
 //  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
-import {rgbaToHsla} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es_modules_import
+import {rgbaToHsla, rgbaToHwba} from '../front_end/core/common/ColorUtils.js';  // eslint-disable-line rulesdir/es_modules_import
 
 import type {Bounds, PathCommands, Quad} from './common.js';
 
@@ -258,7 +258,7 @@ export function parseHexa(hexa: string): Array<number> {
   return (hexa.match(/#(\w\w)(\w\w)(\w\w)(\w\w)/) || []).slice(1).map(c => parseInt(c, 16) / 255);
 }
 
-export function formatRgba(rgba: number[], colorFormat: 'rgb'|'hsl'): string {
+export function formatRgba(rgba: number[], colorFormat: 'rgb'|'hsl'|'hwb'): string {
   if (colorFormat === 'rgb') {
     const [r, g, b, a] = rgba;
     // rgb(r g b [ / a])
@@ -273,11 +273,18 @@ export function formatRgba(rgba: number[], colorFormat: 'rgb'|'hsl'): string {
         a === 1 ? '' : ' / ' + Math.round(a * 100) / 100})`;
   }
 
+  if (colorFormat === 'hwb') {
+    const [h, w, b, a] = rgbaToHwba(rgba);
+    // hwb(hdeg w b [ / a])
+    return `hwb(${Math.round(h * 360)}deg ${Math.round(w * 100)} ${Math.round(b * 100)}${
+        a === 1 ? '' : ' / ' + Math.round(a * 100) / 100})`;
+  }
+
   throw new Error('NOT_REACHED');
 }
 
 export function formatColor(hexa: string, colorFormat: string): string {
-  if (colorFormat === 'rgb' || colorFormat === 'hsl') {
+  if (colorFormat === 'rgb' || colorFormat === 'hsl' || colorFormat === 'hwb') {
     return formatRgba(parseHexa(hexa), colorFormat);
   }
 

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.979699"
+  "version": "1.0.980166"
 }