@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/ComputedStyleWidget.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 Platform from"../../core/platform/platform.js";import*as SDK from"../../core/sdk/sdk.js";import*as InlineEditor from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as Components from"../../ui/legacy/components/utils/utils.js";import*as UI from"../../ui/legacy/legacy.js";import*as ElementsComponents from"./components/components.js";import computedStyleSidebarPaneStyles from"./computedStyleSidebarPane.css.js";import{ComputedStyleModel}from"./ComputedStyleModel.js";import{ImagePreviewPopover}from"./ImagePreviewPopover.js";import{PlatformFontsWidget}from"./PlatformFontsWidget.js";import{categorizePropertyName,DefaultCategoryOrder}from"./PropertyNameCategories.js";import{StylePropertiesSection}from"./StylePropertiesSection.js";import{StylesSidebarPane,StylesSidebarPropertyRenderer}from"./StylesSidebarPane.js";import*as TreeOutline from"../../ui/components/tree_outline/tree_outline.js";import*as LitHtml from"../../ui/lit-html/lit-html.js";const UIStrings={filter:"Filter",filterComputedStyles:"Filter Computed Styles",showAll:"Show all",group:"Group",noMatchingProperty:"No matching property",navigateToSelectorSource:"Navigate to selector source",navigateToStyle:"Navigate to style"},str_=i18n.i18n.registerUIStrings("panels/elements/ComputedStyleWidget.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),propertyContentsCache=new Map;function renderPropertyContents(e,t,o){const r=t+":"+o,n=propertyContentsCache.get(r);if(n)return n;const i=new StylesSidebarPropertyRenderer(null,e,t,o);i.setColorHandler(processColor);const s=i.renderName();s.slot="name";const a=i.renderValue();return a.slot="value",propertyContentsCache.set(r,{name:s,value:a}),{name:s,value:a}}const createPropertyElement=(e,t,o,r,n,i,s)=>{const{name:a,value:l}=renderPropertyContents(e,t,o);return LitHtml.html`<${ElementsComponents.ComputedStyleProperty.ComputedStyleProperty.litTagName}
        .traceable=${r}
        .inherited=${n}
        @oncontextmenu=${s}
        @onnavigatetosource=${e=>{i&&navigateToSource(i,e)}}>
          ${a}
          ${l}
      </${ElementsComponents.ComputedStyleProperty.ComputedStyleProperty.litTagName}>`},createTraceElement=(e,t,o,r,n)=>{const i=new ElementsComponents.ComputedStyleTrace.ComputedStyleTrace,s=new StylesSidebarPropertyRenderer(null,e,t.name,t.value);s.setColorHandler(processColor);const a=s.renderValue();a.slot="trace-value",i.appendChild(a);const l=t.ownerStyle.parentRule;let d;return l&&(d=StylePropertiesSection.createRuleOriginNode(r,n,l)),i.data={selector:l?l.selectorText():"element.style",active:!o,onNavigateToSource:navigateToSource.bind(null,t),ruleOriginNode:d},i},processColor=e=>{const t=new InlineEditor.ColorSwatch.ColorSwatch;t.renderColor(e,!0);const o=document.createElement("span");return o.textContent=t.getText(),t.append(o),t.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName,(e=>{const{data:t}=e;o.textContent=t.text})),t},navigateToSource=(e,t)=>{t&&(Common.Revealer.reveal(e),t.consume(!0))},propertySorter=(e,t)=>{if(e.startsWith("--")!==t.startsWith("--"))return e.startsWith("--")?1:-1;if(e.startsWith("-webkit")!==t.startsWith("-webkit"))return e.startsWith("-webkit")?1:-1;const o=SDK.CSSMetadata.cssMetadata().canonicalPropertyName(e),r=SDK.CSSMetadata.cssMetadata().canonicalPropertyName(t);return Platform.StringUtilities.compare(o,r)};export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget{computedStyleModel;showInheritedComputedStylePropertiesSetting;groupComputedStylesSetting;input;filterRegex;noMatchesElement;linkifier;imagePreviewPopover;#e=new TreeOutline.TreeOutline.TreeOutline;#t;constructor(){super(!0),this.contentElement.classList.add("styles-sidebar-computed-style-widget"),this.computedStyleModel=new ComputedStyleModel,this.computedStyleModel.addEventListener("ComputedStyleChanged",this.update,this),this.showInheritedComputedStylePropertiesSetting=Common.Settings.Settings.instance().createSetting("showInheritedComputedStyleProperties",!1),this.showInheritedComputedStylePropertiesSetting.addChangeListener(this.update.bind(this)),this.groupComputedStylesSetting=Common.Settings.Settings.instance().createSetting("groupComputedStyles",!1),this.groupComputedStylesSetting.addChangeListener((()=>{this.update()}));const e=this.contentElement.createChild("div","hbox styles-sidebar-pane-toolbar"),t=e.createChild("div","styles-sidebar-pane-filter-box"),o=StylesSidebarPane.createPropertyFilterElement(i18nString(UIStrings.filter),e,this.filterComputedStyles.bind(this));UI.ARIAUtils.setLabel(o,i18nString(UIStrings.filterComputedStyles)),t.appendChild(o),this.input=o,this.filterRegex=null;const r=new UI.Toolbar.Toolbar("styles-pane-toolbar",e);r.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(this.showInheritedComputedStylePropertiesSetting,void 0,i18nString(UIStrings.showAll))),r.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting,void 0,i18nString(UIStrings.group))),this.noMatchesElement=this.contentElement.createChild("div","gray-info-message"),this.noMatchesElement.textContent=i18nString(UIStrings.noMatchingProperty),this.contentElement.appendChild(this.#e),this.linkifier=new Components.Linkifier.Linkifier(_maxLinkLength),this.imagePreviewPopover=new ImagePreviewPopover(this.contentElement,(e=>{const t=e.composedPath()[0];return t instanceof Element?t:null}),(()=>this.computedStyleModel.node()));new PlatformFontsWidget(this.computedStyleModel).show(this.contentElement),Common.Settings.Settings.instance().moduleSetting("colorFormat").addChangeListener(this.update.bind(this))}onResize(){const e=this.contentElement.offsetWidth<260;this.#e.classList.toggle("computed-narrow",e)}wasShown(){super.wasShown(),this.registerCSSFiles([computedStyleSidebarPaneStyles])}async doUpdate(){const[e,t]=await Promise.all([this.computedStyleModel.fetchComputedStyle(),this.fetchMatchedCascade()]);if(!e||!t)return void this.noMatchesElement.classList.remove("hidden");this.groupComputedStylesSetting.get()?await this.rebuildGroupedList(e,t):await this.rebuildAlphabeticalList(e,t)}async fetchMatchedCascade(){const e=this.computedStyleModel.node();if(!e||!this.computedStyleModel.cssModel())return null;const t=this.computedStyleModel.cssModel();return t?t.cachedMatchedCascadeForNode(e).then(function(e){return e&&e.node()===this.computedStyleModel.node()?e:null}.bind(this)):null}async rebuildAlphabeticalList(e,t){this.imagePreviewPopover.hide(),this.linkifier.reset();if(!this.computedStyleModel.cssModel())return;const o=[...e.computedStyle.keys()];o.sort(propertySorter);const r=e.node,n=this.computePropertyTraces(t),i=this.computeNonInheritedProperties(t),s=this.showInheritedComputedStylePropertiesSetting.get(),a=[];for(const t of o){const o=e.computedStyle.get(t)||"",r=SDK.CSSMetadata.cssMetadata().canonicalPropertyName(t),l=!i.has(r);(s||!l||_alwaysShownComputedProperties.has(t))&&(!s&&t.startsWith("--")||t!==r&&o===e.computedStyle.get(r)||a.push(this.buildTreeNode(n,t,o,l)))}const l=this.createTreeNodeRenderer(n,r,t);this.#t={tree:a,compact:!0,defaultRenderer:l},this.filterAlphabeticalList()}async rebuildGroupedList(e,t){this.imagePreviewPopover.hide(),this.linkifier.reset();const o=this.computedStyleModel.cssModel();if(!e||!t||!o)return void this.noMatchesElement.classList.remove("hidden");const r=e.node,n=this.computePropertyTraces(t),i=this.computeNonInheritedProperties(t),s=this.showInheritedComputedStylePropertiesSetting.get(),a=new Map,l=[];for(const[t,o]of e.computedStyle){const r=SDK.CSSMetadata.cssMetadata().canonicalPropertyName(t),n=!i.has(r);if(!s&&n&&!_alwaysShownComputedProperties.has(t))continue;if(!s&&t.startsWith("--"))continue;if(t!==r&&o===e.computedStyle.get(r))continue;const l=categorizePropertyName(t);for(const e of l)a.has(e)||a.set(e,[]),a.get(e)?.push(t)}this.#e.removeChildren();for(const t of DefaultCategoryOrder){const o=a.get(t);if(o&&o.length>0){const r=[];for(const t of o){const o=e.computedStyle.get(t)||"",s=SDK.CSSMetadata.cssMetadata().canonicalPropertyName(t),a=!i.has(s);r.push(this.buildTreeNode(n,t,o,a))}l.push({id:t,treeNodeData:{tag:"category",name:t},children:async()=>r})}}const d=this.createTreeNodeRenderer(n,r,t);return this.#t={tree:l,compact:!0,defaultRenderer:d},this.filterGroupLists()}buildTraceNode(e){const t=e.ownerStyle.parentRule;return{treeNodeData:{tag:"traceElement",property:e,rule:t},id:t.origin+": "+t.styleSheetId+(e.range||e.name)}}createTreeNodeRenderer(e,t,o){return r=>{const n=r.treeNodeData;if("property"===n.tag){const r=e.get(n.propertyName),i=r?.find((e=>o.propertyState(e)===SDK.CSSMatchedStyles.PropertyState.Active));return createPropertyElement(t,n.propertyName,n.propertyValue,e.has(n.propertyName),n.inherited,i,(e=>{i&&this.handleContextMenuEvent(o,i,e)}))}if("traceElement"===n.tag){const e=o.propertyState(n.property)===SDK.CSSMatchedStyles.PropertyState.Overloaded,r=createTraceElement(t,n.property,e,o,this.linkifier);return r.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this,o,n.property)),LitHtml.html`${r}`}return LitHtml.html`<span style="cursor: text; color: var(--color-text-secondary);">${n.name}</span>`}}buildTreeNode(e,t,o,r){const n={tag:"property",propertyName:t,propertyValue:o,inherited:r},i=e.get(t);return i?{treeNodeData:n,id:t,children:async()=>i.map(this.buildTraceNode)}:{treeNodeData:n,id:t}}handleContextMenuEvent(e,t,o){const r=new UI.ContextMenu.ContextMenu(o),n=t.ownerStyle.parentRule;if(n){const t=n.styleSheetId?e.cssModel().styleSheetHeaderForId(n.styleSheetId):null;t&&!t.isAnonymousInlineStyleSheet()&&r.defaultSection().appendItem(i18nString(UIStrings.navigateToSelectorSource),(()=>{StylePropertiesSection.tryNavigateToRuleLocation(e,n)}))}r.defaultSection().appendItem(i18nString(UIStrings.navigateToStyle),(()=>Common.Revealer.reveal(t))),r.show()}computePropertyTraces(e){const t=new Map;for(const o of e.nodeStyles()){const r=o.allProperties();for(const o of r)o.activeInStyle()&&e.propertyState(o)&&(t.has(o.name)||t.set(o.name,[]),t.get(o.name).push(o))}return t}computeNonInheritedProperties(e){const t=new Set;for(const o of e.nodeStyles())for(const r of o.allProperties())e.propertyState(r)&&t.add(SDK.CSSMetadata.cssMetadata().canonicalPropertyName(r.name));return t}async filterComputedStyles(e){return this.filterRegex=e,this.groupComputedStylesSetting.get()?this.filterGroupLists():this.filterAlphabeticalList()}nodeFilter(e){const t=this.filterRegex,o=e.treeNodeData;if("property"===o.tag){return!t||t.test(o.propertyName)||t.test(o.propertyValue)}return!0}filterAlphabeticalList(){if(!this.#t)return;const e=this.#t.tree.filter(this.nodeFilter.bind(this));this.#e.data={tree:e,defaultRenderer:this.#t.defaultRenderer,compact:this.#t.compact},this.noMatchesElement.classList.toggle("hidden",Boolean(e.length))}async filterGroupLists(){if(!this.#t)return;const e=[];for(const t of this.#t.tree){const o=t.treeNodeData;if("category"!==o.tag||!t.children)continue;const r=(await t.children()).filter(this.nodeFilter.bind(this));r.length&&e.push({id:o.name,treeNodeData:{tag:"category",name:o.name},children:async()=>r})}this.#e.data={tree:e,defaultRenderer:this.#t.defaultRenderer,compact:this.#t.compact},await this.#e.expandRecursively(0),this.noMatchesElement.classList.toggle("hidden",Boolean(e.length))}}const _maxLinkLength=30,_alwaysShownComputedProperties=new Set(["display","height","width"]);