export default class StylePropertyTreeElement extends UI.TreeElement{constructor(stylesPane,matchedStyles,property,isShorthand,inherited,overloaded,newProperty){super('',isShorthand);this._style=property.ownerStyle;this._matchedStyles=matchedStyles;this.property=property;this._inherited=inherited;this._overloaded=overloaded;this.selectable=false;this._parentPane=stylesPane;this.isShorthand=isShorthand;this._applyStyleThrottler=new Common.Throttler(0);this._newProperty=newProperty;if(this._newProperty){this.listItemElement.textContent='';}
this._expandedDueToFilter=false;this.valueElement=null;this.nameElement=null;this._expandElement=null;this._originalPropertyText='';this._hasBeenEditedIncrementally=false;this._prompt=null;this._lastComputedValue=null;this._contextForTest;}
matchedStyles(){return this._matchedStyles;}
_editable(){return!!(this._style.styleSheetId&&this._style.range);}
inherited(){return this._inherited;}
overloaded(){return this._overloaded;}
setOverloaded(x){if(x===this._overloaded){return;}
this._overloaded=x;this._updateState();}
get name(){return this.property.name;}
get value(){return this.property.value;}
_updateFilter(){const regex=this._parentPane.filterRegex();const matches=!!regex&&(regex.test(this.property.name)||regex.test(this.property.value));this.listItemElement.classList.toggle('filter-match',matches);this.onpopulate();let hasMatchingChildren=false;for(let i=0;i${indent.repeat(2)}${value}`;container.appendChild(content);}
return container;}
_updateState(){if(!this.listItemElement){return;}
if(this._style.isPropertyImplicit(this.name)){this.listItemElement.classList.add('implicit');}else{this.listItemElement.classList.remove('implicit');}
const hasIgnorableError=!this.property.parsedOk&&Elements.StylesSidebarPane.ignoreErrorsForProperty(this.property);if(hasIgnorableError){this.listItemElement.classList.add('has-ignorable-error');}else{this.listItemElement.classList.remove('has-ignorable-error');}
if(this.inherited()){this.listItemElement.classList.add('inherited');}else{this.listItemElement.classList.remove('inherited');}
if(this.overloaded()){this.listItemElement.classList.add('overloaded');}else{this.listItemElement.classList.remove('overloaded');}
if(this.property.disabled){this.listItemElement.classList.add('disabled');}else{this.listItemElement.classList.remove('disabled');}}
node(){return this._parentPane.node();}
parentPane(){return this._parentPane;}
section(){return this.treeOutline&&this.treeOutline.section;}
_updatePane(){const section=this.section();if(section){section.refreshUpdate(this);}}
async _toggleDisabled(disabled){const oldStyleRange=this._style.range;if(!oldStyleRange){return;}
this._parentPane.setUserOperation(true);const success=await this.property.setDisabled(disabled);this._parentPane.setUserOperation(false);if(!success){return;}
this._matchedStyles.resetActiveProperties();this._updatePane();this.styleTextAppliedForTest();}
async onpopulate(){if(this.childCount()||!this.isShorthand){return;}
const longhandProperties=this._style.longhandProperties(this.name);for(let i=0;i{if(event.which===1){this._parentPane[ActiveSymbol]=this;}},false);this.listItemElement.addEventListener('mouseup',this._mouseUp.bind(this));this.listItemElement.addEventListener('click',event=>{if(!event.target.hasSelection()&&event.target!==this.listItemElement){event.consume(true);}});}
onexpand(){this._updateExpandElement();}
oncollapse(){this._updateExpandElement();}
_updateExpandElement(){if(!this._expandElement){return;}
if(this.expanded){this._expandElement.setIconType('smallicon-triangle-down');}else{this._expandElement.setIconType('smallicon-triangle-right');}}
updateTitleIfComputedValueChanged(){const computedValue=this._matchedStyles.computeValue(this.property.ownerStyle,this.property.value);if(computedValue===this._lastComputedValue){return;}
this._lastComputedValue=computedValue;this._innerUpdateTitle();}
updateTitle(){this._lastComputedValue=this._matchedStyles.computeValue(this.property.ownerStyle,this.property.value);this._innerUpdateTitle();}
_innerUpdateTitle(){this._updateState();if(this.isExpandable()){this._expandElement=UI.Icon.create('smallicon-triangle-right','expand-icon');}else{this._expandElement=null;}
const propertyRenderer=new Elements.StylesSidebarPropertyRenderer(this._style.parentRule,this.node(),this.name,this.value);if(this.property.parsedOk){propertyRenderer.setVarHandler(this._processVar.bind(this));propertyRenderer.setColorHandler(this._processColor.bind(this));propertyRenderer.setBezierHandler(this._processBezier.bind(this));propertyRenderer.setShadowHandler(this._processShadow.bind(this));propertyRenderer.setGridHandler(this._processGrid.bind(this));}
this.listItemElement.removeChildren();this.nameElement=propertyRenderer.renderName();if(this.property.name.startsWith('--')){this.nameElement.title=this._matchedStyles.computeCSSVariable(this._style,this.property.name)||'';}
this.valueElement=propertyRenderer.renderValue();if(!this.treeOutline){return;}
const indent=Common.moduleSetting('textEditorIndent').get();this.listItemElement.createChild('span','styles-clipboard-only').createTextChild(indent+(this.property.disabled?'/* ':''));this.listItemElement.appendChild(this.nameElement);const lineBreakValue=this.valueElement.firstElementChild&&this.valueElement.firstElementChild.tagName==='BR';const separator=lineBreakValue?':':': ';this.listItemElement.createChild('span','styles-name-value-separator').textContent=separator;if(this._expandElement){this.listItemElement.appendChild(this._expandElement);}
this.listItemElement.appendChild(this.valueElement);this.listItemElement.createTextChild(';');if(this.property.disabled){this.listItemElement.createChild('span','styles-clipboard-only').createTextChild(' */');}
if(!this.property.parsedOk){this.listItemElement.classList.add('not-parsed-ok');this.listItemElement.insertBefore(Elements.StylesSidebarPane.createExclamationMark(this.property),this.listItemElement.firstChild);}
if(!this.property.activeInStyle()){this.listItemElement.classList.add('inactive');}
this._updateFilter();if(this.property.parsedOk&&this.section()&&this.parent.root){const enabledCheckboxElement=createElement('input');enabledCheckboxElement.className='enabled-button';enabledCheckboxElement.type='checkbox';enabledCheckboxElement.checked=!this.property.disabled;enabledCheckboxElement.addEventListener('mousedown',event=>event.consume(),false);enabledCheckboxElement.addEventListener('click',event=>{this._toggleDisabled(!this.property.disabled);event.consume();},false);UI.ARIAUtils.setAccessibleName(enabledCheckboxElement,`${this.nameElement.textContent} ${this.valueElement.textContent}`);this.listItemElement.insertBefore(enabledCheckboxElement,this.listItemElement.firstChild);}}
_mouseUp(event){const activeTreeElement=this._parentPane[ActiveSymbol];this._parentPane[ActiveSymbol]=null;if(activeTreeElement!==this){return;}
if(this.listItemElement.hasSelection()){return;}
if(UI.isBeingEdited((event.target))){return;}
event.consume(true);if(event.target===this.listItemElement){return;}
if(UI.KeyboardShortcut.eventHasCtrlOrMeta((event))&&this.section().navigable){this._navigateToSource((event.target));return;}
this.startEditing((event.target));}
_handleContextMenuEvent(context,event){const contextMenu=new UI.ContextMenu(event);if(this.property.parsedOk&&this.section()&&this.parent.root){contextMenu.defaultSection().appendCheckboxItem(ls`Toggle property and continue editing`,async()=>{this.editingCancelled(null,context);const sectionIndex=this._parentPane.focusedSectionIndex();const propertyIndex=this.treeOutline.rootElement().indexOfChild(this);await this._toggleDisabled(!this.property.disabled);event.consume();this._parentPane.continueEditingElement(sectionIndex,propertyIndex);},!this.property.disabled);}
contextMenu.defaultSection().appendItem(ls`Reveal in Sources panel`,this._navigateToSource.bind(this));contextMenu.show();}
_navigateToSource(element,omitFocus){if(!this.section().navigable){return;}
const propertyNameClicked=element===this.nameElement;const uiLocation=Bindings.cssWorkspaceBinding.propertyUILocation(this.property,propertyNameClicked);if(uiLocation){Common.Revealer.reveal(uiLocation,omitFocus);}}
startEditing(selectElement){if(this.parent.isShorthand){return;}
if(this._expandElement&&selectElement===this._expandElement){return;}
const section=this.section();if(section&&!section.editable){return;}
if(selectElement){selectElement=selectElement.enclosingNodeOrSelfWithClass('webkit-css-property')||selectElement.enclosingNodeOrSelfWithClass('value');}
if(!selectElement){selectElement=this.nameElement;}
if(UI.isBeingEdited(selectElement)){return;}
const isEditingName=selectElement===this.nameElement;if(!isEditingName){if(SDK.cssMetadata().isGridAreaDefiningProperty(this.name)){this.valueElement.textContent=restoreGridIndents(this.value);}
this.valueElement.textContent=restoreURLs(this.valueElement.textContent,this.value);}
function restoreGridIndents(value){const splitResult=TextUtils.TextUtils.splitStringByRegexes(value,[SDK.CSSMetadata.GridAreaRowRegex]);return splitResult.map(result=>result.value.trim()).join('\n');}
function restoreURLs(fieldValue,modelValue){const urlRegex=/\b(url\([^)]*\))/g;const splitFieldValue=fieldValue.split(urlRegex);if(splitFieldValue.length===1){return fieldValue;}
const modelUrlRegex=new RegExp(urlRegex);for(let i=1;i=rootElement.childCount()&&!this._newProperty){createNewProperty=true;}else{const treeElement=moveToIndex>=0?rootElement.childAt(moveToIndex):null;if(treeElement){let elementToEdit=!isEditingName||isPropertySplitPaste?treeElement.nameElement:treeElement.valueElement;if(alreadyNew&&blankInput){elementToEdit=moveDirection==='forward'?treeElement.nameElement:treeElement.valueElement;}
treeElement.startEditing(elementToEdit);return;}else if(!alreadyNew){moveToSelector=true;}}}
if(createNewProperty){if(alreadyNew&&!valueChanged&&(isEditingName^(moveDirection==='backward'))){return;}
section.addNewBlankProperty().startEditing();return;}
if(abandonNewProperty){moveTo=this._findSibling(moveDirection);const sectionToEdit=(moveTo||moveDirection==='backward')?section:section.nextEditableSibling();if(sectionToEdit){if(sectionToEdit.style().parentRule){sectionToEdit.startEditingSelector();}else{sectionToEdit.moveEditorFromSelector(moveDirection);}}
return;}
if(moveToSelector){if(section.style().parentRule){section.startEditingSelector();}else{section.moveEditorFromSelector(moveDirection);}}}}
_removePrompt(){if(this._prompt){this._prompt.detach();this._prompt=null;}}
styleTextAppliedForTest(){}
applyStyleText(styleText,majorChange,property){return this._applyStyleThrottler.schedule(this._innerApplyStyleText.bind(this,styleText,majorChange,property));}
async _innerApplyStyleText(styleText,majorChange,property){if(!this.treeOutline){return;}
const oldStyleRange=this._style.range;if(!oldStyleRange){return;}
const hasBeenEditedIncrementally=this._hasBeenEditedIncrementally;styleText=styleText.replace(/[\xA0\t]/g,' ').trim();if(!styleText.length&&majorChange&&this._newProperty&&!hasBeenEditedIncrementally){this.parent.removeChild(this);return;}
const currentNode=this._parentPane.node();this._parentPane.setUserOperation(true);if(styleText.length&&!/;\s*$/.test(styleText)){styleText+=';';}
const overwriteProperty=!this._newProperty||hasBeenEditedIncrementally;let success=await this.property.setText(styleText,majorChange,overwriteProperty);if(hasBeenEditedIncrementally&&majorChange&&!success){majorChange=false;success=await this.property.setText(this._originalPropertyText,majorChange,overwriteProperty);}
this._parentPane.setUserOperation(false);if(!success){if(majorChange){if(this._newProperty){this.treeOutline.removeChild(this);}else{this.updateTitle();}}
this.styleTextAppliedForTest();return;}
this._matchedStyles.resetActiveProperties();this._hasBeenEditedIncrementally=true;this.property=property||this._style.propertyAt(this.property.index);if(currentNode===this.node()){this._updatePane();}
this.styleTextAppliedForTest();}
ondblclick(){return true;}
isEventWithinDisclosureTriangle(event){return event.target===this._expandElement;}}
export const ActiveSymbol=Symbol('ActiveSymbol');self.Elements=self.Elements||{};Elements=Elements||{};Elements.StylePropertyTreeElement=StylePropertyTreeElement;Elements.StylePropertyTreeElement.ActiveSymbol=ActiveSymbol;Elements.StylePropertyTreeElement.Context;