[Masonry] Support masonryContainer in CSSRuleValidator

This CL adds support for masonry container in CSSRuleValidator,
resolving an issue where certain properties used within masonry
containers were incorrectly greyed out in the Elements panel.

Before: https://imgur.com/a/3SZbtDa
After: https://imgur.com/a/vqx9OKZ

Bug: 343257585
Change-Id: I34d9312f7a3fca6350b432f6cd51358b35df2cdc
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6763709
Commit-Queue: Simon Zünd <szuend@chromium.org>
Reviewed-by: Simon Zünd <szuend@chromium.org>
Reviewed-by: Changhao Han <changhaohan@chromium.org>

Author: yanlingwang23

front_end/panels/elements/CSSRuleValidator.test.ts

@@ -48,6 +48,15 @@ describeWithEnvironment('CSSRuleValidator', () => {
       validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
       hintExpected: false,
     },
+    {
+      description: 'Test `align-content`, validation passes when the element is a masonry container',
+      computedStyles: new Map<string, string>([
+        ['align-content', 'center'],
+        ['display', 'masonry'],
+      ]),
+      validator: () => new Elements.CSSRuleValidator.AlignContentValidator(),
+      hintExpected: false,
+    },
     {
       description: 'Test `align-content`, validation does not pass when the element is a math container',
       computedStyles: new Map<string, string>([
@@ -75,6 +84,15 @@ describeWithEnvironment('CSSRuleValidator', () => {
       validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
       hintExpected: false,
     },
+    {
+      description: 'Test `justify-content`, validation passes when the element is masonry containers',
+      computedStyles: new Map<string, string>([
+        ['display', 'masonry'],
+        ['justify-content', 'center'],
+      ]),
+      validator: () => new Elements.CSSRuleValidator.FlexGridValidator(),
+      hintExpected: false,
+    },
     {
       description: 'Test `place-content`, validation passes when the element is grid containers',
       computedStyles: new Map<string, string>([
@@ -156,6 +174,16 @@ describeWithEnvironment('CSSRuleValidator', () => {
       validator: () => new Elements.CSSRuleValidator.GridContainerValidator(),
       hintExpected: false,
     },
+    {
+      description: 'Passes the validation when grid container properties are set to masonry container',
+      computedStyles: new Map<string, string>([
+        ['display', 'masonry'],
+        ['grid-template-columns', 'repeat(3, 10px 15%)'],
+      ]),
+      parentsComputedStyles: new Map<string, string>(),
+      validator: () => new Elements.CSSRuleValidator.GridContainerValidator(),
+      hintExpected: false,
+    },
     {
       description: 'Reports a rule validation when grid container properties are set to non-grid container',
       computedStyles: new Map<string, string>([
@@ -177,6 +205,17 @@ describeWithEnvironment('CSSRuleValidator', () => {
       validator: () => new Elements.CSSRuleValidator.GridItemValidator(),
       hintExpected: false,
     },
+    {
+      description: 'Passes the validation when grid item properties are set to masonry items',
+      computedStyles: new Map<string, string>([
+        ['grid-row', 'span 2'],
+      ]),
+      parentsComputedStyles: new Map<string, string>([
+        ['display', 'masonry'],
+      ]),
+      validator: () => new Elements.CSSRuleValidator.GridItemValidator(),
+      hintExpected: false,
+    },
     {
       description: 'Reports a rule validation when grid item properties are set to non-grid items',
       computedStyles: new Map<string, string>([

front_end/panels/elements/CSSRuleValidator.ts

@@ -14,6 +14,7 @@ import {
   isFlexContainer,
   isGridContainer,
   isInlineElement,
+  isMasonryContainer,
   isMulticolContainer,
   isPossiblyReplacedElement,
 } from './CSSRuleValidatorHelper.js';
@@ -152,7 +153,8 @@ export class AlignContentValidator extends CSSRuleValidator {
       return;
     }
     const isFlex = isFlexContainer(computedStyles);
-    if (!isFlex && !isBlockContainer(computedStyles) && !isGridContainer(computedStyles)) {
+    if (!isFlex && !isBlockContainer(computedStyles) && !isGridContainer(computedStyles) &&
+        !isMasonryContainer(computedStyles)) {
       const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
       const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
@@ -276,7 +278,7 @@ export class GridContainerValidator extends CSSRuleValidator {
   }
 
   getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
-    if (isGridContainer(computedStyles)) {
+    if (isGridContainer(computedStyles) || isMasonryContainer(computedStyles)) {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
@@ -316,7 +318,7 @@ export class GridItemValidator extends CSSRuleValidator {
     if (!parentComputedStyles) {
       return;
     }
-    if (isGridContainer(parentComputedStyles)) {
+    if (isGridContainer(parentComputedStyles) || isMasonryContainer(parentComputedStyles)) {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
@@ -389,11 +391,13 @@ export class FlexGridValidator extends CSSRuleValidator {
       return;
     }
 
-    if (isFlexContainer(computedStyles) || isGridContainer(computedStyles)) {
+    if (isFlexContainer(computedStyles) || isGridContainer(computedStyles) || isMasonryContainer(computedStyles)) {
       return;
     }
 
-    if (parentComputedStyles && (isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles))) {
+    if (parentComputedStyles &&
+        (isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles) ||
+         isMasonryContainer(parentComputedStyles))) {
       const reasonContainerDisplayName = buildPropertyValue(parentComputedStyles.get('display') as string);
       const reasonPropertyName = buildPropertyName(propertyName);
       const reasonAlternativePropertyName = buildPropertyName('justify-self');
@@ -446,7 +450,8 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
       return;
     }
 
-    if (isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles)) {
+    if (isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles) ||
+        isMasonryContainer(computedStyles)) {
       return;
     }
 

front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -91,6 +91,14 @@ export const isGridContainer = (computedStyles?: Map<string, string>): boolean =
   return display === 'grid' || display === 'inline-grid';
 };
 
+export const isMasonryContainer = (computedStyles?: Map<string, string>): boolean => {
+  if (!computedStyles) {
+    return false;
+  }
+  const display = computedStyles.get('display');
+  return display === 'masonry' || display === 'inline-masonry';
+};
+
 export const isMulticolContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;