chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/docs/styleguide/ux/components.md

@@ -281,14 +281,39 @@ Find an exhaustive collection of icons currently used in DevTools [here](https:/
 
 #### Developer guidelines
 
-For some frequently used icons e.g. cross-circle, warning-filled etc. colors are auto-set in the component. See full list [here](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/components/icon_button/icon.css;l=47)
+For some frequently used icons, colors are auto-set in the component. The full list of icons with auto-set colors is:
+
+- `warning-filled`
+- `issue-exclamation-filled`
+- `cross-circle`
+- `cross-circle-filled`
+- `issue-cross-filled`
+- `small-status-dot`
+- `issue-text-filled`
+- `large-arrow-right-filled`
+- `code-circle`
+- `file-document`
+- `file-font`
+- `file-script`
+- `file-stylesheet`
+- `file-media`
+
+For the definitions, refer to the [icon.css file](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/icons/icon.css).
+
+The default icon size is at 20x20 pixels. There are predefined classes for other sizes, don't deviate from them:
+
+  * `.extra-small`: 12x12 pixels
+  * `.small`: 14x14 pixels
+  * `.medium`: 16x16 pixels
+  * `.large`: 18x18 pixels
+  * `.extra-large`: 20x20 pixels
 
 ##### Dos and Don'ts
 
 ###### Do
 
   * Set class and change color in .css files
-  * Set one of the predefined classes to change icon size e.g. extra-small for 12px
+  * Set one of the predefined classes to change icon size.
 
 ###### Don't
 
@@ -304,11 +329,12 @@ Usage with lit-html:
 html`<devtools-icon name=${'some-icon-name'}></devtools-icon>`;
 ```
 
-Usage with the imperative API:
+### Resources
 
-```ts
-const someIcon = createIcon('some-icon-name', 'some-class');
-```
+*   [`devtools-icon`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/icons/Icon.ts)
+*   [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/#Icon)
+*   [Icon Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=4323-3772)
+*   [Greenlines](http://go/chrome-devtools:icons-greenlines)
 
 ## Context menus
 
@@ -604,8 +630,8 @@ html`<devtools-card heading="Card with rich heading">
 ### Resources
 
 *   [`devtools-card`](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/ui/kit/cards/Card.ts)
-* [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/)
+* [Component Documentation Example](https://chromedevtools.github.io/devtools-frontend/#Card)
 
 * [Cards Figma](https://www.figma.com/design/A5iQBBNAe5zPFpJvUzUgW8/Chrome-DevTools-Design-Kit?node-id=3456-939)
 
-* [Greenlines](go/chrome-devtools:cards-greenlines)
+* [Greenlines](http:/go/chrome-devtools:cards-greenlines)

package/eslint.config.mjs

@@ -703,6 +703,13 @@ export default defineConfig([
       ],
     },
   },
+  {
+    name: 'Front-end docs files',
+    files: ['front_end/**/*.docs.ts'],
+    rules: {
+      'no-console': 'off',
+    },
+  },
   {
     name: 'TypeScript test files',
     files: [

package/front_end/Images/generate-css-vars.js

@@ -1,9 +1,10 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-const path = require('node:path');
+import * as path from 'node:path';
+
+import {writeIfChanged} from '../../scripts/build/ninja/write-if-changed.js';
 
-const {writeIfChanged} = require('../../scripts/build/ninja/write-if-changed.js');
 const [, , buildTimestamp, targetGenDir, targetName, ...imageSources] = process.argv;
 
 /**
@@ -15,7 +16,7 @@ function generateCSSVariableDefinition(fileName) {
       // We have to remove the `src/` part from any SVG file names for the CSS variables, while
       // we still use the full URL for the meta.url import. That's because the rollup-plugin-import-meta-assets
       // rewrites the image URLs to the new location, but doesn't modify the generated CSS variable name
-      fileName.replace('src\/', '').replace(path.extname(fileName), '')}', 'url(\\"' + new URL('./${
+      fileName.replace('src/', '').replace(path.extname(fileName), '')}', 'url(\\"' + new URL('./${
       fileName}', import.meta.url).toString() + '\\")');`;
 }
 
@@ -45,4 +46,7 @@ const tsconfigContent = `{
 }
 `;
 
-writeIfChanged(path.join(targetGenDir, `${targetName}-tsconfig.json`), tsconfigContent);
+writeIfChanged(
+    path.join(targetGenDir, `${targetName}-tsconfig.json`),
+    tsconfigContent,
+);

package/front_end/Images/src/spark.svg

@@ -0,0 +1,10 @@
+<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1320_25512)">
+<path d="M7 12.6319C6.94299 12.6319 6.89549 12.6129 6.85749 12.5749C6.81948 12.5369 6.79098 12.4894 6.77198 12.4324C6.61997 11.8338 6.38245 11.259 6.05942 10.708C5.74589 10.1474 5.37536 9.64862 4.94782 9.21158C4.51078 8.77454 4.01199 8.39926 3.45144 8.08573C2.90039 7.7722 2.32559 7.53943 1.72704 7.38742C1.67003 7.36842 1.62253 7.33992 1.58452 7.30191C1.54652 7.26391 1.52752 7.2164 1.52752 7.1594C1.52752 7.10239 1.54652 7.05489 1.58452 7.01689C1.62253 6.97888 1.67003 6.95038 1.72704 6.93138C2.32559 6.77937 2.90039 6.5466 3.45144 6.23307C4.00249 5.91954 4.50128 5.54426 4.94782 5.10722C5.38486 4.67968 5.76014 4.18564 6.07367 3.62509C6.3872 3.06454 6.61997 2.48499 6.77198 1.88644C6.79098 1.82943 6.81948 1.78193 6.85749 1.74392C6.89549 1.70592 6.94299 1.68692 7 1.68692C7.057 1.68692 7.10451 1.70592 7.14251 1.74392C7.18052 1.78193 7.20902 1.82943 7.22802 1.88644C7.38003 2.48499 7.6128 3.06454 7.92633 3.62509C8.23986 4.17614 8.61514 4.67018 9.05218 5.10722C9.48922 5.54426 9.98326 5.91954 10.5343 6.23307C11.0949 6.5466 11.6744 6.77937 12.273 6.93138C12.33 6.95038 12.3775 6.97888 12.4155 7.01689C12.4535 7.05489 12.4725 7.10239 12.4725 7.1594C12.4725 7.2164 12.4535 7.26391 12.4155 7.30191C12.3775 7.33992 12.33 7.36842 12.273 7.38742C11.6744 7.53943 11.0949 7.7722 10.5343 8.08573C9.97376 8.39926 9.47972 8.77454 9.05218 9.21158C8.61514 9.65812 8.23986 10.1569 7.92633 10.708C7.6128 11.259 7.38003 11.8338 7.22802 12.4324C7.20902 12.4894 7.18052 12.5369 7.14251 12.5749C7.10451 12.6129 7.057 12.6319 7 12.6319Z" fill="#0B57D0"/>
+</g>
+<defs>
+<clipPath id="clip0_1320_25512">
+<rect width="14" height="15.1442" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/front_end/core/common/Settings.ts

@@ -246,17 +246,29 @@ export interface SettingsBackingStore {
   clear(): void;
 }
 
-export const NOOP_STORAGE: SettingsBackingStore = {
-  register: () => {},
-  set: () => {},
-  get: () => Promise.resolve(''),
-  remove: () => {},
-  clear: () => {},
-};
+export class InMemoryStorage implements SettingsBackingStore {
+  #store = new Map();
+
+  register(_setting: string): void {
+  }
+  set(key: string, value: string): void {
+    this.#store.set(key, value);
+  }
+  get(key: string): Promise<string> {
+    return this.#store.get(key);
+  }
+  remove(key: string): void {
+    this.#store.delete(key);
+  }
+  clear(): void {
+    this.#store.clear();
+  }
+}
 
 export class SettingsStorage {
   constructor(
-      private object: Record<string, string>, private readonly backingStore: SettingsBackingStore = NOOP_STORAGE,
+      private object: Record<string, string>,
+      private readonly backingStore: SettingsBackingStore = new InMemoryStorage(),
       private readonly storagePrefix = '') {
   }
 

package/front_end/core/host/UserMetrics.ts

@@ -529,7 +529,9 @@ export enum Action {
   InsightTeaserGenerationErrored = 194,
   AiCodeGenerationSuggestionDisplayed = 195,
   AiCodeGenerationSuggestionAccepted = 196,
-  MAX_VALUE = 197,
+  InsightTeaserModelDownloadStarted = 197,
+  InsightTeaserModelDownloadCompleted = 198,
+  MAX_VALUE = 199,
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 

package/front_end/core/i18n/collect-ui-strings.js

@@ -2,15 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const glob = require('glob');
-const path = require('node:path');
-const yargs = require('yargs');
-const {hideBin} = require('yargs/helpers');
+import glob from 'glob';
+import * as path from 'node:path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
 
-const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
-const {bakePlaceholders} = require('../../../third_party/i18n/bake-ctc-to-lhl.js');
-const {collectAllStringsInDir, createPsuedoLocaleStrings, IGNORED_PATH_COMPONENTS} =
-    require('../../../third_party/i18n/collect-strings.js');
+import {writeIfChanged} from '../../../scripts/build/ninja/write-if-changed.js';
+import {bakePlaceholders} from '../../../third_party/i18n/bake-ctc-to-lhl.js';
+import {
+  collectAllStringsInDir,
+  createPsuedoLocaleStrings,
+  IGNORED_PATH_COMPONENTS,
+} from '../../../third_party/i18n/collect-strings.js';
 
 /** @typedef {import('../../../third_party/i18n/bake-ctc-to-lhl.js').CtcMessage} CtcMessage */
 
@@ -39,7 +42,9 @@ function convertCtcToLhLAndSave(outputDirectory, locale, strings) {
 
   /** @type {Record<string, CtcMessage>} */
   const sortedCtcStrings = {};
-  const sortedEntries = Object.entries(strings).sort(([keyA], [keyB]) => keyA.localeCompare(keyB));
+  const sortedEntries = Object.entries(strings).sort(
+      ([keyA], [keyB]) => keyA.localeCompare(keyB),
+  );
   for (const [key, defn] of sortedEntries) {
     sortedCtcStrings[key] = defn;
   }
@@ -73,7 +78,11 @@ for (const directory of inputDirectories) {
 const outputDirectory = yargsObject['output-directory'];
 convertCtcToLhLAndSave(outputDirectory, 'en-US', collectedStrings);
 if (yargsObject['include-en-xl']) {
-  convertCtcToLhLAndSave(outputDirectory, 'en-XL', createPsuedoLocaleStrings(collectedStrings));
+  convertCtcToLhLAndSave(
+      outputDirectory,
+      'en-XL',
+      createPsuedoLocaleStrings(collectedStrings),
+  );
 }
 
 // Write the depfile. This is necessary to properly rebuild en-US.json/en-XL.json

package/front_end/core/i18n/generate-locales-js.js

@@ -2,11 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-const path = require('node:path');
-const yargs = require('yargs');
-const {hideBin} = require('yargs/helpers');
+import * as path from 'node:path';
+import yargs from 'yargs';
+import {hideBin} from 'yargs/helpers';
 
-const {writeIfChanged} = require('../../../scripts/build/ninja/write-if-changed.js');
+import {writeIfChanged} from '../../../scripts/build/ninja/write-if-changed.js';
 
 const yargsObject = yargs(hideBin(process.argv))
                         .option('target-gen-dir', {

package/front_end/core/protocol_client/CDPConnection.ts

@@ -42,6 +42,7 @@ export enum CDPErrorStatus {
   SERVER_ERROR = -32000,
   SESSION_NOT_FOUND = SERVER_ERROR - 1,
   DEVTOOLS_STUB_ERROR = -32015,
+  DEVTOOLS_REHYDRATION_ERROR = -32016,
 }
 
 export interface CDPError {

package/front_end/core/protocol_client/InspectorBackend.ts

@@ -638,6 +638,7 @@ export class TargetBase {
 
 /** These are not logged as console.error */
 const IGNORED_ERRORS = new Set<CDPErrorStatus>([
+  CDPErrorStatus.DEVTOOLS_REHYDRATION_ERROR,
   CDPErrorStatus.DEVTOOLS_STUB_ERROR,
   CDPErrorStatus.SERVER_ERROR,
   CDPErrorStatus.SESSION_NOT_FOUND,
@@ -694,7 +695,10 @@ class AgentPrototype {
           if ('result' in response) {
             return {...response.result, getError: () => undefined};
           }
-          return {getError: () => undefined};
+          return {
+            getError: () => `Command ${method} returned neither result nor an error, params: ${
+                JSON.stringify(request, undefined, 2)}`,
+          };
         });
   }
 }

package/front_end/core/root/Runtime.ts

@@ -478,16 +478,6 @@ interface AllowPopoverForcing {
   enabled: boolean;
 }
 
-interface AiSubmenuPrompts {
-  enabled: boolean;
-  featureName?: string;
-}
-
-interface AiDebugWithAi {
-  enabled: boolean;
-  featureName?: string;
-}
-
 interface GlobalAiButton {
   enabled: boolean;
   promotionEnabled: boolean;
@@ -561,7 +551,6 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsFreestyler: HostConfigFreestyler,
   devToolsGreenDevUi: HostConfigGreenDevUi,
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
-  devToolsAiDebugWithAi: AiDebugWithAi,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
@@ -580,7 +569,6 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   thirdPartyCookieControls: HostConfigThirdPartyCookieControls,
   devToolsAiGeneratedTimelineLabels: AiGeneratedTimelineLabels,
   devToolsAllowPopoverForcing: AllowPopoverForcing,
-  devToolsAiSubmenuPrompts: AiSubmenuPrompts,
   devToolsGlobalAiButton: GlobalAiButton,
   devToolsGdpProfiles: GdpProfiles,
   devToolsGdpProfilesAvailability: GdpProfilesAvailability,

package/front_end/core/sdk/DOMModel.ts

@@ -32,6 +32,7 @@
  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
+/* eslint-disable @devtools/no-adopted-style-sheets */
 
 import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -160,6 +161,7 @@ export class DOMNode {
    */
   detached = false;
   #retainedNodes?: Set<Protocol.DOM.BackendNodeId>;
+  #adoptedStyleSheets: AdoptedStyleSheet[] = [];
 
   constructor(domModel: DOMModel) {
     this.#domModel = domModel;
@@ -206,6 +208,10 @@ export class DOMNode {
       this.setAttributesPayload(payload.attributes);
     }
 
+    if (payload.adoptedStyleSheets) {
+      this.#adoptedStyleSheets = this.toAdoptedStyleSheets(payload.adoptedStyleSheets);
+    }
+
     this.childNodeCountInternal = payload.childNodeCount || 0;
     if (payload.shadowRoots) {
       for (let i = 0; i < payload.shadowRoots.length; ++i) {
@@ -827,6 +833,19 @@ export class DOMNode {
     }
   }
 
+  private toAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): AdoptedStyleSheet[] {
+    return ids.map(id => (new AdoptedStyleSheet(id, this.#domModel.cssModel())));
+  }
+
+  setAdoptedStyleSheets(ids: Protocol.DOM.StyleSheetId[]): void {
+    this.#adoptedStyleSheets = this.toAdoptedStyleSheets(ids);
+    this.#domModel.dispatchEventToListeners(Events.AdoptedStyleSheetsModified, this);
+  }
+
+  get adoptedStyleSheetsForNode(): AdoptedStyleSheet[] {
+    return this.#adoptedStyleSheets;
+  }
+
   setDistributedNodePayloads(payloads: Protocol.DOM.BackendNode[]): void {
     this.#distributedNodes = [];
     for (const payload of payloads) {
@@ -1206,6 +1225,11 @@ export class DOMDocument extends DOMNode {
   }
 }
 
+export class AdoptedStyleSheet {
+  constructor(readonly id: Protocol.DOM.StyleSheetId, readonly cssModel: CSSModel) {
+  }
+}
+
 export class DOMModel extends SDKModel<EventTypes> {
   agent: ProtocolProxyApi.DOMApi;
   idToDOMNode = new Map<Protocol.DOM.NodeId, DOMNode>();
@@ -1571,6 +1595,14 @@ export class DOMModel extends SDKModel<EventTypes> {
     this.scheduleMutationEvent(node);
   }
 
+  adoptedStyleSheetsModified(parentId: Protocol.DOM.NodeId, styleSheets: Protocol.DOM.StyleSheetId[]): void {
+    const parent = this.idToDOMNode.get(parentId);
+    if (!parent) {
+      return;
+    }
+    parent.setAdoptedStyleSheets(styleSheets);
+  }
+
   scrollableFlagUpdated(nodeId: Protocol.DOM.NodeId, isScrollable: boolean): void {
     const node = this.nodeForId(nodeId);
     if (!node || node.isScrollable() === isScrollable) {
@@ -1776,6 +1808,7 @@ export enum Events {
   TopLayerElementsChanged = 'TopLayerElementsChanged',
   ScrollableFlagUpdated = 'ScrollableFlagUpdated',
   AffectedByStartingStylesFlagUpdated = 'AffectedByStartingStylesFlagUpdated',
+  AdoptedStyleSheetsModified = 'AdoptedStyleSheetsModified',
   /* eslint-enable @typescript-eslint/naming-convention */
 }
 
@@ -1793,6 +1826,7 @@ export interface EventTypes {
   [Events.TopLayerElementsChanged]: void;
   [Events.ScrollableFlagUpdated]: {node: DOMNode};
   [Events.AffectedByStartingStylesFlagUpdated]: {node: DOMNode};
+  [Events.AdoptedStyleSheetsModified]: DOMNode;
 }
 
 class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
@@ -1800,9 +1834,6 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
   constructor(domModel: DOMModel) {
     this.#domModel = domModel;
   }
-  adoptedStyleSheetsModified(_params: Protocol.DOM.AdoptedStyleSheetsModifiedEvent): void {
-    // TODO: implementation
-  }
 
   documentUpdated(): void {
     this.#domModel.documentUpdated();
@@ -1816,6 +1847,10 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
     this.#domModel.attributeRemoved(nodeId, name);
   }
 
+  adoptedStyleSheetsModified({nodeId, adoptedStyleSheets}: Protocol.DOM.AdoptedStyleSheetsModifiedEvent): void {
+    this.#domModel.adoptedStyleSheetsModified(nodeId, adoptedStyleSheets);
+  }
+
   inlineStyleInvalidated({nodeIds}: Protocol.DOM.InlineStyleInvalidatedEvent): void {
     this.#domModel.inlineStyleInvalidated(nodeIds);
   }

package/front_end/core/sdk/DebuggerModel.ts

@@ -942,10 +942,15 @@ export class DebuggerModel extends SDKModel<EventTypes> {
    * Important: This iterator will not yield the "synchronous" part of the stack trace, only the async parent chain.
    */
   async *
-      iterateAsyncParents(stackTraceOrPausedDetails: Protocol.Runtime.StackTrace|DebuggerPausedDetails):
+      iterateAsyncParents(
+          stackTraceOrPausedDetails: Protocol.Runtime.StackTrace|
+          Pick<DebuggerPausedDetails, 'asyncStackTrace'|'asyncStackTraceId'>):
           AsyncGenerator<{stackTrace: Protocol.Runtime.StackTrace, target: Target}> {
     // We make `DebuggerPausedDetails` look like a stack trace. We are only interested in `parent` and `parentId` in any case.
-    let stackTrace: Protocol.Runtime.StackTrace = stackTraceOrPausedDetails instanceof DebuggerPausedDetails ?
+    const isPausedDetails = (details: typeof stackTraceOrPausedDetails):
+        details is Pick<DebuggerPausedDetails, 'asyncStackTrace'|'asyncStackTraceId'> =>
+            !('parent' in details) && !('parentId' in details);
+    let stackTrace: Protocol.Runtime.StackTrace = isPausedDetails(stackTraceOrPausedDetails) ?
         {
           callFrames: [],
           parent: stackTraceOrPausedDetails.asyncStackTrace,
@@ -1507,8 +1512,8 @@ export class DebuggerPausedDetails {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   auxData: Record<string, any>|undefined;
   breakpointIds: string[];
-  asyncStackTrace: Protocol.Runtime.StackTrace|undefined;
-  asyncStackTraceId: Protocol.Runtime.StackTraceId|undefined;
+  asyncStackTrace?: Protocol.Runtime.StackTrace;
+  asyncStackTraceId?: Protocol.Runtime.StackTraceId;
   constructor(
       debuggerModel: DebuggerModel,
       callFrames: Protocol.Debugger.CallFrame[],

package/front_end/core/sdk/IsolateManager.ts

@@ -49,6 +49,13 @@ export class IsolateManager extends Common.ObjectWrapper.ObjectWrapper<EventType
     }
   }
 
+  unobserveIsolates(observer: Observer): void {
+    this.#observers.delete(observer);
+    if (!this.#observers.size) {
+      this.#pollId++;
+    }
+  }
+
   modelAdded(model: RuntimeModel): void {
     void this.#modelAdded(model);
   }

package/front_end/core/sdk/PageResourceLoader.ts

@@ -98,14 +98,14 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
   #queuedLoads: LoadQueueEntry[] = [];
   readonly #loadOverride: ((arg0: string) => Promise<{
                              success: boolean,
-                             content: string,
+                             content: string|Uint8Array<ArrayBuffer>,
                              errorDescription: Host.ResourceLoader.LoadErrorDescription,
                            }>)|null;
   constructor(
       targetManager: TargetManager, settings: Common.Settings.Settings, userAgentProvider: UserAgentProvider,
       loadOverride: ((arg0: string) => Promise<{
                        success: boolean,
-                       content: string,
+                       content: string|Uint8Array<ArrayBuffer>,
                        errorDescription: Host.ResourceLoader.LoadErrorDescription,
                      }>)|null,
       maxConcurrentLoads = 500) {
@@ -123,7 +123,7 @@ export class PageResourceLoader extends Common.ObjectWrapper.ObjectWrapper<Event
     forceNew: boolean,
     loadOverride: (null|((arg0: string) => Promise<{
                            success: boolean,
-                           content: string,
+                           content: string|Uint8Array<ArrayBuffer>,
                            errorDescription: Host.ResourceLoader.LoadErrorDescription,
                          }>)),
     targetManager?: TargetManager,

package/front_end/core/sdk/RehydratingConnection.ts

@@ -27,7 +27,7 @@ import type * as Protocol from '../../generated/protocol.js';
 import * as Common from '../common/common.js';
 import * as i18n from '../i18n/i18n.js';
 import type * as Platform from '../platform/platform.js';
-import type * as ProtocolClient from '../protocol_client/protocol_client.js';
+import * as ProtocolClient from '../protocol_client/protocol_client.js';
 import * as Root from '../root/root.js';
 
 import * as EnhancedTraces from './EnhancedTracesParser.js';
@@ -325,7 +325,10 @@ export class RehydratingSession extends RehydratingSessionBase {
       default:
         this.sendMessageToFrontend({
           id: data.id,
-          result: {},
+          error: {
+            message: `Command ${data.method} not implemented in RehydratingSession.`,
+            code: ProtocolClient.CDPConnection.CDPErrorStatus.DEVTOOLS_STUB_ERROR,
+          }
         });
         break;
     }

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -105,7 +105,6 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       return null;
     }
 
-    // TODO(crbug.com/445966299): Refactor to use `storageAgent().invoke_getStorageKey()` instead.
     const response = await this.storageAgent.invoke_getStorageKey({frameId});
     if (response.getError() === 'Frame tree node for given frame not found') {
       return null;

package/front_end/entrypoints/main/MainImpl.ts

@@ -124,11 +124,30 @@ const UIStrings = {
    * @description Notification shown to the user whenever DevTools receives an external request.
    */
   externalRequestReceived: '`DevTools` received an external request',
+  /**
+   * @description Notification shown to the user whenever DevTools has finished downloading a local AI model.
+   */
+  aiModelDownloaded: 'AI model downloaded',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('entrypoints/main/MainImpl.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let loadedPanelCommonModule: typeof PanelCommon|undefined;
+
+const WINDOW_LOCAL_STORAGE: Common.Settings.SettingsBackingStore = {
+  register(_setting: string): void{},
+  async get(setting: string): Promise<string> {
+    return window.localStorage.getItem(setting) as unknown as string;
+  },
+  set(setting: string, value: string): void {
+    window.localStorage.setItem(setting, value);
+  },
+  remove(setting: string): void {
+    window.localStorage.removeItem(setting);
+  },
+  clear: () => window.localStorage.clear(),
+};
+
 export class MainImpl {
   #readyForTestPromise = Promise.withResolvers<void>();
   #veStartPromise!: Promise<void>;
@@ -271,15 +290,11 @@ export class MainImpl {
       storagePrefix = '__bundled__';
     }
 
-    let localStorage;
+    let localStorage: Common.Settings.SettingsStorage;
     if (!Host.InspectorFrontendHost.isUnderTest() && window.localStorage) {
-      const localbackingStore: Common.Settings.SettingsBackingStore = {
-        ...Common.Settings.NOOP_STORAGE,
-        clear: () => window.localStorage.clear(),
-      };
-      localStorage = new Common.Settings.SettingsStorage(window.localStorage, localbackingStore, storagePrefix);
+      localStorage = new Common.Settings.SettingsStorage(window.localStorage, WINDOW_LOCAL_STORAGE, storagePrefix);
     } else {
-      localStorage = new Common.Settings.SettingsStorage({}, Common.Settings.NOOP_STORAGE, storagePrefix);
+      localStorage = new Common.Settings.SettingsStorage({}, undefined, storagePrefix);
     }
 
     const hostUnsyncedStorage: Common.Settings.SettingsBackingStore = {
@@ -505,7 +520,10 @@ export class MainImpl {
     LiveMetrics.LiveMetrics.instance();
     CrUXManager.CrUXManager.instance();
 
-    AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+    const builtInAi = AiAssistanceModel.BuiltInAi.BuiltInAi.instance();
+    builtInAi.addEventListener(
+        AiAssistanceModel.BuiltInAi.Events.DOWNLOADED_AND_SESSION_CREATED,
+        () => Snackbar.Snackbar.Snackbar.show({message: i18nString(UIStrings.aiModelDownloaded)}));
 
     new PauseListener();
 
@@ -809,8 +827,8 @@ export class MainMenuItem implements UI.Toolbar.Provider {
   readonly #item: UI.Toolbar.ToolbarMenuButton;
   constructor() {
     this.#item = new UI.Toolbar.ToolbarMenuButton(
-        this.#handleContextMenu.bind(this), /* isIconDropdown */ true, /* useSoftMenu */ true, 'main-menu',
-        'dots-vertical');
+        this.#handleContextMenu.bind(this), /* isIconDropdown */ true,
+        /* useSoftMenu */ true, 'main-menu', 'dots-vertical');
     this.#item.element.classList.add('main-menu');
     this.#item.setTitle(i18nString(UIStrings.customizeAndControlDevtools));
   }