chrome-devtools-frontend 1.0.1544076 → 1.0.1547147

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -271,30 +271,29 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   private createListItems(): KeybindsItem[] {
-    const actions = UI.ActionRegistry.ActionRegistry.instance().actions().sort((actionA, actionB) => {
-      if (actionA.category() < actionB.category()) {
-        return -1;
-      }
-      if (actionA.category() > actionB.category()) {
-        return 1;
-      }
-      if (actionA.id() < actionB.id()) {
-        return -1;
-      }
-      if (actionA.id() > actionB.id()) {
-        return 1;
-      }
-      return 0;
-    });
+    const actions = UI.ActionRegistry.ActionRegistry.instance()
+                        .actions()
+                        .filter(action => action.configurableBindings())
+                        .sort((actionA, actionB) => {
+                          if (actionA.category() < actionB.category()) {
+                            return -1;
+                          }
+                          if (actionA.category() > actionB.category()) {
+                            return 1;
+                          }
+                          if (actionA.id() < actionB.id()) {
+                            return -1;
+                          }
+                          if (actionA.id() > actionB.id()) {
+                            return 1;
+                          }
+                          return 0;
+                        });
 
     const items: KeybindsItem[] = [];
 
     let currentCategory: UI.ActionRegistration.ActionCategory;
     actions.forEach(action => {
-      if (action.id() === 'elements.toggle-element-search') {
-        return;
-      }
-
       if (currentCategory !== action.category()) {
         items.push(action.category());
       }
@@ -305,7 +304,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const deepActiveElement = Platform.DOMUtilities.deepActiveElement(document);
+    const deepActiveElement = UI.DOMUtilities.deepActiveElement(document);
     if (this.editingRow && deepActiveElement && deepActiveElement.nodeName === 'INPUT') {
       this.editingRow.onEscapeKeyPressed(event);
     }
@@ -595,7 +594,7 @@ export class ShortcutListItem {
   }
 
   onEscapeKeyPressed(event: Event): void {
-    const activeElement = Platform.DOMUtilities.deepActiveElement(document);
+    const activeElement = UI.DOMUtilities.deepActiveElement(document);
     for (const [shortcut, shortcutInput] of this.shortcutInputs.entries()) {
       if (activeElement === shortcutInput) {
         this.onShortcutInputKeyDown(shortcut, shortcutInput as HTMLInputElement, event);

package/front_end/panels/settings/SettingsScreen.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -497,7 +498,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
         jslogContext: `${experiment.name}-documentation`,
         title: i18nString(UIStrings.learnMore),
       };
-      linkButton.addEventListener('click', () => UI.UIUtils.openInNewTab(experimentLink));
+      linkButton.addEventListener('click', () => UIHelpers.openInNewTab(experimentLink));
       linkButton.classList.add('link-icon');
 
       p.appendChild(linkButton);
@@ -542,7 +543,7 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
         void SettingsScreen.showSettingsScreen({focusTabHeader: true} as ShowSettingsScreenOptions);
         return true;
       case 'settings.documentation':
-        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/');
+        UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/');
         return true;
       case 'settings.shortcuts':
         void SettingsScreen.showSettingsScreen({name: 'keybinds', focusTabHeader: true});

package/front_end/panels/sources/CoveragePlugin.ts

@@ -7,10 +7,10 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
+import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Coverage from '../coverage/coverage.js';
 
@@ -123,7 +123,7 @@ export class CoveragePlugin extends Plugin {
   }
 
   private getCoverageManager(): Coverage.CoverageDecorationManager.CoverageDecorationManager|undefined {
-    return this.uiSourceCode.getDecorationData(SourceFrame.SourceFrame.DecoratorType.COVERAGE);
+    return this.uiSourceCode.getDecorationData(Workspace.UISourceCode.DecoratorType.COVERAGE);
   }
 
   override editorInitialized(editor: TextEditor.TextEditor.TextEditor): void {
@@ -132,9 +132,9 @@ export class CoveragePlugin extends Plugin {
     }
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
-    if (type === SourceFrame.SourceFrame.DecoratorType.COVERAGE) {
+    if (type === Workspace.UISourceCode.DecoratorType.COVERAGE) {
       this.startDecoUpdate(editor);
     }
   }

package/front_end/panels/sources/Plugin.ts

@@ -41,7 +41,7 @@ export class Plugin {
       void {
   }
 
-  decorationChanged(_type: SourceFrame.SourceFrame.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
+  decorationChanged(_type: Workspace.UISourceCode.DecoratorType, _editor: TextEditor.TextEditor.TextEditor): void {
   }
 
   editorExtension(): CodeMirror.Extension {

package/front_end/panels/sources/ProfilePlugin.ts

@@ -5,10 +5,9 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
-import type * as Workspace from '../../models/workspace/workspace.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 
 import {Plugin} from './Plugin.js';
 
@@ -90,22 +89,31 @@ class PerformanceMarker extends CodeMirror.GutterMarker {
 }
 
 function markersFromProfileData(
-    map: Map<number, number>, state: CodeMirror.EditorState,
-    type: SourceFrame.SourceFrame.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
-  const markerType = type === SourceFrame.SourceFrame.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
+    map: Map<number, number>|Map<number, Map<number, number>>, state: CodeMirror.EditorState,
+    type: Workspace.UISourceCode.DecoratorType): CodeMirror.RangeSet<CodeMirror.GutterMarker> {
+  const markerType = type === Workspace.UISourceCode.DecoratorType.PERFORMANCE ? PerformanceMarker : MemoryMarker;
   const markers: Array<CodeMirror.Range<CodeMirror.GutterMarker>> = [];
+  const aggregatedByLine = new Map<number, number>();
   for (const [line, value] of map) {
     if (line <= state.doc.lines) {
-      const {from} = state.doc.line(line);
-      markers.push(new markerType(value).range(from));
+      if (value instanceof Map) {
+        for (const [, data] of value) {
+          aggregatedByLine.set(line, (aggregatedByLine.get(line) || 0) + data);
+        }
+        continue;
+      }
+      aggregatedByLine.set(line, value);
     }
   }
+  for (const [line, value] of aggregatedByLine) {
+    const {from} = state.doc.line(line);
+    markers.push(new markerType(value).range(from));
+  }
   return CodeMirror.RangeSet.of(markers, true);
 }
 
-const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType): typeof Plugin =>
-    class extends Plugin {
-  updateEffect = CodeMirror.StateEffect.define<Map<number, number>>();
+const makeLineLevelProfilePlugin = (type: Workspace.UISourceCode.DecoratorType): typeof Plugin => class extends Plugin {
+  updateEffect = CodeMirror.StateEffect.define<Map<number, number>|Map<number, Map<number, number>>>();
   field: CodeMirror.StateField<CodeMirror.RangeSet<CodeMirror.GutterMarker>>;
   gutter: CodeMirror.Extension;
   compartment: CodeMirror.Compartment = new CodeMirror.Compartment();
@@ -134,7 +142,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
     return uiSourceCode.contentType().hasScripts();
   }
 
-  private getLineMap(): Map<number, number>|undefined {
+  private getLineMap(): Map<number, number>|Map<number, Map<number, number>>|undefined {
     return this.uiSourceCode.getDecorationData(type);
   }
 
@@ -144,7 +152,7 @@ const makeLineLevelProfilePlugin = (type: SourceFrame.SourceFrame.DecoratorType)
         !map ? [] : [this.field.init(state => markersFromProfileData(map, state, type)), this.gutter, theme]);
   }
 
-  override decorationChanged(type: SourceFrame.SourceFrame.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
+  override decorationChanged(type: Workspace.UISourceCode.DecoratorType, editor: TextEditor.TextEditor.TextEditor):
       void {
     const installed = Boolean(editor.state.field(this.field, false));
     const map = this.getLineMap();
@@ -189,6 +197,6 @@ const theme = CodeMirror.EditorView.baseTheme({
   },
 });
 
-export const MemoryProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.MEMORY);
+export const MemoryProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.MEMORY);
 
-export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(SourceFrame.SourceFrame.DecoratorType.PERFORMANCE);
+export const PerformanceProfilePlugin = makeLineLevelProfilePlugin(Workspace.UISourceCode.DecoratorType.PERFORMANCE);

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -238,6 +238,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   override async setContent(content: string): Promise<void> {
+    this.#uiSourceCode.formatChanged(this.formattedMap);
     this.disposePlugins();
     this.loadPlugins();
     await super.setContent(content);
@@ -423,7 +424,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
 
   private onDecorationChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     for (const plugin of this.plugins) {
-      plugin.decorationChanged(event.data as SourceFrame.SourceFrame.DecoratorType, this.textEditor);
+      plugin.decorationChanged(event.data as Workspace.UISourceCode.DecoratorType, this.textEditor);
     }
   }
 

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

@@ -232,18 +232,6 @@ const UIStrings = {
    * @description Title of a setting under the Sources category that can be invoked through the Command Menu
    */
   doNotAutomaticallyRevealFilesIn: 'Do not automatically reveal files in sidebar',
-  /**
-   * @description Setting under the Sources category to toggle usage of JavaScript source maps.
-   */
-  javaScriptSourceMaps: 'JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  enableJavaScriptSourceMaps: 'Enable JavaScript source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  disableJavaScriptSourceMaps: 'Disable JavaScript source maps',
   /**
    * @description Title of a setting under the Sources category.
    *'tab moves focus' is the name of the setting, which means that when the user
@@ -373,18 +361,6 @@ const UIStrings = {
    * @description Title of a setting under the Sources category that can be invoked through the Command Menu
    */
   doNotDisplayVariableValuesInline: 'Do not display variable values inline while debugging',
-  /**
-   * @description Title of a setting under the Sources category
-   */
-  cssSourceMaps: 'CSS source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  enableCssSourceMaps: 'Enable CSS source maps',
-  /**
-   * @description Title of a setting under the Sources category that can be invoked through the Command Menu
-   */
-  disableCssSourceMaps: 'Disable CSS source maps',
   /**
    * @description Title of a setting under the Sources category in Settings
    */
@@ -1556,25 +1532,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.javaScriptSourceMaps),
-  settingName: 'js-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableJavaScriptSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableJavaScriptSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,
@@ -1799,25 +1756,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.SOURCES,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.cssSourceMaps),
-  settingName: 'css-source-maps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
-  options: [
-    {
-      value: true,
-      title: i18nLazyString(UIStrings.enableCssSourceMaps),
-    },
-    {
-      value: false,
-      title: i18nLazyString(UIStrings.disableCssSourceMaps),
-    },
-  ],
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.SOURCES,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/panels/timeline/README.md

@@ -14,15 +14,7 @@ The first method is to run DevTools! Load up the Chrome for Testing version that
 
 DevTools, navigate to the Performance Panel and record or import a trace. There are a number of trace files saved in `devtools-frontend/test/unittests/fixtures/traces` that you can use.
 
-#### Option 2: the components server
-
-You can also use the DevTools component server. This server runs standalone parts of DevTools in the browser. To do this, run `npm run components-server` in the terminal, which will run a server on `localhost:8090`.
-
-You can then navigate to the Performance Panel examples using the link on the index page. This runs the real Performance Panel code in isolation, and you can additionally preload a trace by appending `?trace=name-of-trace-file-from-fixtures`. This is a nicer development cycle because you do not have to manually import a trace after each change. Note though that some parts of the experience are stubbed, so you always should test your work in proper DevTools too.
-
-These examples can also be used to create screenshot tests, which are an important tool for the Performance Panel because it is the only way to test `<canvas>` output. We define these as interaction tests (`devtools-frontend/tests/interactions/panels/performance`).
-
-#### Option 3: bundled DevTools in the browser
+#### Option 2: bundled DevTools in the browser
 
 This option loads the DevTools frontend in a browser tab in Chrome, but requires a little more setup to easily load traces.
 

package/front_end/panels/timeline/ThreadAppender.ts

@@ -135,13 +135,6 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/ThreadAppender.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-/**
- * This appender is only triggered when the Renderer handler is run. At
- * the moment this only happens in the basic component server example.
- * In the future, once this appender fully supports the behaviour of the
- * old engine's thread/sync tracks we can always run it by enabling the
- * Renderer and Samples handler by default.
- **/
 export class ThreadAppender implements TrackAppender {
   readonly appenderName: TrackAppenderName = 'Thread';
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -946,7 +946,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       const agent = conversationHandler.createAgent(AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE);
-      const conversation = new AiAssistanceModel.AiHistoryStorage.Conversation(
+      const conversation = new AiAssistanceModel.AiConversation.AiConversation(
           AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE,
           [],
           agent.id,

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -1646,6 +1646,8 @@ export class TimelineUIUtils {
   private static renderEventJson(event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper): void {
     contentHelper.addSection(i18nString(UIStrings.traceEvent));
 
+    contentHelper.appendElementRow('eventKey', new Trace.EventsSerializer.EventsSerializer().keyForEvent(event) ?? '?');
+
     const eventWithArgsFirst = {
       ...{args: event.args},
       ...event,

package/front_end/panels/timeline/components/ExportTraceOptions.ts

@@ -14,6 +14,7 @@ import * as Dialogs from '../../../ui/components/dialogs/dialogs.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.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 exportTraceOptionsStyles from './exportTraceOptions.css.js';
 
@@ -44,6 +45,10 @@ const UIStrings = {
    * @description Text for the compression option.
    */
   shouldCompress: 'Compress with gzip',
+  /**
+   * @description Text for the explanation link
+   */
+  explanation: 'Explanation',
   /**
    * @description Text for the save trace button
    */
@@ -292,7 +297,16 @@ export class ExportTraceOptions extends HTMLElement {
             'script-source-maps',
             this.#includeSourceMapsCheckbox, i18nString(UIStrings.includeSourcemap), this.#state.includeSourceMaps): ''}
           ${this.#renderCheckbox('compress-with-gzip', this.#shouldCompressCheckbox, i18nString(UIStrings.shouldCompress), this.#state.shouldCompress)}
-          <div class='export-trace-options-row'><div class='export-trace-blank'></div><devtools-button
+          <div class='export-trace-options-row export-trace-options-row-last'>
+            <div class="export-trace-explanation">
+              <x-link
+                href="https://developer.chrome.com/docs/devtools/performance/save-trace"
+                class=devtools-link
+                jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('save-trace-explanation')}>
+                  ${i18nString(UIStrings.explanation)}
+              </x-link>
+            </div>
+            <devtools-button
                   class="setup-button"
                   data-export-button
                   @click=${this.#onExportClick.bind(this)}

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -41,6 +41,7 @@ import metricValueStyles from './metricValueStyles.css.js';
 import {CLS_THRESHOLDS, INP_THRESHOLDS, renderMetricValue} from './Utils.js';
 
 const {html, nothing} = Lit;
+const {widgetConfig} = UI.Widget;
 
 type DeviceOption = CrUXManager.DeviceScope|'AUTO';
 
@@ -57,6 +58,14 @@ const UIStrings = {
    * @description Title of a view that shows performance metrics from the local environment.
    */
   localMetrics: 'Local metrics',
+  /**
+   *@description Text for the link to the historical field data for the specific URL or origin that is shown. This link text appears in parenthesis after the collection period information in the field data dialog. The link opens the CrUX Vis viewer (https://cruxvis.withgoogle.com).
+   */
+  fieldDataHistoryLink: 'View history',
+  /**
+   *@description Tooltip for the CrUX Vis viewer link which shows the history of the field data for the specific URL or origin.
+   */
+  fieldDataHistoryTooltip: 'View field data history in CrUX Vis',
   /**
    * @description Accessible label for a section that logs user interactions and layout shifts. A layout shift is an event that shifts content in the layout of the page causing a jarring experience for the user.
    */
@@ -475,7 +484,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         ${nodeLink ? html`
             <div class="related-info" slot="extra-info">
               <span class="related-info-label">${i18nString(UIStrings.lcpElement)}</span>
-              <span class="related-info-link">${nodeLink}</span>
+              <span class="related-info-link">
+               <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: this.#lcpValue?.nodeRef})}>
+               </devtools-widget>
+              </span>
             </div>
           `
           : nothing}
@@ -638,7 +650,7 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </ul>
       ` : nothing}
       <div class="environment-option">
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
+        <devtools-widget .widgetConfig=${widgetConfig(CPUThrottlingSelector, {recommendedOption: recs.cpuOption})}></devtools-widget>
       </div>
       <div class="environment-option">
         <devtools-network-throttling-selector .recommendedConditions=${recs.networkConditions}></devtools-network-throttling-selector>
@@ -836,6 +848,32 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
     });
   }
 
+  #renderFieldDataHistoryLink(): Lit.LitTemplate {
+    if (!this.#cruxManager.getConfigSetting().get().enabled) {
+      return Lit.nothing;
+    }
+    const normalizedUrl = this.#cruxManager.pageResult?.normalizedUrl;
+    if (!normalizedUrl) {
+      return Lit.nothing;
+    }
+    const tmp = new URL('https://cruxvis.withgoogle.com/');
+    tmp.searchParams.set('view', 'cwvsummary');
+    tmp.searchParams.set('url', normalizedUrl);
+    // identifier must be 'origin' or 'url'.
+    const identifier = this.#cruxManager.fieldPageScope;
+    tmp.searchParams.set('identifier', identifier);
+    // device must be one 'PHONE', 'DESKTOP', 'TABLET', or 'ALL'.
+    const device = this.#cruxManager.getSelectedDeviceScope();
+    tmp.searchParams.set('device', device);
+    const cruxVis = `${tmp.origin}/#/${tmp.search}`;
+    return html`
+        (<x-link href=${cruxVis}
+                 class="local-field-link"
+                 title=${i18nString(UIStrings.fieldDataHistoryTooltip)}
+        >${i18nString(UIStrings.fieldDataHistoryLink)}</x-link>)
+      `;
+  }
+
   #renderCollectionPeriod(): Lit.LitTemplate {
     const range = this.#getCollectionPeriodRange();
 
@@ -847,11 +885,13 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
       PH1: dateEl,
     });
 
+    const fieldDataHistoryLink = range ? this.#renderFieldDataHistoryLink() : Lit.nothing;
+
     const warnings = this.#cruxManager.pageResult?.warnings || [];
 
     return html`
       <div class="field-data-message">
-        <div>${message}</div>
+        <div>${message} ${fieldDataHistoryLink}</div>
         ${warnings.map(warning => html`
           <div class="field-data-warning">${warning}</div>
         `)}
@@ -948,7 +988,6 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
 
           const isP98Excluded = this.#inpValue && this.#inpValue.value < interaction.duration;
           const isInp = this.#inpValue?.interactionId === interaction.interactionId;
-          const nodeLink = interaction.nodeRef ? PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(interaction.nodeRef) : Lit.nothing;
 
           return html`
             <li id=${interaction.interactionId} class="log-item interaction" tabindex="-1">
@@ -959,7 +998,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                       html`<span class="interaction-inp-chip" title=${i18nString(UIStrings.inpInteraction)}>INP</span>`
                     : nothing}
                   </span>
-                  <span class="interaction-node">${nodeLink}</span>
+                  <span class="interaction-node">
+                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node: interaction.nodeRef})}>
+                    </devtools-widget>
+                  </span>
                   ${isP98Excluded ? html`<devtools-icon
                     class="interaction-info"
                     name="info"
@@ -1066,7 +1108,10 @@ export class LiveMetricsView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               <div class="layout-shift-score">Layout shift score: ${metricValue}</div>
               <div class="layout-shift-nodes">
                 ${layoutShift.affectedNodeRefs.map(node => html`
-                  <div class="layout-shift-node">${PanelsCommon.DOMLinkifier.Linkifier.instance().linkify(node)}</div>
+                  <div class="layout-shift-node">
+                    <devtools-widget .widgetConfig=${widgetConfig(PanelsCommon.DOMLinkifier.DOMNodeLink, {node})}>
+                    </devtools-widget>
+                  </div>
                 `)}
               </div>
             </li>

package/front_end/panels/timeline/components/MetricCard.ts

@@ -9,7 +9,7 @@ import * as CrUXManager from '../../../models/crux-manager/crux-manager.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as UI from '../../../ui/legacy/legacy.js';
+import * as UIHelpers from '../../../ui/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import metricCardStyles from './metricCard.css.js';
@@ -622,7 +622,7 @@ export class MetricCard extends HTMLElement {
             title=${this.#getHelpTooltip()}
             .iconName=${'help'}
             .variant=${Buttons.Button.Variant.ICON}
-            @click=${() => UI.UIUtils.openInNewTab(helpLink)}
+            @click=${() => UIHelpers.openInNewTab(helpLink)}
           ></devtools-button>
         </h3>
         <div tabindex="0" class="metric-values-section"

package/front_end/panels/timeline/components/exportTraceOptions.css

@@ -19,13 +19,22 @@
     height: 24px;
   }
 
-  .export-trace-blank {
+  .export-trace-explanation {
     flex: 1;
-    min-width: var(--sys-size-25)
+    min-width: var(--sys-size-25);
   }
 }
 
+.export-trace-options-row-last {
+  align-items: center;
+}
+
 .info-tooltip-container {
   max-width: var(--sys-size-28);
   white-space: normal;
 }
+
+x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+}

package/front_end/panels/timeline/components/insights/NodeLink.ts

@@ -5,7 +5,6 @@
 
 // TODO: move to ui/components/node_link?
 
-import type * as Common from '../../../../core/common/common.js';
 import type * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
@@ -20,7 +19,7 @@ const {html} = Lit;
 export interface NodeLinkData {
   backendNodeId: Protocol.DOM.BackendNodeId;
   frame: string;
-  options?: Common.Linkifier.Options;
+  options?: PanelsCommon.DOMLinkifier.Options;
   /**
    * URL to display if backendNodeId cannot be resolved (ie for traces loaded from disk).
    * Will be given to linkifyURL. Use this or one of the other fallback fields.
@@ -42,7 +41,7 @@ export class NodeLink extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #frame?: string;
-  #options?: Common.Linkifier.Options;
+  #options?: PanelsCommon.DOMLinkifier.Options;
   #fallbackUrl?: Platform.DevToolsPath.UrlString;
   #fallbackHtmlSnippet?: string;
   #fallbackText?: string;

package/front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -15,6 +15,7 @@ import * as Root from '../../../../core/root/root.js';
 import * as AiAssistanceModels from '../../../../models/ai_assistance/ai_assistance.js';
 import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UIHelpers from '../../../../ui/helpers/helpers.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
 import * as Lit from '../../../../ui/lit/lit.js';
@@ -574,7 +575,7 @@ export class EntryLabelOverlay extends HTMLElement {
         },
       ],
       onLearnMoreClick: () => {
-        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
+        UIHelpers.openInNewTab('https://developer.chrome.com/docs/devtools/performance/annotations#auto-annotations');
       },
       learnMoreButtonText: UIStringsNotTranslate.learnMoreButton,
     });

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

@@ -323,16 +323,6 @@ Common.Settings.registerSettingExtension({
   defaultValue: false,
 });
 
-Common.Linkifier.registerLinkifier({
-  contextTypes() {
-    return maybeRetrieveContextTypes(Timeline => [Timeline.CLSLinkifier.CLSRect]);
-  },
-  async loadLinkifier() {
-    const Timeline = await loadTimelineModule();
-    return Timeline.CLSLinkifier.Linkifier.instance();
-  },
-});
-
 UI.ContextMenu.registerItem({
   location: UI.ContextMenu.ItemLocation.TIMELINE_MENU_OPEN,
   actionId: 'timeline.load-from-file',