| OLD | NEW |
| (Empty) |
| 1 // Copyright 2017 The Chromium Authors. All rights reserved. | |
| 2 // Use of this source code is governed by a BSD-style license that can be | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * @implements {Protocol.OverlayDispatcher} | |
| 7 */ | |
| 8 SDK.OverlayModel = class extends SDK.SDKModel { | |
| 9 /** | |
| 10 * @param {!SDK.Target} target | |
| 11 */ | |
| 12 constructor(target) { | |
| 13 super(target); | |
| 14 this._domModel = /** @type {!SDK.DOMModel} */ (target.model(SDK.DOMModel)); | |
| 15 | |
| 16 target.registerOverlayDispatcher(this); | |
| 17 this._overlayAgent = target.overlayAgent(); | |
| 18 this._overlayAgent.enable(); | |
| 19 this._overlayAgent.setShowViewportSizeOnResize(true); | |
| 20 | |
| 21 this._debuggerModel = target.model(SDK.DebuggerModel); | |
| 22 if (this._debuggerModel) { | |
| 23 Common.moduleSetting('disablePausedStateOverlay').addChangeListener(this._
updatePausedInDebuggerMessage, this); | |
| 24 this._debuggerModel.addEventListener( | |
| 25 SDK.DebuggerModel.Events.DebuggerPaused, this._updatePausedInDebuggerM
essage, this); | |
| 26 this._debuggerModel.addEventListener( | |
| 27 SDK.DebuggerModel.Events.DebuggerResumed, this._updatePausedInDebugger
Message, this); | |
| 28 // TODO(dgozman): we should get DebuggerResumed on navigations instead of
listening to GlobalObjectCleared. | |
| 29 this._debuggerModel.addEventListener( | |
| 30 SDK.DebuggerModel.Events.GlobalObjectCleared, this._updatePausedInDebu
ggerMessage, this); | |
| 31 } | |
| 32 | |
| 33 this._inspectModeEnabled = false; | |
| 34 this._hideHighlightTimeout = null; | |
| 35 this._defaultHighlighter = new SDK.OverlayModel.DefaultHighlighter(this); | |
| 36 this._highlighter = this._defaultHighlighter; | |
| 37 | |
| 38 this._showPaintRectsSetting = Common.moduleSetting('showPaintRects'); | |
| 39 this._showPaintRectsSetting.addChangeListener( | |
| 40 () => this._overlayAgent.setShowPaintRects(this._showPaintRectsSetting.g
et())); | |
| 41 if (this._showPaintRectsSetting.get()) | |
| 42 this._overlayAgent.setShowPaintRects(true); | |
| 43 | |
| 44 this._showDebugBordersSetting = Common.moduleSetting('showDebugBorders'); | |
| 45 this._showDebugBordersSetting.addChangeListener( | |
| 46 () => this._overlayAgent.setShowDebugBorders(this._showDebugBordersSetti
ng.get())); | |
| 47 if (this._showDebugBordersSetting.get()) | |
| 48 this._overlayAgent.setShowDebugBorders(true); | |
| 49 | |
| 50 this._showFPSCounterSetting = Common.moduleSetting('showFPSCounter'); | |
| 51 this._showFPSCounterSetting.addChangeListener( | |
| 52 () => this._overlayAgent.setShowFPSCounter(this._showFPSCounterSetting.g
et())); | |
| 53 if (this._showFPSCounterSetting.get()) | |
| 54 this._overlayAgent.setShowFPSCounter(true); | |
| 55 | |
| 56 this._showScrollBottleneckRectsSetting = Common.moduleSetting('showScrollBot
tleneckRects'); | |
| 57 this._showScrollBottleneckRectsSetting.addChangeListener( | |
| 58 () => this._overlayAgent.setShowScrollBottleneckRects(this._showScrollBo
ttleneckRectsSetting.get())); | |
| 59 if (this._showScrollBottleneckRectsSetting.get()) | |
| 60 this._overlayAgent.setShowScrollBottleneckRects(true); | |
| 61 } | |
| 62 | |
| 63 /** | |
| 64 * @param {!SDK.RemoteObject} object | |
| 65 */ | |
| 66 static highlightObjectAsDOMNode(object) { | |
| 67 var domModel = object.runtimeModel().target().model(SDK.DOMModel); | |
| 68 if (domModel) | |
| 69 domModel.overlayModel().highlightDOMNode(undefined, undefined, undefined,
object.objectId); | |
| 70 } | |
| 71 | |
| 72 static hideDOMNodeHighlight() { | |
| 73 for (var overlayModel of SDK.targetManager.models(SDK.OverlayModel)) | |
| 74 overlayModel.highlightDOMNode(0); | |
| 75 } | |
| 76 | |
| 77 static muteHighlight() { | |
| 78 SDK.OverlayModel.hideDOMNodeHighlight(); | |
| 79 SDK.OverlayModel._highlightDisabled = true; | |
| 80 } | |
| 81 | |
| 82 static unmuteHighlight() { | |
| 83 SDK.OverlayModel._highlightDisabled = false; | |
| 84 } | |
| 85 | |
| 86 /** | |
| 87 * @override | |
| 88 * @return {!Promise} | |
| 89 */ | |
| 90 suspendModel() { | |
| 91 return this._overlayAgent.setSuspended(true); | |
| 92 } | |
| 93 | |
| 94 /** | |
| 95 * @override | |
| 96 * @return {!Promise} | |
| 97 */ | |
| 98 resumeModel() { | |
| 99 return this._overlayAgent.setSuspended(false); | |
| 100 } | |
| 101 | |
| 102 setShowViewportSizeOnResize(show) { | |
| 103 this._overlayAgent.setShowViewportSizeOnResize(show); | |
| 104 } | |
| 105 | |
| 106 _updatePausedInDebuggerMessage() { | |
| 107 var message = this._debuggerModel.isPaused() && !Common.moduleSetting('disab
lePausedStateOverlay').get() ? | |
| 108 Common.UIString('Paused in debugger') : | |
| 109 undefined; | |
| 110 this._overlayAgent.setPausedInDebuggerMessage(message); | |
| 111 } | |
| 112 | |
| 113 /** | |
| 114 * @param {?SDK.OverlayModel.Highlighter} highlighter | |
| 115 */ | |
| 116 setHighlighter(highlighter) { | |
| 117 this._highlighter = highlighter || this._defaultHighlighter; | |
| 118 } | |
| 119 | |
| 120 /** | |
| 121 * @param {!Protocol.Overlay.InspectMode} mode | |
| 122 * @return {!Promise} | |
| 123 */ | |
| 124 setInspectMode(mode) { | |
| 125 var requestDocumentPromise = new Promise(fulfill => this._domModel.requestDo
cument(fulfill)); | |
| 126 return requestDocumentPromise.then(() => { | |
| 127 this._inspectModeEnabled = mode !== Protocol.Overlay.InspectMode.None; | |
| 128 this.dispatchEventToListeners(SDK.OverlayModel.Events.InspectModeWillBeTog
gled, this); | |
| 129 return this._highlighter.setInspectMode(mode, this._buildHighlightConfig()
); | |
| 130 }); | |
| 131 } | |
| 132 | |
| 133 /** | |
| 134 * @return {boolean} | |
| 135 */ | |
| 136 inspectModeEnabled() { | |
| 137 return this._inspectModeEnabled; | |
| 138 } | |
| 139 | |
| 140 /** | |
| 141 * @param {!Protocol.DOM.NodeId=} nodeId | |
| 142 * @param {string=} mode | |
| 143 * @param {!Protocol.DOM.BackendNodeId=} backendNodeId | |
| 144 * @param {!Protocol.Runtime.RemoteObjectId=} objectId | |
| 145 */ | |
| 146 highlightDOMNode(nodeId, mode, backendNodeId, objectId) { | |
| 147 this.highlightDOMNodeWithConfig(nodeId, {mode: mode}, backendNodeId, objectI
d); | |
| 148 } | |
| 149 | |
| 150 /** | |
| 151 * @param {!Protocol.DOM.NodeId=} nodeId | |
| 152 * @param {!{mode: (string|undefined), showInfo: (boolean|undefined), selector
s: (string|undefined)}=} config | |
| 153 * @param {!Protocol.DOM.BackendNodeId=} backendNodeId | |
| 154 * @param {!Protocol.Runtime.RemoteObjectId=} objectId | |
| 155 */ | |
| 156 highlightDOMNodeWithConfig(nodeId, config, backendNodeId, objectId) { | |
| 157 if (SDK.OverlayModel._highlightDisabled) | |
| 158 return; | |
| 159 config = config || {mode: 'all', showInfo: undefined, selectors: undefined}; | |
| 160 if (this._hideHighlightTimeout) { | |
| 161 clearTimeout(this._hideHighlightTimeout); | |
| 162 this._hideHighlightTimeout = null; | |
| 163 } | |
| 164 var highlightConfig = this._buildHighlightConfig(config.mode); | |
| 165 if (typeof config.showInfo !== 'undefined') | |
| 166 highlightConfig.showInfo = config.showInfo; | |
| 167 if (typeof config.selectors !== 'undefined') | |
| 168 highlightConfig.selectorList = config.selectors; | |
| 169 this._highlighter.highlightDOMNode(this._domModel.nodeForId(nodeId || 0), hi
ghlightConfig, backendNodeId, objectId); | |
| 170 } | |
| 171 | |
| 172 /** | |
| 173 * @param {!Protocol.DOM.NodeId} nodeId | |
| 174 */ | |
| 175 highlightDOMNodeForTwoSeconds(nodeId) { | |
| 176 this.highlightDOMNode(nodeId); | |
| 177 this._hideHighlightTimeout = setTimeout(() => this.highlightDOMNode(0), 2000
); | |
| 178 } | |
| 179 | |
| 180 /** | |
| 181 * @param {!Protocol.Page.FrameId} frameId | |
| 182 */ | |
| 183 highlightFrame(frameId) { | |
| 184 if (SDK.OverlayModel._highlightDisabled) | |
| 185 return; | |
| 186 this._highlighter.highlightFrame(frameId); | |
| 187 } | |
| 188 | |
| 189 /** | |
| 190 * @param {string=} mode | |
| 191 * @return {!Protocol.Overlay.HighlightConfig} | |
| 192 */ | |
| 193 _buildHighlightConfig(mode) { | |
| 194 mode = mode || 'all'; | |
| 195 var showRulers = Common.moduleSetting('showMetricsRulers').get(); | |
| 196 var highlightConfig = {showInfo: mode === 'all', showRulers: showRulers, sho
wExtensionLines: showRulers}; | |
| 197 if (mode === 'all' || mode === 'content') | |
| 198 highlightConfig.contentColor = Common.Color.PageHighlight.Content.toProtoc
olRGBA(); | |
| 199 | |
| 200 if (mode === 'all' || mode === 'padding') | |
| 201 highlightConfig.paddingColor = Common.Color.PageHighlight.Padding.toProtoc
olRGBA(); | |
| 202 | |
| 203 if (mode === 'all' || mode === 'border') | |
| 204 highlightConfig.borderColor = Common.Color.PageHighlight.Border.toProtocol
RGBA(); | |
| 205 | |
| 206 if (mode === 'all' || mode === 'margin') | |
| 207 highlightConfig.marginColor = Common.Color.PageHighlight.Margin.toProtocol
RGBA(); | |
| 208 | |
| 209 if (mode === 'all') { | |
| 210 highlightConfig.eventTargetColor = Common.Color.PageHighlight.EventTarget.
toProtocolRGBA(); | |
| 211 highlightConfig.shapeColor = Common.Color.PageHighlight.Shape.toProtocolRG
BA(); | |
| 212 highlightConfig.shapeMarginColor = Common.Color.PageHighlight.ShapeMargin.
toProtocolRGBA(); | |
| 213 highlightConfig.displayAsMaterial = true; | |
| 214 } | |
| 215 return highlightConfig; | |
| 216 } | |
| 217 | |
| 218 /** | |
| 219 * @override | |
| 220 * @param {!Protocol.DOM.NodeId} nodeId | |
| 221 */ | |
| 222 nodeHighlightRequested(nodeId) { | |
| 223 var node = this._domModel.nodeForId(nodeId); | |
| 224 if (node) | |
| 225 this.dispatchEventToListeners(SDK.OverlayModel.Events.HighlightNodeRequest
ed, node); | |
| 226 } | |
| 227 | |
| 228 /** | |
| 229 * @override | |
| 230 * @param {!Protocol.DOM.BackendNodeId} backendNodeId | |
| 231 */ | |
| 232 inspectNodeRequested(backendNodeId) { | |
| 233 var deferredNode = new SDK.DeferredDOMNode(this.target(), backendNodeId); | |
| 234 this.dispatchEventToListeners(SDK.OverlayModel.Events.InspectNodeRequested,
deferredNode); | |
| 235 } | |
| 236 }; | |
| 237 | |
| 238 SDK.SDKModel.register(SDK.OverlayModel, SDK.Target.Capability.DOM, true); | |
| 239 | |
| 240 /** @enum {symbol} */ | |
| 241 SDK.OverlayModel.Events = { | |
| 242 InspectModeWillBeToggled: Symbol('InspectModeWillBeToggled'), | |
| 243 HighlightNodeRequested: Symbol('HighlightNodeRequested'), | |
| 244 InspectNodeRequested: Symbol('InspectNodeRequested'), | |
| 245 }; | |
| 246 | |
| 247 /** | |
| 248 * @interface | |
| 249 */ | |
| 250 SDK.OverlayModel.Highlighter = function() {}; | |
| 251 | |
| 252 SDK.OverlayModel.Highlighter.prototype = { | |
| 253 /** | |
| 254 * @param {?SDK.DOMNode} node | |
| 255 * @param {!Protocol.Overlay.HighlightConfig} config | |
| 256 * @param {!Protocol.DOM.BackendNodeId=} backendNodeId | |
| 257 * @param {!Protocol.Runtime.RemoteObjectId=} objectId | |
| 258 */ | |
| 259 highlightDOMNode(node, config, backendNodeId, objectId) {}, | |
| 260 | |
| 261 /** | |
| 262 * @param {!Protocol.Overlay.InspectMode} mode | |
| 263 * @param {!Protocol.Overlay.HighlightConfig} config | |
| 264 * @return {!Promise} | |
| 265 */ | |
| 266 setInspectMode(mode, config) {}, | |
| 267 | |
| 268 /** | |
| 269 * @param {!Protocol.Page.FrameId} frameId | |
| 270 */ | |
| 271 highlightFrame(frameId) {} | |
| 272 }; | |
| 273 | |
| 274 /** | |
| 275 * @implements {SDK.OverlayModel.Highlighter} | |
| 276 */ | |
| 277 SDK.OverlayModel.DefaultHighlighter = class { | |
| 278 /** | |
| 279 * @param {!SDK.OverlayModel} model | |
| 280 */ | |
| 281 constructor(model) { | |
| 282 this._model = model; | |
| 283 } | |
| 284 | |
| 285 /** | |
| 286 * @override | |
| 287 * @param {?SDK.DOMNode} node | |
| 288 * @param {!Protocol.Overlay.HighlightConfig} config | |
| 289 * @param {!Protocol.DOM.BackendNodeId=} backendNodeId | |
| 290 * @param {!Protocol.Runtime.RemoteObjectId=} objectId | |
| 291 */ | |
| 292 highlightDOMNode(node, config, backendNodeId, objectId) { | |
| 293 if (objectId || node || backendNodeId) { | |
| 294 this._model._overlayAgent.highlightNode( | |
| 295 config, (objectId || backendNodeId) ? undefined : node.id, backendNode
Id, objectId); | |
| 296 } else { | |
| 297 this._model._overlayAgent.hideHighlight(); | |
| 298 } | |
| 299 } | |
| 300 | |
| 301 /** | |
| 302 * @override | |
| 303 * @param {!Protocol.Overlay.InspectMode} mode | |
| 304 * @param {!Protocol.Overlay.HighlightConfig} config | |
| 305 * @return {!Promise} | |
| 306 */ | |
| 307 setInspectMode(mode, config) { | |
| 308 return this._model._overlayAgent.setInspectMode(mode, config); | |
| 309 } | |
| 310 | |
| 311 /** | |
| 312 * @override | |
| 313 * @param {!Protocol.Page.FrameId} frameId | |
| 314 */ | |
| 315 highlightFrame(frameId) { | |
| 316 this._model._overlayAgent.highlightFrame( | |
| 317 frameId, Common.Color.PageHighlight.Content.toProtocolRGBA(), | |
| 318 Common.Color.PageHighlight.ContentOutline.toProtocolRGBA()); | |
| 319 } | |
| 320 }; | |
| OLD | NEW |