Add active field and update cascade for @supports

Pending on roll: https://crrev.com/c/3535880

Bug: 1222574, 1222573, 1298025
Change-Id: Ic0e55115adb2d7354fc5961db68f5dcda4c8cb5a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3535881
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>

front_end/core/sdk/CSSMatchedStyles.ts

@@ -249,7 +249,7 @@ export class CSSMatchedStyles {
 
   hasMatchingSelectors(rule: CSSStyleRule): boolean {
     const matchingSelectors = this.getMatchingSelectors(rule);
-    return matchingSelectors.length > 0 && this.mediaMatches(rule.style);
+    return matchingSelectors.length > 0 && this.queryMatches(rule.style);
   }
 
   getMatchingSelectors(rule: CSSStyleRule): number[] {
@@ -327,13 +327,14 @@ export class CSSMatchedStyles {
     map.set(selectorText, value);
   }
 
-  mediaMatches(style: CSSStyleDeclaration): boolean {
+  queryMatches(style: CSSStyleDeclaration): boolean {
     if (!style.parentRule) {
       return true;
     }
-    const media = (style.parentRule as CSSStyleRule).media;
-    for (let i = 0; media && i < media.length; ++i) {
-      if (!media[i].active()) {
+    const parentRule = style.parentRule as CSSStyleRule;
+    const queries = [...parentRule.media, ...parentRule.containerQueries, ...parentRule.supports];
+    for (const query of queries) {
+      if (!query.active()) {
         return false;
       }
     }

front_end/core/sdk/CSSSupports.ts

@@ -13,6 +13,8 @@ export class CSSSupports extends CSSQuery {
     return payload.map(supports => new CSSSupports(cssModel, supports));
   }
 
+  #active: boolean = true;
+
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
     super(cssModel);
     this.reinitialize(payload);
@@ -22,9 +24,10 @@ export class CSSSupports extends CSSQuery {
     this.text = payload.text;
     this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
     this.styleSheetId = payload.styleSheetId;
+    this.#active = payload.active;
   }
 
   active(): boolean {
-    return true;
+    return this.#active;
   }
 }

front_end/panels/elements/StylesSidebarPane.ts

@@ -2364,7 +2364,7 @@ export class StylePropertiesSection {
       return;
     }
 
-    this.queryListElement.classList.toggle('query-matches', this.matchedStyles.mediaMatches(this.styleInternal));
+    this.queryListElement.classList.toggle('query-matches', this.matchedStyles.queryMatches(this.styleInternal));
 
     const selectorTexts = rule.selectors.map(selector => selector.text);
     const matchingSelectorIndexes = this.matchedStyles.getMatchingSelectors(rule);