chrome-devtools-frontend 1.0.943182 → 1.0.944903

package/front_end/panels/console/ConsolePrompt.ts

@@ -6,9 +6,9 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
-import * as TextEditor from '../../ui/legacy/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import {ConsolePanel} from './ConsolePanel.js';
@@ -27,17 +27,17 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private addCompletionsFromHistory: boolean;
   private historyInternal: ConsoleHistoryManager;
   private initialText: string;
-  private editor: UI.TextEditor.TextEditor|null;
+  private editor: TextEditor.TextEditor.TextEditor;
   private readonly eagerPreviewElement: HTMLDivElement;
   private textChangeThrottler: Common.Throttler.Throttler;
   private readonly formatter: ObjectUI.RemoteObjectPreviewFormatter.RemoteObjectPreviewFormatter;
   private requestPreviewBound: () => Promise<void>;
+  private requestPreviewCurrent = 0;
   private readonly innerPreviewElement: HTMLElement;
   private readonly promptIcon: UI.Icon.Icon;
   private readonly iconThrottler: Common.Throttler.Throttler;
   private readonly eagerEvalSetting: Common.Settings.Setting<boolean>;
   private previewRequestForTest: Promise<void>|null;
-  private defaultAutocompleteConfig: UI.TextEditor.AutocompleteConfig|null;
   private highlightingNode: boolean;
 
   constructor() {
@@ -46,7 +46,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.historyInternal = new ConsoleHistoryManager();
 
     this.initialText = '';
-    this.editor = null;
     this.eagerPreviewElement = document.createElement('div');
     this.eagerPreviewElement.classList.add('console-eager-preview');
     this.textChangeThrottler = new Common.Throttler.Throttler(150);
@@ -68,41 +67,41 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
     this.element.tabIndex = 0;
     this.previewRequestForTest = null;
+    this.highlightingNode = false;
 
-    this.defaultAutocompleteConfig = null;
+    const editorState = CodeMirror.EditorState.create({
+      doc: this.initialText,
+      extensions: [
+        CodeMirror.keymap.of(this.editorKeymap()),
+        CodeMirror.EditorView.updateListener.of(update => this.editorUpdate(update)),
+        TextEditor.JavaScript.argumentHints(),
+        TextEditor.JavaScript.completion(),
+        TextEditor.Config.showCompletionHint,
+        CodeMirror.javascript.javascript(),
+        TextEditor.Config.baseConfiguration(this.initialText),
+        TextEditor.Config.autocompletion,
+        CodeMirror.javascript.javascriptLanguage.data.of({
+          autocomplete: (context: CodeMirror.CompletionContext): CodeMirror.CompletionResult | null =>
+              this.historyCompletions(context),
+        }),
+        CodeMirror.EditorView.contentAttributes.of({'aria-label': i18nString(UIStrings.consolePrompt)}),
+        CodeMirror.EditorView.lineWrapping,
+        CodeMirror.autocompletion({aboveCursor: true}),
+      ],
+    });
 
-    this.highlightingNode = false;
+    this.editor = new TextEditor.TextEditor.TextEditor(editorState);
+    this.editor.addEventListener('keydown', (event): void => {
+      if (event.defaultPrevented) {
+        event.stopPropagation();
+      }
+    });
+    editorContainerElement.appendChild(this.editor);
 
-    const factory = TextEditor.CodeMirrorTextEditor.CodeMirrorTextEditorFactory.instance();
-
-    const options = {
-      devtoolsAccessibleName: (i18nString(UIStrings.consolePrompt) as string),
-      lineNumbers: false,
-      lineWrapping: true,
-      mimeType: 'javascript',
-      autoHeight: true,
-    };
-    this.editor = factory.createEditor((options as UI.TextEditor.Options));
-
-    this.defaultAutocompleteConfig =
-        ObjectUI.JavaScriptAutocomplete.JavaScriptAutocompleteConfig.createConfigForEditor(this.editor);
-    this.editor.configureAutocomplete(Object.assign({}, this.defaultAutocompleteConfig, {
-      suggestionsCallback: this.wordsWithQuery.bind(this),
-      anchorBehavior: UI.GlassPane.AnchorBehavior.PreferTop,
-    }));
-    this.editor.widget().element.addEventListener('keydown', this.editorKeyDown.bind(this), true);
-    this.editor.widget().show(editorContainerElement);
-    this.editor.addEventListener(UI.TextEditor.Events.CursorChanged, this.updatePromptIcon, this);
-    this.editor.addEventListener(UI.TextEditor.Events.TextChanged, this.onTextChanged, this);
-    this.editor.addEventListener(UI.TextEditor.Events.SuggestionChanged, this.onTextChanged, this);
-
-    this.setText(this.initialText);
-    this.initialText = '';
     if (this.hasFocus()) {
       this.focus();
     }
     this.element.removeAttribute('tabindex');
-    this.editor.widget().element.tabIndex = -1;
 
     this.editorSetForTest();
 
@@ -126,7 +125,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     // ConsoleView and prompt both use a throttler, so we clear the preview
     // ASAP to avoid inconsistency between a fresh viewport and stale preview.
     if (this.eagerEvalSetting.get()) {
-      const asSoonAsPossible = !this.editor || !this.editor.textWithCurrentSuggestion();
+      const asSoonAsPossible = !TextEditor.Config.contentIncludingHint(this.editor.editor);
       this.previewRequestForTest = this.textChangeThrottler.schedule(this.requestPreviewBound, asSoonAsPossible);
     }
     this.updatePromptIcon();
@@ -134,15 +133,16 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private async requestPreview(): Promise<void> {
-    if (!this.editor) {
-      return;
-    }
-    const text = this.editor.textWithCurrentSuggestion().trim();
+    const id = ++this.requestPreviewCurrent;
+    const text = TextEditor.Config.contentIncludingHint(this.editor.editor).trim();
     const executionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     const {preview, result} = await ObjectUI.JavaScriptREPL.JavaScriptREPL.evaluateAndBuildPreview(
         text, true /* throwOnSideEffect */, true /* replMode */, 500 /* timeout */);
+    if (this.requestPreviewCurrent !== id) {
+      return;
+    }
     this.innerPreviewElement.removeChildren();
-    if (preview.deepTextContent() !== this.editor.textWithCurrentSuggestion().trim()) {
+    if (preview.deepTextContent() !== TextEditor.Config.contentIncludingHint(this.editor.editor).trim()) {
       this.innerPreviewElement.appendChild(preview);
     }
     if (result && 'object' in result && result.object && result.object.subtype === 'node') {
@@ -174,149 +174,102 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   clearAutocomplete(): void {
-    if (this.editor) {
-      this.editor.clearAutocomplete();
-    }
+    CodeMirror.closeCompletion(this.editor.editor);
   }
 
   private isCaretAtEndOfPrompt(): boolean {
-    return this.editor !== null &&
-        this.editor.selection().collapseToEnd().equal(this.editor.fullRange().collapseToEnd());
+    return this.editor.state.selection.main.head === this.editor.state.doc.length;
   }
 
   moveCaretToEndOfPrompt(): void {
-    if (this.editor) {
-      this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(Infinity, Infinity));
-    }
+    this.editor.dispatch({
+      selection: CodeMirror.EditorSelection.cursor(this.editor.state.doc.length),
+    });
   }
 
-  setText(text: string): void {
-    if (this.editor) {
-      this.editor.setText(text);
-    } else {
-      this.initialText = text;
-    }
-    this.dispatchEventToListeners(Events.TextChanged);
+  clear(): void {
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length},
+    });
   }
 
   text(): string {
-    return this.editor ? this.editor.text() : this.initialText;
+    return this.editor.state.doc.toString();
   }
 
   setAddCompletionsFromHistory(value: boolean): void {
     this.addCompletionsFromHistory = value;
   }
 
-  private editorKeyDown(event: Event): void {
-    if (!this.editor) {
-      return;
-    }
-    const keyboardEvent = (event as KeyboardEvent);
-    let newText;
-    let isPrevious;
-    // Check against visual coordinates in case lines wrap.
-    const selection = this.editor.selection();
-    const cursorY = this.editor.visualCoordinates(selection.endLine, selection.endColumn).y;
-
-    switch (keyboardEvent.keyCode) {
-      case UI.KeyboardShortcut.Keys.Up.code: {
-        const startY = this.editor.visualCoordinates(0, 0).y;
-        if (keyboardEvent.shiftKey || !selection.isEmpty() || cursorY !== startY) {
-          break;
-        }
-        newText = this.historyInternal.previous(this.text());
-        isPrevious = true;
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.Down.code: {
-        const fullRange = this.editor.fullRange();
-        const endY = this.editor.visualCoordinates(fullRange.endLine, fullRange.endColumn).y;
-        if (keyboardEvent.shiftKey || !selection.isEmpty() || cursorY !== endY) {
-          break;
-        }
-        newText = this.historyInternal.next();
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.P.code: {  // Ctrl+P = Previous
-        if (Host.Platform.isMac() && keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey &&
-            !keyboardEvent.shiftKey) {
-          newText = this.historyInternal.previous(this.text());
-          isPrevious = true;
-        }
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.N.code: {  // Ctrl+N = Next
-        if (Host.Platform.isMac() && keyboardEvent.ctrlKey && !keyboardEvent.metaKey && !keyboardEvent.altKey &&
-            !keyboardEvent.shiftKey) {
-          newText = this.historyInternal.next();
-        }
-        break;
-      }
-      case UI.KeyboardShortcut.Keys.Enter.code: {
-        this.enterKeyPressed(keyboardEvent);
-        break;
+  private editorKeymap(): readonly CodeMirror.KeyBinding[] {
+    return [
+      {key: 'ArrowUp', run: (): boolean => this.moveHistory(-1)},
+      {key: 'ArrowDown', run: (): boolean => this.moveHistory(1)},
+      {mac: 'Ctrl-p', run: (): boolean => this.moveHistory(-1, true)},
+      {mac: 'Ctrl-n', run: (): boolean => this.moveHistory(1, true)},
+      {key: 'Enter', run: (): boolean => this.evaluate(), shift: CodeMirror.insertNewlineAndIndent},
+    ];
+  }
+
+  private moveHistory(dir: -1|1, force = false): boolean {
+    const {editor} = this.editor, {main} = editor.state.selection;
+    if (!force) {
+      if (!main.empty) {
+        return false;
       }
-      case UI.KeyboardShortcut.Keys.Tab.code: {
-        if (!this.text()) {
-          keyboardEvent.consume();
-        }
-        break;
+      const cursorCoords = editor.coordsAtPos(main.head);
+      const endCoords = editor.coordsAtPos(dir < 0 ? 0 : editor.state.doc.length);
+      // Check if there are wrapped lines in this direction, and let
+      // the cursor move normally if there are.
+      if (cursorCoords && endCoords &&
+          (dir < 0 ? cursorCoords.top > endCoords.top + 5 : cursorCoords.bottom < endCoords.bottom - 5)) {
+        return false;
       }
     }
 
+    const history = this.historyInternal;
+    const newText = dir < 0 ? history.previous(this.text()) : history.next();
     if (newText === undefined) {
-      return;
+      return false;
     }
-    keyboardEvent.consume(true);
-    this.setText(newText);
 
-    if (isPrevious) {
-      this.editor.setSelection(TextUtils.TextRange.TextRange.createFromLocation(0, Infinity));
-    } else {
-      this.moveCaretToEndOfPrompt();
-    }
+    const cursorPos = dir < 0 ? newText.search(/\n|$/) : newText.length;
+    this.editor.dispatch({
+      changes: {from: 0, to: this.editor.state.doc.length, insert: newText},
+      selection: CodeMirror.EditorSelection.cursor(cursorPos),
+      scrollIntoView: true,
+    });
+    return true;
+  }
+
+  private enterWillEvaluate(): boolean {
+    const {state} = this.editor;
+    return state.doc.length > 0 && TextEditor.JavaScript.isExpressionComplete(state);
   }
 
-  private async enterWillEvaluate(): Promise<boolean> {
-    if (!this.isCaretAtEndOfPrompt()) {
-      return true;
+  private evaluate(): boolean {
+    if (this.enterWillEvaluate()) {
+      this.appendCommand(this.text(), true);
+      this.editor.dispatch({
+        changes: {from: 0, to: this.editor.state.doc.length},
+        scrollIntoView: true,
+      });
+    } else if (this.editor.state.doc.length) {
+      return CodeMirror.insertNewlineAndIndent(this.editor.editor);
+    } else {
+      this.editor.dispatch({scrollIntoView: true});
     }
-    return await ObjectUI.JavaScriptAutocomplete.JavaScriptAutocomplete.isExpressionComplete(this.text());
+    this.enterProcessedForTest();
+    return true;
   }
 
   private updatePromptIcon(): void {
     this.iconThrottler.schedule(async () => {
-      const canComplete = await this.enterWillEvaluate();
-      this.promptIcon.classList.toggle('console-prompt-incomplete', !canComplete);
+      this.promptIcon.classList.toggle('console-prompt-incomplete', !this.enterWillEvaluate());
     });
   }
 
-  private async enterKeyPressed(event: KeyboardEvent): Promise<void> {
-    if (event.altKey || event.ctrlKey || event.shiftKey) {
-      return;
-    }
-
-    event.consume(true);
-
-    // Since we prevent default, manually emulate the native "scroll on key input" behavior.
-    this.element.scrollIntoView();
-    this.clearAutocomplete();
-
-    const str = this.text();
-    if (!str.length) {
-      return;
-    }
-
-    if (await this.enterWillEvaluate()) {
-      await this.appendCommand(str, true);
-    } else if (this.editor) {
-      this.editor.newlineAndIndent();
-    }
-    this.enterProcessedForTest();
-  }
-
-  private async appendCommand(text: string, useCommandLineAPI: boolean): Promise<void> {
-    this.setText('');
+  private appendCommand(text: string, useCommandLineAPI: boolean): void {
     const currentExecutionContext = UI.Context.Context.instance().flavor(SDK.RuntimeModel.ExecutionContext);
     if (currentExecutionContext) {
       const executionContext = currentExecutionContext;
@@ -333,10 +286,19 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   private enterProcessedForTest(): void {
   }
 
-  private historyCompletions(prefix: string, force?: boolean): UI.SuggestBox.Suggestions {
+  private editorUpdate(update: CodeMirror.ViewUpdate): void {
+    if (update.docChanged ||
+        CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {
+      this.onTextChanged();
+    } else if (update.selectionSet) {
+      this.updatePromptIcon();
+    }
+  }
+
+  private historyCompletions(context: CodeMirror.CompletionContext): CodeMirror.CompletionResult|null {
     const text = this.text();
-    if (!this.addCompletionsFromHistory || !this.isCaretAtEndOfPrompt() || (!text && !force)) {
-      return [];
+    if (!this.addCompletionsFromHistory || !this.isCaretAtEndOfPrompt() || (!text.length && !context.explicit)) {
+      return null;
     }
     const result = [];
     const set = new Set<string>();
@@ -350,30 +312,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
         continue;
       }
       set.add(item);
-      result.push(
-          {text: item.substring(text.length - prefix.length), iconType: 'smallicon-text-prompt', isSecondary: true});
+      result.push({label: item, type: 'secondary', boost: -1e5});
     }
-    return result as UI.SuggestBox.Suggestions;
+    return result.length ? {
+      from: 0,
+      to: text.length,
+      options: result,
+    } :
+                           null;
   }
 
   focus(): void {
-    if (this.editor) {
-      this.editor.widget().focus();
-    } else {
-      this.element.focus();
-    }
-  }
-
-  private async wordsWithQuery(
-      queryRange: TextUtils.TextRange.TextRange, substituteRange: TextUtils.TextRange.TextRange,
-      force?: boolean): Promise<UI.SuggestBox.Suggestions> {
-    if (!this.editor || !this.defaultAutocompleteConfig || !this.defaultAutocompleteConfig.suggestionsCallback) {
-      return [];
-    }
-    const query = this.editor.text(queryRange);
-    const words = await this.defaultAutocompleteConfig.suggestionsCallback(queryRange, substituteRange, force);
-    const historyWords = this.historyCompletions(query, force);
-    return words ? words.concat(historyWords) : historyWords;
+    this.editor.focus();
   }
 
   private editorSetForTest(): void {

package/front_end/panels/console/ConsoleView.ts

@@ -1218,7 +1218,7 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
   }
 
   private clearPromptBackwards(): void {
-    this.prompt.setText('');
+    this.prompt.clear();
   }
 
   private promptKeyDown(event: Event): void {

package/front_end/panels/console/consoleView.css

@@ -345,13 +345,13 @@
 }
 
 #console-messages .link {
+  cursor: pointer;
   text-decoration: underline;
 }
 
 #console-messages .link,
 #console-messages .devtools-link {
   color: var(--color-text-secondary);
-  cursor: pointer;
   word-break: break-all;
 }
 

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -338,7 +338,7 @@
   background: none;
   border: none;
   -webkit-mask-image: var(--image-file-ic_show_node_16x16);
-  background-color: var(--color-background-elevation-1);
+  background-color: var(--color-text-secondary);
   width: 16px;
   height: 16px;
   display: none;
@@ -348,7 +348,7 @@
 
 .show-element:focus,
 .show-element:hover {
-  background-color: var(--color-syntax-1);
+  background-color: var(--color-primary);
 }
 
 .nodeId-column:focus-within .show-element,

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -6,87 +6,113 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as ElementsComponents from './components/components.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
 export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
 
-export function sdkNodeToAXTreeNode(sdkNode: SDK.AccessibilityModel.AccessibilityNode): AXTreeNode {
-  const treeNodeData = sdkNode;
-  const role = sdkNode.role()?.value;
-
-  if (role === 'Iframe') {
-    return {
-      treeNodeData,
-      children: async(): Promise<AXTreeNode[]> => {
-        const domNode = await sdkNode.deferredDOMNode()?.resolvePromise();
-        if (!domNode) {
-          throw new Error('Could not find corresponding DOMNode');
-        }
-        const frameId = domNode.frameOwnerFrameId();
+function isLeafNode(node: SDK.AccessibilityModel.AccessibilityNode): boolean {
+  return node.numChildren() === 0 && node.role()?.value !== 'Iframe';
+}
 
-        let document = domNode.contentDocument();
-        if (!document && frameId) {
-          const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
-          if (!frame) {
-            return [];
-          }
-          document = await frame.resourceTreeModel().domModel().requestDocument();
-        }
-        if (!document) {
-          return [];
-        }
+function getModel(frameId: Protocol.Page.FrameId): SDK.AccessibilityModel.AccessibilityModel {
+  const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameId);
+  const model = frame?.resourceTreeModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
+  if (!model) {
+    throw Error('Could not instantiate model for frameId');
+  }
+  return model;
+}
 
-        const axmodel = document.domModel().target().model(SDK.AccessibilityModel.AccessibilityModel);
-        if (!axmodel) {
-          throw new Error('Could not find AccessibilityModel for child document');
-        }
-        // Check if we have requested the node before:
-        let localRoot = axmodel.axNodeForDOMNode(document);
-        if (!localRoot && frameId) {
-          // Request the root node of the iframe document:
-          localRoot = await axmodel.requestRootNode(1, frameId) || null;
-        }
-        if (!localRoot) {
-          throw new Error('Could not find root node');
-        }
-        return [sdkNodeToAXTreeNode(localRoot)];
-      },
-      id: sdkNode.id(),
-    };
+export async function getRootNode(frameId: Protocol.Page.FrameId): Promise<SDK.AccessibilityModel.AccessibilityNode> {
+  const model = getModel(frameId);
+  const root = await model.requestRootNode(frameId);
+  if (!root) {
+    throw Error('No accessibility root for frame');
   }
+  return root;
+}
 
-  if (!sdkNode.numChildren()) {
-    return {
-      treeNodeData,
-      id: sdkNode.id(),
-    };
+function getFrameIdForNodeOrDocument(node: SDK.DOMModel.DOMNode): Protocol.Page.FrameId {
+  let frameId;
+  if (node instanceof SDK.DOMModel.DOMDocument) {
+    frameId = node.body?.frameId();
+  } else {
+    frameId = node.frameId();
+  }
+  if (!frameId) {
+    throw Error('No frameId for DOM node');
   }
+  return frameId;
+}
 
-  return {
-    treeNodeData,
-    children: async(): Promise<AXTreeNode[]> => {
-      if (sdkNode.numChildren() === sdkNode.children().length) {
-        return sdkNode.children().map(child => sdkNodeToAXTreeNode(child));
-      }
-      // numChildren returns the number of children that this node has, whereas node.children()
-      // returns only children that have been loaded. If these two don't match, that means that
-      // there are backend children that need to be loaded into the model, so request them now.
-      await sdkNode.accessibilityModel().requestAXChildren(sdkNode.id(), sdkNode.getFrameId() || undefined);
+export async function getNodeAndAncestorsFromDOMNode(domNode: SDK.DOMModel.DOMNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  let frameId = getFrameIdForNodeOrDocument(domNode);
+  const model = getModel(frameId);
+  const result = await model.requestAndLoadSubTreeToNode(domNode);
+  if (!result) {
+    throw Error('Could not retrieve accessibility node for inspected DOM node');
+  }
 
-      if (sdkNode.numChildren() !== sdkNode.children().length) {
-        throw new Error('Once loaded, number of children and length of children must match.');
-      }
+  const topFrameId = SDK.FrameManager.FrameManager.instance().getTopFrame()?.id;
+  if (!topFrameId) {
+    return result;
+  }
+  while (frameId !== topFrameId) {
+    const node = await SDK.FrameManager.FrameManager.instance().getFrame(frameId)?.getOwnerDOMNodeOrDocument();
+    if (!node) {
+      break;
+    }
+    frameId = getFrameIdForNodeOrDocument(node);
+    const model = getModel(frameId);
+    const ancestors = await model.requestAndLoadSubTreeToNode(node);
+    result.push(...ancestors || []);
+  }
+  return result;
+}
 
-      const treeNodeChildren: AXTreeNode[] = [];
+async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
+    Promise<SDK.AccessibilityModel.AccessibilityNode[]> {
+  if (node.role()?.value === 'Iframe') {
+    const domNode = await node.deferredDOMNode()?.resolvePromise();
+    if (!domNode) {
+      throw new Error('Could not find corresponding DOMNode');
+    }
+    const frameId = domNode.frameOwnerFrameId();
+    if (!frameId) {
+      throw Error('No owner frameId on iframe node');
+    }
+    const localRoot = await getRootNode(frameId);
+    return [localRoot];
+  }
+  if (node.hasUnloadedChildren()) {
+    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
+    if (node.numChildren() !== node.children().length) {
+      throw new Error('Once loaded, number of children and length of children must match.');
+    }
+  }
+  return node.children();
+}
 
-      for (const child of sdkNode.children()) {
-        treeNodeChildren.push(sdkNodeToAXTreeNode(child));
-      }
+export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {
+  const treeNodeData = sdkNode;
+  if (isLeafNode(sdkNode)) {
+    return [{
+      treeNodeData,
+      id: getNodeId(sdkNode),
+    }];
+  }
 
-      return treeNodeChildren;
+  return [{
+    treeNodeData,
+    children: async(): Promise<AXTreeNode[]> => {
+      const childNodes = await getChildren(sdkNode);
+      const childTreeNodes = await Promise.all(childNodes.map(childNode => sdkNodeToAXTreeNodes(childNode)));
+      return childTreeNodes.flat(1);
     },
-    id: sdkNode.id(),
-  };
+    id: getNodeId(sdkNode),
+  }];
 }
 
 type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
@@ -96,6 +122,11 @@ export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateRes
   const sdkNode = node.treeNodeData;
   const name = sdkNode.name()?.value || '';
   const role = sdkNode.role()?.value || '';
+  const properties = sdkNode.properties() || [];
   const ignored = sdkNode.ignored();
-  return LitHtml.html`<${tag} .data=${{name, role, ignored} as Data}></${tag}>`;
+  return LitHtml.html`<${tag} .data=${{name, role, ignored, properties} as Data}></${tag}>`;
+}
+
+export function getNodeId(node: SDK.AccessibilityModel.AccessibilityNode): string {
+  return node.getFrameId() + '#' + node.id();
 }