OverlayModel.js 8.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152
  1. export default class OverlayModel extends SDK.SDKModel{constructor(target){super(target);this._domModel=(target.model(SDK.DOMModel));target.registerOverlayDispatcher(this);this._overlayAgent=target.overlayAgent();this._debuggerModel=target.model(SDK.DebuggerModel);if(this._debuggerModel){Common.moduleSetting('disablePausedStateOverlay').addChangeListener(this._updatePausedInDebuggerMessage,this);this._debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerPaused,this._updatePausedInDebuggerMessage,this);this._debuggerModel.addEventListener(SDK.DebuggerModel.Events.DebuggerResumed,this._updatePausedInDebuggerMessage,this);this._debuggerModel.addEventListener(SDK.DebuggerModel.Events.GlobalObjectCleared,this._updatePausedInDebuggerMessage,this);}
  2. this._inspectModeEnabled=false;this._hideHighlightTimeout=null;this._defaultHighlighter=new DefaultHighlighter(this);this._highlighter=this._defaultHighlighter;this._showPaintRectsSetting=Common.moduleSetting('showPaintRects');this._showLayoutShiftRegionsSetting=Common.moduleSetting('showLayoutShiftRegions');this._showAdHighlightsSetting=Common.moduleSetting('showAdHighlights');this._showDebugBordersSetting=Common.moduleSetting('showDebugBorders');this._showFPSCounterSetting=Common.moduleSetting('showFPSCounter');this._showScrollBottleneckRectsSetting=Common.moduleSetting('showScrollBottleneckRects');this._showHitTestBordersSetting=Common.moduleSetting('showHitTestBorders');this._registeredListeners=[];this._showViewportSizeOnResize=true;if(!target.suspended()){this._overlayAgent.enable();this._wireAgentToSettings();}}
  3. static highlightObjectAsDOMNode(object){const domModel=object.runtimeModel().target().model(SDK.DOMModel);if(domModel){domModel.overlayModel().highlightInOverlay({object});}}
  4. static hideDOMNodeHighlight(){for(const overlayModel of SDK.targetManager.models(OverlayModel)){overlayModel._delayedHideHighlight(0);}}
  5. static async muteHighlight(){return Promise.all(SDK.targetManager.models(OverlayModel).map(model=>model.suspendModel()));}
  6. static async unmuteHighlight(){return Promise.all(SDK.targetManager.models(OverlayModel).map(model=>model.resumeModel()));}
  7. _wireAgentToSettings(){this._registeredListeners=[this._showPaintRectsSetting.addChangeListener(()=>this._overlayAgent.setShowPaintRects(this._showPaintRectsSetting.get())),this._showLayoutShiftRegionsSetting.addChangeListener(()=>this._overlayAgent.setShowLayoutShiftRegions(this._showLayoutShiftRegionsSetting.get())),this._showAdHighlightsSetting.addChangeListener(()=>this._overlayAgent.setShowAdHighlights(this._showAdHighlightsSetting.get())),this._showDebugBordersSetting.addChangeListener(()=>this._overlayAgent.setShowDebugBorders(this._showDebugBordersSetting.get())),this._showFPSCounterSetting.addChangeListener(()=>this._overlayAgent.setShowFPSCounter(this._showFPSCounterSetting.get())),this._showScrollBottleneckRectsSetting.addChangeListener(()=>this._overlayAgent.setShowScrollBottleneckRects(this._showScrollBottleneckRectsSetting.get())),this._showHitTestBordersSetting.addChangeListener(()=>this._overlayAgent.setShowHitTestBorders(this._showHitTestBordersSetting.get()))];if(this._showPaintRectsSetting.get()){this._overlayAgent.setShowPaintRects(true);}
  8. if(this._showLayoutShiftRegionsSetting.get()){this._overlayAgent.setShowLayoutShiftRegions(true);}
  9. if(this._showAdHighlightsSetting.get()){this._overlayAgent.setShowAdHighlights(true);}
  10. if(this._showDebugBordersSetting.get()){this._overlayAgent.setShowDebugBorders(true);}
  11. if(this._showFPSCounterSetting.get()){this._overlayAgent.setShowFPSCounter(true);}
  12. if(this._showScrollBottleneckRectsSetting.get()){this._overlayAgent.setShowScrollBottleneckRects(true);}
  13. if(this._showHitTestBordersSetting.get()){this._overlayAgent.setShowHitTestBorders(true);}
  14. if(this._debuggerModel.isPaused()){this._updatePausedInDebuggerMessage();}
  15. return this._overlayAgent.setShowViewportSizeOnResize(this._showViewportSizeOnResize);}
  16. suspendModel(){Common.EventTarget.removeEventListeners(this._registeredListeners);return this._overlayAgent.disable();}
  17. resumeModel(){this._overlayAgent.enable();return this._wireAgentToSettings();}
  18. setShowViewportSizeOnResize(show){this._showViewportSizeOnResize=show;if(this.target().suspended()){return;}
  19. this._overlayAgent.setShowViewportSizeOnResize(show);}
  20. _updatePausedInDebuggerMessage(){if(this.target().suspended()){return Promise.resolve();}
  21. const message=this._debuggerModel.isPaused()&&!Common.moduleSetting('disablePausedStateOverlay').get()?Common.UIString('Paused in debugger'):undefined;return this._overlayAgent.setPausedInDebuggerMessage(message);}
  22. setHighlighter(highlighter){this._highlighter=highlighter||this._defaultHighlighter;}
  23. async setInspectMode(mode,showStyles=true){await this._domModel.requestDocument();this._inspectModeEnabled=mode!==Protocol.Overlay.InspectMode.None;this.dispatchEventToListeners(Events.InspectModeWillBeToggled,this);this._highlighter.setInspectMode(mode,this._buildHighlightConfig('all',showStyles));}
  24. inspectModeEnabled(){return this._inspectModeEnabled;}
  25. highlightInOverlay(data,mode,showInfo){if(this._hideHighlightTimeout){clearTimeout(this._hideHighlightTimeout);this._hideHighlightTimeout=null;}
  26. const highlightConfig=this._buildHighlightConfig(mode);if(typeof showInfo!=='undefined'){highlightConfig.showInfo=showInfo;}
  27. this._highlighter.highlightInOverlay(data,highlightConfig);}
  28. highlightInOverlayForTwoSeconds(data){this.highlightInOverlay(data);this._delayedHideHighlight(2000);}
  29. _delayedHideHighlight(delay){if(this._hideHighlightTimeout===null){this._hideHighlightTimeout=setTimeout(()=>this.highlightInOverlay({}),delay);}}
  30. highlightFrame(frameId){if(this._hideHighlightTimeout){clearTimeout(this._hideHighlightTimeout);this._hideHighlightTimeout=null;}
  31. this._highlighter.highlightFrame(frameId);}
  32. _buildHighlightConfig(mode='all',showStyles=false){const showRulers=Common.moduleSetting('showMetricsRulers').get();const highlightConfig={showInfo:mode==='all',showRulers:showRulers,showStyles,showExtensionLines:showRulers};if(mode==='all'||mode==='content'){highlightConfig.contentColor=Common.Color.PageHighlight.Content.toProtocolRGBA();}
  33. if(mode==='all'||mode==='padding'){highlightConfig.paddingColor=Common.Color.PageHighlight.Padding.toProtocolRGBA();}
  34. if(mode==='all'||mode==='border'){highlightConfig.borderColor=Common.Color.PageHighlight.Border.toProtocolRGBA();}
  35. if(mode==='all'||mode==='margin'){highlightConfig.marginColor=Common.Color.PageHighlight.Margin.toProtocolRGBA();}
  36. if(mode==='all'){highlightConfig.eventTargetColor=Common.Color.PageHighlight.EventTarget.toProtocolRGBA();highlightConfig.shapeColor=Common.Color.PageHighlight.Shape.toProtocolRGBA();highlightConfig.shapeMarginColor=Common.Color.PageHighlight.ShapeMargin.toProtocolRGBA();}
  37. if(mode==='all'){highlightConfig.cssGridColor=Common.Color.PageHighlight.CssGrid.toProtocolRGBA();}
  38. return highlightConfig;}
  39. nodeHighlightRequested(nodeId){const node=this._domModel.nodeForId(nodeId);if(node){this.dispatchEventToListeners(Events.HighlightNodeRequested,node);}}
  40. static setInspectNodeHandler(handler){OverlayModel._inspectNodeHandler=handler;}
  41. inspectNodeRequested(backendNodeId){const deferredNode=new SDK.DeferredDOMNode(this.target(),backendNodeId);if(OverlayModel._inspectNodeHandler){deferredNode.resolvePromise().then(node=>{if(node){OverlayModel._inspectNodeHandler(node);}});}else{Common.Revealer.reveal(deferredNode);}
  42. this.dispatchEventToListeners(Events.ExitedInspectMode);}
  43. screenshotRequested(viewport){this.dispatchEventToListeners(Events.ScreenshotRequested,viewport);this.dispatchEventToListeners(Events.ExitedInspectMode);}
  44. inspectModeCanceled(){this.dispatchEventToListeners(Events.ExitedInspectMode);}}
  45. export const Events={InspectModeWillBeToggled:Symbol('InspectModeWillBeToggled'),ExitedInspectMode:Symbol('InspectModeExited'),HighlightNodeRequested:Symbol('HighlightNodeRequested'),ScreenshotRequested:Symbol('ScreenshotRequested'),};export class Highlighter{highlightInOverlay(data,config){}
  46. setInspectMode(mode,config){}
  47. highlightFrame(frameId){}}
  48. class DefaultHighlighter{constructor(model){this._model=model;}
  49. highlightInOverlay(data,config){const{node,deferredNode,object,selectorList}=data;const nodeId=node?node.id:undefined;const backendNodeId=deferredNode?deferredNode.backendNodeId():undefined;const objectId=object?object.objectId:undefined;if(nodeId||backendNodeId||objectId){this._model._overlayAgent.highlightNode(config,nodeId,backendNodeId,objectId,selectorList);}else{this._model._overlayAgent.hideHighlight();}}
  50. setInspectMode(mode,config){return this._model._overlayAgent.setInspectMode(mode,config);}
  51. highlightFrame(frameId){this._model._overlayAgent.highlightFrame(frameId,Common.Color.PageHighlight.Content.toProtocolRGBA(),Common.Color.PageHighlight.ContentOutline.toProtocolRGBA());}}
  52. self.SDK=self.SDK||{};SDK=SDK||{};SDK.OverlayModel=OverlayModel;SDK.OverlayModel.Events=Events;SDK.OverlayModel.Highlighter=Highlighter;SDK.SDKModel.register(SDK.OverlayModel,SDK.Target.Capability.DOM,true);SDK.OverlayModel.HighlightData;