@react-native/debugger-frontend/dist/third-party/front_end/panels/elements/elements.js

Debugger frontend for React Native based on Chrome DevTools

import*as e from"../../core/common/common.js";import*as t from"../../core/root/root.js";import*as n from"../../core/sdk/sdk.js";import*as i from"../../ui/legacy/legacy.js";import*as s from"../../ui/visual_logging/visual_logging.js";import*as o from"../../core/host/host.js";import*as r from"../../core/i18n/i18n.js";import*as a from"../../core/platform/platform.js";import{assertNotNullOrUndefined as l}from"../../core/platform/platform.js";import*as d from"../../models/extensions/extensions.js";import*as c from"../../ui/components/buttons/buttons.js";import*as h from"../../ui/components/tree_outline/tree_outline.js";import*as p from"./components/components.js";import*as u from"../../ui/lit-html/lit-html.js";import*as m from"../../models/bindings/bindings.js";import*as g from"../../ui/legacy/components/color_picker/color_picker.js";import*as y from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as f from"../../ui/legacy/components/utils/utils.js";import*as S from"../../models/text_utils/text_utils.js";import*as C from"../../models/workspace/workspace.js";import*as E from"../../models/workspace_diff/workspace_diff.js";import{PanelUtils as b}from"../utils/utils.js";import*as v from"../../ui/components/diff_view/diff_view.js";import*as w from"../../ui/components/icon_button/icon_button.js";import*as x from"../../third_party/codemirror.next/codemirror.next.js";import*as T from"../../ui/components/adorners/adorners.js";import*as M from"../../ui/components/code_highlighter/code_highlighter.js";import*as N from"../../ui/components/highlighting/highlighting.js";import*as I from"../../ui/components/text_editor/text_editor.js";import*as P from"../emulation/emulation.js";import*as O from"../../models/issues_manager/issues_manager.js";import*as L from"../../ui/components/issue_counter/issue_counter.js";import*as A from"../event_listeners/event_listeners.js";import*as k from"../../ui/legacy/components/object_ui/object_ui.js";function R(e){const t=n.FrameManager.FrameManager.instance().getFrame(e),i=t?.resourceTreeModel().target().model(n.AccessibilityModel.AccessibilityModel);if(!i)throw Error("Could not instantiate model for frameId");return i}async function D(e){const t=R(e),n=await t.requestRootNode(e);if(!n)throw Error("No accessibility root for frame");return n}function F(e){let t;if(t=e instanceof n.DOMModel.DOMDocument?e.body?.frameId():e.frameId(),!t)throw Error("No frameId for DOM node");return t}async function U(e){let t=F(e);const i=R(t),s=await i.requestAndLoadSubTreeToNode(e);if(!s)throw Error("Could not retrieve accessibility node for inspected DOM node");const o=n.FrameManager.FrameManager.instance().getOutermostFrame()?.id;if(!o)return s;for(;t!==o;){const e=await(n.FrameManager.FrameManager.instance().getFrame(t)?.getOwnerDOMNodeOrDocument());if(!e)break;t=F(e);const i=R(t),o=await i.requestAndLoadSubTreeToNode(e);s.push(...o||[])}return s}async function B(e){const t=e;return 0===(n=e).numChildren()&&"Iframe"!==n.role()?.value?[{treeNodeData:t,id:V(e)}]:[{treeNodeData:t,children:async()=>{const t=await async function(e){if("Iframe"===e.role()?.value){const t=await(e.deferredDOMNode()?.resolvePromise());if(!t)throw new Error("Could not find corresponding DOMNode");const n=t.frameOwnerFrameId();if(!n)throw Error("No owner frameId on iframe node");return[await D(n)]}return e.accessibilityModel().requestAXChildren(e.id(),e.getFrameId()||void 0)}(e);return(await Promise.all(t.map((e=>B(e))))).flat(1)},id:V(e)}];var n}function _(e){const t=p.AccessibilityTreeNode.AccessibilityTreeNode.litTagName,n=e.treeNodeData,i=n.name()?.value||"",s=n.role()?.value||"",o=n.properties()||[],r=n.ignored(),a=V(n);return u.html`<${t} .data=${{name:i,role:s,ignored:r,properties:o,id:a}}></${t}>`}function V(e){return e.getFrameId()+"#"+e.id()}var H=Object.freeze({__proto__:null,getRootNode:D,getNodeAndAncestorsFromDOMNode:U,sdkNodeToAXTreeNodes:B,accessibilityNodeRenderer:_,getNodeId:V});const W=new CSSStyleSheet;W.replaceSync(".accessibility-tree-view-container{height:100%;overflow:auto}\n/*# sourceURL=accessibilityTreeView.css */\n");class j extends i.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.setAttribute("jslog",`${s.tree("full-accessibility")}`),i.appendChild(this.toggleButton),i.appendChild(this.accessibilityTreeComponent),n.TargetManager.TargetManager.instance().observeModels(n.AccessibilityModel.AccessibilityModel,this,{scoped:!0}),this.accessibilityTreeComponent.addEventListener("itemselected",(e=>{const t=e.data.node.treeNodeData;if(!t.isDOMNode())return;const n=t.deferredDOMNode();n&&n.resolve((e=>{e&&(this.inspectedDOMNode=e,Ls.instance().revealAndSelectNode(e,!0,!1))}))})),this.accessibilityTreeComponent.addEventListener("itemmouseover",(e=>{e.data.node.treeNodeData.highlightDOMNode()})),this.accessibilityTreeComponent.addEventListener("itemmouseout",(()=>{n.OverlayModel.OverlayModel.hideDOMNodeHighlight()}))}async wasShown(){await this.refreshAccessibilityTree(),this.inspectedDOMNode&&await this.loadSubTreeIntoAccessibilityModel(this.inspectedDOMNode),this.registerCSSFiles([W])}async refreshAccessibilityTree(){if(!this.root){const e=n.FrameManager.FrameManager.instance().getOutermostFrame()?.id;if(!e)throw Error("No top frame");if(this.root=await D(e),!this.root)throw Error("No root")}await this.renderTree(),await this.accessibilityTreeComponent.expandRecursively(1)}async renderTree(){if(!this.root)return;const e=await B(this.root);this.accessibilityTreeComponent.data={defaultRenderer:_,tree:e,filter:e=>e.ignored()||"generic"===e.role()?.value&&!e.name()?.value?"FLATTEN":"SHOW"}}async loadSubTreeIntoAccessibilityModel(e){const t=await U(e),n=t.find((t=>t.backendDOMNodeId()===e.backendNodeId()));n&&(await this.accessibilityTreeComponent.expandNodeIds(t.map((e=>e.getFrameId()+"#"+e.id()))),await this.accessibilityTreeComponent.focusNodeId(V(n)))}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=n.FrameManager.FrameManager.instance().getOutermostFrame()?.id;e.root?.getFrameId()===t?(this.root=e.root,this.accessibilityTreeComponent.collapseAllNodes(),this.refreshAccessibilityTree()):this.renderTree()}modelAdded(e){e.addEventListener("TreeUpdated",this.treeUpdated,this)}modelRemoved(e){e.removeEventListener("TreeUpdated",this.treeUpdated,this)}}var z=Object.freeze({__proto__:null,AccessibilityTreeView:j});const $={openCubicBezierEditor:"Open cubic bezier editor",openShadowEditor:"Open shadow editor"},K=r.i18n.registerUIStrings("panels/elements/ColorSwatchPopoverIcon.ts",$),G=r.i18n.getLocalizedString.bind(void 0,K);class Y{treeElement;swatchPopoverHelper;swatch;boundBezierChanged;boundOnScroll;bezierEditor;scrollerElement;originalPropertyText;constructor({treeElement:e,swatchPopoverHelper:t,swatch:n}){this.treeElement=e,this.swatchPopoverHelper=t,this.swatch=n,i.Tooltip.Tooltip.install(this.swatch.iconElement(),G($.openCubicBezierEditor)),this.swatch.iconElement().addEventListener("click",this.iconClick.bind(this),!1),this.swatch.iconElement().addEventListener("mousedown",(e=>e.consume()),!1),this.boundBezierChanged=this.bezierChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}iconClick(t){if(t.consume(!0),this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);const n=y.AnimationTimingModel.AnimationTimingModel.parse(this.swatch.bezierText())||y.AnimationTimingModel.LINEAR_BEZIER;this.bezierEditor=new y.BezierEditor.BezierEditor(n),this.bezierEditor.addEventListener("BezierChanged",this.boundBezierChanged),this.swatchPopoverHelper.show(this.bezierEditor,this.swatch.iconElement(),this.onPopoverHidden.bind(this)),this.scrollerElement=this.swatch.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this.scrollerElement&&this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1),this.originalPropertyText=this.treeElement.property.propertyText,this.treeElement.parentPane().setEditingStyle(!0);const i=m.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);i&&e.Revealer.reveal(i,!0)}bezierChanged(e){this.swatch.setBezierText(e.data),this.treeElement.applyStyleText(this.treeElement.renderedPropertyText(),!1)}onScroll(e){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(e){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.bezierEditor&&this.bezierEditor.removeEventListener("BezierChanged",this.boundBezierChanged),this.bezierEditor=void 0;const t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.parentPane().setEditingStyle(!1),delete this.originalPropertyText}}class q extends e.ObjectWrapper.ObjectWrapper{treeElement;swatchPopoverHelper;swatch;contrastInfo;boundSpectrumChanged;boundOnScroll;spectrum;scrollerElement;originalPropertyText;constructor(e,t,n){super(),this.treeElement=e,this.swatchPopoverHelper=t,this.swatch=n,this.swatch.addEventListener(y.ColorSwatch.ClickEvent.eventName,this.iconClick.bind(this)),this.contrastInfo=null,this.boundSpectrumChanged=this.spectrumChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}generateCSSVariablesPalette(){const t=this.treeElement.matchedStyles(),n=this.treeElement.property.ownerStyle,i=t.availableCSSVariables(n),s=[],o=[];for(const r of i){if(r===this.treeElement.property.name)continue;const i=t.computeCSSVariable(n,r);if(!i)continue;e.Color.parse(i.value)&&(s.push(i.value),o.push(r))}return{title:"CSS Variables",mutable:!1,matchUserFormat:!0,colors:s,colorNames:o}}setContrastInfo(e){this.contrastInfo=e}iconClick(e){e.consume(!0),this.showPopover()}async toggleEyeDropper(){await(this.spectrum?.toggleColorPicker())}showPopover(){if(this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);const t=this.swatch.getColor();if(!t)return;this.spectrum=new g.Spectrum.Spectrum(this.contrastInfo),this.spectrum.setColor(t),this.spectrum.addPalette(this.generateCSSVariablesPalette()),this.spectrum.addEventListener("SizeChanged",this.spectrumResized,this),this.spectrum.addEventListener("ColorChanged",this.boundSpectrumChanged),this.swatchPopoverHelper.show(this.spectrum,this.swatch,this.onPopoverHidden.bind(this)),this.scrollerElement=this.swatch.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this.scrollerElement&&this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1),this.originalPropertyText=this.treeElement.property.propertyText,this.treeElement.parentPane().setEditingStyle(!0);const n=m.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);n&&e.Revealer.reveal(n,!0),i.Context.Context.instance().setFlavor(q,this),o.userMetrics.colorPickerOpenedFrom(1)}spectrumResized(){this.swatchPopoverHelper.reposition()}async spectrumChanged(t){const n=e.Color.parse(t.data);if(!n)return;const i=this.spectrum?this.spectrum.colorName():void 0,s=i&&i.startsWith("--")?`var(${i})`:n.getAuthoredText()??n.asString();this.swatch.renderColor(n);const o=this.swatch.firstElementChild;o&&(o.remove(),this.swatch.createChild("span").textContent=s),s&&this.dispatchEventToListeners("colorchanged",s)}onScroll(e){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(e){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.spectrum&&this.spectrum.removeEventListener("ColorChanged",this.boundSpectrumChanged),this.spectrum=void 0;const t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.parentPane().setEditingStyle(!1),delete this.originalPropertyText,i.Context.Context.instance().setFlavor(q,null)}}class X extends e.ObjectWrapper.ObjectWrapper{treeElement;swatchPopoverHelper;shadowSwatch;iconElement;boundShadowChanged;boundOnScroll;cssShadowEditor;scrollerElement;originalPropertyText;constructor(e,t,n){super(),this.treeElement=e,this.swatchPopoverHelper=t,this.shadowSwatch=n,this.iconElement=n.iconElement(),i.Tooltip.Tooltip.install(this.iconElement,G($.openShadowEditor)),this.iconElement.addEventListener("click",this.iconClick.bind(this),!1),this.iconElement.addEventListener("mousedown",(e=>e.consume()),!1),this.boundShadowChanged=this.shadowChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this)}iconClick(e){e.consume(!0),this.showPopover()}showPopover(){if(this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);this.cssShadowEditor=new y.CSSShadowEditor.CSSShadowEditor,this.cssShadowEditor.setModel(this.shadowSwatch.model()),this.cssShadowEditor.addEventListener("ShadowChanged",this.boundShadowChanged),this.swatchPopoverHelper.show(this.cssShadowEditor,this.iconElement,this.onPopoverHidden.bind(this)),this.scrollerElement=this.iconElement.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this.scrollerElement&&this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1),this.originalPropertyText=this.treeElement.property.propertyText,this.treeElement.parentPane().setEditingStyle(!0);const t=m.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.treeElement.property,!1);t&&e.Revealer.reveal(t,!0)}shadowChanged(e){this.dispatchEventToListeners("shadowChanged",e.data)}onScroll(e){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(e){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.cssShadowEditor&&this.cssShadowEditor.removeEventListener("ShadowChanged",this.boundShadowChanged),this.cssShadowEditor=void 0;const t=e?this.treeElement.renderedPropertyText():this.originalPropertyText||"";this.treeElement.applyStyleText(t,!0),this.treeElement.parentPane().setEditingStyle(!1),delete this.originalPropertyText}}class Q{treeElementMap;swatchPopoverHelper;section;parentPane;fontEditor;scrollerElement;boundFontChanged;boundOnScroll;boundResized;constructor(e,t){this.treeElementMap=new Map,this.swatchPopoverHelper=e,this.section=t,this.parentPane=null,this.fontEditor=null,this.scrollerElement=null,this.boundFontChanged=this.fontChanged.bind(this),this.boundOnScroll=this.onScroll.bind(this),this.boundResized=this.fontEditorResized.bind(this)}fontChanged(e){const{propertyName:t,value:n}=e.data,i=this.treeElementMap.get(t);this.updateFontProperty(t,n,i)}async updateFontProperty(e,t,n){if(n&&n.treeOutline&&n.valueElement&&n.property.parsedOk&&n.property.range){let e,i=!1;n.valueElement.textContent=t,n.property.value=t;const s=n.property.name;t.length?e=n.renderedPropertyText():(e="",i=!0,this.fixIndex(n.property.index)),this.treeElementMap.set(s,n),await n.applyStyleText(e,!0),i&&this.treeElementMap.delete(s)}else if(t.length){const n=this.section.addNewBlankProperty();n&&(n.property.name=e,n.property.value=t,n.updateTitle(),await n.applyStyleText(n.renderedPropertyText(),!0),this.treeElementMap.set(n.property.name,n))}this.section.onpopulate(),this.swatchPopoverHelper.reposition()}fontEditorResized(){this.swatchPopoverHelper.reposition()}fixIndex(e){for(const t of this.treeElementMap.values())t.property.index>e&&(t.property.index-=1)}createPropertyValueMap(){const e=new Map;for(const t of this.treeElementMap){const n=t[0],i=t[1];i.property.value.length?e.set(n,i.property.value):this.treeElementMap.delete(n)}return e}registerFontProperty(e){const t=e.property.name;if(this.treeElementMap.has(t)){const n=this.treeElementMap.get(t);(!e.overloaded()||n&&n.overloaded())&&this.treeElementMap.set(t,e)}else this.treeElementMap.set(t,e)}async showPopover(e,t){if(this.swatchPopoverHelper.isShowing())return void this.swatchPopoverHelper.hide(!0);this.parentPane=t;const n=this.createPropertyValueMap();this.fontEditor=new y.FontEditor.FontEditor(n),this.fontEditor.addEventListener("FontChanged",this.boundFontChanged),this.fontEditor.addEventListener("FontEditorResized",this.boundResized),this.swatchPopoverHelper.show(this.fontEditor,e,this.onPopoverHidden.bind(this)),this.scrollerElement=e.enclosingNodeOrSelfWithClass("style-panes-wrapper"),this.scrollerElement&&this.scrollerElement.addEventListener("scroll",this.boundOnScroll,!1),this.parentPane.setEditingStyle(!0)}onScroll(){this.swatchPopoverHelper.hide(!0)}onPopoverHidden(){this.scrollerElement&&this.scrollerElement.removeEventListener("scroll",this.boundOnScroll,!1),this.section.onpopulate(),this.fontEditor&&this.fontEditor.removeEventListener("FontChanged",this.boundFontChanged),this.fontEditor=null,this.parentPane&&this.parentPane.setEditingStyle(!1),this.section.resetToolbars(),this.section.onpopulate()}}var J=Object.freeze({__proto__:null,BezierPopoverIcon:Y,ColorSwatchPopoverIcon:q,ShadowSwatchPopoverHelper:X,FontEditorSectionManager:Q});class Z extends e.ObjectWrapper.ObjectWrapper{nodeInternal;cssModelInternal;eventListeners;frameResizedTimer;computedStylePromise;constructor(){super(),this.nodeInternal=i.Context.Context.instance().flavor(n.DOMModel.DOMNode),this.cssModelInternal=null,this.eventListeners=[],i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.onNodeChanged,this)}node(){return this.nodeInternal}cssModel(){return this.cssModelInternal&&this.cssModelInternal.isEnabled()?this.cssModelInternal:null}onNodeChanged(e){this.nodeInternal=e.data,this.updateModel(this.nodeInternal?this.nodeInternal.domModel().cssModel():null),this.onComputedStyleChanged(null)}updateModel(t){if(this.cssModelInternal===t)return;e.EventTarget.removeEventListeners(this.eventListeners),this.cssModelInternal=t;const i=t?t.domModel():null,s=t?t.target().model(n.ResourceTreeModel.ResourceTreeModel):null;t&&i&&s&&(this.eventListeners=[t.addEventListener(n.CSSModel.Events.StyleSheetAdded,this.onComputedStyleChanged,this),t.addEventListener(n.CSSModel.Events.StyleSheetRemoved,this.onComputedStyleChanged,this),t.addEventListener(n.CSSModel.Events.StyleSheetChanged,this.onComputedStyleChanged,this),t.addEventListener(n.CSSModel.Events.FontsUpdated,this.onComputedStyleChanged,this),t.addEventListener(n.CSSModel.Events.MediaQueryResultChanged,this.onComputedStyleChanged,this),t.addEventListener(n.CSSModel.Events.PseudoStateForced,this.onComputedStyleChanged,this),t.addEventListener(n.CSSModel.Events.ModelWasEnabled,this.onComputedStyleChanged,this),i.addEventListener(n.DOMModel.Events.DOMMutated,this.onDOMModelChanged,this),s.addEventListener(n.ResourceTreeModel.Events.FrameResized,this.onFrameResized,this)])}onComputedStyleChanged(e){delete this.computedStylePromise,this.dispatchEventToListeners("ComputedStyleChanged",e?.data??null)}onDOMModelChanged(e){const t=e.data;this.nodeInternal&&(this.nodeInternal===t||t.parentNode===this.nodeInternal.parentNode||t.isAncestor(this.nodeInternal))&&this.onComputedStyleChanged(null)}onFrameResized(){this.frameResizedTimer&&clearTimeout(this.frameResizedTimer),this.frameResizedTimer=window.setTimeout(function(){this.onComputedStyleChanged(null),delete this.frameResizedTimer}.bind(this),100)}elementNode(){const e=this.node();return e?e.enclosingElementOrSelf():null}async fetchComputedStyle(){const e=this.elementNode(),t=this.cssModel();if(!e||!t)return null;const n=e.id;return n?(this.computedStylePromise||(this.computedStylePromise=t.getComputedStyle(n).then(function(e,t){return e===this.elementNode()&&t?new ee(e,t):null}.bind(this,e))),this.computedStylePromise):null}}class ee{node;computedStyle;constructor(e,t){this.node=e,this.computedStyle=t}}var te=Object.freeze({__proto__:null,ComputedStyleModel:Z,ComputedStyle:ee});const ne=new CSSStyleSheet;ne.replaceSync(".styles-sidebar-pane-toolbar{border-bottom:1px solid var(--sys-color-divider);flex-shrink:0}.styles-sidebar-computed-style-widget{min-height:auto}.styles-pane-toolbar{width:100%}\n/*# sourceURL=computedStyleSidebarPane.css */\n");class ie{getLinkElement;getDOMNode;popover;constructor(e,t,n){this.getLinkElement=t,this.getDOMNode=n,this.popover=new i.PopoverHelper.PopoverHelper(e,this.handleRequest.bind(this),"elements.image-preview"),this.popover.setHasPadding(!0),this.popover.setTimeout(0,100)}handleRequest(e){const t=this.getLinkElement(e);if(!t)return null;const n=se.get(t);return n?{box:t.boxInWindow(),hide:void 0,show:async e=>{const i=this.getDOMNode(t);if(!i)return!1;const s=await f.ImagePreview.ImagePreview.loadDimensionsForNode(i),o=await f.ImagePreview.ImagePreview.build(i.domModel().target(),n,!0,{imageAltText:void 0,precomputedFeatures:s});return o&&e.contentElement.appendChild(o),Boolean(o)}}:null}hide(){this.popover.hidePopover()}static setImageUrl(e,t){return se.set(e,t),e}static getImageURL(e){return se.get(e)}}const se=new WeakMap,oe=new CSSStyleSheet;oe.replaceSync(":host{user-select:text}.platform-fonts{flex-shrink:0}.font-usage{color:var(--sys-color-token-subtle);padding-left:3px}.title{padding:0 5px;border-top:1px solid;border-bottom:1px solid;border-color:var(--sys-color-divider);white-space:nowrap;text-overflow:ellipsis;overflow:hidden;height:24px;background-color:var(--sys-color-surface2);display:flex;align-items:center}.font-stats-item{padding:5px 1em;div{margin-bottom:2px}&:not(:last-child){border-bottom:1px solid var(--sys-color-divider)}}\n/*# sourceURL=platformFontsWidget.css */\n");const re={renderedFonts:"Rendered Fonts",familyName:"Family name",postScriptName:"PostScript name",fontOrigin:"Font origin",networkResource:"Network resource",localFile:"Local file",dGlyphs:"{n, plural, =1 {(# glyph)} other {(# glyphs)}}"},ae=r.i18n.registerUIStrings("panels/elements/PlatformFontsWidget.ts",re),le=r.i18n.getLocalizedString.bind(void 0,ae);class de extends i.ThrottledWidget.ThrottledWidget{sharedModel;sectionTitle;fontStatsSection;constructor(e){super(!0),this.sharedModel=e,this.sharedModel.addEventListener("ComputedStyleChanged",this.update,this),this.sectionTitle=document.createElement("div"),this.sectionTitle.classList.add("title"),this.contentElement.classList.add("platform-fonts"),this.contentElement.appendChild(this.sectionTitle),this.sectionTitle.textContent=le(re.renderedFonts),this.fontStatsSection=this.contentElement.createChild("div","stats-section")}doUpdate(){const e=this.sharedModel.cssModel(),t=this.sharedModel.node();return t&&e?e.getPlatformFonts(t.id).then(this.refreshUI.bind(this,t)):Promise.resolve()}refreshUI(e,t){if(this.sharedModel.node()!==e)return;this.fontStatsSection.removeChildren();const n=!t||!t.length;if(this.sectionTitle.classList.toggle("hidden",n),!n&&t){t.sort((function(e,t){return t.glyphCount-e.glyphCount}));for(const e of t){const t=this.fontStatsSection.createChild("div","font-stats-item");t.createChild("div").textContent=`${re.familyName}: ${e.familyName}`;t.createChild("div").textContent=`${re.postScriptName}: ${e.postScriptName}`;const n=t.createChild("div"),i=e.isCustomFont?le(re.networkResource):le(re.localFile);n.textContent=`${re.fontOrigin}: ${i}`;const s=n.createChild("span","font-usage"),o=e.glyphCount;s.textContent=le(re.dGlyphs,{n:o})}}}wasShown(){super.wasShown(),this.registerCSSFiles([oe])}}var ce=Object.freeze({__proto__:null,PlatformFontsWidget:de});const he=n.CSSPropertyParser.ASTUtils,pe=n.CSSPropertyParser.matcherBase,ue=n.CSSPropertyParser.tokenizeDeclaration;class me{text;node;constructor(e,t){this.text=e,this.node=t}computedText(){return this.text}}class ge extends(pe(me)){accepts(e){return n.CSSMetadata.cssMetadata().isAngleAwareProperty(e)}matches(e,t){if("NumberLiteral"!==e.name)return null;const n=e.getChild("Unit");return n&&["deg","grad","rad","turn"].includes(t.ast.text(n))?new me(t.ast.text(e),e):null}}function ye(e,t){if("NumberLiteral"!==e.type.name)return null;const n=t.text(e);return Number(n.substring(0,n.length-t.text(e.getChild("Unit")).length))}class fe{text;node;space;color1;color2;constructor(e,t,n,i,s){this.text=e,this.node=t,this.space=n,this.color1=i,this.color2=s}}class Se extends(pe(fe)){accepts(e){return n.CSSMetadata.cssMetadata().isColorAwareProperty(e)}matches(e,t){if("CallExpression"!==e.name||"color-mix"!==t.ast.text(e.getChild("Callee")))return null;const n=ue("--property",t.getComputedText(e));if(!n)return null;const i=he.declValue(n.tree);if(!i)return null;const s=he.callArgs(i);if(3!==s.length)return null;const[o,r,a]=s;if(o.length<2||"in"!==n.text(he.stripComments(o).next().value)||r.length<1||a.length<1)return null;const l=r.filter((e=>"NumberLiteral"===e.type.name&&"%"===n.text(e.getChild("Unit")))),d=a.filter((e=>"NumberLiteral"===e.type.name&&"%"===n.text(e.getChild("Unit"))));if(l.length>1||d.length>1)return null;if(l[0]&&d[0]&&0===(ye(l[0],n)??0)&&0===(ye(d[0],n)??0))return null;const c=he.callArgs(e);return 3!==c.length?null:new fe(t.ast.text(e),e,c[0],c[1],c[2])}}class Ce{url;text;node;constructor(e,t,n){this.url=e,this.text=t,this.node=n}}class Ee extends(pe(Ce)){matches(e,t){if("CallLiteral"!==e.name)return null;const n=e.getChild("CallTag");if(!n||"url"!==t.ast.text(n))return null;const[,i,s,o]=he.siblings(n);if("("!==t.ast.text(i)||"ParenthesizedContent"!==s.name&&"StringLiteral"!==s.name||")"!==t.ast.text(o))return null;const r=t.ast.text(s),a="StringLiteral"===s.name?r.substr(1,r.length-2):r.trim();return new Ce(a,t.ast.text(e),e)}}class be{text;node;constructor(e,t){this.text=e,this.node=t}}class ve extends(pe(be)){matches(e,t){const n=t.ast.text(e);return"CallExpression"===e.name&&"linear-gradient"===t.ast.text(e.getChild("Callee"))?new be(n,e):null}accepts(e){return["background","background-image","-webkit-mask-image"].includes(e)}}class we{text;node;constructor(e,t){this.text=e,this.node=t}}class xe extends(pe(we)){accepts(e){return n.CSSMetadata.cssMetadata().isColorAwareProperty(e)}matches(t,n){const i=n.ast.text(t);if("ColorLiteral"===t.name)return new we(i,t);if("ValueName"===t.name&&e.Color.Nicknames.has(i))return new we(i,t);if("CallExpression"===t.name){const e=t.getChild("Callee");if(e&&n.ast.text(e).match(/^(rgba?|hsla?|hwba?|lab|lch|oklab|oklch|color)$/))return new we(i,t)}return null}}class Te{text;node;light;dark;constructor(e,t,n,i){this.text=e,this.node=t,this.light=n,this.dark=i}}class Me extends(pe(Te)){accepts(e){return n.CSSMetadata.cssMetadata().isColorAwareProperty(e)}matches(e,t){if("CallExpression"!==e.name||"light-dark"!==t.ast.text(e.getChild("Callee")))return null;const n=he.callArgs(e);return 2!==n.length||0===n[0].length||0===n[1].length?null:new Te(t.ast.text(e),e,n[0],n[1])}}class Ne{text;node;properyName;constructor(e,t,n){this.text=e,this.node=t,this.properyName=n}}class Ie extends(pe(Ne)){static isLinkableNameProperty(e){return["animation","animation-name","font-palette","position-try-options","position-try"].includes(e)}static identifierAnimationLonghandMap=new Map(Object.entries({normal:"direction",alternate:"direction",reverse:"direction","alternate-reverse":"direction",none:"fill-mode",forwards:"fill-mode",backwards:"fill-mode",both:"fill-mode",running:"play-state",paused:"play-state",infinite:"iteration-count",linear:"easing-function",ease:"easing-function","ease-in":"easing-function","ease-out":"easing-function","ease-in-out":"easing-function"}));matchAnimationNameInShorthand(e,t){const n=t.ast.text(e);if(!Ie.identifierAnimationLonghandMap.has(n))return new Ne(n,e,"animation");const i=he.split(he.siblings(he.declValue(t.ast.tree))).find((t=>t[0].from<=e.from&&t[t.length-1].to>=e.to));if(!i)return null;const s=t.getComputedTextRange(i[0],e),o=ue("--p",s);if(!o)return null;const r=Ie.identifierAnimationLonghandMap.get(n);for(let t=he.declValue(o.tree);t?.nextSibling;t=t.nextSibling)if("ValueName"===t.name){const i=Ie.identifierAnimationLonghandMap.get(o.text(t));if(i&&i===r)return new Ne(n,e,"animation")}return null}accepts(e){return Ie.isLinkableNameProperty(e)}matches(e,t){const{propertyName:n}=t.ast,i=t.ast.text(e),s=e.parent;if(!s)return null;const o="Declaration"===s.name,r="ArgList"===s.name&&"Callee"===s.prevSibling?.name&&"var"===t.ast.text(s.prevSibling),a=o||r,l="position-try"===n||"position-try-options"===n;return!n||"ValueName"!==e.name&&"VariableName"!==e.name||!a||"ValueName"===e.name&&l?null:"animation"===n?this.matchAnimationNameInShorthand(e,t):new Ne(i,e,n)}}class Pe{text;node;constructor(e,t){this.text=e,this.node=t}}class Oe extends(pe(Pe)){accepts(e){return n.CSSMetadata.cssMetadata().isBezierAwareProperty(e)}matches(e,t){const n=t.ast.text(e),s="ValueName"===e.name&&i.Geometry.CubicBezier.KeywordValues.has(n),o="CallExpression"===e.name&&["cubic-bezier","linear"].includes(t.ast.text(e.getChild("Callee")));return(s||o)&&y.AnimationTimingModel.AnimationTimingModel.parse(n)?new Pe(n,e):null}}class Le{text;node;constructor(e,t){this.text=e,this.node=t}}class Ae extends(pe(Le)){matches(e,t){return"StringLiteral"===e.name?new Le(t.ast.text(e),e):null}}class ke{text;node;shadowType;constructor(e,t,n){this.text=e,this.node=t,this.shadowType=n}}class Re extends(pe(ke)){accepts(e){return n.CSSMetadata.cssMetadata().isShadowProperty(e)}matches(e,t){if("Declaration"!==e.name)return null;const n=he.siblings(he.declValue(e)),i=t.ast.textRange(n[0],n[n.length-1]);return new ke(i,e,"text-shadow"===t.ast.propertyName?"textShadow":"boxShadow")}}class De{text;node;constructor(e,t){this.text=e,this.node=t}}class Fe extends(pe(De)){accepts(e){return n.CSSMetadata.cssMetadata().isFontAwareProperty(e)}matches(e,t){if("Declaration"===e.name)return null;const n="font-family"===t.ast.propertyName?y.FontEditorUtils.FontFamilyRegex:y.FontEditorUtils.FontPropertiesRegex,i=t.ast.text(e);return n.test(i)?new De(i,e):null}}class Ue{text;node;constructor(e,t){this.text=e,this.node=t}}class Be extends(pe(Ue)){matches(e,t){const n=t.ast.text(e),i=new RegExp(`^${y.CSSLengthUtils.CSSLengthRegex.source}$`).exec(n);return i&&0===i.index?new Ue(i[0],e):null}}class _e{text;node;lines;constructor(e,t,n){this.text=e,this.node=t,this.lines=n}}class Ve extends(pe(_e)){accepts(e){return n.CSSMetadata.cssMetadata().isGridAreaDefiningProperty(e)}matches(e,t){if("Declaration"!==e.name||t.hasUnresolvedVars(e))return null;const i=[];let s=[],o=!1,r=!1;const a=he.siblings(he.declValue(e));!function e(a,l=!1){for(const d of a)if(t.getMatch(d)instanceof n.CSSPropertyParser.VariableMatch){const n=ue("--property",t.getComputedText(d));if(!n)continue;const a=he.siblings(he.declValue(n.tree));if(0===a.length)continue;"StringLiteral"===a[0].name&&!o||"LineNames"===a[0].name&&!r?(i.push(s),s=[d]):s.push(d),e(a,!0)}else"BinaryExpression"===d.name?e(he.siblings(d.firstChild)):"StringLiteral"===d.name?(l||(o?s.push(d):(i.push(s),s=[d])),r=!0,o=!1):"LineNames"===d.name?(l||(r?s.push(d):(i.push(s),s=[d])),o=!r,r=!r):l||s.push(d)}(a),i.push(s);const l=t.ast.textRange(a[0],a[a.length-1]);return new _e(l,e,i.filter((e=>e.length>0)))}}class He{text;matching;node;functionName;args;constructor(e,t,n,i,s){this.text=e,this.matching=t,this.node=n,this.functionName=i,this.args=s}}class We extends(pe(He)){matches(e,t){if("CallExpression"!==e.name)return null;const n=t.ast.text(e.getChild("Callee"));if("anchor"!==n&&"anchor-size"!==n)return null;const[i]=he.callArgs(e);return i&&0!==i.length?new He(t.ast.text(e),t,e,n,i):null}}class je{text;matching;node;constructor(e,t,n){this.text=e,this.matching=t,this.node=n}}class ze extends(pe(je)){accepts(e){return"position-anchor"===e}matches(e,t){if("VariableName"!==e.name)return null;const n=t.ast.text(e);return new je(n,t,e)}}var $e=Object.freeze({__proto__:null,AngleMatch:me,AngleMatcher:ge,ColorMixMatch:fe,ColorMixMatcher:Se,URLMatch:Ce,URLMatcher:Ee,LinearGradientMatch:be,LinearGradientMatcher:ve,ColorMatch:we,ColorMatcher:xe,LightDarkColorMatch:Te,LightDarkColorMatcher:Me,LinkableNameMatch:Ne,LinkableNameMatcher:Ie,BezierMatch:Pe,BezierMatcher:Oe,StringMatch:Le,StringMatcher:Ae,ShadowMatch:ke,ShadowMatcher:Re,FontMatch:De,FontMatcher:Fe,LengthMatch:Ue,LengthMatcher:Be,GridTemplateMatch:_e,GridTemplateMatcher:Ve,AnchorFunctionMatch:He,AnchorFunctionMatcher:We,PositionAnchorMatch:je,PositionAnchorMatcher:ze});const Ke=["Layout","Text","Appearance","Animation","CSS Variables","Grid","Flex","Table","Generated Content","Other"],Ge=new Map([["Layout",["display","margin","padding","height","width","position","top","right","bottom","left","z-index","float","clear","overflow","resize","clip","visibility","box-sizing","align-content","align-items","align-self","flex","flex-basis","flex-direction","flex-flow","flex-grow","flex-shrink","flex-wrap","justify-content","order","inline-size","block-size","min-inline-size","min-block-size","max-inline-size","max-block-size","min-width","max-width","min-height","max-height"]],["Text",["font","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","font-smoothing","direction","tab-size","text-align","text-align-last","text-decoration","text-decoration-color","text-decoration-line","text-decoration-style","text-indent","text-justify","text-overflow","text-shadow","text-transform","text-size-adjust","line-height","vertical-align","letter-spacing","word-spacing","white-space","word-break","word-wrap"]],["Appearance",["color","outline","outline-color","outline-offset","outline-style","Outline-width","border","border-image","background","cursor","box-shadow","≈","tap-highlight-color"]],["Animation",["animation","animation-delay","animation-direction","animation-duration","animation-fill-mode","animation-iteration-count","animation-name","animation-play-state","animation-timing-function","transition","transition-delay","transition-duration","transition-property","transition-timing-function"]],["Grid",["grid","grid-column","grid-row","order","place-items","place-content","place-self"]],["Flex",["flex","order","place-items","place-content","place-self"]],["Table",["border-collapse","border-spacing","caption-side","empty-cells","table-layout"]],["Generated Content",["content","quotes","counter-reset","counter-increment"]]]),Ye=new Map;for(const[e,t]of Ge)for(const n of t){Ye.has(n)||Ye.set(n,[]);Ye.get(n).push(e)}const qe=e=>Ye.has(e)?Ye.get(e):e.startsWith("--")?["CSS Variables"]:[],Xe=e=>{const t=n.CSSMetadata.cssMetadata(),i=t.canonicalPropertyName(e),s=qe(i);if(s.length>0)return s;const o=t.getShorthands(i);if(o)for(const e of o){const t=qe(e);if(t.length>0)return t}return["Other"]};class Qe extends i.Widget.VBox{computedStyleModelInternal;updateThrottler;updateWhenVisible;constructor(t){super(!0,t),this.element.classList.add("flex-none"),this.computedStyleModelInternal=new Z,this.computedStyleModelInternal.addEventListener("ComputedStyleChanged",this.onCSSModelChanged,this),this.updateThrottler=new e.Throttler.Throttler(100),this.updateWhenVisible=!1}node(){return this.computedStyleModelInternal.node()}cssModel(){return this.computedStyleModelInternal.cssModel()}computedStyleModel(){return this.computedStyleModelInternal}async doUpdate(){}update(){this.updateWhenVisible=!this.isShowing(),this.updateWhenVisible||this.updateThrottler.schedule(function(){return this.isShowing()?this.doUpdate():Promise.resolve()}.bind(this))}wasShown(){super.wasShown(),this.updateWhenVisible&&this.update()}onCSSModelChanged(e){}}var Je=Object.freeze({__proto__:null,ElementsSidebarPane:Qe});const Ze=new CSSStyleSheet;Ze.replaceSync(".styles-layers-pane{overflow:hidden;padding-left:2px;background-color:var(--sys-color-cdt-base-container);border-bottom:1px solid var(--sys-color-divider);margin-top:0;padding-bottom:2px}.styles-layers-pane > div{font-weight:bold;margin:8px 4px 6px}.styles-layers-pane > table{width:100%;border-spacing:0}.styles-layers-pane td{padding:0}\n/*# sourceURL=layersWidget.css */\n");const et={cssLayersTitle:"CSS layers",toggleCSSLayers:"Toggle CSS Layers view"},tt=r.i18n.registerUIStrings("panels/elements/LayersWidget.ts",et),nt=r.i18n.getLocalizedString.bind(void 0,tt);let it,st;class ot extends i.Widget.Widget{cssModel;layerTreeComponent=new h.TreeOutline.TreeOutline;constructor(){super(!0),this.contentElement.className="styles-layers-pane",this.contentElement.setAttribute("jslog",`${s.pane("css-layers")}`),i.UIUtils.createTextChild(this.contentElement.createChild("div"),nt(et.cssLayersTitle)),this.contentElement.appendChild(this.layerTreeComponent),i.Context.Context.instance().addFlavorChangeListener(n.DOMModel.DOMNode,this.update,this)}updateModel(e){this.cssModel!==e&&(this.cssModel&&this.cssModel.removeEventListener(n.CSSModel.Events.StyleSheetChanged,this.update,this),this.cssModel=e,this.cssModel&&this.cssModel.addEventListener(n.CSSModel.Events.StyleSheetChanged,this.update,this))}async wasShown(){return super.wasShown(),this.registerCSSFiles([Ze]),this.update()}async update(){if(!this.isShowing())return;let e=i.Context.Context.instance().flavor(n.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),!e)return;if(this.updateModel(e.domModel().cssModel()),!this.cssModel)return;const t=e=>i=>{const s=i.subLayers,o=n.CSSModel.CSSModel.readableLayerName(i.name),r=i.order+": "+o,a=e?e+"."+o:o;return s?{treeNodeData:r,id:a,children:()=>Promise.resolve(s.sort(((e,t)=>e.order-t.order)).map(t(a)))}:{treeNodeData:r,id:a}},s=await this.cssModel.getRootLayer(e.id);this.layerTreeComponent.data={defaultRenderer:h.TreeOutline.defaultRenderer,tree:[t("")(s)]},await this.layerTreeComponent.expandRecursively(5)}async revealLayer(e){return this.isShowing()||Ls.instance().showToolbarPane(this,rt.instance().item()),await this.update(),this.layerTreeComponent.expandToAndSelectTreeNodeId("implicit outer layer."+e)}static instance(e={forceNew:null}){const{forceNew:t}=e;return it&&!t||(it=new ot),it}}class rt{button;constructor(){this.button=new i.Toolbar.ToolbarToggle(nt(et.toggleCSSLayers),"layers","layers-filled"),this.button.setVisible(!1),this.button.addEventListener("Click",this.clicked,this),this.button.element.classList.add("monospace"),this.button.element.setAttribute("jslog",`${s.toggleSubpane("css-layers").track({click:!0})}`)}static instance(e={forceNew:null}){const{forceNew:t}=e;return st&&!t||(st=new rt),st}clicked(){const e=ot.instance();Ls.instance().showToolbarPane(e.isShowing()?null:e,this.button)}item(){return this.button}}var at=Object.freeze({__proto__:null,LayersWidget:ot,ButtonProvider:rt});const lt=(e,t)=>void 0===t?dt(e):'<code class="unbreakable-text"><span class="property">'+e+"</span>: "+t+"</code>",dt=e=>'<code class="unbreakable-text"><span class="property">'+e+"</span></code>",ct=e=>'<code class="unbreakable-text">'+e+"</code>",ht=e=>{if(!e)return!1;const t=e.get("display");return"flex"===t||"inline-flex"===t},pt=new Set(["block","flow-root","inline-block","list-item","table-caption","table-cell"]),ut=new Set(["audio","canvas","embed","iframe","img","input","object","video"]),mt=e=>{if(!e)return!1;const t=e.get("display");return"grid"===t||"inline-grid"===t},gt={ruleViolatedBySameElementRuleReason:"The {REASON_PROPERTY_DECLARATION_CODE} property prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.",ruleViolatedBySameElementRuleFix:"Try setting {PROPERTY_NAME} to something other than {PROPERTY_VALUE}.",ruleViolatedBySameElementRuleChangeFlexOrGrid:"Try adding {DISPLAY_GRID_RULE} or {DISPLAY_FLEX_RULE} to make this element into a container.",ruleViolatedBySameElementRuleChangeSuggestion:"Try setting the {EXISTING_PROPERTY_DECLARATION} property to {TARGET_PROPERTY_DECLARATION}.",ruleViolatedByParentElementRuleReason:"The {REASON_PROPERTY_DECLARATION_CODE} property on the parent element prevents {AFFECTED_PROPERTY_DECLARATION_CODE} from having an effect.",ruleViolatedByParentElementRuleFix:"Try setting the {EXISTING_PARENT_ELEMENT_RULE} property on the parent to {TARGET_PARENT_ELEMENT_RULE}.",fontVariationSettingsWarning:"Value for setting “{PH1}” {PH2} is outside the supported range [{PH3}, {PH4}] for font-family “{PH5}”.",flexGridContainerPropertyRuleReason:"This element is a {CONTAINER_DISPLAY_NAME} item, i.e. a child of a {CONTAINER_DISPLAY_NAME} container, but {PROPERTY_NAME} only applies to containers.",flexGridContainerPropertyRuleFix:"Try setting the {PROPERTY_NAME} on the container element or use {ALTERNATIVE_PROPERTY_NAME} instead."},yt=r.i18n.registerUIStrings("panels/elements/CSSRuleValidator.ts",gt),ft=r.i18n.getLocalizedString.bind(void 0,yt);class St{#e;#t;#n;constructor(e,t,n){this.#e=e,this.#t=t,this.#n=n}getMessage(){return this.#e}getPossibleFixMessage(){return this.#t}getLearnMoreLink(){return this.#n}}class Ct{getMetricType(){return 0}#i;constructor(e){this.#i=e}getApplicableProperties(){return this.#i}}class Et extends Ct{constructor(){super(["align-content"])}getMetricType(){return 1}getHint(e,t){if(!t)return;const n=ht(t);if(!n&&!(e=>{if(!e)return!1;const t=e.get("display");if(!t)return!1;const n=t.split(" ");return!(n.length>3)&&(3===n.length?"list-item"===n[2]:2===n.length?"list-item"===n[1]&&"inline"!==n[0]:pt.has(n[0]))})(t)&&!mt(t)){const e=lt("display",t?.get("display")),n=dt("align-content");return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:e,AFFECTED_PROPERTY_DECLARATION_CODE:n}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("display"),PROPERTY_VALUE:ct(t?.get("display"))}))}if(!n)return;if("nowrap"!==t.get("flex-wrap"))return;const i=lt("flex-wrap","nowrap"),s=dt("align-content");return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("flex-wrap"),PROPERTY_VALUE:ct("nowrap")}))}}class bt extends Ct{constructor(){super(["flex","flex-basis","flex-grow","flex-shrink"])}getMetricType(){return 2}getHint(e,t,n){if(!n)return;if(ht(n))return;const i=lt("display",n?.get("display")),s=dt(e),o=lt("display","flex");return new St(ft(gt.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:i,TARGET_PARENT_ELEMENT_RULE:o}))}}class vt extends Ct{constructor(){super(["flex-direction","flex-flow","flex-wrap"])}getMetricType(){return 3}getHint(e,t){if(!t)return;if(ht(t))return;const n=lt("display",t?.get("display")),i=lt("display","flex"),s=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:n,TARGET_PROPERTY_DECLARATION:i}))}}class wt extends Ct{constructor(){super(["grid","grid-auto-columns","grid-auto-flow","grid-auto-rows","grid-template","grid-template-areas","grid-template-columns","grid-template-rows"])}getMetricType(){return 4}getHint(e,t){if(mt(t))return;const n=lt("display",t?.get("display")),i=lt("display","grid"),s=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedBySameElementRuleChangeSuggestion,{EXISTING_PROPERTY_DECLARATION:n,TARGET_PROPERTY_DECLARATION:i}))}}class xt extends Ct{constructor(){super(["grid-area","grid-column","grid-row","grid-row-end","grid-row-start","justify-self"])}getMetricType(){return 5}getHint(e,t,n){if(!n)return;if(mt(n))return;const i=lt("display",n?.get("display")),s=lt("display","grid"),o=dt(e);return new St(ft(gt.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:o}),ft(gt.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:i,TARGET_PARENT_ELEMENT_RULE:s}))}}class Tt extends Ct{constructor(){super(["place-self","align-self","order"])}getMetricType(){return 12}getHint(e,t,n){if(!n)return;if(ht(n)||mt(n))return;const i=lt("display",n?.get("display")),s=`${lt("display","flex")} or ${lt("display","grid")}`,o=dt(e);return new St(ft(gt.ruleViolatedByParentElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:o}),ft(gt.ruleViolatedByParentElementRuleFix,{EXISTING_PARENT_ELEMENT_RULE:i,TARGET_PARENT_ELEMENT_RULE:s}))}}class Mt extends Ct{constructor(){super(["justify-content","place-content","align-items"])}getMetricType(){return 6}getHint(e,t,n){if(!t)return;if(ht(t)||mt(t))return;if(n&&(ht(n)||mt(n))){const t=ct(n.get("display")),i=dt(e),s=dt("justify-content"===e?"justify-self":"align-self");return new St(ft(gt.flexGridContainerPropertyRuleReason,{CONTAINER_DISPLAY_NAME:t,PROPERTY_NAME:i}),ft(gt.flexGridContainerPropertyRuleFix,{PROPERTY_NAME:i,ALTERNATIVE_PROPERTY_NAME:s}))}const i=lt("display",t.get("display")),s=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedBySameElementRuleChangeFlexOrGrid,{DISPLAY_GRID_RULE:lt("display","grid"),DISPLAY_FLEX_RULE:lt("display","flex")}))}}class Nt extends Ct{constructor(){super(["gap","column-gap","row-gap","grid-gap","grid-column-gap","grid-column-end","grid-row-gap"])}getMetricType(){return 7}getHint(e,t){if(!t)return;if((e=>{if(!e)return!1;const t=e.get("column-width"),n=e.get("column-count");return"auto"!==t||"auto"!==n})(t)||ht(t)||mt(t))return;const n=lt("display",t?.get("display")),i=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:n,AFFECTED_PROPERTY_DECLARATION_CODE:i}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("display"),PROPERTY_VALUE:ct(t?.get("display"))}))}}class It extends Ct{constructor(){super(["padding","padding-top","padding-right","padding-bottom","padding-left"])}getMetricType(){return 8}getHint(e,t){const n=t?.get("display");if(!n)return;if(!["table-row-group","table-header-group","table-footer-group","table-row","table-column-group","table-column"].includes(n))return;const i=lt("display",t?.get("display")),s=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("display"),PROPERTY_VALUE:ct(t?.get("display"))}))}}class Pt extends Ct{constructor(){super(["top","right","bottom","left"])}getMetricType(){return 9}getHint(e,t){const n=t?.get("position");if(!n)return;if("static"!==n)return;const i=lt("position",t?.get("position")),s=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:i,AFFECTED_PROPERTY_DECLARATION_CODE:s}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("position"),PROPERTY_VALUE:ct(t?.get("position"))}))}}class Ot extends Ct{constructor(){super(["z-index"])}getMetricType(){return 10}getHint(e,t,n){const i=t?.get("position");if(!i)return;if(["absolute","relative","fixed","sticky"].includes(i)||ht(n)||mt(n))return;const s=lt("position",t?.get("position")),o=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("position"),PROPERTY_VALUE:ct(t?.get("position"))}))}}class Lt extends Ct{constructor(){super(["width","height"])}getMetricType(){return 11}getHint(e,t,n,i){if(!t||!i)return;if(!(e=>!!e&&"inline"===e.get("display"))(t))return;if((e=>!!e&&ut.has(e))(i))return;const s=lt("display",t?.get("display")),o=dt(e);return new St(ft(gt.ruleViolatedBySameElementRuleReason,{REASON_PROPERTY_DECLARATION_CODE:s,AFFECTED_PROPERTY_DECLARATION_CODE:o}),ft(gt.ruleViolatedBySameElementRuleFix,{PROPERTY_NAME:dt("display"),PROPERTY_VALUE:ct(t?.get("display"))}))}}class At extends Ct{constructor(){super(["font-variation-settings"])}getMetricType(){return 13}getHint(e,t,i,s,o){if(!t)return;const r=t.get("font-variation-settings");if(!r)return;const a=t.get("font-family");if(!a)return;const l=new Set(n.CSSPropertyParser.parseFontFamily(a)),d=(o||[]).filter((e=>l.has(e.getFontFamily()))),c=n.CSSPropertyParser.parseFontVariationSettings(r),h=[];for(const e of c)for(const t of d){const n=t.getVariationAxisByTag(e.tag);n&&((e.value<n.minValue||e.value>n.maxValue)&&h.push(ft(gt.fontVariationSettingsWarning,{PH1:e.tag,PH2:e.value,PH3:n.minValue,PH4:n.maxValue,PH5:t.getFontFamily()})))}return h.length?new St(h.join(" "),""):void 0}}const kt=[Et,vt,Mt,bt,Tt,At,wt,xt,Nt,It,Pt,Lt,Ot],Rt=(()=>{const e=new Map;for(const t of kt){const n=new t,i=n.getApplicableProperties();for(const t of i){let i=e.get(t);void 0===i&&(i=[]),i.push(n),e.set(t,i)}}return e})();var Dt=Object.freeze({__proto__:null,Hint:St,CSSRuleValidator:Ct,AlignContentValidator:Et,FlexItemValidator:bt,FlexContainerValidator:vt,GridContainerValidator:wt,GridItemValidator:xt,FlexOrGridItemValidator:Tt,FlexGridValidator:Mt,MulticolFlexGridValidator:Nt,PaddingValidator:It,PositionValidator:Pt,ZIndexValidator:Ot,SizingValidator:Lt,FontVariationSettingsValidator:At,cssRuleValidatorsMap:Rt});function Ft(e){const{name:t,value:n}=e;return`${t.startsWith("--")?`'${t}'`:t.replace(/-([a-z])/gi,((e,t)=>t.toUpperCase()))}: ${`'${n.replaceAll("'","\\'")}'`}`}var Ut=Object.freeze({__proto__:null,getCssDeclarationAsJavascriptProperty:Ft});const Bt=n.CSSPropertyParser.ASTUtils,_t=p.StylePropertyEditor.FlexboxEditor,Vt=p.StylePropertyEditor.GridEditor,Ht=new WeakMap,Wt={shiftClickToChangeColorFormat:"Shift + Click to change color format.",openColorPickerS:"Open color picker. {PH1}",togglePropertyAndContinueEditing:"Toggle property and continue editing",revealInSourcesPanel:"Reveal in Sources panel",copyDeclaration:"Copy declaration",copyProperty:"Copy property",copyValue:"Copy value",copyRule:"Copy rule",copyAllDeclarations:"Copy all declarations",copyAllCSSChanges:"Copy all CSS changes",viewComputedValue:"View computed value",flexboxEditorButton:"Open `flexbox` editor",gridEditorButton:"Open `grid` edit