chrome-devtools-frontend 1.0.1571573 → 1.0.1572937

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

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
-
 import '../../../ui/components/spinners/spinners.js';
 
 import * as Host from '../../../core/host/host.js';
@@ -13,7 +11,7 @@ import type * as AiAssistanceModel from '../../../models/ai_assistance/ai_assist
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type {MarkdownLitRenderer} from '../../../ui/components/markdown_view/MarkdownView.js';
 import * as UI from '../../../ui/legacy/legacy.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, nothing, render} from '../../../ui/lit/lit.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import {ChatInput} from './ChatInput.js';
@@ -22,7 +20,7 @@ import chatViewStyles from './chatView.css.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
-const {html, Directives: {ref, repeat, createRef}} = Lit;
+const {ref, repeat, classMap} = Directives;
 
 /*
 * Strings that don't need to be translated at this time.
@@ -38,6 +36,12 @@ const lockedString = i18n.i18n.lockedString;
 
 const SCROLL_ROUNDING_OFFSET = 1;
 
+interface ViewOutput {
+  mainElement?: HTMLElement;
+  input?: UI.Widget.WidgetElement<ChatInput>;
+}
+type View = (input: ChatWidgetInput, output: ViewOutput, target: HTMLElement|ShadowRoot) => void;
+
 export interface Props {
   onTextSubmit:
       (text: string, imageInput?: Host.AidaClient.Part,
@@ -64,18 +68,110 @@ export interface Props {
   emptyStateSuggestions: AiAssistanceModel.AiAgent.ConversationSuggestion[];
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
-  isArtifactsSidebarOpen: boolean;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
   additionalFloatyContext: UI.Floaty.FloatyContextSelection[];
 }
 
+interface ChatWidgetInput extends Props {
+  handleScroll: (ev: Event) => void;
+  handleSuggestionClick: (title: string) => void;
+  handleMessageContainerRef: (el: Element|undefined) => void;
+}
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  const inputWidgetClasses = classMap({
+    'chat-input-widget': true,
+    sticky: !input.isReadOnly,
+  });
+
+  // clang-format off
+    render(html`
+      <style>${chatViewStyles}</style>
+      <div class="chat-ui">
+        <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
+          ${input.messages.length > 0 ? html`
+            <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
+              ${repeat(input.messages, message =>
+                html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
+                  message,
+                  isLoading: input.isLoading,
+                  isReadOnly: input.isReadOnly,
+                  canShowFeedbackForm: input.canShowFeedbackForm,
+                  userInfo: input.userInfo,
+                  markdownRenderer: input.markdownRenderer,
+                  isLastMessage: input.messages.at(-1) === message,
+                  onSuggestionClick: input.handleSuggestionClick,
+                  onFeedbackSubmit: input.onFeedbackSubmit,
+                  onCopyResponseClick: input.onCopyResponseClick,
+                })}></devtools-widget>`
+              )}
+              ${input.isLoading ? nothing : html`<devtools-widget
+                .widgetConfig=${UI.Widget.widgetConfig(PatchWidget, {
+                  changeSummary: input.changeSummary ?? '',
+                  changeManager: input.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">
+                ${input.emptyStateSuggestions.map(({title, jslogContext}) => {
+                  return html`<devtools-button
+                    class="suggestion"
+                    @click=${() => input.handleSuggestionClick(title)}
+                    .data=${
+                      {
+                        variant: Buttons.Button.Variant.OUTLINED,
+                        size: Buttons.Button.Size.REGULAR,
+                        title,
+                        jslogContext: jslogContext ?? 'suggestion',
+                        disabled: input.isTextInputDisabled,
+                      } as Buttons.Button.ButtonData
+                    }
+                  >${title}</devtools-button>`;
+                })}
+              </div>
+            </div>
+          `}
+          <devtools-widget class=${inputWidgetClasses} .widgetConfig=${UI.Widget.widgetConfig(ChatInput, {
+            isLoading: input.isLoading,
+            blockedByCrossOrigin: input.blockedByCrossOrigin,
+            isTextInputDisabled: input.isTextInputDisabled,
+            inputPlaceholder: input.inputPlaceholder,
+            disclaimerText: input.disclaimerText,
+            selectedContext: input.selectedContext,
+            inspectElementToggled: input.inspectElementToggled,
+            multimodalInputEnabled: input.multimodalInputEnabled ?? false,
+            conversationType: input.conversationType,
+            uploadImageInputEnabled: input.uploadImageInputEnabled ?? false,
+            isReadOnly: input.isReadOnly,
+            additionalFloatyContext: input.additionalFloatyContext,
+            onContextClick: input.onContextClick,
+            onInspectElementClick: input.onInspectElementClick,
+            onTextSubmit: input.onTextSubmit,
+            onCancelClick: input.onCancelClick,
+            onNewConversation: input.onNewConversation,
+          })} ${ref(element => { output.input = element as UI.Widget.WidgetElement<ChatInput>; } )}></devtools-widget>
+        </main>
+      </div>
+    `, target);
+  // clang-format on
+};
 export class ChatView extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #scrollTop?: number;
   #props: Props;
   #messagesContainerElement?: Element;
-  #mainElementRef = createRef<HTMLElement>();
+  #output: ViewOutput = {};
   #messagesContainerResizeObserver = new ResizeObserver(() => this.#handleMessagesContainerResize());
   /**
    * Indicates whether the chat scroll position should be pinned to the bottom.
@@ -94,11 +190,12 @@ export class ChatView extends HTMLElement {
    * whether to pin the content to the bottom.
    */
   #isProgrammaticScroll = false;
-  #inputRef = createRef<UI.Widget.WidgetElement<ChatInput>>();
+  #view: View;
 
-  constructor(props: Props) {
+  constructor(props: Props, view = DEFAULT_VIEW) {
     super();
     this.#props = props;
+    this.#view = view;
   }
 
   set props(props: Props) {
@@ -132,7 +229,7 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
@@ -140,11 +237,11 @@ export class ChatView extends HTMLElement {
   }
 
   scrollToBottom(): void {
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
-    this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+    this.#setMainElementScrollTop(this.#output.mainElement.scrollHeight);
   }
 
   #handleMessagesContainerResize(): void {
@@ -152,26 +249,26 @@ export class ChatView extends HTMLElement {
       return;
     }
 
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
     if (this.#pinScrollToBottom) {
-      this.#setMainElementScrollTop(this.#mainElementRef.value.scrollHeight);
+      this.#setMainElementScrollTop(this.#output.mainElement.scrollHeight);
     }
   }
 
   #setMainElementScrollTop(scrollTop: number): void {
-    if (!this.#mainElementRef?.value) {
+    if (!this.#output.mainElement) {
       return;
     }
 
     this.#scrollTop = scrollTop;
     this.#isProgrammaticScroll = true;
-    this.#mainElementRef.value.scrollTop = scrollTop;
+    this.#output.mainElement.scrollTop = scrollTop;
   }
 
-  #handleMessageContainerRef(el: Element|undefined): void {
+  #handleMessageContainerRef = (el: Element|undefined): void => {
     this.#messagesContainerElement = el;
 
     if (el) {
@@ -180,7 +277,7 @@ export class ChatView extends HTMLElement {
       this.#pinScrollToBottom = true;
       this.#messagesContainerResizeObserver.disconnect();
     }
-  }
+  };
 
   #handleScroll = (ev: Event): void => {
     if (!ev.target || !(ev.target instanceof HTMLElement)) {
@@ -201,103 +298,21 @@ export class ChatView extends HTMLElement {
   };
 
   #handleSuggestionClick = (suggestion: string): void => {
-    this.#inputRef.value?.getWidget()?.setInputValue(suggestion);
+    this.#output.input?.getWidget()?.setInputValue(suggestion);
     this.#render();
     this.focusTextInput();
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiAssistanceDynamicSuggestionClicked);
   };
 
   #render(): void {
-    const inputWidgetClasses = Lit.Directives.classMap({
-      'chat-input-widget': true,
-      sticky: !this.#props.isReadOnly,
-    });
-
-    // clang-format off
-    Lit.render(html`
-      <style>${chatViewStyles}</style>
-      <div class="chat-ui">
-        <main @scroll=${this.#handleScroll} ${ref(this.#mainElementRef)}>
-          ${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,
-            isTextInputDisabled: this.#props.isTextInputDisabled,
-            inputPlaceholder: this.#props.inputPlaceholder,
-            disclaimerText: this.#props.disclaimerText,
-            selectedContext: this.#props.selectedContext,
-            inspectElementToggled: this.#props.inspectElementToggled,
-            multimodalInputEnabled: this.#props.multimodalInputEnabled ?? false,
-            conversationType: this.#props.conversationType,
-            uploadImageInputEnabled: this.#props.uploadImageInputEnabled ?? false,
-            isReadOnly: this.#props.isReadOnly,
-            additionalFloatyContext: this.#props.additionalFloatyContext,
-            onContextClick: this.#props.onContextClick,
-            onInspectElementClick: this.#props.onInspectElementClick,
-            onTextSubmit: (
-                text: string, imageInput?: Host.AidaClient.Part,
-                multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
-              this.#props.onTextSubmit(text, imageInput, multimodalInputType);
-              this.#render();
-            },
-            onCancelClick: this.#props.onCancelClick,
-            onNewConversation: this.#props.onNewConversation,
-          })} ${ref(this.#inputRef)}></devtools-widget>
-        </main>
-      </div>
-    `, this.#shadow, {host: this});
-    // clang-format on
+    this.#view(
+        {
+          ...this.#props,
+          handleScroll: this.#handleScroll,
+          handleSuggestionClick: this.#handleSuggestionClick,
+          handleMessageContainerRef: this.#handleMessageContainerRef,
+        },
+        this.#output, this.#shadow);
   }
 }
 

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

@@ -2,171 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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';
 import type * as Protocol from '../../../generated/protocol.js';
-import * as GreenDev from '../../../models/greendev/greendev.js';
-import * as Logs from '../../../models/logs/logs.js';
-import * as NetworkTimeCalculator from '../../../models/network_time_calculator/network_time_calculator.js';
-import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
 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';
 
 const {html} = Lit.StaticHtml;
 const {ref, createRef} = Lit.Directives;
-const {widgetConfig} = UI.Widget;
 
 export class PerformanceAgentMarkdownRenderer extends MarkdownRendererWithCodeBlock {
-  #insightRenderer = new Insights.InsightRenderer.InsightRenderer();
-
   constructor(
       private mainFrameId = '',
-      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null,
-      private parsedTrace: Trace.TraceModel.ParsedTrace|null = null) {
+      private lookupEvent: (key: Trace.Types.File.SerializableKey) => Trace.Types.Events.Event | null = () => null) {
     super();
   }
 
   override templateForToken(token: Marked.Marked.MarkedToken): Lit.LitTemplate|null {
-    if (!this.parsedTrace) {
-      return null;
-    }
-
-    // NOTE: The custom tag handling below (e.g., <ai-insight>, <network-request-widget>)
-    // is part of a prototype for the GreenDev project and is only rendered when the GreenDev
-    // feature is enabled.
-    if (token.type === 'html' && GreenDev.Prototypes.instance().isEnabled('inlineWidgets')) {
-      if (token.text.includes('<flame-chart-widget')) {
-        const startMatch = token.text.match(/start="?(\d+)"?/);
-        const endMatch = token.text.match(/end="?(\d+)"?/);
-        const start = startMatch ? Number(startMatch[1]) : this.parsedTrace.data.Meta.traceBounds.min;
-        const end = endMatch ? Number(endMatch[1]) : this.parsedTrace.data.Meta.traceBounds.max;
-        return html`<devtools-performance-agent-flame-chart .data=${{
-          parsedTrace: this.parsedTrace,
-          start,
-          end,
-        } as PerformanceAgentFlameChart.PerformanceAgentFlameChartData}
-          }></devtools-performance-agent-flame-chart>`;
-      }
-
-      // Flexible regex to match the tag name and a value a.
-      // match[1]: tagName (e.g., 'ai-insight', 'network-request-widget')
-      // match[2]: value (value needed to display the widget)
-      const regex = /<([a-z-]+)\s+value="([^"]+)">/;
-      const match = token.text.match(regex);
-
-      if (!match) {
-        return null;
-      }
-
-      const tagName = match[1];
-      const value = match[2];
-
-      if (tagName === 'ai-insight' && value) {
-        const componentName = value;
-
-        const insightSet = this.parsedTrace.insights?.values().next().value;
-        const insightM = insightSet?.model[componentName as Trace.Insights.Types.InsightKeys];
-
-        if (!insightM) {
-          return null;
-        }
-
-        return html`<devtools-collapsible-assistance-content-widget  .data=${{
-          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, {
-          selected: true,
-          isAIAssistanceContext: true
-        })}
-        </devtools-collapsible-assistance-content-widget>`;
-      }
-      if (tagName === 'network-request-widget' && value) {
-        const rawTraceEvent =
-            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getRawTraceEvents().at(Number(value));
-
-        // Rendering RequestTimingView widget only works for fresh traces where the network log is in sync.
-        // If the trace is uploaded, we need to use the synthetic events and
-        // render the network request tooltip that uses the synthetic events.
-        if (rawTraceEvent && Trace.Types.Events.isSyntheticNetworkRequest(rawTraceEvent)) {
-          const rawTraceEventId = rawTraceEvent?.args?.data?.requestId;
-          const rawTraceEventUrl = rawTraceEvent?.args?.data?.url;
-          const networkRequest = rawTraceEvent ? Logs.NetworkLog.NetworkLog.instance()
-                                                     .requestsForId(rawTraceEventId)
-                                                     .find(r => r.url() === rawTraceEventUrl) :
-                                                 null;
-
-          if (networkRequest) {
-            const calculator = new NetworkTimeCalculator.NetworkTimeCalculator(true);
-            return html`<devtools-collapsible-assistance-content-widget
-            .data=${{
-              headerText: `Network Request: ${
-                  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=${
-                UI.Widget.widgetConfig(Network.RequestTimingView.RequestTimingView, {
-                  request: networkRequest,
-                  calculator,
-                })}></devtools-widget>
-            </devtools-collapsible-assistance-content-widget>`;
-          }
-        }
-
-        const syntheticRequest =
-            Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
-                Number(value));
-
-        let networkTooltip = null;
-        if (syntheticRequest && Trace.Types.Events.isSyntheticNetworkRequest(syntheticRequest)) {
-          // clang-format off
-          networkTooltip = html`<devtools-widget .widgetConfig=${widgetConfig(TimelineComponents.NetworkRequestTooltip.NetworkRequestTooltip, {
-            networkRequest: syntheticRequest,
-          })}></devtools-widget>`;
-          // clang-format on
-        }
-
-        return html`<devtools-collapsible-assistance-content-widget
-        .data=${{
-          headerText: 'Network Request', onReveal: () => {
-            // eslint-disable-next-line no-console
-            console.log('Reveal network request', value);
-          },
-        }
-        }>
-          ${networkTooltip}
-          </devtools-collapsible-assistance-content-widget>`;
-      }
-
-      return null;
-    }
-
     if (token.type === 'link' && token.href.startsWith('#')) {
       if (token.href.startsWith('#node-')) {
         const nodeId = Number(token.href.replace('#node-', '')) as Protocol.DOM.BackendNodeId;

package/front_end/panels/application/DeviceBoundSessionsModel.ts

@@ -12,6 +12,7 @@ interface EventWithTimestamp {
 }
 export interface SessionAndEvents {
   session?: Protocol.Network.DeviceBoundSession;
+  isSessionTerminated: boolean;
   eventsById: Map<string, EventWithTimestamp>;
 }
 type SessionIdToSessionMap = Map<string|undefined, SessionAndEvents>;
@@ -91,6 +92,14 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
     return this.#visibleSites.has(site);
   }
 
+  isSessionTerminated(site: string, sessionId?: string): boolean {
+    const session = this.getSession(site, sessionId);
+    if (session === undefined) {
+      return false;
+    }
+    return session.isSessionTerminated;
+  }
+
   getSession(site: string, sessionId?: string): SessionAndEvents|undefined {
     return this.#siteSessions.get(site)?.get(sessionId);
   }
@@ -116,7 +125,11 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
 
     let sessionAndEvent = sessionIdToSessionMap.get(sessionId);
     if (!sessionAndEvent) {
-      sessionAndEvent = {session: undefined, eventsById: new Map<string, EventWithTimestamp>()};
+      sessionAndEvent = {
+        session: undefined,
+        isSessionTerminated: false,
+        eventsById: new Map<string, EventWithTimestamp>()
+      };
       sessionIdToSessionMap.set(sessionId, sessionAndEvent);
     }
     return sessionAndEvent;
@@ -145,6 +158,15 @@ export class DeviceBoundSessionsModel extends Common.ObjectWrapper.ObjectWrapper
       sessionAndEvent.session.cachedChallenge = event.challengeEventDetails.challenge;
     }
 
+    // Set the session's terminated status based on the event.
+    if (event.succeeded) {
+      if (event.terminationEventDetails) {
+        sessionAndEvent.isSessionTerminated = true;
+      } else if (event.creationEventDetails) {
+        sessionAndEvent.isSessionTerminated = false;
+      }
+    }
+
     this.dispatchEventToListeners(
         DeviceBoundSessionModelEvents.EVENT_OCCURRED,
         {site: eventWithTimestamp.event.site, sessionId: eventWithTimestamp.event.sessionId});

package/front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -120,6 +120,25 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     }
   }
 
+  #updateTerminatedSessionDisplay(site: string, sessionId: string|undefined): void {
+    const isSessionTerminated = this.#model.isSessionTerminated(site, sessionId);
+    const siteMapEntry = this.#sites.get(site);
+    if (!siteMapEntry) {
+      return;
+    }
+    const sessionElement = siteMapEntry.sessions.get(sessionId);
+    if (!sessionElement) {
+      return;
+    }
+    if (isSessionTerminated) {
+      sessionElement.listItemElement.classList.add('device-bound-session-terminated');
+      sessionElement.setLeadingIcons([createIcon('database-off')]);
+    } else {
+      sessionElement.listItemElement.classList.remove('device-bound-session-terminated');
+      sessionElement.setLeadingIcons([createIcon('database')]);
+    }
+  }
+
   #addSiteSessionIfMissing(site: string, sessionId: string|undefined): void {
     let siteMapEntry = this.#sites.get(site);
     if (!siteMapEntry) {
@@ -144,6 +163,9 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     if (!siteMapEntry.sessions.has(sessionId)) {
       const sessionElement = new ApplicationPanelTreeElement(
           this.resourcesPanel, sessionId ?? i18nString(UIStrings.noSession), false, 'device-bound-sessions-session');
+      if (sessionId === undefined) {
+        sessionElement.listItemElement.classList.add('no-device-bound-session');
+      }
       sessionElement.setLeadingIcons([createIcon('database')]);
       sessionElement.itemURL = `device-bound-sessions://${site}/${sessionId || ''}` as Platform.DevToolsPath.UrlString;
       const defaultOnSelect = sessionElement.onselect.bind(sessionElement);
@@ -209,6 +231,7 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
       {data: {site, sessionId}}: Common.EventTarget
           .EventTargetEvent<DeviceBoundSessionModelEventTypes[DeviceBoundSessionModelEvents.EVENT_OCCURRED]>): void {
     this.#addSiteSessionIfMissing(site, sessionId);
+    this.#updateTerminatedSessionDisplay(site, sessionId);
   }
 
   #onClearEvents({data: {emptySessions, emptySites}}: Common.EventTarget

package/front_end/panels/application/FrameDetailsView.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
 import '../../ui/components/expandable_list/expandable_list.js';
 import '../../ui/components/report_view/report_view.js';
 
@@ -322,10 +323,10 @@ function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplat
     <devtools-report-section>
       <span class="report-section">
         ${i18nString(UIStrings.originTrialsExplanation)}
-        <x-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
-                jslog=${VisualLogging.link('learn-more.origin-trials').track({click: true})}>
+        <devtools-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
+                .jslogContext=${'learn-more.origin-trials'}>
           ${i18nString(UIStrings.learnMore)}
-        </x-link>
+        </devtools-link>
       </span>
     </devtools-report-section>
     <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
@@ -735,11 +736,11 @@ function renderApiAvailabilitySection(frame: SDK.ResourceTreeModel.ResourceTreeF
       <devtools-report-section>
         <span class="report-section">
           ${i18nString(UIStrings.availabilityOfCertainApisDepends)}
-          <x-link
+          <devtools-link
             href="https://web.dev/why-coop-coep/" class="link"
-            jslog=${VisualLogging.link('learn-more.coop-coep').track({click: true})}>
+            .jslogContext=${'learn-more.coop-coep'}>
             ${i18nString(UIStrings.learnMore)}
-          </x-link>
+          </devtools-link>
         </span>
       </devtools-report-section>
       ${renderSharedArrayBufferAvailability(frame)}
@@ -814,9 +815,9 @@ function renderMeasureMemoryAvailability(frame: SDK.ResourceTreeModel.ResourceTr
         <devtools-report-key>${i18nString(UIStrings.measureMemory)}</devtools-report-key>
         <devtools-report-value>
           <span title=${tooltipText}>${
-        availabilityText}</span>\xA0<x-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" jslog=${
-        VisualLogging.link('learn-more.monitor-memory-usage').track({click: true})}>${
-        i18nString(UIStrings.learnMore)}</x-link>
+        availabilityText}</span>\xA0<devtools-link class="link" href="https://web.dev/monitor-total-page-memory-usage/" .jslogContext=${
+                                                                  'learn-more.monitor-memory-usage'}>${
+        i18nString(UIStrings.learnMore)}</devtools-link>
         </devtools-report-value>
       `;
   }
@@ -857,7 +858,7 @@ export class FrameDetailsReportView extends UI.Widget.Widget {
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#protocolMonitorExperimentEnabled =
-        Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.PROTOCOL_MONITOR);
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.PROTOCOL_MONITOR);
     this.#view = view;
   }