Encapsulate accessibility tree node styling using components

This CL introduces `AccessibilityTreeNode` components for nodes in the
accessibility tree. It also moves AccessibilityTreeUtils.ts out of
`components/` since it isn't a component.


Bug: 1226486
Change-Id: I05c2e6e2bf6e1794efaf5c5c99a0bd21678eae79
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3015735
Commit-Queue: Johan Bay <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Reviewed-by: Changhao Han <[email protected]>

Author: johanbay

config/gni/devtools_grd_files.gni

@@ -823,6 +823,7 @@ grd_files_debug_sources = [
   "front_end/panels/css_overview/CSSOverviewUnusedDeclarations.js",
   "front_end/panels/developer_resources/DeveloperResourcesListView.js",
   "front_end/panels/developer_resources/DeveloperResourcesView.js",
+  "front_end/panels/elements/AccessibilityTreeUtils.js",
   "front_end/panels/elements/AccessibilityTreeView.js",
   "front_end/panels/elements/ClassesPaneWidget.js",
   "front_end/panels/elements/ColorSwatchPopoverIcon.js",
@@ -850,7 +851,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/StylePropertyHighlighter.js",
   "front_end/panels/elements/StylePropertyTreeElement.js",
   "front_end/panels/elements/StylesSidebarPane.js",
-  "front_end/panels/elements/components/AccessibilityTreeUtils.js",
+  "front_end/panels/elements/components/AccessibilityTreeNode.js",
   "front_end/panels/elements/components/AdornerManager.js",
   "front_end/panels/elements/components/AdornerSettingsPane.js",
   "front_end/panels/elements/components/CSSPropertyIconResolver.js",
@@ -866,6 +867,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/components/NodeText.js",
   "front_end/panels/elements/components/QueryContainer.js",
   "front_end/panels/elements/components/StylePropertyEditor.js",
+  "front_end/panels/elements/components/accessibilityTreeNode.css.js",
   "front_end/panels/elements/components/adornerSettingsPane.css.js",
   "front_end/panels/elements/components/computedStyleProperty.css.js",
   "front_end/panels/elements/components/computedStyleTrace.css.js",

front_end/core/i18n/locales/en-US.json

@@ -3842,7 +3842,7 @@
   "panels/elements/ColorSwatchPopoverIcon.ts | openShadowEditor": {
     "message": "Open shadow editor"
   },
-  "panels/elements/components/AccessibilityTreeUtils.ts | ignored": {
+  "panels/elements/components/AccessibilityTreeNode.ts | ignored": {
     "message": "Ignored"
   },
   "panels/elements/components/AdornerSettingsPane.ts | closeButton": {

front_end/core/i18n/locales/en-XL.json

@@ -3842,7 +3842,7 @@
   "panels/elements/ColorSwatchPopoverIcon.ts | openShadowEditor": {
     "message": "Ôṕêń ŝh́âd́ôẃ êd́ît́ôŕ"
   },
-  "panels/elements/components/AccessibilityTreeUtils.ts | ignored": {
+  "panels/elements/components/AccessibilityTreeNode.ts | ignored": {
     "message": "Îǵn̂ór̂éd̂"
   },
   "panels/elements/components/AdornerSettingsPane.ts | closeButton": {

front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -0,0 +1,64 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type * 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';
+
+export type AXTreeNodeData = SDK.AccessibilityModel.AccessibilityNode;
+export type AXTreeNode = TreeOutline.TreeOutlineUtils.TreeNode<AXTreeNodeData>;
+
+export function sdkNodeToAXTreeNode(sdkNode: SDK.AccessibilityModel.AccessibilityNode): AXTreeNode {
+  const treeNodeData = sdkNode;
+  if (!sdkNode.numChildren()) {
+    return {
+      treeNodeData,
+      id: sdkNode.id(),
+    };
+  }
+
+  return {
+    treeNodeData,
+    children: async(): Promise<AXTreeNode[]> => {
+      if (sdkNode.numChildren() === sdkNode.children().length) {
+        return Promise.resolve(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());
+
+      if (sdkNode.numChildren() !== sdkNode.children().length) {
+        throw new Error('Once loaded, number of children and length of children must match.');
+      }
+
+      const treeNodeChildren: AXTreeNode[] = [];
+
+      for (const child of sdkNode.children()) {
+        treeNodeChildren.push(sdkNodeToAXTreeNode(child));
+      }
+
+      return Promise.resolve(treeNodeChildren);
+    },
+    id: sdkNode.id(),
+  };
+}
+
+type Data = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNodeData;
+
+export function accessibilityNodeRenderer(node: AXTreeNode): LitHtml.TemplateResult {
+  const tag = ElementsComponents.AccessibilityTreeNode.AccessibilityTreeNode.litTagName;
+  const sdkNode = node.treeNodeData;
+  const name = sdkNode.name()?.value || '';
+  const role = sdkNode.role()?.value || '';
+  const ignored = sdkNode.ignored();
+  return LitHtml.html`<${tag} .data=${{name, role, ignored} as Data}></${tag}>`;
+}
+
+export interface AccessibilityTreeNodeData {
+  ignored: boolean;
+  name: string;
+  role: string;
+}

front_end/panels/elements/AccessibilityTreeView.ts

@@ -6,18 +6,17 @@ import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
 import type * as LitHtml from '../../ui/lit-html/lit-html.js';
 
-import * as ElementsComponents from './components/components.js';
-
 export class AccessibilityTreeView extends UI.Widget.VBox {
   private readonly accessibilityTreeComponent =
-      new TreeOutline.TreeOutline.TreeOutline<SDK.AccessibilityModel.AccessibilityNode>();
-  private treeData: ElementsComponents.AccessibilityTreeUtils.AXTreeNode[] = [];
+      new TreeOutline.TreeOutline.TreeOutline<AccessibilityTreeUtils.AXTreeNodeData>();
+  private treeData: AccessibilityTreeUtils.AXTreeNode[] = [];
   private readonly toggleButton: HTMLButtonElement;
   private accessibilityModel: SDK.AccessibilityModel.AccessibilityModel|null = null;
   private rootAXNode: SDK.AccessibilityModel.AccessibilityNode|null = null;
-  private selectedTreeNode: ElementsComponents.AccessibilityTreeUtils.AXTreeNode|null = null;
+  private selectedTreeNode: AccessibilityTreeUtils.AXTreeNode|null = null;
   private inspectedDOMNode: SDK.DOMModel.DOMNode|null = null;
 
   constructor(toggleButton: HTMLButtonElement) {
@@ -32,7 +31,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     // on node selection, update the currently inspected node and reveal in the
     // DOM tree.
     this.accessibilityTreeComponent.addEventListener('itemselected', (event: Event) => {
-      const evt = event as TreeOutline.TreeOutline.ItemSelectedEvent<SDK.AccessibilityModel.AccessibilityNode>;
+      const evt = event as TreeOutline.TreeOutline.ItemSelectedEvent<AccessibilityTreeUtils.AXTreeNodeData>;
       const axNode = evt.data.node.treeNodeData;
       if (!axNode.isDOMNode()) {
         return;
@@ -48,11 +47,11 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
       }
 
       // Highlight the node as well, for keyboard navigation.
-      evt.data.node.treeNodeData.highlightDOMNode();
+      axNode.highlightDOMNode();
     });
 
     this.accessibilityTreeComponent.addEventListener('itemmouseover', (event: Event) => {
-      const evt = event as TreeOutline.TreeOutline.ItemMouseOverEvent<SDK.AccessibilityModel.AccessibilityNode>;
+      const evt = event as TreeOutline.TreeOutline.ItemMouseOverEvent<AccessibilityTreeUtils.AXTreeNodeData>;
       evt.data.node.treeNodeData.highlightDOMNode();
     });
 
@@ -83,11 +82,10 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     }
 
     this.rootAXNode = root;
-    this.treeData = [ElementsComponents.AccessibilityTreeUtils.sdkNodeToAXTreeNode(this.rootAXNode)];
+    this.treeData = [AccessibilityTreeUtils.sdkNodeToAXTreeNode(this.rootAXNode)];
 
     this.accessibilityTreeComponent.data = {
-      defaultRenderer: (node): LitHtml.TemplateResult =>
-          ElementsComponents.AccessibilityTreeUtils.accessibilityNodeRenderer(node),
+      defaultRenderer: (node): LitHtml.TemplateResult => AccessibilityTreeUtils.accessibilityNodeRenderer(node),
       tree: this.treeData,
     };
 
@@ -122,8 +120,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
     }
 
     this.accessibilityTreeComponent.data = {
-      defaultRenderer: (node): LitHtml.TemplateResult =>
-          ElementsComponents.AccessibilityTreeUtils.accessibilityNodeRenderer(node),
+      defaultRenderer: (node): LitHtml.TemplateResult => AccessibilityTreeUtils.accessibilityNodeRenderer(node),
       tree: this.treeData,
     };
 
@@ -138,7 +135,7 @@ export class AccessibilityTreeView extends UI.Widget.VBox {
       return;
     }
 
-    this.selectedTreeNode = ElementsComponents.AccessibilityTreeUtils.sdkNodeToAXTreeNode(inspectedAXNode);
+    this.selectedTreeNode = AccessibilityTreeUtils.sdkNodeToAXTreeNode(inspectedAXNode);
     this.accessibilityTreeComponent.expandToAndSelectTreeNode(this.selectedTreeNode);
   }
 

front_end/panels/elements/BUILD.gn

@@ -9,6 +9,7 @@ import("../visibility.gni")
 
 devtools_module("elements") {
   sources = [
+    "AccessibilityTreeUtils.ts",
     "AccessibilityTreeView.ts",
     "ClassesPaneWidget.ts",
     "ColorSwatchPopoverIcon.ts",

front_end/panels/elements/ElementsPanel.ts

@@ -318,8 +318,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       this._accessibilityTreeView.setAccessibilityModel(
           domModel.target().model(SDK.AccessibilityModel.AccessibilityModel));
     }
-    let treeOutline: ElementsTreeOutline|(ElementsTreeOutline | null) =
-        parentModel ? ElementsTreeOutline.forDOMModel(parentModel) : null;
+    let treeOutline: ElementsTreeOutline|null = parentModel ? ElementsTreeOutline.forDOMModel(parentModel) : null;
     if (!treeOutline) {
       treeOutline = new ElementsTreeOutline(true, true);
       treeOutline.setWordWrap(Common.Settings.Settings.instance().moduleSetting('domWordWrap').get());

front_end/panels/elements/components/AccessibilityTreeNode.ts

@@ -0,0 +1,87 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
+
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import accessibilityTreeNodeStyles from './accessibilityTreeNode.css.js';
+
+
+const UIStrings = {
+  /**
+  *@description Ignored node element text content in Accessibility Tree View of the Elements panel
+  */
+  ignored: 'Ignored',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/components/AccessibilityTreeNode.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+// TODO(jobay) move this to Platform.StringUtilities if still needed.
+// This function is a variant of setTextContentTruncatedIfNeeded found in DOMExtension.
+function truncateTextIfNeeded(text: string): string {
+  const maxTextContentLength = 10000;
+
+  if (text.length > maxTextContentLength) {
+    return Platform.StringUtilities.trimMiddle(text, maxTextContentLength);
+  }
+  return text;
+}
+
+
+export interface AccessibilityTreeNodeData {
+  ignored: boolean;
+  name: string;
+  role: string;
+}
+
+export class AccessibilityTreeNode extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-accessibility-tree-node`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  private ignored = true;
+  private name = '';
+  private role = '';
+
+  set data(data: AccessibilityTreeNodeData) {
+    this.ignored = data.ignored;
+    this.name = data.name;
+    this.role = data.role;
+    this.render();
+  }
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [accessibilityTreeNodeStyles];
+  }
+
+  private async render(): Promise<void> {
+    await Coordinator.RenderCoordinator.RenderCoordinator.instance().write('Accessibility node render', () => {
+      // clang-format off
+      LitHtml.render(LitHtml.html`
+      ${this.ignored?
+          LitHtml.html`<span class='monospace ignored-node'>${i18nString(UIStrings.ignored)}</span>`:
+          LitHtml.html`
+             <span class='monospace'>${truncateTextIfNeeded(this.role)}</span>
+             <span class='separator'>\xA0</span>
+             <span class='ax-readable-string'>"${this.name}"</span>
+          `}
+     `, this.shadow, {
+        host: this,
+      });
+      // clang-format on
+    });
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-accessibility-tree-node', AccessibilityTreeNode);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-accessibility-tree-node': AccessibilityTreeNode;
+  }
+}