From cf09d1de8a0277dbaa9e2000a8d2fcca69e7128e Mon Sep 17 00:00:00 2001
From: Changhao Han <changhaohan@chromium.org>
Date: Fri, 18 Mar 2022 09:02:55 +0000
Subject: [PATCH] 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         | 11 ++++++-----
 front_end/core/sdk/CSSSupports.ts              |  5 ++++-
 front_end/panels/elements/StylesSidebarPane.ts |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/front_end/core/sdk/CSSMatchedStyles.ts b/front_end/core/sdk/CSSMatchedStyles.ts
index f1e7abbbb8..ea23c29e4d 100644
--- a/front_end/core/sdk/CSSMatchedStyles.ts
+++ b/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;
       }
     }
diff --git a/front_end/core/sdk/CSSSupports.ts b/front_end/core/sdk/CSSSupports.ts
index a31c0ba7f5..61b2e70d5a 100644
--- a/front_end/core/sdk/CSSSupports.ts
+++ b/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;
   }
 }
diff --git a/front_end/panels/elements/StylesSidebarPane.ts b/front_end/panels/elements/StylesSidebarPane.ts
index 3d5a4c64c0..70993a4302 100644
--- a/front_end/panels/elements/StylesSidebarPane.ts
+++ b/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);