@yuebai008/cli/dist/cli-server/client/front_end/panels/css_overview/CSSOverviewModel.js

Command line interface for rapid qg-minigame development

import*as Common from"../../core/common/common.js";import*as Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as ColorPicker from"../../ui/legacy/components/color_picker/color_picker.js";import{CSSOverviewUnusedDeclarations}from"./CSSOverviewUnusedDeclarations.js";export class CSSOverviewModel extends SDK.SDKModel.SDKModel{#e;#t;#o;#n;constructor(e){super(e),this.#e=e.runtimeAgent(),this.#t=e.cssAgent(),this.#o=e.domsnapshotAgent(),this.#n=e.overlayAgent()}highlightNode(e){const t={contentColor:Common.Color.PageHighlight.Content.toProtocolRGBA(),showInfo:!0,contrastAlgorithm:Root.Runtime.experiments.isEnabled("APCA")?"apca":"aa"};this.#n.invoke_hideHighlight(),this.#n.invoke_highlightNode({backendNodeId:e,highlightConfig:t})}async getNodeStyleStats(){const e=new Map,t=new Map,o=new Map,n=new Map,s=new Map,r=new Map,a=new Map,i=e=>e instanceof Common.Color.Legacy?e.hasAlpha()?e.asString("hexa"):e.asString("hex"):e.asString(),l=(e,t,o)=>{if(-1===e)return;const n=g[e];if(!n)return;const s=Common.Color.parse(n);if(!s||0===s.asLegacyColor().rgba()[3])return;const r=i(s);if(!r)return;const a=o.get(r)||new Set;return a.add(t),o.set(r,a),s},c=e=>new Set(["altglyph","circle","ellipse","path","polygon","polyline","rect","svg","text","textpath","tref","tspan"]).has(e.toLowerCase()),d=e=>new Set(["iframe","video","embed","img"]).has(e.toLowerCase()),h=(e,t)=>new Set(["tr","td","thead","tbody"]).has(e.toLowerCase())&&t.startsWith("table");let u=0;const{documents:p,strings:g}=await this.#o.invoke_captureSnapshot({computedStyles:["background-color","color","fill","border-top-width","border-top-color","border-bottom-width","border-bottom-color","border-left-width","border-left-color","border-right-width","border-right-color","font-family","font-size","font-weight","line-height","position","top","right","bottom","left","display","width","height","vertical-align"],includeTextColorOpacities:!0,includeBlendedBackgroundColors:!0});for(const{nodes:m,layout:f}of p){u+=f.nodeIndex.length;for(let u=0;u<f.styles.length;u++){const p=f.styles[u],S=f.nodeIndex[u];if(!m.backendNodeId||!m.nodeName)continue;const C=m.backendNodeId[S],y=m.nodeName[S],[w,b,v,A,x,k,M,D,R,I,N,O,z,P,T,_,K,U,W,B,F,L,j,V]=p;l(w,C,e);const E=l(b,C,t);if(c(g[y])&&l(v,C,n),"0px"!==g[A]&&l(x,C,s),"0px"!==g[k]&&l(M,C,s),"0px"!==g[D]&&l(R,C,s),"0px"!==g[I]&&l(N,C,s),O&&-1!==O){const e=g[O],t=r.get(e)||new Map,o="font-size",n="font-weight",s="line-height",a=t.get(o)||new Map,i=t.get(n)||new Map,l=t.get(s)||new Map;if(-1!==z){const e=g[z],t=a.get(e)||[];t.push(C),a.set(e,t)}if(-1!==P){const e=g[P],t=i.get(e)||[];t.push(C),i.set(e,t)}if(-1!==T){const e=g[T],t=l.get(e)||[];t.push(C),l.set(e,t)}t.set(o,a),t.set(n,i),t.set(s,l),r.set(e,t)}const G=E&&f.blendedBackgroundColors&&-1!==f.blendedBackgroundColors[u]?Common.Color.parse(g[f.blendedBackgroundColors[u]]):null;if(E&&G){const e=new ColorPicker.ContrastInfo.ContrastInfo({backgroundColors:[G.asString("hexa")],computedFontSize:-1!==z?g[z]:"",computedFontWeight:-1!==P?g[P]:""}),t=E.asLegacyColor().blendWithAlpha(f.textColorOpacities?f.textColorOpacities[u]:1);e.setColor(t);const n=`${i(t)}_${i(G.asLegacyColor())}`;if(Root.Runtime.experiments.isEnabled("APCA")){const s=e.contrastRatioAPCA(),r=e.contrastRatioAPCAThreshold();if(!(!(!s||!r)&&Math.abs(s)>=r)&&s){const e={nodeId:C,contrastRatio:s,textColor:t,backgroundColor:G,thresholdsViolated:{aa:!1,aaa:!1,apca:!0}};o.has(n)?o.get(n).push(e):o.set(n,[e])}}else{const s=e.contrastRatioThreshold("aa")||0,r=e.contrastRatioThreshold("aaa")||0,a=e.contrastRatio()||0;if(s>a||r>a){const e={nodeId:C,contrastRatio:a,textColor:t,backgroundColor:G,thresholdsViolated:{aa:s>a,aaa:r>a,apca:!1}};o.has(n)?o.get(n).push(e):o.set(n,[e])}}}CSSOverviewUnusedDeclarations.checkForUnusedPositionValues(a,C,g,_,K,B,U,W),c(g[y])||d(g[y])||CSSOverviewUnusedDeclarations.checkForUnusedWidthAndHeightValues(a,C,g,F,L,j),-1===V||h(g[y],g[F])||CSSOverviewUnusedDeclarations.checkForInvalidVerticalAlignment(a,C,g,F,V)}}return{backgroundColors:e,textColors:t,textColorContrastIssues:o,fillColors:n,borderColors:s,fontInfo:r,unusedDeclarations:a,elementCount:u}}getComputedStyleForNode(e){return this.#t.invoke_getComputedStyleForNode({nodeId:e})}async getMediaQueries(){const e=await this.#t.invoke_getMediaQueries(),t=new Map;if(!e)return t;for(const o of e.medias){if("linkedSheet"===o.source)continue;const e=t.get(o.text)||[];e.push(o),t.set(o.text,e)}return t}async getGlobalStylesheetStats(){const{result:e}=await this.#e.invoke_evaluate({expression:"(function() {\n      let styleRules = 0;\n      let inlineStyles = 0;\n      let externalSheets = 0;\n      const stats = {\n        // Simple.\n        type: new Set(),\n        class: new Set(),\n        id: new Set(),\n        universal: new Set(),\n        attribute: new Set(),\n\n        // Non-simple.\n        nonSimple: new Set()\n      };\n\n      for (const styleSheet of document.styleSheets) {\n        if (styleSheet.href) {\n          externalSheets++;\n        } else {\n          inlineStyles++;\n        }\n\n        // Attempting to grab rules can trigger a DOMException.\n        // Try it and if it fails skip to the next stylesheet.\n        let rules;\n        try {\n          rules = styleSheet.rules;\n        } catch (err) {\n          continue;\n        }\n\n        for (const rule of rules) {\n          if ('selectorText' in rule) {\n            styleRules++;\n\n            // Each group that was used.\n            for (const selectorGroup of rule.selectorText.split(',')) {\n              // Each selector in the group.\n              for (const selector of selectorGroup.split(/[\\t\\n\\f\\r ]+/g)) {\n                if (selector.startsWith('.')) {\n                  // Class.\n                  stats.class.add(selector);\n                } else if (selector.startsWith('#')) {\n                  // Id.\n                  stats.id.add(selector);\n                } else if (selector.startsWith('*')) {\n                  // Universal.\n                  stats.universal.add(selector);\n                } else if (selector.startsWith('[')) {\n                  // Attribute.\n                  stats.attribute.add(selector);\n                } else {\n                  // Type or non-simple selector.\n                  const specialChars = /[#.:\\[\\]|\\+>~]/;\n                  if (specialChars.test(selector)) {\n                    stats.nonSimple.add(selector);\n                  } else {\n                    stats.type.add(selector);\n                  }\n                }\n              }\n            }\n          }\n        }\n      }\n\n      return {\n        styleRules,\n        inlineStyles,\n        externalSheets,\n        stats: {\n          // Simple.\n          type: stats.type.size,\n          class: stats.class.size,\n          id: stats.id.size,\n          universal: stats.universal.size,\n          attribute: stats.attribute.size,\n\n          // Non-simple.\n          nonSimple: stats.nonSimple.size\n        }\n      }\n    })()",returnByValue:!0});if("object"===e.type)return e.value}}SDK.SDKModel.SDKModel.register(CSSOverviewModel,{capabilities:SDK.Target.Capability.DOM,autostart:!1});