PropertiesWidget.js 3.1 KB

12345678910111213141516
  1. export default class PropertiesWidget extends UI.ThrottledWidget{constructor(){super(true);this.registerRequiredCSS('elements/propertiesWidget.css');SDK.targetManager.addModelListener(SDK.DOMModel,SDK.DOMModel.Events.AttrModified,this._onNodeChange,this);SDK.targetManager.addModelListener(SDK.DOMModel,SDK.DOMModel.Events.AttrRemoved,this._onNodeChange,this);SDK.targetManager.addModelListener(SDK.DOMModel,SDK.DOMModel.Events.CharacterDataModified,this._onNodeChange,this);SDK.targetManager.addModelListener(SDK.DOMModel,SDK.DOMModel.Events.ChildNodeCountUpdated,this._onNodeChange,this);UI.context.addFlavorChangeListener(SDK.DOMNode,this._setNode,this);this._node=UI.context.flavor(SDK.DOMNode);this._treeOutline=new ObjectUI.ObjectPropertiesSectionsTreeOutline({readOnly:true});this._treeOutline.setShowSelectionOnKeyboardFocus(true,false);this._expandController=new ObjectUI.ObjectPropertiesSectionsTreeExpandController(this._treeOutline);this.contentElement.appendChild(this._treeOutline.element);this._treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded,()=>{Host.userMetrics.actionTaken(Host.UserMetrics.Action.DOMPropertiesExpanded);});this.update();}
  2. _setNode(event){this._node=(event.data);this.update();}
  3. async doUpdate(){if(this._lastRequestedNode){this._lastRequestedNode.domModel().runtimeModel().releaseObjectGroup(_objectGroupName);delete this._lastRequestedNode;}
  4. if(!this._node){this.contentElement.removeChildren();return;}
  5. this._lastRequestedNode=this._node;const object=await this._node.resolveToObject(_objectGroupName);if(!object){return;}
  6. const result=await object.callFunction(protoList);object.release();if(!result.object||result.wasThrown){return;}
  7. const propertiesResult=await result.object.getOwnProperties(false);result.object.release();if(!propertiesResult||!propertiesResult.properties){return;}
  8. const properties=propertiesResult.properties;this._treeOutline.removeChildren();let selected=false;for(let i=0;i<properties.length;++i){if(!parseInt(properties[i].name,10)){continue;}
  9. const property=properties[i].value;let title=property.description;title=title.replace(/Prototype$/,'');const section=this._createSectionTreeElement(property,title);this._treeOutline.appendChild(section);if(!selected){section.select(true,false);selected=true;}}
  10. function protoList(){let proto=this;const result={__proto__:null};let counter=1;while(proto){result[counter++]=proto;proto=proto.__proto__;}
  11. return result;}}
  12. _createSectionTreeElement(property,title){const titleElement=createElementWithClass('span','tree-element-title');titleElement.textContent=title;const section=new ObjectUI.ObjectPropertiesSection.RootElement(property);section.title=titleElement;this._expandController.watchSection(title,section);return section;}
  13. _onNodeChange(event){if(!this._node){return;}
  14. const data=event.data;const node=(data instanceof SDK.DOMNode?data:data.node);if(this._node!==node){return;}
  15. this.update();}}
  16. export const _objectGroupName='properties-sidebar-pane';self.Elements=self.Elements||{};Elements=Elements||{};Elements.PropertiesWidget=PropertiesWidget;Elements.PropertiesWidget._objectGroupName=_objectGroupName;