chrome-devtools-frontend 1.0.944903 → 1.0.945884

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

@@ -21,35 +21,36 @@ declare global {
 export class TextEditor extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-text-editor`;
 
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private activeEditor: CodeMirror.EditorView|undefined = undefined;
-  private dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
-  private activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
-  private pendingState: CodeMirror.EditorState|undefined;
-  private lastScrollPos = {left: 0, top: 0};
-  private resizeTimeout = -1;
-  private devtoolsResizeObserver = new ResizeObserver(() => {
-    if (this.resizeTimeout < 0) {
-      this.resizeTimeout = window.setTimeout(() => {
-        this.resizeTimeout = -1;
-        if (this.activeEditor) {
-          CodeMirror.repositionTooltips(this.activeEditor);
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #activeEditor: CodeMirror.EditorView|undefined = undefined;
+  #dynamicSettings: readonly DynamicSetting<unknown>[] = DynamicSetting.none;
+  #activeSettingListeners: [Common.Settings.Setting<unknown>, (event: {data: unknown}) => void][] = [];
+  #pendingState: CodeMirror.EditorState|undefined;
+  #lastScrollPos = {left: 0, top: 0};
+  #resizeTimeout = -1;
+  #resizeListener = (): void => {
+    if (this.#resizeTimeout < 0) {
+      this.#resizeTimeout = window.setTimeout(() => {
+        this.#resizeTimeout = -1;
+        if (this.#activeEditor) {
+          CodeMirror.repositionTooltips(this.#activeEditor);
         }
       }, 50);
     }
-  });
+  };
+  #devtoolsResizeObserver = new ResizeObserver(this.#resizeListener);
 
   constructor(pendingState?: CodeMirror.EditorState) {
     super();
-    this.pendingState = pendingState;
-    this.shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
+    this.#pendingState = pendingState;
+    this.#shadow.adoptedStyleSheets = [CodeHighlighter.Style.default];
   }
 
   private createEditor(): CodeMirror.EditorView {
-    this.activeEditor = new CodeMirror.EditorView({
+    this.#activeEditor = new CodeMirror.EditorView({
       state: this.state,
-      parent: this.shadow,
-      root: this.shadow,
+      parent: this.#shadow,
+      root: this.#shadow,
       dispatch: (tr: CodeMirror.Transaction): void => {
         this.editor.update([tr]);
         if (tr.reconfigured) {
@@ -57,19 +58,19 @@ export class TextEditor extends HTMLElement {
         }
       },
     });
-    this.activeEditor.scrollDOM.scrollTop = this.lastScrollPos.top;
-    this.activeEditor.scrollDOM.scrollLeft = this.lastScrollPos.left;
-    this.activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
-      this.lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
-      this.lastScrollPos.top = (event.target as HTMLElement).scrollTop;
+    this.#activeEditor.scrollDOM.scrollTop = this.#lastScrollPos.top;
+    this.#activeEditor.scrollDOM.scrollLeft = this.#lastScrollPos.left;
+    this.#activeEditor.scrollDOM.addEventListener('scroll', (event): void => {
+      this.#lastScrollPos.left = (event.target as HTMLElement).scrollLeft;
+      this.#lastScrollPos.top = (event.target as HTMLElement).scrollTop;
     });
     this.ensureSettingListeners();
     this.startObservingResize();
-    return this.activeEditor;
+    return this.#activeEditor;
   }
 
   get editor(): CodeMirror.EditorView {
-    return this.activeEditor || this.createEditor();
+    return this.#activeEditor || this.createEditor();
   }
 
   dispatch(spec: CodeMirror.TransactionSpec): void {
@@ -77,68 +78,69 @@ export class TextEditor extends HTMLElement {
   }
 
   get state(): CodeMirror.EditorState {
-    if (this.activeEditor) {
-      return this.activeEditor.state;
+    if (this.#activeEditor) {
+      return this.#activeEditor.state;
     }
-    if (!this.pendingState) {
-      this.pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
+    if (!this.#pendingState) {
+      this.#pendingState = CodeMirror.EditorState.create({extensions: baseConfiguration('')});
     }
-    return this.pendingState;
+    return this.#pendingState;
   }
 
   set state(state: CodeMirror.EditorState) {
-    if (this.activeEditor) {
-      this.activeEditor.setState(state);
+    if (this.#activeEditor) {
+      this.#activeEditor.setState(state);
     } else {
-      this.pendingState = state;
+      this.#pendingState = state;
     }
   }
 
   connectedCallback(): void {
-    if (!this.activeEditor) {
+    if (!this.#activeEditor) {
       this.createEditor();
     }
   }
 
   disconnectedCallback(): void {
-    if (this.activeEditor) {
-      this.pendingState = this.activeEditor.state;
-      this.devtoolsResizeObserver.disconnect();
-      this.activeEditor.destroy();
-      this.activeEditor = undefined;
+    if (this.#activeEditor) {
+      this.#pendingState = this.#activeEditor.state;
+      this.#devtoolsResizeObserver.disconnect();
+      window.removeEventListener('resize', this.#resizeListener);
+      this.#activeEditor.destroy();
+      this.#activeEditor = undefined;
       this.ensureSettingListeners();
     }
   }
 
   focus(): void {
-    if (this.activeEditor) {
-      this.activeEditor.focus();
+    if (this.#activeEditor) {
+      this.#activeEditor.focus();
     }
   }
 
   private ensureSettingListeners(): void {
-    const dynamicSettings = this.activeEditor ? this.activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
-    if (dynamicSettings === this.dynamicSettings) {
+    const dynamicSettings = this.#activeEditor ? this.#activeEditor.state.facet(dynamicSetting) : DynamicSetting.none;
+    if (dynamicSettings === this.#dynamicSettings) {
       return;
     }
-    this.dynamicSettings = dynamicSettings;
+    this.#dynamicSettings = dynamicSettings;
 
-    for (const [setting, listener] of this.activeSettingListeners) {
+    for (const [setting, listener] of this.#activeSettingListeners) {
       setting.removeChangeListener(listener);
     }
-    this.activeSettingListeners = [];
+    this.#activeSettingListeners = [];
 
     const settings = Common.Settings.Settings.instance();
     for (const dynamicSetting of dynamicSettings) {
       const handler = ({data}: {data: unknown}): void => {
         const change = dynamicSetting.sync(this.state, data);
-        if (change && this.activeEditor) {
-          this.activeEditor.dispatch({effects: change});
+        if (change && this.#activeEditor) {
+          this.#activeEditor.dispatch({effects: change});
         }
       };
       const setting = settings.moduleSetting(dynamicSetting.settingName);
       setting.addChangeListener(handler);
-      this.activeSettingListeners.push([setting, handler]);
+      this.#activeSettingListeners.push([setting, handler]);
     }
   }
 
@@ -146,12 +148,13 @@ export class TextEditor extends HTMLElement {
     const devtoolsElement =
         WindowBoundsService.WindowBoundsService.WindowBoundsServiceImpl.instance().getDevToolsBoundingElement();
     if (devtoolsElement) {
-      this.devtoolsResizeObserver.observe(devtoolsElement);
+      this.#devtoolsResizeObserver.observe(devtoolsElement);
     }
+    window.addEventListener('resize', this.#resizeListener);
   }
 
   revealPosition(selection: CodeMirror.EditorSelection, highlight: boolean = true): void {
-    const view = this.activeEditor;
+    const view = this.#activeEditor;
     if (!view) {
       return;
     }

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

@@ -217,10 +217,10 @@ let cacheInstance: PropertyCache|null = null;
 // Store recent collections of property completions. The empty string
 // is used to store the set of global bindings.
 class PropertyCache {
-  private readonly cache: Map<string, Promise<CompletionSet>> = new Map();
+  readonly #cache: Map<string, Promise<CompletionSet>> = new Map();
 
   constructor() {
-    const clear = (): void => this.cache.clear();
+    const clear = (): void => this.#cache.clear();
     SDK.ConsoleModel.ConsoleModel.instance().addEventListener(SDK.ConsoleModel.Events.CommandEvaluated, clear);
     UI.Context.Context.instance().addFlavorChangeListener(SDK.RuntimeModel.ExecutionContext, clear);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -230,14 +230,14 @@ class PropertyCache {
   }
 
   get(expression: string): Promise<CompletionSet>|undefined {
-    return this.cache.get(expression);
+    return this.#cache.get(expression);
   }
 
   set(expression: string, value: Promise<CompletionSet>): void {
-    this.cache.set(expression, value);
+    this.#cache.set(expression, value);
     setTimeout(() => {
-      if (this.cache.get(expression) === value) {
-        this.cache.delete(expression);
+      if (this.#cache.get(expression) === value) {
+        this.#cache.delete(expression);
       }
     }, maxCacheAge);
   }

package/front_end/ui/components/text_prompt/TextPrompt.ts

@@ -26,27 +26,27 @@ export class PromptInputEvent extends Event {
 
 export class TextPrompt extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-text-prompt`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private ariaLabelText = '';
-  private prefixText = '';
-  private suggestionText = '';
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #ariaLabelText = '';
+  #prefixText = '';
+  #suggestionText = '';
 
   connectedCallback(): void {
-    this.shadow.adoptedStyleSheets = [textPromptStyles];
+    this.#shadow.adoptedStyleSheets = [textPromptStyles];
   }
 
   set data(data: TextPromptData) {
-    this.ariaLabelText = data.ariaLabel;
-    this.prefixText = data.prefix;
-    this.suggestionText = data.suggestion;
+    this.#ariaLabelText = data.ariaLabel;
+    this.#prefixText = data.prefix;
+    this.#suggestionText = data.suggestion;
     this.render();
   }
 
   get data(): TextPromptData {
     return {
-      ariaLabel: this.ariaLabelText,
-      prefix: this.prefixText,
-      suggestion: this.suggestionText,
+      ariaLabel: this.#ariaLabelText,
+      prefix: this.#prefixText,
+      suggestion: this.#suggestionText,
     };
   }
 
@@ -55,7 +55,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   private input(): HTMLInputElement {
-    const inputElement = this.shadow.querySelector<HTMLInputElement>('input');
+    const inputElement = this.#shadow.querySelector<HTMLInputElement>('input');
     if (!inputElement) {
       throw new Error('Expected an input element!');
     }
@@ -92,12 +92,12 @@ export class TextPrompt extends HTMLElement {
   }
 
   setPrefix(prefix: string): void {
-    this.prefixText = prefix;
+    this.#prefixText = prefix;
     this.render();
   }
 
   setSuggestion(suggestion: string): void {
-    this.suggestionText = suggestion;
+    this.#suggestionText = suggestion;
     this.render();
   }
 
@@ -112,7 +112,7 @@ export class TextPrompt extends HTMLElement {
   }
 
   private suggestion(): HTMLSpanElement {
-    const suggestionElement = this.shadow.querySelector<HTMLSpanElement>('.suggestion');
+    const suggestionElement = this.#shadow.querySelector<HTMLSpanElement>('.suggestion');
     if (!suggestionElement) {
       throw new Error('Expected an suggestion element!');
     }
@@ -125,11 +125,11 @@ export class TextPrompt extends HTMLElement {
 
   private render(): void {
     const output = LitHtml.html`
-      <span class="prefix">${this.prefixText} </span>
-      <span class="text-prompt-input"><input aria-label=${this.ariaLabelText} spellcheck="false" @input=${
+      <span class="prefix">${this.#prefixText} </span>
+      <span class="text-prompt-input"><input aria-label=${this.#ariaLabelText} spellcheck="false" @input=${
         this.onInput} @keydown=${this.onKeyDown}/><span class='suggestion' suggestion="${
-        this.suggestionText}"></span></span>`;
-    LitHtml.render(output, this.shadow, {host: this});
+        this.#suggestionText}"></span></span>`;
+    LitHtml.render(output, this.#shadow, {host: this});
   }
 }
 

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

@@ -82,20 +82,20 @@ export const enum FilterOption {
 
 export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-tree-outline`;
-  private readonly shadow = this.attachShadow({mode: 'open'});
-  private treeData: readonly TreeNode<TreeNodeDataType>[] = [];
-  private nodeExpandedMap: Map<string, boolean> = new Map();
-  private domNodeToTreeNodeMap: WeakMap<HTMLLIElement, TreeNode<TreeNodeDataType>> = new WeakMap();
-  private hasRenderedAtLeastOnce = false;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #treeData: readonly TreeNode<TreeNodeDataType>[] = [];
+  #nodeExpandedMap: Map<string, boolean> = new Map();
+  #domNodeToTreeNodeMap: WeakMap<HTMLLIElement, TreeNode<TreeNodeDataType>> = new WeakMap();
+  #hasRenderedAtLeastOnce = false;
   /**
    * If we have expanded to a certain node, we want to focus it once we've
    * rendered. But we render lazily and wrapped in LitHtml.until, so we can't
    * know for sure when that node will be rendered. This variable tracks the
    * node that we want focused but may not yet have been rendered.
    */
-  private nodeIdPendingFocus: TreeNodeId|null = null;
-  private selectedTreeNode: TreeNode<TreeNodeDataType>|null = null;
-  private defaultRenderer =
+  #nodeIdPendingFocus: TreeNodeId|null = null;
+  #selectedTreeNode: TreeNode<TreeNodeDataType>|null = null;
+  #defaultRenderer =
       (node: TreeNode<TreeNodeDataType>, _state: {isExpanded: boolean}): LitHtml.TemplateResult => {
         if (typeof node.treeNodeData !== 'string') {
           console.warn(`The default TreeOutline renderer simply stringifies its given value. You passed in ${
@@ -105,16 +105,16 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         }
         return LitHtml.html`${String(node.treeNodeData)}`;
       };
-  private nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
+  #nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
 
   /**
    * scheduledRender = render() has been called and scheduled a render.
    */
-  private scheduledRender = false;
+  #scheduledRender = false;
   /**
    * enqueuedRender = render() was called mid-way through an existing render.
    */
-  private enqueuedRender = false;
+  #enqueuedRender = false;
 
   static get observedAttributes(): string[] {
     return ['nowrap', 'toplevelbordercolor'];
@@ -136,22 +136,22 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   connectedCallback(): void {
     this.setTopLevelNodeBorderColorCSSVariable(this.getAttribute('toplevelbordercolor'));
     this.setNodeKeyNoWrapCSSVariable(this.getAttribute('nowrap'));
-    this.shadow.adoptedStyleSheets = [treeOutlineStyles, CodeHighlighter.Style.default];
+    this.#shadow.adoptedStyleSheets = [treeOutlineStyles, CodeHighlighter.Style.default];
   }
 
   get data(): TreeOutlineData<TreeNodeDataType> {
     return {
-      tree: this.treeData as TreeNode<TreeNodeDataType>[],
-      defaultRenderer: this.defaultRenderer,
+      tree: this.#treeData as TreeNode<TreeNodeDataType>[],
+      defaultRenderer: this.#defaultRenderer,
     };
   }
 
   set data(data: TreeOutlineData<TreeNodeDataType>) {
-    this.defaultRenderer = data.defaultRenderer;
-    this.treeData = data.tree;
-    this.nodeFilter = data.filter;
-    if (!this.hasRenderedAtLeastOnce) {
-      this.selectedTreeNode = this.treeData[0];
+    this.#defaultRenderer = data.defaultRenderer;
+    this.#treeData = data.tree;
+    this.#nodeFilter = data.filter;
+    if (!this.#hasRenderedAtLeastOnce) {
+      this.#selectedTreeNode = this.#treeData[0];
     }
     this.render();
   }
@@ -162,7 +162,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * 1 and 2.
    */
   async expandRecursively(maxDepth = 2): Promise<void> {
-    await Promise.all(this.treeData.map(rootNode => this.expandAndRecurse(rootNode, 0, maxDepth)));
+    await Promise.all(this.#treeData.map(rootNode => this.expandAndRecurse(rootNode, 0, maxDepth)));
     await this.render();
   }
 
@@ -170,7 +170,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * Collapses all nodes in the tree.
    */
   async collapseAllNodes(): Promise<void> {
-    this.nodeExpandedMap.clear();
+    this.#nodeExpandedMap.clear();
     await this.render();
   }
 
@@ -185,7 +185,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * Takes a TreeNode ID, expands the outline to reveal it, and focuses it.
    */
   async expandToAndSelectTreeNodeId(targetTreeNodeId: TreeNodeId): Promise<void> {
-    const pathToTreeNode = await getPathToTreeNode(this.treeData, targetTreeNodeId);
+    const pathToTreeNode = await getPathToTreeNode(this.#treeData, targetTreeNodeId);
 
     if (pathToTreeNode === null) {
       throw new Error(`Could not find node with id ${targetTreeNodeId} in the tree.`);
@@ -198,7 +198,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     });
 
     // Mark the node as pending focus so when it is rendered into the DOM we can focus it
-    this.nodeIdPendingFocus = targetTreeNodeId;
+    this.#nodeIdPendingFocus = targetTreeNodeId;
     await this.render();
   }
 
@@ -206,7 +206,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * Takes a list of TreeNode IDs and expands the corresponding nodes.
    */
   expandNodeIds(nodeIds: TreeNodeId[]): Promise<void> {
-    nodeIds.forEach(id => this.nodeExpandedMap.set(id, true));
+    nodeIds.forEach(id => this.#nodeExpandedMap.set(id, true));
     return this.render();
   }
 
@@ -214,12 +214,12 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
    * Takes a TreeNode ID and focuses the corresponding node.
    */
   focusNodeId(nodeId: TreeNodeId): Promise<void> {
-    this.nodeIdPendingFocus = nodeId;
+    this.#nodeIdPendingFocus = nodeId;
     return this.render();
   }
 
   async collapseChildrenOfNode(domNode: HTMLLIElement): Promise<void> {
-    const treeNode = this.domNodeToTreeNodeMap.get(domNode);
+    const treeNode = this.#domNodeToTreeNodeMap.get(domNode);
     if (!treeNode) {
       return;
     }
@@ -248,22 +248,22 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private getSelectedTreeNode(): TreeNode<TreeNodeDataType> {
-    if (!this.selectedTreeNode) {
+    if (!this.#selectedTreeNode) {
       throw new Error('getSelectedNode was called but selectedTreeNode is null');
     }
-    return this.selectedTreeNode;
+    return this.#selectedTreeNode;
   }
 
   private async fetchNodeChildren(node: TreeNodeWithChildren<TreeNodeDataType>): Promise<TreeNode<TreeNodeDataType>[]> {
     const children = await getNodeChildren(node);
-    if (!this.nodeFilter) {
+    if (!this.#nodeFilter) {
       return children;
     }
     const filteredChildren = [];
     for (const child of children) {
-      const filtering = this.nodeFilter(child.treeNodeData);
+      const filtering = this.#nodeFilter(child.treeNodeData);
       // We always include the selected node in the tree, regardless of its filtering status.
-      if (filtering === FilterOption.SHOW || this.isSelectedNode(child) || child.id === this.nodeIdPendingFocus) {
+      if (filtering === FilterOption.SHOW || this.isSelectedNode(child) || child.id === this.#nodeIdPendingFocus) {
         filteredChildren.push(child);
       } else if (filtering === FilterOption.FLATTEN && isExpandableNode(child)) {
         const grandChildren = await this.fetchNodeChildren(child);
@@ -274,11 +274,11 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private setNodeExpandedState(node: TreeNode<TreeNodeDataType>, newExpandedState: boolean): void {
-    this.nodeExpandedMap.set(node.id, newExpandedState);
+    this.#nodeExpandedMap.set(node.id, newExpandedState);
   }
 
   private nodeIsExpanded(node: TreeNode<TreeNodeDataType>): boolean {
-    return this.nodeExpandedMap.get(node.id) || false;
+    return this.#nodeExpandedMap.get(node.id) || false;
   }
 
   private async expandAndRecurse(node: TreeNode<TreeNodeDataType>, currentDepth: number, maxDepth: number):
@@ -309,7 +309,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     event.stopPropagation();
     const nodeClickExpandsOrContracts = this.getAttribute('clickabletitle') !== null;
     const domNode = event.currentTarget as HTMLLIElement;
-    const node = this.domNodeToTreeNodeMap.get(domNode);
+    const node = this.#domNodeToTreeNodeMap.get(domNode);
     if (nodeClickExpandsOrContracts && node && isExpandableNode(node)) {
       this.setNodeExpandedState(node, !this.nodeIsExpanded(node));
     }
@@ -317,11 +317,11 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private async focusTreeNode(domNode: HTMLLIElement): Promise<void> {
-    const treeNode = this.domNodeToTreeNodeMap.get(domNode);
+    const treeNode = this.#domNodeToTreeNodeMap.get(domNode);
     if (!treeNode) {
       return;
     }
-    this.selectedTreeNode = treeNode;
+    this.#selectedTreeNode = treeNode;
     await this.render();
     this.dispatchEvent(new ItemSelectedEvent(treeNode));
     coordinator.write('DOMNode focus', () => {
@@ -331,7 +331,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
 
   private processHomeAndEndKeysNavigation(key: 'Home'|'End'): void {
     if (key === 'Home') {
-      const firstRootNode = this.shadow.querySelector<HTMLLIElement>('ul[role="tree"] > li[role="treeitem"]');
+      const firstRootNode = this.#shadow.querySelector<HTMLLIElement>('ul[role="tree"] > li[role="treeitem"]');
       if (firstRootNode) {
         this.focusTreeNode(firstRootNode);
       }
@@ -345,7 +345,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
        * li[role="treeitem"] in the DOM because we only render visible nodes.
        * Therefore we can select all the nodes and pick the last one.
        */
-      const allTreeItems = this.shadow.querySelectorAll<HTMLLIElement>('li[role="treeitem"]');
+      const allTreeItems = this.#shadow.querySelectorAll<HTMLLIElement>('li[role="treeitem"]');
       const lastTreeItem = allTreeItems[allTreeItems.length - 1];
       if (lastTreeItem) {
         this.focusTreeNode(lastTreeItem);
@@ -355,7 +355,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
 
   private async processArrowKeyNavigation(key: Platform.KeyboardUtilities.ArrowKey, currentDOMNode: HTMLLIElement):
       Promise<void> {
-    const currentTreeNode = this.domNodeToTreeNodeMap.get(currentDOMNode);
+    const currentTreeNode = this.#domNodeToTreeNodeMap.get(currentDOMNode);
     if (!currentTreeNode) {
       return;
     }
@@ -370,7 +370,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private processEnterOrSpaceNavigation(currentDOMNode: HTMLLIElement): void {
-    const currentTreeNode = this.domNodeToTreeNodeMap.get(currentDOMNode);
+    const currentTreeNode = this.#domNodeToTreeNodeMap.get(currentDOMNode);
     if (!currentTreeNode) {
       return;
     }
@@ -399,13 +399,13 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private focusPendingNode(domNode: HTMLLIElement): void {
-    this.nodeIdPendingFocus = null;
+    this.#nodeIdPendingFocus = null;
     this.focusTreeNode(domNode);
   }
 
   private isSelectedNode(node: TreeNode<TreeNodeDataType>): boolean {
-    if (this.selectedTreeNode) {
-      return node.id === this.selectedTreeNode.id;
+    if (this.#selectedTreeNode) {
+      return node.id === this.#selectedTreeNode.id;
     }
     return false;
   }
@@ -446,7 +446,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     if (node.renderer) {
       renderedNodeKey = node.renderer(node, {isExpanded: nodeIsExpanded});
     } else {
-      renderedNodeKey = this.defaultRenderer(node, {isExpanded: nodeIsExpanded});
+      renderedNodeKey = this.#defaultRenderer(node, {isExpanded: nodeIsExpanded});
     }
 
     // Disabled until https://crbug.com/1079231 is fixed.
@@ -460,7 +460,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
         aria-posinset=${positionInSet + 1}
         class=${listItemClasses}
         @click=${this.onNodeClick}
-        track-dom-node-to-tree-node=${trackDOMNodeToTreeNode(this.domNodeToTreeNodeMap, node)}
+        track-dom-node-to-tree-node=${trackDOMNodeToTreeNode(this.#domNodeToTreeNodeMap, node)}
         on-render=${ComponentHelpers.Directives.nodeRenderedCallback(domNode => {
          /**
            * Because TreeNodes are lazily rendered, you can call
@@ -473,7 +473,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
             return;
           }
 
-          if (this.nodeIdPendingFocus && node.id === this.nodeIdPendingFocus) {
+          if (this.#nodeIdPendingFocus && node.id === this.#nodeIdPendingFocus) {
             this.focusPendingNode(domNode);
           }
         })}
@@ -497,14 +497,14 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
   }
 
   private async render(): Promise<void> {
-    if (this.scheduledRender) {
+    if (this.#scheduledRender) {
       // If we are already rendering, don't render again immediately, but
       // enqueue it to be run after we're done on our current render.
-      this.enqueuedRender = true;
+      this.#enqueuedRender = true;
       return;
     }
 
-    this.scheduledRender = true;
+    this.#scheduledRender = true;
 
     await coordinator.write('TreeOutline render', () => {
       // Disabled until https://crbug.com/1079231 is fixed.
@@ -512,27 +512,27 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       LitHtml.render(LitHtml.html`
       <div class="wrapping-container">
       <ul role="tree" @keydown=${this.onTreeKeyDown}>
-        ${this.treeData.map((topLevelNode, index) => {
+        ${this.#treeData.map((topLevelNode, index) => {
           return this.renderNode(topLevelNode, {
             depth: 0,
-            setSize: this.treeData.length,
+            setSize: this.#treeData.length,
             positionInSet: index,
           });
         })}
       </ul>
       </div>
-      `, this.shadow, {
+      `, this.#shadow, {
         host: this,
       });
     });
     // clang-format on
-    this.hasRenderedAtLeastOnce = true;
-    this.scheduledRender = false;
+    this.#hasRenderedAtLeastOnce = true;
+    this.#scheduledRender = false;
 
     // If render() was called when we were already mid-render, let's re-render
     // to ensure we're not rendering any stale UI.
-    if (this.enqueuedRender) {
-      this.enqueuedRender = false;
+    if (this.#enqueuedRender) {
+      this.#enqueuedRender = false;
       return this.render();
     }
   }

package/front_end/ui/legacy/Infobar.ts

@@ -48,6 +48,7 @@ export class Infobar {
   private readonly toggleElement: HTMLButtonElement;
   private readonly closeButton: HTMLElement;
   private closeCallback: (() => void)|null;
+  #firstFocusableElement: HTMLElement|null = null;
   private parentView?: Widget;
 
   // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
@@ -88,6 +89,9 @@ export class Infobar {
         }
 
         const button = createTextButton(action.text, actionCallback, buttonClass);
+        if (action.highlight && !this.#firstFocusableElement) {
+          this.#firstFocusableElement = button;
+        }
         this.actionContainer.appendChild(button);
       }
     }
@@ -202,6 +206,11 @@ export class Infobar {
     this.toggleElement.remove();
     this.onResize();
     ARIAUtils.alert(this.detailsMessage);
+    if (this.#firstFocusableElement) {
+      this.#firstFocusableElement.focus();
+    } else {
+      this.closeButton.focus();
+    }
   }
 
   createDetailsRowMessage(message?: string): Element {