chrome-devtools-frontend 1.0.1578486 → 1.0.1579812

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -164,6 +164,10 @@ const UIStringsNotTranslate = {
    *@description Placeholder text for the chat UI input.
    */
   inputPlaceholderForNoContext: 'Ask AI Assistance',
+  /**
+   * @description Placeholder text for the chat UI input with branding Gemini (do not translate)
+   */
+  inputPlaceholderForNoContextBranded: 'Ask Gemini',
   /**
    * @description Disclaimer text right after the chat input.
    */
@@ -591,6 +595,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           onContextClick: this.#handleContextClick.bind(this),
           onNewConversation: this.#handleNewChatRequest.bind(this),
           onCopyResponseClick: this.#onCopyResponseClick.bind(this),
+          onContextRemoved: isAiAssistanceContextSelectionAgentEnabled() ? this.#handleContextRemoved.bind(this) : null,
         }
       };
     }
@@ -729,7 +734,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation = conversation;
     }
 
-    this.#conversation?.setContext(this.#getConversationContext(this.#conversation));
+    this.#conversation?.setContext(this.#getConversationContext(
+        isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
+                                                       (this.#conversation?.type ?? null)));
 
     this.requestUpdate();
   }
@@ -1009,6 +1016,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         return lockedString(UIStringsNotTranslate.inputPlaceholderForPerformanceWithNoRecording);
       }
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+        if (AiAssistanceModel.AiUtils.isGeminiBranding()) {
+          return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContextBranded);
+        }
         return lockedString(UIStringsNotTranslate.inputPlaceholderForNoContext);
     }
   }
@@ -1096,6 +1106,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Node picker is using linkifier.
   }
 
+  #handleContextRemoved(): void {
+    this.#conversation?.setContext(null);
+    this.requestUpdate();
+  }
+
   #canExecuteQuery(): boolean {
     const isBrandedBuild = Boolean(Root.Runtime.hostConfig.aidaAvailability?.enabled);
     const isBlockedByAge = Boolean(Root.Runtime.hostConfig.aidaAvailability?.blockedByAge);
@@ -1269,12 +1284,9 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.#runAbortController = new AbortController();
   }
 
-  #getConversationContext(conversation?: AiAssistanceModel.AiConversation.AiConversation):
+  #getConversationContext(type?: AiAssistanceModel.AiHistoryStorage.ConversationType):
       AiAssistanceModel.AiAgent.ConversationContext<unknown>|null {
-    if (!conversation) {
-      return null;
-    }
-    switch (conversation.type) {
+    switch (type) {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING:
         return this.#selectedElement;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.FILE:
@@ -1284,38 +1296,32 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       case AiAssistanceModel.AiHistoryStorage.ConversationType.PERFORMANCE:
         return this.#selectedPerformanceTrace;
       case AiAssistanceModel.AiHistoryStorage.ConversationType.NONE:
+      case undefined:
         return null;
     }
   }
 
   #handleConversationContextChange = (data: unknown): void => {
     if (data instanceof Workspace.UISourceCode.UISourceCode) {
-      if (this.#selectedFile?.getItem() === data) {
-        return;
-      }
-      this.#selectedFile = new AiAssistanceModel.FileAgent.FileContext(data);
-
+      const context = new AiAssistanceModel.FileAgent.FileContext(data);
+      this.#selectedFile = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof SDK.DOMModel.DOMNode) {
-      if (this.#selectedElement?.getItem() === data ||
-          // Ignore non node type like comments or html tags
-          data.nodeType() === Node.ELEMENT_NODE) {
-        return;
-      }
-      this.#selectedElement = new AiAssistanceModel.StylingAgent.NodeContext(data);
+      const context = new AiAssistanceModel.StylingAgent.NodeContext(data);
+      this.#selectedElement = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof SDK.NetworkRequest.NetworkRequest) {
-      if (this.#selectedRequest?.getItem() === data) {
-        return;
-      }
       const calculator = NetworkPanel.NetworkPanel.NetworkPanel.instance().networkLogView.timeCalculator();
-      this.#selectedRequest = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
+      const context = new AiAssistanceModel.NetworkAgent.RequestContext(data, calculator);
+      this.#selectedRequest = context;
+      this.#conversation?.setContext(context);
     } else if (data instanceof AiAssistanceModel.AIContext.AgentFocus) {
-      if (this.#selectedPerformanceTrace?.getItem() === data) {
-        return;
-      }
-      this.#selectedPerformanceTrace = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
+      const context = new AiAssistanceModel.PerformanceAgent.PerformanceTraceContext(data);
+      this.#selectedPerformanceTrace = context;
+      this.#conversation?.setContext(context);
     }
 
-    this.#updateConversationState(this.#conversation);
+    this.requestUpdate();
   };
 
   async #startConversation(
@@ -1329,7 +1335,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     // Cancel any previous in-flight conversation.
     this.#cancel();
     const signal = this.#runAbortController.signal;
-    const context = this.#getConversationContext(this.#conversation);
+    const context = this.#getConversationContext(this.#conversation.type);
     this.#conversation.setContext(context);
 
     // If a different context is provided, it must be from the same origin.

package/front_end/panels/ai_assistance/ai_assistance-meta.ts

@@ -174,7 +174,6 @@ UI.ActionRegistration.registerActionExtension({
     return new AiAssistance.ActionDelegate();
   },
   condition: config => isAnyFeatureAvailable(config) && !isPolicyRestricted(config) && !isGeoRestricted(config),
-  featurePromotionId: 'debug-with-ai',
 });
 
 UI.ActionRegistration.registerActionExtension({

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

@@ -39,6 +39,10 @@ const UIStrings = {
    * @description The footer disclaimer that links to more information about the AI feature.
    */
   learnAbout: 'Learn about AI in DevTools',
+  /**
+   * @description Label added to the button that remove the currently selected context in AI Assistance panel.
+   */
+  removeContext: 'Remove selected context',
 } as const;
 
 /*
@@ -137,23 +141,27 @@ export interface ViewInput {
   onImagePaste: (event: ClipboardEvent) => void;
   onImageDragOver: (event: DragEvent) => void;
   onImageDrop: (event: DragEvent) => void;
+  onContextRemoved: (() => void)|null;
 }
 
 export type ViewOutput = undefined;
 
-export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const chatInputContainerCls = Lit.Directives.classMap({
-    'chat-input-container': true,
-    'single-line-layout': !input.selectedContext,
-    disabled: input.isTextInputDisabled,
-  });
-
-  const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
-    const classes = Lit.Directives.classMap({
-      'chat-input-disclaimer': true,
-      'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
-    });
-    // clang-format off
+export const
+    DEFAULT_VIEW =
+        (input: ViewInput, output: ViewOutput, target: HTMLElement):
+            void => {
+              const chatInputContainerCls = Lit.Directives.classMap({
+                'chat-input-container': true,
+                'single-line-layout': !input.selectedContext,
+                disabled: input.isTextInputDisabled,
+              });
+
+              const renderRelevantDataDisclaimer = (tooltipId: string): Lit.LitTemplate => {
+                const classes = Lit.Directives.classMap({
+                  'chat-input-disclaimer': true,
+                  'hide-divider': !input.isLoading && input.blockedByCrossOrigin,
+                });
+                // clang-format off
     return html`
       <div class=${classes}>
         <button
@@ -185,10 +193,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         </div></devtools-tooltip>
       </div>
     `;
-    // clang-format on
-  };
+                // clang-format on
+              };
 
-  // clang-format off
+              // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
     <style>${chatInputStyles}</style>
@@ -363,6 +371,16 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                             :
                             input.selectedContext.getTitle()}
                         </span>
+                        ${input.onContextRemoved ? html`
+                                  <devtools-button
+                                    title=${i18nString(UIStrings.removeContext)}
+                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    class="remove-context"
+                                    .iconName=${'cross'}
+                                    .size=${Buttons.Button.Size.MICRO}
+                                    .jslogContext=${'context-removed'}
+                                    .variant=${Buttons.Button.Variant.ICON}
+                                    @click=${input.onContextRemoved}></devtools-button>` : Lit.nothing}
                       </div>
                     </div>`
                   : Lit.nothing}
@@ -462,8 +480,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${renderRelevantDataDisclaimer(RELEVANT_DATA_LINK_FOOTER_ID)}
     </footer>
   `, target);
-  // clang-format on
-};
+              // clang-format on
+            };
 
 /**
  * ChatInput is a presenter for the input area in the AI Assistance panel.
@@ -503,6 +521,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
   onInspectElementClick = (): void => {};
   onCancelClick = (): void => {};
   onNewConversation = (): void => {};
+  onContextRemoved: (() => void)|null = null;
 
   async #handleTakeScreenshot(): Promise<void> {
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
@@ -685,6 +704,7 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onImageUpload: this.onImageUpload,
           onImageDragOver: this.#handleImageDragOver,
           onImageDrop: this.#handleImageDrop,
+          onContextRemoved: this.onContextRemoved,
         },
         undefined, this.contentElement);
   }

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

@@ -323,6 +323,7 @@ export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, ta
           }
           return renderStep({
             step: part.step,
+            isLoading: input.isLoading,
             markdownRenderer: input.markdownRenderer,
             isLast: isLastPart,
           });
@@ -450,11 +451,12 @@ function renderStepDetails({
   // clang-format on
 }
 
-function renderStepBadge({step, isLast}: {
+function renderStepBadge({step, isLoading, isLast}: {
   step: Step,
+  isLoading: boolean,
   isLast: boolean,
 }): Lit.LitTemplate {
-  if (step.isLoading && isLast && !step.sideEffect) {
+  if (isLoading && isLast && !step.sideEffect) {
     return html`<devtools-spinner></devtools-spinner>`;
   }
 
@@ -478,8 +480,9 @@ function renderStepBadge({step, isLast}: {
     ></devtools-icon>`;
 }
 
-function renderStep({step, markdownRenderer, isLast}: {
+function renderStep({step, isLoading, markdownRenderer, isLast}: {
   step: Step,
+  isLoading: boolean,
   markdownRenderer: MarkdownLitRenderer,
   isLast: boolean,
 }): Lit.LitTemplate {
@@ -496,7 +499,7 @@ function renderStep({step, markdownRenderer, isLast}: {
       .open=${Boolean(step.sideEffect)}>
       <summary>
         <div class="summary">
-          ${renderStepBadge({ step, isLast })}
+          ${renderStepBadge({ step, isLoading, isLast })}
           ${renderTitle(step)}
           <devtools-icon
             class="arrow"

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

@@ -56,6 +56,7 @@ export interface Props {
   onContextClick: () => void;
   onNewConversation: () => void;
   onCopyResponseClick: (message: ModelChatMessage) => void;
+  onContextRemoved: (() => void)|null;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
   messages: Message[];
@@ -175,6 +176,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             onTextSubmit: input.onTextSubmit,
             onCancelClick: input.onCancelClick,
             onNewConversation: input.onNewConversation,
+            onContextRemoved: input.onContextRemoved,
           })} ${ref(element => { output.input = element as UI.Widget.WidgetElement<ChatInput>; } )}></devtools-widget>
         </main>
       </div>

package/front_end/panels/ai_assistance/components/chatInput.css

@@ -22,7 +22,6 @@
   max-width: var(--sys-size-36);
   background-color: var(--sys-color-cdt-base-container);
   width: 100%;
-
 }
 
 .chat-readonly-container {
@@ -221,6 +220,8 @@
 
   .resource-link,
   .resource-task {
+    display: flex;
+    align-items: center;
     cursor: pointer;
     padding: var(--sys-size-2) var(--sys-size-3);
     font: var(--sys-typescale-body5-regular);
@@ -239,6 +240,12 @@
     & .title {
       vertical-align: middle;
       font: var(--sys-typescale-body5-regular);
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    & .remove-context {
+      vertical-align: middle;
     }
 
     &.has-picker-behavior {
@@ -253,8 +260,8 @@
     devtools-file-source-icon {
       display: inline-flex;
       vertical-align: middle;
-      width: var(--sys-size-7);
-      height: var(--sys-size-7);
+      min-width: var(--sys-size-7);
+      min-height: var(--sys-size-7);
     }
 
     /*

package/front_end/panels/animation/AnimationGroupPreviewUI.ts

@@ -98,7 +98,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <div class="animation-group-preview-ui">
       <button
-        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true})}
+        jslog=${VisualLogging.item(`animations.buffer-preview${input.isScrollDrivenAnimationGroup ? '-sda' : ''}`).track({click: true, resize: true})}
         class=${classes}
         role="option"
         aria-label=${input.label}

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -582,27 +582,25 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <devtools-report>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
-          ${renderKeyValue(i18nString(UIStrings.keySite), key.site, 'dbsc-site')}
-          ${renderKeyValue(i18nString(UIStrings.keyId), key.id, 'dbsc-id')}
-          ${renderKeyValue(i18nString(UIStrings.refreshUrl), sessionAndEvents.session.refreshUrl, 'dbsc-refresh-url')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.expiryDate), new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString(),
-            'dbsc-expiry-date')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.cachedChallenge), sessionAndEvents.session.cachedChallenge || '',
-            'dbsc-cached-challenge')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.allowedRefreshInitiators),
-            sessionAndEvents.session.allowedRefreshInitiators.join(', '), 'dbsc-allowed-refresh-initiators')}
+          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
+          <devtools-report-value>${key.site}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.keyId)}</devtools-report-key>
+          <devtools-report-value>${key.id}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.refreshUrl)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.refreshUrl}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.expiryDate)}</devtools-report-key>
+          <devtools-report-value>${
+        new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString()}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.cachedChallenge)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.cachedChallenge || ''}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.allowedRefreshInitiators)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.allowedRefreshInitiators.join(', ')}</devtools-report-value>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.scope)}</devtools-report-section-header>
-          ${renderKeyValue(i18nString(UIStrings.origin), inclusionRules.origin, 'dbsc-origin')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.includeSite), boolToString(inclusionRules.includeSite), 'dbsc-include-site')}
+          <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
+          <devtools-report-value>${inclusionRules.origin}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.includeSite)}</devtools-report-key>
+          <devtools-report-value>${boolToString(inclusionRules.includeSite)}</devtools-report-value>
         </devtools-report>
         ${
         inclusionRules.urlRules.length > 0 ? html`
@@ -710,78 +708,62 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   const creationEventDetails =
       selectedEvent?.creationEventDetails &&
       html`
-            ${
-          renderKeyValue(
-              i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.creationEventDetails.fetchResult),
-              'dbsc-creation-fetch-result')}
-            ${
-          selectedEvent.creationEventDetails.newSession &&
-          html`
-             ${
-              renderKeyValue(
-                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
-                  'dbsc-creation-updated-session-config')}
+          <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
+          <devtools-report-value>${
+          fetchResultToString(selectedEvent.creationEventDetails.fetchResult)}</devtools-report-value>
+            ${selectedEvent.creationEventDetails.newSession && html`
+              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
+              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
             `}
           `;
   const refreshEventDetails =
       selectedEvent?.refreshEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.refreshResult),
-              refreshResultToString(selectedEvent.refreshEventDetails.refreshResult), 'dbsc-refresh-result')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.causedAnyRequestDeferrals),
-              boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh),
-              'dbsc-refresh-was-fully-proactive-refresh')}
+          <devtools-report-key>${i18nString(UIStrings.refreshResult)}</devtools-report-key>
+          <devtools-report-value>${
+          refreshResultToString(selectedEvent.refreshEventDetails.refreshResult)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.causedAnyRequestDeferrals)}</devtools-report-key>
+          <devtools-report-value>${
+          boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh)}</devtools-report-value>
             ${
           selectedEvent.refreshEventDetails.fetchResult &&
           html`
-              ${
-              renderKeyValue(
-                  i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.refreshEventDetails.fetchResult),
-                  'dbsc-refresh-fetch-result')}
+              <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
+              <devtools-report-value>${
+              fetchResultToString(selectedEvent.refreshEventDetails.fetchResult)}</devtools-report-value>
             `}
-            ${
-          selectedEvent.refreshEventDetails.newSession &&
-          html`
-              ${
-              renderKeyValue(
-                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
-                  'dbsc-refresh-updated-session-config')}
+            ${selectedEvent.refreshEventDetails.newSession && html`
+              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
+              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
             `}
           `;
   const challengeEventDetails =
       selectedEvent?.challengeEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.challengeResult),
-              challengeResultToString(selectedEvent.challengeEventDetails.challengeResult), 'dbsc-challenge-result')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.challenge), selectedEvent.challengeEventDetails.challenge, 'dbsc-challenge')}
+          <devtools-report-key>${i18nString(UIStrings.challengeResult)}</devtools-report-key>
+          <devtools-report-value>${
+          challengeResultToString(selectedEvent.challengeEventDetails.challengeResult)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.challenge)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.challengeEventDetails.challenge}</devtools-report-value>
           `;
   const terminationEventDetails =
       selectedEvent?.terminationEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.deletionReason),
-              deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason), 'dbsc-termination-reason')}
+          <devtools-report-key>${i18nString(UIStrings.deletionReason)}</devtools-report-key>
+          <devtools-report-value>${
+          deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason)}</devtools-report-value>
           `;
   const eventDetailsContentHtml = selectedEvent ?
       html`
         <devtools-report>
-          ${renderKeyValue(i18nString(UIStrings.keySite), selectedEvent.site, 'dbsc-event-site')}
-          ${
-          selectedEvent.sessionId &&
-          renderKeyValue(i18nString(UIStrings.sessionId), selectedEvent.sessionId, 'dbsc-event-session-id')}
-          ${renderKeyValue(i18nString(UIStrings.type), getEventTypeString(selectedEvent), 'dbsc-event-type')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.eventResult), succeededToString(selectedEvent.succeeded), 'dbsc-event-result')}
+          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.site}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.sessionId)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.sessionId}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.type)}</devtools-report-key>
+          <devtools-report-value>${getEventTypeString(selectedEvent)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.eventResult)}</devtools-report-key>
+          <devtools-report-value>${succeededToString(selectedEvent.succeeded)}</devtools-report-value>
           ${creationEventDetails}
           ${refreshEventDetails}
           ${challengeEventDetails}
@@ -888,13 +870,6 @@ export class DeviceBoundSessionsView extends UI.Widget.VBox {
   }
 }
 
-function renderKeyValue(key: string, value: string, id: string): TemplateResult {
-  return html`
-    <devtools-report-key id=${id}>${key}</devtools-report-key>
-    <devtools-report-value role="text" aria-describedby=${id}>${value}</devtools-report-value>
-  `;
-}
-
 function ruleTypeToString(ruleType: Protocol.Network.DeviceBoundSessionUrlRuleRuleType): string {
   switch (ruleType) {
     case Protocol.Network.DeviceBoundSessionUrlRuleRuleType.Exclude:

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -180,6 +180,7 @@ export class ServiceWorkerUpdateCycleView {
       const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
       tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
                         click: true,
+                        resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                       })}`);
       this.rows.push(tr);

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -353,7 +353,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
-    jslog=${VisualLogging.treeItem()}>${url}</div>`));
+    jslog=${VisualLogging.treeItem().track({resize: true})}>${url}</div>`));
   return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
@@ -361,7 +361,9 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     rows,
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
+        jslog=${VisualLogging.treeItem().track({
+    resize: true
+  })}></devtools-expandable-list>
       </div>
     `;
 }

package/front_end/panels/application/preloading/components/RuleSetDetailsView.css

@@ -4,11 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: block;
-  height: 100%;
-}
-
 .placeholder {
   display: flex;
   height: 100%;

package/front_end/panels/autofill/AutofillView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       // clang-format off
       return html`
         <span class=${spanClasses}
-              jslog=${VisualLogging.item('matched-address-item').track({hover: true})}
+              jslog=${VisualLogging.item('matched-address-item').track({hover: true, resize: true})}
               @mouseenter=${() => input.onHighlightMatchesInAddress(startIndex)}
               @mouseleave=${input.onClearHighlightedMatches}>
           ${templateLines}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -238,6 +238,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
+                                   resize: true,
                                    keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Enter|Space',
                                  })}`);
     return listItemElement;

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -18,11 +18,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for teaser to generate code.
    */
-  ctrlItoGenerateCode: 'Ctrl+I to generate code',
+  ctrlItoGenerateCode: 'ctrl+i to generate code',
   /**
    * @description Text for teaser to generate code in Mac.
    */
-  cmdItoGenerateCode: 'Cmd+I to generate code',
+  cmdItoGenerateCode: 'cmd+i to generate code',
   /**
    * @description Aria label for teaser to generate code.
    */

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -22,16 +22,16 @@ const UIStringsNotTranslate = {
    * @description First item in the description.
    */
   describeCodeInComment:
-      'Pressing Ctrl+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+      'Pressing ctrl+i on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment',
   /**
    * @description First item in the description.
    */
   describeCodeInCommentForMacOs:
-      'Pressing Cmd+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+      'Pressing cmd+i on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment',
   /**
    * @description Second item in the description.
    */
-  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster.',
+  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster',
   /**
    * @description Third item in the description.
    */
@@ -97,7 +97,7 @@ export class AiCodeGenerationUpgradeDialog {
           <div class="right-buttons">
             <devtools-button
               @click=${() => {
-                  result.resolve(true);
+                  result.resolve(false);
                   void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.manage-in-settings"