chrome-devtools-frontend 1.0.1521880 → 1.0.1522585

package/docs/ui_engineering.md

@@ -1223,3 +1223,79 @@ export const DEFAULT_VIEW = (input, _output, target) => {
     target, {host: input});
 };
 ```
+
+## Refactoring UI.Toolbar.Provider
+
+As part of the migration, sometimes classes need to be broken up into smaller pieces. Classes implementing
+`UI.Toolbar.Provider` logic are good examples of this, if they implement `View` logic in addition to their
+`UI.Toolbar.Provider` responsibilities. The View logic needs to be moved to a separate class.
+
+
+**Before:**
+```typescript
+export class NodeIndicator implements UI.Toolbar.Provider {
+  readonly #element: Element;
+  readonly #item: UI.Toolbar.ToolbarItem;
+
+  private constructor() {
+    // Creates `this.#element` and `this.#item` imperatively (e.g. using document.createElement/createChild).
+  }
+  static instance(opts: { forceNew: boolean|null, } = {forceNew: null}): NodeIndicator {
+    // Creates an instance of this class and returns it.
+  }
+  #update(input): void { /* Handles updates to `this.#element` and `this.#item`. */}
+  item(): UI.Toolbar.ToolbarItem|null {
+    return this.#item;
+  }
+}
+```
+
+**After:**
+```typescript
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  // Implementation of the View using Lit.render() (omitted for brevity).
+};
+
+export class NodeIndicator extends UI.Widget.Widget {
+  readonly #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
+
+  override performUpdate(): void {
+    const input = {
+      // Whatever input the View needs.
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}
+
+let nodeIndicatorProviderInstance: NodeIndicatorProvider;
+export class NodeIndicatorProvider implements UI.Toolbar.Provider {
+  #toolbarItem: UI.Toolbar.ToolbarItem;
+  #widgetElement: UI.Widget.WidgetElement<NodeIndicator>;
+
+  private constructor() {
+    this.#widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<NodeIndicator>;
+    this.#widgetElement.widgetConfig = UI.Widget.widgetConfig(NodeIndicator);
+
+    this.#toolbarItem = new UI.Toolbar.ToolbarItem(this.#widgetElement);
+    this.#toolbarItem.setVisible(false);
+  }
+
+  item(): UI.Toolbar.ToolbarItem|null {
+    return this.#toolbarItem;
+  }
+
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): NodeIndicatorProvider {
+    const {forceNew} = opts;
+    if (!nodeIndicatorProviderInstance || forceNew) {
+      nodeIndicatorProviderInstance = new NodeIndicatorProvider();
+    }
+
+    return nodeIndicatorProviderInstance;
+  }
+}
+```

package/front_end/core/host/GdpClient.ts

@@ -68,11 +68,22 @@ export interface Profile {
   };
 }
 
-interface InitializeResult {
-  hasProfile: boolean;
+export interface GetProfileResponse {
+  profile: Profile|null;
   isEligible: boolean;
 }
 
+export enum GdpErrorType {
+  HTTP_RESPONSE_UNAVAILABLE = 'HTTP_RESPONSE_UNAVAILABLE',
+  NOT_FOUND = 'NOT_FOUND',
+}
+
+class GdpError extends Error {
+  constructor(readonly type: GdpErrorType, options?: ErrorOptions) {
+    super(undefined, options);
+  }
+}
+
 // The `batchGet` awards endpoint returns badge names with an
 // obfuscated user ID (e.g., `profiles/12345/awards/badge-name`).
 // This function normalizes them to use `me` instead of the ID
@@ -84,9 +95,9 @@ function normalizeBadgeName(name: string): string {
 
 export const GOOGLE_DEVELOPER_PROGRAM_PROFILE_LINK = 'https://developers.google.com/profile/u/me';
 
-async function makeHttpRequest<R extends object>(request: DispatchHttpRequestRequest): Promise<R|null> {
+async function makeHttpRequest<R>(request: DispatchHttpRequestRequest): Promise<R> {
   if (!isGdpProfilesAvailable()) {
-    return null;
+    throw new GdpError(GdpErrorType.HTTP_RESPONSE_UNAVAILABLE);
   }
 
   const response = await new Promise<DispatchHttpRequestResult>(resolve => {
@@ -94,18 +105,26 @@ async function makeHttpRequest<R extends object>(request: DispatchHttpRequestReq
   });
 
   debugLog({request, response});
+  if (response.statusCode === 404) {
+    throw new GdpError(GdpErrorType.NOT_FOUND);
+  }
+
   if ('response' in response && response.statusCode === 200) {
-    return JSON.parse(response.response) as R;
+    try {
+      return JSON.parse(response.response) as R;
+    } catch (err) {
+      throw new GdpError(GdpErrorType.HTTP_RESPONSE_UNAVAILABLE, {cause: err});
+    }
   }
 
-  return null;
+  throw new GdpError(GdpErrorType.HTTP_RESPONSE_UNAVAILABLE);
 }
 
 const SERVICE_NAME = 'gdpService';
 let gdpClientInstance: GdpClient|null = null;
 export class GdpClient {
-  #cachedProfilePromise?: Promise<Profile|null>;
-  #cachedEligibilityPromise?: Promise<CheckElibigilityResponse|null>;
+  #cachedProfilePromise?: Promise<Profile>;
+  #cachedEligibilityPromise?: Promise<CheckElibigilityResponse>;
 
   private constructor() {
   }
@@ -119,41 +138,58 @@ export class GdpClient {
     return gdpClientInstance;
   }
 
-  async initialize(): Promise<InitializeResult> {
-    const profile = await this.getProfile();
-    if (profile) {
+  /**
+   * Fetches the user's GDP profile and eligibility status.
+   *
+   * It first attempts to fetch the profile. If the profile is not found
+   * (a `NOT_FOUND` error), this is handled gracefully by treating the profile
+   * as `null` and then proceeding to check for eligibility.
+   *
+   * @returns A promise that resolves with an object containing the `profile`
+   * and `isEligible` status, or `null` if an unexpected error occurs.
+   */
+  async getProfile(): Promise<GetProfileResponse|null> {
+    try {
+      const profile = await this.#getProfile();
       return {
-        hasProfile: true,
+        profile,
         isEligible: true,
       };
+    } catch (err: unknown) {
+      if (err instanceof GdpError && err.type === GdpErrorType.HTTP_RESPONSE_UNAVAILABLE) {
+        return null;
+      }
     }
 
-    const isEligible = await this.isEligibleToCreateProfile();
-    return {
-      hasProfile: false,
-      isEligible,
-    };
+    try {
+      const checkEligibilityResponse = await this.#checkEligibility();
+      return {
+        profile: null,
+        isEligible: checkEligibilityResponse.createProfile === EligibilityStatus.ELIGIBLE,
+      };
+    } catch {
+      return null;
+    }
   }
 
-  async getProfile(): Promise<Profile|null> {
+  async #getProfile(): Promise<Profile> {
     if (this.#cachedProfilePromise) {
       return await this.#cachedProfilePromise;
     }
 
-    this.#cachedProfilePromise = makeHttpRequest({
-      service: SERVICE_NAME,
-      path: '/v1beta1/profile:get',
-      method: 'GET',
+    this.#cachedProfilePromise = makeHttpRequest<Profile>({
+                                   service: SERVICE_NAME,
+                                   path: '/v1beta1/profile:get',
+                                   method: 'GET',
+                                 }).then(profile => {
+      this.#cachedEligibilityPromise = Promise.resolve({createProfile: EligibilityStatus.ELIGIBLE});
+      return profile;
     });
 
-    const profile = await this.#cachedProfilePromise;
-    if (profile) {
-      this.#cachedEligibilityPromise = Promise.resolve({createProfile: EligibilityStatus.ELIGIBLE});
-    }
-    return profile;
+    return await this.#cachedProfilePromise;
   }
 
-  async checkEligibility(): Promise<CheckElibigilityResponse|null> {
+  async #checkEligibility(): Promise<CheckElibigilityResponse> {
     if (this.#cachedEligibilityPromise) {
       return await this.#cachedEligibilityPromise;
     }
@@ -168,42 +204,40 @@ export class GdpClient {
    * @returns null if the request fails, the awarded badge names otherwise.
    */
   async getAwardedBadgeNames({names}: {names: string[]}): Promise<Set<string>|null> {
-    const result = await makeHttpRequest<BatchGetAwardsResponse>({
-      service: SERVICE_NAME,
-      path: '/v1beta1/profiles/me/awards:batchGet',
-      method: 'GET',
-      queryParams: {
-        allowMissing: 'true',
-        names,
-      }
-    });
-
-    if (!result) {
+    try {
+      const response = await makeHttpRequest<BatchGetAwardsResponse>({
+        service: SERVICE_NAME,
+        path: '/v1beta1/profiles/me/awards:batchGet',
+        method: 'GET',
+        queryParams: {
+          allowMissing: 'true',
+          names,
+        }
+      });
+
+      return new Set(response.awards?.map(award => normalizeBadgeName(award.name)) ?? []);
+    } catch {
       return null;
     }
-
-    return new Set(result.awards?.map(award => normalizeBadgeName(award.name)) ?? []);
-  }
-
-  async isEligibleToCreateProfile(): Promise<boolean> {
-    return (await this.checkEligibility())?.createProfile === EligibilityStatus.ELIGIBLE;
   }
 
   async createProfile({user, emailPreference}: {user: string, emailPreference: EmailPreference}):
       Promise<Profile|null> {
-    const result = await makeHttpRequest<Profile>({
-      service: SERVICE_NAME,
-      path: '/v1beta1/profiles',
-      method: 'POST',
-      body: JSON.stringify({
-        user,
-        newsletter_email: emailPreference,
-      }),
-    });
-    if (result) {
+    try {
+      const response = await makeHttpRequest<Profile>({
+        service: SERVICE_NAME,
+        path: '/v1beta1/profiles',
+        method: 'POST',
+        body: JSON.stringify({
+          user,
+          newsletter_email: emailPreference,
+        }),
+      });
       this.#clearCache();
+      return response;
+    } catch {
+      return null;
     }
-    return result;
   }
 
   #clearCache(): void {
@@ -211,16 +245,21 @@ export class GdpClient {
     this.#cachedEligibilityPromise = undefined;
   }
 
-  createAward({name}: {name: string}): Promise<Award|null> {
-    return makeHttpRequest({
-      service: SERVICE_NAME,
-      path: '/v1beta1/profiles/me/awards',
-      method: 'POST',
-      body: JSON.stringify({
-        awardingUri: 'devtools://devtools',
-        name,
-      })
-    });
+  async createAward({name}: {name: string}): Promise<Award|null> {
+    try {
+      const response = await makeHttpRequest<Award>({
+        service: SERVICE_NAME,
+        path: '/v1beta1/profiles/me/awards',
+        method: 'POST',
+        body: JSON.stringify({
+          awardingUri: 'devtools://devtools',
+          name,
+        })
+      });
+      return response;
+    } catch {
+      return null;
+    }
   }
 }
 
@@ -260,5 +299,16 @@ export function getGdpProfilesEnterprisePolicy(): Root.Runtime.GdpProfilesEnterp
       Root.Runtime.GdpProfilesEnterprisePolicyValue.DISABLED);
 }
 
+export function isBadgesEnabled(): boolean {
+  const isBadgesEnabledByEnterprisePolicy =
+      getGdpProfilesEnterprisePolicy() === Root.Runtime.GdpProfilesEnterprisePolicyValue.ENABLED;
+  const isBadgesEnabledByFeatureFlag = Boolean(Root.Runtime.hostConfig.devToolsGdpProfiles?.badgesEnabled);
+  return isBadgesEnabledByEnterprisePolicy && isBadgesEnabledByFeatureFlag;
+}
+
+export function isStarterBadgeEnabled(): boolean {
+  return Boolean(Root.Runtime.hostConfig.devToolsGdpProfiles?.starterBadgeEnabled);
+}
+
 // @ts-expect-error
 globalThis.setDebugGdpIntegrationEnabled = setDebugGdpIntegrationEnabled;

package/front_end/core/root/Runtime.ts

@@ -476,6 +476,7 @@ interface GlobalAiButton {
 
 interface GdpProfiles {
   enabled: boolean;
+  badgesEnabled: boolean;
   starterBadgeEnabled: boolean;
 }
 

package/front_end/core/sdk/EnhancedTracesParser.ts

@@ -35,11 +35,10 @@ export interface RundownScriptCompiled extends EventBase {
       frameType: 'page'|'iframe',
       url: string,
       /**
-       * isolate is a `uint64_t`, which is too much for JS number to represent exactly.
-       * TODO: consider adjusting the trace event impl to either string or reduced precision. see https://crrev.com/c/6300647
-       * This applies for all `isolate` in trace events we consume.
+       * Older traces were a number, but this is an unsigned 64 bit value, so that was a bug.
+       * New traces use string instead. See https://crbug.com/447654178.
        */
-      isolate: number,
+      isolate: string|number,
       /** AKA V8ContextToken. https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/inspector/inspector_trace_events.cc;l=1229;drc=3c88f61e18b043e70c225d8d57c77832a85e7f58 */
       v8context: string,
       origin: string,
@@ -60,7 +59,11 @@ export interface RundownScript extends EventBase {
   name: 'ScriptCatchup';
   args: {
     data: {
-      isolate: number,
+      /**
+       * Older traces were a number, but this is an unsigned 64 bit value, so that was a bug.
+       * New traces use string instead. See https://crbug.com/447654178.
+       */
+      isolate: string|number,
       executionContextId: Protocol.Runtime.ExecutionContextId,
       scriptId: number,
       isModule: boolean,
@@ -119,7 +122,11 @@ interface FunctionCall extends EventBase {
     data: {
       frame: Protocol.Page.FrameId,
       scriptId: Protocol.Runtime.ScriptId,
-      isolate?: number,
+      /**
+       * Older traces were a number, but this is an unsigned 64 bit value, so that was a bug.
+       * New traces use string instead. See https://crbug.com/447654178.
+       */
+      isolate?: string|number,
     },
   };
 }

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -1,7 +1,6 @@
 // Copyright 2018 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable rulesdir/no-imperative-dom-api */
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -13,9 +12,12 @@ import * as MobileThrottling from '../../panels/mobile_throttling/mobile_throttl
 import * as Security from '../../panels/security/security.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import nodeIconStyles from './nodeIcon.css.js';
 
+const {html} = Lit;
+
 const UIStrings = {
   /**
    * @description Text that refers to the main target. The main target is the primary webpage that
@@ -185,50 +187,98 @@ export class FocusDebuggeeActionDelegate implements UI.ActionRegistration.Action
   }
 }
 
-let nodeIndicatorInstance: NodeIndicator;
+interface ViewInput {
+  nodeProcessRunning: Boolean;
+}
 
-export class NodeIndicator implements UI.Toolbar.Provider {
-  readonly #element: Element;
-  readonly #button: UI.Toolbar.ToolbarItem;
-  private constructor() {
-    const element = document.createElement('div');
-    const shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(element, {cssFile: nodeIconStyles});
-    this.#element = shadowRoot.createChild('div', 'node-icon');
-    element.addEventListener(
-        'click', () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openNodeFrontend(), false);
-    this.#button = new UI.Toolbar.ToolbarItem(element);
-    this.#button.setTitle(i18nString(UIStrings.openDedicatedTools));
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, event => this.#update(event.data));
-    this.#button.setVisible(false);
-    this.#update([]);
-  }
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): NodeIndicator {
-    const {forceNew} = opts;
-    if (!nodeIndicatorInstance || forceNew) {
-      nodeIndicatorInstance = new NodeIndicator();
-    }
+type View = (input: ViewInput, _output: object, target: HTMLElement) => void;
+
+const isNodeProcessRunning = (targetInfos: Protocol.Target.TargetInfo[]): Boolean => {
+  return Boolean(targetInfos.find(target => target.type === 'node' && !target.attached));
+};
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    nodeProcessRunning,
+  } = input;
+
+  // clang-format off
+  Lit.render(html`
+    <style>${nodeIconStyles}</style>
+    <div
+        class="node-icon ${!nodeProcessRunning ? 'inactive' : ''}"
+        title=${i18nString(UIStrings.openDedicatedTools)}
+        @click=${
+            () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openNodeFrontend()}>
+    </div>
+    `, target);
+  // clang-format on
+};
+
+export class NodeIndicator extends UI.Widget.Widget {
+  readonly #view: View;
+  #targetInfos: Protocol.Target.TargetInfo[] = [];
+  #wasShown = false;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
 
-    return nodeIndicatorInstance;
+    SDK.TargetManager.TargetManager.instance().addEventListener(
+        SDK.TargetManager.Events.AVAILABLE_TARGETS_CHANGED, event => {
+          this.#targetInfos = event.data;
+          this.requestUpdate();
+        });
   }
 
-  #update(targetInfos: Protocol.Target.TargetInfo[]): void {
+  override performUpdate(): void {
     // Disable when we are testing, as debugging e2e
     // attaches a debug process and this changes some view sizes
     if (Host.InspectorFrontendHost.isUnderTest()) {
       return;
     }
-    const hasNode = Boolean(targetInfos.find(target => target.type === 'node' && !target.attached));
-    this.#element.classList.toggle('inactive', !hasNode);
-    if (hasNode) {
-      this.#button.setVisible(true);
+
+    const nodeProcessRunning: Boolean = isNodeProcessRunning(this.#targetInfos);
+
+    if (!this.#wasShown && !nodeProcessRunning) {
+      // This widget is designed to be hidden until the first debuggable Node process is detected. Therefore
+      // we don't construct the view if there's no data. After we've shown it once, it remains on-sreen and
+      // indicates via its disabled state whether Node debugging is available.
+      return;
     }
+    this.#wasShown = true;
+
+    const input: ViewInput = {
+      nodeProcessRunning,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}
+
+let nodeIndicatorProviderInstance: NodeIndicatorProvider;
+export class NodeIndicatorProvider implements UI.Toolbar.Provider {
+  #toolbarItem: UI.Toolbar.ToolbarItem;
+  #widgetElement: UI.Widget.WidgetElement<NodeIndicator>;
+
+  private constructor() {
+    this.#widgetElement = document.createElement('devtools-widget') as UI.Widget.WidgetElement<NodeIndicator>;
+    this.#widgetElement.widgetConfig = UI.Widget.widgetConfig(NodeIndicator);
+
+    this.#toolbarItem = new UI.Toolbar.ToolbarItem(this.#widgetElement);
+    this.#toolbarItem.setVisible(false);
   }
 
   item(): UI.Toolbar.ToolbarItem|null {
-    return this.#button;
+    return this.#toolbarItem;
+  }
+
+  static instance(opts: {forceNew: boolean|null} = {forceNew: null}): NodeIndicatorProvider {
+    const {forceNew} = opts;
+    if (!nodeIndicatorProviderInstance || forceNew) {
+      nodeIndicatorProviderInstance = new NodeIndicatorProvider();
+    }
+
+    return nodeIndicatorProviderInstance;
   }
 }
 

package/front_end/entrypoints/inspector_main/inspector_main-meta.ts

@@ -257,7 +257,7 @@ Common.Settings.registerSettingExtension({
 UI.Toolbar.registerToolbarItem({
   async loadItem() {
     const InspectorMain = await loadInspectorMainModule();
-    return InspectorMain.InspectorMain.NodeIndicator.instance();
+    return InspectorMain.InspectorMain.NodeIndicatorProvider.instance();
   },
   order: 2,
   location: UI.Toolbar.ToolbarItemLocation.MAIN_TOOLBAR_LEFT,

package/front_end/entrypoints/main/MainImpl.ts

@@ -519,7 +519,13 @@ export class MainImpl {
 
     // Initialize `GDPClient` and `UserBadges` for Google Developer Program integration
     if (Host.GdpClient.isGdpProfilesAvailable()) {
-      void Host.GdpClient.GdpClient.instance().initialize().then(({hasProfile, isEligible}) => {
+      void Host.GdpClient.GdpClient.instance().getProfile().then(getProfileResponse => {
+        if (!getProfileResponse) {
+          return;
+        }
+
+        const {profile, isEligible} = getProfileResponse;
+        const hasProfile = Boolean(profile);
         const contextString = hasProfile ? 'has-profile' :
             isEligible                   ? 'no-profile-and-eligible' :
                                            'no-profile-and-not-eligible';

package/front_end/generated/Deprecation.ts

@@ -57,15 +57,15 @@ export const UIStrings = {
   /**
    * @description Warning displayed to developers when the Geolocation API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is no longer supported.
    */
-  GeolocationInsecureOrigin: "`getCurrentPosition()` and `watchPosition()` no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  GeolocationInsecureOrigin: "`getCurrentPosition()` and `watchPosition()` no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description Warning displayed to developers when the Geolocation API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is deprecated.
    */
-  GeolocationInsecureOriginDeprecatedNotRemoved: "`getCurrentPosition()` and `watchPosition()` are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  GeolocationInsecureOriginDeprecatedNotRemoved: "`getCurrentPosition()` and `watchPosition()` are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description This warning occurs when the `getUserMedia()` API is invoked on an insecure (e.g., HTTP) site. This is only permitted on secure sites (e.g., HTTPS).
    */
-  GetUserMediaInsecureOrigin: "`getUserMedia()` no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  GetUserMediaInsecureOrigin: "`getUserMedia()` no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description A deprecation warning shown to developers in the DevTools Issues tab when code tries to use the deprecated hostCandidate field, guiding developers to use the equivalent information in the .address and .port fields instead.
    */
@@ -105,7 +105,7 @@ export const UIStrings = {
   /**
    * @description Warning displayed to developers when the Notification API is used from an insecure origin (one that isn't localhost or doesn't use HTTPS) to notify them that this use is no longer supported.
    */
-  NotificationInsecureOrigin: "The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://goo.gle/chrome-insecure-origins for more details.",
+  NotificationInsecureOrigin: "The Notification API may no longer be used from insecure origins. You should consider switching your application to a secure origin, such as HTTPS. See https://www.chromium.org/Home/chromium-security/deprecating-powerful-features-on-insecure-origins/ for more details.",
   /**
    * @description Warning displayed to developers when permission to use notifications has been requested by a cross-origin iframe, to notify them that this use is no longer supported.
    */

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

@@ -149,23 +149,23 @@ export class NetworkAgent extends AiAgent<SDK.NetworkRequest.NetworkRequest> {
     yield {
       type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslate.analyzingNetworkData),
-      details: createContextDetailsForNetworkAgent(selectedNetworkRequest),
+      details: await createContextDetailsForNetworkAgent(selectedNetworkRequest),
     };
   }
 
   override async enhanceQuery(query: string, selectedNetworkRequest: RequestContext|null): Promise<string> {
     const networkEnchantmentQuery = selectedNetworkRequest ?
         `# Selected network request \n${
-            new NetworkRequestFormatter(selectedNetworkRequest.getItem(), selectedNetworkRequest.calculator)
-                .formatNetworkRequest()}\n\n# User request\n\n` :
+            await (new NetworkRequestFormatter(selectedNetworkRequest.getItem(), selectedNetworkRequest.calculator)
+                       .formatNetworkRequest())}\n\n# User request\n\n` :
         '';
     return `${networkEnchantmentQuery}${query}`;
   }
 }
 
-function createContextDetailsForNetworkAgent(
+async function createContextDetailsForNetworkAgent(
     selectedNetworkRequest: RequestContext,
-    ): [ContextDetail, ...ContextDetail[]] {
+    ): Promise<[ContextDetail, ...ContextDetail[]]> {
   const request = selectedNetworkRequest.getItem();
   const formatter = new NetworkRequestFormatter(request, selectedNetworkRequest.calculator);
   const requestContextDetail: ContextDetail = {
@@ -173,10 +173,13 @@ function createContextDetailsForNetworkAgent(
     text: lockedString(UIStringsNotTranslate.requestUrl) + ': ' + request.url() + '\n\n' +
         formatter.formatRequestHeaders(),
   };
+  const responseBody = await formatter.formatResponseBody();
+  const responseBodyString = responseBody ? `\n\n${responseBody}` : '';
+
   const responseContextDetail: ContextDetail = {
     title: lockedString(UIStringsNotTranslate.response),
     text: lockedString(UIStringsNotTranslate.responseStatus) + ': ' + request.statusCode + ' ' + request.statusText +
-        '\n\n' + formatter.formatResponseHeaders(),
+        `\n\n${formatter.formatResponseHeaders()}` + responseBodyString,
   };
   const timingContextDetail: ContextDetail = {
     title: lockedString(UIStringsNotTranslate.timing),
@@ -186,6 +189,7 @@ function createContextDetailsForNetworkAgent(
     title: lockedString(UIStringsNotTranslate.requestInitiatorChain),
     text: formatter.formatRequestInitiatorChain(),
   };
+
   return [
     requestContextDetail,
     responseContextDetail,