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 |