chrome-devtools-frontend 1.0.1521746 → 1.0.1522145

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/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/InspectorBackendCommands.js

@@ -297,7 +297,7 @@ inspectorBackend.registerType("CSS.Value", [{"name": "text", "type": "string", "
 inspectorBackend.registerType("CSS.Specificity", [{"name": "a", "type": "number", "optional": false, "description": "The a component, which represents the number of ID selectors.", "typeRef": null}, {"name": "b", "type": "number", "optional": false, "description": "The b component, which represents the number of class selectors, attributes selectors, and pseudo-classes.", "typeRef": null}, {"name": "c", "type": "number", "optional": false, "description": "The c component, which represents the number of type selectors and pseudo-elements.", "typeRef": null}]);
 inspectorBackend.registerType("CSS.SelectorList", [{"name": "selectors", "type": "array", "optional": false, "description": "Selectors in the list.", "typeRef": "CSS.Value"}, {"name": "text", "type": "string", "optional": false, "description": "Rule selector text.", "typeRef": null}]);
 inspectorBackend.registerType("CSS.CSSStyleSheetHeader", [{"name": "styleSheetId", "type": "string", "optional": false, "description": "The stylesheet identifier.", "typeRef": "CSS.StyleSheetId"}, {"name": "frameId", "type": "string", "optional": false, "description": "Owner frame identifier.", "typeRef": "Page.FrameId"}, {"name": "sourceURL", "type": "string", "optional": false, "description": "Stylesheet resource URL. Empty if this is a constructed stylesheet created using new CSSStyleSheet() (but non-empty if this is a constructed stylesheet imported as a CSS module script).", "typeRef": null}, {"name": "sourceMapURL", "type": "string", "optional": true, "description": "URL of source map associated with the stylesheet (if any).", "typeRef": null}, {"name": "origin", "type": "string", "optional": false, "description": "Stylesheet origin.", "typeRef": "CSS.StyleSheetOrigin"}, {"name": "title", "type": "string", "optional": false, "description": "Stylesheet title.", "typeRef": null}, {"name": "ownerNode", "type": "number", "optional": true, "description": "The backend id for the owner node of the stylesheet.", "typeRef": "DOM.BackendNodeId"}, {"name": "disabled", "type": "boolean", "optional": false, "description": "Denotes whether the stylesheet is disabled.", "typeRef": null}, {"name": "hasSourceURL", "type": "boolean", "optional": true, "description": "Whether the sourceURL field value comes from the sourceURL comment.", "typeRef": null}, {"name": "isInline", "type": "boolean", "optional": false, "description": "Whether this stylesheet is created for STYLE tag by parser. This flag is not set for document.written STYLE tags.", "typeRef": null}, {"name": "isMutable", "type": "boolean", "optional": false, "description": "Whether this stylesheet is mutable. Inline stylesheets become mutable after they have been modified via CSSOM API. `<link>` element's stylesheets become mutable only if DevTools modifies them. Constructed stylesheets (new CSSStyleSheet()) are mutable immediately after creation.", "typeRef": null}, {"name": "isConstructed", "type": "boolean", "optional": false, "description": "True if this stylesheet is created through new CSSStyleSheet() or imported as a CSS module script.", "typeRef": null}, {"name": "startLine", "type": "number", "optional": false, "description": "Line offset of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "startColumn", "type": "number", "optional": false, "description": "Column offset of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "length", "type": "number", "optional": false, "description": "Size of the content (in characters).", "typeRef": null}, {"name": "endLine", "type": "number", "optional": false, "description": "Line offset of the end of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "endColumn", "type": "number", "optional": false, "description": "Column offset of the end of the stylesheet within the resource (zero based).", "typeRef": null}, {"name": "loadingFailed", "type": "boolean", "optional": true, "description": "If the style sheet was loaded from a network resource, this indicates when the resource failed to load", "typeRef": null}]);
-inspectorBackend.registerType("CSS.CSSRule", [{"name": "styleSheetId", "type": "string", "optional": true, "description": "The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from.", "typeRef": "CSS.StyleSheetId"}, {"name": "selectorList", "type": "object", "optional": false, "description": "Rule selector data.", "typeRef": "CSS.SelectorList"}, {"name": "nestingSelectors", "type": "array", "optional": true, "description": "Array of selectors from ancestor style rules, sorted by distance from the current rule.", "typeRef": "string"}, {"name": "origin", "type": "string", "optional": false, "description": "Parent stylesheet's origin.", "typeRef": "CSS.StyleSheetOrigin"}, {"name": "style", "type": "object", "optional": false, "description": "Associated style declaration.", "typeRef": "CSS.CSSStyle"}, {"name": "media", "type": "array", "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards.", "typeRef": "CSS.CSSMedia"}, {"name": "containerQueries", "type": "array", "optional": true, "description": "Container query list array (for rules involving container queries). The array enumerates container queries starting with the innermost one, going outwards.", "typeRef": "CSS.CSSContainerQuery"}, {"name": "supports", "type": "array", "optional": true, "description": "@supports CSS at-rule array. The array enumerates @supports at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSSupports"}, {"name": "layers", "type": "array", "optional": true, "description": "Cascade layer array. Contains the layer hierarchy that this rule belongs to starting with the innermost layer and going outwards.", "typeRef": "CSS.CSSLayer"}, {"name": "scopes", "type": "array", "optional": true, "description": "@scope CSS at-rule array. The array enumerates @scope at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSScope"}, {"name": "ruleTypes", "type": "array", "optional": true, "description": "The array keeps the types of ancestor CSSRules from the innermost going outwards.", "typeRef": "CSS.CSSRuleType"}, {"name": "startingStyles", "type": "array", "optional": true, "description": "@starting-style CSS at-rule array. The array enumerates @starting-style at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSStartingStyle"}]);
+inspectorBackend.registerType("CSS.CSSRule", [{"name": "styleSheetId", "type": "string", "optional": true, "description": "The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from.", "typeRef": "CSS.StyleSheetId"}, {"name": "selectorList", "type": "object", "optional": false, "description": "Rule selector data.", "typeRef": "CSS.SelectorList"}, {"name": "nestingSelectors", "type": "array", "optional": true, "description": "Array of selectors from ancestor style rules, sorted by distance from the current rule.", "typeRef": "string"}, {"name": "origin", "type": "string", "optional": false, "description": "Parent stylesheet's origin.", "typeRef": "CSS.StyleSheetOrigin"}, {"name": "style", "type": "object", "optional": false, "description": "Associated style declaration.", "typeRef": "CSS.CSSStyle"}, {"name": "originTreeScopeNodeId", "type": "number", "optional": true, "description": "The BackendNodeId of the DOM node that constitutes the origin tree scope of this rule.", "typeRef": "DOM.BackendNodeId"}, {"name": "media", "type": "array", "optional": true, "description": "Media list array (for rules involving media queries). The array enumerates media queries starting with the innermost one, going outwards.", "typeRef": "CSS.CSSMedia"}, {"name": "containerQueries", "type": "array", "optional": true, "description": "Container query list array (for rules involving container queries). The array enumerates container queries starting with the innermost one, going outwards.", "typeRef": "CSS.CSSContainerQuery"}, {"name": "supports", "type": "array", "optional": true, "description": "@supports CSS at-rule array. The array enumerates @supports at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSSupports"}, {"name": "layers", "type": "array", "optional": true, "description": "Cascade layer array. Contains the layer hierarchy that this rule belongs to starting with the innermost layer and going outwards.", "typeRef": "CSS.CSSLayer"}, {"name": "scopes", "type": "array", "optional": true, "description": "@scope CSS at-rule array. The array enumerates @scope at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSScope"}, {"name": "ruleTypes", "type": "array", "optional": true, "description": "The array keeps the types of ancestor CSSRules from the innermost going outwards.", "typeRef": "CSS.CSSRuleType"}, {"name": "startingStyles", "type": "array", "optional": true, "description": "@starting-style CSS at-rule array. The array enumerates @starting-style at-rules starting with the innermost one, going outwards.", "typeRef": "CSS.CSSStartingStyle"}]);
 inspectorBackend.registerType("CSS.RuleUsage", [{"name": "styleSheetId", "type": "string", "optional": false, "description": "The css style sheet identifier (absent for user agent stylesheet and user-specified stylesheet rules) this rule came from.", "typeRef": "CSS.StyleSheetId"}, {"name": "startOffset", "type": "number", "optional": false, "description": "Offset of the start of the rule (including selector) from the beginning of the stylesheet.", "typeRef": null}, {"name": "endOffset", "type": "number", "optional": false, "description": "Offset of the end of the rule body from the beginning of the stylesheet.", "typeRef": null}, {"name": "used", "type": "boolean", "optional": false, "description": "Indicates whether the rule was actually used by some element in the page.", "typeRef": null}]);
 inspectorBackend.registerType("CSS.SourceRange", [{"name": "startLine", "type": "number", "optional": false, "description": "Start line of range.", "typeRef": null}, {"name": "startColumn", "type": "number", "optional": false, "description": "Start column of range (inclusive).", "typeRef": null}, {"name": "endLine", "type": "number", "optional": false, "description": "End line of range", "typeRef": null}, {"name": "endColumn", "type": "number", "optional": false, "description": "End column of range (exclusive).", "typeRef": null}]);
 inspectorBackend.registerType("CSS.ShorthandEntry", [{"name": "name", "type": "string", "optional": false, "description": "Shorthand name.", "typeRef": null}, {"name": "value", "type": "string", "optional": false, "description": "Shorthand value.", "typeRef": null}, {"name": "important", "type": "boolean", "optional": true, "description": "Whether the property has \\\"!important\\\" annotation (implies `false` if absent).", "typeRef": null}]);
@@ -1265,7 +1265,8 @@ inspectorBackend.registerEvent("Storage.attributionReportingSourceRegistered", [
 inspectorBackend.registerEvent("Storage.attributionReportingTriggerRegistered", ["registration", "eventLevel", "aggregatable"]);
 inspectorBackend.registerEvent("Storage.attributionReportingReportSent", ["url", "body", "result", "netError", "netErrorName", "httpStatusCode"]);
 inspectorBackend.registerEvent("Storage.attributionReportingVerboseDebugReportSent", ["url", "body", "netError", "netErrorName", "httpStatusCode"]);
-inspectorBackend.registerCommand("Storage.getStorageKeyForFrame", [{"name": "frameId", "type": "string", "optional": false, "description": "", "typeRef": "Page.FrameId"}], ["storageKey"], "Returns a storage key given a frame id.");
+inspectorBackend.registerCommand("Storage.getStorageKeyForFrame", [{"name": "frameId", "type": "string", "optional": false, "description": "", "typeRef": "Page.FrameId"}], ["storageKey"], "Returns a storage key given a frame id. Deprecated. Please use Storage.getStorageKey instead.");
+inspectorBackend.registerCommand("Storage.getStorageKey", [{"name": "frameId", "type": "string", "optional": true, "description": "", "typeRef": "Page.FrameId"}], ["storageKey"], "Returns storage key for the given frame. If no frame ID is provided, the storage key of the target executing this command is returned.");
 inspectorBackend.registerCommand("Storage.clearDataForOrigin", [{"name": "origin", "type": "string", "optional": false, "description": "Security origin.", "typeRef": null}, {"name": "storageTypes", "type": "string", "optional": false, "description": "Comma separated list of StorageType to clear.", "typeRef": null}], [], "Clears storage for origin.");
 inspectorBackend.registerCommand("Storage.clearDataForStorageKey", [{"name": "storageKey", "type": "string", "optional": false, "description": "Storage key.", "typeRef": null}, {"name": "storageTypes", "type": "string", "optional": false, "description": "Comma separated list of StorageType to clear.", "typeRef": null}], [], "Clears storage for storage key.");
 inspectorBackend.registerCommand("Storage.getCookies", [{"name": "browserContextId", "type": "string", "optional": true, "description": "Browser context to use when called on the browser endpoint.", "typeRef": "Browser.BrowserContextID"}], ["cookies"], "Returns all browser cookies.");

package/front_end/generated/protocol-mapping.d.ts

@@ -4412,11 +4412,20 @@ export namespace ProtocolMapping {
     };
     /**
      * Returns a storage key given a frame id.
+     * Deprecated. Please use Storage.getStorageKey instead.
      */
     'Storage.getStorageKeyForFrame': {
       paramsType: [Protocol.Storage.GetStorageKeyForFrameRequest];
       returnType: Protocol.Storage.GetStorageKeyForFrameResponse;
     };
+    /**
+     * Returns storage key for the given frame. If no frame ID is provided,
+     * the storage key of the target executing this command is returned.
+     */
+    'Storage.getStorageKey': {
+      paramsType: [Protocol.Storage.GetStorageKeyRequest?];
+      returnType: Protocol.Storage.GetStorageKeyResponse;
+    };
     /**
      * Clears storage for origin.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -3824,9 +3824,17 @@ declare namespace ProtocolProxyApi {
   export interface StorageApi {
     /**
      * Returns a storage key given a frame id.
+     * Deprecated. Please use Storage.getStorageKey instead.
+     * @deprecated
      */
     invoke_getStorageKeyForFrame(params: Protocol.Storage.GetStorageKeyForFrameRequest): Promise<Protocol.Storage.GetStorageKeyForFrameResponse>;
 
+    /**
+     * Returns storage key for the given frame. If no frame ID is provided,
+     * the storage key of the target executing this command is returned.
+     */
+    invoke_getStorageKey(params: Protocol.Storage.GetStorageKeyRequest): Promise<Protocol.Storage.GetStorageKeyResponse>;
+
     /**
      * Clears storage for origin.
      */

package/front_end/generated/protocol.ts

@@ -2848,6 +2848,10 @@ export namespace CSS {
      * Associated style declaration.
      */
     style: CSSStyle;
+    /**
+     * The BackendNodeId of the DOM node that constitutes the origin tree scope of this rule.
+     */
+    originTreeScopeNodeId?: DOM.BackendNodeId;
     /**
      * Media list array (for rules involving media queries). The array enumerates media queries
      * starting with the innermost one, going outwards.
@@ -17402,6 +17406,14 @@ export namespace Storage {
     storageKey: SerializedStorageKey;
   }
 
+  export interface GetStorageKeyRequest {
+    frameId?: Page.FrameId;
+  }
+
+  export interface GetStorageKeyResponse extends ProtocolResponseWithError {
+    storageKey: SerializedStorageKey;
+  }
+
   export interface ClearDataForOriginRequest {
     /**
      * Security origin.

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,