@yuebai008/cli/dist/cli-server/client/front_end/panels/accessibility/AXBreadcrumbsPane.js

Command line interface for rapid qg-minigame development

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 Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as Feedback from"../../ui/components/panel_feedback/panel_feedback.js";import*as UI from"../../ui/legacy/legacy.js";import axBreadcrumbsStyles from"./axBreadcrumbs.css.js";import{AccessibilitySubPane}from"./AccessibilitySubPane.js";const UIStrings={accessibilityTree:"Accessibility Tree",scrollIntoView:"Scroll into view",ignored:"Ignored",fullTreeExperimentName:"Enable full-page accessibility tree",fullTreeExperimentDescription:"The accessibility tree moved to the top right corner of the DOM tree.",reloadRequired:"Reload required before the change takes effect."},str_=i18n.i18n.registerUIStrings("panels/accessibility/AXBreadcrumbsPane.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class AXBreadcrumbsPane extends AccessibilitySubPane{axSidebarView;preselectedBreadcrumb;inspectedNodeBreadcrumb;collapsingBreadcrumbId;hoveredBreadcrumb;rootElement;#e=!1;constructor(e){super(i18nString(UIStrings.accessibilityTree)),this.element.classList.add("ax-subpane"),this.element.tabIndex=-1,this.axSidebarView=e,this.preselectedBreadcrumb=null,this.inspectedNodeBreadcrumb=null,this.collapsingBreadcrumbId=-1,this.rootElement=this.element.createChild("div","ax-breadcrumbs"),this.hoveredBreadcrumb=null;const t=new Feedback.PreviewToggle.PreviewToggle,r=i18nString(UIStrings.fullTreeExperimentName),n=Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE,s=e=>{Host.userMetrics.experimentChanged(n,e),UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(i18nString(UIStrings.reloadRequired))};if(Root.Runtime.experiments.isEnabled(n)){this.#e=!0;const e="https://g.co/devtools/a11y-tree-feedback";return t.data={name:r,helperText:i18nString(UIStrings.fullTreeExperimentDescription),feedbackURL:e,experiment:n,onChangeCallback:s},void this.element.appendChild(t)}t.data={name:r,helperText:null,feedbackURL:null,experiment:n,onChangeCallback:s},this.element.prepend(t),UI.ARIAUtils.markAsTree(this.rootElement),this.rootElement.addEventListener("keydown",this.onKeyDown.bind(this),!0),this.rootElement.addEventListener("mousemove",this.onMouseMove.bind(this),!1),this.rootElement.addEventListener("mouseleave",this.onMouseLeave.bind(this),!1),this.rootElement.addEventListener("click",this.onClick.bind(this),!1),this.rootElement.addEventListener("contextmenu",this.contextMenuEventFired.bind(this),!1),this.rootElement.addEventListener("focusout",this.onFocusOut.bind(this),!1)}focus(){this.inspectedNodeBreadcrumb?this.inspectedNodeBreadcrumb.nodeElement().focus():this.element.focus()}setAXNode(e){if(this.#e)return;const t=this.element.hasFocus();if(super.setAXNode(e),this.rootElement.removeChildren(),!e)return;const r=[];let n=e;for(;n;)r.push(n),n=n.parentNode();r.reverse();let s=0,i=null;for(n of(this.inspectedNodeBreadcrumb=null,r)){if(n!==e&&n.ignored()&&n.parentNode())continue;const t=new AXBreadcrumb(n,s,n===e);i?i.appendChild(t):this.rootElement.appendChild(t.element()),i=t,s++,this.inspectedNodeBreadcrumb=t}function d(e,t,r){if(t.ignored())return void t.children().map((t=>d(e,t,r)));const n=new AXBreadcrumb(t,r,!1);e.appendChild(n);for(const e of t.children())d(n,e,r+1)}if(this.inspectedNodeBreadcrumb&&this.inspectedNodeBreadcrumb.setPreselected(!0,t),this.setPreselectedBreadcrumb(this.inspectedNodeBreadcrumb),this.inspectedNodeBreadcrumb&&!e.ignored())for(const t of e.children())d(this.inspectedNodeBreadcrumb,t,s),t.backendDOMNodeId()===this.collapsingBreadcrumbId&&this.setPreselectedBreadcrumb(this.inspectedNodeBreadcrumb.lastChild());this.collapsingBreadcrumbId=-1}willHide(){this.setPreselectedBreadcrumb(null)}onKeyDown(e){const t=this.preselectedBreadcrumb;if(!t)return;const r=e;if(!r.composedPath().some((e=>e===t.element())))return;if(r.shiftKey||r.metaKey||r.ctrlKey)return;let n=!1;"ArrowUp"!==r.key||r.altKey?"ArrowDown"!==r.key||r.altKey?"ArrowLeft"!==r.key||r.altKey?("Enter"===r.key||"ArrowRight"===r.key&&!r.altKey&&t.axNode().hasOnlyUnloadedChildren())&&(n=this.inspectDOMNode(t.axNode())):t.hasExpandedChildren()?this.collapseBreadcrumb(t):n=this.preselectParent():n=this.preselectNext():n=this.preselectPrevious(),n&&r.consume(!0)}preselectPrevious(){if(!this.preselectedBreadcrumb)return!1;const e=this.preselectedBreadcrumb.previousBreadcrumb();return!!e&&(this.setPreselectedBreadcrumb(e),!0)}preselectNext(){if(!this.preselectedBreadcrumb)return!1;const e=this.preselectedBreadcrumb.nextBreadcrumb();return!!e&&(this.setPreselectedBreadcrumb(e),!0)}preselectParent(){if(!this.preselectedBreadcrumb)return!1;const e=this.preselectedBreadcrumb.parentBreadcrumb();return!!e&&(this.setPreselectedBreadcrumb(e),!0)}setPreselectedBreadcrumb(e){if(e===this.preselectedBreadcrumb)return;const t=this.element.hasFocus();this.preselectedBreadcrumb&&this.preselectedBreadcrumb.setPreselected(!1,t),this.preselectedBreadcrumb=e||this.inspectedNodeBreadcrumb,this.preselectedBreadcrumb&&this.preselectedBreadcrumb.setPreselected(!0,t),!e&&t&&SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}collapseBreadcrumb(e){if(!e.parentBreadcrumb())return;const t=e.axNode().backendDOMNodeId();null!==t&&(this.collapsingBreadcrumbId=t);const r=e.parentBreadcrumb();r&&this.inspectDOMNode(r.axNode())}onMouseLeave(e){this.setHoveredBreadcrumb(null)}onMouseMove(e){const t=e.target;if(!t)return;const r=t.enclosingNodeOrSelfWithClass("ax-breadcrumb");if(!r)return void this.setHoveredBreadcrumb(null);const n=elementsToAXBreadcrumb.get(r);n&&n.isDOMNode()&&this.setHoveredBreadcrumb(n)}onFocusOut(e){this.preselectedBreadcrumb&&e.target===this.preselectedBreadcrumb.nodeElement()&&this.setPreselectedBreadcrumb(null)}onClick(e){const t=e.target;if(!t)return;const r=t.enclosingNodeOrSelfWithClass("ax-breadcrumb");if(!r)return void this.setHoveredBreadcrumb(null);const n=elementsToAXBreadcrumb.get(r);return n?n.inspected()?(this.collapseBreadcrumb(n),void n.nodeElement().focus()):void(n.isDOMNode()&&this.inspectDOMNode(n.axNode())):void 0}setHoveredBreadcrumb(e){if(e===this.hoveredBreadcrumb)return;this.hoveredBreadcrumb&&this.hoveredBreadcrumb.setHovered(!1);const t=this.node();e?e.setHovered(!0):t&&t.id&&t.domModel().overlayModel().nodeHighlightRequested({nodeId:t.id}),this.hoveredBreadcrumb=e}inspectDOMNode(e){if(!e.isDOMNode())return!1;const t=e.deferredDOMNode();return t&&t.resolve((e=>{this.axSidebarView.setNode(e,!0),Common.Revealer.reveal(e,!0)})),!0}contextMenuEventFired(e){const t=e.target;if(!t)return;const r=t.enclosingNodeOrSelfWithClass("ax-breadcrumb");if(!r)return;const n=elementsToAXBreadcrumb.get(r);if(!n)return;const s=n.axNode();if(!s.isDOMNode()||!s.deferredDOMNode())return;const i=new UI.ContextMenu.ContextMenu(e);i.viewSection().appendItem(i18nString(UIStrings.scrollIntoView),(()=>{const e=s.deferredDOMNode();e&&e.resolvePromise().then((e=>{e&&e.scrollIntoView()}))}));const d=s.deferredDOMNode();d&&i.appendApplicableItems(d),i.show()}wasShown(){super.wasShown(),this.registerCSSFiles([axBreadcrumbsStyles])}}const elementsToAXBreadcrumb=new WeakMap;export class AXBreadcrumb{axNodeInternal;elementInternal;nodeElementInternal;nodeWrapper;selectionElement;childrenGroupElement;children;hovered;preselectedInternal;parent;inspectedInternal;constructor(e,t,r){if(this.axNodeInternal=e,this.elementInternal=document.createElement("div"),this.elementInternal.classList.add("ax-breadcrumb"),elementsToAXBreadcrumb.set(this.elementInternal,this),this.nodeElementInternal=document.createElement("div"),this.nodeElementInternal.classList.add("ax-node"),UI.ARIAUtils.markAsTreeitem(this.nodeElementInternal),this.nodeElementInternal.tabIndex=-1,this.elementInternal.appendChild(this.nodeElementInternal),this.nodeWrapper=document.createElement("div"),this.nodeWrapper.classList.add("wrapper"),this.nodeElementInternal.appendChild(this.nodeWrapper),this.selectionElement=document.createElement("div"),this.selectionElement.classList.add("selection"),this.selectionElement.classList.add("fill"),this.nodeElementInternal.appendChild(this.selectionElement),this.childrenGroupElement=document.createElement("div"),this.childrenGroupElement.classList.add("children"),UI.ARIAUtils.markAsGroup(this.childrenGroupElement),this.elementInternal.appendChild(this.childrenGroupElement),this.children=[],this.hovered=!1,this.preselectedInternal=!1,this.parent=null,this.inspectedInternal=r,this.nodeElementInternal.classList.toggle("inspected",r),this.nodeElementInternal.style.paddingLeft=16*t+4+"px",this.axNodeInternal.ignored())this.appendIgnoredNodeElement();else{this.appendRoleElement(this.axNodeInternal.role());const e=this.axNodeInternal.name();e&&e.value&&(this.nodeWrapper.createChild("span","separator").textContent=" ",this.appendNameElement(e.value))}!this.axNodeInternal.ignored()&&this.axNodeInternal.hasOnlyUnloadedChildren()&&(this.nodeElementInternal.classList.add("children-unloaded"),UI.ARIAUtils.setExpanded(this.nodeElementInternal,!1)),this.axNodeInternal.isDOMNode()||this.nodeElementInternal.classList.add("no-dom-node")}element(){return this.elementInternal}nodeElement(){return this.nodeElementInternal}appendChild(e){this.children.push(e),e.setParent(this),this.nodeElementInternal.classList.add("parent"),UI.ARIAUtils.setExpanded(this.nodeElementInternal,!0),this.childrenGroupElement.appendChild(e.element())}hasExpandedChildren(){return this.children.length}setParent(e){this.parent=e}preselected(){return this.preselectedInternal}setPreselected(e,t){this.preselectedInternal!==e&&(this.preselectedInternal=e,this.nodeElementInternal.classList.toggle("preselected",e),this.nodeElementInternal.tabIndex=e?0:-1,this.preselectedInternal&&(t&&this.nodeElementInternal.focus(),this.inspectedInternal?SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight():this.axNodeInternal.highlightDOMNode()))}setHovered(e){this.hovered!==e&&(this.hovered=e,this.nodeElementInternal.classList.toggle("hovered",e),this.hovered&&(this.nodeElementInternal.classList.toggle("hovered",!0),this.axNodeInternal.highlightDOMNode()))}axNode(){return this.axNodeInternal}inspected(){return this.inspectedInternal}isDOMNode(){return this.axNodeInternal.isDOMNode()}nextBreadcrumb(){if(this.children.length)return this.children[0];const e=this.element().nextSibling;return e&&elementsToAXBreadcrumb.get(e)||null}previousBreadcrumb(){const e=this.element().previousSibling;return e?elementsToAXBreadcrumb.get(e)||null:this.parent}parentBreadcrumb(){return this.parent}lastChild(){return this.children[this.children.length-1]}appendNameElement(e){const t=document.createElement("span");t.textContent='"'+e+'"',t.classList.add("ax-readable-string"),this.nodeWrapper.appendChild(t)}appendRoleElement(e){if(!e)return;const t=document.createElement("span");t.classList.add("monospace"),t.classList.add(RoleStyles[e.type]),t.setTextContentTruncatedIfNeeded(e.value||""),this.nodeWrapper.appendChild(t)}appendIgnoredNodeElement(){const e=document.createElement("span");e.classList.add("monospace"),e.textContent=i18nString(UIStrings.ignored),e.classList.add("ax-breadcrumbs-ignored-node"),this.nodeWrapper.appendChild(e)}}export const RoleStyles={internalRole:"ax-internal-role",role:"ax-role"};