chrome-devtools-frontend 1.0.1574367 → 1.0.1575635

package/front_end/panels/lighthouse/LighthouseStartView.ts

@@ -9,6 +9,7 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {type LighthouseController, type Preset, Presets, RuntimeSettings} from './LighthouseController.js';
@@ -87,8 +88,8 @@ export class StartView extends UI.Widget.Widget {
     labelEl.textContent = label;
 
     if (runtimeSetting.learnMore) {
-      const link = UI.XLink.XLink.create(
-          runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', undefined, 'learn-more');
+      const link =
+          Link.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', 'learn-more');
       labelEl.append(link);
     }
     parentElement.appendChild(labelEl);
@@ -111,8 +112,8 @@ export class StartView extends UI.Widget.Widget {
         runtimeSetting.setting as Common.Settings.Setting<boolean>, runtimeSetting.description());
     toolbar.appendToolbarItem(control);
     if (runtimeSetting.learnMore) {
-      const link = UI.XLink.XLink.create(
-          runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', undefined, 'learn-more');
+      const link =
+          Link.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', 'learn-more');
       link.style.margin = '5px';
       control.element.appendChild(link);
     }
@@ -135,8 +136,8 @@ export class StartView extends UI.Widget.Widget {
     control.setTitle(runtimeSetting.description());
     toolbar.appendToolbarItem(control);
     if (runtimeSetting.learnMore) {
-      const link = UI.XLink.XLink.create(
-          runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', undefined, 'learn-more');
+      const link =
+          Link.create(runtimeSetting.learnMore, i18nString(UIStrings.learnMore), 'lighthouse-learn-more', 'learn-more');
       link.style.marginLeft = '5px';
       link.style.display = 'inline-flex';
       link.style.height = 'revert';

package/front_end/panels/linear_memory_inspector/LinearMemoryInspectorPane.ts

@@ -6,6 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -59,8 +60,8 @@ export class LinearMemoryInspectorPane extends Common.ObjectWrapper.eventMixin<E
 
     const description = placeholder.createChild('div', 'empty-state-description');
     description.createChild('span').textContent = i18nString(UIStrings.memoryInspectorExplanation);
-    const link = UI.XLink.XLink.create(
-        MEMORY_INSPECTOR_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+    const link =
+        Link.create(MEMORY_INSPECTOR_EXPLANATION_URL, i18nString(UIStrings.learnMore), undefined, 'learn-more');
     description.appendChild(link);
 
     return placeholder;

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -4,7 +4,6 @@
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/kit/kit.js';
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/tooltips/tooltips.js';
 
@@ -16,6 +15,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -575,8 +575,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     const titles = content.createChild('div', 'blocked-url-edit-row');
     const label = titles.createChild('label');
     if (Root.Runtime.hostConfig.devToolsIndividualRequestThrottling?.enabled) {
-      const learnMore = UI.XLink.XLink.create(
-          PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
+      const learnMore = Link.create(PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, 'learn-more');
       learnMore.title = i18nString(UIStrings.learnMoreLabel);
       titles.append('\xA0', learnMore);
       label.textContent = i18nString(UIStrings.textEditPattern);

package/front_end/panels/network/SignedExchangeInfoView.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import {Icon} from '../../ui/kit/kit.js';
+import {Icon, Link} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -146,9 +146,8 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
 
     const titleElement = document.createDocumentFragment();
     titleElement.createChild('div', 'header-name').textContent = i18nString(UIStrings.signedHttpExchange);
-    const learnMoreNode = UI.XLink.XLink.create(
-        'https://github.com/WICG/webpackage', i18nString(UIStrings.learnmore), 'header-toggle', undefined,
-        'learn-more');
+    const learnMoreNode = Link.create(
+        'https://github.com/WICG/webpackage', i18nString(UIStrings.learnmore), 'header-toggle', 'learn-more');
     titleElement.appendChild(learnMoreNode);
     const headerCategory = new Category(root, titleElement);
     if (signedExchangeInfo.header) {

package/front_end/panels/network/components/HeaderSectionRow.css

@@ -131,7 +131,7 @@
   color: var(--sys-color-token-subtle);
 }
 
-x-link .inline-icon {
+devtools-link .inline-icon {
   padding-right: 3px;
 }
 

package/front_end/panels/recorder/components/RecordingView.ts

@@ -454,7 +454,7 @@ function renderTextEditor(input: ViewInput, output: ViewOutput): Lit.TemplateRes
   // clang-format off
   return html`
     <div class="text-editor" jslog=${VisualLogging.textField().track({change: true})}>
-      <devtools-text-editor .state=${input.editorState} ${Lit.Directives.ref((editor: Element | undefined) => {
+      <devtools-text-editor .state=${input.editorState} ${Lit.Directives.ref(editor => {
         if (!editor || !(editor instanceof TextEditor.TextEditor.TextEditor)) {
           return;
         }
@@ -645,7 +645,7 @@ function renderSections(input: ViewInput): Lit.LitTemplate {
       )}
       </div>
     `;
-    // clang-format on
+        // clang-format on
 }
 
 function renderHeader(input: ViewInput): Lit.LitTemplate {

package/front_end/panels/recorder/components/recordingView.css

@@ -225,6 +225,11 @@
     width: fit-content;
   }
 
+  .settings-title:focus-visible {
+    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline-offset: 2px;
+  }
+
   .settings {
     margin-top: 4px;
     display: flex;

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -323,18 +323,19 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
       const icon = isOverviewElement ?
           getSecurityStateIconForOverview(securityState, `lock-icon lock-icon-${securityState}`) :
           getSecurityStateIconForDetailedView(securityState, `security-property security-property-${securityState}`);
-      const elementTitle = isOverviewElement ? ((): Element => {
-        const title = document.createElement('span');
-        title.classList.add('title');
-        title.textContent = i18nString(UIStrings.overview);
-        return title;
-      })() : createHighlightedUrl(element.origin() ?? Platform.DevToolsPath.EmptyUrlString, securityState);
 
       element.setLeadingIcons([icon]);
-      if (element.listItemElement.lastChild) {
-        element.listItemElement.removeChild(element.listItemElement.lastChild);
+
+      if (isOverviewElement) {
+        element.title = i18nString(UIStrings.overview);
+      } else {
+        const elementTitle =
+            createHighlightedUrl(element.origin() ?? Platform.DevToolsPath.EmptyUrlString, securityState);
+        if (element.listItemElement.lastChild) {
+          element.listItemElement.removeChild(element.listItemElement.lastChild);
+        }
+        element.listItemElement.appendChild(elementTitle);
       }
-      element.listItemElement.appendChild(elementTitle);
     }
   }
 }

package/front_end/panels/settings/AISettingsTab.ts

@@ -482,7 +482,8 @@ export class AISettingsTab extends UI.Widget.VBox {
 
     if (this.#aiAssistanceSetting) {
       const aiAssistanceData: AiSettingParams = {
-        settingName: i18n.i18n.lockedString('AI assistance'),
+        settingName: i18n.i18n.lockedString(
+            AiAssistanceModel.AiUtils.isGeminiBranding() ? 'Gemini in Chrome DevTools' : 'AI assistance'),
         iconName: AiAssistanceModel.AiUtils.getIconName(),
         settingDescription: this.#getAiAssistanceSettingDescription(),
         enableSettingText: i18nString(UIStrings.enableAiAssistance),

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -3,14 +3,12 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/kit/kit.js';
-
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import {createIcon, type Icon} from '../../ui/kit/kit.js';
+import {createIcon, type Icon, Link} from '../../ui/kit/kit.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -146,9 +144,9 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     UI.ARIAUtils.setLabel(this.list.element, i18nString(UIStrings.keyboardShortcutsList));
     const footer = document.createElement('div');
     footer.classList.add('keybinds-footer');
-    const docsLink = UI.XLink.XLink.create(
+    const docsLink = Link.create(
         'https://developer.chrome.com/docs/devtools/shortcuts/', i18nString(UIStrings.FullListOfDevtoolsKeyboard),
-        undefined, undefined, 'learn-more');
+        undefined, 'learn-more');
     docsLink.classList.add('docs-link');
     footer.appendChild(docsLink);
     const restoreDefaultShortcutsButton =

package/front_end/panels/settings/SettingsScreen.ts

@@ -14,7 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as GreenDev from '../../models/greendev/greendev.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
-import {type Card, createIcon} from '../../ui/kit/kit.js';
+import {type Card, createIcon, Link} from '../../ui/kit/kit.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';
@@ -383,7 +383,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
 
 export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTab {
   #experimentsSection: Card|undefined;
-  private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
+  private readonly experimentToControl = new Map<Root.Runtime.Experiment|Root.Runtime.HostExperiment, HTMLElement>();
   private readonly containerElement: HTMLElement;
 
   constructor() {
@@ -452,12 +452,16 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     return subsection;
   }
 
-  private createExperimentCheckbox(experiment: Root.Runtime.Experiment): HTMLParagraphElement {
+  private createExperimentCheckbox(experiment: Root.Runtime.Experiment|Root.Runtime.HostExperiment):
+      HTMLParagraphElement {
     const checkbox =
         UI.UIUtils.CheckboxLabel.createWithStringLiteral(experiment.title, experiment.isEnabled(), experiment.name);
     checkbox.classList.add('experiment-label');
     checkbox.name = experiment.name;
     function listener(): void {
+      if (experiment instanceof Root.Runtime.HostExperiment) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.setChromeFlag(experiment.aboutFlag, checkbox.checked);
+      }
       experiment.setEnabled(checkbox.checked);
       Host.userMetrics.experimentChanged(experiment.name, experiment.isEnabled());
       UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
@@ -487,8 +491,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     }
 
     if (experiment.feedbackLink) {
-      const link = UI.XLink.XLink.create(
-          experiment.feedbackLink, undefined, undefined, undefined, `${experiment.name}-feedback`);
+      const link = Link.create(experiment.feedbackLink, undefined, undefined, `${experiment.name}-feedback`);
       link.textContent = i18nString(UIStrings.sendFeedback);
       link.classList.add('feedback-link');
 
@@ -499,7 +502,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
   }
 
   highlightObject(experiment: Object): void {
-    if (experiment instanceof Root.Runtime.Experiment) {
+    if (experiment instanceof Root.Runtime.Experiment || experiment instanceof Root.Runtime.HostExperiment) {
       const element = this.experimentToControl.get(experiment);
       if (element) {
         PanelUtils.highlightElement(element);
@@ -534,10 +537,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
-export class Revealer implements Common.Revealer.Revealer<Root.Runtime.Experiment|Common.Settings.Setting<unknown>> {
-  async reveal(object: Root.Runtime.Experiment|Common.Settings.Setting<unknown>): Promise<void> {
+export class Revealer implements
+    Common.Revealer.Revealer<Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>> {
+  async reveal(object: Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>):
+      Promise<void> {
     const context = UI.Context.Context.instance();
-    if (object instanceof Root.Runtime.Experiment) {
+    if (object instanceof Root.Runtime.Experiment || object instanceof Root.Runtime.HostExperiment) {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
       await SettingsScreen.showSettingsScreen({name: 'experiments'});
       const experimentsSettingsTab = context.flavor(ExperimentsSettingsTab);

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

@@ -277,6 +277,7 @@ Common.Revealer.registerRevealer({
     return [
       Common.Settings.Setting,
       Root.Runtime.Experiment,
+      Root.Runtime.HostExperiment,
     ];
   },
   destination: undefined,

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -38,6 +38,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -243,6 +244,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
       this.showMoreMessageElement.classList.add('hidden');
       this.items.replaceAll([]);
       UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, null);
+      UI.Context.Context.instance().setFlavor(StackTrace.StackTrace.DebuggableFrameFlavor, null);
       return;
     }
 
@@ -432,6 +434,14 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     if (debuggerCallFrame && oldItem !== item) {
       debuggerCallFrame.debuggerModel.setSelectedCallFrame(debuggerCallFrame);
       UI.Context.Context.instance().setFlavor(SDK.DebuggerModel.CallFrame, debuggerCallFrame);
+      UI.Context.Context.instance().setFlavor(
+          StackTrace.StackTrace.DebuggableFrameFlavor,
+          StackTrace.StackTrace.DebuggableFrameFlavor.for({
+                                                            uiSourceCode: item.uiLocation?.uiSourceCode,
+                                                            line: uiLocation.lineNumber,
+                                                            column: uiLocation.columnNumber ?? -1,
+                                                            sdkFrame: debuggerCallFrame,
+                                                          }));
       if (oldItem) {
         this.refreshItem(oldItem);
       }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -15,6 +15,7 @@ import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -249,7 +250,8 @@ export class DebuggerPlugin extends Plugin {
     this.ignoreListCallback = this.showIgnoreListInfobarIfNeeded.bind(this);
     Workspace.IgnoreListManager.IgnoreListManager.instance().addChangeListener(this.ignoreListCallback);
 
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        StackTrace.StackTrace.DebuggableFrameFlavor, this.callFrameChanged, this);
     this.liveLocationPool = new Bindings.LiveLocation.LiveLocationPool();
 
     this.updateScriptFiles();
@@ -649,11 +651,11 @@ export class DebuggerPlugin extends Plugin {
       return null;
     }
 
-    const selectedCallFrame =
-        (UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame) as SDK.DebuggerModel.CallFrame);
-    if (!selectedCallFrame) {
+    const debuggableFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+    if (!debuggableFrame) {
       return null;
     }
+    const selectedCallFrame = debuggableFrame.sdkFrame;
 
     let textPosition = editor.editor.posAtCoords(event);
     if (!textPosition) {
@@ -729,8 +731,9 @@ export class DebuggerPlugin extends Plugin {
         }
         objectPopoverHelper =
             await ObjectUI.ObjectPopoverHelper.ObjectPopoverHelper.buildObjectPopover(result.object, popover);
-        const potentiallyUpdatedCallFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
-        if (!objectPopoverHelper || selectedCallFrame !== potentiallyUpdatedCallFrame) {
+        const potentiallyUpdatedCallFrame =
+            UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+        if (!objectPopoverHelper || debuggableFrame !== potentiallyUpdatedCallFrame) {
           debuggerModel.runtimeModel().releaseObjectGroup('popover');
           if (objectPopoverHelper) {
             objectPopoverHelper.dispose();
@@ -988,10 +991,11 @@ export class DebuggerPlugin extends Plugin {
     if (!executionContext) {
       return null;
     }
-    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
-    if (!callFrame) {
+    const debuggableFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+    if (!debuggableFrame) {
       return null;
     }
+    const callFrame = debuggableFrame.sdkFrame;
     const url = this.uiSourceCode.url();
 
     const rawLocationToEditorOffset: (location: SDK.DebuggerModel.Location|null) => Promise<number|null> = location =>
@@ -1058,10 +1062,11 @@ export class DebuggerPlugin extends Plugin {
     if (!executionContext || !this.editor) {
       return;
     }
-    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
-    if (!callFrame) {
+    const debuggableFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+    if (!debuggableFrame) {
       return;
     }
+    const callFrame = debuggableFrame.sdkFrame;
     const start = callFrame.functionLocation() || callFrame.location();
     const debuggerModel = callFrame.debuggerModel;
 
@@ -1651,10 +1656,11 @@ export class DebuggerPlugin extends Plugin {
 
   private async callFrameChanged(): Promise<void> {
     this.liveLocationPool.disposeAll();
-    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
-    if (!callFrame) {
+    const debuggableFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
+    if (!debuggableFrame) {
       this.setExecutionLocation(null);
     } else {
+      const callFrame = debuggableFrame.sdkFrame;
       await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
           callFrame.location(), async (liveLocation: Bindings.LiveLocation.LiveLocation) => {
             const uiLocation = await liveLocation.uiLocation();

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -34,6 +34,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as SourceMapScopes from '../../models/source_map_scopes/source_map_scopes.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -93,7 +94,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     this.infoElement = document.createElement('div');
     this.infoElement.className = 'gray-info-message';
     this.infoElement.tabIndex = -1;
-    this.flavorChanged(UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame));
+    this.flavorChanged(UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor));
   }
 
   static instance(): ScopeChainSidebarPane {
@@ -103,7 +104,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
     return scopeChainSidebarPaneInstance;
   }
 
-  flavorChanged(callFrame: SDK.DebuggerModel.CallFrame|null): void {
+  flavorChanged(callFrame: StackTrace.StackTrace.DebuggableFrameFlavor|null): void {
     this.#scopeChainModel?.dispose();
     this.#scopeChainModel = null;
 
@@ -116,7 +117,7 @@ export class ScopeChainSidebarPane extends UI.Widget.VBox implements UI.ContextF
       // is happening (see https://crbug.com/1162416).
       this.infoElement.textContent = i18nString(UIStrings.loading);
 
-      this.#scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(callFrame);
+      this.#scopeChainModel = new SourceMapScopes.ScopeChainModel.ScopeChainModel(callFrame.sdkFrame);
       this.#scopeChainModel.addEventListener(
           SourceMapScopes.ScopeChainModel.Events.SCOPE_CHAIN_UPDATED, event => this.buildScopeTreeOutline(event.data),
           this);

package/front_end/panels/sources/SourcesNavigator.ts

@@ -16,6 +16,7 @@ import * as Persistence from '../../models/persistence/persistence.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -188,8 +189,7 @@ export class FilesNavigatorView extends NavigatorView {
     this.setPlaceholder(placeholder);
     placeholder.link = 'https://developer.chrome.com/docs/devtools/workspaces/' as Platform.DevToolsPath.UrlString;
 
-    const link =
-        UI.XLink.XLink.create('https://goo.gle/devtools-automatic-workspace-folders', 'com.chrome.devtools.json');
+    const link = Link.create('https://goo.gle/devtools-automatic-workspace-folders', 'com.chrome.devtools.json');
     this.#automaticFileSystemNudge =
         uiI18n.getFormatLocalizedString(str_, UIStrings.automaticWorkspaceNudge, {PH1: link});
     this.#automaticFileSystemNudge.classList.add('automatic-file-system-nudge');

package/front_end/panels/sources/SourcesPanel.ts

@@ -41,6 +41,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
@@ -325,7 +326,8 @@ export class SourcesPanel extends UI.Panel.Panel implements
         .moduleSetting('breakpoints-active')
         .addChangeListener(this.breakpointsActiveStateChanged, this);
     UI.Context.Context.instance().addFlavorChangeListener(SDK.Target.Target, this.onCurrentTargetChanged, this);
-    UI.Context.Context.instance().addFlavorChangeListener(SDK.DebuggerModel.CallFrame, this.callFrameChanged, this);
+    UI.Context.Context.instance().addFlavorChangeListener(
+        StackTrace.StackTrace.DebuggableFrameFlavor, this.callFrameChanged, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DebuggerModel.DebuggerModel, SDK.DebuggerModel.Events.DebuggerWasEnabled, this.debuggerWasEnabled, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -696,16 +698,17 @@ export class SourcesPanel extends UI.Panel.Panel implements
   }
 
   private async callFrameChanged(): Promise<void> {
-    const callFrame = UI.Context.Context.instance().flavor(SDK.DebuggerModel.CallFrame);
+    const callFrame = UI.Context.Context.instance().flavor(StackTrace.StackTrace.DebuggableFrameFlavor);
     if (!callFrame) {
       return;
     }
     if (this.executionLineLocation) {
       this.executionLineLocation.dispose();
     }
+    // TODO(crbug.com/465879478): Remove LiveLocation once `DebuggableFrameFlavor` is backed by a "real" StackTrace.
     this.executionLineLocation =
         await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().createCallFrameLiveLocation(
-            callFrame.location(), this.executionLineChanged.bind(this), this.liveLocationPool);
+            callFrame.sdkFrame.location(), this.executionLineChanged.bind(this), this.liveLocationPool);
   }
 
   private async updateDebuggerButtonsAndStatus(): Promise<void> {

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -11,7 +11,7 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Icon} from '../../ui/kit/kit.js';
+import {Icon, Link} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html} from '../../ui/lit/lit.js';
@@ -639,7 +639,7 @@ export class TabbedEditorContainer extends Common.ObjectWrapper.ObjectWrapper<Ev
           tooltip.append(uiI18n.getFormatLocalizedString(
               str_, UIStrings.changesWereNotSavedToFileSystemToSaveAddFolderToWorkspace, {PH1: link}));
         } else {
-          const link = UI.XLink.XLink.create('https://developer.chrome.com/docs/devtools/workspaces/', 'Workspace');
+          const link = Link.create('https://developer.chrome.com/docs/devtools/workspaces/', 'Workspace');
           tooltip.append(uiI18n.getFormatLocalizedString(
               str_, UIStrings.changesWereNotSavedToFileSystemToSaveSetUpYourWorkspace, {PH1: link}));
         }

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

@@ -8,6 +8,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 Breakpoints from '../../models/breakpoints/breakpoints.js';
+import * as StackTrace from '../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as QuickOpen from '../../ui/legacy/components/quick_open/quick_open.js';
@@ -1984,7 +1985,7 @@ UI.Context.registerListener({
 
 UI.Context.registerListener({
   contextTypes() {
-    return [SDK.DebuggerModel.CallFrame];
+    return [StackTrace.StackTrace.DebuggableFrameFlavor];
   },
   async loadListener() {
     const Sources = await loadSourcesModule();

package/front_end/panels/timeline/TimelinePanel.ts

@@ -56,6 +56,7 @@ import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -1340,7 +1341,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const thirdPartyCheckbox =
         this.createSettingCheckbox(this.#thirdPartyTracksSetting, i18nString(UIStrings.showDataAddedByExtensions));
 
-    const localLink = UI.XLink.XLink.create(
+    const localLink = Link.create(
         'https://developer.chrome.com/docs/devtools/performance/extension', i18nString(UIStrings.learnMore));
     // Has to be done in JS because the element is inserted into the
     // checkbox's shadow DOM so any styling into timelinePanel.css would

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -50,6 +50,7 @@ import * as CodeHighlighter from '../../ui/components/code_highlighter/code_high
 // eslint-disable-next-line @devtools/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
@@ -833,8 +834,7 @@ export class TimelineUIUtils {
     }
 
     const html = UI.Fragment.html`<div>${
-        UI.XLink.XLink.create(
-            link, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more')} about ${name}.</div>`;
+        Link.create(link, i18nString(UIStrings.learnMore), undefined, 'learn-more')} about ${name}.</div>`;
     return html as HTMLElement;
   }
 

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

@@ -8,7 +8,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as uiI18n from '../../../ui/i18n/i18n.js';
-import * as UI from '../../../ui/legacy/legacy.js';
+import {Link} from '../../../ui/kit/kit.js';
 
 // *********************************************************************
 // At the moment this file consists of helpers to aid in the rendering
@@ -84,9 +84,9 @@ export function buildWarningElementsForEvent(
     const span = document.createElement('span');
     switch (warning) {
       case 'FORCED_REFLOW': {
-        const forcedReflowLink = UI.XLink.XLink.create(
+        const forcedReflowLink = Link.create(
             'https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts',
-            i18nString(UIStrings.forcedReflow), undefined, undefined, 'forced-reflow');
+            i18nString(UIStrings.forcedReflow), undefined, 'forced-reflow');
         span.appendChild(
             uiI18n.getFormatLocalizedString(str_, UIStrings.sIsALikelyPerformanceBottleneck, {PH1: forcedReflowLink}));
         break;
@@ -102,16 +102,16 @@ export function buildWarningElementsForEvent(
       }
 
       case 'LONG_TASK': {
-        const longTaskLink = UI.XLink.XLink.create(
-            'https://web.dev/optimize-long-tasks/', i18nString(UIStrings.longTask), undefined, undefined, 'long-tasks');
+        const longTaskLink = Link.create(
+            'https://web.dev/optimize-long-tasks/', i18nString(UIStrings.longTask), undefined, 'long-tasks');
         span.appendChild(uiI18n.getFormatLocalizedString(
             str_, UIStrings.sTookS,
             {PH1: longTaskLink, PH2: i18n.TimeUtilities.millisToString((duration || 0), true)}));
         break;
       }
       case 'LONG_INTERACTION': {
-        const longInteractionINPLink = UI.XLink.XLink.create(
-            'https://web.dev/inp', i18nString(UIStrings.longInteractionINP), undefined, undefined, 'long-interaction');
+        const longInteractionINPLink =
+            Link.create('https://web.dev/inp', i18nString(UIStrings.longInteractionINP), undefined, 'long-interaction');
         span.appendChild(uiI18n.getFormatLocalizedString(
             str_, UIStrings.sIsLikelyPoorPageResponsiveness, {PH1: longInteractionINPLink}));
         break;