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 |