ElementStatePaneWidget.js 2.8 KB

12345678910111213141516
  1. export default class ElementStatePaneWidget extends UI.Widget{constructor(){super(true);this.registerRequiredCSS('elements/elementStatePaneWidget.css');this.contentElement.className='styles-element-state-pane';this.contentElement.createChild('div').createTextChild(Common.UIString('Force element state'));const table=createElementWithClass('table','source-code');const inputs=[];this._inputs=inputs;function clickListener(event){const node=UI.context.flavor(SDK.DOMNode);if(!node){return;}
  2. node.domModel().cssModel().forcePseudoState(node,event.target.state,event.target.checked);}
  3. function createCheckbox(state){const td=createElement('td');const label=UI.CheckboxLabel.create(':'+state);const input=label.checkboxElement;input.state=state;input.addEventListener('click',clickListener,false);inputs.push(input);td.appendChild(label);return td;}
  4. let tr=table.createChild('tr');tr.appendChild(createCheckbox.call(null,'active'));tr.appendChild(createCheckbox.call(null,'hover'));tr=table.createChild('tr');tr.appendChild(createCheckbox.call(null,'focus'));tr.appendChild(createCheckbox.call(null,'visited'));tr=table.createChild('tr');tr.appendChild(createCheckbox.call(null,'focus-within'));try{tr.querySelector(':focus-visible');tr.appendChild(createCheckbox.call(null,'focus-visible'));}catch(e){}
  5. this.contentElement.appendChild(table);UI.context.addFlavorChangeListener(SDK.DOMNode,this._update,this);}
  6. _updateModel(cssModel){if(this._cssModel===cssModel){return;}
  7. if(this._cssModel){this._cssModel.removeEventListener(SDK.CSSModel.Events.PseudoStateForced,this._update,this);}
  8. this._cssModel=cssModel;if(this._cssModel){this._cssModel.addEventListener(SDK.CSSModel.Events.PseudoStateForced,this._update,this);}}
  9. wasShown(){this._update();}
  10. _update(){if(!this.isShowing()){return;}
  11. let node=UI.context.flavor(SDK.DOMNode);if(node){node=node.enclosingElementOrSelf();}
  12. this._updateModel(node?node.domModel().cssModel():null);if(node){const nodePseudoState=node.domModel().cssModel().pseudoState(node);for(const input of this._inputs){input.disabled=!!node.pseudoType();input.checked=nodePseudoState.indexOf(input.state)>=0;}}else{for(const input of this._inputs){input.disabled=true;input.checked=false;}}}}
  13. export class ButtonProvider{constructor(){this._button=new UI.ToolbarToggle(Common.UIString('Toggle Element State'),'');this._button.setText(Common.UIString(':hov'));this._button.addEventListener(UI.ToolbarButton.Events.Click,this._clicked,this);this._button.element.classList.add('monospace');this._view=new ElementStatePaneWidget();}
  14. _clicked(){Elements.ElementsPanel.instance().showToolbarPane(!this._view.isShowing()?this._view:null,this._button);}
  15. item(){return this._button;}}
  16. self.Elements=self.Elements||{};Elements=Elements||{};Elements.ElementStatePaneWidget=ElementStatePaneWidget;Elements.ElementStatePaneWidget.ButtonProvider=ButtonProvider;