chrome-devtools-frontend 1.0.1616061 → 1.0.1621064

package/AUTHORS

@@ -56,6 +56,7 @@ Jeffrey Chen <jeffreyca16@gmail.com>
 Jerome Vouillon <jerome.vouillon@gmail.com>
 Jesper van den Ende <jespertheend@gmail.com>
 Jithil p Ponnan <jithil.p@gmail.com>
+Joseph P <thepigrammer@gmail.com>
 Juba Borgohain <chromiumjuba@gmail.com>
 Julian Geppert <spctstr@gmail.com>
 Junseo Yoo <joon.yoo181@berkeley.edu>

package/docs/checklist/README.md

@@ -4,12 +4,11 @@
 
 **Shipping new Web Platform features (WPFs) in Chromium requires tooling support.**
 
-Many new Web Platform Features (WPFs) can piggyback off of DevTools' general tooling for HTML, DOM, CSS, JavaScript,
-WebAssembly, Network, and other aspects — requiring only minimal or no changes to make DevTools behave as expected
-in light of the new WPF. This document refers to such cases as _basic support_.
+A feature is *debuggable* if developers can use DevTools (including the classic Chrome DevTools UI *and* [Chrome DevTools for agents](https://github.com/ChromeDevTools/chrome-devtools-mcp)) to more easily identify and fix a bug related to this feature. In some cases, debuggability is important for feature adoption, especially when a feature is complex by nature.
 
-However, some WPFs might warrant larger changes, including brand-new DevTools features. This document refers to such
-cases as _extended support_.
+Many new Web Platform Features (WPFs) can piggyback off of DevTools' general tooling for HTML, DOM, CSS, JavaScript, WebAssembly, Network, and other aspects — requiring only minimal or no changes to make DevTools behave as expected in light of the new WPF. This document refers to such cases as _basic support_.
+
+However, some WPFs might warrant larger changes, including brand-new DevTools features. This document refers to such cases as _extended support_.
 
 **What is basic support?**
 Basic support ensures that a new WPF is introspectable and DevTools does not break or crash Chromium in its presence. In addition, developers should have a way of knowing if their web application uses this WPF correctly. Definitions and examples of basic support for common WPF categories can be found below.
@@ -59,6 +58,7 @@ This is often automatically supported because the Elements panel directly reflec
 This is often automatically supported because the DevTools Console has access to the same JavaScript runtime as the page. Any property that is programmatically accessible on a DOM object will be discoverable by the Console's autocomplete mechanism.
 
 Verify that the new properties show up in the DevTools Console autocomplete functionality. To enable argument hints for new or changed parameterized functions, run
+
 ```bash
 devtools-frontend/src/scripts/deps/roll_deps.py
 ```
@@ -114,6 +114,7 @@ Any new CSS property that is applied to an element should also appear correctly
 
 To recognize new CSS properties/values in the DevTools Styles tab’s autocomplete functionality, roll
 [Chromium’s `css_properties.json5`](https://source.chromium.org/chromium/chromium/src/+/main:third\_party/blink/renderer/core/css/css_properties.json5;drc=be2c473625b9c28a4ff6735547cb0c1b6743f4ae) into the `devtools-frontend` repository by running
+
 ```bash
 devtools-frontend/src/scripts/deps/roll_deps.py
 ```
@@ -123,7 +124,7 @@ see this [example CL](https://chromium-review.googlesource.com/c/devtools/devtoo
 
 Additionally, verify that the Styles tab tooltips showing the property's definition and baseline status are correct and up-to-date. Otherwise, let DevTools team know that this should be updated.
 
-### New CSS Functions and Value Indirection
+### New CSS functions and value indirection
 
 > **Basic support requirement:** The new function or value mechanism is correctly parsed and displayed in the Styles tab, showing the *authored* value (e.g., `var(--my-color)`). Hovering over the value should reveal its computed result in a tooltip. The function name should also be autocompleted.
 
@@ -135,7 +136,7 @@ Support for new CSS functions and other forms of value indirection (like CSS cus
 
 Support for new pseudo-elements is not automatic. The browser's backend must be updated to expose the new pseudo-element over the Chrome DevTools Protocol (CDP). Additionally, the DevTools frontend must be updated to recognize and display these pseudo-elements in the Elements panel.
 
-Pointers: [InspectorDOMAgent's supported pesudos](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/inspector/inspector_dom_agent.cc;l=122;drc=90e6a37b7c43154ea99d7cc7ff632ee181078fb2), [InspectorStyleResolver's list of supported pseudo-elements](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/inspector/inspector_style_resolver.cc;l=57-71;drc=c182cb38dc164e2b83c75cdf8699b076dfe6bc5e), and [DevTools Frontend DOMModel updates example CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6195233).
+Pointers: [`InspectorDOMAgent`’s supported pseudos](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/inspector/inspector_dom_agent.cc;l=122;drc=90e6a37b7c43154ea99d7cc7ff632ee181078fb2), [`InspectorStyleResolver`’s list of supported pseudo-elements](https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/inspector/inspector_style_resolver.cc;l=57-71;drc=c182cb38dc164e2b83c75cdf8699b076dfe6bc5e), and [DevTools Frontend `DOMModel` updates example CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6195233).
 
 
 ## Network-related features

package/eslint.config.mjs

@@ -899,6 +899,13 @@ export default defineConfig([
       '@devtools/canvas-context-tracking': 'error',
     },
   },
+  {
+    name: 'AI Assistance agents',
+    files: ['front_end/models/ai_assistance/agents/**/*.ts'],
+    rules: {
+      '@devtools/no-dynamic-preamble': 'error',
+    },
+  },
   {
     name: 'TypeScript type-definitions',
     files: ['**/*.d.ts'],

package/front_end/core/common/Object.ts

@@ -115,9 +115,14 @@ export class ObjectWrapper<Events> implements EventTarget<Events> {
   }
 }
 
+export type EventMixinBase = {
+  dispatchDOMEvent ? (event: Event) : void,
+}&object;
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function eventMixin<Events, Base extends Platform.Constructor.Constructor<object>>(base: Base) {
-  console.assert(base !== HTMLElement);
+export function eventMixin<Events, Base extends Platform.Constructor.Constructor<EventMixinBase>>(base: Base) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  console.assert(base as any !== HTMLElement);
   return class EventHandling extends base implements EventTarget<Events> {
     // Note that the weird name is due to TSC disallowing private/protected fields in
     // anonmous exported classes. We use a `__` prefix to prevent clashes with `base`.
@@ -147,6 +152,10 @@ export function eventMixin<Events, Base extends Platform.Constructor.Constructor
         eventType: Platform.TypeScriptUtilities.NoUnion<T>,
         ...eventData: EventPayloadToRestParameters<Events, T>): void {
       this.__events.dispatchEventToListeners(eventType, ...eventData);
+
+      if (typeof this.dispatchDOMEvent === 'function') {
+        this.dispatchDOMEvent(new CustomEvent(eventType as string, {detail: eventData[0]}));
+      }
     }
   };
 }

package/front_end/core/dom_extension/DOMExtension.ts

@@ -159,7 +159,7 @@ Node.prototype.window = function(): Window {
   return this.ownerDocument.defaultView as Window;
 };
 
-Element.prototype.removeChildren = function(): void {
+Node.prototype.removeChildren = function(): void {
   if (this.firstChild) {
     this.textContent = '';
   }
@@ -261,25 +261,28 @@ Node.prototype.childTextNodes = function(): Node[] {
   }
   return result;
 };
-
 function innerTextDescendants(node: Node): Node[] {
-  if (![Node.ELEMENT_NODE, Node.TEXT_NODE].includes(node.nodeType) || ['SCRIPT', 'STYLE'].includes(node.nodeName)) {
+  if (![Node.ELEMENT_NODE, Node.TEXT_NODE, Node.DOCUMENT_FRAGMENT_NODE].includes(node.nodeType) ||
+      ['SCRIPT', 'STYLE'].includes(node.nodeName)) {
     return [];
   }
-  if (!(node instanceof HTMLElement)) {
-    return [node];
-  }
   if (node instanceof HTMLSlotElement) {
     return [...node.assignedNodes()].flatMap(innerTextDescendants);
   }
-  if (node.shadowRoot) {
+  if (node instanceof Element && node.shadowRoot) {
     return [...node.shadowRoot.childNodes].flatMap(innerTextDescendants);
   }
+  if (node instanceof DocumentFragment) {
+    return [...node.childNodes].flatMap(innerTextDescendants);
+  }
+  if (!(node instanceof HTMLElement)) {
+    return [node];
+  }
   const result: Node[] = [];
   let expanded = false;
   for (const child of node.childNodes) {
     const childResult = innerTextDescendants(child);
-    if (childResult.length > 1 || childResult.length === 1 && childResult[0] !== child) {
+    if (childResult.length > 1 || (childResult.length === 1 && childResult[0] !== child)) {
       expanded = true;
     }
     result.push(...childResult);

package/front_end/core/host/AidaClient.ts

@@ -426,6 +426,14 @@ export function convertToUserTierEnum(userTier: string|undefined): UserTier {
   return UserTier.PUBLIC;
 }
 
+export function getClientFeatureName(feature: ClientFeature): string {
+  const name = ClientFeature[feature];
+  if (typeof name !== 'string') {
+    throw new Error(`Invalid ClientFeature: ${feature}`);
+  }
+  return name;
+}
+
 let hostConfigTrackerInstance: HostConfigTracker|undefined;
 
 export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {

package/front_end/core/host/AidaGcaTranslation.ts

@@ -180,6 +180,7 @@ export function aidaCompletionRequestToGcaRequest(request: AIDA.CompletionReques
         (request.additional_files ?? []).map(f => ({
                                                fileUri: f.path,
                                                inclusionReason: [AidaReasonToGcaInclusionReason[f.included_reason]],
+                                               segments: [{content: f.content, isSelected: false}],
                                              }));
 
     const inEditorFile: GCA.SourceFile = inFileEditRequestToSourceFile(request);

package/front_end/core/host/UserMetrics.ts

@@ -814,7 +814,6 @@ export enum DevtoolsExperiments {
   'capture-node-creation-stacks' = 1,
   'live-heap-profile' = 11,
   'protocol-monitor' = 13,
-  'sampling-heap-profiler-timeline' = 17,
   'timeline-invalidation-tracking' = 26,
   'font-editor' = 41,
   'instrumentation-breakpoints' = 61,

package/front_end/core/platform/api/HostRuntime.ts

@@ -25,7 +25,7 @@ export interface Worker {
   set onerror(listener: (event: any) => void);
 }
 
-type WorkerMessagePort = typeof MessagePort.prototype;
+export type WorkerMessagePort = typeof MessagePort.prototype;
 
 /**
  * Currently we only transfer MessagePorts to workers, but it's possible to add
@@ -37,7 +37,7 @@ export type WorkerTransferable = WorkerMessagePort;
  * Used by workers to communicate with their parent.
  */
 export interface WorkerScope {
-  postMessage(message: unknown): void;
+  postMessage(message: unknown, transfer?: WorkerTransferable[]): void;
   set onmessage(listener: (event: WorkerMessageEvent) => Promise<void>| void);
 }
 

package/front_end/core/platform/browser/HostRuntime.ts

@@ -5,8 +5,10 @@
 import type * as Api from '../api/api.js';
 
 class WebWorkerScope implements Api.HostRuntime.WorkerScope {
-  postMessage(message: unknown): void {
-    self.postMessage(message);
+  postMessage(message: unknown, transfer?: Api.HostRuntime.WorkerTransferable[]): void {
+    // Type for frame.postMessage is conflicting here.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    self.postMessage(message, transfer as any);
   }
 
   set onmessage(listener: (event: Api.HostRuntime.WorkerMessageEvent) => Promise<void>| void) {

package/front_end/core/platform/node/HostRuntime.ts

@@ -7,8 +7,8 @@ import * as WorkerThreads from 'node:worker_threads';
 import type * as Api from '../api/api.js';
 
 class NodeWorkerScope implements Api.HostRuntime.WorkerScope {
-  postMessage(message: unknown): void {
-    WorkerThreads.parentPort?.postMessage(message);
+  postMessage(message: unknown, transfer?: Api.HostRuntime.WorkerTransferable[]): void {
+    WorkerThreads.parentPort?.postMessage(message, transfer as unknown as WorkerThreads.Transferable[]);
   }
 
   set onmessage(listener: (event: Api.HostRuntime.WorkerMessageEvent) => void) {

package/front_end/core/root/ExperimentNames.ts

@@ -7,7 +7,6 @@ export enum ExperimentName {
   CAPTURE_NODE_CREATION_STACKS = 'capture-node-creation-stacks',
   LIVE_HEAP_PROFILE = 'live-heap-profile',
   PROTOCOL_MONITOR = 'protocol-monitor',
-  SAMPLING_HEAP_PROFILER_TIMELINE = 'sampling-heap-profiler-timeline',
   TIMELINE_INVALIDATION_TRACKING = 'timeline-invalidation-tracking',
   FONT_EDITOR = 'font-editor',
   INSTRUMENTATION_BREAKPOINTS = 'instrumentation-breakpoints',

package/front_end/core/sdk/NetworkManager.ts

@@ -169,10 +169,16 @@ export class NetworkManager extends SDKModel<EventTypes> {
 
     void this.#networkAgent.invoke_enable({
       maxPostDataSize: MAX_EAGER_POST_REQUEST_BODY_LENGTH,
-      enableDurableMessages: Root.Runtime.hostConfig.devToolsEnableDurableMessages?.enabled,
       maxTotalBufferSize: MAX_RESPONSE_BODY_TOTAL_BUFFER_LENGTH,
       reportDirectSocketTraffic: true,
     });
+
+    if (Root.Runtime.hostConfig.devToolsEnableDurableMessages?.enabled) {
+      const preserveLogSetting = settings.moduleSetting('network-log.preserve-log');
+      this.#updateDurableMessages(preserveLogSetting.get());
+      preserveLogSetting.addChangeListener(this.preserveLogChanged, this);
+    }
+
     void this.#networkAgent.invoke_setAttachDebugStack({enabled: true});
 
     this.#bypassServiceWorkerSetting = settings.createSetting('bypass-service-worker', false);
@@ -289,7 +295,7 @@ export class NetworkManager extends SDKModel<EventTypes> {
       const {postData, base64Encoded} = await manager.#networkAgent.invoke_getRequestPostData({requestId});
       if (base64Encoded && postData) {
         // Decode base64 to get raw bytes as an ArrayBuffer.
-        const binaryString = window.atob(postData);
+        const binaryString = globalThis.atob(postData);
         const bytes = new Uint8Array(binaryString.length);
         for (let i = 0; i < binaryString.length; i++) {
           bytes[i] = binaryString.charCodeAt(i);
@@ -380,9 +386,24 @@ export class NetworkManager extends SDKModel<EventTypes> {
     void this.#networkAgent.invoke_setCacheDisabled({cacheDisabled: enabled});
   }
 
+  private preserveLogChanged({data: enabled}: Common.EventTarget.EventTargetEvent<boolean>): void {
+    this.#updateDurableMessages(enabled);
+  }
+
+  #updateDurableMessages(enabled: boolean): void {
+    if (enabled) {
+      void this.#networkAgent.invoke_configureDurableMessages({
+        maxTotalBufferSize: MAX_RESPONSE_BODY_TOTAL_BUFFER_LENGTH,
+      });
+    } else {
+      void this.#networkAgent.invoke_configureDurableMessages({});
+    }
+  }
+
   override dispose(): void {
     const settings = this.target().targetManager().settings;
     settings.moduleSetting('cache-disabled').removeChangeListener(this.cacheDisabledSettingChanged, this);
+    settings.moduleSetting('network-log.preserve-log').removeChangeListener(this.preserveLogChanged, this);
   }
 
   private bypassServiceWorkerChanged(): void {
@@ -398,14 +419,19 @@ export class NetworkManager extends SDKModel<EventTypes> {
     return result.status;
   }
 
-  async enableReportingApi(enable = true): Promise<Promise<Protocol.ProtocolResponseWithError>> {
+  async enableReportingApi(enable = true): Promise<Protocol.ProtocolResponseWithError> {
     return await this.#networkAgent.invoke_enableReportingApi({enable});
   }
 
-  async enableDeviceBoundSessions(enable = true): Promise<Promise<Protocol.ProtocolResponseWithError>> {
+  async enableDeviceBoundSessions(enable = true): Promise<Protocol.ProtocolResponseWithError> {
     return await this.#networkAgent.invoke_enableDeviceBoundSessions({enable});
   }
 
+  async deleteDeviceBoundSession(key: Protocol.Network.DeviceBoundSessionKey):
+      Promise<Protocol.ProtocolResponseWithError> {
+    return await this.#networkAgent.invoke_deleteDeviceBoundSession({key});
+  }
+
   async loadNetworkResource(
       frameId: Protocol.Page.FrameId|null, url: Platform.DevToolsPath.UrlString,
       options: Protocol.Network.LoadNetworkResourceOptions): Promise<Protocol.Network.LoadNetworkResourcePageResult> {

package/front_end/core/sdk/NetworkRequest.ts

@@ -1508,16 +1508,8 @@ export class NetworkRequest extends Common.ObjectWrapper.ObjectWrapper<EventType
     if (TextUtils.ContentData.ContentData.isError(contentData)) {
       return;
     }
-    let imageSrc = contentData.asDataUrl();
-    if (imageSrc === null && !this.#failed) {
-      const cacheControl = this.responseHeaderValue('cache-control') || '';
-      if (!cacheControl.includes('no-cache')) {
-        imageSrc = this.#url;
-      }
-    }
-    if (imageSrc !== null) {
-      image.src = imageSrc;
-    }
+    const imageSrc = contentData.asImagePreviewUrl();
+    image.src = imageSrc ?? '';  // Empty the image if we cannot generate a preview URL
   }
 
   initiator(): Protocol.Network.Initiator|null {

package/front_end/core/sdk/Resource.ts

@@ -204,7 +204,8 @@ export class Resource implements TextUtils.ContentProvider.ContentProvider {
     if (TextUtils.ContentData.ContentData.isError(contentData)) {
       return;
     }
-    image.src = contentData.asDataUrl() ?? this.#url;
+    const imageSrc = contentData.asImagePreviewUrl();
+    image.src = imageSrc ?? '';  // Empty the image if we cannot generate a preview URL
   }
 
   private async innerRequestContent(): Promise<TextUtils.ContentData.ContentDataOrError> {

package/front_end/core/sdk/ServerSentEventsProtocol.ts

@@ -117,7 +117,7 @@ class Base64TextDecoder {
   }
 
   async addBase64Chunk(chunk: Protocol.binary): Promise<void> {
-    const binString = window.atob(chunk);
+    const binString = globalThis.atob(chunk);
     const bytes = Uint8Array.from(binString, m => m.codePointAt(0) as number);
 
     await this.#writer.ready;

package/front_end/core/sdk/TraceObject.ts

@@ -11,6 +11,10 @@ import type {RehydratingResource} from './RehydratingObject.js';
 import {ResourceTreeModel} from './ResourceTreeModel.js';
 import type {SourceMapV3} from './SourceMap.js';
 
+interface TraceObjectWithNoMetadata {
+  readonly traceEvents: TraceObject['traceEvents'];
+  metadata?: TraceObject['metadata'];
+}
 /** A thin wrapper class, mostly to enable instanceof-based revealing of traces to open in Timeline. **/
 export class TraceObject {
   readonly traceEvents: Protocol.Tracing.DataCollectedEvent['value'];
@@ -18,13 +22,14 @@ export class TraceObject {
     sourceMaps?: Array<{sourceMapUrl: string, sourceMap: SourceMapV3, url: string}>,
     resources?: RehydratingResource[],
   };
-  constructor(payload: Protocol.Tracing.DataCollectedEvent['value']|TraceObject, meta?: Object) {
+  constructor(
+      payload: Protocol.Tracing.DataCollectedEvent['value']|TraceObject|TraceObjectWithNoMetadata, meta?: Object) {
     if (Array.isArray(payload)) {
       this.traceEvents = payload;
       this.metadata = meta ?? {};
     } else {
       this.traceEvents = payload.traceEvents;
-      this.metadata = payload.metadata;
+      this.metadata = payload.metadata ?? {};
     }
   }
 }

package/front_end/entrypoint_template.html

@@ -17,8 +17,7 @@
 <meta
   http-equiv="Content-Security-Policy"
   content="default-src 'self' devtools: data:; style-src 'self' 'unsafe-inline' devtools:; object-src 'none'; script-src
-  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data:; frame-src * data:; connect-src data:
-  https://chromeuxreport.googleapis.com 'self' devtools: ws://127.0.0.1:*;">
+  'self' https://chrome-devtools-frontend.appspot.com; img-src 'self' data: blob:; frame-src * data:; connect-src data: https://chromeuxreport.googleapis.com 'self' devtools: ws://127.0.0.1:*;">
 <meta name="referrer" content="no-referrer">
 <script type="module" src="./entrypoints/%ENTRYPOINT_NAME%/%ENTRYPOINT_NAME%.js"></script>
 <link href="./application_tokens.css" rel="stylesheet">

package/front_end/entrypoints/greendev_floaty/FloatyEntrypoint.ts

@@ -5,6 +5,7 @@
 
 import '../../core/sdk/sdk-meta.js';
 import '../../models/workspace/workspace-meta.js';
+import '../../models/logs/logs-meta.js';
 import '../../panels/sensors/sensors-meta.js';
 import '../../entrypoints/inspector_main/inspector_main-meta.js';
 import '../../entrypoints/main/main-meta.js';
@@ -19,6 +20,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Foundation from '../../foundation/foundation.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as AiAssistance from '../../models/ai_assistance/ai_assistance.js';
+import * as Greendev from '../../models/greendev/greendev.js';
 import type {SyncMessage} from '../../panels/greendev/GreenDevShared.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -33,7 +35,7 @@ class GreenDevFloaty {
   #textField!: HTMLInputElement;
   #playButton!: HTMLButtonElement;
   #node?: SDK.DOMModel.DOMNode;
-  #agent?: AiAssistance.StylingAgent.StylingAgent;
+  #agent?: AiAssistance.GreenDevAgent.GreenDevAgent|AiAssistance.StylingAgent.StylingAgent;
   #nodeContext?: AiAssistance.StylingAgent.NodeContext;
   #backendNodeId?: Protocol.DOM.BackendNodeId;
   #syncChannel: BroadcastChannel;
@@ -92,7 +94,7 @@ class GreenDevFloaty {
         const msg = JSON.stringify({
           id: 9999,
           method: 'Overlay.setShowInspectedElementAnchor',
-          params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}}
+          params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}},
         });
         Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
       }
@@ -112,7 +114,7 @@ class GreenDevFloaty {
       type: 'full-state',
       messages: this.#getMessages(),
       sessionId: this.#backendNodeId,
-      nodeDescription: document.querySelector('.green-dev-floaty-dialog-node-description')?.textContent
+      nodeDescription: document.querySelector('.green-dev-floaty-dialog-node-description')?.textContent,
     };
     this.#syncChannel.postMessage(state);
   }
@@ -143,10 +145,7 @@ class GreenDevFloaty {
     }
   }
 
-  static instance(opts: {
-    forceNew: boolean|null,
-    document: Document,
-  } = {forceNew: null, document}): GreenDevFloaty {
+  static instance(opts: {forceNew: boolean|null, document: Document} = {forceNew: null, document}): GreenDevFloaty {
     const {forceNew, document} = opts;
     if (!greenDevFloatyInstance || forceNew) {
       greenDevFloatyInstance = new GreenDevFloaty(document);
@@ -235,7 +234,7 @@ class GreenDevFloaty {
       const msg = JSON.stringify({
         id: 9999,
         method: 'Overlay.setShowInspectedElementAnchor',
-        params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}}
+        params: {inspectedElementAnchorConfig: {backendNodeId: this.#backendNodeId}},
       });
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.sendMessageToBackend(msg);
     }
@@ -265,10 +264,16 @@ class GreenDevFloaty {
     const query = this.#textField.value || this.#textField.placeholder;
     this.#textField.value = '';
 
+    const useGreenDevAgent = Greendev.Prototypes.instance().isEnabled('beyondStyling');
+
     if (!this.#agent) {
       const aidaClient = new AidaClient();
-      this.#agent = new AiAssistance.StylingAgent.StylingAgent({aidaClient});
-      this.#nodeContext = new AiAssistance.StylingAgent.NodeContext(this.#node);
+      if (useGreenDevAgent) {
+        this.#agent = new AiAssistance.GreenDevAgent.GreenDevAgent({aidaClient});
+      } else {
+        this.#agent = new AiAssistance.StylingAgent.StylingAgent({aidaClient});
+        this.#nodeContext = new AiAssistance.StylingAgent.NodeContext(this.#node);
+      }
     }
 
     this.#addMessageInternal(query, true);
@@ -290,10 +295,111 @@ class GreenDevFloaty {
     });
 
     try {
-      if (!this.#nodeContext) {
-        throw new Error('Node context not found.');
+      let results;
+      if (useGreenDevAgent && this.#agent instanceof AiAssistance.GreenDevAgent.GreenDevAgent) {
+        const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+        if (!target) {
+          return;
+        }
+
+        // --- Add the Accessibility Tree ---
+        const accessibilityModel = target.model(SDK.AccessibilityModel.AccessibilityModel);
+        let axTree = '';
+        if (accessibilityModel) {
+          await accessibilityModel.resumeModel();
+          const axResponse = await accessibilityModel.agent.invoke_getFullAXTree({});
+          if (!axResponse.getError()) {
+            axTree = JSON.stringify(axResponse.nodes);
+          } else {
+            console.error('Failed to capture Accessibility Tree:', axResponse.getError());
+          }
+        }
+
+        // --- Add the most recent network requests ---
+        const allNetworkRequests = await AiAssistance.GreenDevAgent.GreenDevAgent.getNetworkContextData(target);
+        const networkResourcesMax = 50;
+        const startNetworkIndex = Math.max(0, allNetworkRequests.length - networkResourcesMax);
+        const lastNetworkRequests = allNetworkRequests.slice(startNetworkIndex);
+        let formattedNetworkContext = lastNetworkRequests.map(req => req.string).join('\n');
+
+        if (!formattedNetworkContext) {
+          formattedNetworkContext = 'No network requests found.';
+        } else {
+          const footer = allNetworkRequests.length > lastNetworkRequests.length ?
+              `${
+                  allNetworkRequests.length -
+                  lastNetworkRequests.length} additional requests are available (network requests shown are capped at ${
+                  networkResourcesMax} requests).` :
+              'No further network requests have been issued.';
+
+          formattedNetworkContext = `Showing network requests with indices ${startNetworkIndex}-${
+              startNetworkIndex + lastNetworkRequests.length - 1}:\n\n${formattedNetworkContext}\n\n${footer}`;
+        }
+
+        // --- Add the most recent console messages ---
+        const consoleModel = target.model(SDK.ConsoleModel.ConsoleModel);
+        const allConsoleMessages = consoleModel ? consoleModel.messages() : [];
+        const consoleMsgLimit = 50;
+        const startIndex = Math.max(0, allConsoleMessages.length - consoleMsgLimit);
+        const lastConsoleMessages = allConsoleMessages.slice(startIndex);
+        let formattedConsoleMessages =
+            lastConsoleMessages
+                .map(
+                    (entry: SDK.ConsoleModel.ConsoleMessage, i: number) =>
+                        AiAssistance.GreenDevAgent.GreenDevAgent.formatConsoleMessage(entry, startIndex + i))
+                .join('\n');
+        formattedConsoleMessages = formattedConsoleMessages.trimEnd();
+
+        if (!formattedConsoleMessages) {
+          formattedConsoleMessages = 'No console messages found.';
+        } else {
+          const footer = allConsoleMessages.length > lastConsoleMessages.length ?
+              `${
+                  allConsoleMessages.length -
+                  lastConsoleMessages.length} additional messages are available (errors shown are capped at ${
+                  consoleMsgLimit} most recent).` :
+              'No further console messages have been emitted.';
+
+          formattedConsoleMessages = `Showing console messages with indices ${startIndex}-${
+              startIndex + lastConsoleMessages.length - 1}:\n\n${formattedConsoleMessages}\n\n${footer}`;
+        }
+
+        const mainUrl = target.inspectedURL();
+
+        // --- Add some context information about the selected node ---
+        const elementContext = await AiAssistance.StylingAgent.StylingAgent.describeElement(this.#node);
+        const context = `# Page URL
+
+${mainUrl}
+
+# User-selected node
+
+${elementContext}
+
+# Recent network requests
+
+${formattedNetworkContext}
+
+# Recent console messages
+
+${formattedConsoleMessages}
+
+# Accessibility tree
+
+${axTree}`;
+
+        const nodeContext = new AiAssistance.GreenDevAgent.GreenDevContext(context);
+        results = this.#agent.run(query, {selected: nodeContext});
+      } else if (this.#agent instanceof AiAssistance.StylingAgent.StylingAgent) {
+        if (!this.#nodeContext) {
+          throw new Error('Node context not found.');
+        }
+        results = this.#agent.run(query, {selected: this.#nodeContext});
+      } else {
+        throw new Error('Agent not initialized correctly');
       }
-      for await (const result of this.#agent.run(query, {selected: this.#nodeContext})) {
+
+      for await (const result of results) {
         switch (result.type) {
           case ResponseType.ANSWER:
             aiContent.textContent = result.text;
@@ -366,8 +472,6 @@ async function init(): Promise<void> {
         Root.ExperimentNames.ExperimentName.USE_SOURCE_MAP_SCOPES, 'Use scope information from source maps');
     safeRegisterExperiment(Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE, 'Live heap profile');
     safeRegisterExperiment(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, 'Protocol Monitor');
-    safeRegisterExperiment(
-        Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE, 'Sampling heap profiler timeline');
 
     const hostUnsyncedStorage: Common.Settings.SettingsBackingStore = {
       register: (name: string) =>

package/front_end/entrypoints/greendev_floaty/greendev_floaty.ts

@@ -252,8 +252,6 @@ async function init(): Promise<void> {
         Root.ExperimentNames.ExperimentName.USE_SOURCE_MAP_SCOPES, 'Use scope information from source maps');
     Root.Runtime.experiments.register(Root.ExperimentNames.ExperimentName.LIVE_HEAP_PROFILE, 'Live heap profile');
     Root.Runtime.experiments.register(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR, 'Protocol Monitor');
-    Root.Runtime.experiments.register(
-        Root.ExperimentNames.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE, 'Sampling heap profiler timeline');
 
     const WINDOW_LOCAL_STORAGE: Common.Settings.SettingsBackingStore = {
       register(_setting: string): void{},