chrome-devtools-frontend 1.0.1543082 → 1.0.1544076

package/front_end/panels/application/components/ReportsGrid.ts

@@ -108,8 +108,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
           <span class="empty-state-header">${i18nString(UIStrings.noReportsToDisplay)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.reportingApiDescription)}</span>
-            ${UI.XLink.XLink.create(REPORTING_API_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined,
-              undefined, 'learn-more')}
+            <x-link
+              class="devtools-link"
+              href=${REPORTING_API_EXPLANATION_URL}
+              jslog=${VisualLogging.link()
+                      .track({ click: true, keydown: 'Enter|Space' })
+                      .context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       `}

package/front_end/panels/application/components/SharedStorageAccessGrid.ts

@@ -97,9 +97,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           <div class="empty-state-header">${i18nString(UIStrings.noEvents)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.sharedStorageDescription)}</span>
-            ${
-          UI.XLink.XLink.create(
-              SHARED_STORAGE_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SHARED_STORAGE_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>`
       : html`

package/front_end/panels/application/components/TrustTokensView.ts

@@ -115,7 +115,13 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
           <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-            ${UI.XLink.XLink.create(PRIVATE_STATE_TOKENS_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
+              jslog=${VisualLogging.link()
+                      .track({ click: true, keydown: 'Enter|Space' })
+                      .context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
       `;

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -245,7 +245,11 @@ export class PreloadingRuleSetView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noRulesDetected)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.rulesDescription)}</span>
-            ${UI.XLink.XLink.create(SPECULATION_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SPECULATION_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">
@@ -402,9 +406,11 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
           <span class="empty-state-header">${i18nString(UIStrings.noPrefetchAttempts)}</span>
           <div class="empty-state-description">
             <span>${i18nString(UIStrings.prefetchDescription)}</span>
-            ${
-            UI.XLink.XLink.create(
-                SPECULATION_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+            <x-link
+              class="x-link devtools-link"
+              href=${SPECULATION_EXPLANATION_URL}
+              jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+            >${i18nString(UIStrings.learnMore)}</x-link>
           </div>
         </div>
         <devtools-split-view sidebar-position="second">

package/front_end/panels/application/preloading/components/PreloadingDisabledInfobar.ts

@@ -14,7 +14,7 @@ import * as Dialogs from '../../../../ui/components/dialogs/dialogs.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
-import * as UI from '../../../../ui/legacy/legacy.js';
+import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 
@@ -98,6 +98,8 @@ const str_ =
     i18n.i18n.registerUIStrings('panels/application/preloading/components/PreloadingDisabledInfobar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+const LINK = 'https://developer.chrome.com/blog/prerender-pages/';
+
 export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.WrappableComponent<UI.Widget.VBox> {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #data: Protocol.Preload.PreloadEnabledStateUpdatedEvent = {
@@ -168,14 +170,6 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
   }
 
   #dialogContents(): Lit.LitTemplate {
-    const LINK = 'https://developer.chrome.com/blog/prerender-pages/';
-
-    const learnMoreLink =
-        UI.XLink.XLink.create(LINK, i18nString(UIStrings.footerLearnMore), undefined, undefined, 'learn-more');
-    const iconLink = UI.Fragment.html`
-      <x-link class="icon-link devtools-link" tabindex="0" href="${LINK}"></x-link>
-    ` as UI.XLink.XLink;
-
     return html`
       <div id='contents'>
         <devtools-report>
@@ -186,8 +180,10 @@ export class PreloadingDisabledInfobar extends LegacyWrapper.LegacyWrapper.Wrapp
           ${this.#maybeDisableByHoldbackPrerenderSpeculationRules()}
         </devtools-report>
         <div id='footer'>
-          ${learnMoreLink}
-          ${iconLink}
+          <x-link class="devtools-link" tabindex="0" href=${LINK} 
+          jslog=${VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context('learn-more')}
+          >${i18nString(UIStrings.footerLearnMore)}</x-link>
+          <x-link class="icon-link devtools-link" tabindex="0" href=${LINK}></x-link>
         </div>
       </div>
     `;

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -16,7 +16,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as LegacyWrapper from '../../../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as RenderCoordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import * as UI from '../../../../ui/legacy/legacy.js';
+import type * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
 import * as PreloadingHelper from '../helper/helper.js';
@@ -176,7 +176,13 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
         <devtools-report-divider></devtools-report-divider>
 
         <devtools-report-section>
-          ${UI.XLink.XLink.create('https://developer.chrome.com/blog/prerender-pages/', i18nString(UIStrings.learnMore), 'link', undefined, 'learn-more')}
+          <x-link
+            class="link devtools-link"
+            href=${'https://developer.chrome.com/blog/prerender-pages/'}
+            jslog=${VisualLogging.link()
+                    .track({ click: true, keydown: 'Enter|Space' })
+                    .context('learn-more')}
+          >${i18nString(UIStrings.learnMore)}</x-link>
         </devtools-report-section>
       </devtools-report>
     `;
@@ -319,7 +325,13 @@ export class UsedPreloadingView extends LegacyWrapper.LegacyWrapper.WrappableCom
     return html`
       <devtools-report-section-header>${i18nString(UIStrings.currentURL)}</devtools-report-section-header>
       <devtools-report-section>
-        ${UI.XLink.XLink.create(this.#data.pageURL, undefined, 'link', undefined, 'current-url')}
+        <x-link
+          class="link devtools-link"
+          href=${this.#data.pageURL}
+          jslog=${VisualLogging.link()
+                  .track({ click: true, keydown: 'Enter|Space' })
+                  .context('current-url')}
+        >${this.#data.pageURL}</x-link>
       </devtools-report-section>
 
       <devtools-report-section-header>${i18nString(UIStrings.preloadedURLs)}</devtools-report-section-header>

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -11,6 +11,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 import * as Sources from '../sources/sources.js';
 
 import domBreakpointsSidebarPaneStyles from './domBreakpointsSidebarPane.css.js';
@@ -203,19 +204,17 @@ export class DOMBreakpointsSidebarPane extends UI.Widget.VBox implements
     const linkifiedNode = document.createElement('monospace');
     linkifiedNode.style.display = 'block';
     labelElement.appendChild(linkifiedNode);
-    void Common.Linkifier.Linkifier.linkify(item.node, {preventKeyboardFocus: true, tooltip: undefined})
-        .then(linkified => {
-          linkifiedNode.appendChild(linkified);
-          // Give the checkbox an aria-label as it is required for all form element
-          UI.ARIAUtils.setLabel(
-              checkbox, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
-          // The parent list element is the one that actually gets focused.
-          // Assign it an aria-label with complete information for the screen reader to read out properly
-          UI.ARIAUtils.setLabel(
-              element,
-              i18nString(
-                  UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText}));
-        });
+    const linkified = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(
+        item.node, {preventKeyboardFocus: true, tooltip: undefined});
+    linkifiedNode.appendChild(linkified);
+    // Give the checkbox an aria-label as it is required for all form element
+    UI.ARIAUtils.setLabel(
+        checkbox, i18nString(UIStrings.sS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent()}));
+    // The parent list element is the one that actually gets focused.
+    // Assign it an aria-label with complete information for the screen reader to read out properly
+    UI.ARIAUtils.setLabel(
+        element,
+        i18nString(UIStrings.sSS, {PH1: breakpointTypeText, PH2: linkified.deepTextContent(), PH3: checkedStateText}));
 
     labelElement.appendChild(description);
 

package/front_end/panels/{elements → common}/DOMLinkifier.ts

@@ -21,7 +21,7 @@ const UIStrings = {
    */
   node: '<node>',
 } as const;
-const str_ = i18n.i18n.registerUIStrings('panels/elements/DOMLinkifier.ts', UIStrings);
+const str_ = i18n.i18n.registerUIStrings('panels/common/DOMLinkifier.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export interface Options extends Common.Linkifier.Options {
@@ -247,15 +247,15 @@ export class Linkifier implements Common.Linkifier.Linkifier {
 
     return linkifierInstance;
   }
-  linkify(object: Object, options?: Options): Node {
-    if (object instanceof SDK.DOMModel.DOMNode) {
+  linkify(node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode, options?: Options): HTMLElement {
+    if (node instanceof SDK.DOMModel.DOMNode) {
       const link = document.createElement('devtools-widget') as UI.Widget.WidgetElement<DOMNodeLink>;
-      link.widgetConfig = UI.Widget.widgetConfig(e => new DOMNodeLink(e, object, options));
+      link.widgetConfig = UI.Widget.widgetConfig(e => new DOMNodeLink(e, node, options));
       return link;
     }
-    if (object instanceof SDK.DOMModel.DeferredDOMNode) {
+    if (node instanceof SDK.DOMModel.DeferredDOMNode) {
       const link = document.createElement('devtools-widget') as UI.Widget.WidgetElement<DeferredDOMNodeLink>;
-      link.widgetConfig = UI.Widget.widgetConfig(e => new DeferredDOMNodeLink(e, object, options));
+      link.widgetConfig = UI.Widget.widgetConfig(e => new DeferredDOMNodeLink(e, node, options));
       return link;
     }
     throw new Error('Can\'t linkify non-node');

package/front_end/panels/common/common.ts

@@ -104,3 +104,4 @@ export * as ExtensionPanel from './ExtensionPanel.js';
 export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';
 export * as PersistenceUtils from './PersistenceUtils.js';
+export * as DOMLinkifier from './DOMLinkifier.js';

package/front_end/panels/console/ConsoleView.ts

@@ -1324,7 +1324,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
     this.updateFilterStatus();
     this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
-    this.jumpToMatch(this.currentMatchRangeIndex);  // Re-highlight current match.
+    this.highlightMatch(this.currentMatchRangeIndex, false);  // Re-highlight current match without scrolling.
     this.viewport.invalidate();
     this.messagesCountElement.setAttribute(
         'aria-label', i18nString(UIStrings.filteredMessagesInConsole, {PH1: this.visibleViewMessages.length}));
@@ -1564,7 +1564,7 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     this.#searchableView.updateSearchMatchesCount(this.regexMatchRanges.length);
     if (typeof this.searchShouldJumpBackwards !== 'undefined' && this.regexMatchRanges.length) {
-      this.jumpToMatch(this.searchShouldJumpBackwards ? -1 : 0);
+      this.highlightMatch(this.searchShouldJumpBackwards ? -1 : 0);
       delete this.searchShouldJumpBackwards;
     }
 
@@ -1589,11 +1589,11 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   jumpToNextSearchResult(): void {
-    this.jumpToMatch(this.currentMatchRangeIndex + 1);
+    this.highlightMatch(this.currentMatchRangeIndex + 1);
   }
 
   jumpToPreviousSearchResult(): void {
-    this.jumpToMatch(this.currentMatchRangeIndex - 1);
+    this.highlightMatch(this.currentMatchRangeIndex - 1);
   }
 
   supportsCaseSensitiveSearch(): boolean {
@@ -1608,7 +1608,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     return true;
   }
 
-  private jumpToMatch(index: number): void {
+  private highlightMatch(index: number, scrollIntoView = true): void {
     if (!this.regexMatchRanges.length) {
       return;
     }
@@ -1628,8 +1628,10 @@ export class ConsoleView extends UI.Widget.VBox implements
     const message = this.visibleViewMessages[matchRange.messageIndex];
     const highlightNode = message.searchHighlightNode(matchRange.matchIndex);
     highlightNode.classList.add(UI.UIUtils.highlightedCurrentSearchResultClassName);
-    this.viewport.scrollItemIntoView(matchRange.messageIndex);
-    highlightNode.scrollIntoViewIfNeeded();
+    if (scrollIntoView) {
+      this.viewport.scrollItemIntoView(matchRange.messageIndex);
+      highlightNode.scrollIntoViewIfNeeded();
+    }
   }
 
   private updateStickToBottomOnPointerDown(isRightClick?: boolean): void {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -58,6 +58,7 @@ import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Security from '../security/security.js';
 
@@ -842,8 +843,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     const result = document.createElement('span');
     const description = obj.description || '';
     if (description.length > getMaxTokenizableStringLength()) {
-      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
-          document.createElement('span'), description, getLongStringVisibleLength());
+      const propertyValue =
+          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(description, getLongStringVisibleLength());
       result.appendChild(propertyValue.element);
     } else {
       UI.UIUtils.createTextChild(result, description);
@@ -867,7 +868,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     titleElement.classList.add('console-object');
     if (includePreview && obj.preview) {
       titleElement.classList.add('console-object-preview');
-      this.previewFormatter.appendObjectPreview(titleElement, obj.preview, false /* isEntry */);
+      /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+      render(this.previewFormatter.renderObjectPreview(obj.preview), titleElement);
       ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.appendMemoryIcon(titleElement, obj);
     } else if (obj.type === 'function') {
       const functionElement = titleElement.createChild('span');
@@ -935,11 +937,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected renderPropertyPreviewOrAccessor(
       object: SDK.RemoteObject.RemoteObject|null, property: Protocol.Runtime.PropertyPreview, propertyPath: Array<{
         name: (string | symbol),
-      }>): HTMLElement {
+      }>): DocumentFragment|HTMLElement {
     if (property.type === 'accessor') {
       return this.formatAsAccessorProperty(object, propertyPath.map(property => property.name.toString()), false);
     }
-    return this.previewFormatter.renderPropertyPreview(
+    return this.renderPropertyPreview(
         property.type, 'subtype' in property ? property.subtype : undefined, null, property.value);
   }
 
@@ -1022,9 +1024,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return result;
   }
 
-  private formatAsArrayEntry(output: SDK.RemoteObject.RemoteObject): HTMLElement {
-    return this.previewFormatter.renderPropertyPreview(
-        output.type, output.subtype, output.className, output.description);
+  private formatAsArrayEntry(output: SDK.RemoteObject.RemoteObject): DocumentFragment {
+    return this.renderPropertyPreview(output.type, output.subtype, output.className, output.description);
+  }
+
+  private renderPropertyPreview(
+      type: string, subtype: string|undefined, className: string|null|undefined,
+      description: string|undefined): DocumentFragment {
+    const fragment = document.createDocumentFragment();
+    /* eslint-disable-next-line  @devtools/no-lit-render-outside-of-view */
+    render(this.previewFormatter.renderPropertyPreview(type, subtype, className, description), fragment);
+    return fragment;
   }
 
   private formatAsAccessorProperty(
@@ -1059,8 +1069,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
             description = Platform.StringUtilities.trimEndWithMaxLength(object.description, maxLength);
           }
         }
-        rootElement.appendChild(
-            this.previewFormatter.renderPropertyPreview(type, subtype, object.className, description));
+        rootElement.appendChild(this.renderPropertyPreview(type, subtype, object.className, description));
       }
     }
 
@@ -1880,8 +1889,8 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       linkifier: (arg0: string, arg1: Platform.DevToolsPath.UrlString, arg2?: number, arg3?: number) => Node):
       DocumentFragment {
     if (string.length > getMaxTokenizableStringLength()) {
-      const propertyValue = new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(
-          document.createElement('span'), string, getLongStringVisibleLength());
+      const propertyValue =
+          new ObjectUI.ObjectPropertiesSection.ExpandableTextPropertyValue(string, getLongStringVisibleLength());
       const fragment = document.createDocumentFragment();
       fragment.appendChild(propertyValue.element);
       return fragment;
@@ -2253,7 +2262,8 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
 
         if (columnRendered) {
           const cellElement =
-              this.renderPropertyPreviewOrAccessor(actualTable, cellProperty, [rowProperty, cellProperty]);
+              this.renderPropertyPreviewOrAccessor(actualTable, cellProperty, [rowProperty, cellProperty])
+                  .firstElementChild as HTMLElement;
           cellElement.classList.add('console-message-nowrap-below');
           rowValue.set(cellProperty.name, cellElement);
         }

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -17,6 +17,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type {GlobalStyleStats} from './CSSOverviewModel.js';
@@ -984,7 +985,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
       if ('nodeId' in item && visibility.has('node-id')) {
         const frontendNode = relatedNodesMap?.get(item.nodeId) ?? null;
         if (frontendNode) {
-          link = await Common.Linkifier.Linkifier.linkify(frontendNode) as HTMLElement;
+          link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(frontendNode);
           showNode = () => frontendNode.scrollIntoView();
         }
       }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -56,6 +56,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 import * as Emulation from '../emulation/emulation.js';
 import * as Media from '../media/media.js';
 
@@ -66,6 +67,7 @@ import {ElementsPanel} from './ElementsPanel.js';
 import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
+
 const {html, nothing, render, Directives: {ref, repeat}} = Lit;
 
 const UIStrings = {
@@ -2149,7 +2151,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (!relatedElement) {
       return;
     }
-    const link = await Common.Linkifier.Linkifier.linkify(relatedElement, {
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(relatedElement, {
       preventKeyboardFocus: true,
       tooltip,
       textContent: linkContainer.textContent || undefined,

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -49,10 +49,10 @@ import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import type * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import {FontEditorSectionManager} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
-import {DeferredDOMNodeLink} from './DOMLinkifier.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
 import {type Context, StylePropertyTreeElement} from './StylePropertyTreeElement.js';
@@ -402,8 +402,10 @@ export class StylePropertiesSection {
 
     function linkifyNode(label: string): Node|null {
       if (header?.ownerNode) {
-        const link = document.createElement('devtools-widget') as UI.Widget.WidgetElement<DeferredDOMNodeLink>;
-        link.widgetConfig = UI.Widget.widgetConfig(e => new DeferredDOMNodeLink(e, header.ownerNode));
+        const link = document.createElement('devtools-widget') as
+            UI.Widget.WidgetElement<PanelsCommon.DOMLinkifier.DeferredDOMNodeLink>;
+        link.widgetConfig =
+            UI.Widget.widgetConfig(e => new PanelsCommon.DOMLinkifier.DeferredDOMNodeLink(e, header.ownerNode));
         link.textContent = label;
         return link;
       }
@@ -633,6 +635,17 @@ export class StylePropertiesSection {
     if (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
       return this.styleInternal.parentRule.selectorText();
     }
+    if (this.styleInternal.parentRule instanceof SDK.CSSRule.CSSAtRule) {
+      if (this.styleInternal.parentRule.subsection()) {
+        return '@' + this.styleInternal.parentRule.subsection();
+      }
+      const atRule = '@' + this.styleInternal.parentRule.type();
+      const name = this.styleInternal.parentRule.name();
+      if (name) {
+        return atRule + ' ' + name.text;
+      }
+      return atRule;
+    }
     return '';
   }
 
@@ -813,11 +826,36 @@ export class StylePropertiesSection {
       // We reduce one level since no selector means one less pair of braces are added for declarations.
       this.nestingLevel--;
     }
+  }
+
+  protected createAtRuleAncestor(rule: SDK.CSSRule.CSSAtRule): void {
+    if (rule.subsection()) {
+      const atRuleElement = new ElementsComponents.CSSQuery.CSSQuery();
+      atRuleElement.data = {
+        queryPrefix: '@' + rule.type(),
+        queryText: rule.name()?.text ?? '',
+        jslogContext: 'at-rule-' + rule.type(),
+      };
 
-    let curNestingLevel = 0;
-    for (const element of this.#ancestorRuleListElement.children) {
-      this.indentElement(element as HTMLElement, curNestingLevel);
-      curNestingLevel++;
+      this.#ancestorRuleListElement.prepend(atRuleElement);
+      this.#ancestorClosingBracesElement.prepend(this.indentElement(this.createClosingBrace(), 0));
+      this.nestingLevel++;
+    }
+  }
+
+  protected maybeCreateAncestorRules(style: SDK.CSSStyleDeclaration.CSSStyleDeclaration): void {
+    if (style.parentRule) {
+      if (style.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
+        this.createAncestorRules(style.parentRule);
+      } else if (style.parentRule instanceof SDK.CSSRule.CSSAtRule) {
+        this.createAtRuleAncestor(style.parentRule);
+      }
+
+      let curNestingLevel = 0;
+      for (const element of this.#ancestorRuleListElement.children) {
+        this.indentElement(element as HTMLElement, curNestingLevel);
+        curNestingLevel++;
+      }
     }
   }
 
@@ -994,9 +1032,7 @@ export class StylePropertiesSection {
   private updateAncestorRuleList(): void {
     this.#ancestorRuleListElement.removeChildren();
     this.#ancestorClosingBracesElement.removeChildren();
-    if (this.styleInternal.parentRule && this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this.createAncestorRules(this.styleInternal.parentRule);
-    }
+    this.maybeCreateAncestorRules(this.styleInternal);
     this.#styleRuleElement.style.paddingLeft = `${this.nestingLevel}ch`;
   }
 
@@ -1640,9 +1676,7 @@ export class BlankStylePropertiesSection extends StylePropertiesSection {
     this.selectorRefElement.removeChildren();
     this.selectorRefElement.appendChild(StylePropertiesSection.linkifyRuleLocation(
         cssModel, this.parentPane.linkifier, styleSheetHeader, this.actualRuleLocation()));
-    if (insertAfterStyle?.parentRule && insertAfterStyle.parentRule instanceof SDK.CSSRule.CSSStyleRule) {
-      this.createAncestorRules(insertAfterStyle.parentRule);
-    }
+    this.maybeCreateAncestorRules(insertAfterStyle);
     this.element.classList.add('blank-section');
   }
 
@@ -1830,12 +1864,15 @@ export class FunctionRuleSection extends StylePropertiesSection {
   }
 }
 
-export class FontPaletteValuesRuleSection extends StylePropertiesSection {
+export class AtRuleSection extends StylePropertiesSection {
   constructor(
       stylesPane: StylesSidebarPane, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
-      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number) {
+      style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, expandedByDefault: boolean) {
     super(stylesPane, matchedStyles, style, sectionIdx, null, null);
     this.selectorElement.className = 'font-palette-values-key';
+    if (!expandedByDefault) {
+      this.element.classList.add('hidden');
+    }
   }
 }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1088,8 +1088,9 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
         return {
           jslogContext: 'css-font-palette',
           metric: null,
-          ruleBlock: '@font-palette-values',
-          isDefined: this.#matchedStyles.fontPaletteValuesRule()?.name().text === match.text,
+          ruleBlock: '@font-*',
+          isDefined: Boolean(this.#matchedStyles.atRules().find(
+              ar => ar.type() === 'font-palette-values' && ar.name()?.text === match.text)),
         };
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY:
       case SDK.CSSPropertyParserMatchers.LinkableNameProperties.POSITION_TRY_FALLBACKS:
@@ -1111,7 +1112,11 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
       isDefined,
       onLinkActivate: (): void => {
         metric && Host.userMetrics.swatchActivated(metric);
-        this.#stylesPane.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
+        if (match.propertyName === SDK.CSSPropertyParserMatchers.LinkableNameProperties.FONT_PALETTE) {
+          this.#stylesPane.jumpToFontPaletteDefinition(match.text);
+        } else {
+          this.#stylesPane.jumpToSectionBlock(`${ruleBlock} ${match.text}`);
+        }
       },
       jslogContext,
     };