chrome-devtools-frontend 1.0.978673 → 1.0.980166

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.978673"
+  "version": "1.0.980166"
 }

package/scripts/eslint_rules/lib/no_importing_images_from_src.js

@@ -0,0 +1,61 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+/**
+ * @fileoverview Prevent importing SVG urls from the `src` directory, and
+ * ensure they are read from `Images/foo.svg`.
+ * Images in the `src/` directory are minified and put into `Images/` as part
+ * of the build process, so we should never import from 'src'.
+ */
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SRC_DIRECTORY_PATH_TO_MATCH = 'Images/src/';
+
+module.exports = {
+  meta: {
+    type: 'problem',
+
+    docs: {
+      description: 'ensure image imports do not include the src/ directory',
+      category: 'Possible Errors',
+    },
+    fixable: 'code',
+    schema: [],
+    messages: {
+      imageImportUsingSrc:
+          'Found an image import containing the `src/` directory. You should always import `Images/foo.svg`.',
+    },
+  },
+  create: function(context) {
+    return {
+      // Matches new URL(...)
+      'NewExpression[callee.name=\'URL\']'(node) {
+        if (!node.arguments || node.arguments.length < 1) {
+          // Invalid code: user is probably mid-way through typing! Just leave
+          // it; TypeScript will error if it ends up being invalid.
+          return;
+        }
+        /** @type {String} */
+        const filePath = node.arguments[0].value;
+        if (!filePath) {
+          return;
+        }
+        if (filePath.includes(SRC_DIRECTORY_PATH_TO_MATCH)) {
+          context.report({
+            node: node.arguments[0],
+            messageId: 'imageImportUsingSrc',
+            fix(fixer) {
+              return fixer.replaceText(
+                  node.arguments[0], `'${filePath.replace(SRC_DIRECTORY_PATH_TO_MATCH, 'Images/')}'`);
+            }
+          });
+        }
+      }
+    };
+  }
+};

package/scripts/eslint_rules/tests/no_importing_images_from_src_test.js

@@ -0,0 +1,40 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+'use strict';
+
+const rule = require('../lib/no_importing_images_from_src.js');
+const ruleTester = new (require('eslint').RuleTester)({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
+});
+
+ruleTester.run('no_importing_images_from_src', rule, {
+  valid: [
+    {
+      code: 'const someIcon = new URL(\'../../../Images/test_icon.svg\', import.meta.url).toString()',
+      filename: 'front_end/ui/components/component/file.ts',
+    },
+  ],
+
+  invalid: [
+    {
+      code: 'const someIcon = new URL(\'../../../Images/src/test_icon.svg\', import.meta.url).toString()',
+      filename: 'front_end/ui/components/component/file.ts',
+      output: 'const someIcon = new URL(\'../../../Images/test_icon.svg\', import.meta.url).toString()',
+      errors: [{
+        messageId: 'imageImportUsingSrc',
+      }],
+    },
+    {
+      code:
+          'const someIcon = new URL(\'../../../devtools-frontend/front_end/Images/src/test_icon.svg\', import.meta.url).toString()',
+      filename: 'front_end/ui/components/component/file.ts',
+      output:
+          'const someIcon = new URL(\'../../../devtools-frontend/front_end/Images/test_icon.svg\', import.meta.url).toString()',
+      errors: [{
+        messageId: 'imageImportUsingSrc',
+      }],
+    },
+  ],
+});