chrome-devtools-frontend 1.0.943986 → 1.0.945579

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

@@ -90,7 +90,7 @@ export const enum QueryType {
   PropertyExpression = 2,
 }
 
-export function getQueryType(tree: CodeMirror.Tree, pos: number): {
+export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror.Text): {
   type: QueryType,
   from?: number,
   relatedNode?: CodeMirror.SyntaxNode,
@@ -101,13 +101,15 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number): {
     return null;
   }
 
-  if (node.name === 'VariableName') {
-    return {type: QueryType.Expression, from: node.from};
-  }
   if (node.name === 'PropertyName') {
     return parent?.name !== 'MemberExpression' ? null :
                                                  {type: QueryType.PropertyName, from: node.from, relatedNode: parent};
   }
+  if (node.name === 'VariableName' ||
+      // Treat alphabetic keywords as variables
+      !node.firstChild && node.to - node.from < 20 && !/[^a-z]/.test(doc.sliceString(node.from, node.to))) {
+    return {type: QueryType.Expression, from: node.from};
+  }
   if (node.name === 'String') {
     const parent = node.parent;
     return parent?.name === 'MemberExpression' && parent.childBefore(node.from)?.name === '[' ?
@@ -134,8 +136,8 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number): {
 
 export async function javascriptCompletionSource(cx: CodeMirror.CompletionContext):
     Promise<CodeMirror.CompletionResult|null> {
-  const query = getQueryType(CodeMirror.syntaxTree(cx.state), cx.pos);
-  if (!query || query.from === undefined && !cx.explicit) {
+  const query = getQueryType(CodeMirror.syntaxTree(cx.state), cx.pos, cx.state.doc);
+  if (!query || query.from === undefined && !cx.explicit && query.type === QueryType.Expression) {
     return null;
   }
 
@@ -162,7 +164,8 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
     if (!objectExpr) {
       return null;
     }
-    result = await completeProperties(cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote);
+    result = await completeProperties(
+        cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote, cx.state.sliceDoc(cx.pos, cx.pos + 1) === ']');
   } else {
     return null;
   }
@@ -214,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(
@@ -227,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);
   }
@@ -250,6 +253,7 @@ class PropertyCache {
 async function completeProperties(
     expression: string,
     quoted?: string,
+    hasBracket: boolean = false,
     ): Promise<CompletionSet> {
   const cache = PropertyCache.instance();
   if (!quoted) {
@@ -262,7 +266,7 @@ async function completeProperties(
   if (!context) {
     return new CompletionSet();
   }
-  const result = completePropertiesInner(expression, context, quoted);
+  const result = completePropertiesInner(expression, context, quoted, hasBracket);
   if (!quoted) {
     cache.set(expression, result);
   }
@@ -275,6 +279,7 @@ async function completePropertiesInner(
     expression: string,
     context: SDK.RuntimeModel.ExecutionContext,
     quoted?: string,
+    hasBracket: boolean = false,
     ): Promise<CompletionSet> {
   const result = new CompletionSet();
   if (!context) {
@@ -313,7 +318,7 @@ async function completePropertiesInner(
           label,
           type: prop.value?.type === 'function' ? functionType : otherType,
         };
-        if (quoted) {
+        if (quoted && !hasBracket) {
           completion.apply = label + ']';
         }
         if (!prop.isOwn) {

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

@@ -18,7 +18,7 @@ export const editorTheme = CM.EditorView.theme({
     fontSize: 'var(--source-code-font-size)',
   },
 
-  '.cm-panels, .cm-tooltip': {
+  '.cm-panels': {
     backgroundColor: 'var(--color-background-elevation-1)',
   },
 
@@ -110,25 +110,50 @@ export const editorTheme = CM.EditorView.theme({
     color: 'var(--color-text-secondary)',
   },
 
+  '.cm-tooltip': {
+    boxShadow: 'var(--drop-shadow)',
+    backgroundColor: 'var(--color-background-elevation-1)',
+  },
+
   '.cm-argumentHints': {
     pointerEvents: 'none',
     padding: '0 4px',
     whiteSpace: 'nowrap',
     lineHeight: '20px',
     marginBottom: '4px',
-    boxShadow: 'var(--drop-shadow)',
-    backgroundColor: 'var(--color-background)',
     width: 'fit-content',
   },
 
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    backgroundColor: 'var(--color-background)',
     minWidth: '16em',
+    '& > li.cm-secondaryCompletion': {
+      display: 'flex',
+      backgroundColor: 'var(--color-background-elevation-1)',
+      justifyContent: 'space-between',
+      '&::before': {
+        content: '">"',
+        fontWeight: 'bold',
+        color: 'var(--color-primary-variant)',
+        marginRight: '5px',
+      },
+    },
+    '& > li:hover': {
+      backgroundColor: 'var(--item-hover-color)',
+    },
     '& > li[aria-selected]': {
       backgroundColor: 'var(--color-selected-option-background)',
-      color: 'var(--color-selected-option)',
+      '&, &.cm-secondaryCompletion::before': {
+        color: 'var(--color-selected-option)',
+      },
     },
   },
 
+  '.cm-completionMatchedText': {
+    textDecoration: 'none',
+    fontWeight: 'bold',
+  },
+
   '.cm-highlightedLine': {
     animation: 'cm-fading-highlight 2s 0s',
   },

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 {

package/front_end/ui/legacy/InspectorView.ts

@@ -471,7 +471,7 @@ function createLocaleInfobar(): Infobar {
   // @ts-ignore TODO(crbug.com/1163928) Wait for Intl support.
   const locale = new Intl.Locale(closestSupportedLocale);
   const closestSupportedLanguageInCurrentLocale =
-      new Intl.DisplayNames([devtoolsLocale.locale], {type: 'language'}).of(locale.language);
+      new Intl.DisplayNames([devtoolsLocale.locale], {type: 'language'}).of(locale.language || 'en');
 
   const languageSetting = Common.Settings.Settings.instance().moduleSetting<string>('language');
   return new Infobar(

package/front_end/ui/legacy/ViewManager.ts

@@ -828,6 +828,12 @@ export class _TabbedLocation extends Location implements TabbedViewLocation {
     this.tabOrderSetting.set(tabOrders);
   }
 
+  // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  getCloseableTabSetting(): Common.Settings.Setting<any> {
+    return this.closeableTabSetting.get();
+  }
+
   static orderStep = 10;  // Keep in sync with descriptors.
 }