chrome-devtools-frontend 1.0.1555174 → 1.0.1555430

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -40,7 +40,7 @@ export interface Message {
   params?: MessageParams|null;
 }
 
-interface EventMessage extends Message {
+export interface EventMessage extends Message {
   method: QualifiedName;
   params?: MessageParams|null;
 }

package/front_end/core/root/Runtime.ts

@@ -389,7 +389,6 @@ export interface HostConfigFreestyler {
   multimodal?: boolean;
   multimodalUploadInput?: boolean;
   functionCalling?: boolean;
-  featureName?: string;
 }
 
 export interface HostConfigAiAssistanceNetworkAgent {
@@ -397,7 +396,6 @@ export interface HostConfigAiAssistanceNetworkAgent {
   temperature: number;
   enabled: boolean;
   userTier: string;
-  featureName?: string;
 }
 
 export interface HostConfigAiAssistancePerformanceAgent {
@@ -405,7 +403,6 @@ export interface HostConfigAiAssistancePerformanceAgent {
   temperature: number;
   enabled: boolean;
   userTier: string;
-  featureName?: string;
 }
 
 export interface HostConfigAiAssistanceFileAgent {
@@ -413,7 +410,6 @@ export interface HostConfigAiAssistanceFileAgent {
   temperature: number;
   enabled: boolean;
   userTier: string;
-  featureName?: string;
 }
 
 export interface HostConfigAiCodeCompletion {

package/front_end/core/sdk/DOMModel.ts

@@ -108,7 +108,15 @@ export const ARIA_ATTRIBUTES = new Set<string>([
   'aria-valuetext',
 ]);
 
-export class DOMNode {
+export enum DOMNodeEvents {
+  TOP_LAYER_INDEX_CHANGED = 'TopLayerIndexChanged',
+}
+
+export interface DOMNodeEventTypes {
+  [DOMNodeEvents.TOP_LAYER_INDEX_CHANGED]: void;
+}
+
+export class DOMNode extends Common.ObjectWrapper.ObjectWrapper<DOMNodeEventTypes> {
   #domModel: DOMModel;
   #agent: ProtocolProxyApi.DOMApi;
   ownerDocument!: DOMDocument|null;
@@ -162,8 +170,14 @@ export class DOMNode {
   detached = false;
   #retainedNodes?: Set<Protocol.DOM.BackendNodeId>;
   #adoptedStyleSheets: AdoptedStyleSheet[] = [];
+  /**
+   * 1-based index of the node in the top layer. Only set
+   * for non-backdrop nodes.
+   */
+  #topLayerIndex = -1;
 
   constructor(domModel: DOMModel) {
+    super();
     this.#domModel = domModel;
     this.#agent = this.#domModel.getAgent();
   }
@@ -285,6 +299,18 @@ export class DOMNode {
     return await (childModel?.requestDocument() || null);
   }
 
+  setTopLayerIndex(idx: number): void {
+    const oldIndex = this.#topLayerIndex;
+    this.#topLayerIndex = idx;
+    if (oldIndex !== idx) {
+      this.dispatchEventToListeners(DOMNodeEvents.TOP_LAYER_INDEX_CHANGED);
+    }
+  }
+
+  topLayerIndex(): number {
+    return this.#topLayerIndex;
+  }
+
   isAdFrameNode(): boolean {
     if (this.isIframe() && this.#frameOwnerFrameId) {
       const frame = FrameManager.instance().getFrame(this.#frameOwnerFrameId);
@@ -1203,10 +1229,16 @@ export class DOMNodeShortcut {
   nodeType: number;
   nodeName: string;
   deferredNode: DeferredDOMNode;
-  constructor(target: Target, backendNodeId: Protocol.DOM.BackendNodeId, nodeType: number, nodeName: string) {
+  // Shortctus to elements that children of the element this shortcut is for.
+  // Currently, use for backdrop elements in the top layer.«
+  childShortcuts: DOMNodeShortcut[] = [];
+  constructor(
+      target: Target, backendNodeId: Protocol.DOM.BackendNodeId, nodeType: number, nodeName: string,
+      childShortcuts: DOMNodeShortcut[] = []) {
     this.nodeType = nodeType;
     this.nodeName = nodeName;
     this.deferredNode = new DeferredDOMNode(target, backendNodeId);
+    this.childShortcuts = childShortcuts;
   }
 }
 
@@ -1241,6 +1273,9 @@ export class DOMModel extends SDKModel<EventTypes> {
   #frameOwnerNode?: DOMNode|null;
   #loadNodeAttributesTimeout?: number;
   #searchId?: string;
+  #topLayerThrottler = new Common.Throttler.Throttler(100);
+  #topLayerNodes: DOMNode[] = [];
+
   constructor(target: Target) {
     super(target);
 
@@ -1621,10 +1656,6 @@ export class DOMModel extends SDKModel<EventTypes> {
     this.dispatchEventToListeners(Events.AffectedByStartingStylesFlagUpdated, {node});
   }
 
-  topLayerElementsUpdated(): void {
-    this.dispatchEventToListeners(Events.TopLayerElementsChanged);
-  }
-
   pseudoElementRemoved(parentId: Protocol.DOM.NodeId, pseudoElementId: Protocol.DOM.NodeId): void {
     const parent = this.idToDOMNode.get(parentId);
     if (!parent) {
@@ -1730,6 +1761,69 @@ export class DOMModel extends SDKModel<EventTypes> {
     return this.agent.invoke_getTopLayerElements().then(({nodeIds}) => nodeIds);
   }
 
+  topLayerElementsUpdated(): void {
+    void this.#topLayerThrottler.schedule(async () => {
+      // This returns top layer nodes for all local frames.
+      const result = await this.agent.invoke_getTopLayerElements();
+      if (result.getError()) {
+        return;
+      }
+      // Re-set indexes as we re-create top layer nodes list.
+      const previousDocs = new Set<DOMDocument>();
+      for (const node of this.#topLayerNodes) {
+        node.setTopLayerIndex(-1);
+        if (node.ownerDocument) {
+          previousDocs.add(node.ownerDocument);
+        }
+      }
+      this.#topLayerNodes.splice(0);
+      const nodes: DOMNode[] =
+          result.nodeIds.map(id => this.idToDOMNode.get(id)).filter((node): node is DOMNode => Boolean(node));
+      const nodesByDocument = new Map<DOMDocument, DOMNode[]>();
+      for (const node of nodes) {
+        const document = node.ownerDocument;
+        if (!document) {
+          continue;
+        }
+        if (!nodesByDocument.has(document)) {
+          nodesByDocument.set(document, []);
+        }
+        nodesByDocument.get(document)?.push(node);
+      }
+      for (const [document, nodes] of nodesByDocument) {
+        let topLayerIdx = 1;
+        const documentShortcuts = [];
+        for (const [idx, node] of nodes.entries()) {
+          if (node.nodeName() === '::backdrop') {
+            continue;
+          }
+          const childShortcuts = [];
+          const previousNode = result.nodeIds[idx - 1] ? this.idToDOMNode.get(result.nodeIds[idx - 1]) : null;
+          if (previousNode && previousNode.nodeName() === '::backdrop') {
+            childShortcuts.push(
+                new DOMNodeShortcut(this.target(), previousNode.backendNodeId(), 0, previousNode.nodeName()));
+          }
+          const shortcut = new DOMNodeShortcut(this.target(), node.backendNodeId(), 0, node.nodeName(), childShortcuts);
+          node.setTopLayerIndex(topLayerIdx++);
+          this.#topLayerNodes.push(node);
+          documentShortcuts.push(shortcut);
+          previousDocs.delete(document);
+        }
+        this.dispatchEventToListeners(Events.TopLayerElementsChanged, {
+          document,
+          documentShortcuts,
+        });
+      }
+      // Emit empty events for documents that are no longer in the top layer.
+      for (const document of previousDocs) {
+        this.dispatchEventToListeners(Events.TopLayerElementsChanged, {
+          document,
+          documentShortcuts: [],
+        });
+      }
+    });
+  }
+
   getDetachedDOMNodes(): Promise<Protocol.DOM.DetachedElementInfo[]|null> {
     return this.agent.invoke_getDetachedDomNodes().then(({detachedNodes}) => detachedNodes);
   }
@@ -1823,7 +1917,7 @@ export interface EventTypes {
   [Events.ChildNodeCountUpdated]: DOMNode;
   [Events.DistributedNodesChanged]: DOMNode;
   [Events.MarkersChanged]: DOMNode;
-  [Events.TopLayerElementsChanged]: void;
+  [Events.TopLayerElementsChanged]: {document: DOMDocument, documentShortcuts: DOMNodeShortcut[]};
   [Events.ScrollableFlagUpdated]: {node: DOMNode};
   [Events.AffectedByStartingStylesFlagUpdated]: {node: DOMNode};
   [Events.AdoptedStyleSheetsModified]: DOMNode;

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -9,7 +9,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Tracing from '../../../services/tracing/tracing.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';
 import {

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -8,7 +8,7 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import {ChangeManager} from '../ChangeManager.js';
 import {debugLog} from '../debug.js';
 import {EvaluateAction, formatError, SideEffectError} from '../EvaluateAction.js';

package/front_end/models/ai_assistance/data_formatters/NetworkRequestFormatter.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../../core/sdk/sdk.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import * as Logs from '../../logs/logs.js';
 import * as NetworkTimeCalculator from '../../network_time_calculator/network_time_calculator.js';
 import * as TextUtils from '../../text_utils/text_utils.js';

package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.ts

@@ -4,7 +4,7 @@
 
 import type * as Platform from '../../../core/platform/platform.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as Annotations from '../../../ui/components/annotations/annotations.js';
+import * as Annotations from '../../annotations/annotations.js';
 import * as CrUXManager from '../../crux-manager/crux-manager.js';
 import type * as SourceMapScopes from '../../source_map_scopes/source_map_scopes.js';
 import * as Trace from '../../trace/trace.js';

package/front_end/{ui/components → models}/annotations/AnnotationRepository.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Common from '../../../core/common/common.js';
-import * as Root from '../../../core/root/root.js';
-import type * as SDK from '../../../core/sdk/sdk.js';
+import * as Common from '../../core/common/common.js';
+import * as Root from '../../core/root/root.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 
 import {AnnotationType} from './AnnotationType.js';
 

package/front_end/models/annotations/README.md

@@ -0,0 +1,7 @@
+# Annotations Model
+
+**IMPORTANT**: this model exists because on the GreenDev project we prototyped a build of DevTools that is able to add annotations to various parts of the UI.
+
+This feature is only enabled when Chromium is run with the GreenDev feature flag enabled. There are currently NO PLANS to ship this code to production.
+
+If you are reading this and you want to use this code, please speak to jacktfranklin@ first. This code is for a prototype and not in a production state.

package/front_end/models/bindings/DebuggerWorkspaceBinding.ts

@@ -191,6 +191,14 @@ export class DebuggerWorkspaceBinding implements SDK.TargetManager.SDKModelObser
     return await model.createFromProtocolRuntime(stackTrace, this.#translateRawFrames.bind(this));
   }
 
+  async createStackTraceFromDebuggerPaused(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      target: SDK.Target.Target): Promise<StackTrace.StackTrace.DebuggableStackTrace> {
+    const model =
+        target.model(StackTraceImpl.StackTraceModel.StackTraceModel) as StackTraceImpl.StackTraceModel.StackTraceModel;
+    return await model.createFromDebuggerPaused(pausedDetails, this.#translateRawFrames.bind(this));
+  }
+
   async createLiveLocation(
       rawLocation: SDK.DebuggerModel.Location, updateDelegate: (arg0: LiveLocation) => Promise<void>,
       locationPool: LiveLocationPool): Promise<Location|null> {

package/front_end/models/stack_trace/StackTrace.ts

@@ -6,8 +6,11 @@ import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Workspace from '../workspace/workspace.js';
 
-export interface StackTrace extends Common.EventTarget.EventTarget<EventTypes> {
-  readonly syncFragment: Fragment;
+export type StackTrace = BaseStackTrace<Fragment>;
+export type DebuggableStackTrace = BaseStackTrace<DebuggableFragment>;
+
+export interface BaseStackTrace<SyncFragmentT extends Fragment> extends Common.EventTarget.EventTarget<EventTypes> {
+  readonly syncFragment: SyncFragmentT;
   readonly asyncFragments: readonly AsyncFragment[];
 }
 
@@ -19,6 +22,10 @@ export interface AsyncFragment extends Fragment {
   readonly description: string;
 }
 
+export interface DebuggableFragment {
+  readonly frames: readonly DebuggableFrame[];
+}
+
 export interface Frame {
   readonly url?: string;
   readonly uiSourceCode?: Workspace.UISourceCode.UISourceCode;
@@ -29,6 +36,10 @@ export interface Frame {
   readonly missingDebugInfo?: MissingDebugInfo;
 }
 
+export interface DebuggableFrame extends Frame {
+  readonly sdkFrame: SDK.DebuggerModel.CallFrame;
+}
+
 export const enum MissingDebugInfoType {
   /** No debug information at all for the call frame */
   NO_INFO = 'NO_INFO',

package/front_end/models/stack_trace/StackTraceImpl.ts

@@ -3,29 +3,36 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
+import type * as SDK from '../../core/sdk/sdk.js';
 import type * as Workspace from '../workspace/workspace.js';
 
 import type * as StackTrace from './stack_trace.js';
 import type {FrameNode} from './Trie.js';
 
-export class StackTraceImpl extends Common.ObjectWrapper.ObjectWrapper<StackTrace.StackTrace.EventTypes> implements
-    StackTrace.StackTrace.StackTrace {
-  readonly syncFragment: FragmentImpl;
+export type AnyStackTraceImpl = StackTraceImpl<FragmentImpl|DebuggableFragmentImpl>;
+
+export class StackTraceImpl<SyncFragmentT extends FragmentImpl|DebuggableFragmentImpl = FragmentImpl> extends
+    Common.ObjectWrapper.ObjectWrapper<StackTrace.StackTrace.EventTypes> implements
+        StackTrace.StackTrace.BaseStackTrace<SyncFragmentT> {
+  readonly syncFragment: SyncFragmentT;
   readonly asyncFragments: readonly AsyncFragmentImpl[];
 
-  constructor(syncFragment: FragmentImpl, asyncFragments: AsyncFragmentImpl[]) {
+  constructor(syncFragment: SyncFragmentT, asyncFragments: AsyncFragmentImpl[]) {
     super();
     this.syncFragment = syncFragment;
     this.asyncFragments = asyncFragments;
 
-    syncFragment.stackTraces.add(this);
+    const fragment =
+        syncFragment instanceof DebuggableFragmentImpl ? syncFragment.fragment : syncFragment as FragmentImpl;
+    fragment.stackTraces.add(this);
+
     this.asyncFragments.forEach(asyncFragment => asyncFragment.fragment.stackTraces.add(this));
   }
 }
 
 export class FragmentImpl implements StackTrace.StackTrace.Fragment {
   readonly node: FrameNode;
-  readonly stackTraces = new Set<StackTraceImpl>();
+  readonly stackTraces = new Set<AnyStackTraceImpl>();
 
   /**
    * Fragments are deduplicated based on the node.
@@ -83,3 +90,71 @@ export class FrameImpl implements StackTrace.StackTrace.Frame {
     this.missingDebugInfo = missingDebugInfo;
   }
 }
+
+/**
+ * A DebuggableFragmentImpl wraps an existing FragmentImpl. This is important: We can pause at the
+ * same location multiple times and the paused information changes each and everytime while the underlying
+ * FragmentImpl will stay the same.
+ */
+export class DebuggableFragmentImpl implements StackTrace.StackTrace.DebuggableFragment {
+  constructor(readonly fragment: FragmentImpl, private readonly callFrames: SDK.DebuggerModel.CallFrame[]) {
+  }
+
+  get frames(): DebuggableFrameImpl[] {
+    const frames: DebuggableFrameImpl[] = [];
+
+    let index = 0;
+    for (const node of this.fragment.node.getCallStack()) {
+      for (const frame of node.frames) {
+        // Each inlined frame gets the same DebugerModel.CallFrame for debugging.
+        frames.push(new DebuggableFrameImpl(frame, this.callFrames[index]));
+      }
+      index++;
+    }
+
+    return frames;
+  }
+}
+
+/**
+ * A DebuggableFrameImpl wraps an existing FrameImpl. This is important: We can pause at the
+ * same location multiple times and the paused information changes each and everytime while the underlying
+ * FrameImpl will stay the same.
+ */
+export class DebuggableFrameImpl implements StackTrace.StackTrace.DebuggableFrame {
+  readonly #frame: FrameImpl;
+  readonly #sdkFrame: SDK.DebuggerModel.CallFrame;
+
+  constructor(frame: FrameImpl, sdkFrame: SDK.DebuggerModel.CallFrame) {
+    this.#frame = frame;
+    this.#sdkFrame = sdkFrame;
+  }
+
+  get url(): string|undefined {
+    return this.#frame.url;
+  }
+
+  get uiSourceCode(): Workspace.UISourceCode.UISourceCode|undefined {
+    return this.#frame.uiSourceCode;
+  }
+
+  get name(): string|undefined {
+    return this.#frame.name;
+  }
+
+  get line(): number {
+    return this.#frame.line;
+  }
+
+  get column(): number {
+    return this.#frame.column;
+  }
+
+  get missingDebugInfo(): StackTrace.StackTrace.MissingDebugInfo|undefined {
+    return this.#frame.missingDebugInfo;
+  }
+
+  get sdkFrame(): SDK.DebuggerModel.CallFrame {
+    return this.#sdkFrame;
+  }
+}

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -7,7 +7,14 @@ import type * as Protocol from '../../generated/protocol.js';
 
 // eslint-disable-next-line @devtools/es-modules-import
 import * as StackTrace from './stack_trace.js';
-import {AsyncFragmentImpl, FragmentImpl, FrameImpl, StackTraceImpl} from './StackTraceImpl.js';
+import {
+  type AnyStackTraceImpl,
+  AsyncFragmentImpl,
+  DebuggableFragmentImpl,
+  FragmentImpl,
+  FrameImpl,
+  StackTraceImpl
+} from './StackTraceImpl.js';
 import {type FrameNode, type RawFrame, Trie} from './Trie.js';
 
 /**
@@ -45,10 +52,21 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     return new StackTraceImpl(syncFragment, asyncFragments);
   }
 
+  async createFromDebuggerPaused(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<StackTrace.StackTrace.DebuggableStackTrace> {
+    const [syncFragment, asyncFragments] = await Promise.all([
+      this.#createDebuggableFragment(pausedDetails, rawFramesToUIFrames),
+      this.#createAsyncFragments(pausedDetails, rawFramesToUIFrames),
+    ]);
+
+    return new StackTraceImpl(syncFragment, asyncFragments);
+  }
+
   /** Trigger re-translation of all fragments with the provide script in their call stack */
   async scriptInfoChanged(script: SDK.Script.Script, translateRawFrames: TranslateRawFrames): Promise<void> {
     const translatePromises: Array<Promise<unknown>> = [];
-    let stackTracesToUpdate = new Set<StackTraceImpl>();
+    let stackTracesToUpdate = new Set<AnyStackTraceImpl>();
 
     for (const fragment of this.#affectedFragments(script)) {
       // We trigger re-translation only for fragments of leaf-nodes. Any fragment along the ancestor-chain
@@ -75,8 +93,22 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     return fragment;
   }
 
+  async #createDebuggableFragment(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<DebuggableFragmentImpl> {
+    const fragment = this.#createFragment(pausedDetails.callFrames.map(frame => ({
+                                                                         scriptId: frame.script.scriptId,
+                                                                         url: frame.script.sourceURL,
+                                                                         functionName: frame.functionName,
+                                                                         lineNumber: frame.location().lineNumber,
+                                                                         columnNumber: frame.location().columnNumber,
+                                                                       })));
+    await this.#translateFragment(fragment, rawFramesToUIFrames);
+    return new DebuggableFragmentImpl(fragment, pausedDetails.callFrames);
+  }
+
   async #createAsyncFragments(
-      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|Protocol.Debugger.PausedEvent,
+      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|SDK.DebuggerModel.DebuggerPausedDetails,
       rawFramesToUIFrames: TranslateRawFrames): Promise<AsyncFragmentImpl[]> {
     const asyncFragments: AsyncFragmentImpl[] = [];
     const translatePromises: Array<Promise<unknown>> = [];

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -12,10 +12,10 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
@@ -27,6 +27,7 @@ import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
+import {ArtifactsViewer} from './components/ArtifactsViewer.js';
 import {
   type AnswerPart,
   type ChatMessage,
@@ -294,6 +295,8 @@ interface ToolbarViewInput {
   onExportConversationClick: () => void;
   onHelpClick: () => void;
   onSettingsClick: () => void;
+  onArtifactsSidebarToggle: () => void;
+  artifactsSidebarVisible: boolean;
   isLoading: boolean;
   showChatActions: boolean;
   showActiveConversationActions: boolean;
@@ -386,6 +389,13 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           .jslogContext=${'freestyler.settings'}
           .variant=${Buttons.Button.Variant.TOOLBAR}
           @click=${input.onSettingsClick}></devtools-button>
+        <!-- If the green experiment is enabled, render the artifacts sidebar toggle button -->
+        ${Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled ? html`<devtools-button
+          title=${i18nString(UIStrings.settings)}
+          aria-label=${i18nString(UIStrings.settings)}
+          .iconName=${input.artifactsSidebarVisible ? 'left-panel-open' : 'left-panel-close'}
+          .variant=${Buttons.Button.Variant.TOOLBAR}
+          @click=${input.onArtifactsSidebarToggle}></devtools-button>` : Lit.nothing}
       </devtools-toolbar>
     </div>
   `;
@@ -396,8 +406,9 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   // clang-format off
   function renderState(): Lit.TemplateResult {
     switch (input.state) {
-      case ViewState.CHAT_VIEW:
-        return html`<devtools-ai-chat-view
+      case ViewState.CHAT_VIEW: {
+      const aiChatView = html`
+        <devtools-ai-chat-view
           .props=${input.props}
           ${Lit.Directives.ref((el: Element | undefined) => {
             if (!el || !(el instanceof ChatView)) {
@@ -407,6 +418,30 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
             output.chatView = el;
           })}
         ></devtools-ai-chat-view>`;
+        // If the green experiment is enabled, render the chat view inside
+        // a split view to also have an artifacts viewer sidebar.
+        if(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+            return html`
+            <devtools-split-view
+            direction="column"
+            sidebar-visibility=${input.props.isArtifactsSidebarOpen ? 'visible' : 'hidden'}
+            sidebar-position="second"
+            style="width: 100%;"
+          >
+            <div slot="main">
+              ${aiChatView}
+            </div>
+            <div slot="sidebar">
+              <devtools-widget
+              class="fill-panel"
+              .widgetConfig=${UI.Widget.widgetConfig(ArtifactsViewer)}
+              ></devtools-widget>
+            </div>
+          </devtools-split-view>`;
+        }
+
+        return aiChatView;
+      }
       case ViewState.EXPLORE_VIEW:
         return html`<devtools-widget
           class="fill-panel"
@@ -482,7 +517,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
-
+  #isArtifactsSidebarOpen = false;
   // Messages displayed in the `ChatView` component.
   #messages: ChatMessage[] = [];
 
@@ -574,6 +609,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
           markdownRenderer,
+          isArtifactsSidebarOpen: this.#isArtifactsSidebarOpen,
           onTextSubmit: async (
               text: string, imageInput?: Host.AidaClient.Part,
               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
@@ -927,6 +963,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
+      onArtifactsSidebarToggle: () => {
+        this.#isArtifactsSidebarOpen = !this.#isArtifactsSidebarOpen;
+        this.requestUpdate();
+      },
+      artifactsSidebarVisible: this.#isArtifactsSidebarOpen,
     };
   }
 

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

@@ -0,0 +1,57 @@
+// 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 * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import artifactsViewerStyles from './artifactsViewer.css.js';
+
+const {html, render} = Lit;
+
+export interface ViewInput {
+  artifacts: [];
+}
+
+export const DEFAULT_VIEW = (
+    _input: ViewInput,
+    _output: Record<string, unknown>,
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <style>${artifactsViewerStyles}</style>
+      <div>
+        Artifacts Viewer
+      </div>
+    `,
+    target
+  );
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+export class ArtifactsViewer extends UI.Widget.Widget {
+  #view: View;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    void this.requestUpdate();
+  }
+
+  override performUpdate(): Promise<void>|void {
+    this.#view(
+        {
+          artifacts: [],
+        },
+        {},
+        this.contentElement,
+    );
+  }
+}