chrome-devtools-frontend 1.0.1033423 → 1.0.1034802

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);