chrome-devtools-frontend 1.0.982087 → 1.0.995629

package/front_end/third_party/puppeteer/package/lib/types.d.ts

@@ -2308,7 +2308,7 @@ export declare class Frame {
      *
      * @param selector - the selector to query for
      * @param pageFunction - the function to be evaluated in the frame's context
-     * @param args - additional arguments to pass to `pageFuncton`
+     * @param args - additional arguments to pass to `pageFunction`
      */
     $eval<ReturnType>(selector: string, pageFunction: (element: Element, ...args: unknown[]) => ReturnType | Promise<ReturnType>, ...args: SerializableOrJSHandle[]): Promise<WrapElementHandle<ReturnType>>;
     /**
@@ -2328,7 +2328,7 @@ export declare class Frame {
      *
      * @param selector - the selector to query for
      * @param pageFunction - the function to be evaluated in the frame's context
-     * @param args - additional arguments to pass to `pageFuncton`
+     * @param args - additional arguments to pass to `pageFunction`
      */
     $$eval<ReturnType>(selector: string, pageFunction: (elements: Element[], ...args: unknown[]) => ReturnType | Promise<ReturnType>, ...args: SerializableOrJSHandle[]): Promise<WrapElementHandle<ReturnType>>;
     /**
@@ -2956,7 +2956,7 @@ export declare class HTTPRequest {
     /**
      * Adds an async request handler to the processing queue.
      * Deferred handlers are not guaranteed to execute in any particular order,
-     * but they are guarnateed to resolve before the request interception
+     * but they are guaranteed to resolve before the request interception
      * is finalized.
      */
     enqueueInterceptAction(pendingHandler: () => void | PromiseLike<unknown>): void;
@@ -3046,7 +3046,7 @@ export declare class HTTPRequest {
      *
      * @returns `null` unless the request failed. If the request fails this can
      * return an object with `errorText` containing a human-readable error
-     * message, e.g. `net::ERR_FAILED`. It is not guaranteeded that there will be
+     * message, e.g. `net::ERR_FAILED`. It is not guaranteed that there will be
      * failure text if the request fails.
      */
     failure(): {
@@ -3785,6 +3785,8 @@ export declare class HTTPResponse {
         dispose(): void;
     }
 
+    declare type LowerCasePaperFormat = 'letter' | 'legal' | 'tabloid' | 'ledger' | 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6';
+
     /**
      * @public
      */
@@ -4029,6 +4031,7 @@ export declare class HTTPResponse {
         forgetRequest(networkRequestId: NetworkRequestId): void;
         getQueuedEventGroup(networkRequestId: NetworkRequestId): QueuedEventGroup | undefined;
         queueEventGroup(networkRequestId: NetworkRequestId, event: QueuedEventGroup): void;
+        forgetQueuedEventGroup(networkRequestId: NetworkRequestId): void;
     }
 
     /**
@@ -4073,6 +4076,7 @@ export declare class HTTPResponse {
          *
          */
         _onRequestPaused(event: Protocol.Fetch.RequestPausedEvent): void;
+        _patchRequestEventHeaders(requestWillBeSentEvent: Protocol.Network.RequestWillBeSentEvent, requestPausedEvent: Protocol.Fetch.RequestPausedEvent): void;
         _onRequest(event: Protocol.Network.RequestWillBeSentEvent, fetchRequestId?: FetchRequestId): void;
         _onRequestServedFromCache(event: Protocol.Network.RequestServedFromCacheEvent): void;
         _handleRequestRedirect(request: HTTPRequest, responsePayload: Protocol.Network.Response, extraInfo: Protocol.Network.ResponseReceivedExtraInfoEvent): void;
@@ -6047,7 +6051,7 @@ export declare class HTTPResponse {
      *
      * @public
      */
-    export declare type PaperFormat = 'letter' | 'legal' | 'tabloid' | 'ledger' | 'a0' | 'a1' | 'a2' | 'a3' | 'a4' | 'a5' | 'a6';
+    export declare type PaperFormat = Uppercase<LowerCasePaperFormat> | Capitalize<LowerCasePaperFormat> | LowerCasePaperFormat;
 
     /**
      * @internal
@@ -6060,7 +6064,7 @@ export declare class HTTPResponse {
     /**
      * @internal
      */
-    export declare const paperFormats: Record<PaperFormat, PaperFormatDimensions>;
+    export declare const paperFormats: Record<LowerCasePaperFormat, PaperFormatDimensions>;
 
     /**
      * Copyright 2020 Google Inc. All rights reserved.

package/front_end/third_party/puppeteer/package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "puppeteer",
-  "version": "13.5.1",
+  "version": "13.6.0",
   "description": "A high-level API to control headless Chrome over the DevTools Protocol",
   "keywords": [
     "puppeteer",
@@ -66,8 +66,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "cross-fetch": "3.1.5",
-    "debug": "4.3.3",
-    "devtools-protocol": "0.0.969999",
+    "debug": "4.3.4",
+    "devtools-protocol": "0.0.981744",
     "extract-zip": "2.0.1",
     "https-proxy-agent": "5.0.0",
     "pkg-dir": "4.2.0",
@@ -79,47 +79,47 @@
     "ws": "8.5.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "16.2.1",
+    "@commitlint/cli": "16.2.3",
     "@commitlint/config-conventional": "16.2.1",
-    "@microsoft/api-documenter": "7.15.3",
-    "@microsoft/api-extractor": "7.19.4",
+    "@microsoft/api-documenter": "7.17.2",
+    "@microsoft/api-extractor": "7.20.1",
     "@types/debug": "4.1.7",
     "@types/mime": "2.0.3",
     "@types/mocha": "9.1.0",
-    "@types/node": "17.0.19",
+    "@types/node": "17.0.23",
     "@types/progress": "2.0.5",
     "@types/proxy-from-env": "1.0.1",
     "@types/rimraf": "3.0.2",
     "@types/sinon": "10.0.11",
     "@types/tar-fs": "2.0.1",
-    "@types/ws": "8.5.2",
-    "@typescript-eslint/eslint-plugin": "5.14.0",
-    "@typescript-eslint/parser": "5.14.0",
+    "@types/ws": "8.5.3",
+    "@typescript-eslint/eslint-plugin": "5.18.0",
+    "@typescript-eslint/parser": "5.18.0",
     "@web/test-runner": "0.13.27",
     "commonmark": "0.30.0",
     "cross-env": "7.0.3",
-    "eslint": "8.9.0",
+    "eslint": "8.13.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
     "eslint-plugin-mocha": "10.0.3",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-unicorn": "41.0.0",
+    "eslint-plugin-unicorn": "42.0.0",
     "esprima": "4.0.1",
     "expect": "25.2.7",
     "husky": "7.0.4",
     "jpeg-js": "0.4.3",
     "mime": "3.0.0",
-    "minimist": "1.2.5",
-    "mocha": "9.2.1",
+    "minimist": "1.2.6",
+    "mocha": "9.2.2",
     "ncp": "2.0.0",
     "pixelmatch": "5.2.1",
     "pngjs": "6.0.0",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
     "sinon": "13.0.1",
     "source-map-support": "0.5.21",
     "standard-version": "9.3.2",
     "text-diff": "1.0.1",
     "ts-node": "10.7.0",
-    "typescript": "4.5.5"
+    "typescript": "4.6.3"
   }
 }

package/front_end/ui/components/code_highlighter/CodeHighlighter.ts

@@ -136,7 +136,7 @@ export class CodeHighlighter {
         pos = to;
       }
     };
-    CodeMirror.highlightTree(this.tree, highlightStyle.match, (from, to, style) => {
+    CodeMirror.highlightTree(this.tree, highlightStyle, (from, to, style) => {
       flush(from, '');
       flush(to, style);
     }, from, to);

package/front_end/ui/components/data_grid/DataGrid.ts

@@ -88,11 +88,9 @@ export class DataGrid extends HTMLElement {
     void this.#alignScrollHandlers();
   });
 
-  // These have to be bound as they are put onto the global document, not onto
+  // Thie have to be bound as they are put onto the global document, not onto
   // this element, so LitHtml does not bind them for us.
-  #boundOnResizePointerUp = this.#onResizePointerUp.bind(this);
   #boundOnResizePointerMove = this.#onResizePointerMove.bind(this);
-  #boundOnResizePointerDown = this.#onResizePointerDown.bind(this);
 
   /**
    * Following guidance from
@@ -327,14 +325,15 @@ export class DataGrid extends HTMLElement {
       const emptyCellClasses = LitHtml.Directives.classMap({
         firstVisibleColumn: colIndex === 0,
       });
-      return LitHtml.html`<td tabindex="-1" class=${emptyCellClasses} data-filler-row-column-index=${colIndex}></td>`;
+      return LitHtml.html`<td aria-hidden="true" class=${emptyCellClasses} data-filler-row-column-index=${
+          colIndex}></td>`;
     });
     const emptyRowClasses = LitHtml.Directives.classMap({
       'filler-row': true,
       'padding-row': true,
       'empty-table': numberOfVisibleRows === 0,
     });
-    return LitHtml.html`<tr tabindex="-1" class=${emptyRowClasses}>${emptyCells}</tr>`;
+    return LitHtml.html`<tr aria-hidden="true" class=${emptyRowClasses}>${emptyCells}</tr>`;
   }
 
   #cleanUpAfterResizeColumnComplete(): void {
@@ -487,8 +486,8 @@ export class DataGrid extends HTMLElement {
     }
 
     return LitHtml.html`<span class="cell-resize-handle"
-     @pointerdown=${this.#boundOnResizePointerDown}
-     @pointerup=${this.#boundOnResizePointerUp}
+     @pointerdown=${this.#onResizePointerDown}
+     @pointerup=${this.#onResizePointerUp}
      data-column-index=${columnIndex}
     ></span>`;
   }
@@ -757,7 +756,7 @@ export class DataGrid extends HTMLElement {
           <tbody>
             <tr class="filler-row-top padding-row" style=${LitHtml.Directives.styleMap({
               height: `${topVisibleRow * ROW_HEIGHT_PIXELS}px`,
-            })}></tr>
+            })} aria-hidden="true"></tr>
             ${LitHtml.Directives.repeat(renderableRows, row => this.#rowIndexMap.get(row), (row): LitHtml.TemplateResult => {
               const rowIndex = this.#rowIndexMap.get(row);
               if (rowIndex === undefined) {
@@ -809,7 +808,7 @@ export class DataGrid extends HTMLElement {
             ${this.#renderEmptyFillerRow(renderableRows.length)}
             <tr class="filler-row-bottom padding-row" style=${LitHtml.Directives.styleMap({
               height: `${Math.max(0, nonHiddenRows.length - bottomVisibleRow) * ROW_HEIGHT_PIXELS}px`,
-            })}></tr>
+            })} aria-hidden="true"></tr>
           </tbody>
         </table>
       </div>

package/front_end/ui/components/data_grid/DataGridController.ts

@@ -153,7 +153,9 @@ export class DataGridController extends HTMLElement {
 
   #onColumnHeaderClick(event: ColumnHeaderClickEvent): void {
     const {column} = event.data;
-    this.#applySortOnColumn(column);
+    if (column.sortable) {
+      this.#applySortOnColumn(column);
+    }
   }
 
   #applySortOnColumn(column: Column): void {

package/front_end/ui/components/docs/panel_introduction_steps/basic.html

@@ -0,0 +1,25 @@
+<!--
+  Copyright 2022 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Panel Introduction Steps</title>
+    <style>
+      #container {
+        width: 80%;
+        border: 1px solid black;
+        padding: 10px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="container">
+    </div>
+    <script type="module" src="./basic.js"></script>
+  </body>
+</html>

package/front_end/ui/components/docs/panel_introduction_steps/basic.ts

@@ -0,0 +1,25 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as FrontendHelpers from '../../../../../test/unittests/front_end/helpers/EnvironmentHelpers.js';
+import * as PanelIntroductionSteps from '../../../components/panel_introduction_steps/panel_introduction_steps.js';
+import * as LitHtml from '../../../lit-html/lit-html.js';
+import * as ComponentHelpers from '../../helpers/helpers.js';
+
+await ComponentHelpers.ComponentServerSetup.setup();
+await FrontendHelpers.initializeGlobalVars();
+
+const container = document.getElementById('container');
+if (container) {
+  LitHtml.render(
+      LitHtml.html`
+<${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+<span slot="title">Get actionable insights on your website's performance</span>
+<span slot="step-1">Record or import a trace into the Performance Insights panel</span>
+<span slot="step-2">Get an overview of your page’s runtime performance</span>
+<span slot="step-3">Identify improvements to your performance via a list of actionable insights</span>
+</${PanelIntroductionSteps.PanelIntroductionSteps.PanelIntroductionSteps.litTagName}>
+                 `,
+      container, {host: this});
+}

package/front_end/ui/components/input/input.ts

@@ -2,8 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import checkboxStyles from './checkbox.css.js';   // eslint-disable-line rulesdir/es_modules_import
-import textInputStyles from './textInput.css.js'; // eslint-disable-line rulesdir/es_modules_import
+import checkboxStyles from './checkbox.css.js';
+import textInputStyles from './textInput.css.js';
 
 export {
   checkboxStyles,

package/front_end/ui/components/linkifier/LinkifierUtils.ts

@@ -3,10 +3,12 @@
 // found in the LICENSE file.
 
 import * as Bindings from '../../../models/bindings/bindings.js';
+import type * as Platform from '../../../core/platform/platform.js';
 
 export function linkText(url: string, lineNumber?: number): string {
   if (url) {
-    const displayName = Bindings.ResourceUtils.displayNameForURL(url);
+    // TODO(crbug.com/1253323): Cast to UrlString will be removed when migration to branded types is complete.
+    const displayName = Bindings.ResourceUtils.displayNameForURL(url as Platform.DevToolsPath.UrlString);
     let text = `${displayName}`;
     if (typeof lineNumber !== 'undefined') {
       text += `:${lineNumber + 1}`;

package/front_end/ui/components/panel_introduction_steps/PanelIntroductionSteps.ts

@@ -0,0 +1,44 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as ComponentHelpers from '../../components/helpers/helpers.js';
+import * as LitHtml from '../../lit-html/lit-html.js';
+import panelIntroductionStepsStyles from './panelIntroductionSteps.css.js';
+
+export class PanelIntroductionSteps extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-panel-introduction-steps`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [panelIntroductionStepsStyles];
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('FeedbackButton render was not scheduled');
+    }
+
+    // clang-format off
+    LitHtml.render(LitHtml.html`
+      <h1><slot name="title">slot: title</slot></h1>
+
+      <ol class="intro-steps">
+        <li><slot name="step-1">slot: step-1</slot></li>
+        <li><slot name="step-2">slot: step-2</slot></li>
+        <li><slot name="step-3">slot: step-3</slot></li>
+      </ol>
+    `, this.#shadow, {host: this});
+    // clang-format on
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-panel-introduction-steps', PanelIntroductionSteps);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-panel-introduction-steps': PanelIntroductionSteps;
+  }
+}

package/front_end/ui/components/panel_introduction_steps/panelIntroductionSteps.css

@@ -0,0 +1,56 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: block;
+}
+
+h1 {
+  font-weight: normal;
+  font-size: 18px;
+  line-height: 28px;
+  padding: 0;
+  margin-top: 0;
+  color: var(--color-text-primary);
+}
+
+.intro-steps {
+  counter-reset: custom-counter;
+  list-style: none;
+  margin: 16px 0 30px 30px;
+  padding: 0;
+}
+
+.intro-steps li {
+  color: var(--color-text-primary);
+  counter-increment: custom-counter;
+  font-size: 13px;
+  letter-spacing: 0.03em;
+  line-height: 1.54;
+  margin-bottom: 9px;
+  position: relative;
+}
+
+.intro-steps li::before {
+  --override-color-counter-background: rgba(26 115 232 / 25%);
+
+  box-sizing: border-box;
+  background: var(--override-color-counter-background);
+  border-radius: 50%;
+  color: var(--color-primary);
+  content: counter(custom-counter);
+  font-size: 12px;
+  height: 18px;
+  left: -30px;
+  line-height: 20px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/front_end/ui/components/panel_introduction_steps/panel_introduction_steps.ts

@@ -0,0 +1,5 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export * as PanelIntroductionSteps from './PanelIntroductionSteps.js';

package/front_end/ui/components/render_coordinator/RenderCoordinator.ts

@@ -202,15 +202,15 @@ export class RenderCoordinator extends EventTarget {
   }
 
   async #handleWork(handler: CoordinatorCallback): Promise<void> {
-    const data = await handler.call(undefined);
     const resolver = this.#resolvers.get(handler);
+    this.#resolvers.delete(handler);
+    this.#rejectors.delete(handler);
+    const data = await handler.call(undefined);
     if (!resolver) {
       throw new Error('Unable to locate resolver');
     }
 
     resolver.call(undefined, data);
-    this.#resolvers.delete(handler);
-    this.#rejectors.delete(handler);
   }
 
   #scheduleWork(): void {
@@ -298,7 +298,6 @@ export class RenderCoordinator extends EventTarget {
     for (const handler of handlers) {
       const rejector = this.#rejectors.get(handler);
       if (!rejector) {
-        console.warn('Unable to locate rejector');
         continue;
       }
 

package/front_end/ui/components/text_editor/TextEditor.ts

@@ -177,7 +177,7 @@ export class TextEditor extends HTMLElement {
     const editorRect = view.scrollDOM.getBoundingClientRect();
     const targetPos = view.coordsAtPos(selection.main.head);
     if (!targetPos || targetPos.top < editorRect.top || targetPos.bottom > editorRect.bottom) {
-      effects.push(CodeMirror.EditorView.centerOn.of(selection.main));
+      effects.push(CodeMirror.EditorView.scrollIntoView(selection.main, {y: 'center'}));
     }
 
     view.dispatch({

package/front_end/ui/components/text_editor/config.ts

@@ -245,7 +245,7 @@ export function baseConfiguration(text: string): CM.Extension {
     CM.drawSelection(),
     CM.EditorState.allowMultipleSelections.of(true),
     CM.indentOnInput(),
-    CodeHighlighter.CodeHighlighter.highlightStyle,
+    CM.syntaxHighlighting(CodeHighlighter.CodeHighlighter.highlightStyle),
     baseKeymap,
     CM.EditorView.clickAddsSelectionRange.of(mouseEvent => mouseEvent.altKey || mouseEvent.ctrlKey),
     tabMovesFocus.instance(),
@@ -255,7 +255,6 @@ export function baseConfiguration(text: string): CM.Extension {
     detectLineSeparator(text),
     autocompletion,
     CM.tooltips({
-      parent: getTooltipHost() as unknown as HTMLElement,
       tooltipSpace: getTooltipSpace,
     }),
   ];
@@ -266,39 +265,6 @@ export const closeBrackets: CM.Extension = [
   CM.keymap.of(CM.closeBracketsKeymap),
 ];
 
-// Root editor tooltips at the top of the document, creating a special
-// element with the editor styles mounted in it for them. This is
-// annoying, but necessary because a scrollable parent node clips them
-// otherwise, `position: fixed` doesn't work due to `contain` styles,
-// and appending them directly to `document.body` doesn't work because
-// the necessary style sheets aren't available there.
-let tooltipHost: ShadowRoot|null = null;
-
-function getTooltipHost(): ShadowRoot {
-  if (!tooltipHost) {
-    const styleModules = CM.EditorState
-                             .create({
-                               extensions: [
-                                 editorTheme,
-                                 themeIsDark() ? dummyDarkTheme : [],
-                                 CodeHighlighter.CodeHighlighter.highlightStyle,
-                                 CM.showTooltip.of({
-                                   pos: 0,
-                                   create() {
-                                     return {dom: document.createElement('div')};
-                                   },
-                                 }),
-                               ],
-                             })
-                             .facet(CM.EditorView.styleModule);
-    const host = document.body.appendChild(document.createElement('div'));
-    host.className = 'editor-tooltip-host';
-    tooltipHost = host.attachShadow({mode: 'open'});
-    CM.StyleModule.mount(tooltipHost, styleModules);
-  }
-  return tooltipHost;
-}
-
 class CompletionHint extends CM.WidgetType {
   constructor(readonly text: string) {
     super();

package/front_end/ui/components/text_editor/javascript.ts

@@ -151,16 +151,16 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror
   }
   if (node.name === '(') {
     // map.get(<auto-complete>
-    if (parent.name === 'ArgList' && parent.parent.name === 'CallExpression') {
+    if (parent?.name === 'ArgList' && parent?.parent?.name === 'CallExpression') {
       // map.get
-      const callReceiver = parent.parent.firstChild;
-      if (callReceiver.name === 'MemberExpression') {
+      const callReceiver = parent?.parent?.firstChild;
+      if (callReceiver?.name === 'MemberExpression') {
         // get
-        const propertyExpression = callReceiver.lastChild;
-        if (doc.sliceString(propertyExpression.from, propertyExpression.to) === 'get') {
+        const propertyExpression = callReceiver?.lastChild;
+        if (propertyExpression && doc.sliceString(propertyExpression.from, propertyExpression.to) === 'get') {
           // map
-          const potentiallyMapObject = callReceiver.firstChild;
-          return {type: QueryType.PotentiallyRetrievingFromMap, relatedNode: potentiallyMapObject};
+          const potentiallyMapObject = callReceiver?.firstChild;
+          return {type: QueryType.PotentiallyRetrievingFromMap, relatedNode: potentiallyMapObject || undefined};
         }
       }
     }
@@ -212,7 +212,7 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
   return {
     from: query.from ?? cx.pos,
     options: result.completions,
-    span: !quote ? SPAN_IDENT : quote === '\'' ? SPAN_SINGLE_QUOTE : SPAN_DOUBLE_QUOTE,
+    validFor: !quote ? SPAN_IDENT : quote === '\'' ? SPAN_SINGLE_QUOTE : SPAN_DOUBLE_QUOTE,
   };
 }
 

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -150,6 +150,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     this.#defaultRenderer = data.defaultRenderer;
     this.#treeData = data.tree;
     this.#nodeFilter = data.filter;
+
     if (!this.#hasRenderedAtLeastOnce) {
       this.#selectedTreeNode = this.#treeData[0];
     }
@@ -510,15 +511,15 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       // clang-format off
       LitHtml.render(LitHtml.html`
       <div class="wrapping-container">
-      <ul role="tree" @keydown=${this.#onTreeKeyDown}>
-        ${this.#treeData.map((topLevelNode, index) => {
-          return this.#renderNode(topLevelNode, {
-            depth: 0,
-            setSize: this.#treeData.length,
-            positionInSet: index,
-          });
-        })}
-      </ul>
+        <ul role="tree" @keydown=${this.#onTreeKeyDown}>
+          ${this.#treeData.map((topLevelNode, index) => {
+            return this.#renderNode(topLevelNode, {
+              depth: 0,
+              setSize: this.#treeData.length,
+              positionInSet: index,
+            });
+          })}
+        </ul>
       </div>
       `, this.#shadow, {
         host: this,

package/front_end/ui/components/tree_outline/treeOutline.css

@@ -89,7 +89,7 @@ li.is-top-level:last-child {
   outline: 0;
 }
 
-[role="treeitem"].selected > .arrow-and-key-wrapper {
+ul[role="tree"]:focus-within [role="treeitem"].selected > .arrow-and-key-wrapper {
   /* stylelint-disable-next-line color-named */
   background-color: var(--legacy-item-selection-bg-color);
 }

package/front_end/ui/legacy/ARIAUtils.ts

@@ -95,6 +95,10 @@ export function markAsMenuItem(element: Element): void {
   element.setAttribute('role', 'menuitem');
 }
 
+export function markAsMenuItemCheckBox(element: Element): void {
+  element.setAttribute('role', 'menuitemcheckbox');
+}
+
 export function markAsMenuItemSubMenu(element: Element): void {
   markAsMenuItem(element);
   element.setAttribute('aria-haspopup', 'true');
@@ -437,8 +441,6 @@ export function setActiveDescendant(element: Element, activedescendant: Element|
 
   if (activedescendant.isConnected && element.isConnected) {
     console.assert(element.hasSameShadowRoot(activedescendant), 'elements are not in the same shadow dom');
-  } else {
-    console.warn('One or more elements in an active-descendant relationship are not yet attached to the DOM tree.');
   }
 
   ensureId(activedescendant);