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

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as i18n from"../../core/i18n/i18n.js";import*as SDK from"../../core/sdk/sdk.js";import*as UI from"../../ui/legacy/legacy.js";import accessibilityNodeStyles from"./accessibilityNode.css.js";import{AXAttributes,AXNativeSourceTypes,AXSourceTypes}from"./AccessibilityStrings.js";import{AccessibilitySubPane}from"./AccessibilitySubPane.js";const UIStrings={computedProperties:"Computed Properties",noAccessibilityNode:"No accessibility node",accessibilityNodeNotExposed:"Accessibility node not exposed",invalidSource:"Invalid source.",notSpecified:"Not specified",noNodeWithThisId:"No node with this ID.",elementIsHiddenBy:"Element is hidden by active modal dialog: ",ancestorChildrenAreAll:"Ancestor's children are all presentational: ",elementIsPlaceholder:"Element is {PH1}.",placeholderIsPlaceholderOnAncestor:"{PH1} is {PH2} on ancestor: ",elementHasEmptyAltText:"Element has empty alt text.",noTextContent:"No text content.",elementIsInert:"Element is `inert`.",elementIsInAnInertSubTree:"Element is in an `inert` subtree from ",elementsInheritsPresentational:"Element inherits presentational role from ",partOfLabelElement:"Part of label element: ",labelFor:"Label for ",elementIsNotRendered:"Element is not rendered.",elementIsNotVisible:"Element is not visible.",elementHasPlaceholder:"Element has {PH1}.",elementIsPresentational:"Element is presentational.",elementNotInteresting:"Element not interesting for accessibility."},str_=i18n.i18n.registerUIStrings("panels/accessibility/AccessibilityNodeView.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class AXNodeSubPane extends AccessibilitySubPane{axNode;noNodeInfo;ignoredInfo;treeOutline;ignoredReasonsTree;constructor(){super(i18nString(UIStrings.computedProperties)),this.axNode=null,this.contentElement.classList.add("ax-subpane"),this.noNodeInfo=this.createInfo(i18nString(UIStrings.noAccessibilityNode)),this.ignoredInfo=this.createInfo(i18nString(UIStrings.accessibilityNodeNotExposed),"ax-ignored-info hidden"),this.treeOutline=this.createTreeOutline(),this.ignoredReasonsTree=this.createTreeOutline(),this.element.classList.add("accessibility-computed"),this.treeOutline.setFocusable(!0)}setAXNode(e){if(this.axNode===e)return;this.axNode=e;const t=this.treeOutline;t.removeChildren();const n=this.ignoredReasonsTree;if(n.removeChildren(),!e)return t.element.classList.add("hidden"),this.ignoredInfo.classList.add("hidden"),n.element.classList.add("hidden"),this.noNodeInfo.classList.remove("hidden"),void this.element.classList.add("ax-ignored-node-pane");if(e.ignored()){this.noNodeInfo.classList.add("hidden"),t.element.classList.add("hidden"),this.element.classList.add("ax-ignored-node-pane"),this.ignoredInfo.classList.remove("hidden"),n.element.classList.remove("hidden");const s=e.ignoredReasons();for(const t of s)i=t,n.appendChild(new AXNodeIgnoredReasonTreeElement(i,e));return void(n.firstChild()||n.element.classList.add("hidden"))}var i;function s(n){t.appendChild(new AXNodePropertyTreePropertyElement(n,e))}this.element.classList.remove("ax-ignored-node-pane"),this.ignoredInfo.classList.add("hidden"),n.element.classList.add("hidden"),this.noNodeInfo.classList.add("hidden"),t.element.classList.remove("hidden");for(const t of e.coreProperties())s(t);const r=e.role();if(r){s({name:SDK.AccessibilityModel.CoreAxPropertyName.Role,value:r})}for(const t of e.properties())s(t);const o=t.firstChild();o&&o.select(!0,!1)}setNode(e){super.setNode(e),this.axNode=null}wasShown(){super.wasShown(),this.registerCSSFiles([accessibilityNodeStyles])}}export class AXNodePropertyTreeElement extends UI.TreeOutline.TreeElement{axNode;constructor(e){super(""),this.axNode=e}static createSimpleValueElement(e,t){let n,i;e&&"valueUndefined"!==e&&"computedString"!==e?(n=document.createElement("span"),n.classList.add("monospace")):n=document.createElement("span");return i=e&&StringProperties.has(e)?'"'+t.replace(/\n/g,"↵")+'"':String(t),e&&e in TypeStyles&&n.classList.add(TypeStyles[e]),n.setTextContentTruncatedIfNeeded(i||""),UI.Tooltip.Tooltip.install(n,String(t)||""),n}static createExclamationMark(e){const t=UI.UIUtils.createIconLabel({iconName:"warning-filled",color:"var(--icon-warning)"});return UI.Tooltip.Tooltip.install(t,e),t}appendNameElement(e){const t=document.createElement("span");if(e in AXAttributes){const n=AXAttributes[e];t.textContent=n.name(),UI.Tooltip.Tooltip.install(t,n.description()),t.classList.add("ax-readable-name")}else t.textContent=e,t.classList.add("ax-name"),t.classList.add("monospace");this.listItemElement.appendChild(t)}appendValueElement(e){if("idref"===e.type||"node"===e.type||"idrefList"===e.type||"nodeList"===e.type)return void this.appendRelatedNodeListValueElement(e);if(e.sources){const t=e.sources;for(let e=0;e<t.length;e++){const n=t[e],i=new AXValueSourceTreeElement(n,this.axNode);this.appendChild(i)}this.expand()}const t=AXNodePropertyTreeElement.createSimpleValueElement(e.type,String(e.value));this.listItemElement.appendChild(t)}appendRelatedNode(e,t){const n=new SDK.DOMModel.DeferredDOMNode(this.axNode.accessibilityModel().target(),e.backendDOMNodeId),i=new AXRelatedNodeSourceTreeElement({deferredNode:n,idref:void 0},e);this.appendChild(i)}appendRelatedNodeInline(e){const t=new SDK.DOMModel.DeferredDOMNode(this.axNode.accessibilityModel().target(),e.backendDOMNodeId),n=new AXRelatedNodeElement({deferredNode:t,idref:void 0},e);this.listItemElement.appendChild(n.render())}appendRelatedNodeListValueElement(e){!e.relatedNodes||1!==e.relatedNodes.length||e.value?(e.relatedNodes&&e.relatedNodes.forEach(this.appendRelatedNode,this),e.relatedNodes&&e.relatedNodes.length<=3?this.expand():this.collapse()):this.appendRelatedNodeInline(e.relatedNodes[0])}}export const TypeStyles={attribute:"ax-value-string",boolean:"object-value-boolean",booleanOrUndefined:"object-value-boolean",computedString:"ax-readable-string",idref:"ax-value-string",idrefList:"ax-value-string",integer:"object-value-number",internalRole:"ax-internal-role",number:"ax-value-number",role:"ax-role",string:"ax-value-string",tristate:"object-value-boolean",valueUndefined:"ax-value-undefined"};export const StringProperties=new Set(["string","computedString","idrefList","idref"]);export class AXNodePropertyTreePropertyElement extends AXNodePropertyTreeElement{property;toggleOnClick;constructor(e,t){super(t),this.property=e,this.toggleOnClick=!0,this.listItemElement.classList.add("property")}onattach(){this.update()}update(){this.listItemElement.removeChildren(),this.appendNameElement(this.property.name),this.listItemElement.createChild("span","separator").textContent=": ",this.appendValueElement(this.property.value)}}export class AXValueSourceTreeElement extends AXNodePropertyTreeElement{source;constructor(e,t){super(t),this.source=e}onattach(){this.update()}appendRelatedNodeWithIdref(e,t){const n=new SDK.DOMModel.DeferredDOMNode(this.axNode.accessibilityModel().target(),e.backendDOMNodeId),i=new AXRelatedNodeSourceTreeElement({deferredNode:n,idref:t},e);this.appendChild(i)}appendIDRefValueElement(e){if(null===e.value)return;const t=e.relatedNodes||[];if(""===e.value){for(const e of t){const t=e.idref||"";this.appendRelatedNodeWithIdref(e,t)}return}const n=e.value.trim().split(/\s+/);for(const e of n){const i=t.find((t=>t.idref===e));i?this.appendRelatedNodeWithIdref(i,e):1===n.length?this.listItemElement.appendChild(new AXRelatedNodeElement({deferredNode:void 0,idref:e}).render()):this.appendChild(new AXRelatedNodeSourceTreeElement({deferredNode:void 0,idref:e}))}}appendRelatedNodeListValueElement(e){const t=e.relatedNodes,n=t?t.length:0;"idrefList"===e.type||"idref"===e.type?this.appendIDRefValueElement(e):super.appendRelatedNodeListValueElement(e),n<=3?this.expand():this.collapse()}appendSourceNameElement(e){const t=document.createElement("span"),n=e.type;switch(n){case"attribute":case"placeholder":case"relatedElement":if(e.nativeSource){const n=e.nativeSource;t.textContent=AXNativeSourceTypes[n].name(),UI.Tooltip.Tooltip.install(t,AXNativeSourceTypes[n].description()),t.classList.add("ax-readable-name");break}t.textContent=e.attribute||null,t.classList.add("ax-name"),t.classList.add("monospace");break;default:n in AXSourceTypes?(t.textContent=AXSourceTypes[n].name(),UI.Tooltip.Tooltip.install(t,AXSourceTypes[n].description()),t.classList.add("ax-readable-name")):(console.warn(n,"not in AXSourceTypes"),t.textContent=n)}this.listItemElement.appendChild(t)}update(){if(this.listItemElement.removeChildren(),this.source.invalid){const e=AXNodePropertyTreeElement.createExclamationMark(i18nString(UIStrings.invalidSource));this.listItemElement.appendChild(e),this.listItemElement.classList.add("ax-value-source-invalid")}else this.source.superseded&&this.listItemElement.classList.add("ax-value-source-unused");if(this.appendSourceNameElement(this.source),this.listItemElement.createChild("span","separator").textContent=": ",this.source.attributeValue)this.appendValueElement(this.source.attributeValue),UI.UIUtils.createTextChild(this.listItemElement," ");else if(this.source.nativeSourceValue)this.appendValueElement(this.source.nativeSourceValue),UI.UIUtils.createTextChild(this.listItemElement," "),this.source.value&&this.appendValueElement(this.source.value);else if(this.source.value)this.appendValueElement(this.source.value);else{const e=AXNodePropertyTreeElement.createSimpleValueElement("valueUndefined",i18nString(UIStrings.notSpecified));this.listItemElement.appendChild(e),this.listItemElement.classList.add("ax-value-source-unused")}this.source.value&&this.source.superseded&&this.listItemElement.classList.add("ax-value-source-superseded")}}export class AXRelatedNodeSourceTreeElement extends UI.TreeOutline.TreeElement{value;axRelatedNodeElement;constructor(e,t){super(""),this.value=t,this.axRelatedNodeElement=new AXRelatedNodeElement(e,t),this.selectable=!0}onattach(){this.listItemElement.appendChild(this.axRelatedNodeElement.render()),this.value&&this.value.text&&this.listItemElement.appendChild(AXNodePropertyTreeElement.createSimpleValueElement("computedString",this.value.text))}onenter(){return this.axRelatedNodeElement.revealNode(),!0}}export class AXRelatedNodeElement{deferredNode;idref;value;constructor(e,t){this.deferredNode=e.deferredNode,this.idref=e.idref,this.value=t}render(){const e=document.createElement("span");if(this.deferredNode){const t=document.createElement("span");e.appendChild(t),this.deferredNode.resolvePromise().then((e=>{Common.Linkifier.Linkifier.linkify(e,{tooltip:void 0,preventKeyboardFocus:!0}).then((e=>t.appendChild(e)))}))}else if(this.idref){e.classList.add("invalid");const t=AXNodePropertyTreeElement.createExclamationMark(i18nString(UIStrings.noNodeWithThisId));UI.UIUtils.createTextChild(t,this.idref),e.appendChild(t)}return e}revealNode(){this.deferredNode&&this.deferredNode.resolvePromise().then((e=>Common.Revealer.reveal(e)))}}export class AXNodeIgnoredReasonTreeElement extends AXNodePropertyTreeElement{property;toggleOnClick;reasonElement;constructor(e,t){super(t),this.property=e,this.axNode=t,this.toggleOnClick=!0,this.selectable=!1}static createReasonElement(e,t){let n=null;switch(e){case"activeModalDialog":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsHiddenBy,{});break;case"ancestorIsLeafNode":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.ancestorChildrenAreAll,{});break;case"ariaHiddenElement":{const e=document.createElement("span",{is:"source-code"}).textContent="aria-hidden";n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsPlaceholder,{PH1:e});break}case"ariaHiddenSubtree":{const e=document.createElement("span",{is:"source-code"}).textContent="aria-hidden",t=document.createElement("span",{is:"source-code"}).textContent="true";n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.placeholderIsPlaceholderOnAncestor,{PH1:e,PH2:t});break}case"emptyAlt":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementHasEmptyAltText,{});break;case"emptyText":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.noTextContent,{});break;case"inertElement":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsInert,{});break;case"inertSubtree":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsInAnInertSubTree,{});break;case"inheritsPresentation":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementsInheritsPresentational,{});break;case"labelContainer":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.partOfLabelElement,{});break;case"labelFor":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.labelFor,{});break;case"notRendered":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsNotRendered,{});break;case"notVisible":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsNotVisible,{});break;case"presentationalRole":{const e=t&&t.role()?.value||"",i=document.createElement("span",{is:"source-code"}).textContent="role="+e;n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementHasPlaceholder,{PH1:i});break}case"probablyPresentational":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementIsPresentational,{});break;case"uninteresting":n=i18n.i18n.getFormatLocalizedString(str_,UIStrings.elementNotInteresting,{})}return n&&n.classList.add("ax-reason"),n}onattach(){this.listItemElement.removeChildren(),this.reasonElement=AXNodeIgnoredReasonTreeElement.createReasonElement(this.property.name,this.axNode),this.reasonElement&&this.listItemElement.appendChild(this.reasonElement);const e=this.property.value;"idref"===e.type&&this.appendRelatedNodeListValueElement(e)}}