chrome-devtools-frontend 1.0.1543472 → 1.0.1545096

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/common/BadgeNotification.ts

@@ -7,6 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -290,7 +291,7 @@ export class BadgeNotification extends UI.Widget.Widget {
           label: i18nString(UIStrings.viewProfile),
           jslogContext: 'view-profile',
           onClick: () => {
-            UI.UIUtils.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
+            UIHelpers.openInNewTab(Host.GdpClient.GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK);
           }
         }
       ],

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

@@ -21,10 +21,15 @@ 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 {
+export interface Options {
+  tooltip?: string;
+  preventKeyboardFocus?: boolean;
+  textContent?: string;
+  // Dynamic links include hyperlinks and anchorlinks -- links that navigate the content.
+  isDynamicLink?: boolean;
   hiddenClassList?: string[];
   disabled?: boolean;
 }
@@ -236,7 +241,7 @@ export class DeferredDOMNodeLink extends UI.Widget.Widget {
 
 let linkifierInstance: Linkifier;
 
-export class Linkifier implements Common.Linkifier.Linkifier {
+export class Linkifier {
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): Linkifier {
@@ -247,15 +252,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/GdpSignUpDialog.ts

@@ -12,6 +12,7 @@ import * as Geometry from '../../models/geometry/geometry.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import type * as Switch from '../../ui/components/switch/switch.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
@@ -168,7 +169,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
           .title=${i18nString(UIStrings.learnMoreAccessibleText)}
           .variant=${Buttons.Button.Variant.OUTLINED}
           .jslogContext=${'learn-more'}
-          @click=${() => UI.UIUtils.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
+          @click=${() => UIHelpers.openInNewTab(GDP_PROGRAM_URL as Platform.DevToolsPath.UrlString)}>${i18nString(UIStrings.learnMore)}</devtools-button>
         <div class="right-buttons">
           <devtools-button
             .variant=${Buttons.Button.Variant.TONAL}

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/ConsoleViewMessage.ts

@@ -843,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);
@@ -1889,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;

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/ElementStatePaneWidget.ts

@@ -5,6 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render, type TemplateResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -108,7 +109,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             jslog=${VisualLogging.toggle('emulate-page-focus').track({change: true})} ${bindToSetting('emulate-page-focus')}>${
           i18nString(UIStrings.emulateFocusedPage)}</devtools-checkbox>
         <devtools-button
-            @click=${() => UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}
+            @click=${() => UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page')}
            .data=${{
               variant: Buttons.Button.Variant.ICON,
               iconName: 'help',

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 = 1;
+    }
+  }
+
+  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,
     };

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -49,6 +49,7 @@ import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_e
 import * 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 * as ElementsComponents from './components/components.js';
 import type {ComputedStyleModel, CSSModelChangedEvent} from './ComputedStyleModel.js';
@@ -58,8 +59,8 @@ import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import * as LayersWidget from './LayersWidget.js';
 import {StyleEditorWidget} from './StyleEditorWidget.js';
 import {
+  AtRuleSection,
   BlankStylePropertiesSection,
-  FontPaletteValuesRuleSection,
   FunctionRuleSection,
   HighlightPseudoStylePropertiesSection,
   KeyframePropertiesSection,
@@ -139,6 +140,8 @@ const MIN_FOLDED_SECTIONS_COUNT = 5;
 export const REGISTERED_PROPERTY_SECTION_NAME = '@property';
 /** Title of the function section **/
 export const FUNCTION_SECTION_NAME = '@function';
+/** Title of the general at-rule section */
+export const AT_RULE_SECTION_NAME = '@font-*';
 
 // Highlightable properties are those that can be hovered in the sidebar to trigger a specific
 // highlighting mode on the current element.
@@ -354,6 +357,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     this.jumpToSection(functionName, FUNCTION_SECTION_NAME);
   }
 
+  jumpToFontPaletteDefinition(paletteName: string): void {
+    this.jumpToSection(`@font-palette-values ${paletteName}`, AT_RULE_SECTION_NAME);
+  }
+
   forceUpdate(): void {
     this.needsForceUpdate = true;
     this.#swatchPopoverHelper.hide();
@@ -1153,14 +1160,16 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
       blocks.push(block);
     }
 
-    const fontPaletteValuesRule = matchedStyles.fontPaletteValuesRule();
-    if (fontPaletteValuesRule) {
-      const block = SectionBlock.createFontPaletteValuesRuleBlock(fontPaletteValuesRule.name().text);
-      this.idleCallbackManager.schedule(() => {
-        block.sections.push(
-            new FontPaletteValuesRuleSection(this, matchedStyles, fontPaletteValuesRule.style, sectionIdx));
-        sectionIdx++;
-      });
+    const atRules = matchedStyles.atRules();
+    if (atRules.length > 0) {
+      const expandedByDefault = atRules.length <= MIN_FOLDED_SECTIONS_COUNT;
+      const block = SectionBlock.createAtRuleBlock(expandedByDefault);
+      for (const atRule of atRules) {
+        this.idleCallbackManager.schedule(() => {
+          block.sections.push(new AtRuleSection(this, matchedStyles, atRule.style, sectionIdx, expandedByDefault));
+          sectionIdx++;
+        });
+      }
       blocks.push(block);
     }
 
@@ -1543,7 +1552,7 @@ export class SectionBlock {
     const pseudoArgumentString = pseudoArgument ? `(${pseudoArgument})` : '';
     const pseudoTypeString = `${pseudoType}${pseudoArgumentString}`;
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFromSPseudoOf, {PH1: pseudoTypeString}));
-    const link = await Common.Linkifier.Linkifier.linkify(node, {
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       preventKeyboardFocus: true,
       tooltip: undefined,
     });
@@ -1575,11 +1584,12 @@ export class SectionBlock {
     return new SectionBlock(separatorElement);
   }
 
-  static createFontPaletteValuesRuleBlock(name: string): SectionBlock {
+  static createAtRuleBlock(expandedByDefault: boolean): SectionBlock {
     const separatorElement = document.createElement('div');
+    const block = new SectionBlock(separatorElement, true, expandedByDefault);
     separatorElement.className = 'sidebar-separator';
-    separatorElement.textContent = `@font-palette-values ${name}`;
-    return new SectionBlock(separatorElement);
+    separatorElement.appendChild(document.createTextNode(AT_RULE_SECTION_NAME));
+    return block;
   }
 
   static createPositionTryBlock(positionTryName: string): SectionBlock {
@@ -1595,7 +1605,7 @@ export class SectionBlock {
     separatorElement.className = 'sidebar-separator';
     separatorElement.setAttribute('jslog', `${VisualLogging.sectionHeader('inherited')}`);
     UI.UIUtils.createTextChild(separatorElement, i18nString(UIStrings.inheritedFroms));
-    const link = await Common.Linkifier.Linkifier.linkify(node, {
+    const link = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node, {
       preventKeyboardFocus: true,
       tooltip: undefined,
     });

package/front_end/panels/elements/elements-meta.ts

@@ -689,16 +689,3 @@ UI.UIUtils.registerRenderer({
     return Elements.ElementsTreeOutlineRenderer.Renderer.instance();
   },
 });
-
-Common.Linkifier.registerLinkifier({
-  contextTypes() {
-    return [
-      SDK.DOMModel.DOMNode,
-      SDK.DOMModel.DeferredDOMNode,
-    ];
-  },
-  async loadLinkifier() {
-    const Elements = await loadElementsModule();
-    return Elements.DOMLinkifier.Linkifier.instance();
-  },
-});

package/front_end/panels/elements/elements.ts

@@ -5,7 +5,6 @@
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
 import './ComputedStyleModel.js';
-import './DOMLinkifier.js';
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
@@ -37,7 +36,6 @@ import * as ComputedStyleModel from './ComputedStyleModel.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
 import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
-import * as DOMLinkifier from './DOMLinkifier.js';
 import * as DOMPath from './DOMPath.js';
 import * as ElementsPanel from './ElementsPanel.js';
 import * as ElementsSidebarPane from './ElementsSidebarPane.js';
@@ -73,7 +71,6 @@ export {
   ComputedStyleWidget,
   CSSRuleValidator,
   CSSValueTraceView,
-  DOMLinkifier,
   DOMPath,
   ElementsPanel,
   ElementsSidebarPane,