@yuebai008/cli/dist/cli-server/client/front_end/panels/elements/StylePropertiesSection.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 UI from"../../ui/legacy/legacy.js";import{FontEditorSectionManager}from"./ColorSwatchPopoverIcon.js";import*as ElementsComponents from"./components/components.js";import{linkifyDeferredNodeReference}from"./DOMLinkifier.js";import{ElementsPanel}from"./ElementsPanel.js";import{StylePropertyTreeElement}from"./StylePropertyTreeElement.js";import stylesSectionTreeStyles from"./stylesSectionTree.css.js";import{StylesSidebarPane}from"./StylesSidebarPane.js";const UIStrings={insertStyleRuleBelow:"Insert Style Rule Below",constructedStylesheet:"constructed stylesheet",userAgentStylesheet:"user agent stylesheet",injectedStylesheet:"injected stylesheet",viaInspector:"via inspector",styleAttribute:"`style` attribute",sattributesStyle:"{PH1}[Attributes Style]",showAllPropertiesSMore:"Show All Properties ({PH1} more)",copySelector:"Copy `selector`",copyRule:"Copy rule",copyAllDeclarations:"Copy all declarations",copyAllCSSChanges:"Copy all CSS changes",cssSelector:"`CSS` selector"},str_=i18n.i18n.registerUIStrings("panels/elements/StylePropertiesSection.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_),STYLE_TAG="<style>";export class StylePropertiesSection{parentPane;styleInternal;matchedStyles;computedStyles;parentsComputedStyles;editable;hoverTimer;willCauseCancelEditing;forceShowAll;originalPropertiesCount;element;innerElement;titleElement;propertiesTreeOutline;showAllButton;selectorElement;newStyleRuleToolbar;fontEditorToolbar;fontEditorSectionManager;fontEditorButton;selectedSinceMouseDown;elementToSelectorIndex;navigable;selectorRefElement;hoverableSelectorsMode;isHiddenInternal;ancestorRuleListElement;nextEditorTriggerButtonIdx=1;sectionIdx=0;static#e=new WeakMap;#t;constructor(e,t,n,i,s,r,o){this.#t=o,this.parentPane=e,this.sectionIdx=i,this.styleInternal=n,this.matchedStyles=t,this.computedStyles=s,this.parentsComputedStyles=r,this.editable=Boolean(n.styleSheetId&&n.range),this.hoverTimer=null,this.willCauseCancelEditing=!1,this.forceShowAll=!1,this.originalPropertiesCount=n.leadingProperties().length;const l=n.parentRule;this.element=document.createElement("div"),this.element.classList.add("styles-section"),this.element.classList.add("matched-styles"),this.element.classList.add("monospace"),UI.ARIAUtils.setLabel(this.element,`${this.headerText()}, css selector`),this.element.tabIndex=-1,UI.ARIAUtils.markAsListitem(this.element),this.element.addEventListener("keydown",this.onKeyDown.bind(this),!1),e.sectionByElement.set(this.element,this),this.innerElement=this.element.createChild("div"),this.titleElement=this.innerElement.createChild("div","styles-section-title "+(l?"styles-selector":"")),this.propertiesTreeOutline=new UI.TreeOutline.TreeOutlineInShadow,this.propertiesTreeOutline.setFocusable(!1),this.propertiesTreeOutline.registerCSSFiles([stylesSectionTreeStyles]),this.propertiesTreeOutline.element.classList.add("style-properties","matched-styles","monospace"),this.propertiesTreeOutline.section=this,this.innerElement.appendChild(this.propertiesTreeOutline.element),this.showAllButton=UI.UIUtils.createTextButton("",this.showAllItems.bind(this),"styles-show-all"),this.innerElement.appendChild(this.showAllButton);const a=document.createElement("div");a.classList.add("selector-container"),this.selectorElement=document.createElement("span"),UI.ARIAUtils.setLabel(this.selectorElement,i18nString(UIStrings.cssSelector)),this.selectorElement.classList.add("selector"),this.selectorElement.textContent=this.headerText(),a.appendChild(this.selectorElement),this.selectorElement.addEventListener("mouseenter",this.onMouseEnterSelector.bind(this),!1),this.selectorElement.addEventListener("mouseleave",this.onMouseOutSelector.bind(this),!1);a.createChild("span","sidebar-pane-open-brace").textContent=" {";if(this.innerElement.createChild("div","sidebar-pane-closing-brace").textContent="}",this.styleInternal.parentRule){const e=new UI.Toolbar.ToolbarButton(i18nString(UIStrings.insertStyleRuleBelow),"plus");e.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this.onNewRuleClick,this),e.element.tabIndex=-1,this.newStyleRuleToolbar||(this.newStyleRuleToolbar=new UI.Toolbar.Toolbar("sidebar-pane-section-toolbar new-rule-toolbar",this.innerElement)),this.newStyleRuleToolbar.appendToolbarItem(e),UI.ARIAUtils.markAsHidden(this.newStyleRuleToolbar.element)}if(Root.Runtime.experiments.isEnabled("fontEditor")&&this.editable&&(this.fontEditorToolbar=new UI.Toolbar.Toolbar("sidebar-pane-section-toolbar",this.innerElement),this.fontEditorSectionManager=new FontEditorSectionManager(this.parentPane.swatchPopoverHelper(),this),this.fontEditorButton=new UI.Toolbar.ToolbarButton("Font Editor","custom-typography"),this.fontEditorButton.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,(()=>{this.onFontEditorButtonClicked()}),this),this.fontEditorButton.element.addEventListener("keydown",(e=>{Platform.KeyboardUtilities.isEnterOrSpaceKey(e)&&(e.consume(!0),this.onFontEditorButtonClicked())}),!1),this.fontEditorToolbar.appendToolbarItem(this.fontEditorButton),this.styleInternal.type===SDK.CSSStyleDeclaration.Type.Inline?this.newStyleRuleToolbar&&this.newStyleRuleToolbar.element.classList.add("shifted-toolbar"):this.fontEditorToolbar.element.classList.add("font-toolbar-hidden")),this.selectorElement.addEventListener("click",this.handleSelectorClick.bind(this),!1),this.element.addEventListener("contextmenu",this.handleContextMenuEvent.bind(this),!1),this.element.addEventListener("mousedown",this.handleEmptySpaceMouseDown.bind(this),!1),this.element.addEventListener("click",this.handleEmptySpaceClick.bind(this),!1),this.element.addEventListener("mousemove",this.onMouseMove.bind(this),!1),this.element.addEventListener("mouseleave",this.onMouseLeave.bind(this),!1),this.selectedSinceMouseDown=!1,this.elementToSelectorIndex=new WeakMap,l)if(l.isUserAgent()||l.isInjected())this.editable=!1;else if(l.styleSheetId){const e=l.cssModel().styleSheetHeaderForId(l.styleSheetId);this.navigable=e&&!e.isAnonymousInlineStyleSheet()}this.ancestorRuleListElement=this.titleElement.createChild("div","ancestor-rule-list"),this.selectorRefElement=this.titleElement.createChild("div","styles-section-subtitle"),this.updateQueryList(),this.updateRuleOrigin(),this.titleElement.appendChild(a),this.navigable&&this.element.classList.add("navigable"),this.editable||(this.element.classList.add("read-only"),this.propertiesTreeOutline.element.classList.add("read-only")),this.hoverableSelectorsMode=!1,this.isHiddenInternal=!1,this.markSelectorMatches(),this.onpopulate()}setComputedStyles(e){this.computedStyles=e}setParentsComputedStyles(e){this.parentsComputedStyles=e}updateAuthoringHint(){let e=this.propertiesTreeOutline.firstChild();for(;e;)e instanceof StylePropertyTreeElement&&(e.setComputedStyles(this.computedStyles),e.setParentsComputedStyles(this.parentsComputedStyles),e.updateAuthoringHint()),e=e.nextSibling}setSectionIdx(e){this.sectionIdx=e,this.onpopulate()}getSectionIdx(){return this.sectionIdx}registerFontProperty(e){this.fontEditorSectionManager&&this.fontEditorSectionManager.registerFontProperty(e),this.fontEditorToolbar&&(this.fontEditorToolbar.element.classList.remove("font-toolbar-hidden"),this.newStyleRuleToolbar&&this.newStyleRuleToolbar.element.classList.add("shifted-toolbar"))}resetToolbars(){this.parentPane.swatchPopoverHelper().isShowing()||this.styleInternal.type===SDK.CSSStyleDeclaration.Type.Inline||(this.fontEditorToolbar&&this.fontEditorToolbar.element.classList.add("font-toolbar-hidden"),this.newStyleRuleToolbar&&this.newStyleRuleToolbar.element.classList.remove("shifted-toolbar"))}static createRuleOriginNode(e,t,n){if(!n)return document.createTextNode("");const i=StylePropertiesSection.getRuleLocationFromCSSRule(n),s=n.styleSheetId?e.cssModel().styleSheetHeaderForId(n.styleSheetId):null;function r(){return n&&i&&n.styleSheetId&&s&&!s.isAnonymousInlineStyleSheet()?StylePropertiesSection.linkifyRuleLocation(e.cssModel(),t,n.styleSheetId,i):null}function o(e){if(s?.ownerNode){const t=linkifyDeferredNodeReference(s.ownerNode,{preventKeyboardFocus:!1,tooltip:void 0});return t.textContent=e,t}return null}if(s?.isMutable&&!s.isViaInspector()){const e=s.isConstructedByNew()?null:r();if(e)return e;const t=s.isConstructedByNew()?i18nString(UIStrings.constructedStylesheet):"<style>",n=o(t);return n||document.createTextNode(t)}const l=r();if(l)return l;if(n.isUserAgent())return document.createTextNode(i18nString(UIStrings.userAgentStylesheet));if(n.isInjected())return document.createTextNode(i18nString(UIStrings.injectedStylesheet));if(n.isViaInspector())return document.createTextNode(i18nString(UIStrings.viaInspector));const a=o("<style>");return a||document.createTextNode("")}createRuleOriginNode(e,t,n){return StylePropertiesSection.createRuleOriginNode(e,t,n)}static getRuleLocationFromCSSRule(e){let t;return e instanceof SDK.CSSRule.CSSStyleRule?t=e.style.range:e instanceof SDK.CSSRule.CSSKeyframeRule&&(t=e.key().range),t}static tryNavigateToRuleLocation(e,t){if(!t)return;const n=this.getRuleLocationFromCSSRule(t),i=t.styleSheetId?e.cssModel().styleSheetHeaderForId(t.styleSheetId):null;if(n&&t.styleSheetId&&i&&!i.isAnonymousInlineStyleSheet()){const i=this.getCSSSelectorLocation(e.cssModel(),t.styleSheetId,n);this.revealSelectorSource(i,!0)}}static linkifyRuleLocation(e,t,n,i){const s=this.getCSSSelectorLocation(e,n,i);return t.linkifyCSSLocation(s)}static getCSSSelectorLocation(e,t,n){const i=e.styleSheetHeaderForId(t),s=i.lineNumberInSource(n.startLine),r=i.columnNumberInSource(n.startLine,n.startColumn);return new SDK.CSSModel.CSSLocation(i,s,r)}getFocused(){return this.propertiesTreeOutline.shadowRoot.activeElement||null}focusNext(e){const t=this.getFocused();t&&(t.tabIndex=-1),e.focus(),this.propertiesTreeOutline.shadowRoot.contains(e)&&(e.tabIndex=0)}ruleNavigation(e){if(e.altKey||e.ctrlKey||e.metaKey||e.shiftKey)return;const t=this.getFocused();let n=null;const i=Array.from(this.propertiesTreeOutline.shadowRoot.querySelectorAll("[tabindex]"));if(0===i.length)return;const s=t?i.indexOf(t):-1;if("ArrowLeft"===e.key)n=i[s-1]||this.element;else if("ArrowRight"===e.key)n=i[s+1]||this.element;else if("ArrowUp"===e.key||"ArrowDown"===e.key)return void this.focusNext(this.element);n&&(this.focusNext(n),e.consume(!0))}onKeyDown(e){const t=e;if(!(UI.UIUtils.isEditing()||!this.editable||t.altKey||t.ctrlKey||t.metaKey))switch(t.key){case"Enter":case" ":this.startEditingAtFirstPosition(),t.consume(!0);break;case"ArrowLeft":case"ArrowRight":case"ArrowUp":case"ArrowDown":this.ruleNavigation(t);break;default:1===t.key.length&&this.addNewBlankProperty(0).startEditing()}}setSectionHovered(e){this.element.classList.toggle("styles-panel-hovered",e),this.propertiesTreeOutline.element.classList.toggle("styles-panel-hovered",e),this.hoverableSelectorsMode!==e&&(this.hoverableSelectorsMode=e,this.markSelectorMatches())}onMouseLeave(e){this.setSectionHovered(!1),this.parentPane.setActiveProperty(null)}onMouseMove(e){const t=UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e);this.setSectionHovered(t);const n=this.propertiesTreeOutline.treeElementFromEvent(e);n instanceof StylePropertyTreeElement?this.parentPane.setActiveProperty(n):this.parentPane.setActiveProperty(null);const i=this.element.getComponentSelection();!this.selectedSinceMouseDown&&i&&i.toString()&&(this.selectedSinceMouseDown=!0)}onFontEditorButtonClicked(){this.fontEditorSectionManager&&this.fontEditorButton&&this.fontEditorSectionManager.showPopover(this.fontEditorButton.element,this.parentPane)}style(){return this.styleInternal}headerText(){if(this.#t)return this.#t;const e=this.matchedStyles.nodeForStyle(this.styleInternal);return this.styleInternal.type===SDK.CSSStyleDeclaration.Type.Inline?this.matchedStyles.isInherited(this.styleInternal)?i18nString(UIStrings.styleAttribute):"element.style":e&&this.styleInternal.type===SDK.CSSStyleDeclaration.Type.Attributes?i18nString(UIStrings.sattributesStyle,{PH1:e.nodeNameInCorrectCase()}):this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule?this.styleInternal.parentRule.selectorText():""}onMouseOutSelector(){this.hoverTimer&&clearTimeout(this.hoverTimer),SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight()}onMouseEnterSelector(){this.hoverTimer&&clearTimeout(this.hoverTimer),this.hoverTimer=window.setTimeout(this.highlight.bind(this),300)}highlight(e="all"){SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();const t=this.parentPane.node();if(!t)return;const n=this.styleInternal.parentRule&&this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule?this.styleInternal.parentRule.selectorText():void 0;t.domModel().overlayModel().highlightInOverlay({node:t,selectorList:n},e)}firstSibling(){const e=this.element.parentElement;if(!e)return null;let t=e.firstChild;for(;t;){const e=this.parentPane.sectionByElement.get(t);if(e)return e;t=t.nextSibling}return null}findCurrentOrNextVisible(e,t){if(!this.isHidden())return this;if(this===t)return null;t||(t=this);let n=null;const i=e?this.nextSibling():this.previousSibling();if(i)n=i.findCurrentOrNextVisible(e,t);else{const i=e?this.firstSibling():this.lastSibling();i&&(n=i.findCurrentOrNextVisible(e,t))}return n}lastSibling(){const e=this.element.parentElement;if(!e)return null;let t=e.lastChild;for(;t;){const e=this.parentPane.sectionByElement.get(t);if(e)return e;t=t.previousSibling}return null}nextSibling(){let e=this.element;do{e=e.nextSibling}while(e&&!this.parentPane.sectionByElement.has(e));if(e)return this.parentPane.sectionByElement.get(e)}previousSibling(){let e=this.element;do{e=e.previousSibling}while(e&&!this.parentPane.sectionByElement.has(e));if(e)return this.parentPane.sectionByElement.get(e)}onNewRuleClick(e){e.data.consume();const t=this.styleInternal.parentRule;if(!t||!t.style.range||void 0===t.styleSheetId)return;const n=TextUtils.TextRange.TextRange.createFromLocation(t.style.range.endLine,t.style.range.endColumn+1);this.parentPane.addBlankSection(this,t.styleSheetId,n)}styleSheetEdited(e){const t=this.styleInternal.parentRule;t?t.rebase(e):this.styleInternal.rebase(e),this.updateQueryList(),this.updateRuleOrigin()}createAncestorRules(e){let t=0,n=0,i=0,s=0,r=0;for(const o of e.ruleTypes){let l;switch(o){case"MediaRule":l=this.createMediaElement(e.media[t++]);break;case"ContainerRule":l=this.createContainerQueryElement(e.containerQueries[n++]);break;case"ScopeRule":l=this.createScopeElement(e.scopes[i++]);break;case"SupportsRule":l=this.createSupportsElement(e.supports[s++]);break;case"StyleRule":l=this.createNestingElement(e.nestingSelectors?.[r++])}l&&this.ancestorRuleListElement.prepend(l)}}createMediaElement(e){if(!e.text||!e.text.includes("(")&&"print"!==e.text)return;let t,n="",i="";switch(e.source){case SDK.CSSMedia.Source.LINKED_SHEET:case SDK.CSSMedia.Source.INLINE_SHEET:i=`media="${e.text}"`;break;case SDK.CSSMedia.Source.MEDIA_RULE:n="@media",i=e.text,e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));break;case SDK.CSSMedia.Source.IMPORT_RULE:i=`@import ${e.text}`}const s=new ElementsComponents.CSSQuery.CSSQuery;return s.data={queryPrefix:n,queryText:i,onQueryTextClick:t},s}createContainerQueryElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));const n=new ElementsComponents.CSSQuery.CSSQuery;return n.data={queryPrefix:"@container",queryName:e.name,queryText:e.text,onQueryTextClick:t},this.addContainerForContainerQuery(e),n}createScopeElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));const n=new ElementsComponents.CSSQuery.CSSQuery;return n.data={queryPrefix:"@scope",queryText:e.text,onQueryTextClick:t},n}createSupportsElement(e){if(!e.text)return;let t;e.styleSheetId&&(t=this.handleQueryRuleClick.bind(this,e));const n=new ElementsComponents.CSSQuery.CSSQuery;return n.data={queryPrefix:"@supports",queryText:e.text,onQueryTextClick:t},n}createNestingElement(e){if(!e)return;const t=document.createElement("div");return t.textContent=e,t}async addContainerForContainerQuery(e){const t=await e.getContainerForNode(this.matchedStyles.node().id);if(!t)return;const n=new ElementsComponents.QueryContainer.QueryContainer;n.data={container:ElementsComponents.Helper.legacyNodeToElementsComponentsNode(t.containerNode),queryName:e.name,onContainerLinkClick:e=>{e.preventDefault(),ElementsPanel.instance().revealAndSelectNode(t.containerNode,!0,!0),t.containerNode.scrollIntoView()}},n.addEventListener("queriedsizerequested",(async()=>{const e=await t.getContainerSizeDetails();e&&n.updateContainerQueriedSizeDetails(e)})),this.ancestorRuleListElement.prepend(n)}updateQueryList(){this.ancestorRuleListElement.removeChildren(),this.styleInternal.parentRule&&this.styleInternal.parentRule instanceof SDK.CSSRule.CSSStyleRule&&this.createAncestorRules(this.styleInternal.parentRule)}isPropertyInherited(e){return!!this.matchedStyles.isInherited(this.styleInternal)&&!SDK.CSSMetadata.cssMetadata().isPropertyInherited(e)}nextEditableSibling(){let e=this;do{e=e.nextSibling()}while(e&&!e.editable);if(!e)for(e=this.firstSibling();e&&!e.editable;)e=e.nextSibling();return e&&e.editable?e:null}previousEditableSibling(){let e=this;do{e=e.previousSibling()}while(e&&!e.editable);if(!e)for(e=this.lastSibling();e&&!e.editable;)e=e.previousSibling();return e&&e.editable?e:null}refreshUpdate(e){this.parentPane.refreshUpdate(this,e)}updateVarFunctions(e){let t=this.propertiesTreeOutline.firstChild();for(;t;)t!==e&&t instanceof StylePropertyTreeElement&&t.updateTitleIfComputedValueChanged(),t=t.traverseNextTreeElement(!1,null,!0)}update(e){if(this.selectorElement.textContent=this.headerText(),this.markSelectorMatches(),e)this.onpopulate();else{let e=this.propertiesTreeOutline.firstChild();for(;e&&e instanceof StylePropertyTreeElement;)e.setOverloaded(this.isPropertyOverloaded(e.property)),e=e.traverseNextTreeElement(!1,null,!0)}}showAllItems(e){e&&e.consume(),this.forceShowAll||(this.forceShowAll=!0,this.onpopulate())}onpopulate(){this.parentPane.setActiveProperty(null),this.nextEditorTriggerButtonIdx=1,this.propertiesTreeOutline.removeChildren();const e=this.styleInternal;let t=0;const n=e.leadingProperties(),i=StylePropertiesSection.MaxProperties+n.length-this.originalPropertiesCount;for(const s of n){if(!this.forceShowAll&&t>=i)break;t++;const n=s.getLonghandProperties().length>0,r=this.isPropertyInherited(s.name),o=this.isPropertyOverloaded(s);if(e.parentRule&&e.parentRule.isUserAgent()&&r)continue;const l=new StylePropertyTreeElement({stylesPane:this.parentPane,matchedStyles:this.matchedStyles,property:s,isShorthand:n,inherited:r,overloaded:o,newProperty:!1});l.setComputedStyles(this.computedStyles),l.setParentsComputedStyles(this.parentsComputedStyles),this.propertiesTreeOutline.appendChild(l)}t<n.length?(this.showAllButton.classList.remove("hidden"),this.showAllButton.textContent=i18nString(UIStrings.showAllPropertiesSMore,{PH1:n.length-t})):this.showAllButton.classList.add("hidden")}isPropertyOverloaded(e){return this.matchedStyles.propertyState(e)===SDK.CSSMatchedStyles.PropertyState.Overloaded}updateFilter(){let e=!1;this.showAllItems();for(const t of this.propertiesTreeOutline.rootElement().children())if(t instanceof StylePropertyTreeElement){const n=t.updateFilter();e=e||n}const t=this.parentPane.filterRegex(),n=!e&&null!==t&&!t.test(this.element.deepTextContent());return this.isHiddenInternal=n,this.element.classList.toggle("hidden",n),!n&&this.styleInternal.parentRule&&this.markSelectorHighlights(),!n}isHidden(){return this.isHiddenInternal}markSelectorMatches(){const e=this.styleInternal.parentRule;if(!(e&&e instanceof SDK.CSSRule.CSSStyleRule))return;const t=this.matchedStyles.getMatchingSelectors(e),n=new Array(e.selectors.length).fill(!1);for(const e of t)n[e]=!0;if(this.parentPane.isEditingStyle)return;const i=StylePropertiesSection.renderSelectors(e.selectors,n,this.elementToSelectorIndex);this.selectorElement.removeChildren(),this.selectorElement.appendChild(i),this.markSelectorHighlights()}static getSpecificityStoredForNodeElement(e){return StylePropertiesSection.#e.get(e)}static renderSelectors(e,t,n){const i=document.createDocumentFragment();for(const[s,r]of e.entries()){s&&UI.UIUtils.createTextChild(i,", ");const o=document.createElement("span");o.classList.add("simple-selector"),o.classList.toggle("selector-matches",t[s]),r.specificity&&StylePropertiesSection.#e.set(o,r.specificity),n.set(o,s),o.textContent=e[s].text,i.append(o)}return i}markSelectorHighlights(){const e=this.selectorElement.getElementsByClassName("simple-selector"),t=this.parentPane.filterRegex();for(let n=0;n<e.length;++n){const i=null!==t&&t.test(e[n].textContent||"");e[n].classList.toggle("filter-match",i)}}addNewBlankProperty(e=this.propertiesTreeOutline.rootElement().childCount()){const t=this.styleInternal.newBlankProperty(e),n=new StylePropertyTreeElement({stylesPane:this.parentPane,matchedStyles:this.matchedStyles,property:t,isShorthand:!1,inherited:!1,overloaded:!1,newProperty:!0});return this.propertiesTreeOutline.insertChild(n,t.index),n}handleEmptySpaceMouseDown(){this.willCauseCancelEditing=this.parentPane.isEditingStyle,this.selectedSinceMouseDown=!1}handleEmptySpaceClick(e){if(!this.editable||this.element.hasSelection()||this.willCauseCancelEditing||this.selectedSinceMouseDown)return;const t=e.target;if(t.classList.contains("header")||this.element.classList.contains("read-only")||t.enclosingNodeOrSelfWithClass("ancestor-rule-list"))return void e.consume();const n=UI.UIUtils.deepElementFromEvent(e),i=n&&UI.TreeOutline.TreeElement.getTreeElementBylistItemNode(n);i&&i instanceof StylePropertyTreeElement?this.addNewBlankProperty(i.property.index+1).startEditing():t.classList.contains("selector-container")||t.classList.contains("styles-section-subtitle")?this.addNewBlankProperty(0).startEditing():this.addNewBlankProperty().startEditing(),e.consume(!0)}handleQueryRuleClick(e,t){const n=t.currentTarget;if(UI.UIUtils.isBeingEdited(n))return;if(UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(t)&&this.navigable){const n=e.rawLocation();if(!n)return void t.consume(!0);const i=Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(n);return i&&Common.Revealer.reveal(i),void t.consume(!0)}if(!this.editable)return;const i=new UI.InplaceEditor.Config(this.editingMediaCommitted.bind(this,e),this.editingMediaCancelled.bind(this,n),void 0,this.editingMediaBlurHandler.bind(this));UI.InplaceEditor.InplaceEditor.startEditing(n,i);const s=n.getComponentSelection();s&&s.selectAllChildren(n),this.parentPane.setEditingStyle(!0);n.enclosingNodeOrSelfWithClass("query").classList.add("editing-query"),t.consume(!0)}editingMediaFinished(e){this.parentPane.setEditingStyle(!1);e.enclosingNodeOrSelfWithClass("query").classList.remove("editing-query")}editingMediaCancelled(e){this.editingMediaFinished(e),this.markSelectorMatches();const t=e.getComponentSelection();t&&t.collapse(e,0)}editingMediaBlurHandler(){return!0}async editingMediaCommitted(e,t,n,i,s,r){this.parentPane.setEditingStyle(!1),this.editingMediaFinished(t),n&&(n=n.trim()),this.parentPane.setUserOperation(!0);const o=this.parentPane.cssModel();if(o&&e.styleSheetId){const t=e.range;let i=!1;i=e instanceof SDK.CSSContainerQuery.CSSContainerQuery?await o.setContainerQueryText(e.styleSheetId,t,n):e instanceof SDK.CSSSupports.CSSSupports?await o.setSupportsText(e.styleSheetId,t,n):e instanceof SDK.CSSScope.CSSScope?await o.setScopeText(e.styleSheetId,t,n):await o.setMediaText(e.styleSheetId,t,n),i&&(this.matchedStyles.resetActiveProperties(),this.parentPane.refreshUpdate(this)),this.parentPane.setUserOperation(!1),this.editingMediaTextCommittedForTest()}}editingMediaTextCommittedForTest(){}handleSelectorClick(e){const t=e.target;if(t){if(UI.KeyboardShortcut.KeyboardShortcut.eventHasCtrlEquivalentKey(e)&&this.navigable&&t.classList.contains("simple-selector")){const n=this.elementToSelectorIndex.get(t);return n&&this.navigateToSelectorSource(n,!0),void e.consume(!0)}this.element.hasSelection()||(this.startEditingAtFirstPosition(),e.consume(!0))}}handleContextMenuEvent(e){if(!e.target)return;const t=new UI.ContextMenu.ContextMenu(e);t.clipboardSection().appendItem(i18nString(UIStrings.copySelector),(()=>{const e=this.headerText();Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.SelectorViaContextMenu)})),t.clipboardSection().appendItem(i18nString(UIStrings.copyRule),(()=>{const e=StylesSidebarPane.formatLeadingProperties(this).ruleText;Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.RuleViaContextMenu)})),t.clipboardSection().appendItem(i18nString(UIStrings.copyAllDeclarations),(()=>{const e=StylesSidebarPane.formatLeadingProperties(this).allDeclarationText;Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllDeclarationsViaContextMenu)})),t.clipboardSection().appendItem(i18nString(UIStrings.copyAllCSSChanges),(async()=>{const e=await this.parentPane.getFormattedChanges();Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(e),Host.userMetrics.styleTextCopied(Host.UserMetrics.StyleTextCopied.AllChangesViaStylesPane)})),t.show()}navigateToSelectorSource(e,t){const n=this.parentPane.cssModel();if(!n)return;const i=this.styleInternal.parentRule;if(!i||void 0===i.styleSheetId)return;const s=n.styleSheetHeaderForId(i.styleSheetId);if(!s)return;const r=new SDK.CSSModel.CSSLocation(s,i.lineNumberInSource(e),i.columnNumberInSource(e));StylePropertiesSection.revealSelectorSource(r,t)}static revealSelectorSource(e,t){const n=Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().rawLocationToUILocation(e);n&&Common.Revealer.reveal(n,!t)}startEditingAtFirstPosition(){this.editable&&(this.styleInternal.parentRule?this.startEditingSelector():this.moveEditorFromSelector("forward"))}startEditingSelector(){const e=this.selectorElement;if(UI.UIUtils.isBeingEdited(e))return;e.scrollIntoViewIfNeeded(!1);const t=e.textContent;null!==t&&(e.textContent=t.replace(/\s+/g," ").trim());const n=new UI.InplaceEditor.Config(this.editingSelectorCommitted.bind(this),this.editingSelectorCancelled.bind(this));UI.InplaceEditor.InplaceEditor.startEditing(this.selectorElement,n);const i=e.getComponentSelection();i&&i.selectAllChildren(e),this.parentPane.setEditingStyle(!0),e.classList.contains("simple-selector")&&this.navigateToSelectorSource(0,!1)}moveEditorFromSelector(e){if(this.markSelectorMatches(),e)if("forward"===e){let e=this.propertiesTreeOutline.firstChild();for(;e&&e.inherited();){const t=e.nextSibling;e=t instanceof StylePropertyTreeElement?t:null}e?e.startEditing(e.nameElement):this.addNewBlankProperty().startEditing()}else{const e=this.previousEditableSibling();if(!e)return;e.addNewBlankProperty().startEditing()}}editingSelectorCommitted(e,t,n,i,s){if(this.editingSelectorEnded(),t&&(t=t.trim()),t===n)return this.selectorElement.textContent=t,void this.moveEditorFromSelector(s);const r=this.styleInternal.parentRule;r&&(this.parentPane.setUserOperation(!0),this.setHeaderText(r,t).then(function(){this.parentPane.setUserOperation(!1),this.moveEditorFromSelector(s),this.editingSelectorCommittedForTest()}.bind(this)))}setHeaderText(e,t){function n(e){const t=this.matchedStyles.getMatchingSelectors(e).length>0;this.propertiesTreeOutline.element.classList.toggle("no-affect",!t),this.matchedStyles.resetActiveProperties(),this.parentPane.refreshUpdate(this)}if(!(e instanceof SDK.CSSRule.CSSStyleRule))return Promise.resolve();const i=e.selectorRange();return i?(this.#t=void 0,e.setSelectorText(t).then(function(e,t){return t?this.matchedStyles.recomputeMatchingSelectors(e).then(n.bind(this,e)):Promise.resolve()}.bind(this,e,Boolean(i)))):Promise.resolve()}editingSelectorCommittedForTest(){}updateRuleOrigin(){this.selectorRefElement.removeChildren(),this.selectorRefElement.appendChild(this.createRuleOriginNode(this.matchedStyles,this.parentPane.linkifier,this.styleInternal.parentRule))}editingSelectorEnded(){this.parentPane.setEditingStyle(!1)}editingSelectorCancelled(){this.editingSelectorEnded(),this.markSelectorMatches()}closestPropertyForEditing(e){const t=this.propertiesTreeOutline.rootElement();return e>=t.childCount()?t.lastChild():t.childAt(e)}static MaxProperties=50}export class BlankStylePropertiesSection extends StylePropertiesSection{normal;ruleLocation;styleSheetId;constructor(e,t,n,i,s,r,o){const l=e.cssModel();super(e,t,SDK.CSSRule.CSSStyleRule.createDummyRule(l,n).style,o,null,null),this.normal=!1,this.ruleLocation=s,this.styleSheetId=i,this.selectorRefElement.removeChildren(),this.selectorRefElement.appendChild(StylePropertiesSection.linkifyRuleLocation(l,this.parentPane.linkifier,i,this.actualRuleLocation())),r&&r.parentRule&&r.parentRule instanceof SDK.CSSRule.CSSStyleRule&&this.createAncestorRules(r.parentRule),this.element.classList.add("blank-section")}actualRuleLocation(){const e=this.rulePrefix().split("\n"),t=e[e.length-1],n=new TextUtils.TextRange.TextRange(0,0,e.length-1,t?t.length:0);return this.ruleLocation.rebaseAfterTextEdit(TextUtils.TextRange.TextRange.createFromLocation(0,0),n)}rulePrefix(){return 0===this.ruleLocation.startLine&&0===this.ruleLocation.startColumn?"":"\n\n"}get isBlank(){return!this.normal}editingSelectorCommitted(e,t,n,i,s){if(!this.isBlank)return void super.editingSelectorCommitted(e,t,n,i,s);function r(e){const t=this.matchedStyles.getMatchingSelectors(e).length>0;this.makeNormal(e),t||this.propertiesTreeOutline.element.classList.add("no-affect"),this.updateRuleOrigin(),this.parentPane.setUserOperation(!1),this.editingSelectorEnded(),this.element.parentElement&&this.moveEditorFromSelector(s),this.markSelectorMatches(),this.editingSelectorCommittedForTest()}t&&(t=t.trim()),this.parentPane.setUserOperation(!0);const o=this.parentPane.cssModel(),l=this.rulePrefix()+t+" {}";o&&o.addRule(this.styleSheetId,l,this.ruleLocation).then(function(e){return e?this.matchedStyles.addNewRule(e,this.matchedStyles.node()).then(r.bind(this,e)):(this.editingSelectorCancelled(),this.editingSelectorCommittedForTest(),Promise.resolve())}.bind(this))}editingSelectorCancelled(){this.parentPane.setUserOperation(!1),this.isBlank?(this.editingSelectorEnded(),this.parentPane.removeSection(this)):super.editingSelectorCancelled()}makeNormal(e){this.element.classList.remove("blank-section"),this.styleInternal=e.style,this.normal=!0}}export class RegisteredPropertiesSection extends StylePropertiesSection{constructor(e,t,n,i,s,r){super(e,t,n,i,null,null,s),r||this.element.classList.add("hidden"),this.selectorElement.className="property-registration-key"}createRuleOriginNode(e,t,n){return n?super.createRuleOriginNode(e,t,n):document.createTextNode("CSS.registerProperty")}}export class KeyframePropertiesSection extends StylePropertiesSection{constructor(e,t,n,i){super(e,t,n,i,null,null),this.selectorElement.className="keyframe-key"}headerText(){return this.styleInternal.parentRule instanceof SDK.CSSRule.CSSKeyframeRule?this.styleInternal.parentRule.key().text:""}setHeaderText(e,t){if(!(e instanceof SDK.CSSRule.CSSKeyframeRule))return Promise.resolve();return e.key().range?e.setKeyText(t).then(function(e){e&&this.parentPane.refreshUpdate(this)}.bind(this)):Promise.resolve()}isPropertyInherited(e){return!1}isPropertyOverloaded(e){return!1}markSelectorHighlights(){}markSelectorMatches(){this.styleInternal.parentRule instanceof SDK.CSSRule.CSSKeyframeRule&&(this.selectorElement.textContent=this.styleInternal.parentRule.key().text)}highlight(){}}export class TryRuleSection extends StylePropertiesSection{constructor(e,t,n,i,s,r){super(e,t,n,i,s,r),this.selectorElement.className="try-rule-selector-element",this.selectorElement.addEventListener("click",(e=>e.stopPropagation()),!0)}headerText(){return"@try"}}export class HighlightPseudoStylePropertiesSection extends StylePropertiesSection{isPropertyInherited(e){return!1}}