chrome-devtools-frontend 1.0.945329 → 1.0.946351

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/ListWidget.ts

@@ -276,10 +276,10 @@ export class Editor<T> {
     this.element = document.createElement('div');
     this.element.classList.add('editor-container');
     this.element.addEventListener('keydown', onKeyDown.bind(null, isEscKey, this.cancelClicked.bind(this)), false);
-    this.element.addEventListener(
-        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
 
     this.contentElementInternal = this.element.createChild('div', 'editor-content');
+    this.contentElementInternal.addEventListener(
+        'keydown', onKeyDown.bind(null, event => event.key === 'Enter', this.commitClicked.bind(this)), false);
 
     const buttonsRow = this.element.createChild('div', 'editor-buttons');
     this.commitButton = createTextButton('', this.commitClicked.bind(this), '', true /* primary */);

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -37,10 +37,10 @@ import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import * as IconButton from '../../../components/icon_button/icon_button.js';
+import * as TextEditor from '../../../components/text_editor/text_editor.js';
 import * as UI from '../../legacy.js';
 
 import {CustomPreviewComponent} from './CustomPreviewComponent.js';
-import {JavaScriptAutocomplete} from './JavaScriptAutocomplete.js';
 import {JavaScriptREPL} from './JavaScriptREPL.js';
 import {createSpansForNodeTitle, RemoteObjectPreviewFormatter} from './RemoteObjectPreviewFormatter.js';
 import objectValueStyles from './objectValue.css.js';
@@ -1513,8 +1513,7 @@ export class ArrayGroupingTreeElement extends UI.TreeOutline.TreeElement {
 export class ObjectPropertyPrompt extends UI.TextPrompt.TextPrompt {
   constructor() {
     super();
-    const javaScriptAutocomplete = JavaScriptAutocomplete.instance();
-    this.initialize(javaScriptAutocomplete.completionsForTextInCurrentContext.bind(javaScriptAutocomplete));
+    this.initialize(TextEditor.JavaScript.completeInContext);
   }
 }
 

package/front_end/ui/legacy/components/object_ui/objectPropertiesSection.css

@@ -61,7 +61,6 @@
 
 .name-and-value {
   overflow: hidden;
-  text-overflow: ellipsis;
   line-height: 16px;
 }
 

package/front_end/ui/legacy/components/object_ui/object_ui-legacy.ts

@@ -12,14 +12,6 @@ ObjectUI = ObjectUI || {};
 /** @constructor */
 ObjectUI.CustomPreviewComponent = ObjectUIModule.CustomPreviewComponent.CustomPreviewComponent;
 
-/** @constructor */
-ObjectUI.JavaScriptAutocomplete = ObjectUIModule.JavaScriptAutocomplete.JavaScriptAutocomplete;
-
-/** @constructor */
-ObjectUI.JavaScriptAutocompleteConfig = ObjectUIModule.JavaScriptAutocomplete.JavaScriptAutocompleteConfig;
-
-ObjectUI.javaScriptAutocomplete = ObjectUIModule.javaScriptAutocomplete;
-
 /** @constructor */
 ObjectUI.JavaScriptREPL = ObjectUIModule.JavaScriptREPL.JavaScriptREPL;
 

package/front_end/ui/legacy/components/object_ui/object_ui.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as CustomPreviewComponent from './CustomPreviewComponent.js';
-import * as JavaScriptAutocomplete from './JavaScriptAutocomplete.js';
 import * as JavaScriptREPL from './JavaScriptREPL.js';
 import * as ObjectPopoverHelper from './ObjectPopoverHelper.js';
 import * as ObjectPropertiesSection from './ObjectPropertiesSection.js';
@@ -11,11 +10,8 @@ import * as RemoteObjectPreviewFormatter from './RemoteObjectPreviewFormatter.js
 
 export {
   CustomPreviewComponent,
-  JavaScriptAutocomplete,
   JavaScriptREPL,
   ObjectPopoverHelper,
   ObjectPropertiesSection,
   RemoteObjectPreviewFormatter,
 };
-
-export const javaScriptAutocomplete = JavaScriptAutocomplete.JavaScriptAutocomplete.instance();

package/front_end/ui/legacy/components/source_frame/SourceFrame.ts

@@ -229,6 +229,9 @@ export class SourceFrameImpl extends Common.ObjectWrapper.eventMixin<EventTypes,
             },
           },
         },
+        ':host-context(.pretty-printed) & .cm-lineNumbers .cm-gutterElement': {
+          color: 'var(--legacy-accent-color)',
+        },
       }),
       CodeMirror.EditorView.domEventHandlers({
         focus: () => this.onFocus(),