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;