chrome-devtools-frontend 1.0.1034366 → 1.0.1034802

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -377,4 +377,5 @@ export enum EnumeratedHistogram {
   RecordingToggled = 'DevTools.RecordingToggled',
   StyleTextCopied = 'DevTools.StyleTextCopied',
   ManifestSectionSelected = 'DevTools.ManifestSectionSelected',
+  CSSHintShown = 'DevTools.CSSHintShown',
 }

package/front_end/core/host/UserMetrics.ts

@@ -277,6 +277,11 @@ export class UserMetrics {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.ManifestSectionSelected, code, ManifestSectionCodes.MaxValue);
   }
+
+  cssHintShown(type: CSSHintType): void {
+    InspectorFrontendHostInstance.recordEnumeratedHistogram(
+        EnumeratedHistogram.CSSHintShown, type, CSSHintType.MaxValue);
+  }
 }
 
 /**
@@ -993,4 +998,22 @@ export enum ManifestSectionCodes {
   MaxValue = 5,
 }
 
+// The names here match the CSSRuleValidator names in CSSRuleValidator.ts.
+// TODO(crbug.com/1167717): Make this a const enum again
+// eslint-disable-next-line rulesdir/const_enum
+export enum CSSHintType {
+  Other = 0,
+  AlignContent = 1,
+  FlexItem = 2,
+  FlexContainer = 3,
+  GridContainer = 4,
+  GridItem = 5,
+  FlexGrid = 6,
+  MulticolFlexGrid = 7,
+  Padding = 8,
+  Position = 9,
+  ZIndex = 10,
+  MaxValue = 11,
+}
+
 /* eslint-enable @typescript-eslint/naming-convention */

package/front_end/entrypoints/lighthouse_worker/LighthouseWorkerService.ts

@@ -222,25 +222,36 @@ async function fetchLocaleData(locales: string[]): Promise<string|void> {
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function notifyFrontendViaWorkerMessage(action: string, args: any): void {
-  self.postMessage(JSON.stringify({action, args}));
+  self.postMessage({action, args});
 }
 
 async function onFrontendMessage(event: MessageEvent): Promise<void> {
-  const messageFromFrontend = JSON.parse(event.data);
+  const messageFromFrontend = event.data;
   switch (messageFromFrontend.action) {
     case 'startTimespan':
     case 'endTimespan':
     case 'snapshot':
     case 'navigation': {
       const result = await invokeLH(messageFromFrontend.action, messageFromFrontend.args);
-      self.postMessage(JSON.stringify({id: messageFromFrontend.id, result}));
+      if (result && typeof result === 'object') {
+        // Report isn't used upstream.
+        if ('report' in result) {
+          // @ts-expect-error
+          delete result.report;
+        }
+
+        // Logger PerformanceTiming objects cannot be cloned by this worker's `postMessage` function.
+        if ('artifacts' in result) {
+          // @ts-expect-error
+          result.artifacts.Timing = JSON.parse(JSON.stringify(result.artifacts.Timing));
+        }
+      }
+      self.postMessage({id: messageFromFrontend.id, result});
       break;
     }
     case 'dispatchProtocolMessage': {
-      cdpConnection?.onMessage?.(
-          JSON.parse(messageFromFrontend.args.message),
-      );
-      legacyPort.onMessage?.(messageFromFrontend.args.message);
+      cdpConnection?.onMessage?.(messageFromFrontend.args.message);
+      legacyPort.onMessage?.(JSON.stringify(messageFromFrontend.args.message));
       break;
     }
     default: {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 
 import {
-  buildStyledPropertyText,
-  buildStyledRuleText,
+  buildPropertyDefinitionText,
+  buildPropertyText,
   isFlexContainer,
   isGridContainer,
   isMulticolContainer,
@@ -58,35 +59,34 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export const enum AuthoringHintType {
+export const enum HintType {
   INACTIVE_PROPERTY = 'ruleValidation',
   DEPRECATED_PROPERTY = 'deprecatedProperty',
 }
 
-export class AuthoringHint {
-  readonly #hintType: AuthoringHintType;
+export class Hint {
+  readonly #hintType: HintType;
   readonly #hintMessage: string;
   readonly #possibleFixMessage: string|null;
   readonly #learnMoreLink: string|undefined;
 
-  constructor(
-      hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
+  constructor(hintType: HintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
     this.#hintType = hintType;
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
     this.#learnMoreLink = learnMoreLink;
   }
 
-  getHintPrefix(): string {
+  getPrefix(): string {
     switch (this.#hintType) {
-      case AuthoringHintType.INACTIVE_PROPERTY:
+      case HintType.INACTIVE_PROPERTY:
         return i18nString(UIStrings.inactivePropertyHintPrefix);
-      case AuthoringHintType.DEPRECATED_PROPERTY:
+      case HintType.DEPRECATED_PROPERTY:
         return i18nString(UIStrings.deprecatedPropertyHintPrefix);
     }
   }
 
-  getHintMessage(): string {
+  getMessage(): string {
     return this.#hintMessage;
   }
 
@@ -100,25 +100,23 @@ export class AuthoringHint {
 }
 
 export abstract class CSSRuleValidator {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.Other;
+  }
+
   readonly #affectedProperties: string[];
 
   constructor(affectedProperties: string[]) {
     this.#affectedProperties = affectedProperties;
   }
 
-  /**
-   * If `isRuleValid` returns false, it means there is a hint to be shown. The hint is retrieved by invoking `getAuthoringHint`.
-   */
-  abstract isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles?: Map<String, String>|null):
-      boolean;
-
-  getAffectedProperties(): string[] {
+  getApplicableProperties(): string[] {
     return this.#affectedProperties;
   }
 
-  abstract getAuthoringHint(
-      propertyName: string, computedStyles: Map<String, String>|null,
-      parentComputedStyles: Map<String, String>|null): AuthoringHint;
+  abstract getHint(
+      propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
+      |undefined;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -126,7 +124,11 @@ export class AlignContentValidator extends CSSRuleValidator {
     super(['align-content']);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.AlignContent;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     if (computedStyles === null || computedStyles === undefined) {
       return true;
     }
@@ -136,12 +138,15 @@ export class AlignContentValidator extends CSSRuleValidator {
     return computedStyles.get('flex-wrap') !== 'nowrap';
   }
 
-  getAuthoringHint(): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledPropertyText('flex-wrap');
-    const affectedPropertyDeclarationCode = buildStyledPropertyText('align-content');
+  getHint(_propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyText('flex-wrap');
+    const affectedPropertyDeclarationCode = buildPropertyText('align-content');
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -158,22 +163,28 @@ export class FlexItemValidator extends CSSRuleValidator {
     super(['flex', 'flex-basis', 'flex-grow', 'flex-shrink']);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles: Map<String, String>|null): boolean {
-    if (parentsComputedStyles === null) {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.FlexItem;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
+    if (parentComputedStyles === null) {
       return true;
     }
-    return isFlexContainer(parentsComputedStyles);
+    return isFlexContainer(parentComputedStyles);
   }
 
-  getAuthoringHint(
-      property: string, computedStyles: Map<String, String>|null,
-      parentsComputedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', parentsComputedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
-    const targeParentPropertyDeclaration = buildStyledRuleText('display', 'flex');
+  getHint(propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
+      |undefined {
+    if (this.#isRuleValid(computedStyles, parentComputedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+    const targeParentPropertyDeclaration = buildPropertyDefinitionText('display', 'flex');
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -191,20 +202,27 @@ export class FlexContainerValidator extends CSSRuleValidator {
     super(['flex-direction', 'flex-flow', 'flex-wrap', 'justify-content']);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.FlexContainer;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     if (computedStyles === null) {
       return true;
     }
     return isFlexContainer(computedStyles);
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
-    const targetRuleCode = buildStyledRuleText('display', 'flex');
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const targetRuleCode = buildPropertyDefinitionText('display', 'flex');
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -231,20 +249,24 @@ export class GridContainerValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
-    if (computedStyles === null) {
-      return true;
-    }
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.GridContainer;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     return isGridContainer(computedStyles);
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
-    const targetRuleCode = buildStyledRuleText('display', 'grid');
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const targetRuleCode = buildPropertyDefinitionText('display', 'grid');
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -268,22 +290,28 @@ export class GridItemValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
-    if (parentComputedStyles === null) {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.GridItem;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
+    if (!parentComputedStyles) {
       return true;
     }
     return isGridContainer(parentComputedStyles);
   }
 
-  getAuthoringHint(
-      property: string, computedStyles: Map<String, String>|null,
-      parentComputedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', parentComputedStyles?.get('display'));
-    const targeParentPropertyDeclaration = buildStyledRuleText('display', 'grid');
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
+      |undefined {
+    if (this.#isRuleValid(computedStyles, parentComputedStyles)) {
+      return;
+    }
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
+    const targeParentPropertyDeclaration = buildPropertyDefinitionText('display', 'grid');
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -306,19 +334,27 @@ export class FlexGridValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.FlexGrid;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     if (computedStyles === null) {
       return true;
     }
     return isFlexContainer(computedStyles) || isGridContainer(computedStyles);
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
+
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -343,19 +379,27 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.MulticolFlexGrid;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     if (computedStyles === null) {
       return true;
     }
     return isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles);
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -378,7 +422,11 @@ export class PaddingValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.Padding;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     const display = computedStyles?.get('display');
     if (display === null || display === undefined) {
       return true;
@@ -388,12 +436,16 @@ export class PaddingValidator extends CSSRuleValidator {
                 .includes(display as string);
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
+
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -415,7 +467,11 @@ export class PositionValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.Position;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>): boolean {
     const position = computedStyles?.get('position');
     if (position === null || position === undefined) {
       return true;
@@ -423,12 +479,16 @@ export class PositionValidator extends CSSRuleValidator {
     return position !== 'static';
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    if (this.#isRuleValid(computedStyles)) {
+      return;
+    }
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
+
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -447,21 +507,29 @@ export class ZIndexValidator extends CSSRuleValidator {
     ]);
   }
 
-  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+  getMetricType(): Host.UserMetrics.CSSHintType {
+    return Host.UserMetrics.CSSHintType.ZIndex;
+  }
+
+  #isRuleValid(computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): boolean {
     const position = computedStyles?.get('position');
     if (position === null || position === undefined) {
       return true;
     }
-    return ['absolute', 'relative', 'fixed', 'sticky'].includes(position as string) ||
-        isFlexContainer(parentComputedStyles);
+    return ['absolute', 'relative', 'fixed', 'sticky'].includes(position) || isFlexContainer(parentComputedStyles);
   }
 
-  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
-    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+  getHint(propertyName: string, computedStyles?: Map<string, string>, parentComputedStyles?: Map<string, string>): Hint
+      |undefined {
+    if (this.#isRuleValid(computedStyles, parentComputedStyles)) {
+      return;
+    }
+
+    const reasonPropertyDeclaration = buildPropertyDefinitionText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildPropertyText(propertyName);
 
-    return new AuthoringHint(
-        AuthoringHintType.INACTIVE_PROPERTY,
+    return new Hint(
+        HintType.INACTIVE_PROPERTY,
         i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
           'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
           'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
@@ -486,11 +554,11 @@ const CSS_RULE_VALIDATORS = [
   ZIndexValidator,
 ];
 
-const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
-  const validatorsMap = new Map<String, CSSRuleValidator[]>();
+const setupCSSRulesValidators = (): Map<string, CSSRuleValidator[]> => {
+  const validatorsMap = new Map<string, CSSRuleValidator[]>();
   for (const validatorClass of CSS_RULE_VALIDATORS) {
     const validator = new validatorClass();
-    const affectedProperties = validator.getAffectedProperties();
+    const affectedProperties = validator.getApplicableProperties();
 
     for (const affectedProperty of affectedProperties) {
       let propertyValidators = validatorsMap.get(affectedProperty);
@@ -505,4 +573,4 @@ const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
   return validatorsMap;
 };
 
-export const cssRuleValidatorsMap: Map<String, CSSRuleValidator[]> = setupCSSRulesValidators();
+export const cssRuleValidatorsMap: Map<string, CSSRuleValidator[]> = setupCSSRulesValidators();

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -2,31 +2,37 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-export const buildStyledRuleText = (property: String, value: String|undefined): string => {
+export const buildPropertyDefinitionText = (property: string, value?: string): string => {
   if (value === undefined) {
-    return buildStyledPropertyText(property);
+    return buildPropertyText(property);
   }
   return '<code class="unbreakable-text"><span class="property">' + property + '</span>: ' + value + '</code>';
 };
 
-export const buildStyledPropertyText = (property: String): string => {
+export const buildPropertyText = (property: string): string => {
   return '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
 };
 
-export const isFlexContainer = (computedStyles: Map<String, String>|null): boolean => {
-  if (computedStyles === null) {
+export const isFlexContainer = (computedStyles?: Map<string, string>): boolean => {
+  if (!computedStyles) {
     return false;
   }
   const display = computedStyles.get('display');
   return display === 'flex' || display === 'inline-flex';
 };
 
-export const isGridContainer = (computedStyles: Map<String, String>): boolean => {
+export const isGridContainer = (computedStyles?: Map<string, string>): boolean => {
+  if (!computedStyles) {
+    return false;
+  }
   const display = computedStyles.get('display');
   return display === 'grid' || display === 'inline-grid';
 };
 
-export const isMulticolContainer = (computedStyles: Map<String, String>): boolean => {
+export const isMulticolContainer = (computedStyles?: Map<string, string>): boolean => {
+  if (!computedStyles) {
+    return false;
+  }
   const columnWidth = computedStyles.get('column-width');
   const columnCount = computedStyles.get('column-count');
 

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -290,6 +290,14 @@ export class StylePropertiesSection {
     this.onpopulate();
   }
 
+  setComputedStyles(computedStyles: Map<string, string>|null): void {
+    this.computedStyles = computedStyles;
+  }
+
+  setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
+    this.parentsComputedStyles = parentsComputedStyles;
+  }
+
   setSectionIdx(sectionIdx: number): void {
     this.sectionIdx = sectionIdx;
     this.onpopulate();

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -21,12 +21,12 @@ import {StyleEditorWidget} from './StyleEditorWidget.js';
 import {type StylePropertiesSection} from './StylePropertiesSection.js';
 import {CSSPropertyPrompt, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
-import {cssRuleValidatorsMap, type AuthoringHint} from './CSSRuleValidator.js';
+import {cssRuleValidatorsMap, type Hint} from './CSSRuleValidator.js';
 
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
 
-export const activeHints = new WeakMap<Element, AuthoringHint>();
+export const activeHints = new WeakMap<Element, Hint>();
 
 const UIStrings = {
   /**
@@ -717,23 +717,16 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    const authoringHint = this.getAuthoringHint(this.computedStyles, this.parentsComputedStyles);
-    const showAuthoringHint = authoringHint !== null && this.property.parsedOk;
-    if (showAuthoringHint) {
-      const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
-      activeHints.set(hintIcon, authoringHint);
-      this.listItemElement.append(hintIcon);
-    }
-
-    if (!this.property.parsedOk) {
+    if (this.property.parsedOk) {
+      void this.updateFontVariationSettingsWarning();
+      this.updateAuthoringHint();
+    } else {
       // Avoid having longhands under an invalid shorthand.
       this.listItemElement.classList.add('not-parsed-ok');
 
       // Add a separate exclamation mark IMG element with a tooltip.
       this.listItemElement.insertBefore(
           StylesSidebarPane.createExclamationMark(this.property, null), this.listItemElement.firstChild);
-    } else {
-      void this.updateFontVariationSettingsWarning();
     }
 
     if (!this.property.activeInStyle()) {
@@ -768,6 +761,35 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  private updateAuthoringHint(): void {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS)) {
+      return;
+    }
+
+    const existingElement = this.listItemElement.querySelector('.hint');
+    if (existingElement) {
+      activeHints.delete(existingElement);
+      existingElement.parentElement?.removeChild(existingElement);
+    }
+    const propertyName = this.property.name;
+
+    if (!cssRuleValidatorsMap.has(propertyName)) {
+      return;
+    }
+
+    for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
+      const hint =
+          validator.getHint(propertyName, this.computedStyles || undefined, this.parentsComputedStyles || undefined);
+      if (hint) {
+        Host.userMetrics.cssHintShown(validator.getMetricType());
+        const hintIcon = UI.Icon.Icon.create('mediumicon-info', 'hint');
+        activeHints.set(hintIcon, hint);
+        this.listItemElement.append(hintIcon);
+        break;
+      }
+    }
+  }
+
   private async updateFontVariationSettingsWarning(): Promise<void> {
     if (this.property.name !== 'font-variation-settings') {
       return;
@@ -816,24 +838,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
         StylesSidebarPane.createExclamationMark(this.property, warnings.join(' ')), this.listItemElement.firstChild);
   }
 
-  private getAuthoringHint(computedStyles: Map<string, string>|null, parentComputedStyles: Map<string, string>|null):
-      AuthoringHint|null {
-    const propertyName = this.property.name;
-
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS) ||
-        !cssRuleValidatorsMap.has(propertyName)) {
-      return null;
-    }
-
-    for (const validator of cssRuleValidatorsMap.get(propertyName) || []) {
-      if (!validator.isRuleValid(computedStyles, parentComputedStyles)) {
-        return validator.getAuthoringHint(propertyName, this.computedStyles, this.parentsComputedStyles);
-      }
-    }
-
-    return null;
-  }
-
   private mouseUp(event: MouseEvent): void {
     const activeTreeElement = parentMap.get(this.parentPaneInternal);
     parentMap.delete(this.parentPaneInternal);

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -218,6 +218,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #urlToChangeTracker: Map<Platform.DevToolsPath.UrlString, ChangeTracker> = new Map();
   #copyChangesButton?: UI.Toolbar.ToolbarButton;
   #updateAbortController?: AbortController;
+  #updateComputedStylesAbortController?: AbortController;
 
   static instance(): StylesSidebarPane {
     if (!stylesSidebarPaneInstance) {
@@ -753,10 +754,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       for (const section of this.allSections()) {
         section.styleSheetEdited(edit);
       }
+      void this.refreshComputedStyles();
       return;
     }
 
     if (this.userOperation || this.isEditingStyle) {
+      void this.refreshComputedStyles();
       return;
     }
 
@@ -764,6 +767,27 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.update();
   }
 
+  async refreshComputedStyles(): Promise<void> {
+    this.#updateComputedStylesAbortController?.abort();
+    this.#updateAbortController = new AbortController();
+    const signal = this.#updateAbortController.signal;
+    const matchedStyles = await this.fetchMatchedCascade();
+    const nodeId = this.node()?.id;
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [computedStyles, parentsComputedStyles] =
+        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
+
+    if (signal.aborted) {
+      return;
+    }
+
+    for (const section of this.allSections()) {
+      section.setComputedStyles(computedStyles);
+      section.setParentsComputedStyles(parentsComputedStyles);
+    }
+  }
+
   focusedSectionIndex(): number {
     let index = 0;
     for (const block of this.sectionBlocks) {

package/front_end/panels/elements/components/CSSHintDetailsView.ts

@@ -20,10 +20,10 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html, Directives} = LitHtml;
 
 interface Hint {
-    getHintPrefix(): string;
-    getHintMessage(): string;
-    getPossibleFixMessage(): string|null;
-    getLearnMoreLink(): string|undefined;
+  getPrefix(): string;
+  getMessage(): string;
+  getPossibleFixMessage(): string|null;
+  getLearnMoreLink(): string|undefined;
 }
 
 export class CSSHintDetailsView extends HTMLElement {
@@ -44,7 +44,7 @@ export class CSSHintDetailsView extends HTMLElement {
       render(html`
         <div class="hint-popup-wrapper">
           <div class="hint-popup-reason">
-              <strong>${this.#authoringHint.getHintPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getHintMessage())}
+              <strong>${this.#authoringHint.getPrefix()}:</strong> ${Directives.unsafeHTML(this.#authoringHint.getMessage())}
           </div>
           ${this.#authoringHint.getPossibleFixMessage() ? html`
               <div class="hint-popup-possible-fix">

package/front_end/panels/elements/components/LayoutPane.ts

@@ -267,7 +267,7 @@ export class LayoutPane extends HTMLElement {
           } as NodeText.NodeText.NodeTextData}></${NodeText.NodeText.NodeText.litTagName}>
         </span>
       </label>
-      <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">
+      <label @keyup=${onColorLabelKeyUp} @keydown=${onColorLabelKeyDown} tabindex="0" title=${i18nString(UIStrings.chooseElementOverlayColor)} aria-label=${i18nString(UIStrings.chooseElementOverlayColor)} class="color-picker-label" style="background: ${element.color};">
         <input @change=${onColorChange} @input=${onColorChange} tabindex="-1" class="color-picker" type="color" value=${element.color} />
       </label>
       <button tabindex="0" @click=${onElementClick} title=${i18nString(UIStrings.showElementInTheElementsPanel)} class="show-element"></button>

package/front_end/panels/lighthouse/LighthouseProtocolService.ts

@@ -181,7 +181,7 @@ export class ProtocolService {
       method?: string,
     };
     if (protocolMessage.sessionId || (protocolMessage.method && protocolMessage.method.startsWith('Target'))) {
-      void this.send('dispatchProtocolMessage', {message: JSON.stringify(message)});
+      void this.send('dispatchProtocolMessage', {message});
     }
   }
 
@@ -218,7 +218,7 @@ export class ProtocolService {
   }
 
   private onWorkerMessage(event: MessageEvent): void {
-    const lighthouseMessage = JSON.parse(event.data);
+    const lighthouseMessage = event.data;
 
     if (lighthouseMessage.action === 'statusUpdate') {
       if (this.lighthouseMessageUpdateCallback && lighthouseMessage.args && 'message' in lighthouseMessage.args) {
@@ -240,7 +240,7 @@ export class ProtocolService {
   private async send(action: string, args: {[x: string]: string|string[]|Object} = {}): Promise<void> {
     const worker = await this.ensureWorkerExists();
     const messageId = lastId++;
-    worker.postMessage(JSON.stringify({id: messageId, action, args: {...args, id: messageId}}));
+    worker.postMessage({id: messageId, action, args: {...args, id: messageId}});
   }
 
   /** sendWithResponse currently only handles the original startLighthouse request and LHR-filled response. */
@@ -250,7 +250,7 @@ export class ProtocolService {
     const messageId = lastId++;
     const messageResult = new Promise<ReportRenderer.RunnerResult>(resolve => {
       const workerListener = (event: MessageEvent): void => {
-        const lighthouseMessage = JSON.parse(event.data);
+        const lighthouseMessage = event.data;
 
         if (lighthouseMessage.id === messageId) {
           worker.removeEventListener('message', workerListener);
@@ -259,7 +259,7 @@ export class ProtocolService {
       };
       worker.addEventListener('message', workerListener);
     });
-    worker.postMessage(JSON.stringify({id: messageId, action, args: {...args, id: messageId}}));
+    worker.postMessage({id: messageId, action, args: {...args, id: messageId}});
 
     return messageResult;
   }

package/package.json

@@ -56,5 +56,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1034366"
+  "version": "1.0.1034802"
 }