chrome-devtools-frontend 1.0.1543472 → 1.0.1544076

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,
     };

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

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import type * as PanelsCommon from '../common/common.js';
 
 import type * as Elements from './elements.js';
 
@@ -177,6 +178,14 @@ function maybeRetrieveContextTypes<T = unknown>(getClassCallBack: (elementsModul
   return getClassCallBack(loadedElementsModule);
 }
 
+let loadedPanelsCommonModule: (typeof PanelsCommon|undefined);
+async function loadPanelsCommonModule(): Promise<typeof PanelsCommon> {
+  if (!loadedPanelsCommonModule) {
+    loadedPanelsCommonModule = await import('../common/common.js');
+  }
+  return loadedPanelsCommonModule;
+}
+
 UI.ViewManager.registerViewExtension({
   location: UI.ViewManager.ViewLocationValues.PANEL,
   id: 'elements',
@@ -698,7 +707,7 @@ Common.Linkifier.registerLinkifier({
     ];
   },
   async loadLinkifier() {
-    const Elements = await loadElementsModule();
-    return Elements.DOMLinkifier.Linkifier.instance();
+    const PanelsCommon = await loadPanelsCommonModule();
+    return PanelsCommon.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,

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -196,7 +196,7 @@ interface ViewInput {
   callbacks: {
     onClose: () => void,
     onSearch: () => void,
-    onRating: (event: Event) => void,
+    onRating: (isPositive: boolean) => void,
     onReport: () => void,
     onGoToSignIn: () => void,
     onConsentReminderConfirmed: () => Promise<void>,
@@ -209,6 +209,8 @@ interface ViewInput {
 
 interface ViewOutput {
   referenceDetailsRef: Lit.Directives.Ref<HTMLDetailsElement>;
+  headerRef: Lit.Directives.Ref<HTMLHeadingElement>;
+  citationLinks: HTMLElement[];
 }
 
 const enum State {
@@ -297,7 +299,7 @@ function renderLearnMoreAboutInsights(): Lit.TemplateResult {
   // clang-format on
 }
 
-function maybeRenderSources(directCitationUrls: string[]): Lit.LitTemplate {
+function maybeRenderSources(directCitationUrls: string[], output: ViewOutput): Lit.LitTemplate {
   if (!directCitationUrls.length) {
     return Lit.nothing;
   }
@@ -310,8 +312,8 @@ function maybeRenderSources(directCitationUrls: string[]): Lit.LitTemplate {
           <x-link
             href=${url}
             class="link"
-            data-index=${index + 1}
             jslog=${VisualLogging.link('references.console-insights').track({click: true})}
+            ${Directives.ref(e => { output.citationLinks[index] = e as HTMLElement; })}
           >
             ${url}
           </x-link>
@@ -376,7 +378,7 @@ function renderInsight(
         ${isSearchRagResponse(insight.metadata) ? html`
           <details class="references" ${Directives.ref(output.referenceDetailsRef)} @toggle=${callbacks.onToggleReferenceDetails} jslog=${VisualLogging.expand('references').track({click: true})}>
             <summary>${i18nString(UIStrings.references)}</summary>
-            ${maybeRenderSources(insight.directCitationUrls)}
+            ${maybeRenderSources(insight.directCitationUrls, output)}
             ${maybeRenderRelatedContent(insight.relatedUrls, insight.directCitationUrls)}
           </details>
         ` : Lit.nothing}
@@ -557,7 +559,7 @@ function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating:
       .toggled=${selectedRating === true}
       .title=${i18nString(UIStrings.goodResponse)}
       .jslogContext=${'thumbs-up'}
-      @click=${callbacks.onRating}
+      @click=${() => callbacks.onRating(true)}
     ></devtools-button>
     <devtools-button
       data-rating="false"
@@ -571,7 +573,7 @@ function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating:
       .toggled=${selectedRating === false}
       .title=${i18nString(UIStrings.badResponse)}
       .jslogContext=${'thumbs-down'}
-      @click=${callbacks.onRating}
+      @click=${() => callbacks.onRating(false)}
     ></devtools-button>
     <devtools-button
       .iconName=${'report'}
@@ -602,13 +604,15 @@ interface HeaderInput {
   onClose: ViewInput['callbacks']['onClose'];
 }
 
-function renderHeader({headerText, showIcon = false, showSpinner = false, onClose}: HeaderInput): Lit.LitTemplate {
+function renderHeader(
+    {headerText, showIcon = false, showSpinner = false, onClose}: HeaderInput,
+    headerRef: Lit.Directives.Ref<HTMLHeadingElement>): Lit.LitTemplate {
   // clang-format off
   return html`
     <header>
       ${showIcon ? renderHeaderIcon() : Lit.nothing}
       <div class="filler">
-        <h2 tabindex="-1">
+        <h2 tabindex="-1" ${Directives.ref(headerRef)}>
           ${headerText}
         </h2>
         ${showSpinner ? html`<devtools-spinner></devtools-spinner>` : Lit.nothing}
@@ -644,7 +648,9 @@ export class ConsoleInsight extends HTMLElement {
 
   // Main state.
   #state: StateData;
-  #referenceDetailsRef = Lit.Directives.createRef<HTMLDetailsElement>();
+  #referenceDetailsRef = Directives.createRef<HTMLDetailsElement>();
+  #headerRef = Directives.createRef<HTMLHeadingElement>();
+  #citationLinks: HTMLElement[] = [];
   #areReferenceDetailsOpen = false;
 
   // Rating sub-form state.
@@ -694,8 +700,7 @@ export class ConsoleInsight extends HTMLElement {
     this.#areReferenceDetailsOpen = true;
     this.#render();
 
-    const highlightedElement =
-        this.#shadow.querySelector(`.sources-list x-link[data-index="${index}"]`) as HTMLElement | null;
+    const highlightedElement = this.#citationLinks[index - 1];
     if (highlightedElement) {
       UI.UIUtils.runCSSAnimationOnce(highlightedElement, 'highlighted');
       if (areDetailsAlreadyExpanded) {
@@ -856,7 +861,7 @@ export class ConsoleInsight extends HTMLElement {
     this.classList.add('closing');
   }
 
-  #onRating(event: Event): void {
+  #onRating(isPositive: boolean): void {
     if (this.#state.type !== State.INSIGHT) {
       throw new Error('Unexpected state');
     }
@@ -868,7 +873,7 @@ export class ConsoleInsight extends HTMLElement {
       return;
     }
 
-    this.#selectedRating = (event.target as HTMLElement).dataset.rating === 'true';
+    this.#selectedRating = isPositive;
     this.#render();
     if (this.#selectedRating) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightRatedPositive);
@@ -1071,7 +1076,7 @@ export class ConsoleInsight extends HTMLElement {
 
   #focusHeader(): void {
     this.addEventListener('animationend', () => {
-      (this.#shadow.querySelector('header h2') as HTMLElement | undefined)?.focus();
+      this.#headerRef.value?.focus();
     }, {once: true});
   }
 
@@ -1118,6 +1123,8 @@ export class ConsoleInsight extends HTMLElement {
     };
     const output: ViewOutput = {
       referenceDetailsRef: this.#referenceDetailsRef,
+      headerRef: this.#headerRef,
+      citationLinks: [],
     };
 
     // Future Widget view function starts here.
@@ -1132,21 +1139,23 @@ export class ConsoleInsight extends HTMLElement {
 
     switch (state.type) {
       case State.LOADING:
-        header = renderHeader({headerText: i18nString(UIStrings.generating), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.generating), onClose}, output.headerRef);
         main = renderLoading();
         break;
       case State.INSIGHT:
-        header = renderHeader({headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed});
+        header = renderHeader(
+            {headerText: i18nString(UIStrings.insight), onClose, showSpinner: !state.completed}, output.headerRef);
         main = renderInsight(state, input.renderer, input.disableAnimations, callbacks, output);
         footer = renderInsightFooter(noLogging, input.selectedRating, callbacks);
         break;
       case State.ERROR:
-        header = renderHeader({headerText: i18nString(UIStrings.error), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.error), onClose}, output.headerRef);
         main = renderError(i18nString(UIStrings.errorBody));
         footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
         break;
       case State.CONSENT_REMINDER:
-        header = renderHeader({headerText: 'Understand console messages with AI', onClose, showIcon: true});
+        header = renderHeader(
+            {headerText: 'Understand console messages with AI', onClose, showIcon: true}, output.headerRef);
         mainClasses['reminder-container'] = true;
         main = renderConsentReminder(noLogging);
         footer = renderConsentReminderFooter(callbacks.onReminderSettingsLink, callbacks.onConsentReminderConfirmed);
@@ -1157,12 +1166,12 @@ export class ConsoleInsight extends HTMLElement {
         break;
       case State.NOT_LOGGED_IN:
       case State.SYNC_IS_PAUSED:
-        header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.signInToUse), onClose}, output.headerRef);
         main = renderNotLoggedIn();
         footer = renderSignInFooter(callbacks.onGoToSignIn);
         break;
       case State.OFFLINE:
-        header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose});
+        header = renderHeader({headerText: i18nString(UIStrings.offlineHeader), onClose}, output.headerRef);
         main = renderError(i18nString(UIStrings.offline));
         footer = renderDisclaimerFooter(noLogging, onDisclaimerSettingsLink);
         break;
@@ -1188,6 +1197,8 @@ export class ConsoleInsight extends HTMLElement {
     });
     // clang-format on
 
+    this.#citationLinks = output.citationLinks;
+
     if (this.#referenceDetailsRef.value) {
       this.#referenceDetailsRef.value.open = this.#areReferenceDetailsOpen;
     }

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -17,6 +17,7 @@ import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_
 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 type {IssueView} from './IssueView.js';
 
@@ -230,7 +231,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     }
 
     const deferredDOMNode = new SDK.DOMModel.DeferredDOMNode(target, backendNodeId);
-    const anchorElement = (await Common.Linkifier.Linkifier.linkify(deferredDOMNode)) as HTMLElement;
+    const anchorElement = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(deferredDOMNode) as HTMLElement;
     anchorElement.textContent = nodeName;
     anchorElement.addEventListener('click', () => sendTelemetry());
     anchorElement.addEventListener('keydown', (event: Event) => {

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -13,6 +13,7 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
+import * as PanelsCommon from '../common/common.js';
 
 import type {
   NodeDetailsJSON, ReportJSON, RunnerResultArtifacts, SourceLocationDetailsJSON} from './LighthouseReporterTypes.js';
@@ -148,7 +149,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      const element = await Common.Linkifier.Linkifier.linkify(
+      const element = PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(
           node, {tooltip: detailsItem.snippet, preventKeyboardFocus: undefined});
       UI.Tooltip.Tooltip.install(origHTMLElement, '');
 

package/front_end/panels/network/NetworkLogView.ts

@@ -2484,7 +2484,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
               .replace(/"/g, '\\"')
               .replace(/[^a-zA-Z0-9\s_\-:=+~'\/.',?;()*`]/g, '^$&')
               .replace(/%(?=[a-zA-Z0-9_])/g, '%^')
-              .replace(/[^\S \r\n]/g, ' ')
+              .replace(/[^ -~\r\n]/g, ' ')
               .replace(/\r?\n|\r/g, '^\n\n') +
           encapsChars;
     }

package/front_end/panels/recorder/RecorderController.ts

@@ -1179,7 +1179,13 @@ export class RecorderController extends LitElement {
         <div class="empty-state-header">${i18nString(UIStrings.header)}</div>
         <div class="empty-state-description">
           <span>${i18nString(UIStrings.recordingDescription)}</span>
-          ${UI.XLink.XLink.create(RECORDER_EXPLANATION_URL, i18nString(UIStrings.learnMore), 'x-link', undefined, 'learn-more')}
+          <x-link
+            class="x-link devtools-link"
+            href=${RECORDER_EXPLANATION_URL}
+            jslog=${VisualLogging.link()
+                    .track({ click: true, keydown: 'Enter|Space' })
+                    .context('learn-more')}
+          >${i18nString(UIStrings.learnMore)}</x-link>
         </div>
         <devtools-button .variant=${Buttons.Button.Variant.TONAL} jslogContext=${Actions.RecorderActions.CREATE_RECORDING} @click=${this.#onCreateNewRecording}>${i18nString(UIStrings.createRecording)}</devtools-button>
       </div>