feat: add @supports at-rule support in the Styles pane

packages/devtools-frontend-lynx/config/gni/devtools_grd_files.gni

@@ -573,6 +573,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/CSSRule.js",
   "front_end/core/sdk/CSSStyleDeclaration.js",
   "front_end/core/sdk/CSSStyleSheetHeader.js",
+  "front_end/core/sdk/CSSSupports.js",
   "front_end/core/sdk/ChildTargetManager.js",
   "front_end/core/sdk/CompilerSourceMappingContentProvider.js",
   "front_end/core/sdk/Connections.js",

packages/devtools-frontend-lynx/front_end/core/sdk/BUILD.gn

@@ -27,6 +27,7 @@ devtools_module("sdk") {
     "CSSRule.ts",
     "CSSStyleDeclaration.ts",
     "CSSStyleSheetHeader.ts",
+    "CSSSupports.ts",
     "ChildTargetManager.ts",
     "CompilerSourceMappingContentProvider.ts",
     "Connections.ts",

packages/devtools-frontend-lynx/front_end/core/sdk/CSSQuery.ts

@@ -9,7 +9,7 @@ import type {CSSModel, Edit} from './CSSModel.js';
 import {CSSLocation} from './CSSModel.js';
 import type {CSSStyleSheetHeader} from './CSSStyleSheetHeader.js';
 
-type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery;
+type CSSQueryPayload = Protocol.CSS.CSSMedia|Protocol.CSS.CSSContainerQuery|Protocol.CSS.CSSSupports;
 
 export abstract class CSSQuery {
   text = '';

packages/devtools-frontend-lynx/front_end/core/sdk/CSSRule.ts

@@ -15,6 +15,7 @@ import { envLogger } from '../protocol_client/InspectorBackend.js';
 
 import {CSSContainerQuery} from './CSSContainerQuery.js';
 import {CSSMedia} from './CSSMedia.js';
+import {CSSSupports} from './CSSSupports.js';
 
 import type {CSSModel, Edit} from './CSSModel.js'; // eslint-disable-line no-unused-vars
 import {CSSStyleDeclaration, Type} from './CSSStyleDeclaration.js';
@@ -116,6 +117,7 @@ export class CSSStyleRule extends CSSRule {
   selectors!: CSSValue[];
   media: CSSMedia[];
   containerQueries: CSSContainerQuery[];
+  supports: CSSSupports[];
   wasUsed: boolean;
   constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSRule, wasUsed?: boolean) {
     // TODO(crbug.com/1011811): Replace with spread operator or better types once Closure is gone.
@@ -125,6 +127,7 @@ export class CSSStyleRule extends CSSRule {
     this.containerQueries = payload.containerQueries ?
         CSSContainerQuery.parseContainerQueriesPayload(cssModel, payload.containerQueries) :
         [];
+    this.supports = payload.supports ? CSSSupports.parseSupportsPayload(cssModel, payload.supports) : [];
     this.wasUsed = wasUsed || false;
   }
 
@@ -214,6 +217,9 @@ export class CSSStyleRule extends CSSRule {
     for (const containerQuery of this.containerQueries) {
       containerQuery.rebase(edit);
     }
+    for (const supports of this.supports) {
+      supports.rebase(edit);
+    }
 
     super.rebase(edit);
   }

packages/devtools-frontend-lynx/front_end/core/sdk/CSSSupports.ts

@@ -0,0 +1,30 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import type {CSSModel} from './CSSModel.js';
+import {CSSQuery} from './CSSQuery.js';
+
+export class CSSSupports extends CSSQuery {
+  static parseSupportsPayload(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports[]): CSSSupports[] {
+    return payload.map(supports => new CSSSupports(cssModel, supports));
+  }
+
+  constructor(cssModel: CSSModel, payload: Protocol.CSS.CSSSupports) {
+    super(cssModel);
+    this.reinitialize(payload);
+  }
+
+  reinitialize(payload: Protocol.CSS.CSSSupports): void {
+    this.text = payload.text;
+    this.range = payload.range ? TextUtils.TextRange.TextRange.fromObject(payload.range) : null;
+    this.styleSheetId = payload.styleSheetId;
+  }
+
+  active(): boolean {
+    return true;
+  }
+}

packages/devtools-frontend-lynx/front_end/core/sdk/sdk.ts

@@ -33,6 +33,7 @@ import * as CSSQuery from './CSSQuery.js';
 import * as CSSRule from './CSSRule.js';
 import * as CSSStyleDeclaration from './CSSStyleDeclaration.js';
 import * as CSSStyleSheetHeader from './CSSStyleSheetHeader.js';
+import * as CSSSupports from './CSSSupports.js';
 import * as DebuggerModel from './DebuggerModel.js';
 import * as DOMDebuggerModel from './DOMDebuggerModel.js';
 import * as DOMModel from './DOMModel.js';
@@ -98,6 +99,7 @@ export {
   CSSRule,
   CSSStyleDeclaration,
   CSSStyleSheetHeader,
+  CSSSupports,
   DebuggerModel,
   DOMDebuggerModel,
   DOMModel,

packages/devtools-frontend-lynx/front_end/generated/protocol.d.ts

@@ -1874,6 +1874,11 @@ declare namespace Protocol {
        * The array enumerates container queries starting with the innermost one, going outwards.
        */
       containerQueries?: CSSContainerQuery[];
+      /**
+       * @supports CSS at-rule array.
+       * The array enumerates @supports at-rules starting with the innermost one, going outwards.
+       */
+      supports?: CSSSupports[];
     }
 
     /**
@@ -2116,6 +2121,25 @@ declare namespace Protocol {
       name?: string;
     }
 
+    /**
+     * CSS Supports at-rule descriptor.
+     */
+    export interface CSSSupports {
+      /**
+       * Supports rule text.
+       */
+      text: string;
+      /**
+       * The associated rule header range in the enclosing stylesheet (if
+       * available).
+       */
+      range?: SourceRange;
+      /**
+       * Identifier of the stylesheet containing this object (if exists).
+       */
+      styleSheetId?: StyleSheetId;
+    }
+
     /**
      * Information about amount of glyphs that were rendered with given font.
      */

packages/devtools-frontend-lynx/front_end/panels/elements/StylesSidebarPane.ts

@@ -1797,6 +1797,12 @@ export class StylePropertiesSection {
     this._updateRuleOrigin();
   }
 
+  protected createAtRuleLists(rule: SDK.CSSRule.CSSStyleRule): void {
+    this._createMediaList(rule.media);
+    this.createContainerQueryList(rule.containerQueries);
+    this.createSupportsList(rule.supports);
+  }
+
   _createMediaList(mediaRules: SDK.CSSMedia.CSSMedia[]): void {
     for (let i = mediaRules.length - 1; i >= 0; --i) {
       const media = mediaRules[i];
@@ -1864,6 +1870,28 @@ export class StylePropertiesSection {
     }
   }
 
+  protected createSupportsList(supportsList: SDK.CSSSupports.CSSSupports[]): void {
+    for (let i = supportsList.length - 1; i >= 0; --i) {
+      const supports = supportsList[i];
+      if (!supports.text) {
+        continue;
+      }
+
+      let onQueryTextClick;
+      if (supports.styleSheetId) {
+        onQueryTextClick = this.handleQueryRuleClick.bind(this, supports);
+      }
+
+      const supportsElement = new ElementsComponents.CSSQuery.CSSQuery();
+      supportsElement.data = {
+        queryPrefix: '@supports',
+        queryText: supports.text,
+        onQueryTextClick,
+      };
+      this.queryListElement.append(supportsElement);
+    }
+  }
+
   private async addContainerForContainerQuery(containerQuery: SDK.CSSContainerQuery.CSSContainerQuery): Promise<void> {
     const container = await containerQuery.getContainerForNode(this._matchedStyles.node().id);
     if (!container) {
@@ -1893,8 +1921,7 @@ export class StylePropertiesSection {
   private updateQueryList(): void {
     this.queryListElement.removeChildren();
     if (this._style.parentRule && this._style.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this._createMediaList(this._style.parentRule.media);
-      this.createContainerQueryList(this._style.parentRule.containerQueries);
+      this.createAtRuleLists(this._style.parentRule);
     }
   }
 
@@ -2167,8 +2194,7 @@ export class StylePropertiesSection {
     event.consume(true);
   }
 
-  private handleQueryRuleClick(query: SDK.CSSMedia.CSSMedia|SDK.CSSContainerQuery.CSSContainerQuery, event: Event):
-      void {
+  private handleQueryRuleClick(query: SDK.CSSQuery.CSSQuery, event: Event): void {
     const element = event.currentTarget as Element;
     if (UI.UIUtils.isBeingEdited(element)) {
       return;
@@ -2230,8 +2256,8 @@ export class StylePropertiesSection {
   }
 
   _editingMediaCommitted(
-      query: SDK.CSSMedia.CSSMedia|SDK.CSSContainerQuery.CSSContainerQuery, element: Element, newContent: string,
-      _oldContent: string, _context: Context|undefined, _moveDirection: string): void {
+      query: SDK.CSSQuery.CSSQuery, element: Element, newContent: string, _oldContent: string,
+      _context: Context|undefined, _moveDirection: string): void {
     this._parentPane.setEditingStyle(false);
     this._editingMediaFinished(element);
 
@@ -2517,8 +2543,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
         cssModel, this._parentPane._linkifier, styleSheetId, this._actualRuleLocation()));
     if (insertAfterStyle && insertAfterStyle.parentRule &&
         insertAfterStyle.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this._createMediaList(insertAfterStyle.parentRule.media);
-      this.createContainerQueryList(insertAfterStyle.parentRule.containerQueries);
+      this.createAtRuleLists(insertAfterStyle.parentRule);
     }
     this.element.classList.add('blank-section');
   }

packages/devtools-frontend-lynx/test/e2e/elements/style-pane-properties_test.ts

@@ -334,4 +334,18 @@ describe('The Styles pane', async () => {
     assert.strictEqual(
         queriedSizeDetailsContent, '(size) width: 200px height: 0px', 'container queried details does not match');
   });
+
+  it('can display @supports at-rules', async () => {
+    const {frontend} = getBrowserAndPages();
+    await goToResourceAndWaitForStyleSection('elements/css-supports.html');
+
+    // Select the child that has @supports rules.
+    await frontend.keyboard.press('ArrowDown');
+    await waitForContentOfSelectedElementsNode('<div class=\u200B"rule1">\u200B</div>\u200B');
+
+    const rule1PropertiesSection = await getStyleRule(RULE1_SELECTOR);
+    const supportsQuery = await waitFor('.query.editable', rule1PropertiesSection);
+    const supportsQueryText = await supportsQuery.evaluate(node => (node as HTMLElement).innerText as string);
+    assert.deepEqual(supportsQueryText, '@supports (width: 10px)', 'incorrectly displayed @supports rule');
+  });
 });

packages/devtools-frontend-lynx/test/e2e/resources/elements/BUILD.gn

@@ -13,6 +13,7 @@ copy_to_gen("elements") {
     "css-grid-ua-shadow.html",
     "css-grid.html",
     "css-module.css",
+    "css-supports.html",
     "css-variables.html",
     "element-breadcrumbs.html",
     "element-reveal-inline-issue.html",

packages/devtools-frontend-lynx/test/e2e/resources/elements/css-supports.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<style>
+  div {
+    width: 0px;
+    height: 0px;
+  }
+
+  @supports (width: 10px) {
+    .rule1 {
+      width: 10px;
+    }
+  }
+</style>
+<div class="rule1"></div>

packages/devtools-frontend-lynx/third_party/blink/public/devtools_protocol/browser_protocol.json

@@ -2815,6 +2815,16 @@
                             "items": {
                                 "$ref": "CSSContainerQuery"
                             }
+                        },
+                        {
+                            "name": "supports",
+                            "description": "@supports CSS at-rule array.\nThe array enumerates @supports at-rules starting with the innermost one, going outwards.",
+                            "experimental": true,
+                            "optional": true,
+                            "type": "array",
+                            "items": {
+                                "$ref": "CSSSupports"
+                            }
                         }
                     ]
                 },
@@ -3139,6 +3149,31 @@
                         }
                     ]
                 },
+                {
+                    "id": "CSSSupports",
+                    "description": "CSS Supports at-rule descriptor.",
+                    "experimental": true,
+                    "type": "object",
+                    "properties": [
+                        {
+                            "name": "text",
+                            "description": "Supports rule text.",
+                            "type": "string"
+                        },
+                        {
+                            "name": "range",
+                            "description": "The associated rule header range in the enclosing stylesheet (if\navailable).",
+                            "optional": true,
+                            "$ref": "SourceRange"
+                        },
+                        {
+                            "name": "styleSheetId",
+                            "description": "Identifier of the stylesheet containing this object (if exists).",
+                            "optional": true,
+                            "$ref": "StyleSheetId"
+                        }
+                    ]
+                },
                 {
                     "id": "PlatformFontUsage",
                     "description": "Information about amount of glyphs that were rendered with given font.",
@@ -24297,4 +24332,4 @@
         "major": "1",
         "minor": "3"
     }
-}
+}

packages/devtools-frontend-lynx/third_party/blink/public/devtools_protocol/browser_protocol.pdl

@@ -1334,6 +1334,9 @@ experimental domain CSS
       # Container query list array (for rules involving container queries).
       # The array enumerates container queries starting with the innermost one, going outwards.
       experimental optional array of CSSContainerQuery containerQueries
+      # @supports CSS at-rule array.
+      # The array enumerates @supports at-rules starting with the innermost one, going outwards.
+      experimental optional array of CSSSupports supports
 
   # CSS coverage information.
   type RuleUsage extends object
@@ -1470,6 +1473,17 @@ experimental domain CSS
       # Optional name for the container.
       optional string name
 
+  # CSS Supports at-rule descriptor.
+  experimental type CSSSupports extends object
+    properties
+      # Supports rule text.
+      string text
+      # The associated rule header range in the enclosing stylesheet (if
+      # available).
+      optional SourceRange range
+      # Identifier of the stylesheet containing this object (if exists).
+      optional StyleSheetId styleSheetId
+
   # Information about amount of glyphs that were rendered with given font.
   type PlatformFontUsage extends object
     properties