InspectElementModeController.js 3.0 KB

123456789101112131415161718192021
  1. export default class InspectElementModeController{constructor(){this._toggleSearchAction=UI.actionRegistry.action('elements.toggle-element-search');this._mode=Protocol.Overlay.InspectMode.None;SDK.targetManager.addEventListener(SDK.TargetManager.Events.SuspendStateChanged,this._suspendStateChanged,this);SDK.targetManager.addModelListener(SDK.OverlayModel,SDK.OverlayModel.Events.ExitedInspectMode,()=>this._setMode(Protocol.Overlay.InspectMode.None));SDK.OverlayModel.setInspectNodeHandler(this._inspectNode.bind(this));SDK.targetManager.observeModels(SDK.OverlayModel,this);this._showDetailedInspectTooltipSetting=Common.settings.moduleSetting('showDetailedInspectTooltip');this._showDetailedInspectTooltipSetting.addChangeListener(this._showDetailedInspectTooltipChanged.bind(this));document.addEventListener('keydown',event=>{if(event.keyCode!==UI.KeyboardShortcut.Keys.Esc.code){return;}
  2. if(!this._isInInspectElementMode()){return;}
  3. this._setMode(Protocol.Overlay.InspectMode.None);event.consume(true);},true);}
  4. modelAdded(overlayModel){if(this._mode===Protocol.Overlay.InspectMode.None){return;}
  5. overlayModel.setInspectMode(this._mode,this._showDetailedInspectTooltipSetting.get());}
  6. modelRemoved(overlayModel){}
  7. _isInInspectElementMode(){return this._mode!==Protocol.Overlay.InspectMode.None;}
  8. _toggleInspectMode(){let mode;if(this._isInInspectElementMode()){mode=Protocol.Overlay.InspectMode.None;}else{mode=Common.moduleSetting('showUAShadowDOM').get()?Protocol.Overlay.InspectMode.SearchForUAShadowDOM:Protocol.Overlay.InspectMode.SearchForNode;}
  9. this._setMode(mode);}
  10. _captureScreenshotMode(){this._setMode(Protocol.Overlay.InspectMode.CaptureAreaScreenshot);}
  11. _setMode(mode){if(SDK.targetManager.allTargetsSuspended()){return;}
  12. this._mode=mode;for(const overlayModel of SDK.targetManager.models(SDK.OverlayModel)){overlayModel.setInspectMode(mode,this._showDetailedInspectTooltipSetting.get());}
  13. this._toggleSearchAction.setToggled(this._isInInspectElementMode());}
  14. _suspendStateChanged(){if(!SDK.targetManager.allTargetsSuspended()){return;}
  15. this._mode=Protocol.Overlay.InspectMode.None;this._toggleSearchAction.setToggled(false);}
  16. async _inspectNode(node){Elements.ElementsPanel.instance().revealAndSelectNode(node,true,true);}
  17. _showDetailedInspectTooltipChanged(){this._setMode(this._mode);}}
  18. export class ToggleSearchActionDelegate{handleAction(context,actionId){if(!inspectElementModeController){return false;}
  19. if(actionId==='elements.toggle-element-search'){inspectElementModeController._toggleInspectMode();}else if(actionId==='elements.capture-area-screenshot'){inspectElementModeController._captureScreenshotMode();}
  20. return true;}}
  21. export const inspectElementModeController=Root.Runtime.queryParam('isSharedWorker')?null:new InspectElementModeController();self.Elements=self.Elements||{};Elements=Elements||{};Elements.InspectElementModeController=InspectElementModeController;Elements.InspectElementModeController.ToggleSearchActionDelegate=ToggleSearchActionDelegate;Elements.inspectElementModeController=inspectElementModeController;