chrome-devtools-frontend 1.0.1030070 → 1.0.1031400

package/front_end/models/persistence/PersistenceActions.ts

@@ -54,12 +54,13 @@ export class ContextMenuProvider implements UI.ContextMenu.Provider {
       if (contentProvider instanceof Workspace.UISourceCode.UISourceCode) {
         (contentProvider as Workspace.UISourceCode.UISourceCode).commitWorkingCopy();
       }
-      let content: string = (await contentProvider.requestContent()).content || '';
-      if (await contentProvider.contentEncoded()) {
-        content = window.atob(content);
+      const content = await contentProvider.requestContent();
+      let decodedContent = content.content || '';
+      if (content.isEncoded) {
+        decodedContent = window.atob(decodedContent);
       }
       const url = contentProvider.contentURL();
-      void Workspace.FileManager.FileManager.instance().save(url, content as string, true);
+      void Workspace.FileManager.FileManager.instance().save(url, decodedContent, true);
       Workspace.FileManager.FileManager.instance().close(url);
     }
 

package/front_end/models/text_utils/CodeMirrorUtils.ts

@@ -37,12 +37,25 @@ export function createCssTokenizer(): Tokenizer {
     const stream = new CodeMirror.StringStream();
     stream.string = line;
 
-    const startState = streamParser.startState();
+    const state = streamParser.startState();
     let lastPos = stream.pos;
     while (!stream.eol()) {
-      const token = streamParser.token(stream, startState);
-      const segment = stream.current().substring(lastPos, stream.pos);
-      callback(segment, token);
+      stream.start = lastPos;
+      let tokenType = streamParser.token(stream, state);
+      /**
+       * We expect unknown properties (like `unknownProp: unknownPropVal`) to still be
+       * formatted correctly. However, `tokenType` for such properties are marked
+       * as `error` from CodeMirror side and the internal state of the parser becomes `maybeprop`.
+       *
+       * So, we handle that specific keyword to be marked as `property` even though it is
+       * not a known property. We do this because for our formatting purposes it doesn't matter
+       * whether a property is a known CSS property or not.
+       */
+      if (tokenType === 'error' && state.state === 'maybeprop') {
+        tokenType = 'property';
+      }
+      const segment = stream.current();
+      callback(segment, tokenType);
       lastPos = stream.pos;
     }
   }

package/front_end/models/text_utils/ContentProvider.ts

@@ -34,7 +34,6 @@ import type * as Platform from '../../core/platform/platform.js';
 export abstract class ContentProvider {
   abstract contentURL(): Platform.DevToolsPath.UrlString;
   abstract contentType(): Common.ResourceType.ResourceType;
-  abstract contentEncoded(): Promise<boolean>;
   abstract requestContent(): Promise<DeferredContent>;
   abstract searchInContent(query: string, caseSensitive: boolean, isRegex: boolean): Promise<SearchMatch[]>;
 }

package/front_end/models/text_utils/StaticContentProvider.ts

@@ -39,10 +39,6 @@ export class StaticContentProvider implements ContentProvider {
     return this.contentTypeInternal;
   }
 
-  contentEncoded(): Promise<boolean> {
-    return Promise.resolve(false);
-  }
-
   requestContent(): Promise<DeferredContent> {
     return this.lazyContent();
   }

package/front_end/models/workspace/UISourceCode.ts

@@ -71,6 +71,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
   private workingCopyGetter: (() => string)|null;
   private disableEditInternal: boolean;
   private contentEncodedInternal?: boolean;
+  private isKnownThirdPartyInternal: boolean;
 
   constructor(project: Project, url: Platform.DevToolsPath.UrlString, contentType: Common.ResourceType.ResourceType) {
     super();
@@ -108,6 +109,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     this.workingCopyInternal = null;
     this.workingCopyGetter = null;
     this.disableEditInternal = false;
+    this.isKnownThirdPartyInternal = false;
   }
 
   requestMetadata(): Promise<UISourceCodeMetadata|null> {
@@ -207,11 +209,6 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.contentTypeInternal;
   }
 
-  async contentEncoded(): Promise<boolean> {
-    await this.requestContent();
-    return this.contentEncodedInternal || false;
-  }
-
   project(): Project {
     return this.projectInternal;
   }
@@ -401,6 +398,14 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return this.workingCopyInternal !== null || this.workingCopyGetter !== null;
   }
 
+  isKnownThirdParty(): boolean {
+    return this.isKnownThirdPartyInternal;
+  }
+
+  markKnownThirdParty(): void {
+    this.isKnownThirdPartyInternal = true;
+  }
+
   extension(): string {
     return Common.ParsedURL.ParsedURL.extractExtension(this.nameInternal);
   }

package/front_end/panels/application/components/StackTrace.ts

@@ -155,7 +155,7 @@ export class StackTrace extends HTMLElement {
     const expandableRows = [];
     let hiddenCallFramesCount = 0;
     for (const item of this.#stackTraceRows) {
-      if (this.#showHidden || (!item.ignoreListHide && !item.rowCountHide)) {
+      if (this.#showHidden || !item.ignoreListHide) {
         if ('functionName' in item) {
           expandableRows.push(LitHtml.html`
           <${StackTraceRow.litTagName} data-stack-trace-row .data=${{
@@ -168,7 +168,7 @@ export class StackTrace extends HTMLElement {
           `);
         }
       }
-      if (!this.#showHidden && 'functionName' in item && (item.ignoreListHide || item.rowCountHide)) {
+      if (!this.#showHidden && 'functionName' in item && item.ignoreListHide) {
         hiddenCallFramesCount++;
       }
     }

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -4,44 +4,63 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 
+import {
+  buildStyledPropertyText,
+  buildStyledRuleText,
+  isFlexContainer,
+  isGridContainer,
+  isMulticolContainer,
+} from './CSSRuleValidatorHelper.js';
+
 const UIStrings = {
   /**
-    *@description Hint prefix for deprecated properties.
+    *@description The type of the CSS rule validation message that is shown in the Style panel. "Deprecated property" means that the property in the declaration is deprecated and should not be used.
+    */
+  deprecatedPropertyHintPrefix: 'Deprecated property',
+  /**
+    *@description The type of the CSS rule validation message that is shown in the Style panel. "Inactive property" means that a property declaration was valid syntactially but didn't have expected effect.
     */
-  deprecatedPropertyHintPrefix: 'Deprecated Property',
+  inactivePropertyHintPrefix: 'Inactive property',
   /**
-    *@description Hint prefix for rule validation.
+    *@description The message that is shown in the Style panel when the user hovers over a property that has not effect due to some other property.
+    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
+    *@example {align-content} AFFECTED_PROPERTY_DECLARATION_CODE
     */
-  ruleValidationHintPrefix: 'Inactive rule',
+  ruleViolatedBySameElementRuleReason:
+      'This element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
-    *@description Hint for rules that was violated because of same elements rule.
-    *@example {flex-wrap: nowrap} REASON_RULE_CODE
-    *@example {align-content} AFFECTED_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to some other property.
+    *@example {flex-wrap: nowrap} REASON_PROPERTY_DECLARATION_CODE
     */
-  ruleViolatedBySameElementRuleReason: 'This element has {REASON_RULE_CODE} rule, therefore {AFFECTED_RULE_CODE} has no effect.',
+  ruleViolatedBySameElementRuleFix:
+      'For this property to work, please remove or change the value of {REASON_PROPERTY_DECLARATION_CODE}.',
   /**
-    *@description Possible fix for rules that was violated because of same elements rule.
-    *@example {flex-wrap: nowrap} REASON_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the current property value.
+    *@example {display: block} EXISTING_PROPERTY_DECLARATION
+    *@example {display: flex} TARGET_PROPERTY_DECLARATION
     */
-  ruleViolatedBySameElementRuleFix: 'For this property to work, please remove or change the value of {REASON_RULE_CODE}',
+  ruleViolatedBySameElementRuleChangeSuggestion:
+      'For this property to work, please change the {EXISTING_PROPERTY_DECLARATION} rule to {TARGET_PROPERTY_DECLARATION}.',
   /**
-    *@description Hint for rules that was violated because of parent element rule.
-    *@example {display: block} REASON_RULE_CODE
-    *@example {flex} AFFECTED_RULE_CODE
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to properties of the parent element.
+    *@example {display: block} REASON_PROPERTY_DECLARATION_CODE
+    *@example {flex} AFFECTED_PROPERTY_DECLARATION_CODE
     */
-  ruleViolatedByParentElementRuleReason: 'Parent element has {REASON_RULE_CODE} rule, therefore this elements {AFFECTED_RULE_CODE} has no effect',
+  ruleViolatedByParentElementRuleReason:
+      'The parent element has the {REASON_PROPERTY_DECLARATION_CODE} property and therefore, this element\'s property {AFFECTED_PROPERTY_DECLARATION_CODE} has no effect.',
   /**
-    *@description Posible fix for rules that was violated because of parent element rule.
+    *@description The message that is shown in the Style panel when the user hovers over a property declaration that has not effect due to the properties of the parent element.
     *@example {display: block} EXISTING_PARENT_ELEMENT_RULE
     *@example {display: flex} TARGET_PARENT_ELEMENT_RULE
     */
-  ruleViolatedByParentElementRuleFix: 'Please change parent elements {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
-  };
+  ruleViolatedByParentElementRuleFix:
+      'Please change the parent element\'s property declaration from {EXISTING_PARENT_ELEMENT_RULE} to {TARGET_PARENT_ELEMENT_RULE} to fix this issue.',
+};
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const enum AuthoringHintType {
-  RULE_VALIDATION = 'ruleValidation',
+  INACTIVE_PROPERTY = 'ruleValidation',
   DEPRECATED_PROPERTY = 'deprecatedProperty',
 }
 
@@ -49,19 +68,20 @@ export class AuthoringHint {
   readonly #hintType: AuthoringHintType;
   readonly #hintMessage: string;
   readonly #possibleFixMessage: string|null;
-  readonly #learnMore: string|null;
+  readonly #learnMoreLink: string|undefined;
 
-  constructor(property: string, hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, showLearnMore: boolean) {
+  constructor(
+      hintType: AuthoringHintType, hintMessage: string, possibleFixMessage: string|null, learnMoreLink?: string) {
     this.#hintType = hintType;
     this.#hintMessage = hintMessage;
     this.#possibleFixMessage = possibleFixMessage;
-    this.#learnMore = showLearnMore ? property : null; // TODO: Add Goo.gle short link base url
+    this.#learnMoreLink = learnMoreLink;
   }
 
   getHintPrefix(): string {
     switch (this.#hintType) {
-      case AuthoringHintType.RULE_VALIDATION:
-        return i18nString(UIStrings.ruleValidationHintPrefix);
+      case AuthoringHintType.INACTIVE_PROPERTY:
+        return i18nString(UIStrings.inactivePropertyHintPrefix);
       case AuthoringHintType.DEPRECATED_PROPERTY:
         return i18nString(UIStrings.deprecatedPropertyHintPrefix);
     }
@@ -75,8 +95,8 @@ export class AuthoringHint {
     return this.#possibleFixMessage;
   }
 
-  getLearnMoreLink(): string|null {
-    return this.#learnMore;
+  getLearnMoreLink(): string|undefined {
+    return this.#learnMoreLink;
   }
 }
 
@@ -87,6 +107,9 @@ export abstract class CSSRuleValidator {
     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;
 
@@ -94,7 +117,9 @@ export abstract class CSSRuleValidator {
     return this.#affectedProperties;
   }
 
-  abstract getAuthoringHint(propertyName: string, parentComputedStyles: Map<String, String>|null): AuthoringHint;
+  abstract getAuthoringHint(
+      propertyName: string, computedStyles: Map<String, String>|null,
+      parentComputedStyles: Map<String, String>|null): AuthoringHint;
 }
 
 export class AlignContentValidator extends CSSRuleValidator {
@@ -106,28 +131,25 @@ export class AlignContentValidator extends CSSRuleValidator {
     if (computedStyles === null || computedStyles === undefined) {
       return true;
     }
-    const display = computedStyles.get('display');
-    if (display !== 'flex' && display !== 'inline-flex') {
+    if (!isFlexContainer(computedStyles)) {
       return true;
     }
     return computedStyles.get('flex-wrap') !== 'nowrap';
   }
 
   getAuthoringHint(): AuthoringHint {
-    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">flex-wrap</span>: nowrap</code>';
-    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">align-content</span></code>';
+    const reasonPropertyDeclaration = buildStyledPropertyText('flex-wrap');
+    const affectedPropertyDeclarationCode = buildStyledPropertyText('align-content');
 
     return new AuthoringHint(
-      'align-content',
-      AuthoringHintType.RULE_VALIDATION,
-      i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
-        'REASON_RULE_CODE': reasonRuleCode,
-        'AFFECTED_RULE_CODE': affectedRuleCode,
-      }),
-      i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
-        'REASON_RULE_CODE': reasonRuleCode,
-      }),
-      true,
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
     );
   }
 }
@@ -138,40 +160,337 @@ export class FlexItemValidator extends CSSRuleValidator {
   }
 
   isRuleValid(computedStyles: Map<String, String>|null, parentsComputedStyles: Map<String, String>|null): boolean {
-    if (computedStyles === null || computedStyles === undefined || parentsComputedStyles === null ||
-        parentsComputedStyles === undefined) {
+    if (parentsComputedStyles === null) {
       return true;
     }
-    const parentDisplay = parentsComputedStyles.get('display');
-    return parentDisplay === 'flex' || parentDisplay === 'inline-flex';
+    return isFlexContainer(parentsComputedStyles);
   }
 
-  getAuthoringHint(property: string, parentsComputedStyles: Map<String, String>|null): AuthoringHint {
-    const reasonRuleCode = '<code class="unbreakable-text"><span class="property">display</span>:' + parentsComputedStyles?.get('display') + '</code>';
-    const affectedRuleCode = '<code class="unbreakable-text"><span class="property">' + property + '</span></code>';
-    const targetParentRuleCode = '<code class="unbreakable-text"><span class="property">display</span>: flex</code>';
+  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');
 
     return new AuthoringHint(
-      property,
-      AuthoringHintType.RULE_VALIDATION,
-      i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
-        'REASON_RULE_CODE': reasonRuleCode,
-        'AFFECTED_RULE_CODE': affectedRuleCode,
-      }),
-      i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
-        'EXISTING_PARENT_ELEMENT_RULE': reasonRuleCode,
-        'TARGET_PARENT_ELEMENT_RULE': targetParentRuleCode,
-      }),
-      true,
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+        }),
     );
   }
 }
 
-const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
-  const validators = [new AlignContentValidator(), new FlexItemValidator()];
+export class FlexContainerValidator extends CSSRuleValidator {
+  constructor() {
+    super(['flex-direction', 'flex-flow', 'flex-wrap', 'justify-content']);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): 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);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+          'EXISTING_PROPERTY_DECLARATION': reasonPropertyDeclaration,
+          'TARGET_PROPERTY_DECLARATION': targetRuleCode,
+        }),
+    );
+  }
+}
+
+export class GridContainerValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'grid',
+      'grid-auto-columns',
+      'grid-auto-flow',
+      'grid-auto-rows',
+      'grid-template',
+      'grid-template-areas',
+      'grid-template-columns',
+      'grid-template-rows',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    if (computedStyles === null) {
+      return true;
+    }
+    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);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleChangeSuggestion, {
+          'EXISTING_PROPERTY_DECLARATION': reasonPropertyDeclaration,
+          'TARGET_PROPERTY_DECLARATION': targetRuleCode,
+        }),
+    );
+  }
+}
+
+export class GridItemValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'grid-area',
+      'grid-column',
+      'grid-row',
+      'grid-row-end',
+      'grid-row-start',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+    if (parentComputedStyles === null) {
+      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);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedByParentElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedByParentElementRuleFix, {
+          'EXISTING_PARENT_ELEMENT_RULE': reasonPropertyDeclaration,
+          'TARGET_PARENT_ELEMENT_RULE': targeParentPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class FlexGridValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'order',
+      'align-content',
+      'align-items',
+      'align-self',
+    ]);
+  }
 
+  isRuleValid(computedStyles: Map<String, String>|null): 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);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class MulticolFlexGridValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'gap',
+      'column-gap',
+      'row-gap',
+      'grid-gap',
+      'grid-column-gap',
+      'grid-column-end',
+      'grid-row-gap',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): 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);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class PaddingValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'padding',
+      'padding-top',
+      'padding-right',
+      'padding-bottom',
+      'padding-left',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    const display = computedStyles?.get('display');
+    if (display === null || display === undefined) {
+      return true;
+    }
+    return !['table-row-group', 'table-header-group', 'table-footer-group', 'table-row', 'table-column-group',
+             'table-column']
+                .includes(display as string);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonPropertyDeclaration = buildStyledRuleText('display', computedStyles?.get('display'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class PositionValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'top',
+      'right',
+      'bottom',
+      'left',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null): boolean {
+    const position = computedStyles?.get('position');
+    if (position === null || position === undefined) {
+      return true;
+    }
+    return position !== 'static';
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+export class ZIndexValidator extends CSSRuleValidator {
+  constructor() {
+    super([
+      'z-index',
+    ]);
+  }
+
+  isRuleValid(computedStyles: Map<String, String>|null, parentComputedStyles: Map<String, String>|null): boolean {
+    const position = computedStyles?.get('position');
+    if (position === null || position === undefined) {
+      return true;
+    }
+    return ['absolute', 'relative', 'fixed', 'sticky'].includes(position as string) ||
+        isFlexContainer(parentComputedStyles);
+  }
+
+  getAuthoringHint(property: string, computedStyles: Map<String, String>|null): AuthoringHint {
+    const reasonPropertyDeclaration = buildStyledRuleText('position', computedStyles?.get('position'));
+    const affectedPropertyDeclarationCode = buildStyledPropertyText(property);
+
+    return new AuthoringHint(
+        AuthoringHintType.INACTIVE_PROPERTY,
+        i18nString(UIStrings.ruleViolatedBySameElementRuleReason, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+          'AFFECTED_PROPERTY_DECLARATION_CODE': affectedPropertyDeclarationCode,
+        }),
+        i18nString(UIStrings.ruleViolatedBySameElementRuleFix, {
+          'REASON_PROPERTY_DECLARATION_CODE': reasonPropertyDeclaration,
+        }),
+    );
+  }
+}
+
+const CSS_RULE_VALIDATORS = [
+  AlignContentValidator,
+  FlexItemValidator,
+  FlexContainerValidator,
+  GridContainerValidator,
+  GridItemValidator,
+  FlexGridValidator,
+  MulticolFlexGridValidator,
+  PaddingValidator,
+  PositionValidator,
+  ZIndexValidator,
+];
+
+const setupCSSRulesValidators = (): Map<String, CSSRuleValidator[]> => {
   const validatorsMap = new Map<String, CSSRuleValidator[]>();
-  for (const validator of validators) {
+  for (const validatorClass of CSS_RULE_VALIDATORS) {
+    const validator = new validatorClass();
     const affectedProperties = validator.getAffectedProperties();
 
     for (const affectedProperty of affectedProperties) {