chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -258,13 +258,20 @@ export class AiCodeGenerationProvider {
     }
 
     this.#aiCodeGenerationCitations = [];
-    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
     const cursor = this.#editor.state.selection.main.head;
-    const query = AiCodeGenerationParser.extractCommentText(this.#editor.state, cursor);
+    const commentNodeInfo = AiCodeGenerationParser.extractCommentNodeInfo(this.#editor.state, cursor);
+    if (!commentNodeInfo) {
+      return;
+    }
+    // Move cursor to end of comment node before triggering generation.
+    this.#editor.dispatch({selection: {anchor: commentNodeInfo.to}});
+
+    const query = commentNodeInfo.text;
     if (!query || query.trim().length === 0) {
       return;
     }
 
+    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
     try {
       const startTime = performance.now();
       this.#aiCodeGenerationConfig?.onRequestTriggered();
@@ -297,7 +304,7 @@ export class AiCodeGenerationProvider {
         effects: [
           setAiAutoCompleteSuggestion.of({
             text: '\n' + suggestionText,
-            from: cursor,
+            from: commentNodeInfo.to,
             rpcGlobalId: generationResponse.metadata.rpcGlobalId,
             sampleId: topSample.sampleId,
             startTime,
@@ -359,14 +366,23 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
       const isEmptyLine = line.length === 0;
       const canShowDiscoveryState =
           UI.UIUtils.PromotionManager.instance().canShowPromotion(PanelCommon.AiCodeGenerationTeaser.PROMOTION_ID);
-      const isComment = Boolean(AiCodeGenerationParser.extractCommentText(this.#view.state, cursorPosition));
-      const isCursorAtEndOfLine = cursorPosition >= line.to;
 
-      if ((isEmptyLine && canShowDiscoveryState) || (isComment && isCursorAtEndOfLine)) {
+      if ((isEmptyLine && canShowDiscoveryState)) {
         return CodeMirror.Decoration.set([
           CodeMirror.Decoration.widget({widget: new AccessiblePlaceholder(teaser), side: 1}).range(cursorPosition),
         ]);
       }
+
+      const commentInfo = AiCodeGenerationParser.extractCommentNodeInfo(this.#view.state, cursorPosition);
+      if (commentInfo) {
+        // If cursor is inside the comment, show at the end of the comment node.
+        // If cursor is after the comment (but on same line), show at the cursor.
+        const decorationPos = Math.max(cursorPosition, commentInfo.to);
+        return CodeMirror.Decoration.set([
+          CodeMirror.Decoration.widget({widget: new AccessiblePlaceholder(teaser), side: 1}).range(decorationPos),
+        ]);
+      }
+
       return CodeMirror.Decoration.none;
     }
 
@@ -397,6 +413,20 @@ function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTea
         // Required for mouse click to propagate to the info tooltip in teaser.
         return (event.target instanceof Node && teaser.contentElement.contains(event.target));
       },
+      keydown(event: KeyboardEvent): boolean {
+        if (!UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(event) ||
+            teaser.displayState !== PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER) {
+          return false;
+        }
+        if (event.key === '.') {
+          event.consume(true);
+          void VisualLogging.logKeyDown(
+              event.currentTarget, event, 'ai-code-generation-teaser.show-disclaimer-info-tooltip');
+          teaser.showTooltip();
+          return true;
+        }
+        return false;
+      }
     },
   });
 }

package/front_end/ui/kit/link/Link.ts

@@ -82,20 +82,7 @@ export class Link extends HTMLElement {
   }
 
   #onJslogContextChange(): void {
-    let jslogContext = this.jslogContext;
-    if (!jslogContext) {
-      try {
-        if (!this.href) {
-          return;
-        }
-        const urlForContext = new URL(this.href);
-        urlForContext.search = '';
-        jslogContext = Platform.StringUtilities.toKebabCase(urlForContext.toString());
-      } catch {
-        return;
-      }
-    }
-
+    const jslogContext = this.jslogContext ?? undefined;
     const jslog = VisualLogging.link().track({click: true, keydown: 'Enter|Space'}).context(jslogContext);
     this.setAttribute('jslog', jslog.toString());
   }

package/front_end/ui/legacy/ActionRegistration.ts

@@ -551,7 +551,7 @@ export interface ActionRegistration {
    * The name of the experiment an action is associated with. Enabling and disabling the declared
    * experiment will enable and disable the action respectively.
    */
-  experiment?: Root.Runtime.ExperimentName;
+  experiment?: Root.ExperimentNames.ExperimentName;
   /**
    * Whether an action needs to be promoted. A new badge is shown next to the menu items then.
    */

package/front_end/ui/legacy/ContextMenu.ts

@@ -1225,7 +1225,7 @@ export interface ProviderRegistration<T> {
   /** A function that asynchronously loads the provider instance. */
   loadProvider: () => Promise<Provider<T>>;
   /** Optional. The experiment that enables this provider. */
-  experiment?: Root.Runtime.ExperimentName;
+  experiment?: Root.ExperimentNames.ExperimentName;
 }
 
 export interface ContextMenuItemRegistration {
@@ -1236,5 +1236,5 @@ export interface ContextMenuItemRegistration {
   /** Optional. A number used for sorting items within the same location. Lower numbers appear first. */
   order?: number;
   /** Optional. The experiment that enables this item. */
-  experiment?: Root.Runtime.ExperimentName;
+  experiment?: Root.ExperimentNames.ExperimentName;
 }

package/front_end/ui/legacy/EmptyWidget.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import {Directives, html, render} from '../lit/lit.js';
@@ -10,7 +12,6 @@ import * as VisualLogging from '../visual_logging/visual_logging.js';
 import emptyWidgetStyles from './emptyWidget.css.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
 import {VBox} from './Widget.js';
-import {XLink} from './XLink.js';
 
 const UIStrings = {
   /**
@@ -45,8 +46,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       <div class="empty-state-header">${input.header}</div>
       <div class="empty-state-description">
         <span>${input.text}</span>
-        ${input.link ? XLink.create(
-            input.link, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more') : ''}
+        ${input.link ? html`<devtools-link href=${input.link} jslogContext=${'learn-more'}>${i18nString(UIStrings.learnMore)}</devtools-link>` : ''}
       </div>
       ${input.extraElements}
     </div>`, target);

package/front_end/ui/legacy/LinkContextMenuProvider.ts

@@ -0,0 +1,42 @@
+// Copyright 2017 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Host from '../../core/host/host.js';
+import * as UIHelpers from '../helpers/helpers.js';
+import {Link} from '../kit/kit.js';
+
+import type {ContextMenu, Provider} from './ContextMenu.js';
+import {
+  copyLinkAddressLabel,
+  openLinkExternallyLabel,
+} from './UIUtils.js';
+import {XLink} from './XLink.js';
+
+/**
+ * We can move this next to the Link after
+ * the x-link is removed and the context menu
+ * is decoupled from the legacy bundle
+ */
+export class LinkContextMenuProvider implements Provider<Node> {
+  appendApplicableItems(_event: Event, contextMenu: ContextMenu, target: Node): void {
+    let targetNode: Node|null = target;
+    while (targetNode && !(targetNode instanceof XLink || targetNode instanceof Link)) {
+      targetNode = targetNode.parentNodeOrShadowHost();
+    }
+    if (!targetNode?.href) {
+      return;
+    }
+    const node: XLink|Link = targetNode;
+    contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
+      if (node.href) {
+        UIHelpers.openInNewTab(node.href);
+      }
+    }, {jslogContext: 'open-in-new-tab'});
+    contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {
+      if (node.href) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(node.href);
+      }
+    }, {jslogContext: 'copy-link-address'});
+  }
+}

package/front_end/ui/legacy/ViewRegistration.ts

@@ -67,7 +67,7 @@ export interface ViewRegistration {
    * The name of the experiment a view is associated with. Enabling and disabling the declared
    * experiment will enable and disable the view respectively.
    */
-  experiment?: Root.Runtime.ExperimentName;
+  experiment?: Root.ExperimentNames.ExperimentName;
   /**
    * A condition is a function that will make the view available if it
    * returns true, and not available, otherwise. Make sure that objects you

package/front_end/ui/legacy/XLink.ts

@@ -2,19 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../core/host/host.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as UIHelpers from '../helpers/helpers.js';
 import * as VisualLogging from '../visual_logging/visual_logging.js';
 
 import * as ARIAUtils from './ARIAUtils.js';
-import type {ContextMenu, Provider} from './ContextMenu.js';
 import {html as xhtml} from './Fragment.js';
 import {Tooltip} from './Tooltip.js';
 import {
-  copyLinkAddressLabel,
   MaxLengthForDisplayedURLs,
-  openLinkExternallyLabel,
 } from './UIUtils.js';
 import {XElement} from './XElement.js';
 
@@ -128,28 +124,5 @@ export class XLink extends XElement {
   }
 }
 
-export class ContextMenuProvider implements Provider<Node> {
-  appendApplicableItems(_event: Event, contextMenu: ContextMenu, target: Node): void {
-    let targetNode: Node|null = target;
-    while (targetNode && !(targetNode instanceof XLink)) {
-      targetNode = targetNode.parentNodeOrShadowHost();
-    }
-    if (!targetNode?.href) {
-      return;
-    }
-    const node: XLink = targetNode;
-    contextMenu.revealSection().appendItem(openLinkExternallyLabel(), () => {
-      if (node.href) {
-        UIHelpers.openInNewTab(node.href);
-      }
-    }, {jslogContext: 'open-in-new-tab'});
-    contextMenu.revealSection().appendItem(copyLinkAddressLabel(), () => {
-      if (node.href) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(node.href);
-      }
-    }, {jslogContext: 'copy-link-address'});
-  }
-}
-
 // eslint-disable-next-line @devtools/enforce-custom-element-prefix
 customElements.define('x-link', XLink);

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -242,7 +242,7 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     this.setVisible(true);
     this.hideNoContrastInfoAvailableMessage();
 
-    const isAPCAEnabled = Root.Runtime.experiments.isEnabled('apca');
+    const isAPCAEnabled = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
 
     const fgColor = this.contrastInfo.color();
     const bgColor = this.contrastInfo.bgColor();

package/front_end/ui/legacy/components/color_picker/ContrastOverlay.ts

@@ -25,7 +25,7 @@ export class ContrastOverlay {
 
     this.contrastRatioSVG = UI.UIUtils.createSVGChild(colorElement, 'svg', 'spectrum-contrast-container fill');
     this.contrastRatioLines = new Map();
-    if (Root.Runtime.experiments.isEnabled('apca')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
       this.contrastRatioLines.set(
           'APCA', UI.UIUtils.createSVGChild(this.contrastRatioSVG, 'path', 'spectrum-contrast-line'));
     } else {
@@ -50,7 +50,8 @@ export class ContrastOverlay {
     if (!this.visible || this.contrastInfo.isNull()) {
       return;
     }
-    if (Root.Runtime.experiments.isEnabled('apca') && this.contrastInfo.contrastRatioAPCA() === null) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA) &&
+        this.contrastInfo.contrastRatioAPCA() === null) {
       return;
     }
     if (!this.contrastInfo.contrastRatio()) {
@@ -90,7 +91,7 @@ export class ContrastRatioLineBuilder {
   }
 
   drawContrastRatioLine(width: number, height: number, level: string): string|null {
-    const isAPCA = Root.Runtime.experiments.isEnabled('apca');
+    const isAPCA = Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA);
     const requiredContrast =
         isAPCA ? this.contrastInfo.contrastRatioAPCAThreshold() : this.contrastInfo.contrastRatioThreshold(level);
     if (!width || !height || requiredContrast === null) {
@@ -139,7 +140,7 @@ export class ContrastRatioLineBuilder {
               Common.ColorUtils.blendColors(Common.Color.Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));
         };
 
-    if (Root.Runtime.experiments.isEnabled('apca')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.APCA)) {
       candidateLuminance = (candidateHSVA: Common.ColorUtils.Color4D) => {
         return Common.ColorUtils.luminanceAPCA(
             Common.ColorUtils.blendColors(Common.Color.Legacy.fromHSVA(candidateHSVA).rgba(), bgRGBA));

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -1252,8 +1252,8 @@ export class ObjectPropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.property.object) {
       contextMenu.appendApplicableItems(this.property.object);
       if (this.property.parent?.object instanceof SDK.RemoteObject.LocalJSONObject) {
-        const propertyValue = typeof this.property.object === 'object' ? JSON.stringify(this.property.object, null, 2) :
-                                                                         this.property.object;
+        const {object: {value}} = this.property;
+        const propertyValue = typeof value === 'object' ? JSON.stringify(value, null, 2) : value;
         const copyValueHandler = (): void => {
           Host.userMetrics.actionTaken(Host.UserMetrics.Action.NetworkPanelCopyValue);
           Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText((propertyValue as string | undefined));

package/front_end/ui/legacy/components/perf_ui/perf_ui-meta.ts

@@ -91,7 +91,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.MEMORY,
-  experiment: Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE,
+  experiment: Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE,
   title: i18nLazyString(UIStrings.liveMemoryAllocationAnnotations),
   settingName: 'memory-live-heap-profile',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/ui/legacy/inspectorCommon.css

@@ -494,7 +494,8 @@ select option {
     font: var(--sys-typescale-body4-regular);
     color: var(--sys-color-on-surface-subtle);
 
-    > x-link {
+    > x-link,
+    > devtools-link {
       white-space: nowrap;
       margin-left: var(--sys-size-3);
     }

package/front_end/ui/legacy/legacy.ts

@@ -24,6 +24,7 @@ import * as InplaceEditor from './InplaceEditor.js';
 import inspectorCommonStyles from './inspectorCommon.css.js';
 import * as InspectorView from './InspectorView.js';
 import * as KeyboardShortcut from './KeyboardShortcut.js';
+import * as LinkContextMenuProvider from './LinkContextMenuProvider.js';
 import * as ListControl from './ListControl.js';
 import * as ListModel from './ListModel.js';
 import * as ListWidget from './ListWidget.js';
@@ -77,6 +78,7 @@ export {
   inspectorCommonStyles,
   InspectorView,
   KeyboardShortcut,
+  LinkContextMenuProvider,
   ListControl,
   ListModel,
   ListWidget,
@@ -105,5 +107,5 @@ export {
   Widget,
   XElement,
   XLink,
-  ZoomManager,
+  ZoomManager
 };

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -354,6 +354,7 @@ export const knownContextValues = new Set([
   'ai-code-completion-teaser.fre',
   'ai-code-generation-disclaimer',
   'ai-code-generation-teaser.info-button',
+  'ai-code-generation-teaser.show-disclaimer-info-tooltip',
   'ai-code-generation-upgrade-dialog.continue',
   'ai-code-generation-upgrade-dialog.manage-in-settings',
   'ai-explorer',
@@ -1740,6 +1741,7 @@ export const knownContextValues = new Set([
   'gdp-profile',
   'gdp-sign-up-dialog',
   'gdp.ai-conversation-count',
+  'gemini-rebranding-dialog-shown',
   'gen-ai-settings-panel',
   'general',
   'generative-ai-terms-of-service',
@@ -3535,7 +3537,7 @@ export const knownContextValues = new Set([
   'show-minimal-safe-area-for-maskable-icons',
   'show-more',
   'show-network-requests',
-  'show-option-tp-expose-internals-in-heap-snapshot',
+  'show-option-to-expose-internals-in-heap-snapshot',
   'show-overrides',
   'show-paint-rects',
   'show-paint-rects-true',
@@ -3803,6 +3805,7 @@ export const knownContextValues = new Set([
   'text-emphasis-color',
   'text-emphasis-position',
   'text-emphasis-style',
+  'text-fit',
   'text-grow',
   'text-indent',
   'text-justify',

package/front_end/ui/visual_logging/LoggingDriver.ts

@@ -266,6 +266,9 @@ export async function process(): Promise<void> {
     const root = nonDomRoots[i];
     for (const {loggable, config, parent, size} of getNonDomLoggables(root)) {
       const loggingState = getOrCreateLoggingState(loggable, config, parent);
+      if (loggingState.impressionLogged) {
+        continue;
+      }
       if (size) {
         loggingState.size = size;
       }

package/package.json

@@ -104,5 +104,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1571007"
+  "version": "1.0.1572937"
 }

package/front_end/models/ai_assistance/ArtifactsManager.ts

@@ -1,67 +0,0 @@
-// Copyright 2025 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import type * as SDK from '../../core/sdk/sdk.js';
-import type * as Trace from '../../models/trace/trace.js';
-import type {InsightKeys} from '../trace/insights/types.js';
-
-export interface InsightArtifact {
-  type: 'insight';
-  insightType: InsightKeys;
-}
-
-export interface NetworkRequestArtifact {
-  type: 'network-request';
-  request: SDK.NetworkRequest.NetworkRequest|Trace.Types.Events.SyntheticNetworkRequest;
-}
-
-export interface FlameChartArtifact {
-  type: 'flamechart';
-  start: Trace.Types.Timing.Micro;
-  end: Trace.Types.Timing.Micro;
-}
-
-export type Artifact = InsightArtifact|NetworkRequestArtifact|FlameChartArtifact;
-
-export class ArtifactAddedEvent extends Event {
-  static readonly eventName = 'artifactadded';
-
-  constructor(public artifact: Artifact) {
-    super(ArtifactAddedEvent.eventName);
-  }
-}
-
-let instance: ArtifactsManager|null = null;
-
-export class ArtifactsManager extends EventTarget {
-  #artifacts: Artifact[] = [];
-
-  static instance(): ArtifactsManager {
-    if (!instance) {
-      instance = new ArtifactsManager();
-    }
-    return instance;
-  }
-
-  static removeInstance(): void {
-    instance = null;
-  }
-
-  private constructor() {
-    super();
-  }
-
-  get artifacts(): Artifact[] {
-    return this.#artifacts;
-  }
-
-  addArtifact(artifact: Artifact): void {
-    this.#artifacts.push(artifact);
-    this.dispatchEvent(new ArtifactAddedEvent(artifact));
-  }
-
-  clear(): void {
-    this.#artifacts = [];
-  }
-}

package/front_end/panels/ai_assistance/components/ArtifactsViewer.ts

@@ -1,183 +0,0 @@
-// Copyright 2025 The Chromium Authors
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-import './CollapsibleAssistanceContentWidget.js';
-import './PerformanceAgentFlameChart.js';
-
-import * as Common from '../../../core/common/common.js';
-import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
-import * as Logs from '../../../models/logs/logs.js';
-import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
-import * as Trace from '../../../models/trace/trace.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
-import * as NetworkForward from '../../network/forward/forward.js';
-import * as Network from '../../network/network.js';
-import * as Insights from '../../timeline/components/insights/insights.js';
-import * as Timeline from '../../timeline/timeline.js';
-
-import artifactsViewerStyles from './artifactsViewer.css.js';
-import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
-
-const {html, render} = Lit;
-
-export interface ViewInput {
-  artifacts: AiAssistanceModel.ArtifactsManager.Artifact[];
-  parsedTrace: Trace.TraceModel.ParsedTrace;
-}
-
-export function renderArtifact(
-    artifact: AiAssistanceModel.ArtifactsManager.Artifact, parsedTrace: Trace.TraceModel.ParsedTrace): Lit.LitTemplate {
-  switch (artifact.type) {
-      // clang-format off
-    case 'insight': {
-      const insightRenderer = new Insights.InsightRenderer.InsightRenderer();
-      const componentName = artifact.insightType;
-      const insightSet = parsedTrace.insights?.values().next().value;
-      const insightModel = insightSet?.model[componentName as Trace.Insights.Types.InsightKeys];
-
-      if (!insightModel) {
-        return Lit.nothing;
-      }
-
-      return html`
-        <devtools-collapsible-assistance-content-widget .data=${{
-          headerText: `Insight - ${componentName}`,
-          onReveal: () => {
-            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
-              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightModel);
-            });
-          },
-        }}>
-          ${insightRenderer.renderInsightToWidgetElement(parsedTrace, insightSet, insightModel, componentName, {
-            selected: true,
-            isAIAssistanceContext: true,
-          })}
-        </devtools-collapsible-assistance-content-widget>`;
-    }
-    case 'network-request': {
-      const networkRequest = artifact.request;
-      if ('args' in networkRequest && Trace.Types.Events.isSyntheticNetworkRequest(networkRequest)) {
-        const calculator = new NetworkTimeCalculator.NetworkTimeCalculator(true);
-        const sdkRequest = Logs.NetworkLog.NetworkLog.instance()
-                               .requestsForId(networkRequest.args.data.requestId)
-                               .find(r => r.url() === networkRequest.args.data.url) ??
-            null;
-        if (!sdkRequest) {
-          return Lit.nothing;
-        }
-        return html`
-        <devtools-collapsible-assistance-content-widget
-          .data=${{
-            headerText: `Network Request: ${
-              sdkRequest.url().length > 80 ? sdkRequest.url().slice(0, 80) + '...' : sdkRequest.url()}`,
-            onReveal: () => {
-              void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
-                void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-                    sdkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
-              });
-            },
-          }}>
-          <devtools-widget class="actions" .widgetConfig=${UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
-            request: sdkRequest,
-            calculator,
-          })}></devtools-widget>
-        </devtools-collapsible-assistance-content-widget>`;
-      }
-      return Lit.nothing;
-    }
-    case 'flamechart': {
-      return html`
-        <devtools-collapsible-assistance-content-widget .data=${{
-          headerText: `Flamechart`,
-          onReveal: () => {
-            // eslint-disable-next-line no-console
-            console.log('Reveal flamechart', artifact.start, artifact.end);
-          },
-        }}>
-          <devtools-performance-agent-flame-chart .data=${{
-            parsedTrace,
-            start: artifact.start,
-            end: artifact.end,
-          } as PerformanceAgentFlameChart.PerformanceAgentFlameChartData}>
-          </devtools-performance-agent-flame-chart>
-        </devtools-collapsible-assistance-content-widget>`;
-    }
-    default:
-      return Lit.nothing;
-      // clang-format on
-  }
-}
-
-export const DEFAULT_VIEW = (
-    input: ViewInput,
-    _output: Record<string, unknown>,
-    target: HTMLElement,
-    ): void => {
-  // clang-format off
-  render(
-    html`
-      <style>${artifactsViewerStyles}</style>
-      <div class="artifacts-viewer">
-        ${input.artifacts.map(artifact => renderArtifact(artifact, input.parsedTrace))}
-      </div>
-    `,
-    target
-  );
-  // clang-format on
-};
-
-export type View = typeof DEFAULT_VIEW;
-
-export class ArtifactsViewer extends UI.Widget.Widget {
-  #view: View;
-  #parsedTrace: Trace.TraceModel.ParsedTrace|null;
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
-    super(element);
-    this.#view = view;
-    this.#parsedTrace = null;
-  }
-
-  override wasShown(): void {
-    super.wasShown();
-    AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().addEventListener(
-        AiAssistanceModel.ArtifactsManager.ArtifactAddedEvent.eventName,
-        () => {
-          if (this.#parsedTrace) {
-            this.performUpdate();
-          }
-        },
-    );
-
-    UI.Context.Context.instance().addFlavorChangeListener(
-        AiAssistanceModel.AIContext.AgentFocus,
-        ({data}) => {
-          this.#parsedTrace = data.parsedTrace;
-          if (this.#parsedTrace) {
-            this.performUpdate();
-          }
-        },
-    );
-
-    const focus = UI.Context.Context.instance().flavor(AiAssistanceModel.AIContext.AgentFocus);
-    if (focus) {
-      this.#parsedTrace = focus.parsedTrace;
-      this.performUpdate();
-    }
-  }
-
-  override performUpdate(): void {
-    if (!this.#parsedTrace) {
-      return;
-    }
-    this.#view(
-        {
-          artifacts: AiAssistanceModel.ArtifactsManager.ArtifactsManager.instance().artifacts,
-          parsedTrace: this.#parsedTrace,
-        },
-        {},
-        this.contentElement,
-    );
-  }
-}