@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
1 lines • 3.38 kB
JavaScript
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 accessibilityTreeViewStyles from"./accessibilityTreeView.css.js";import{ElementsPanel}from"./ElementsPanel.js";export class AccessibilityTreeView extends UI.Widget.VBox{accessibilityTreeComponent;toggleButton;inspectedDOMNode=null;root=null;constructor(e,t){super(),this.toggleButton=e,this.accessibilityTreeComponent=t;const i=this.contentElement.createChild("div");i.classList.add("accessibility-tree-view-container"),i.appendChild(this.toggleButton),i.appendChild(this.accessibilityTreeComponent),SDK.TargetManager.TargetManager.instance().observeModels(SDK.AccessibilityModel.AccessibilityModel,this,{scoped:!0}),this.accessibilityTreeComponent.addEventListener("itemselected",(e=>{const t=e.data.node.treeNodeData;if(!t.isDOMNode())return;const i=t.deferredDOMNode();i&&i.resolve((e=>{e&&(this.inspectedDOMNode=e,ElementsPanel.instance().revealAndSelectNode(e,!0,!1))}))})),this.accessibilityTreeComponent.addEventListener("itemmouseover",(e=>{e.data.node.treeNodeData.highlightDOMNode()})),this.accessibilityTreeComponent.addEventListener("itemmouseout",(()=>{SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}))}async wasShown(){await this.refreshAccessibilityTree(),this.inspectedDOMNode&&await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode),this.registerCSSFiles([accessibilityTreeViewStyles])}async refreshAccessibilityTree(){if(!this.root){const e=SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;if(!e)throw Error("No top frame");if(this.root=await AccessibilityTreeUtils.getRootNode(e),!this.root)throw Error("No root")}await this.renderTree(),await this.accessibilityTreeComponent.expandRecursively(1)}async renderTree(){if(!this.root)return;const e=await AccessibilityTreeUtils.sdkNodeToAXTreeNodes(this.root);this.accessibilityTreeComponent.data={defaultRenderer:AccessibilityTreeUtils.accessibilityNodeRenderer,tree:e,filter:e=>e.ignored()||"generic"===e.role()?.value&&!e.name()?.value?"FLATTEN":"SHOW"}}async loadSubTreeIntoAccessibilityModel(e){const t=await AccessibilityTreeUtils.getNodeAndAncestorsFromDOMNode(e),i=t.find((t=>t.backendDOMNodeId()===e.backendNodeId()));i&&(await this.accessibilityTreeComponent.expandNodeIds(t.map((e=>e.getFrameId()+"#"+e.id()))),await this.accessibilityTreeComponent.focusNodeId(AccessibilityTreeUtils.getNodeId(i)))}async revealAndSelectNode(e){e!==this.inspectedDOMNode&&(this.inspectedDOMNode=e,this.isShowing()&&await this.loadSubTreeIntoAccessibilityModel(e))}async selectedNodeChanged(e){this.isShowing()||e===this.inspectedDOMNode||(!e.ownerDocument||"HTML"!==e.nodeName()&&"BODY"!==e.nodeName()?this.inspectedDOMNode=e:this.inspectedDOMNode=e.ownerDocument)}treeUpdated({data:e}){if(!e.root)return void this.renderTree();const t=SDK.FrameManager.FrameManager.instance().getOutermostFrame()?.id;e.root?.getFrameId()===t?(this.root=e.root,this.accessibilityTreeComponent.collapseAllNodes(),this.refreshAccessibilityTree()):this.renderTree()}modelAdded(e){e.addEventListener(SDK.AccessibilityModel.Events.TreeUpdated,this.treeUpdated,this)}modelRemoved(e){e.removeEventListener(SDK.AccessibilityModel.Events.TreeUpdated,this.treeUpdated,this)}}