chrome-devtools-frontend 1.0.945329 → 1.0.945579

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/tabbedPane.css

@@ -134,7 +134,7 @@
 .tabbed-pane-header-tab:hover,
 .tabbed-pane-shadow .tabbed-pane-header-tab:focus-visible {
   color: var(--color-text-primary);
-  background-color: var(--legacy-toolbar-hover-bg-color);
+  background-color: var(--color-background-elevation-1);
 }
 
 .tabbed-pane-header-tab-title {

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.945329"
+  "version": "1.0.945579"
 }