chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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/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,
@@ -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();
     }
   }
 

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);
@@ -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;

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

@@ -295,8 +295,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     const {valueElement} = stylePropertyTreeElement;
     assert.exists(valueElement);
 
-    const swatch = valueElement.querySelector<InlineEditor.ColorSwatch.ColorSwatch>(
-        `${InlineEditor.ColorSwatch.ColorSwatch.litTagName.value}`);
+    const swatch = valueElement.querySelector<InlineEditor.ColorSwatch.ColorSwatch>('devtools-color-swatch');
 
     assert.exists(swatch);
 
@@ -648,6 +647,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       positionTryRules: [],
       propertyRules: [],
       cssPropertyRegistrations: [],
+      activePositionFallbackIndex: -1,
       fontPaletteValuesRule: undefined,
     });
   }
@@ -1477,7 +1477,7 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
   });
 
   describe('LengthRenderer', () => {
-    it('renders the length too', () => {
+    it('renders the length tool', () => {
       const stylePropertyTreeElement = getTreeElement('width', '100px');
       stylePropertyTreeElement.updateTitle();
       const swatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-css-length');
@@ -1530,6 +1530,39 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
     });
   });
 
+  describe('PositionTryRenderer', () => {
+    it('renders the position-try fallback values with correct styles', () => {
+      mockMatchedStyles.activePositionFallbackIndex.returns(1);
+      mockMatchedStyles.positionTryRules.returns([]);
+      const stylePropertyTreeElement = getTreeElement('position-try-fallbacks', '--top, --left, --bottom');
+      stylePropertyTreeElement.updateTitle();
+      const values =
+          stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span') as NodeListOf<HTMLElement>|
+          undefined;
+      assert.exists(values);
+      assert.strictEqual(values?.length, 3);
+      assert.strictEqual(values[0].style.textDecoration, 'line-through');
+      assert.strictEqual(values[1].style.textDecoration, '');
+      assert.strictEqual(values[2].style.textDecoration, 'line-through');
+    });
+
+    it('renders the position-try correctly with keyword', () => {
+      mockMatchedStyles.activePositionFallbackIndex.returns(1);
+      mockMatchedStyles.positionTryRules.returns([]);
+      const stylePropertyTreeElement =
+          getTreeElement('position-try', '/* comment */ most-height --top, --left, --bottom');
+      stylePropertyTreeElement.updateTitle();
+      const values =
+          stylePropertyTreeElement.valueElement?.querySelectorAll(':scope > span') as NodeListOf<HTMLElement>|
+          undefined;
+      assert.exists(values);
+      assert.strictEqual(values?.length, 3);
+      assert.strictEqual(values[0].style.textDecoration, 'line-through');
+      assert.strictEqual(values[1].style.textDecoration, '');
+      assert.strictEqual(values[2].style.textDecoration, 'line-through');
+    });
+  });
+
   describe('Autocompletion', function(this: Mocha.Suite) {
     let promptStub: sinon.SinonStub<Parameters<Elements.StylesSidebarPane.CSSPropertyPrompt['initialize']>>;
     beforeEach(async () => {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -40,6 +40,8 @@ import {
   ColorMixMatcher,
   type CSSWideKeywordMatch,
   CSSWideKeywordMatcher,
+  type FlexGridMatch,
+  FlexGridMatcher,
   type FontMatch,
   FontMatcher,
   type GridTemplateMatch,
@@ -55,13 +57,15 @@ import {
   LinkableNameProperties,
   type PositionAnchorMatch,
   PositionAnchorMatcher,
+  type PositionTryMatch,
+  PositionTryMatcher,
   type ShadowMatch,
   ShadowMatcher,
   ShadowType,
 } from './PropertyMatchers.js';
 import {type MatchRenderer, Renderer, RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
-import {type StylePropertiesSection} from './StylePropertiesSection.js';
+import type {StylePropertiesSection} from './StylePropertiesSection.js';
 import {getCssDeclarationAsJavascriptProperty} from './StylePropertyUtils.js';
 import {
   CSSPropertyPrompt,
@@ -153,6 +157,37 @@ interface StylePropertyTreeElementParams {
   newProperty: boolean;
 }
 
+export class FlexGridRenderer implements MatchRenderer<FlexGridMatch> {
+  #treeElement: StylePropertyTreeElement;
+  constructor(treeElement: StylePropertyTreeElement) {
+    this.#treeElement = treeElement;
+  }
+
+  matcher(): SDK.CSSPropertyParser.Matcher<FlexGridMatch> {
+    return new FlexGridMatcher();
+  }
+
+  render(match: FlexGridMatch, context: RenderingContext): Node[] {
+    const key =
+        `${this.#treeElement.section().getSectionIdx()}_${this.#treeElement.section().nextEditorTriggerButtonIdx}`;
+    const button = StyleEditorWidget.createTriggerButton(
+        this.#treeElement.parentPane(), this.#treeElement.section(), match.isFlex ? FlexboxEditor : GridEditor,
+        match.isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
+    button.setAttribute(
+        'jslog', `${VisualLogging.showStyleEditor().track({click: true}).context(match.isFlex ? 'flex' : 'grid')}`);
+    this.#treeElement.section().nextEditorTriggerButtonIdx++;
+    button.addEventListener('click', () => {
+      Host.userMetrics.swatchActivated(
+          match.isFlex ? Host.UserMetrics.SwatchType.FLEX : Host.UserMetrics.SwatchType.GRID);
+    });
+    const helper = this.#treeElement.parentPane().swatchPopoverHelper();
+    if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
+      helper.setAnchorElement(button);
+    }
+    return [...Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context).nodes, button];
+  }
+}
+
 export class CSSWideKeywordRenderer implements MatchRenderer<CSSWideKeywordMatch> {
   #treeElement: StylePropertyTreeElement;
   constructor(treeElement: StylePropertyTreeElement) {
@@ -680,7 +715,7 @@ export class LinkableNameRenderer implements MatchRenderer<LinkableNameMatch> {
 
   #getLinkData(match: LinkableNameMatch):
       {jslogContext: string, metric: null|Host.UserMetrics.SwatchType, ruleBlock: string, isDefined: boolean} {
-    switch (match.properyName) {
+    switch (match.propertyName) {
       case LinkableNameProperties.ANIMATION:
       case LinkableNameProperties.ANIMATION_NAME:
         return {
@@ -1227,6 +1262,39 @@ export class PositionAnchorRenderer implements MatchRenderer<PositionAnchorMatch
   }
 }
 
+export class PositionTryRenderer implements MatchRenderer<PositionTryMatch> {
+  #treeElement: StylePropertyTreeElement;
+
+  constructor(treeElement: StylePropertyTreeElement) {
+    this.#treeElement = treeElement;
+  }
+
+  render(match: PositionTryMatch, context: RenderingContext): Node[] {
+    const content = [];
+    if (match.preamble.length > 0) {
+      const {nodes} = Renderer.render(match.preamble, context);
+      content.push(...nodes);
+    }
+    for (const [i, fallback] of match.fallbacks.entries()) {
+      const fallbackContent = document.createElement('span');
+      if (i > 0) {
+        fallbackContent.appendChild(document.createTextNode(', '));
+      }
+      if (i !== this.#treeElement.matchedStyles().activePositionFallbackIndex()) {
+        fallbackContent.style.textDecoration = 'line-through';
+      }
+      Renderer.renderInto(fallback, context, fallbackContent);
+
+      content.push(fallbackContent);
+    }
+    return content;
+  }
+
+  matcher(): PositionTryMatcher {
+    return new PositionTryMatcher();
+  }
+}
+
 export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private readonly style: SDK.CSSStyleDeclaration.CSSStyleDeclaration;
   private matchedStylesInternal: SDK.CSSMatchedStyles.CSSMatchedStyles;
@@ -1653,6 +1721,8 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
           new LinearGradientRenderer(),
           new AnchorFunctionRenderer(this),
           new PositionAnchorRenderer(this),
+          new FlexGridRenderer(this),
+          new PositionTryRenderer(this),
           new FontRenderer(this),
         ] :
         [];
@@ -1701,30 +1771,6 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       }
     }
 
-    if (this.valueElement && this.#parentSection.editable && this.property.name === 'display') {
-      const propertyValue = this.property.trimmedValueWithoutImportant();
-      const isFlex = propertyValue === 'flex' || propertyValue === 'inline-flex';
-      const isGrid = propertyValue === 'grid' || propertyValue === 'inline-grid';
-      if (isFlex || isGrid) {
-        const key = `${this.#parentSection.getSectionIdx()}_${this.#parentSection.nextEditorTriggerButtonIdx}`;
-        const button = StyleEditorWidget.createTriggerButton(
-            this.parentPaneInternal, this.#parentSection, isFlex ? FlexboxEditor : GridEditor,
-            isFlex ? i18nString(UIStrings.flexboxEditorButton) : i18nString(UIStrings.gridEditorButton), key);
-        button.setAttribute(
-            'jslog', `${VisualLogging.showStyleEditor().track({click: true}).context(isFlex ? 'flex' : 'grid')}`);
-        this.#parentSection.nextEditorTriggerButtonIdx++;
-        button.addEventListener('click', () => {
-          Host.userMetrics.swatchActivated(
-              isFlex ? Host.UserMetrics.SwatchType.FLEX : Host.UserMetrics.SwatchType.GRID);
-        });
-        this.listItemElement.appendChild(button);
-        const helper = this.parentPaneInternal.swatchPopoverHelper();
-        if (helper.isShowing(StyleEditorWidget.instance()) && StyleEditorWidget.instance().getTriggerKey() === key) {
-          helper.setAnchorElement(button);
-        }
-      }
-    }
-
     if (this.property.parsedOk) {
       this.updateAuthoringHint();
     } else {

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

@@ -73,6 +73,7 @@ describe('StylesSidebarPane', () => {
           propertyRules: [],
           cssPropertyRegistrations: [],
           fontPaletteValuesRule: undefined,
+          activePositionFallbackIndex: -1,
         });
 
         const sectionBlocks =
@@ -99,6 +100,7 @@ describe('StylesSidebarPane', () => {
         animationsPayload: [],
         parentLayoutNodeId: undefined,
         positionTryRules: [],
+        activePositionFallbackIndex: -1,
         propertyRules: [],
         cssPropertyRegistrations: [],
         fontPaletteValuesRule: {

package/front_end/panels/elements/TopLayerContainer.ts

@@ -8,10 +8,9 @@ import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
+import type {ElementsTreeElement} from './ElementsTreeElement.js';
 import * as ElementsTreeOutline from './ElementsTreeOutline.js';
 
-import {type ElementsTreeElement} from './ElementsTreeElement.js';
-
 const UIStrings = {
   /**
    *@description Link text content in Elements Tree Outline of the Elements panel. When clicked, it "reveals" the true location of an element.

package/front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -11,6 +11,8 @@ import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import accessibilityTreeNodeStyles from './accessibilityTreeNode.css.js';
 
+const {html} = LitHtml;
+
 const UIStrings = {
   /**
    *@description Ignored node element text content in Accessibility Tree View of the Elements panel
@@ -52,7 +54,6 @@ export interface AccessibilityTreeNodeData {
 }
 
 export class AccessibilityTreeNode extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-accessibility-tree-node`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #ignored = true;
@@ -75,20 +76,20 @@ export class AccessibilityTreeNode extends HTMLElement {
   }
 
   async #render(): Promise<void> {
-    const role = LitHtml.html`<span class='role-value'>${truncateTextIfNeeded(this.#role)}</span>`;
-    const name = LitHtml.html`"<span class='attribute-value'>${this.#name}</span>"`;
+    const role = html`<span class='role-value'>${truncateTextIfNeeded(this.#role)}</span>`;
+    const name = html`"<span class='attribute-value'>${this.#name}</span>"`;
     const properties = this.#properties.map(
         ({name, value}) => isPrintable(value.type) ?
-            LitHtml.html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
+            html` <span class='attribute-name'>${name}</span>:&nbsp;<span class='attribute-value'>${
                 value.value}</span>` :
             LitHtml.nothing);
-    const content = this.#ignored ? LitHtml.html`<span>${i18nString(UIStrings.ignored)}</span>` :
-                                    LitHtml.html`${role}&nbsp;${name}${properties}`;
+    const content =
+        this.#ignored ? html`<span>${i18nString(UIStrings.ignored)}</span>` : html`${role}&nbsp;${name}${properties}`;
     await Coordinator.RenderCoordinator.RenderCoordinator.instance().write(
         `Accessibility node ${this.#id} render`, () => {
           // clang-format off
       LitHtml.render(
-        LitHtml.html`<div class='container'>${content}</div>`,
+        html`<div class='container'>${content}</div>`,
         this.#shadow,
         {host: this});
           // clang-format on