@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/StylePropertyTreeElement.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 Platform from"../../core/platform/platform.js";import*as Root from"../../core/root/root.js";import*as SDK from"../../core/sdk/sdk.js";import*as Bindings from"../../models/bindings/bindings.js";import*as TextUtils from"../../models/text_utils/text_utils.js";import*as IconButton from"../../ui/components/icon_button/icon_button.js";import*as ColorPicker from"../../ui/legacy/components/color_picker/color_picker.js";import*as InlineEditor from"../../ui/legacy/components/inline_editor/inline_editor.js";import*as UI from"../../ui/legacy/legacy.js";import{BezierPopoverIcon,ColorSwatchPopoverIcon,ShadowSwatchPopoverHelper}from"./ColorSwatchPopoverIcon.js";import*as ElementsComponents from"./components/components.js";import{cssRuleValidatorsMap}from"./CSSRuleValidator.js";import{ElementsPanel}from"./ElementsPanel.js";import{StyleEditorWidget}from"./StyleEditorWidget.js";import{getCssDeclarationAsJavascriptProperty}from"./StylePropertyUtils.js";import{CSSPropertyPrompt,REGISTERED_PROPERTY_SECTION_NAME,StylesSidebarPane,StylesSidebarPropertyRenderer}from"./StylesSidebarPane.js";const FlexboxEditor=ElementsComponents.StylePropertyEditor.FlexboxEditor,GridEditor=ElementsComponents.StylePropertyEditor.GridEditor;export const activeHints=new WeakMap;const UIStrings={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` editor",copyCssDeclarationAsJs:"Copy declaration as JS",copyAllCssDeclarationsAsJs:"Copy all declarations as JS"},str_=i18n.i18n.registerUIStrings("panels/elements/StylePropertyTreeElement.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),parentMap=new WeakMap;export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement{style;matchedStylesInternal;property;inheritedInternal;overloadedInternal;parentPaneInternal;isShorthand;applyStyleThrottler;newProperty;expandedDueToFilter;valueElement;nameElement;expandElement;originalPropertyText;hasBeenEditedIncrementally;prompt;lastComputedValue;computedStyles=null;parentsComputedStyles=null;contextForTest;#e;constructor({stylesPane:e,matchedStyles:t,property:n,isShorthand:i,inherited:s,overloaded:r,newProperty:o}){super("",i),this.style=n.ownerStyle,this.matchedStylesInternal=t,this.property=n,this.inheritedInternal=s,this.overloadedInternal=r,this.selectable=!1,this.parentPaneInternal=e,this.isShorthand=i,this.applyStyleThrottler=new Common.Throttler.Throttler(0),this.newProperty=o,this.newProperty&&(this.listItemElement.textContent=""),this.expandedDueToFilter=!1,this.valueElement=null,this.nameElement=null,this.expandElement=null,this.originalPropertyText="",this.hasBeenEditedIncrementally=!1,this.prompt=null,this.lastComputedValue=null,this.#e=n.propertyText||""}matchedStyles(){return this.matchedStylesInternal}editable(){return Boolean(this.style.styleSheetId&&this.style.range)}inherited(){return this.inheritedInternal}overloaded(){return this.overloadedInternal}setOverloaded(e){e!==this.overloadedInternal&&(this.overloadedInternal=e,this.updateState())}setComputedStyles(e){this.computedStyles=e}setParentsComputedStyles(e){this.parentsComputedStyles=e}get name(){return this.property.name}get value(){return this.property.value}updateFilter(){const e=this.parentPaneInternal.filterRegex(),t=null!==e&&(e.test(this.property.name)||e.test(this.property.value));this.listItemElement.classList.toggle("filter-match",t),this.onpopulate();let n=!1;for(let e=0;e<this.childCount();++e){const t=this.childAt(e);!t||t&&!t.updateFilter()||(n=!0)}return e?n&&!this.expanded?(this.expand(),this.expandedDueToFilter=!0):!n&&this.expanded&&this.expandedDueToFilter&&(this.collapse(),this.expandedDueToFilter=!1):(this.expandedDueToFilter&&this.collapse(),this.expandedDueToFilter=!1),t}renderColorSwatch(e,t){const n=this.editable(),i=i18nString(UIStrings.shiftClickToChangeColorFormat),s=this.editable()?i18nString(UIStrings.openColorPickerS,{PH1:i}):i,r=new InlineEditor.ColorSwatch.ColorSwatch;if(r.renderColor(e,n,s),!t){t=r.createChild("span");const n=r.getColor();t.textContent=n?n.getAuthoredText()??n.asString(r.getFormat()??void 0):e}r.appendChild(t);if(r.addEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName,(()=>{Host.userMetrics.swatchActivated(2)})),r.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName,(e=>{const{data:t}=e;r.firstElementChild&&r.firstElementChild.remove(),r.createChild("span").textContent=t.text,this.applyStyleText(this.renderedPropertyText(),!1)})),this.editable()){const e=new ColorSwatchPopoverIcon(this,this.parentPaneInternal.swatchPopoverHelper(),r);e.addEventListener("colorchanged",(e=>{r.dispatchEvent(new InlineEditor.ColorSwatch.ColorChangedEvent(e.data))})),this.addColorContrastInfo(e)}return r}processAnimationName(e){const t=e.split(",").map((e=>e.trim())),n=document.createElement("span");for(let e=0;e<t.length;e++){const i=t[e],s=new InlineEditor.LinkSwatch.LinkSwatch;UI.UIUtils.createTextChild(s,i);const r=Boolean(this.matchedStylesInternal.keyframes().find((e=>e.name().text===i)));s.data={text:i,isDefined:r,onLinkActivate:()=>{Host.userMetrics.swatchActivated(1),this.parentPaneInternal.jumpToSectionBlock(`@keyframes ${i}`)}},n.appendChild(s),e!==t.length-1&&n.appendChild(document.createTextNode(", "))}return n}processAnimation(e){const t=this.property.getLonghandProperties().find((e=>"animation-name"===e.name));if(!t)return document.createTextNode(e);const n=t.value.split(",").map((e=>e.trim())),i=InlineEditor.CSSAnimationModel.CSSAnimationModel.parse(e,n),s=document.createElement("span");for(let e=0;e<i.parts.length;e++){const t=i.parts[e];switch(t.type){case"T":s.appendChild(document.createTextNode(t.value));break;case"EF":s.appendChild(this.processBezier(t.value));break;case"AN":s.appendChild(this.processAnimationName(t.value));break;case"V":s.appendChild(this.processVar(t.value))}","!==i.parts[e+1]?.value&&e!==i.parts.length-1&&s.appendChild(document.createTextNode(" "))}return s}processPositionFallback(e){const t=document.createElement("span"),n=new InlineEditor.LinkSwatch.LinkSwatch;UI.UIUtils.createTextChild(n,e);const i=Boolean(this.matchedStylesInternal.positionFallbackRules().find((t=>t.name().text===e)));return n.data={text:e,isDefined:i,onLinkActivate:()=>{Host.userMetrics.swatchActivated(9),this.parentPaneInternal.jumpToSectionBlock(`@position-fallback ${e}`)}},t.appendChild(n),t}processColor(e,t){return this.renderColorSwatch(e,t)}processColorMix(e){let t=e,n=!1;const i=[],s=InlineEditor.ColorMixModel.ColorMixModel.parse(e);if(!s)return document.createTextNode(e);const r=(e,n)=>{if(e.match(SDK.CSSMetadata.VariableRegex)){const s=this.matchedStylesInternal.computeSingleVariableValue(this.style,e);if(!s||!s.computedValue||!Common.Color.parse(s.computedValue))return;const{computedValue:r}=s;t=t.replace(e,r);const o=this.processVar(e);return o instanceof InlineEditor.ColorSwatch.ColorSwatch&&o.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName,(e=>{n(e.data.text)})),h.appendChild(o),void i.push(s.computedValue)}if(e.match(Common.Color.Regex)){const t=this.processColor(e);t instanceof InlineEditor.ColorSwatch.ColorSwatch&&t.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName,(e=>{n(e.data.text)})),h.appendChild(t),i.push(e)}},o=(e,t)=>{for(let n=0;n<e.length;n++){const i=e[n];"V"===i.name?r(i.value,t):h.appendChild(document.createTextNode(i.value)),n!==e.length-1&&h.appendChild(document.createTextNode(" "))}},[a,l,d]=s.parts,p=new InlineEditor.ColorMixSwatch.ColorMixSwatch,h=document.createElement("span");return h.appendChild(document.createTextNode("color-mix(")),(e=>{const i=TextUtils.TextUtils.Utils.splitStringByRegexes(e,[SDK.CSSMetadata.VariableRegex]);for(const e of i)if(0===e.regexIndex){const n=this.matchedStylesInternal.computeSingleVariableValue(this.style,e.value);if(!n||!n.computedValue)return;t=t.replace(e.value,n.computedValue);const i=this.processVar(e.value);h.appendChild(i)}else h.appendChild(document.createTextNode(e.value));n=!0})(a.value),h.appendChild(document.createTextNode(", ")),o(l.value,(e=>{p.setFirstColor(e)})),h.appendChild(document.createTextNode(", ")),o(d.value,(e=>{p.setSecondColor(e)})),h.appendChild(document.createTextNode(")")),2===i.length&&n?(p.appendChild(h),p.setFirstColor(i[0]),p.setSecondColor(i[1]),p.setColorMixText(t),p):document.createTextNode(e)}processVar(e){const t=this.matchedStylesInternal.computeSingleVariableValue(this.style,e);if(!t)return document.createTextNode(e);const{computedValue:n,fromFallback:i}=t,s=new InlineEditor.LinkSwatch.CSSVarSwatch;if(UI.UIUtils.createTextChild(s,e),s.data={text:e,computedValue:n,fromFallback:i,onLinkActivate:this.handleVarDefinitionActivate.bind(this)},s.link?.linkElement){const{textContent:e}=s.link.linkElement;this.parentPaneInternal.addPopover(s.link,(()=>e?this.#t(e,n):void 0))}return n&&Common.Color.parse(n)?this.processColor(n,s):s}handleVarDefinitionActivate(e){Host.userMetrics.actionTaken(Host.UserMetrics.Action.CustomPropertyLinkClicked),Host.userMetrics.swatchActivated(0),this.parentPaneInternal.jumpToProperty(e)||this.parentPaneInternal.jumpToProperty("initial-value",e,REGISTERED_PROPERTY_SECTION_NAME)}async addColorContrastInfo(e){if("color"!==this.property.name||!this.parentPaneInternal.cssModel()||!this.node())return;const t=this.parentPaneInternal.cssModel(),n=this.node();if(t&&n&&void 0!==n.id){const i=new ColorPicker.ContrastInfo.ContrastInfo(await t.getBackgroundColors(n.id));e.setContrastInfo(i)}}renderedPropertyText(){return this.nameElement&&this.valueElement?this.nameElement.textContent+": "+this.valueElement.textContent:""}processBezier(e){if(!this.editable()||!InlineEditor.AnimationTimingModel.AnimationTimingModel.parse(e))return document.createTextNode(e);const t=this.parentPaneInternal.swatchPopoverHelper(),n=InlineEditor.Swatches.BezierSwatch.create();return n.iconElement().addEventListener("click",(()=>{Host.userMetrics.swatchActivated(3)})),n.setBezierText(e),new BezierPopoverIcon({treeElement:this,swatchPopoverHelper:t,swatch:n}),n}processFont(e){const t=this.section();return t&&t.registerFontProperty(this),document.createTextNode(e)}processShadow(e,t){if(!this.editable())return document.createTextNode(e);let n;if(n="text-shadow"===t?InlineEditor.CSSShadowModel.CSSShadowModel.parseTextShadow(e):InlineEditor.CSSShadowModel.CSSShadowModel.parseBoxShadow(e),!n.length)return document.createTextNode(e);const i=document.createDocumentFragment(),s=this.parentPaneInternal.swatchPopoverHelper();for(let e=0;e<n.length;e++){0!==e&&i.appendChild(document.createTextNode(", "));const t=InlineEditor.Swatches.CSSShadowSwatch.create();t.setCSSShadow(n[e]),t.iconElement().addEventListener("click",(()=>{Host.userMetrics.swatchActivated(4)})),new ShadowSwatchPopoverHelper(this,s,t);const r=t.colorSwatch();if(r){r.addEventListener(InlineEditor.ColorSwatch.ClickEvent.eventName,(()=>{Host.userMetrics.swatchActivated(2)}));new ColorSwatchPopoverIcon(this,s,r).addEventListener("colorchanged",(e=>{r.dispatchEvent(new InlineEditor.ColorSwatch.ColorChangedEvent(e.data))})),r.addEventListener(InlineEditor.ColorSwatch.ColorChangedEvent.eventName,(()=>{this.applyStyleText(this.renderedPropertyText(),!1)}))}i.appendChild(t)}return i}processGrid(e,t){const n=TextUtils.TextUtils.Utils.splitStringByRegexes(e,[SDK.CSSMetadata.GridAreaRowRegex]);if(n.length<=1)return document.createTextNode(e);const i=Common.Settings.Settings.instance().moduleSetting("textEditorIndent").get(),s=document.createDocumentFragment();for(const e of n){const t=e.value.trim(),n=UI.Fragment.html`<br /><span class='styles-clipboard-only'>${i.repeat(2)}</span>${t}`;s.appendChild(n)}return s}processAngle(e){if(!this.editable())return document.createTextNode(e);const t=new InlineEditor.CSSAngle.CSSAngle,n=document.createElement("span");n.textContent=e;const i=this.matchedStylesInternal.computeValue(this.property.ownerStyle,this.property.value)||"";t.data={propertyName:this.property.name,propertyValue:i,angleText:e,containingPane:this.parentPaneInternal.element.enclosingNodeOrSelfWithClass("style-panes-wrapper")},t.append(n);return t.addEventListener("popovertoggled",(e=>{const n=this.section();if(!n)return;const{data:i}=e;i.open&&(this.parentPaneInternal.hideAllPopovers(),this.parentPaneInternal.activeCSSAngle=t,Host.userMetrics.swatchActivated(7)),n.element.classList.toggle("has-open-popover",i.open),this.parentPaneInternal.setEditingStyle(i.open)})),t.addEventListener("valuechanged",(async e=>{const{data:i}=e;n.textContent=i.value,await this.applyStyleText(this.renderedPropertyText(),!1);const s=this.matchedStylesInternal.computeValue(this.property.ownerStyle,this.property.value)||"";t.updateProperty(this.property.name,s)})),t.addEventListener("unitchanged",(async e=>{const{data:t}=e;n.textContent=t.value})),t}processLength(e){if(!this.editable())return document.createTextNode(e);const t=new InlineEditor.CSSLength.CSSLength,n=document.createElement("span");n.textContent=e,t.data={lengthText:e,overloaded:this.overloadedInternal},t.append(n);return t.addEventListener("valuechanged",(e=>{const{data:t}=e;n.textContent=t.value,this.parentPaneInternal.setEditingStyle(!0),this.applyStyleText(this.renderedPropertyText(),!1)})),t.addEventListener("draggingfinished",(()=>{this.parentPaneInternal.setEditingStyle(!1)})),t}updateState(){if(!this.listItemElement)return;this.style.isPropertyImplicit(this.name)?this.listItemElement.classList.add("implicit"):this.listItemElement.classList.remove("implicit");!this.property.parsedOk&&StylesSidebarPane.ignoreErrorsForProperty(this.property)?this.listItemElement.classList.add("has-ignorable-error"):this.listItemElement.classList.remove("has-ignorable-error"),this.inherited()?this.listItemElement.classList.add("inherited"):this.listItemElement.classList.remove("inherited"),this.overloaded()?this.listItemElement.classList.add("overloaded"):this.listItemElement.classList.remove("overloaded"),this.property.disabled?this.listItemElement.classList.add("disabled"):this.listItemElement.classList.remove("disabled"),this.listItemElement.classList.toggle("changed",this.isPropertyChanged(this.property))}node(){return this.parentPaneInternal.node()}parentPane(){return this.parentPaneInternal}section(){return this.treeOutline?this.treeOutline.section:null}updatePane(){const e=this.section();e&&e.refreshUpdate(this)}async toggleDisabled(e){if(!this.style.range)return;this.parentPaneInternal.setUserOperation(!0);const t=await this.property.setDisabled(e);this.parentPaneInternal.setUserOperation(!1),t&&(this.matchedStylesInternal.resetActiveProperties(),this.updatePane(),this.styleTextAppliedForTest())}isPropertyChanged(e){return!!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.STYLES_PANE_CSS_CHANGES)&&(this.#e!==e.propertyText||this.parentPane().isPropertyChanged(e))}async onpopulate(){if(this.childCount()||!this.isShorthand)return;const e=this.property.getLonghandProperties(),t=this.style.leadingProperties();for(const n of e){const e=n.name;let i=!1,s=!1;const r=this.section();r&&(i=r.isPropertyInherited(e),s=this.matchedStylesInternal.propertyState(n)===SDK.CSSMatchedStyles.PropertyState.Overloaded);const o=t.find((t=>t.name===e&&t.activeInStyle()));o&&(s=!0);const a=new StylePropertyTreeElement({stylesPane:this.parentPaneInternal,matchedStyles:this.matchedStylesInternal,property:n,isShorthand:!1,inherited:i,overloaded:s,newProperty:!1});a.setComputedStyles(this.computedStyles),a.setParentsComputedStyles(this.parentsComputedStyles),this.appendChild(a)}}onattach(){this.updateTitle(),this.listItemElement.addEventListener("mousedown",(e=>{0===e.button&&parentMap.set(this.parentPaneInternal,this)}),!1),this.listItemElement.addEventListener("mouseup",this.mouseUp.bind(this)),this.listItemElement.addEventListener("click",(e=>{if(!e.target)return;e.target.hasSelection()||e.target===this.listItemElement||e.consume(!0)})),this.listItemElement.addEventListener("contextmenu",this.handleCopyContextMenuEvent.bind(this))}onexpand(){this.updateExpandElement()}oncollapse(){this.updateExpandElement()}updateExpandElement(){this.expandElement&&(this.expanded?this.expandElement.setIconType("triangle-down"):this.expandElement.setIconType("triangle-right"))}#n(e){const t=this.matchedStyles().getRegisteredProperty(e);return t?{registration:t,goToDefinition:()=>this.parentPaneInternal.jumpToSection(e,REGISTERED_PROPERTY_SECTION_NAME)}:void 0}#t(e,t){const n=this.#n(e);if(n||t)return new ElementsComponents.CSSVariableValueView.CSSVariableValueView(t??"",n)}updateTitleIfComputedValueChanged(){const e=this.matchedStylesInternal.computeValue(this.property.ownerStyle,this.property.value);e!==this.lastComputedValue&&(this.lastComputedValue=e,this.innerUpdateTitle())}updateTitle(){this.lastComputedValue=this.matchedStylesInternal.computeValue(this.property.ownerStyle,this.property.value),this.innerUpdateTitle()}innerUpdateTitle(){this.updateState(),this.isExpandable()?this.expandElement=UI.Icon.Icon.create("triangle-right","expand-icon"):this.expandElement=null;const e=new StylesSidebarPropertyRenderer(this.style.parentRule,this.node(),this.name,this.value);if(this.property.parsedOk&&(e.setVarHandler(this.processVar.bind(this)),e.setAnimationNameHandler(this.processAnimationName.bind(this)),e.setAnimationHandler(this.processAnimation.bind(this)),e.setColorHandler(this.processColor.bind(this)),e.setColorMixHandler(this.processColorMix.bind(this)),e.setBezierHandler(this.processBezier.bind(this)),e.setFontHandler(this.processFont.bind(this)),e.setShadowHandler(this.processShadow.bind(this)),e.setGridHandler(this.processGrid.bind(this)),e.setAngleHandler(this.processAngle.bind(this)),e.setLengthHandler(this.processLength.bind(this)),e.setPositionFallbackHandler(this.processPositionFallback.bind(this))),this.listItemElement.removeChildren(),this.nameElement=e.renderName(),this.property.name.startsWith("--")&&this.nameElement&&this.parentPaneInternal.addPopover(this.nameElement,(()=>this.#t(this.property.name,this.matchedStylesInternal.computeCSSVariable(this.style,this.property.name)))),this.valueElement=e.renderValue(),!this.treeOutline)return;const t=Common.Settings.Settings.instance().moduleSetting("textEditorIndent").get();if(UI.UIUtils.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only"),t+(this.property.disabled?"/* ":"")),this.nameElement&&this.listItemElement.appendChild(this.nameElement),this.valueElement){const e=this.valueElement.firstElementChild&&"BR"===this.valueElement.firstElementChild.tagName?":":": ";this.listItemElement.createChild("span","styles-name-value-separator").textContent=e,this.expandElement&&this.listItemElement.appendChild(this.expandElement),this.listItemElement.appendChild(this.valueElement);const t=this.listItemElement.createChild("span","styles-semicolon");t.textContent=";",t.onmouseup=this.mouseUp.bind(this),this.property.disabled&&UI.UIUtils.createTextChild(this.listItemElement.createChild("span","styles-clipboard-only")," */")}const n=this.section();if(this.valueElement&&n&&n.editable&&"display"===this.property.name){const e=this.property.trimmedValueWithoutImportant(),t="flex"===e||"inline-flex"===e;if(t||("grid"===e||"inline-grid"===e)){const e=`${n.getSectionIdx()}_${n.nextEditorTriggerButtonIdx}`,i=StyleEditorWidget.createTriggerButton(this.parentPaneInternal,n,t?FlexboxEditor:GridEditor,i18nString(t?UIStrings.flexboxEditorButton:UIStrings.gridEditorButton),e);n.nextEditorTriggerButtonIdx++,i.addEventListener("click",(()=>{Host.userMetrics.swatchActivated(t?6:5)})),this.listItemElement.appendChild(i);const s=this.parentPaneInternal.swatchPopoverHelper();s.isShowing(StyleEditorWidget.instance())&&StyleEditorWidget.instance().getTriggerKey()===e&&s.setAnchorElement(i)}}if(this.property.parsedOk)this.updateAuthoringHint();else{this.listItemElement.classList.add("not-parsed-ok");const e=this.#n(this.property.name),t=e?new ElementsComponents.CSSVariableValueView.CSSVariableParserError(e):null;this.listItemElement.insertBefore(this.parentPaneInternal.createExclamationMark(this.property,t),this.listItemElement.firstChild);SDK.CSSMetadata.cssMetadata().isCSSPropertyName(this.property.name)&&this.listItemElement.classList.add("invalid-property-value")}if(this.property.activeInStyle()||this.listItemElement.classList.add("inactive"),this.updateFilter(),this.property.parsedOk&&this.section()&&this.parent&&this.parent.root){const e=document.createElement("input");e.className="enabled-button",e.type="checkbox",e.checked=!this.property.disabled,e.addEventListener("mousedown",(e=>e.consume()),!1),e.addEventListener("click",(e=>{this.toggleDisabled(!this.property.disabled),e.consume()}),!1),this.nameElement&&this.valueElement&&UI.ARIAUtils.setLabel(e,`${this.nameElement.textContent} ${this.valueElement.textContent}`);const t=UI.Icon.Icon.create("copy","copy");UI.Tooltip.Tooltip.install(t,i18nString(UIStrings.copyDeclaration)),t.addEventListener("click",(()=>{const e=`${this.property.name}: ${this.property.value};`;Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DeclarationViaChangedLine)})),this.listItemElement.append(t),this.listItemElement.insertBefore(e,this.listItemElement.firstChild)}}updateAuthoringHint(){this.listItemElement.classList.remove("inactive-property");const e=this.listItemElement.querySelector(".hint");e&&(activeHints.delete(e),e?.closest(".hint-wrapper")?.remove());const t=this.property.name;if(!cssRuleValidatorsMap.has(t))return;if(this.node()?.isSVGNode())return;const n=this.parentPaneInternal.cssModel(),i=n?.fontFaces()||[],s=this.node()?.localName();for(const e of cssRuleValidatorsMap.get(t)||[]){const n=e.getHint(t,this.computedStyles||void 0,this.parentsComputedStyles||void 0,s?.toLowerCase(),i);if(n){Host.userMetrics.cssHintShown(e.getMetricType());const t=document.createElement("span");t.classList.add("hint-wrapper");const i=new IconButton.Icon.Icon;i.data={iconName:"info",color:"var(--icon-default)",width:"14px",height:"14px"},i.classList.add("hint"),t.append(i),activeHints.set(i,n),this.listItemElement.append(t),this.listItemElement.classList.add("inactive-property");break}}}mouseUp(e){const t=parentMap.get(this.parentPaneInternal);if(parentMap.delete(this.parentPaneInternal),!t)return;if(this.listItemElement.hasSelection())return;if(UI.UIUtils.isBeingEdited(e.target))return;if(e.consume(!0),e.target===this.listItemElement)return;const n=this.section();UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e)&&n&&n.navigable?this.navigateToSource(e.target):this.startEditing(e.target)}handleContextMenuEvent(e,t){const n=new UI.ContextMenu.ContextMenu(t);if(this.property.parsedOk&&this.section()&&this.parent&&this.parent.root){const i=this.parentPaneInternal.focusedSectionIndex();n.defaultSection().appendCheckboxItem(i18nString(UIStrings.togglePropertyAndContinueEditing),(async()=>{if(this.treeOutline){const n=this.treeOutline.rootElement().indexOfChild(this);this.editingCancelled(null,e),await this.toggleDisabled(!this.property.disabled),t.consume(),this.parentPaneInternal.continueEditingElement(i,n)}}),!this.property.disabled)}const i=this.navigateToSource.bind(this);n.defaultSection().appendItem(i18nString(UIStrings.revealInSourcesPanel),i),n.show()}handleCopyContextMenuEvent(e){if(!e.target)return;this.createCopyContextMenu(e).show()}createCopyContextMenu(e){const t=new UI.ContextMenu.ContextMenu(e);return t.headerSection().appendItem(i18nString(UIStrings.copyDeclaration),(()=>{const e=`${this.property.name}: ${this.property.value};`;Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DeclarationViaContextMenu)})),t.headerSection().appendItem(i18nString(UIStrings.copyProperty),(()=>{Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.name),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.PropertyViaContextMenu)})),t.headerSection().appendItem(i18nString(UIStrings.copyValue),(()=>{Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(this.property.value),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.ValueViaContextMenu)})),t.headerSection().appendItem(i18nString(UIStrings.copyRule),(()=>{const e=this.section(),t=StylesSidebarPane.formatLeadingProperties(e).ruleText;Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(t),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.RuleViaContextMenu)})),t.headerSection().appendItem(i18nString(UIStrings.copyCssDeclarationAsJs),this.copyCssDeclarationAsJs.bind(this)),t.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations),(()=>{const e=this.section(),t=StylesSidebarPane.formatLeadingProperties(e).allDeclarationText;Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(t),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllDeclarationsViaContextMenu)})),t.clipboardSection().appendItem(i18nString(UIStrings.copyAllCssDeclarationsAsJs),this.copyAllCssDeclarationAsJs.bind(this)),t.defaultSection().appendItem(i18nString(UIStrings.copyAllCSSChanges),(async()=>{const e=await this.parentPane().getFormattedChanges();Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllChangesViaStylesPane)})),t.footerSection().appendItem(i18nString(UIStrings.viewComputedValue),(()=>{this.viewComputedValue()})),t}async viewComputedValue(){const e=ElementsPanel.instance().getComputedStyleWidget();e.isShowing()||await UI.ViewManager.ViewManager.instance().showView("Computed");let t="";t=this.isShorthand?"^"+this.property.name+"-":"^"+this.property.name+"$";const n=new RegExp(t,"i");await e.filterComputedStyles(n);const i=e.input;i.value=this.property.name,i.focus()}copyCssDeclarationAsJs(){const e=getCssDeclarationAsJavascriptProperty(this.property);Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.DeclarationAsJSViaContextMenu)}copyAllCssDeclarationAsJs(){const e=this.section().style().leadingProperties().filter((e=>!e.disabled)).map(getCssDeclarationAsJavascriptProperty);Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e.join(",\n")),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllDeclarationsAsJSViaContextMenu)}navigateToSource(e,t){const n=this.section();if(!n||!n.navigable)return;const i=e===this.nameElement,s=Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().propertyUILocation(this.property,i);s&&Common.Revealer.reveal(s,t)}startEditing(e){if(this.parent instanceof StylePropertyTreeElement&&this.parent.isShorthand)return;if(this.expandElement&&e===this.expandElement)return;const t=this.section();if(t&&!t.editable)return;if(e&&(e=e.enclosingNodeOrSelfWithClass("webkit-css-property")||e.enclosingNodeOrSelfWithClass("value")||e.enclosingNodeOrSelfWithClass("styles-semicolon")),e||(e=this.nameElement),UI.UIUtils.isBeingEdited(e))return;const n=e===this.nameElement;var i;!n&&this.valueElement&&(SDK.CSSMetadata.cssMetadata().isGridAreaDefiningProperty(this.name)&&(this.valueElement.textContent=(i=this.value,TextUtils.TextUtils.Utils.splitStringByRegexes(i,[SDK.CSSMetadata.GridAreaRowRegex]).map((e=>e.value.trim())).join("\n"))),this.valueElement.textContent=function(e,t){const n=e.split(SDK.CSSMetadata.URLRegex);if(1===n.length)return e;const i=new RegExp(SDK.CSSMetadata.URLRegex);for(let e=1;e<n.length;e+=2){const s=i.exec(t);s&&(n[e]=s[0])}return n.join("")}(this.valueElement.textContent||"",this.value),e=this.valueElement);const s=e&&e.textContent||"",r={expanded:this.expanded,hasChildren:this.isExpandable(),isEditingName:n,originalProperty:this.property,previousContent:s,originalName:void 0,originalValue:void 0};this.contextForTest=r,this.setExpandable(!1),e&&(e.parentElement&&e.parentElement.classList.add("child-editing"),e.textContent=e.textContent),this.originalPropertyText=this.property.propertyText||"",this.parentPaneInternal.setEditingStyle(!0,this),e&&e.parentElement&&e.parentElement.scrollIntoViewIfNeeded(!1),this.prompt=new CSSPropertyPrompt(this,n),this.prompt.setAutocompletionTimeout(0),this.prompt.addEventListener(UI.TextPrompt.Events.TextChanged,(e=>{this.applyFreeFlowStyleTextEdit(r)}));const o=this.property.getInvalidStringForInvalidProperty();if(o&&e&&UI.ARIAUtils.alert(o),e){const t=this.prompt.attachAndStartEditing(e,function(e,t){let n=t.target.textContent;e.isEditingName||(n=this.value||n),this.editingCommitted(n||"",e,"")}.bind(this,r));this.navigateToSource(e,!0),t.addEventListener("keydown",this.editingNameValueKeyDown.bind(this,r),!1),t.addEventListener("keypress",this.editingNameValueKeyPress.bind(this,r),!1),n&&(t.addEventListener("paste",function(e,t){const n=t.clipboardData;if(!n)return;const i=n.getData("Text");if(!i)return;const s=i.indexOf(":");if(s<0)return;const r=i.substring(0,s).trim(),o=i.substring(s+1).trim();t.preventDefault(),void 0===e.originalName&&(this.nameElement&&(e.originalName=this.nameElement.textContent||""),this.valueElement&&(e.originalValue=this.valueElement.textContent||"")),this.property.name=r,this.property.value=o,this.nameElement&&(this.nameElement.textContent=r,this.nameElement.normalize()),this.valueElement&&(this.valueElement.textContent=o,this.valueElement.normalize());const a=t.target;this.editingCommitted(a.textContent||"",e,"forward")}.bind(this,r),!1),t.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this,r),!1));const i=e.getComponentSelection();i&&i.selectAllChildren(e)}}editingNameValueKeyDown(e,t){if(t.handled)return;const n=t,i=n.target;let s;if("Enter"===n.key&&!n.shiftKey||e.isEditingName&&" "===n.key)s="forward";else if(n.keyCode===UI.KeyboardShortcut.Keys.Esc.code||n.key===Platform.KeyboardUtilities.ESCAPE_KEY)s="cancel";else if(!e.isEditingName&&this.newProperty&&n.keyCode===UI.KeyboardShortcut.Keys.Backspace.code){const e=i.getComponentSelection();e&&e.isCollapsed&&!e.focusOffset&&(t.preventDefault(),s="backward")}else"Tab"===n.key&&(s=n.shiftKey?"backward":"forward",t.preventDefault());if(s){switch(s){case"cancel":this.editingCancelled(null,e);break;case"forward":case"backward":this.editingCommitted(i.textContent||"",e,s)}t.consume()}else;}editingNameValueKeyPress(e,t){const n=t,i=n.target,s=String.fromCharCode(n.charCode),r=this.#i(i);if(e.isEditingName?":"===s:";"===s&&null!==r&&function(e,t){let n="";for(let i=0;i<t;++i){const t=e[i];"\\"===t&&""!==n?++i:n||'"'!==t&&"'"!==t?n===t&&(n=""):n=t}return!n}(i.textContent||"",r))return t.consume(!0),void this.editingCommitted(i.textContent||"",e,"forward")}#i(e){const t=e.getComponentSelection();if(!t?.containsNode(e,!0))return null;let n=t.anchorOffset,i=t.anchorNode;for(;i!==e;){for(;i?.previousSibling;)i=i.previousSibling,n+=i.textContent?.length??0;i=i?.parentNodeOrShadowHost()??null}return n}async applyFreeFlowStyleTextEdit(e){if(!this.prompt||!this.parentPaneInternal.node())return;const t=this.prompt.text();if(e.isEditingName&&t.includes(":"))return void this.editingCommitted(t,e,"forward");const n=this.prompt.textWithCurrentSuggestion();if(n.includes(";"))return;const i=this.parentPaneInternal.node();if(i){if(Boolean(i.pseudoType())){if("content"===this.name.toLowerCase())return;const e=n.trim().toLowerCase();if(e.startsWith("content:")||"display: none"===e)return}}e.isEditingName?n.includes(":")?await this.applyStyleText(n,!1):this.hasBeenEditedIncrementally&&await this.applyOriginalStyle(e):this.nameElement&&await this.applyStyleText(`${this.nameElement.textContent}: ${n}`,!1)}kickFreeFlowStyleEditForTest(){const e=this.contextForTest;return this.applyFreeFlowStyleTextEdit(e)}editingEnded(e){this.setExpandable(e.hasChildren),e.expanded&&this.expand();const t=e.isEditingName?this.nameElement:this.valueElement;t&&t.parentElement&&t.parentElement.classList.remove("child-editing"),this.parentPaneInternal.setEditingStyle(!1)}editingCancelled(e,t){this.removePrompt(),this.hasBeenEditedIncrementally?this.applyOriginalStyle(t):this.newProperty&&this.treeOutline&&this.treeOutline.removeChild(this),this.updateTitle(),this.editingEnded(t)}async applyOriginalStyle(e){await this.applyStyleText(this.originalPropertyText,!1,e.originalProperty)}findSibling(e){let t=this;do{const n="forward"===e?t.nextSibling:t.previousSibling;t=n instanceof StylePropertyTreeElement?n:null}while(t&&t.inherited());return t}async editingCommitted(e,t,n){this.removePrompt(),this.editingEnded(t);const i=t.isEditingName;if(!this.nameElement||!this.valueElement)return;const s=this.nameElement.textContent||"",r=i&&s.includes(":")||!this.property;let o=!1,a=!1;const l=void 0!==t.originalName,d=l&&(this.nameElement.textContent!==t.originalName||this.valueElement.textContent!==t.originalValue),p=l&&i&&this.valueElement.textContent!==t.originalValue;let h=this;const c=i!==("forward"===n),m=this.newProperty&&!e&&(c||i);("forward"===n&&(!i||p)||"backward"===n&&i)&&(h=h.findSibling(n),h||("forward"!==n||this.newProperty&&!e?"backward"===n&&(a=!0):o=!0));let u=-1;null!==h&&this.treeOutline&&(u=this.treeOutline.rootElement().indexOfChild(h));const y=Platform.StringUtilities.isWhitespace(e),S=this.newProperty&&(p||c||!n&&!i||i&&y||r),g=this.section();if((e!==t.previousContent||d)&&!this.newProperty||S){let t;t=r?this.nameElement.textContent:y||this.newProperty&&Platform.StringUtilities.isWhitespace(this.valueElement.textContent||"")?"":i?e+": "+this.property.value:this.property.name+": "+e,await this.applyStyleText(t||"",!0),C.call(this,this.newProperty,!y,g)}else i?this.property.name=e:this.property.value=e,l||this.newProperty||this.updateTitle(),C.call(this,this.newProperty,!1,g);function C(e,t,s){if(n)if(h&&h.parent)h.startEditing(i?h.valueElement:h.nameElement);else{if(h&&!h.parent){const t=s.propertiesTreeOutline.rootElement();if("forward"===n&&y&&!i&&--u,u>=t.childCount()&&!this.newProperty)o=!0;else{const s=u>=0?t.childAt(u):null;if(s){let t=!i||p?s.nameElement:s.valueElement;return e&&y&&(t="forward"===n?s.nameElement:s.valueElement),void s.startEditing(t)}e||(a=!0)}}if(o){if(e&&!t&&i!==("backward"===n))return;s.addNewBlankProperty().startEditing()}else if(m){h=this.findSibling(n);const e=h||"backward"===n?s:s.nextEditableSibling();e&&(e.style().parentRule?e.startEditingSelector():e.moveEditorFromSelector(n))}else a&&(s.style().parentRule?s.startEditingSelector():s.moveEditorFromSelector(n))}else this.parentPaneInternal.resetFocus()}}removePrompt(){this.prompt&&(this.prompt.detach(),this.prompt=null)}styleTextAppliedForTest(){}applyStyleText(e,t,n){return this.applyStyleThrottler.schedule(this.innerApplyStyleText.bind(this,e,t,n))}async innerApplyStyleText(e,t,n){if(!this.treeOutline||!this.property)return;if(!this.style.range)return;const i=this.hasBeenEditedIncrementally;if(!(e=e.replace(/[\xA0\t]/g," ").trim()).length&&t&&this.newProperty&&!i)return void(this.parent&&this.parent.removeChild(this));const s=this.parentPaneInternal.node();this.parentPaneInternal.setUserOperation(!0),(e+=Platform.StringUtilities.findUnclosedCssQuote(e)).length&&!/;\s*$/.test(e)&&(e+=";");const r=!this.newProperty||i;let o=await this.property.setText(e,t,r);i&&t&&!o&&(t=!1,o=await this.property.setText(this.originalPropertyText,t,r)),this.parentPaneInternal.setUserOperation(!1);const a=n||this.style.propertyAt(this.property.index),l=this.property.index<this.style.allProperties().length;if(!o||!a&&l)return t&&(this.newProperty?this.treeOutline.removeChild(this):this.updateTitle()),void this.styleTextAppliedForTest();a&&(this.listItemElement.classList.toggle("changed",this.isPropertyChanged(a)),this.parentPane().updateChangeStatus()),this.matchedStylesInternal.resetActiveProperties(),this.hasBeenEditedIncrementally=!0;const d=t&&!e.length,p=this.section();d&&p?p.resetToolbars():!d&&a&&(this.property=a),s===this.node()&&this.updatePane(),this.styleTextAppliedForTest()}ondblclick(){return!0}isEventWithinDisclosureTriangle(e){return e.target===this.expandElement}}