chrome-devtools-frontend 1.0.1565595 → 1.0.1567721

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

@@ -208,7 +208,6 @@ export class ChatView extends HTMLElement {
   };
 
   #render(): void {
-
     const inputWidgetClasses = Lit.Directives.classMap({
       'chat-input-widget': true,
       sticky: !this.#props.isReadOnly,
@@ -219,22 +218,58 @@ export class ChatView extends HTMLElement {
       <style>${chatViewStyles}</style>
       <div class="chat-ui">
         <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
-          ${renderMainContents({
-            messages: this.#props.messages,
-            isLoading: this.#props.isLoading,
-            isReadOnly: this.#props.isReadOnly,
-            canShowFeedbackForm: this.#props.canShowFeedbackForm,
-            isTextInputDisabled: this.#props.isTextInputDisabled,
-            suggestions: this.#props.emptyStateSuggestions,
-            userInfo: this.#props.userInfo,
-            markdownRenderer: this.#props.markdownRenderer,
-            changeSummary: this.#props.changeSummary,
-            changeManager: this.#props.changeManager,
-            onSuggestionClick: this.#handleSuggestionClick,
-            onFeedbackSubmit: this.#props.onFeedbackSubmit,
-            onMessageContainerRef: this.#handleMessageContainerRef,
-            onCopyResponseClick: this.#props.onCopyResponseClick,
-          })}
+          ${this.#props.messages.length > 0 ? html`
+            <div class="messages-container" ${ref(this.#handleMessageContainerRef)}>
+              ${repeat(this.#props.messages, message =>
+                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                  message,
+                  isLoading: this.#props.isLoading,
+                  isReadOnly: this.#props.isReadOnly,
+                  canShowFeedbackForm: this.#props.canShowFeedbackForm,
+                  userInfo: this.#props.userInfo,
+                  markdownRenderer: this.#props.markdownRenderer,
+                  isLastMessage: this.#props.messages.at(-1) === message,
+                  onSuggestionClick: this.#handleSuggestionClick,
+                  onFeedbackSubmit: this.#props.onFeedbackSubmit,
+                  onCopyResponseClick: this.#props.onCopyResponseClick,
+                })}></devtools-widget>`
+              )}
+              ${this.#props.isLoading ? Lit.nothing : html`<devtools-widget
+                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+                  changeSummary: this.#props.changeSummary ?? '',
+                  changeManager: this.#props.changeManager,
+                })}
+              ></devtools-widget>`}
+            </div>
+          ` : html`
+            <div class="empty-state-container">
+              <div class="header">
+                <div class="icon">
+                  <devtools-icon
+                    name="smart-assistant"
+                  ></devtools-icon>
+                </div>
+                <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
+              </div>
+              <div class="empty-state-content">
+                ${this.#props.emptyStateSuggestions.map(({title, jslogContext}) => {
+                  return html`<devtools-button
+                    class="suggestion"
+                    @click=${() => this.#handleSuggestionClick(title)}
+                    .data=${
+                      {
+                        variant: Buttons.Button.Variant.OUTLINED,
+                        size: Buttons.Button.Size.REGULAR,
+                        title,
+                        jslogContext: jslogContext ?? 'suggestion',
+                        disabled: this.#props.isTextInputDisabled,
+                      } as Buttons.Button.ButtonData
+                    }
+                  >${title}</devtools-button>`;
+                })}
+              </div>
+            </div>
+          `}
           <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
             isLoading: this.#props.isLoading,
             blockedByCrossOrigin: this.#props.blockedByCrossOrigin,
@@ -266,158 +301,6 @@ export class ChatView extends HTMLElement {
   }
 }
 
-function renderMainContents({
-  messages,
-  isLoading,
-  isReadOnly,
-  canShowFeedbackForm,
-  isTextInputDisabled,
-  suggestions,
-  userInfo,
-  markdownRenderer,
-  changeSummary,
-  changeManager,
-  onSuggestionClick,
-  onFeedbackSubmit,
-  onCopyResponseClick,
-  onMessageContainerRef,
-}: {
-  messages: Message[],
-  isLoading: boolean,
-  isReadOnly: boolean,
-  canShowFeedbackForm: boolean,
-  isTextInputDisabled: boolean,
-  suggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[],
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownLitRenderer,
-  changeManager: AiAssistanceModel.ChangeManager.ChangeManager,
-  onSuggestionClick: (suggestion: string) => void,
-  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
-  onCopyResponseClick: (message: ModelChatMessage) => void,
-  onMessageContainerRef: (el: Element|undefined) => void,
-  changeSummary?: string,
-}): Lit.LitTemplate {
-  if (messages.length > 0) {
-    return renderMessages({
-      messages,
-      isLoading,
-      isReadOnly,
-      canShowFeedbackForm,
-      userInfo,
-      markdownRenderer,
-      changeSummary,
-      changeManager,
-      onSuggestionClick,
-      onFeedbackSubmit,
-      onMessageContainerRef,
-      onCopyResponseClick
-    });
-  }
-
-  return renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick});
-}
-
-function renderMessages({
-  messages,
-  isLoading,
-  isReadOnly,
-  canShowFeedbackForm,
-  userInfo,
-  markdownRenderer,
-  changeSummary,
-  changeManager,
-  onSuggestionClick,
-  onFeedbackSubmit,
-  onCopyResponseClick,
-  onMessageContainerRef,
-}: {
-  messages: Message[],
-  isLoading: boolean,
-  isReadOnly: boolean,
-  canShowFeedbackForm: boolean,
-  userInfo: Pick<Host.InspectorFrontendHostAPI.SyncInformation, 'accountImage'|'accountFullName'>,
-  markdownRenderer: MarkdownLitRenderer,
-  onSuggestionClick: (suggestion: string) => void,
-  onFeedbackSubmit: (rpcId: Host.AidaClient.RpcGlobalId, rate: Host.AidaClient.Rating, feedback?: string) => void,
-  onCopyResponseClick: (message: ModelChatMessage) => void,
-  onMessageContainerRef: (el: Element|undefined) => void,
-  changeSummary?: string,
-  changeManager?: AiAssistanceModel.ChangeManager.ChangeManager,
-}): Lit.TemplateResult {
-  function renderPatchWidget(): Lit.LitTemplate {
-    if (isLoading) {
-      return Lit.nothing;
-    }
-
-    // clang-format off
-    return html`<devtools-widget
-      .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
-        changeSummary: changeSummary ?? '',
-        changeManager,
-      })}
-    ></devtools-widget>`;
-    // clang-format on
-  }
-
-  // clang-format off
-  return html`
-    <div class="messages-container" ${ref(onMessageContainerRef)}>
-      ${repeat(messages, message =>
-        html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
-          message,
-          isLoading,
-          isReadOnly,
-          canShowFeedbackForm,
-          userInfo,
-          markdownRenderer,
-          isLastMessage: messages.at(-1) === message,
-          onSuggestionClick,
-          onFeedbackSubmit,
-          onCopyResponseClick,
-        })}></devtools-widget>`
-      )}
-      ${renderPatchWidget()}
-    </div>
-  `;
-  // clang-format on
-}
-
-function renderEmptyState({isTextInputDisabled, suggestions, onSuggestionClick}: {
-  isTextInputDisabled: boolean,
-  suggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[],
-  onSuggestionClick: (suggestion: string) => void,
-}): Lit.TemplateResult {
-  // clang-format off
-  return html`<div class="empty-state-container">
-    <div class="header">
-      <div class="icon">
-        <devtools-icon
-          name="smart-assistant"
-        ></devtools-icon>
-      </div>
-      <h1>${lockedString(UIStringsNotTranslate.emptyStateText)}</h1>
-    </div>
-    <div class="empty-state-content">
-      ${suggestions.map(({title, jslogContext}) => {
-        return html`<devtools-button
-          class="suggestion"
-          @click=${() => onSuggestionClick(title)}
-          .data=${
-            {
-              variant: Buttons.Button.Variant.OUTLINED,
-              size: Buttons.Button.Size.REGULAR,
-              title,
-              jslogContext: jslogContext ?? 'suggestion',
-              disabled: isTextInputDisabled,
-            } as Buttons.Button.ButtonData
-          }
-        >${title}</devtools-button>`;
-      })}
-    </div>
-  </div>`;
-  // clang-format on
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'devtools-ai-chat-view': ChatView;

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

@@ -12,15 +12,18 @@ const {render, html} = Lit;
 
 export interface CollapsibleAssistanceContentWidgetData {
   headerText: string;
+  onReveal?: () => void;
 }
 
 export class CollapsibleAssistanceContentWidget extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #isCollapsed = false;
   #headerText = 'Details';
+  #onReveal?: () => void;
 
   set data(data: CollapsibleAssistanceContentWidgetData) {
     this.#headerText = data.headerText;
+    this.#onReveal = data.onReveal;
     this.#render();
   }
 
@@ -43,14 +46,30 @@ export class CollapsibleAssistanceContentWidget extends HTMLElement {
           this.#toggleCollapse();
         }}>
           ${this.#headerText}
-          <devtools-button .data=${{
-            variant: Buttons.Button.Variant.ICON,
-            iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
-            color: 'var(--sys-color-on-surface)',
-            width: '14px',
-            height: '14px',
-            } as Buttons.Button.ButtonData}
-          ></devtools-button>
+          <div>
+            <devtools-button .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: 'select-element',
+              color: 'var(--sys-color-on-surface)',
+              width: '14px',
+              height: '14px',
+              title: 'reveal',
+              } as Buttons.Button.ButtonData}
+              @click=${(event: Event) => {
+                event.stopPropagation();
+                this.#onReveal?.();
+              }}
+            ></devtools-button>
+            <devtools-button .data=${{
+              variant: Buttons.Button.Variant.ICON,
+              iconName: this.#isCollapsed ? 'triangle-right' : 'triangle-down',
+              color: 'var(--sys-color-on-surface)',
+              width: '14px',
+              height: '14px',
+              title: 'expand',
+              } as Buttons.Button.ButtonData}
+            ></devtools-button>
+          </div>
         </summary>
         <div class="content">
           <slot></slot>

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

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './CollapsibleAssistanceContentWidget.js';
 import '../../../models/trace/insights/insights.js';
 import '../../../panels/timeline/components/components.js';
 import './PerformanceAgentFlameChart.js';
+import './CollapsibleAssistanceContentWidget.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as SDK from '../../../core/sdk/sdk.js';
@@ -19,9 +19,11 @@ import type * as Marked from '../../../third_party/marked/marked.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as PanelsCommon from '../../common/common.js';
+import * as NetworkForward from '../../network/forward/forward.js';
 import * as Network from '../../network/network.js';
 import * as TimelineComponents from '../../timeline/components/components.js';
 import * as Insights from '../../timeline/components/insights/insights.js';
+import * as Timeline from '../../timeline/timeline.js';
 
 import {MarkdownRendererWithCodeBlock} from './MarkdownRendererWithCodeBlock.js';
 import type * as PerformanceAgentFlameChart from './PerformanceAgentFlameChart.js';
@@ -86,7 +88,11 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
         }
 
         return html`<devtools-collapsible-assistance-content-widget  .data=${{
-          headerText: `Insight - ${componentName}`
+          headerText: `Insight - ${componentName}`, onReveal: () => {
+            void UI.InspectorView.InspectorView.instance().showPanel('timeline').then(() => {
+              Timeline.TimelinePanel.TimelinePanel.instance().revealInsight(insightM);
+            });
+          },
         }
         }>
         ${this.#insightRenderer.renderInsightToWidgetElement(this.parsedTrace, insightSet, insightM, componentName, {
@@ -115,7 +121,13 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
             return html`<devtools-collapsible-assistance-content-widget
             .data=${{
               headerText: `Network Request: ${
-                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`
+                  networkRequest.url().length > 80 ? networkRequest.url().slice(0, 80) + '...' : networkRequest.url()}`,
+                  onReveal: () => {
+                    void UI.InspectorView.InspectorView.instance().showPanel('network').then(() => {
+                      void Common.Revealer.reveal(NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                          networkRequest, NetworkForward.UIRequestLocation.UIRequestTabs.TIMING));
+                    });
+                  },
             }
             }>
             <devtools-widget class="actions" .widgetConfig=${
@@ -142,7 +154,10 @@ export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBl
 
         return html`<devtools-collapsible-assistance-content-widget
         .data=${{
-          headerText: 'Network Request'
+          headerText: 'Network Request', onReveal: () => {
+            // eslint-disable-next-line no-console
+            console.log('Reveal network request', value);
+          },
         }
         }>
           ${networkTooltip}

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -37,6 +37,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
@@ -51,6 +52,8 @@ import {BackForwardCacheTreeElement} from './BackForwardCacheTreeElement.js';
 import {BackgroundServiceModel} from './BackgroundServiceModel.js';
 import {BackgroundServiceView} from './BackgroundServiceView.js';
 import {BounceTrackingMitigationsTreeElement} from './BounceTrackingMitigationsTreeElement.js';
+import {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
+import {RootTreeElement as DeviceBoundSessionsRootTreeElement} from './DeviceBoundSessionsTreeElement.js';
 import {type DOMStorage, DOMStorageModel, Events as DOMStorageModelEvents} from './DOMStorageModel.js';
 import {
   Events as ExtensionStorageModelEvents,
@@ -343,6 +346,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   periodicBackgroundSyncTreeElement: BackgroundServiceTreeElement;
   pushMessagingTreeElement: BackgroundServiceTreeElement;
   reportingApiTreeElement: ReportingApiTreeElement;
+  deviceBoundSessionsRootTreeElement: DeviceBoundSessionsRootTreeElement|undefined;
+  deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
   private readonly resourcesSection: ResourcesSection;
   private domStorageTreeElements: Map<DOMStorage, DOMStorageTreeElement>;
@@ -481,6 +486,13 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.reportingApiTreeElement = new ReportingApiTreeElement(panel);
     backgroundServiceTreeElement.appendChild(this.reportingApiTreeElement);
 
+    if (Root.Runtime.hostConfig.deviceBoundSessionsDebugging?.enabled) {
+      this.deviceBoundSessionsModel = new DeviceBoundSessionsModel();
+      this.deviceBoundSessionsRootTreeElement =
+          new DeviceBoundSessionsRootTreeElement(panel, this.deviceBoundSessionsModel);
+      backgroundServiceTreeElement.appendChild(this.deviceBoundSessionsRootTreeElement);
+    }
+
     const resourcesSectionTitle = i18nString(UIStrings.frames);
     const resourcesTreeElement = this.addSidebarSection(resourcesSectionTitle, 'frames');
     this.resourcesSection = new ResourcesSection(panel, resourcesTreeElement);
@@ -760,6 +772,8 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.domains = {};
     this.cookieListTreeElement.removeChildren();
     this.interestGroupTreeElement.clearEvents();
+    this.deviceBoundSessionsModel?.clearVisibleSites();
+    this.deviceBoundSessionsModel?.clearEvents();
   }
 
   private frameNavigated(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>): void {
@@ -791,6 +805,21 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
       this.domains[domain] = true;
       const cookieDomainTreeElement = new CookieTreeElement(this.panel, frame, parsedURL);
       this.cookieListTreeElement.appendChild(cookieDomainTreeElement);
+
+      // Update device bound session visibility for new cookie domain.
+      if (this.deviceBoundSessionsModel) {
+        const target = frame.resourceTreeModel().target();
+        const networkAgent = target.networkAgent();
+        void networkAgent.invoke_fetchSchemefulSite({origin: domain}).then(response => {
+          if (response.getError() || !this.deviceBoundSessionsModel) {
+            return;
+          }
+          // Confirm the domain is still present first.
+          if (this.domains[domain]) {
+            this.deviceBoundSessionsModel.addVisibleSite(response.schemefulSite);
+          }
+        });
+      }
     }
   }
 

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -10,6 +10,7 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 
 export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   protected readonly resourcesPanel: ResourcesPanel;
+  private customItemURL?: Platform.DevToolsPath.UrlString;
 
   constructor(resourcesPanel: ResourcesPanel, title: string, expandable: boolean, jslogContext: string) {
     super(title, expandable, jslogContext);
@@ -24,9 +25,16 @@ export class ApplicationPanelTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   get itemURL(): Platform.DevToolsPath.UrlString {
+    if (this.customItemURL) {
+      return this.customItemURL;
+    }
     throw new Error('Unimplemented Method');
   }
 
+  set itemURL(value: Platform.DevToolsPath.UrlString) {
+    this.customItemURL = value;
+  }
+
   override onselect(selectedByUser: boolean|undefined): boolean {
     if (!selectedByUser) {
       return false;
@@ -76,6 +84,10 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     return 'category://' + this.categoryName as Platform.DevToolsPath.UrlString;
   }
 
+  override set itemURL(value: Platform.DevToolsPath.UrlString) {
+    super.itemURL = value;
+  }
+
   setLink(link: Platform.DevToolsPath.UrlString): void {
     this.categoryLink = link;
   }

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -0,0 +1,169 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Common from '../../core/common/common.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+interface EventWithTimestamp {
+  event: Protocol.Network.DeviceBoundSessionEventOccurredEvent;
+  timestamp: Date;
+}
+export interface SessionAndEvents {
+  session?: Protocol.Network.DeviceBoundSession;
+  eventsById: Map<string, EventWithTimestamp>;
+}
+type SessionIdToSessionMap = Map<string|undefined, SessionAndEvents>;
+
+export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper<DeviceBoundSessionModelEventTypes>
+    implements SDK.TargetManager.SDKModelObserver<SDK.NetworkManager.NetworkManager> {
+  #siteSessions = new Map<string, SessionIdToSessionMap>();
+  #visibleSites = new Set<string>();
+
+  constructor() {
+    super();
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.NetworkManager.NetworkManager, this, {scoped: true});
+  }
+
+  modelAdded(networkManager: SDK.NetworkManager.NetworkManager): void {
+    networkManager.addEventListener(SDK.NetworkManager.Events.DeviceBoundSessionsAdded, this.#onSessionsSet, this);
+    networkManager.addEventListener(
+        SDK.NetworkManager.Events.DeviceBoundSessionEventOccurred, this.#onEventOccurred, this);
+    void networkManager.enableDeviceBoundSessions();
+  }
+
+  modelRemoved(networkManager: SDK.NetworkManager.NetworkManager): void {
+    networkManager.removeEventListener(SDK.NetworkManager.Events.DeviceBoundSessionsAdded, this.#onSessionsSet, this);
+    networkManager.removeEventListener(
+        SDK.NetworkManager.Events.DeviceBoundSessionEventOccurred, this.#onEventOccurred, this);
+  }
+
+  addVisibleSite(site: string): void {
+    if (this.#visibleSites.has(site)) {
+      return;
+    }
+    this.#visibleSites.add(site);
+    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.ADD_VISIBLE_SITE, {site});
+  }
+
+  clearVisibleSites(): void {
+    if (this.getPreserveLogSetting().get()) {
+      return;
+    }
+    this.#visibleSites.clear();
+    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.CLEAR_VISIBLE_SITES);
+  }
+
+  clearEvents(): void {
+    if (this.getPreserveLogSetting().get()) {
+      return;
+    }
+    const emptySessions = new Map<string, Array<string|undefined>>();
+    const emptySites = new Set<string>();
+    for (const [site, sessionIdToSessionMap] of [...this.#siteSessions]) {
+      let emptySessionsSiteEntry = emptySessions.get(site);
+      for (const [sessionId, sessionAndEvents] of sessionIdToSessionMap) {
+        sessionAndEvents.eventsById.clear();
+        if (sessionAndEvents.session) {
+          continue;
+        }
+        // Remove empty sessions.
+        sessionIdToSessionMap.delete(sessionId);
+        if (!emptySessionsSiteEntry) {
+          emptySessionsSiteEntry = [];
+          emptySessions.set(site, emptySessionsSiteEntry);
+        }
+        emptySessionsSiteEntry.push(sessionId);
+      }
+
+      // Remove empty sites.
+      if (sessionIdToSessionMap.size === 0) {
+        this.#siteSessions.delete(site);
+        emptySites.add(site);
+      }
+    }
+
+    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.CLEAR_EVENTS, {emptySessions, emptySites});
+  }
+
+  isSiteVisible(site: string): boolean {
+    return this.#visibleSites.has(site);
+  }
+
+  getSession(site: string, sessionId?: string): SessionAndEvents|undefined {
+    return this.#siteSessions.get(site)?.get(sessionId);
+  }
+
+  getPreserveLogSetting(): Common.Settings.Setting<boolean> {
+    return Common.Settings.Settings.instance().createSetting('device-bound-sessions-preserve-log', false);
+  }
+
+  #onSessionsSet({data: sessions}: {data: Protocol.Network.DeviceBoundSession[]}): void {
+    for (const session of sessions) {
+      const sessionAndEvents = this.#ensureSiteAndSessionInitialized(session.key.site, session.key.id);
+      sessionAndEvents.session = session;
+    }
+    this.dispatchEventToListeners(DeviceBoundSessionModelEvents.INITIALIZE_SESSIONS, {sessions});
+  }
+
+  #ensureSiteAndSessionInitialized(site: string, sessionId?: string): SessionAndEvents {
+    let sessionIdToSessionMap = this.#siteSessions.get(site);
+    if (!sessionIdToSessionMap) {
+      sessionIdToSessionMap = new Map();
+      this.#siteSessions.set(site, sessionIdToSessionMap);
+    }
+
+    let sessionAndEvent = sessionIdToSessionMap.get(sessionId);
+    if (!sessionAndEvent) {
+      sessionAndEvent = {session: undefined, eventsById: new Map<string, EventWithTimestamp>()};
+      sessionIdToSessionMap.set(sessionId, sessionAndEvent);
+    }
+    return sessionAndEvent;
+  }
+
+  #onEventOccurred({data: event}: {data: Protocol.Network.DeviceBoundSessionEventOccurredEvent}): void {
+    const sessionAndEvent = this.#ensureSiteAndSessionInitialized(event.site, event.sessionId);
+
+    // If this eventId has already been tracked, quit early.
+    if (sessionAndEvent.eventsById.has(event.eventId)) {
+      return;
+    }
+
+    // Add the new event.
+    const eventWithTimestamp = {event, timestamp: new Date()};
+    sessionAndEvent.eventsById.set(event.eventId, eventWithTimestamp);
+
+    // Add the new session if there is one.
+    const newSession = event.creationEventDetails?.newSession || event.refreshEventDetails?.newSession;
+    if (newSession) {
+      sessionAndEvent.session = newSession;
+    }
+
+    // Add the new challenge onto the session if there is one.
+    if (event.succeeded && sessionAndEvent.session && event.challengeEventDetails) {
+      sessionAndEvent.session.cachedChallenge = event.challengeEventDetails.challenge;
+    }
+
+    this.dispatchEventToListeners(
+        DeviceBoundSessionModelEvents.EVENT_OCCURRED,
+        {site: eventWithTimestamp.event.site, sessionId: eventWithTimestamp.event.sessionId});
+  }
+}
+
+export const enum DeviceBoundSessionModelEvents {
+  INITIALIZE_SESSIONS = 'INITIALIZE_SESSIONS',
+  ADD_VISIBLE_SITE = 'ADD_VISIBLE_SITE',
+  CLEAR_VISIBLE_SITES = 'CLEAR_VISIBLE_SITES',
+  EVENT_OCCURRED = 'EVENT_OCCURRED',
+  CLEAR_EVENTS = 'CLEAR_EVENTS',
+}
+
+export interface DeviceBoundSessionModelEventTypes {
+  [DeviceBoundSessionModelEvents.INITIALIZE_SESSIONS]: {sessions: Protocol.Network.DeviceBoundSession[]};
+  [DeviceBoundSessionModelEvents.ADD_VISIBLE_SITE]: {site: string};
+  [DeviceBoundSessionModelEvents.CLEAR_VISIBLE_SITES]: void;
+  [DeviceBoundSessionModelEvents.EVENT_OCCURRED]: {site: string, sessionId?: string};
+  [DeviceBoundSessionModelEvents.CLEAR_EVENTS]:
+      {emptySessions: Map<string, Array<string|undefined>>, emptySites: Set<string>};
+}