chrome-devtools-frontend 1.0.1581449 → 1.0.1582745

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -15,6 +15,7 @@ import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as GreenDev from '../../models/greendev/greendev.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import type * as Trace from '../../models/trace/trace.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
@@ -503,6 +504,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   // Messages displayed in the `ChatView` component.
   #messages: Message[] = [];
+  #isContextAutoSelectionSuspended = false;
 
   // Whether the UI should show loading or not.
   #isLoading = false;
@@ -672,6 +674,10 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     this.requestUpdate();
   }
 
+  async #handlePerformanceRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
+    return await TimelinePanel.TimelinePanel.TimelinePanel.executeRecordAndReload();
+  }
+
   #getDefaultConversationType(): AiAssistanceModel.AiHistoryStorage.ConversationType|undefined {
     const {hostConfig} = Root.Runtime;
     const viewManager = UI.ViewManager.ViewManager.instance();
@@ -715,7 +721,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
     const conversation = targetConversationType ?
         new AiAssistanceModel.AiConversation.AiConversation(
-            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager) :
+            targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager, false,
+            this.#handlePerformanceRecordAndReload.bind(this), this.#handleInspectElement.bind(this)) :
         undefined;
 
     this.#updateConversationState(conversation);
@@ -735,16 +742,28 @@ export class AiAssistancePanel extends UI.Panel.Panel {
         const conversationType = this.#getDefaultConversationType();
         if (conversationType) {
           conversation = new AiAssistanceModel.AiConversation.AiConversation(
-              conversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+              conversationType,
+              [],
+              undefined,
+              false,
+              this.#aidaClient,
+              this.#changeManager,
+              false,
+              this.#handlePerformanceRecordAndReload.bind(this),
+              this.#handleInspectElement.bind(this),
+          );
         }
       }
 
       this.#conversation = conversation;
+      this.#isContextAutoSelectionSuspended = false;
     }
 
-    this.#conversation?.setContext(this.#getConversationContext(
-        isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
-                                                       (this.#conversation?.type ?? null)));
+    if (!this.#isContextAutoSelectionSuspended) {
+      this.#conversation?.setContext(this.#getConversationContext(
+          isAiAssistanceContextSelectionAgentEnabled() ? this.#getDefaultConversationType() :
+                                                         (this.#conversation?.type ?? null)));
+    }
 
     this.requestUpdate();
   }
@@ -1116,10 +1135,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
   #handleContextRemoved(): void {
     this.#conversation?.setContext(null);
+    this.#isContextAutoSelectionSuspended = true;
     this.requestUpdate();
   }
 
   #handleContextAdd(): void {
+    this.#isContextAutoSelectionSuspended = false;
     this.#conversation?.setContext(this.#getConversationContext(this.#getDefaultConversationType()));
     this.requestUpdate();
   }
@@ -1141,6 +1162,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       return;
     }
 
+    this.#isContextAutoSelectionSuspended = false;
     let targetConversationType: AiAssistanceModel.AiHistoryStorage.ConversationType|undefined;
     switch (actionId) {
       case 'freestyler.elements-floating-button': {
@@ -1187,7 +1209,16 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     let conversation = this.#conversation;
     if (!this.#conversation || this.#conversation.type !== targetConversationType || this.#conversation.isEmpty) {
       conversation = new AiAssistanceModel.AiConversation.AiConversation(
-          targetConversationType, [], undefined, false, this.#aidaClient, this.#changeManager);
+          targetConversationType,
+          [],
+          undefined,
+          false,
+          this.#aidaClient,
+          this.#changeManager,
+          false,
+          this.#handlePerformanceRecordAndReload.bind(this),
+          this.#handleInspectElement.bind(this),
+      );
     }
     this.#updateConversationState(conversation);
     const predefinedPrompt = opts?.['prompt'];
@@ -1334,11 +1365,67 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       this.#conversation?.setContext(context);
     }
 
+    this.#isContextAutoSelectionSuspended = false;
+
     void VisualLogging.logFunctionCall(`context-change-${this.#conversation?.type}`);
 
     this.requestUpdate();
   };
 
+  async #handleInspectElement(): Promise<SDK.DOMModel.DOMNode|null> {
+    if (!this.#toggleSearchElementAction) {
+      return null;
+    }
+
+    const result = new Promise<SDK.DOMModel.DOMNode|null>(resolve => {
+      // Track the new flavor change for dom node.
+      const handleDOMNodeFlavorChange = (ev: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode>): void => {
+        if (!ev.data) {
+          return;
+        }
+        resolve(selectedElementFilter(ev.data));
+        removeListeners();
+      };
+
+      // If the inspect mode is toggled, we want to resolve null.
+      const handleInspectModeToggled = (ev: Common.EventTarget.EventTargetEvent<boolean>): void => {
+        if (!ev.data) {
+          // The inspect element is toggled off
+          // before the flavor change event fires
+          // so we need to wait a bit to see if the flavor changed.
+          window.setTimeout(() => {
+            resolve((selectedElementFilter(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode))));
+            removeListeners();
+          }, 50);
+        }
+      };
+
+      const removeListeners = (): void => {
+        UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
+        this.#toggleSearchElementAction?.removeEventListener(
+            UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+      };
+
+      UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, handleDOMNodeFlavorChange);
+      this.#toggleSearchElementAction?.addEventListener(UI.ActionRegistration.Events.TOGGLED, handleInspectModeToggled);
+
+      // Clean-up listeners in case of abort.
+      this.#runAbortController.signal.addEventListener('abort', () => {
+        resolve(null);
+        removeListeners();
+      }, {once: true});
+    });
+
+    void this.#toggleSearchElementAction.execute();
+    try {
+      return await result;
+    } finally {
+      if (this.#toggleSearchElementAction.toggled()) {
+        void this.#toggleSearchElementAction.execute();
+      }
+    }
+  }
+
   async #startConversation(
       text: string,
       imageInput?: Host.AidaClient.Part,

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

@@ -42,7 +42,11 @@ const UIStrings = {
   /**
    * @description Label added to the button that remove the currently selected context in AI Assistance panel.
    */
-  removeContext: 'Remove selected context',
+  removeContext: 'Remove from context',
+  /**
+   * @description Label added to the button that add selected context from the current panel in AI Assistance panel.
+   */
+  addContext: 'Add selected item as context',
 } as const;
 
 /*
@@ -387,12 +391,12 @@ export const
                   :
                     input.onContextAdd ? html`
                                   <devtools-button
-                                    title=${i18nString(UIStrings.removeContext)}
-                                    aria-label=${i18nString(UIStrings.removeContext)}
+                                    title=${i18nString(UIStrings.addContext)}
+                                    aria-label=${i18nString(UIStrings.addContext)}
                                     class="add-context"
                                     .iconName=${'plus'}
                                     .size=${Buttons.Button.Size.SMALL}
-                                    .jslogContext=${'context-add'}
+                                    .jslogContext=${'context-added'}
                                     .variant=${Buttons.Button.Variant.ICON}
                                     @click=${input.onContextAdd}></devtools-button>` : Lit.nothing}
               </div>

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -1916,17 +1916,19 @@ export class ResourcesSection implements SDK.TargetManager.Observer {
     frameManager.addEventListener(
         SDK.FrameManager.Events.RESOURCE_ADDED, event => this.resourceAdded(event.data.resource), this);
 
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_CREATED, this.windowOpened,
-        this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,
-        this.windowChanged, this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addModelListener(
-        SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_DESTROYED, this.windowDestroyed,
-        this, {scoped: true});
-
-    SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
+    if (this.panel.mode !== 'node') {
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_CREATED, this.windowOpened,
+          this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_INFO_CHANGED,
+          this.windowChanged, this, {scoped: true});
+      SDK.TargetManager.TargetManager.instance().addModelListener(
+          SDK.ChildTargetManager.ChildTargetManager, SDK.ChildTargetManager.Events.TARGET_DESTROYED,
+          this.windowDestroyed, this, {scoped: true});
+
+      SDK.TargetManager.TargetManager.instance().observeTargets(this, {scoped: true});
+    }
   }
 
   private initialize(): void {

package/front_end/panels/application/DOMStorageModel.ts

@@ -250,7 +250,7 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   }
 }
 
-SDK.SDKModel.SDKModel.register(DOMStorageModel, {capabilities: SDK.Target.Capability.DOM, autostart: false});
+SDK.SDKModel.SDKModel.register(DOMStorageModel, {capabilities: SDK.Target.Capability.DOM_STORAGE, autostart: false});
 
 export const enum Events {
   DOM_STORAGE_ADDED = 'DOMStorageAdded',

package/front_end/panels/application/ResourcesPanel.ts

@@ -37,9 +37,13 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private cookieView: CookieItemsView|null;
   private deviceBoundSessionsView: DeviceBoundSessionsView|null;
   private readonly sidebar: ApplicationPanelSidebar;
+  mode: 'default'|'node' = 'default';
 
-  private constructor() {
+  private constructor(
+      mode: 'default'|'node' = 'default',
+  ) {
     super('resources');
+    this.mode = mode;
     this.registerRequiredCSS(resourcesPanelStyles);
 
     this.resourcesLastSelectedItemSetting =
@@ -68,11 +72,12 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): ResourcesPanel {
-    const {forceNew} = opts;
+    forceNew?: boolean|null,
+    mode?: 'default'|'node',
+  } = {forceNew: null, mode: 'default'}): ResourcesPanel {
+    const {forceNew, mode} = opts;
     if (!resourcesPanelInstance || forceNew) {
-      resourcesPanelInstance = new ResourcesPanel();
+      resourcesPanelInstance = new ResourcesPanel(mode);
     }
 
     return resourcesPanelInstance;

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -22,7 +22,7 @@ import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import * as PreloadingComponents from './components/components.js';
 import {ruleSetTagOrLocationShort} from './components/PreloadingString.js';
-import type * as PreloadingHelper from './helper/helper.js';
+import * as PreloadingHelper from './helper/helper.js';
 import preloadingViewStyles from './preloadingView.css.js';
 import preloadingViewDropDownStyles from './preloadingViewDropDown.css.js';
 
@@ -501,10 +501,17 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         const ruleSet = this.model.getRuleSetById(id);
         return ruleSet === null ? [] : [ruleSet];
       });
+
+      // Lookup status code for prefetch attempts
+      const statusCode = attempt.action === Protocol.Preload.SpeculationAction.Prefetch ?
+          PreloadingHelper.PreloadingForward.prefetchStatusCode(attempt.requestId) :
+          undefined;
+
       return {
         id,
         pipeline,
         ruleSets,
+        statusCode,
       };
     });
     this.preloadingGrid.rows = rows;

package/front_end/panels/application/preloading/components/PreloadingDetailsReportView.ts

@@ -349,7 +349,10 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
       return Lit.nothing;
     }
 
-    const failureDescription = prefetchFailureReason(attempt);
+    // Lookup status code for Non2XX failures
+    const statusCode = PreloadingHelper.PreloadingForward.prefetchStatusCode(attempt.requestId);
+
+    const failureDescription = prefetchFailureReason(attempt, statusCode);
     if (failureDescription === null) {
       return Lit.nothing;
     }

package/front_end/panels/application/preloading/components/PreloadingGrid.ts

@@ -51,6 +51,7 @@ export interface PreloadingGridRow {
   id: string;
   pipeline: SDK.PreloadingModel.PreloadPipeline;
   ruleSets: Protocol.Preload.RuleSet[];
+  statusCode?: number;
 }
 
 export interface ViewInput {
@@ -107,7 +108,7 @@ export const PRELOADING_GRID_DEFAULT_VIEW: View = (input, _output, target): void
                         'vertical-align': 'sub',
                       })}
                     ></devtools-icon>` : ''}
-                  ${hasWarning ? i18nString(UIStrings.prefetchFallbackReady) : composedStatus(attempt)}
+                  ${hasWarning ? i18nString(UIStrings.prefetchFallbackReady) : composedStatus(attempt, row.statusCode)}
                 </div>
               </td>
             </tr>`;

package/front_end/panels/application/preloading/components/PreloadingString.ts

@@ -31,6 +31,11 @@ const UIStrings = {
    * @description  Description text for Prefetch status PrefetchFailedNon2XX.
    */
   PrefetchFailedNon2XX: 'The prefetch failed because of a non-2xx HTTP response status code.',
+  /**
+   * @description  Description text for Prefetch status PrefetchFailedNon2XX when the HTTP status code is known.
+   * @example {404} PH1
+   */
+  PrefetchFailedNon2XXWithStatusCode: 'The prefetch failed because of a non-2xx HTTP response status code ({PH1}).',
   /**
    * @description  Description text for Prefetch status PrefetchIneligibleRetryAfter.
    */
@@ -446,7 +451,8 @@ export const PrefetchReasonDescription: Record<string, {name: () => Platform.UIS
 };
 
 /** Decoding PrefetchFinalStatus prefetchAttempt to failure description. **/
-export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.PrefetchAttempt): string|null {
+export function prefetchFailureReason(
+    {prefetchStatus}: SDK.PreloadingModel.PrefetchAttempt, statusCode?: number): string|null {
   // If you face an error on rolling CDP changes, see
   // https://docs.google.com/document/d/1PnrfowsZMt62PX1EvvTp2Nqs3ji1zrklrAEe1JYbkTk
   switch (prefetchStatus) {
@@ -478,6 +484,9 @@ export function prefetchFailureReason({prefetchStatus}: SDK.PreloadingModel.Pref
     case Protocol.Preload.PrefetchStatus.PrefetchFailedNetError:
       return PrefetchReasonDescription['PrefetchFailedNetError'].name();
     case Protocol.Preload.PrefetchStatus.PrefetchFailedNon2XX:
+      if (statusCode !== undefined) {
+        return i18nString(UIStrings.PrefetchFailedNon2XXWithStatusCode, {PH1: String(statusCode)});
+      }
       return PrefetchReasonDescription['PrefetchFailedNon2XX'].name();
     case Protocol.Preload.PrefetchStatus.PrefetchIneligibleRetryAfter:
       return PrefetchReasonDescription['PrefetchIneligibleRetryAfter'].name();
@@ -795,7 +804,7 @@ export function status(status: SDK.PreloadingModel.PreloadingStatus): string {
   }
 }
 
-export function composedStatus(attempt: SDK.PreloadingModel.PreloadingAttempt): string {
+export function composedStatus(attempt: SDK.PreloadingModel.PreloadingAttempt, statusCode?: number): string {
   const short = status(attempt.status);
 
   if (attempt.status !== SDK.PreloadingModel.PreloadingStatus.FAILURE) {
@@ -804,7 +813,7 @@ export function composedStatus(attempt: SDK.PreloadingModel.PreloadingAttempt):
 
   switch (attempt.action) {
     case Protocol.Preload.SpeculationAction.Prefetch: {
-      const detail = prefetchFailureReason(attempt) ?? i18n.i18n.lockedString('Internal error');
+      const detail = prefetchFailureReason(attempt, statusCode) ?? i18n.i18n.lockedString('Internal error');
       return short + ' - ' + detail;
     }
     case Protocol.Preload.SpeculationAction.Prerender:

package/front_end/panels/application/preloading/helper/PreloadingForward.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import type * as Protocol from '../../../../generated/protocol.js';
+import * as Logs from '../../../../models/logs/logs.js';
 
 export class RuleSetView {
   readonly ruleSetId: Protocol.Preload.RuleSetId|null;
@@ -19,3 +20,16 @@ export class AttemptViewWithFilter {
     this.ruleSetId = ruleSetId;
   }
 }
+
+/**
+ * Retrieves the HTTP status code for a prefetch attempt by looking up its
+ * network request in the network log.
+ */
+export function prefetchStatusCode(requestId: Protocol.Network.RequestId): number|undefined {
+  const networkLog = Logs.NetworkLog.NetworkLog.instance();
+  const requests = networkLog.requestsForId(requestId);
+  if (requests.length > 0) {
+    return requests[requests.length - 1].statusCode;
+  }
+  return undefined;
+}

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -134,6 +134,9 @@ interface ViewOutput {
 interface ViewInput {
   onFilterChanged: (filterText: string|null) => void;
   onBreakpointChange: (breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean) => void;
+  onItemSelected: (item: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|
+                   null) => void;
+  onSpaceKeyDown: () => void;
 
   filterText: string|null;
   userExpandedCategories: Set<SDK.CategorizedBreakpoint.Category>;
@@ -200,6 +203,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           };
 
+  const onKeyDown = (e: KeyboardEvent): void => {
+    if (e.key === ' ') {
+      input.onSpaceKeyDown();
+      e.preventDefault();
+    }
+  };
+
   render(
       // clang-format off
       html`
@@ -210,10 +220,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         style="flex: 1;"
         ></devtools-toolbar-input>
     </devtools-toolbar>
-    <devtools-tree autofocus .template=${html`
+    <devtools-tree autofocus @keydown=${onKeyDown} .template=${html`
       <ul role="tree">
         ${filteredCategories.map(([category, breakpoints]) => html`
-          <li @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
+          <li @select=${() => input.onItemSelected(category)}
+              @expand=${(e: UI.TreeOutline.TreeViewElement.ExpandEvent) => onExpand(category, e)}
               role="treeitem"
               jslog-context=${category}
               aria-checked=${breakpoints.some(breakpoint => breakpoint.enabled())
@@ -233,7 +244,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
                 role="group"
                 ?hidden=${!shouldExpandCategory(breakpoints) && !input.userExpandedCategories.has(category)}>
               ${breakpoints.map(breakpoint => html`
-              <li
+              <li @select=${() => input.onItemSelected(breakpoint)}
                   role="treeitem"
                   aria-checked=${breakpoint.enabled()}
                   jslog-context=${Platform.StringUtilities.toKebabCase(breakpoint.name)}>
@@ -265,6 +276,7 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
   #filterText: string|null = null;
   #view: View;
   #userExpandedCategories = new Set<SDK.CategorizedBreakpoint.Category>();
+  #selectedItem: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null = null;
   constructor(
       breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[], jslog: string, viewId: string,
       view = DEFAULT_VIEW) {
@@ -321,6 +333,26 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  #onItemSelected(item: SDK.CategorizedBreakpoint.Category|SDK.CategorizedBreakpoint.CategorizedBreakpoint|null): void {
+    this.#selectedItem = item;
+  }
+
+  #onSpaceKeyDown(): void {
+    const selected = this.#selectedItem;
+    if (!selected) {
+      return;
+    }
+    if (selected instanceof SDK.CategorizedBreakpoint.CategorizedBreakpoint) {
+      this.onBreakpointChanged(selected, !selected.enabled());
+    } else {
+      const breakpoints = this.categories.get(selected);
+      if (breakpoints) {
+        const newEnabled = breakpoints.some(bp => !bp.enabled());
+        breakpoints.forEach(bp => this.onBreakpointChanged(bp, newEnabled));
+      }
+    }
+  }
+
   protected onBreakpointChanged(breakpoint: SDK.CategorizedBreakpoint.CategorizedBreakpoint, enabled: boolean): void {
     breakpoint.setEnabled(enabled);
     this.requestUpdate();
@@ -331,6 +363,8 @@ export abstract class CategorizedBreakpointsSidebarPane extends UI.Widget.VBox {
       filterText: this.#filterText,
       onFilterChanged: this.#onFilterChanged.bind(this),
       onBreakpointChange: this.onBreakpointChanged.bind(this),
+      onItemSelected: this.#onItemSelected.bind(this),
+      onSpaceKeyDown: this.#onSpaceKeyDown.bind(this),
       sortedCategoryNames: this.#sortedCategories,
       categories: this.categories,
       highlightedItem: this.#highlightedItem,

package/front_end/panels/changes/ChangesSidebar.ts

@@ -24,7 +24,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, Directives: {ref}} = Lit;
+const {render, html} = Lit;
 interface ViewInput {
   selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
   onSelect: (uiSourceCode: Workspace.UISourceCode.UISourceCode|null) => void;
@@ -38,20 +38,16 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
       uiSourceCode.url();
   const icon = (uiSourceCode: Workspace.UISourceCode.UISourceCode): string =>
       Snippets.ScriptSnippetFileSystem.isSnippetsUISourceCode(uiSourceCode) ? 'snippet' : 'document';
-  const configElements = new WeakMap<HTMLLIElement, Workspace.UISourceCode.UISourceCode>();
-  const onSelect = (e: UI.TreeOutline.TreeViewElement.SelectEvent): void =>
-      input.onSelect(configElements.get(e.detail) ?? null);
   render(
       // clang-format off
       html`<devtools-tree
-             @selected=${onSelect}
              navigation-variant
              hide-overflow .template=${html`
                <ul role="tree">
                  ${input.sourceCodes.values().map(uiSourceCode => html`
                    <li
                      role="treeitem"
-                     ${ref(e => e instanceof HTMLLIElement && configElements.set(e, uiSourceCode))}
+                     @select=${() => input.onSelect(uiSourceCode)}
                      ?selected=${uiSourceCode === input.selectedSourceCode}>
                        <style>${changesSidebarStyles}</style>
                        <div class=${'navigator-' + uiSourceCode.contentType().name() + '-tree-item'}>

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -73,12 +73,12 @@ const UIStringsNotTranslate = {
    * @description Code generation disclaimer item text for the fre dialog.
    */
   freDisclaimerDescribeCodeInComment:
-      'In Console or Sources, describe the code you need in a comment, then press Ctrl+I to generate it.',
+      'In Console or Sources, describe the code you need in a comment, then press ctrl+i to generate it.',
   /**
    * @description Code generation disclaimer item text for the fre dialog.
    */
   freDisclaimerDescribeCodeInCommentForMacOs:
-      'In Console or Sources, describe the code you need in a comment, then press Cmd+I to generate it.',
+      'In Console or Sources, describe the code you need in a comment, then press cmd+i to generate it.',
   /**
    * @description Privacy disclaimer item text for the fre dialog.
    */
@@ -140,7 +140,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               <span>${lockedString(UIStringsNotTranslate.i)}</span>
             </span>
             </span>&nbsp;${lockedString(UIStringsNotTranslate.toTurnOnCodeSuggestions)}&nbsp;
-            <span role="button" class="ai-code-completion-teaser-dismiss" @click=${input.onDismiss}
+            <span role="button" class="ai-code-completion-teaser-dismiss"
+              tabindex="0"
+              @click=${input.onDismiss}
+              @keydown=${(e: KeyboardEvent) => {
+                // Handle Enter and Space events to make dismiss button accessible for only keyboard users.
+                if (e.key === 'Enter' || e.key === ' ') {
+                  input.onDismiss(e);
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              }}
               jslog=${VisualLogging.action('ai-code-completion-teaser.dismiss').track({click: true})}>
                 ${lockedString(UIStringsNotTranslate.dontShowAgain)}
             </span>

package/front_end/panels/common/aiCodeCompletionTeaser.css

@@ -26,6 +26,12 @@
         .ai-code-completion-teaser-dismiss {
             text-decoration: underline;
             cursor: pointer;
+
+            &:focus-visible {
+                border-radius: var(--sys-shape-corner-extra-small);
+                outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+                outline-offset: 0;
+            }
         }
 
         .ai-code-completion-teaser-action {

package/front_end/panels/console/ConsoleSidebar.ts

@@ -50,7 +50,7 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleSidebar.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html, nothing, Directives} = Lit;
+const {render, html, nothing} = Lit;
 
 export const enum GroupName {
   CONSOLE_API = 'user message',
@@ -78,18 +78,10 @@ interface ViewInput {
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 export const DEFAULT_VIEW: View = (input, output, target) => {
-  const nodeFilterMap = new WeakMap<Element, ConsoleFilter>();
-  const onSelectionChanged = (event: UI.TreeOutline.TreeViewElement.SelectEvent): void => {
-    const filter = nodeFilterMap.get(event.detail);
-    if (filter) {
-      input.onSelectionChanged(filter);
-    }
-  };
   render(
       html`<devtools-tree
         navigation-variant
         hide-overflow
-        @select=${onSelectionChanged}
         .template=${
           html`
           <ul role="tree">
@@ -98,7 +90,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   group => html`
               <li
                 role="treeitem"
-                ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}
+                @select=${() => input.onSelectionChanged(group.filter)}
                 ?selected=${group.filter === input.selectedFilter}>
                   <style>${consoleSidebarStyles}</style>
                   <devtools-icon name=${GROUP_ICONS[group.name].icon}></devtools-icon>
@@ -112,7 +104,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                   <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
-                        ${Directives.ref(element => element && nodeFilterMap.set(element, urlGroup.filter))}
+                        @select=${() => input.onSelectionChanged(urlGroup.filter)}
                         role="treeitem"
                         ?selected=${urlGroup.filter === input.selectedFilter}
                         title=${urlGroup.url ?? ''}>