chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -5,12 +5,11 @@
 import * as Common from '../../core/common/common.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
+import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 
-import {type ContrastIssue} from './CSSOverviewCompletedView.js';
-
+import type {ContrastIssue} from './CSSOverviewCompletedView.js';
 import {CSSOverviewUnusedDeclarations, type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 interface NodeStyleStats {

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -2,21 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as CSSOverviewComponents from './components/components.js';
-import cssOverviewStyles from './cssOverview.css.js';
 import type * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
-import {CSSOverviewCompletedView, type ContrastIssue} from './CSSOverviewCompletedView.js';
-
+import * as CSSOverviewComponents from './components/components.js';
+import cssOverviewStyles from './cssOverview.css.js';
+import {type ContrastIssue, CSSOverviewCompletedView} from './CSSOverviewCompletedView.js';
 import {Events, type OverviewController} from './CSSOverviewController.js';
-
 import {CSSOverviewModel, type GlobalStyleStats} from './CSSOverviewModel.js';
 import {CSSOverviewProcessingView} from './CSSOverviewProcessingView.js';
-import {type UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
+import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
 export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {
   readonly #controller: OverviewController;

package/front_end/panels/css_overview/components/CSSOverviewStartView.ts

@@ -2,11 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/panel_feedback/panel_feedback.js';
+import '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
+
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as PanelFeedback from '../../../ui/components/panel_feedback/panel_feedback.js';
-import * as PanelIntroductionSteps from '../../../ui/components/panel_introduction_steps/panel_introduction_steps.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import cssOverviewStartViewStyles from './cssOverviewStartView.css.js';
@@ -54,7 +55,6 @@ export class OverviewStartRequestedEvent extends Event {
 }
 
 export class CSSOverviewStartView extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-css-overview-start-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   connectedCallback(): void {
@@ -79,31 +79,31 @@ export class CSSOverviewStartView extends HTMLElement {
     // clang-format off
     render(html`
       <div class="css-overview-start-view">
-        <${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+        <devtools-panel-introduction-steps>
           <span slot="title">${i18nString(UIStrings.identifyCSSImprovements)}</span>
           <span slot="step-1">${i18nString(UIStrings.capturePageCSSOverview)}</span>
           <span slot="step-2">${i18nString(UIStrings.identifyCSSImprovementsWithExampleIssues)}</span>
           <span slot="step-3">${i18nString(UIStrings.locateAffectedElements)}</span>
-        </${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+        </devtools-panel-introduction-steps>
         <div class="start-capture-wrapper">
-          <${Buttons.Button.Button.litTagName}
+          <devtools-button
             class="start-capture"
             .variant=${Buttons.Button.Variant.PRIMARY}
             .jslogContext=${'css-overview.capture-overview'}
             @click=${this.#onStartCaptureClick}>
             ${i18nString(UIStrings.captureOverview)}
-          </${Buttons.Button.Button.litTagName}>
+          </devtools-button>
         </div>
-        <${PanelFeedback.PanelFeedback.PanelFeedback.litTagName} .data=${{
+        <devtools-panel-feedback .data=${{
             feedbackUrl: FEEDBACK_LINK,
             quickStartUrl: DOC_LINK,
             quickStartLinkText: i18nString(UIStrings.quickStartWithCSSOverview),
-          } as PanelFeedback.PanelFeedback.PanelFeedbackData}>
-        </${PanelFeedback.PanelFeedback.PanelFeedback.litTagName}>
-        <${PanelFeedback.FeedbackButton.FeedbackButton.litTagName} .data=${{
+          }}>
+        </devtools-panel-feedback>
+        <devtools-feedback-button .data=${{
           feedbackUrl: FEEDBACK_LINK,
-          } as PanelFeedback.FeedbackButton.FeedbackButtonData}>
-        </${PanelFeedback.FeedbackButton.FeedbackButton.litTagName}>
+          }}>
+        </devtools-feedback-button>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './components/components.js';
+
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
-import * as ElementsComponents from './components/components.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
-import type * as Protocol from '../../generated/protocol.js';
+
+const {html} = LitHtml;
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
@@ -109,17 +112,17 @@ export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.Acces
   }];
 }
 
-type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
-
 export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateResult {
-  const tag = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNode.litTagName;
   const sdkNode = node.treeNodeData;
   const name = sdkNode.name()?.value || '';
   const role = sdkNode.role()?.value || '';
   const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
   const id = getNodeId(sdkNode);
-  return LitHtml.html`<${tag} .data=${{name, role, ignored, properties, id} as Data}></${tag}>`;
+  return html`<devtools-accessibility-tree-node .data=${{
+    name, role, ignored, properties, id,
+  }
+  }></devtools-accessibility-tree-node>`;
 }
 
 export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -304,11 +304,6 @@ export class GridItemValidator extends CSSRuleValidator {
       'grid-row',
       'grid-row-end',
       'grid-row-start',
-      // At the time of writing (November 2022), `justify-self` is only in effect in grid layout.
-      // There are no other browsers that support `justify-self` in other layouts.
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Alignment/Box_Alignment_In_Block_Abspos_Tables
-      // TODO: move `justify-self` to other validator or change pop-over text if Chrome supports CSS Align in other layouts.
-      'justify-self',
     ]);
   }
 

package/front_end/panels/elements/ColorSwatchPopoverIcon.ts

@@ -3,16 +3,15 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
-import {type StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {type StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 const UIStrings = {
   /**
@@ -217,7 +216,6 @@ export class ColorSwatchPopoverIcon extends Common.ObjectWrapper.ObjectWrapper<C
     }
 
     UI.Context.Context.instance().setFlavor(ColorSwatchPopoverIcon, this);
-    Host.userMetrics.colorPickerOpenedFrom(Host.UserMetrics.ColorPickerOpenedFrom.STYLES_TAB);
   }
 
   private spectrumResized(): void {

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -51,6 +51,8 @@ import {categorizePropertyName, type Category, DefaultCategoryOrder} from './Pro
 import {type MatchRenderer, Renderer, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    * @description Text for a checkbox setting that controls whether the user-supplied filter text
@@ -123,7 +125,7 @@ const createPropertyElement =
      onContextMenu: ((event: Event) => void)): LitHtml.TemplateResult => {
       const {name, value} = renderPropertyContents(node, propertyName, propertyValue);
       // clang-format off
-      return LitHtml.html`<${ElementsComponents.ComputedStyleProperty.ComputedStyleProperty.litTagName}
+      return html`<devtools-computed-style-property
         .traceable=${traceable}
         .inherited=${inherited}
         @oncontextmenu=${onContextMenu}
@@ -134,7 +136,7 @@ const createPropertyElement =
         }}>
           ${name}
           ${value}
-      </${ElementsComponents.ComputedStyleProperty.ComputedStyleProperty.litTagName}>`;
+      </devtools-computed-style-property>`;
       // clang-format on
     };
 
@@ -480,9 +482,9 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
             createTraceElement(domNode, data.property, isPropertyOverloaded, matchedStyles, this.linkifier);
         traceElement.addEventListener(
             'contextmenu', this.handleContextMenuEvent.bind(this, matchedStyles, data.property));
-        return LitHtml.html`${traceElement}`;
+        return html`${traceElement}`;
       }
-      return LitHtml.html`<span style="cursor: text; color: var(--sys-color-token-subtle);">${data.name}</span>`;
+      return html`<span style="cursor: text; color: var(--sys-color-token-subtle);">${data.name}</span>`;
     };
   }
 

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -38,6 +38,10 @@ const UIStrings = {
    * @description Similar with forceElementState but allows users to force specific state of the selected element.
    */
   forceElementSpecificStates: 'Force specific element state',
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementStatePaneWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -125,6 +129,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         iconName: 'help',
         size: Buttons.Button.Size.SMALL,
         jslogContext: 'learn-more',
+        title: i18nString(UIStrings.learnMore),
       };
       learnMoreButton.addEventListener(
           'click',

package/front_end/panels/elements/ElementsPanel.ts

@@ -45,16 +45,16 @@ import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {type AXTreeNodeData} from './AccessibilityTreeUtils.js';
+import type {AXTreeNodeData} from './AccessibilityTreeUtils.js';
 import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
-import {type ElementsTreeElement} from './ElementsTreeElement.js';
+import type {ElementsTreeElement} from './ElementsTreeElement.js';
 import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.js';
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
-import {type MarkerDecorator} from './MarkerDecorator.js';
+import type {MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
 import {
   Events as StylesSidebarPaneEvents,
@@ -110,7 +110,7 @@ const UIStrings = {
   /**
    * @description A context menu item to reveal a node in the DOM tree of the Elements Panel
    */
-  revealInElementsPanel: 'Reveal in Elements panel',
+  openInElementsPanel: 'Open in Elements panel',
   /**
    * @description Warning/error text displayed when a node cannot be found in the current page.
    */
@@ -461,10 +461,11 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   override focus(): void {
-    if (this.treeOutlines.size) {
-      this.treeOutlines.values().next().value.focus();
-    } else {
+    const firstTreeOutline = this.treeOutlines.values().next();
+    if (firstTreeOutline.done) {
       this.domTreeContainer.focus();
+    } else {
+      firstTreeOutline.value.focus();
     }
   }
 
@@ -1082,13 +1083,13 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.ARIAUtils.setLabel(contentElement, i18nString(UIStrings.sidePanelContent));
 
     const stylesView = new UI.View.SimpleView(
-        i18nString(UIStrings.styles), /* isWebComponent */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
+        i18nString(UIStrings.styles), /* useShadowDom */ undefined, SidebarPaneTabId.STYLES as Lowercase<string>);
     this.sidebarPaneView.appendView(stylesView);
     stylesView.element.classList.add('flex-auto');
     stylesSplitWidget.show(stylesView.element);
 
     const computedView = new UI.View.SimpleView(
-        i18nString(UIStrings.computed), /* isWebComponent */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
+        i18nString(UIStrings.computed), /* useShadowDom */ undefined, SidebarPaneTabId.COMPUTED as Lowercase<string>);
     computedView.element.classList.add('composite', 'fill');
 
     tabbedPane.addEventListener(UI.TabbedPane.Events.TabSelected, tabSelected, this);
@@ -1292,7 +1293,7 @@ export class ContextMenuProvider implements
       return;
     }
     contextMenu.revealSection().appendItem(
-        i18nString(UIStrings.revealInElementsPanel), () => Common.Revealer.reveal(object),
+        i18nString(UIStrings.openInElementsPanel), () => Common.Revealer.reveal(object),
         {jslogContext: 'elements.reveal-node'});
   }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -43,6 +43,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as FloatingButton from '../../ui/components/floating_button/floating_button.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
@@ -255,6 +256,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
   selectionElement?: HTMLDivElement;
   private hintElement?: HTMLElement;
+  private aiButtonContainer?: HTMLElement;
   private contentElement: HTMLElement;
   #elementIssues: Map<string, IssuesManager.GenericIssue.GenericIssue> = new Map();
   #nodeElementToIssue: Map<Element, IssuesManager.GenericIssue.GenericIssue> = new Map();
@@ -414,6 +416,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
+    if (isHovered && !this.aiButtonContainer) {
+      this.createAiButton();
+    } else if (!isHovered && this.aiButtonContainer) {
+      this.aiButtonContainer.remove();
+      delete this.aiButtonContainer;
+    }
+
     this.hoveredInternal = isHovered;
 
     if (this.listItemElement) {
@@ -517,6 +526,31 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  private createAiButton(): void {
+    const isElementNode = this.node().nodeType() === Node.ELEMENT_NODE;
+    if (!isElementNode ||
+        !UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button')) {
+      return;
+    }
+
+    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
+    if (this.contentElement && !this.aiButtonContainer) {
+      this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
+      const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        iconName: 'smart-assistant',
+      });
+      floatingButton.addEventListener('click', ev => {
+        ev.stopPropagation();
+        this.select(true, false);
+        void action.execute();
+      }, {capture: true});
+      floatingButton.addEventListener('mousedown', ev => {
+        ev.stopPropagation();
+      }, {capture: true});
+      this.aiButtonContainer.appendChild(floatingButton);
+    }
+  }
+
   override onbind(): void {
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
@@ -763,7 +797,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isShadowRoot = this.nodeInternal.isShadowRoot();
 
     const createShortcut = UI.KeyboardShortcut.KeyboardShortcut.shortcutToString.bind(null);
-    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta;
+    const modifier = UI.KeyboardShortcut.Modifiers.CtrlOrMeta.value;
     const treeOutline = this.treeOutline;
     if (!treeOutline) {
       return;
@@ -1405,6 +1439,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     delete this.selectionElement;
     delete this.hintElement;
+    delete this.aiButtonContainer;
     if (this.selected) {
       this.createSelection();
       this.createHint();

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -50,7 +50,7 @@ import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
-import {type MarkerDecoratorRegistration} from './MarkerDecorator.js';
+import type {MarkerDecoratorRegistration} from './MarkerDecorator.js';
 import {TopLayerContainer} from './TopLayerContainer.js';
 
 const UIStrings = {

package/front_end/panels/elements/PropertyMatchers.test.ts

@@ -513,6 +513,38 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
     });
   });
 
+  describe('PositionTryMatcher', () => {
+    it('should match `position-try[-fallbacks]` property with linkable names', () => {
+      {
+        const {match, text} = matchSingleValue(
+            'position-try', 'flip-block, --top, --bottom', new Elements.PropertyMatchers.PositionTryMatcher());
+        assert.exists(match, text);
+        assert.strictEqual(match.text, 'flip-block, --top, --bottom');
+        assert.strictEqual(match.preamble.length, 0);
+      } {
+        const {ast, match, text} = matchSingleValue(
+            'position-try', '/* comment */ most-height --top, --bottom',
+            new Elements.PropertyMatchers.PositionTryMatcher());
+        assert.exists(ast, text);
+        assert.exists(match, text);
+        assert.strictEqual(match.text, '/* comment */ most-height --top, --bottom');
+        assert.strictEqual(
+            ast.textRange(match.preamble[0], match.preamble[match.preamble.length - 1]), '/* comment */ most-height');
+
+      } {
+        const {match, text} = matchSingleValue(
+            'position-try-fallbacks', '/* comment */ flip-block, --top, /* comment */ --bottom',
+            new Elements.PropertyMatchers.PositionTryMatcher());
+        assert.exists(match, text);
+        assert.strictEqual(match.text, '/* comment */ flip-block, --top, /* comment */ --bottom');
+        assert.strictEqual(match.preamble.length, 0);
+      } {
+        const {match} = matchSingleValue('position-try', 'revert', new Elements.PropertyMatchers.PositionTryMatcher());
+        assert.isNull(match);
+      }
+    });
+  });
+
   it('matches lengths', () => {
     const {match, text} = matchSingleValue('min-width', '100px', new Elements.PropertyMatchers.LengthMatcher());
     assert.exists(match, text);
@@ -534,4 +566,29 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
         new Elements.PropertyMatchers.CSSWideKeywordMatcher(propertyStub, matchedStylesStub));
     assert.notExists(match, text);
   });
+
+  it('match flex and grid values', () => {
+    const good = [
+      'flex',
+      'grid',
+      'inline-flex',
+      'inline-grid',
+      'block flex',
+      'block grid',
+      'inline   flex',
+      'inline grid',
+      'inline grid !important',
+      'grid /* comment */',
+    ];
+    const bad = ['flex block', 'grid inline', 'block', 'inline'];
+    for (const value of good) {
+      const {match, text} = matchSingleValue('display', value, new Elements.PropertyMatchers.FlexGridMatcher());
+      assert.exists(match, text);
+      assert.strictEqual(match.text.includes('flex'), match.isFlex);
+    }
+    for (const value of bad) {
+      const {match, text} = matchSingleValue('display', value, new Elements.PropertyMatchers.FlexGridMatcher());
+      assert.notExists(match, text);
+    }
+  });
 });

package/front_end/panels/elements/PropertyMatchers.ts

@@ -256,7 +256,7 @@ const enum AnimationLonghandPart {
 
 export class LinkableNameMatch implements Match {
   constructor(
-      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly properyName: LinkableNameProperties) {
+      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly propertyName: LinkableNameProperties) {
   }
 }
 
@@ -486,6 +486,42 @@ export class LengthMatcher extends matcherBase(LengthMatch) {
   }
 }
 
+export class FlexGridMatch implements Match {
+  constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly isFlex: boolean) {
+  }
+}
+
+// clang-format off
+export class FlexGridMatcher extends matcherBase(FlexGridMatch) {
+  // clang-format on
+  static readonly FLEX = ['flex', 'inline-flex', 'block flex', 'inline flex'];
+  static readonly GRID = ['grid', 'inline-grid', 'block grid', 'inline grid'];
+  override accepts(propertyName: string): boolean {
+    return propertyName === 'display';
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): Match|null {
+    if (node.name !== 'Declaration') {
+      return null;
+    }
+    const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
+    if (valueNodes.length < 1) {
+      return null;
+    }
+    const values = valueNodes.filter(node => node.name !== 'Important')
+                       .map(node => matching.getComputedText(node).trim())
+                       .filter(value => value);
+    const text = values.join(' ');
+    if (FlexGridMatcher.FLEX.includes(text)) {
+      return new FlexGridMatch(matching.ast.text(node), node, true);
+    }
+    if (FlexGridMatcher.GRID.includes(text)) {
+      return new FlexGridMatch(matching.ast.text(node), node, false);
+    }
+    return null;
+  }
+}
+
 export class GridTemplateMatch implements Match {
   constructor(readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly lines: CodeMirror.SyntaxNode[][]) {
   }
@@ -689,3 +725,44 @@ export class CSSWideKeywordMatcher extends matcherBase(CSSWideKeywordMatch) {
     return new CSSWideKeywordMatch(text, node, this.property, this.matchedStyles);
   }
 }
+
+export class PositionTryMatch implements Match {
+  constructor(
+      readonly text: string, readonly node: CodeMirror.SyntaxNode, readonly preamble: CodeMirror.SyntaxNode[],
+      readonly fallbacks: CodeMirror.SyntaxNode[][]) {
+  }
+}
+
+// clang-format off
+export class PositionTryMatcher extends matcherBase(PositionTryMatch) {
+  // clang-format on
+  override accepts(propertyName: string): boolean {
+    return propertyName === LinkableNameProperties.POSITION_TRY ||
+        propertyName === LinkableNameProperties.POSITION_TRY_FALLBACKS;
+  }
+
+  override matches(node: CodeMirror.SyntaxNode, matching: BottomUpTreeMatching): Match|null {
+    if (node.name !== 'Declaration') {
+      return null;
+    }
+
+    let preamble: CodeMirror.SyntaxNode[] = [];
+    const valueNodes = ASTUtils.siblings(ASTUtils.declValue(node));
+    const fallbacks = ASTUtils.split(valueNodes);
+    if (matching.ast.propertyName === LinkableNameProperties.POSITION_TRY) {
+      for (const [i, n] of fallbacks[0].entries()) {
+        const computedText = matching.getComputedText(n);
+        if (SDK.CSSMetadata.CSSMetadata.isCSSWideKeyword(computedText)) {
+          return null;
+        }
+        if (SDK.CSSMetadata.CSSMetadata.isPositionTryOrderKeyword(computedText)) {
+          preamble = fallbacks[0].splice(0, i + 1);
+          break;
+        }
+      }
+    }
+
+    const valueText = matching.ast.textRange(valueNodes[0], valueNodes[valueNodes.length - 1]);
+    return new PositionTryMatch(valueText, node, preamble, fallbacks);
+  }
+}

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -6,9 +6,9 @@ import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {type StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 type PropertySelectedEvent = ElementsComponents.StylePropertyEditor.PropertySelectedEvent;
 type PropertyDeselectedEvent = ElementsComponents.StylePropertyEditor.PropertyDeselectedEvent;

package/front_end/panels/elements/StylePropertiesSection.test.ts

@@ -76,6 +76,7 @@ function setUpStyles(
     propertyRules: [],
     cssPropertyRegistrations: [],
     fontPaletteValuesRule: undefined,
+    activePositionFallbackIndex: -1,
     ...payload,
   });
 }

package/front_end/panels/elements/StylePropertyHighlighter.test.ts

@@ -33,6 +33,7 @@ describeWithMockConnection('StylePropertyHighlighter', () => {
       propertyRules: [],
       cssPropertyRegistrations: [],
       fontPaletteValuesRule: undefined,
+      activePositionFallbackIndex: -1,
     });
     return {
       stylesSidebarPane,

package/front_end/panels/elements/StylePropertyHighlighter.ts

@@ -5,9 +5,9 @@
 import type * as SDK from '../../core/sdk/sdk.js';
 import {PanelUtils} from '../utils/utils.js';
 
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {StylePropertyTreeElement} from './StylePropertyTreeElement.js';
-import {type StylesSidebarPane} from './StylesSidebarPane.js';
+import type {StylesSidebarPane} from './StylesSidebarPane.js';
 
 export class StylePropertyHighlighter {
   private readonly styleSidebarPane: StylesSidebarPane;