import*as i18n from"../i18n/i18n.js";import*as SDK from"../sdk/sdk.js";import*as UI from"../ui/ui.js";import{ElementsPanel}from"./ElementsPanel.js";const UIStrings={forceElementState:"Force element state",toggleElementState:"Toggle Element State",hov:"`:hov`"},str_=i18n.i18n.registerUIStrings("elements/ElementStatePaneWidget.js",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class ElementStatePaneWidget extends UI.Widget.Widget{constructor(){super(!0),this.registerRequiredCSS("elements/elementStatePaneWidget.css",{enableLegacyPatching:!0}),this.contentElement.className="styles-element-state-pane",UI.UIUtils.createTextChild(this.contentElement.createChild("div"),i18nString(UIStrings.forceElementState));const e=document.createElement("table");e.classList.add("source-code"),UI.ARIAUtils.markAsPresentation(e);const t=[];this._inputs=t,this._inputStates=new WeakMap;const n=e=>{const t=UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);if(!t||!(e.target instanceof HTMLInputElement))return;const n=this._inputStates.get(e.target);n&&t.domModel().cssModel().forcePseudoState(t,n,e.target.checked)},s=e=>{const s=document.createElement("td"),i=UI.UIUtils.CheckboxLabel.create(":"+e),o=i.checkboxElement;return this._inputStates.set(o,e),o.addEventListener("click",n,!1),t.push(o),s.appendChild(i),s};let i=e.createChild("tr");i.appendChild(s("active")),i.appendChild(s("hover")),i=e.createChild("tr"),i.appendChild(s("focus")),i.appendChild(s("visited")),i=e.createChild("tr"),i.appendChild(s("focus-within")),i.appendChild(s("focus-visible")),i=e.createChild("tr"),i.appendChild(s("target")),this.contentElement.appendChild(e),UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode,this._update,this)}_updateModel(e){this._cssModel!==e&&(this._cssModel&&this._cssModel.removeEventListener(SDK.CSSModel.Events.PseudoStateForced,this._update,this),this._cssModel=e,this._cssModel&&this._cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced,this._update,this))}wasShown(){this._update()}_update(){if(!this.isShowing())return;let e=UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);if(e&&(e=e.enclosingElementOrSelf()),this._updateModel(e?e.domModel().cssModel():null),e){const t=e.domModel().cssModel().pseudoState(e);for(const n of this._inputs){n.disabled=Boolean(e.pseudoType());const s=this._inputStates.get(n);n.checked=!(!t||void 0===s)&&t.indexOf(s)>=0}}else for(const t of this._inputs)t.disabled=!0,t.checked=!1}}let buttonProviderInstance;export class ButtonProvider{constructor(){this._button=new UI.Toolbar.ToolbarToggle(i18nString(UIStrings.toggleElementState),""),this._button.setText(i18nString(UIStrings.hov)),this._button.addEventListener(UI.Toolbar.ToolbarButton.Events.Click,this._clicked,this),this._button.element.classList.add("monospace"),this._view=new ElementStatePaneWidget}static instance(e={forceNew:null}){const{forceNew:t}=e;return buttonProviderInstance&&!t||(buttonProviderInstance=new ButtonProvider),buttonProviderInstance}_clicked(){ElementsPanel.instance().showToolbarPane(this._view.isShowing()?null:this._view,this._button)}item(){return this._button}}