OLD | NEW |
1 // Copyright 2014 The Chromium Authors. All rights reserved. | 1 // Copyright 2014 The Chromium Authors. All rights reserved. |
2 // Use of this source code is governed by a BSD-style license that can be | 2 // Use of this source code is governed by a BSD-style license that can be |
3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
4 | 4 |
5 /** | 5 /** |
6 * @constructor | 6 * @constructor |
7 * @extends {WebInspector.VBox} | 7 * @extends {WebInspector.VBox} |
8 * @implements {WebInspector.OverridesSupport.PageResizer} | 8 * @implements {WebInspector.OverridesSupport.PageResizer} |
9 * @implements {WebInspector.TargetManager.Observer} | 9 * @implements {WebInspector.TargetManager.Observer} |
10 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder | 10 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder |
11 */ | 11 */ |
12 WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder) | 12 WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder) |
13 { | 13 { |
14 WebInspector.VBox.call(this); | 14 WebInspector.VBox.call(this); |
15 this.setMinimumSize(150, 150); | 15 this.setMinimumSize(150, 150); |
16 this.element.classList.add("overflow-hidden"); | 16 this.element.classList.add("overflow-hidden"); |
17 | 17 |
18 this._responsiveDesignContainer = new WebInspector.VBox(); | 18 this._responsiveDesignContainer = new WebInspector.VBox(); |
19 this._responsiveDesignContainer.registerRequiredCSS("responsiveDesignView.cs
s"); | 19 this._responsiveDesignContainer.registerRequiredCSS("responsiveDesignView.cs
s"); |
20 | 20 |
21 this._createToolbar(); | 21 this._createToolbar(); |
22 | 22 |
23 this._canvasContainer = new WebInspector.View(); | 23 this._canvasContainer = new WebInspector.View(); |
24 this._canvasContainer.element.classList.add("responsive-design"); | 24 this._canvasContainer.element.classList.add("responsive-design"); |
25 this._canvasContainer.show(this._responsiveDesignContainer.element); | 25 this._canvasContainer.show(this._responsiveDesignContainer.element); |
26 | 26 |
| 27 this._canvas = this._canvasContainer.element.createChild("canvas", "fill res
ponsive-design-canvas"); |
| 28 |
27 this._mediaInspectorContainer = this._canvasContainer.element.createChild("d
iv", "responsive-design-media-container"); | 29 this._mediaInspectorContainer = this._canvasContainer.element.createChild("d
iv", "responsive-design-media-container"); |
28 this._mediaInspector = new WebInspector.MediaQueryInspector(); | 30 this._mediaInspector = new WebInspector.MediaQueryInspector(); |
29 this._updateMediaQueryInspector(); | 31 this._updateMediaQueryInspector(); |
30 | 32 |
31 this._canvas = this._canvasContainer.element.createChild("canvas", "fill res
ponsive-design-canvas"); | |
32 | |
33 this._warningMessage = this._canvasContainer.element.createChild("div", "res
ponsive-design-warning hidden"); | 33 this._warningMessage = this._canvasContainer.element.createChild("div", "res
ponsive-design-warning hidden"); |
34 this._warningMessage.createChild("div", "warning-icon-small"); | 34 this._warningMessage.createChild("div", "warning-icon-small"); |
35 this._warningMessage.createChild("span"); | 35 this._warningMessage.createChild("span"); |
36 var warningDisableButton = this._warningMessage.createChild("div", "disable-
warning"); | 36 var warningDisableButton = this._warningMessage.createChild("div", "disable-
warning"); |
37 warningDisableButton.textContent = WebInspector.UIString("Never show"); | 37 warningDisableButton.textContent = WebInspector.UIString("Never show"); |
38 warningDisableButton.addEventListener("click", this._disableOverridesWarning
s.bind(this), false); | 38 warningDisableButton.addEventListener("click", this._disableOverridesWarning
s.bind(this), false); |
39 var warningCloseButton = this._warningMessage.createChild("div", "close-butt
on"); | 39 var warningCloseButton = this._warningMessage.createChild("div", "close-butt
on"); |
40 warningCloseButton.addEventListener("click", WebInspector.overridesSupport.c
learWarningMessage.bind(WebInspector.overridesSupport), false); | 40 warningCloseButton.addEventListener("click", WebInspector.overridesSupport.c
learWarningMessage.bind(WebInspector.overridesSupport), false); |
41 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport
.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this); | 41 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport
.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this); |
42 WebInspector.settings.disableOverridesWarning.addChangeListener(this._overri
desWarningUpdated, this); | 42 WebInspector.settings.disableOverridesWarning.addChangeListener(this._overri
desWarningUpdated, this); |
43 | 43 |
44 this._slidersContainer = this._canvasContainer.element.createChild("div", "v
box responsive-design-sliders-container"); | 44 this._slidersContainer = this._canvasContainer.element.createChild("div", "v
box responsive-design-sliders-container"); |
45 var genericDeviceOutline = this._slidersContainer.createChild("div", "respon
sive-design-generic-outline-container"); | 45 var genericDeviceOutline = this._slidersContainer.createChild("div", "respon
sive-design-generic-outline-container"); |
46 genericDeviceOutline.createChild("div", "responsive-design-generic-outline")
; | 46 genericDeviceOutline.createChild("div", "responsive-design-generic-outline")
; |
47 var widthSlider = this._slidersContainer.createChild("div", "responsive-desi
gn-slider-width"); | 47 var widthSlider = this._slidersContainer.createChild("div", "responsive-desi
gn-slider-width"); |
48 widthSlider.createChild("div", "responsive-design-thumb-handle"); | 48 widthSlider.createChild("div", "responsive-design-thumb-handle"); |
49 this._createResizer(widthSlider, false); | 49 this._createResizer(widthSlider, false); |
50 var heightSlider = this._slidersContainer.createChild("div", "responsive-des
ign-slider-height"); | 50 var heightSlider = this._slidersContainer.createChild("div", "responsive-des
ign-slider-height"); |
51 heightSlider.createChild("div", "responsive-design-thumb-handle"); | 51 heightSlider.createChild("div", "responsive-design-thumb-handle"); |
52 this._createResizer(heightSlider, true); | 52 this._createResizer(heightSlider, true); |
53 this._pageContainer = this._slidersContainer.createChild("div", "vbox flex-a
uto"); | 53 this._pageContainer = this._slidersContainer.createChild("div", "vbox flex-a
uto"); |
54 | 54 |
55 // Page scale controls. | 55 // Page scale controls. |
56 this._pageScaleContainer = this._canvasContainer.element.createChild("div",
"vbox responsive-design-page-scale-container"); | 56 this._pageScaleContainer = this._canvasContainer.element.createChild("div",
"hbox responsive-design-page-scale-container"); |
57 this._pageScaleContainer.style.width = WebInspector.ResponsiveDesignView.Pag
eScaleContainerWidth + "px"; | |
58 this._pageScaleContainer.style.height = WebInspector.ResponsiveDesignView.Pa
geScaleContainerHeight + "px"; | |
59 this._increasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto
r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal
e-increase"); | |
60 this._increasePageScaleButton.element.tabIndex = -1; | |
61 this._increasePageScaleButton.addEventListener("click", this._pageScaleButto
nClicked.bind(this, true), this); | |
62 this._pageScaleContainer.appendChild(this._increasePageScaleButton.element); | |
63 this._pageScaleLabel = this._pageScaleContainer.createChild("label", "respon
sive-design-page-scale-label"); | |
64 this._pageScaleLabel.title = WebInspector.UIString("For a simpler way to cha
nge the current page scale, hold down Shift and drag with your mouse."); | |
65 this._decreasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto
r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal
e-decrease"); | 57 this._decreasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto
r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal
e-decrease"); |
66 this._decreasePageScaleButton.element.tabIndex = -1; | 58 this._decreasePageScaleButton.element.tabIndex = -1; |
67 this._decreasePageScaleButton.addEventListener("click", this._pageScaleButto
nClicked.bind(this, false), this); | 59 this._decreasePageScaleButton.addEventListener("click", this._pageScaleButto
nClicked.bind(this, false), this); |
68 this._pageScaleContainer.appendChild(this._decreasePageScaleButton.element); | 60 this._pageScaleContainer.appendChild(this._decreasePageScaleButton.element); |
69 | 61 |
| 62 this._pageScaleLabel = this._pageScaleContainer.createChild("label", "respon
sive-design-page-scale-label"); |
| 63 this._pageScaleLabel.title = WebInspector.UIString("For a simpler way to cha
nge the current page scale, hold down Shift and drag with your mouse."); |
| 64 |
| 65 this._increasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto
r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal
e-increase"); |
| 66 this._increasePageScaleButton.element.tabIndex = -1; |
| 67 this._increasePageScaleButton.addEventListener("click", this._pageScaleButto
nClicked.bind(this, true), this); |
| 68 this._pageScaleContainer.appendChild(this._increasePageScaleButton.element); |
| 69 |
70 this._inspectedPagePlaceholder = inspectedPagePlaceholder; | 70 this._inspectedPagePlaceholder = inspectedPagePlaceholder; |
71 inspectedPagePlaceholder.show(this.element); | 71 inspectedPagePlaceholder.show(this.element); |
72 | 72 |
73 this._enabled = false; | 73 this._enabled = false; |
74 this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight:
0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 }; | 74 this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight:
0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 }; |
75 this._drawContentsSize = true; | 75 this._drawContentsSize = true; |
76 this._viewportChangedThrottler = new WebInspector.Throttler(0); | 76 this._viewportChangedThrottler = new WebInspector.Throttler(0); |
77 this._pageScaleFactorThrottler = new WebInspector.Throttler(50); | 77 this._pageScaleFactorThrottler = new WebInspector.Throttler(50); |
78 | 78 |
79 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._onZoomChanged, this); | 79 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._onZoomChanged, this); |
80 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport
.Events.EmulationStateChanged, this._emulationEnabledChanged, this); | 80 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport
.Events.EmulationStateChanged, this._emulationEnabledChanged, this); |
81 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event
s.CountUpdated, this._updateMediaQueryInspectorButton, this); | 81 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event
s.CountUpdated, this._updateMediaQueryInspectorButton, this); |
82 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event
s.HeightUpdated, this.onResize, this); | 82 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event
s.HeightUpdated, this.onResize, this); |
83 WebInspector.targetManager.observeTargets(this); | 83 WebInspector.targetManager.observeTargets(this); |
84 | 84 |
85 this._emulationEnabledChanged(); | 85 this._emulationEnabledChanged(); |
86 this._overridesWarningUpdated(); | 86 this._overridesWarningUpdated(); |
87 }; | 87 }; |
88 | 88 |
89 // Measured in DIP. | 89 // Measured in DIP. |
90 WebInspector.ResponsiveDesignView.RulerWidth = 34; | 90 WebInspector.ResponsiveDesignView.RulerWidth = 34; |
91 WebInspector.ResponsiveDesignView.RulerHeight = 22; | 91 WebInspector.ResponsiveDesignView.RulerHeight = 22; |
| 92 WebInspector.ResponsiveDesignView.RulerTopHeight = 11; |
92 WebInspector.ResponsiveDesignView.RulerBottomHeight = 9; | 93 WebInspector.ResponsiveDesignView.RulerBottomHeight = 9; |
93 WebInspector.ResponsiveDesignView.PageScaleContainerWidth = 40; | |
94 WebInspector.ResponsiveDesignView.PageScaleContainerHeight = 80; | |
95 | 94 |
96 WebInspector.ResponsiveDesignView.prototype = { | 95 WebInspector.ResponsiveDesignView.prototype = { |
97 | 96 |
98 /** | 97 /** |
99 * @param {!WebInspector.Target} target | 98 * @param {!WebInspector.Target} target |
100 */ | 99 */ |
101 targetAdded: function(target) | 100 targetAdded: function(target) |
102 { | 101 { |
103 // FIXME: adapt this to multiple targets. | 102 // FIXME: adapt this to multiple targets. |
104 if (this._target) | 103 if (this._target) |
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
177 }, | 176 }, |
178 | 177 |
179 /** | 178 /** |
180 * @return {!Size} | 179 * @return {!Size} |
181 */ | 180 */ |
182 _availableDipSize: function() | 181 _availableDipSize: function() |
183 { | 182 { |
184 if (typeof this._availableSize === "undefined") { | 183 if (typeof this._availableSize === "undefined") { |
185 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | 184 var zoomFactor = WebInspector.zoomManager.zoomFactor(); |
186 var rect = this._canvasContainer.element.getBoundingClientRect(); | 185 var rect = this._canvasContainer.element.getBoundingClientRect(); |
187 var mediaInspectorHeight = this._mediaInspector.element.offsetHeight
; | 186 var rulerTotalHeight = this._rulerTotalHeightDIP(); |
188 if (mediaInspectorHeight) | |
189 mediaInspectorHeight += WebInspector.ResponsiveDesignView.RulerB
ottomHeight; | |
190 this._availableSize = new Size(Math.max(rect.width * zoomFactor - We
bInspector.ResponsiveDesignView.RulerWidth, 1), | 187 this._availableSize = new Size(Math.max(rect.width * zoomFactor - We
bInspector.ResponsiveDesignView.RulerWidth, 1), |
191 Math.max(rect.height * zoomFactor - m
ediaInspectorHeight - WebInspector.ResponsiveDesignView.RulerHeight, 1)); | 188 Math.max(rect.height * zoomFactor - r
ulerTotalHeight, 1)); |
192 } | 189 } |
193 return this._availableSize; | 190 return this._availableSize; |
194 }, | 191 }, |
195 | 192 |
196 /** | 193 /** |
197 * @param {!Element} element | 194 * @param {!Element} element |
198 * @param {boolean} vertical | 195 * @param {boolean} vertical |
199 * @return {!WebInspector.ResizerWidget} | 196 * @return {!WebInspector.ResizerWidget} |
200 */ | 197 */ |
201 _createResizer: function(element, vertical) | 198 _createResizer: function(element, vertical) |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
251 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.
Events.FixedScaleRequested, false); | 248 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.
Events.FixedScaleRequested, false); |
252 delete this._resizeStartSize; | 249 delete this._resizeStartSize; |
253 this._updateUI(); | 250 this._updateUI(); |
254 }, | 251 }, |
255 | 252 |
256 /** | 253 /** |
257 * Draws canvas of the specified css size in DevTools page space. | 254 * Draws canvas of the specified css size in DevTools page space. |
258 * Canvas contains grid and rulers. | 255 * Canvas contains grid and rulers. |
259 * @param {number} cssCanvasWidth | 256 * @param {number} cssCanvasWidth |
260 * @param {number} cssCanvasHeight | 257 * @param {number} cssCanvasHeight |
261 * @param {number} mediaInspectorHeight | 258 * @param {number} rulerHeight |
262 */ | 259 */ |
263 _drawCanvas: function(cssCanvasWidth, cssCanvasHeight, mediaInspectorHeight) | 260 _drawCanvas: function(cssCanvasWidth, cssCanvasHeight, rulerHeight) |
264 { | 261 { |
265 if (!this._enabled) | 262 if (!this._enabled) |
266 return; | 263 return; |
267 | 264 |
268 var canvas = this._canvas; | 265 var canvas = this._canvas; |
269 var context = canvas.getContext("2d"); | 266 var context = canvas.getContext("2d"); |
270 canvas.style.width = cssCanvasWidth + "px"; | 267 canvas.style.width = cssCanvasWidth + "px"; |
271 canvas.style.height = cssCanvasHeight + "px"; | 268 canvas.style.height = cssCanvasHeight + "px"; |
272 | 269 |
273 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | 270 var zoomFactor = WebInspector.zoomManager.zoomFactor(); |
274 var dipCanvasWidth = cssCanvasWidth * zoomFactor; | 271 var dipCanvasWidth = cssCanvasWidth * zoomFactor; |
275 var dipCanvasHeight = cssCanvasHeight * zoomFactor; | 272 var dipCanvasHeight = cssCanvasHeight * zoomFactor; |
276 var dipMediaInspectorHeight = mediaInspectorHeight * zoomFactor; | |
277 | 273 |
278 var deviceScaleFactor = window.devicePixelRatio; | 274 var deviceScaleFactor = window.devicePixelRatio; |
279 canvas.width = deviceScaleFactor * cssCanvasWidth; | 275 canvas.width = deviceScaleFactor * cssCanvasWidth; |
280 canvas.height = deviceScaleFactor * cssCanvasHeight; | 276 canvas.height = deviceScaleFactor * cssCanvasHeight; |
281 context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHe
ight); | 277 context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHe
ight); |
282 context.font = "11px " + WebInspector.fontFamily(); | 278 context.font = "11px " + WebInspector.fontFamily(); |
283 | 279 |
284 const backgroundColor = "rgb(102, 102, 102)"; | 280 const backgroundColor = "rgb(102, 102, 102)"; |
285 const lightLineColor = "rgb(132, 132, 132)"; | 281 const lightLineColor = "rgb(132, 132, 132)"; |
286 const darkLineColor = "rgb(114, 114, 114)"; | 282 const darkLineColor = "rgb(114, 114, 114)"; |
287 const rulerColor = "rgb(125, 125, 125)"; | 283 const rulerColor = "rgb(125, 125, 125)"; |
288 const rulerOverlayColor = "rgba(255, 255, 255, 0.2)"; | |
289 const textColor = "rgb(186, 186, 186)"; | 284 const textColor = "rgb(186, 186, 186)"; |
290 const contentsSizeColor = "rgba(0, 0, 0, 0.3)"; | 285 const contentsSizeColor = "rgba(0, 0, 0, 0.3)"; |
291 | 286 |
292 var scale = (this._scale || 1) * this._viewport.pageScaleFactor; | 287 var scale = (this._scale || 1) * this._viewport.pageScaleFactor; |
293 var rulerScale = 0.5; | 288 var rulerScale = 0.5; |
294 while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) *
scale - 1)) | 289 while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) *
scale - 1)) |
295 rulerScale += 0.5; | 290 rulerScale += 0.5; |
296 | 291 |
297 var gridStep = 50 * scale * rulerScale; | 292 var gridStep = 50 * scale * rulerScale; |
298 var gridSubStep = 10 * scale * rulerScale; | 293 var gridSubStep = 10 * scale * rulerScale; |
299 | 294 |
300 var rulerSubStep = 5 * scale * rulerScale; | 295 var rulerSubStep = 5 * scale * rulerScale; |
301 var rulerStepCount = 20; | 296 var rulerStepCount = 20; |
302 | 297 |
303 var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth; | 298 var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth; |
304 var rulerHeight = WebInspector.ResponsiveDesignView.RulerHeight; | 299 |
305 if (dipMediaInspectorHeight) | |
306 rulerHeight += WebInspector.ResponsiveDesignView.RulerBottomHeight +
dipMediaInspectorHeight; | |
307 var dipGridWidth = dipCanvasWidth - rulerWidth; | 300 var dipGridWidth = dipCanvasWidth - rulerWidth; |
308 var dipGridHeight = dipCanvasHeight - rulerHeight; | 301 var dipGridHeight = dipCanvasHeight - rulerHeight; |
309 var dipScrollX = this._viewport.scrollX * scale; | 302 var dipScrollX = this._viewport.scrollX * scale; |
310 var dipScrollY = this._viewport.scrollY * scale; | 303 var dipScrollY = this._viewport.scrollY * scale; |
311 context.translate(rulerWidth, rulerHeight); | 304 context.translate(rulerWidth, rulerHeight); |
312 | 305 |
313 context.fillStyle = backgroundColor; | 306 context.fillStyle = backgroundColor; |
314 context.fillRect(0, 0, dipGridWidth, dipGridHeight); | 307 context.fillRect(0, 0, dipGridWidth, dipGridHeight); |
315 | 308 |
316 context.translate(0.5, 0.5); | 309 context.translate(0.5, 0.5); |
317 context.strokeStyle = rulerColor; | 310 context.strokeStyle = rulerColor; |
318 context.fillStyle = textColor; | 311 context.fillStyle = textColor; |
319 context.lineWidth = 1; | 312 context.lineWidth = 1; |
320 | 313 |
321 // Draw horizontal ruler. | 314 // Draw horizontal ruler. |
322 context.save(); | 315 context.save(); |
323 context.beginPath(); | |
324 context.moveTo(0, -rulerHeight + WebInspector.ResponsiveDesignView.Ruler
Height); | |
325 context.lineTo(dipGridWidth, -rulerHeight + WebInspector.ResponsiveDesig
nView.RulerHeight); | |
326 context.stroke(); | |
327 | 316 |
328 var minXIndex = Math.ceil(dipScrollX / rulerSubStep); | 317 var minXIndex = Math.ceil(dipScrollX / rulerSubStep); |
329 var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep); | 318 var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep); |
330 if (minXIndex) { | 319 if (minXIndex) { |
331 context.beginPath(); | 320 context.beginPath(); |
332 context.moveTo(0, -rulerHeight); | 321 context.moveTo(0, -rulerHeight); |
333 context.lineTo(0, 0); | 322 context.lineTo(0, 0); |
334 context.stroke(); | 323 context.stroke(); |
335 } | 324 } |
336 | 325 |
337 context.translate(-dipScrollX, 0); | 326 context.translate(-dipScrollX, 0); |
338 for (var index = minXIndex; index <= maxXIndex; index++) { | 327 for (var index = minXIndex; index <= maxXIndex; index++) { |
339 var x = index * rulerSubStep; | 328 var x = index * rulerSubStep; |
340 var y = -WebInspector.ResponsiveDesignView.RulerHeight * 0.25; | 329 var height = WebInspector.ResponsiveDesignView.RulerHeight * 0.25; |
341 var copyHeight = WebInspector.ResponsiveDesignView.RulerHeight * 0.2
5; | |
342 | 330 |
343 if (!(index % (rulerStepCount / 4))) | 331 if (!(index % (rulerStepCount / 4))) |
344 copyHeight = WebInspector.ResponsiveDesignView.RulerHeight * 0.5
; | 332 height = WebInspector.ResponsiveDesignView.RulerHeight * 0.5; |
345 if (!(index % (rulerStepCount / 2))) { | 333 |
346 context.strokeStyle = rulerOverlayColor; | 334 if (!(index % (rulerStepCount / 2))) |
347 y = -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight
* 0.25; | 335 height = rulerHeight; |
348 copyHeight = 0; | 336 |
349 } | |
350 if (!(index % rulerStepCount)) { | 337 if (!(index % rulerStepCount)) { |
351 context.save(); | 338 context.save(); |
352 context.translate(x, 0); | 339 context.translate(x, 0); |
353 context.fillText(Math.round(x / scale), 2, -rulerHeight + 10); | 340 context.fillText(Math.round(x / scale), 2, -rulerHeight + 10); |
354 context.restore(); | 341 context.restore(); |
355 y = -rulerHeight; | 342 height = rulerHeight; |
356 } | 343 } |
357 | 344 |
358 context.beginPath(); | 345 context.beginPath(); |
359 context.moveTo(x, y); | 346 context.moveTo(x, - height); |
360 context.lineTo(x, 0); | 347 context.lineTo(x, 0); |
361 context.stroke(); | 348 context.stroke(); |
362 if (copyHeight) { | |
363 context.beginPath(); | |
364 context.moveTo(x, -rulerHeight + WebInspector.ResponsiveDesignVi
ew.RulerHeight - copyHeight); | |
365 context.lineTo(x, -rulerHeight + WebInspector.ResponsiveDesignVi
ew.RulerHeight); | |
366 context.stroke(); | |
367 } | |
368 | |
369 if (!(index % (rulerStepCount / 2))) | |
370 context.strokeStyle = rulerColor; | |
371 } | 349 } |
372 context.restore(); | 350 context.restore(); |
373 | 351 |
374 // Draw vertical ruler. | 352 // Draw vertical ruler. |
375 context.save(); | 353 context.save(); |
376 var minYIndex = Math.ceil(dipScrollY / rulerSubStep); | 354 var minYIndex = Math.ceil(dipScrollY / rulerSubStep); |
377 var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep); | 355 var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep); |
378 context.translate(0, -dipScrollY); | 356 context.translate(0, -dipScrollY); |
379 for (var index = minYIndex; index <= maxYIndex; index++) { | 357 for (var index = minYIndex; index <= maxYIndex; index++) { |
380 var y = index * rulerSubStep; | 358 var y = index * rulerSubStep; |
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
444 // Draw contents size. | 422 // Draw contents size. |
445 var pageScaleAvailable = WebInspector.overridesSupport.settings.emulateM
obile.get() || WebInspector.overridesSupport.settings.emulateTouch.get(); | 423 var pageScaleAvailable = WebInspector.overridesSupport.settings.emulateM
obile.get() || WebInspector.overridesSupport.settings.emulateTouch.get(); |
446 if (this._drawContentsSize && pageScaleAvailable) { | 424 if (this._drawContentsSize && pageScaleAvailable) { |
447 context.fillStyle = contentsSizeColor; | 425 context.fillStyle = contentsSizeColor; |
448 var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._
viewport.contentsWidth * scale - dipScrollX)); | 426 var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._
viewport.contentsWidth * scale - dipScrollX)); |
449 var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this
._viewport.contentsHeight * scale - dipScrollY)); | 427 var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this
._viewport.contentsHeight * scale - dipScrollY)); |
450 context.fillRect(0, 0, visibleContentsWidth, visibleContentsHeight); | 428 context.fillRect(0, 0, visibleContentsWidth, visibleContentsHeight); |
451 } | 429 } |
452 }, | 430 }, |
453 | 431 |
| 432 /** |
| 433 * @return {number} |
| 434 */ |
| 435 _rulerTotalHeightDIP: function() |
| 436 { |
| 437 var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._medi
aInspector.element.offsetHeight : 0; |
| 438 if (!mediaInspectorHeight) |
| 439 return WebInspector.ResponsiveDesignView.RulerHeight; |
| 440 return WebInspector.ResponsiveDesignView.RulerTopHeight + WebInspector.R
esponsiveDesignView.RulerBottomHeight + mediaInspectorHeight * WebInspector.zoom
Manager.zoomFactor(); |
| 441 }, |
| 442 |
454 _updateUI: function() | 443 _updateUI: function() |
455 { | 444 { |
456 if (!this._enabled || !this.isShowing()) | 445 if (!this._enabled || !this.isShowing()) |
457 return; | 446 return; |
458 | 447 |
459 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | 448 var zoomFactor = WebInspector.zoomManager.zoomFactor(); |
460 var rect = this._canvas.parentElement.getBoundingClientRect(); | 449 var rect = this._canvas.parentElement.getBoundingClientRect(); |
461 var availableDip = this._availableDipSize(); | 450 var availableDip = this._availableDipSize(); |
462 var cssCanvasWidth = rect.width; | 451 var cssCanvasWidth = rect.width; |
463 var cssCanvasHeight = rect.height; | 452 var cssCanvasHeight = rect.height; |
464 var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._medi
aInspector.element.offsetHeight : 0; | 453 var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._medi
aInspector.element.offsetHeight : 0; |
465 var rulerTotalHeight = WebInspector.ResponsiveDesignView.RulerHeight + (
mediaInspectorHeight ? WebInspector.ResponsiveDesignView.RulerBottomHeight : 0); | 454 var rulerTotalHeight = this._rulerTotalHeightDIP(); |
466 | 455 |
467 this._mediaInspector.setAxisTransform(this._viewport.scrollX, this._scal
e * this._viewport.pageScaleFactor); | 456 this._mediaInspector.setAxisTransform(this._viewport.scrollX, this._scal
e * this._viewport.pageScaleFactor); |
468 | 457 |
469 if (this._cachedZoomFactor !== zoomFactor || this._cachedMediaInspectorH
eight !== mediaInspectorHeight) { | 458 if (this._cachedZoomFactor !== zoomFactor || this._cachedMediaInspectorH
eight !== mediaInspectorHeight) { |
470 var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / z
oomFactor + "px"; | 459 var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / z
oomFactor + "px"; |
471 var cssRulerHeight = WebInspector.ResponsiveDesignView.RulerHeight /
zoomFactor + "px"; | 460 var cssRulerHeight = (mediaInspectorHeight ? WebInspector.Responsive
DesignView.RulerTopHeight : WebInspector.ResponsiveDesignView.RulerHeight) / zoo
mFactor + "px"; |
472 var cssCanvasOffset = rulerTotalHeight / zoomFactor + mediaInspector
Height + "px"; | 461 var cssCanvasOffset = rulerTotalHeight / zoomFactor + "px"; |
473 this._slidersContainer.style.left = cssRulerWidth; | 462 this._slidersContainer.style.left = cssRulerWidth; |
474 this._slidersContainer.style.top = cssCanvasOffset; | 463 this._slidersContainer.style.top = cssCanvasOffset; |
475 this._warningMessage.style.height = cssRulerHeight; | 464 this._warningMessage.style.height = cssCanvasOffset; |
| 465 this._pageScaleContainer.style.top = cssCanvasOffset; |
476 this._mediaInspectorContainer.style.left = cssRulerWidth; | 466 this._mediaInspectorContainer.style.left = cssRulerWidth; |
477 this._mediaInspectorContainer.style.marginTop = cssRulerHeight; | 467 this._mediaInspectorContainer.style.marginTop = cssRulerHeight; |
478 } | 468 } |
479 | 469 |
480 var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) /
zoomFactor; | 470 var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) /
zoomFactor; |
481 var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height
) / zoomFactor; | 471 var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height
) / zoomFactor; |
482 if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHe
ight) { | 472 if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHe
ight) { |
483 this._slidersContainer.style.width = cssWidth + "px"; | 473 this._slidersContainer.style.width = cssWidth + "px"; |
484 this._slidersContainer.style.height = cssHeight + "px"; | 474 this._slidersContainer.style.height = cssHeight + "px"; |
485 this._inspectedPagePlaceholder.onResize(); | 475 this._inspectedPagePlaceholder.onResize(); |
486 } | 476 } |
487 | 477 |
488 var pageScaleVisible = cssWidth + WebInspector.ResponsiveDesignView.Page
ScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor
<= rect.width || | 478 var pageScaleVisible = cssWidth + this._pageScaleContainerWidth + WebIns
pector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width; |
489 cssHeight + WebInspector.ResponsiveDesignView.PageScaleContainerHeig
ht + mediaInspectorHeight + rulerTotalHeight / zoomFactor <= rect.height; | |
490 this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible); | 479 this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible); |
491 | 480 |
492 var viewportChanged = !this._cachedViewport | 481 var viewportChanged = !this._cachedViewport |
493 || this._cachedViewport.scrollX !== this._viewport.scrollX || this._
cachedViewport.scrollY !== this._viewport.scrollY | 482 || this._cachedViewport.scrollX !== this._viewport.scrollX || this._
cachedViewport.scrollY !== this._viewport.scrollY |
494 || this._cachedViewport.contentsWidth !== this._viewport.contentsWid
th || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight | 483 || this._cachedViewport.contentsWidth !== this._viewport.contentsWid
th || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight |
495 || this._cachedViewport.pageScaleFactor !== this._viewport.pageScale
Factor | 484 || this._cachedViewport.pageScaleFactor !== this._viewport.pageScale
Factor |
496 || this._cachedViewport.minimumPageScaleFactor !== this._viewport.mi
nimumPageScaleFactor | 485 || this._cachedViewport.minimumPageScaleFactor !== this._viewport.mi
nimumPageScaleFactor |
497 || this._cachedViewport.maximumPageScaleFactor !== this._viewport.ma
ximumPageScaleFactor; | 486 || this._cachedViewport.maximumPageScaleFactor !== this._viewport.ma
ximumPageScaleFactor; |
498 | 487 |
499 var canvasInvalidated = viewportChanged || this._drawContentsSize !== th
is._cachedDrawContentsSize || this._cachedScale !== this._scale || | 488 var canvasInvalidated = viewportChanged || this._drawContentsSize !== th
is._cachedDrawContentsSize || this._cachedScale !== this._scale || |
500 this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanv
asHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor || | 489 this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanv
asHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor || |
501 this._cachedMediaInspectorHeight !== mediaInspectorHeight; | 490 this._cachedMediaInspectorHeight !== mediaInspectorHeight; |
502 | 491 |
503 if (canvasInvalidated) | 492 if (canvasInvalidated) |
504 this._drawCanvas(cssCanvasWidth, cssCanvasHeight, mediaInspectorHeig
ht); | 493 this._drawCanvas(cssCanvasWidth, cssCanvasHeight, rulerTotalHeight); |
505 | 494 |
506 if (viewportChanged) { | 495 if (viewportChanged) { |
507 this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", thi
s._viewport.pageScaleFactor); | 496 this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", thi
s._viewport.pageScaleFactor); |
508 this._decreasePageScaleButton.title = WebInspector.UIString("Scale d
own (minimum %.1f)", this._viewport.minimumPageScaleFactor); | 497 this._decreasePageScaleButton.title = WebInspector.UIString("Scale d
own (minimum %.1f)", this._viewport.minimumPageScaleFactor); |
509 this._decreasePageScaleButton.setEnabled(this._viewport.pageScaleFac
tor > this._viewport.minimumPageScaleFactor); | 498 this._decreasePageScaleButton.setEnabled(this._viewport.pageScaleFac
tor > this._viewport.minimumPageScaleFactor); |
510 this._increasePageScaleButton.title = WebInspector.UIString("Scale u
p (maximum %.1f)", this._viewport.maximumPageScaleFactor); | 499 this._increasePageScaleButton.title = WebInspector.UIString("Scale u
p (maximum %.1f)", this._viewport.maximumPageScaleFactor); |
511 this._increasePageScaleButton.setEnabled(this._viewport.pageScaleFac
tor < this._viewport.maximumPageScaleFactor); | 500 this._increasePageScaleButton.setEnabled(this._viewport.pageScaleFac
tor < this._viewport.maximumPageScaleFactor); |
512 } | 501 } |
513 | 502 |
514 this._cachedScale = this._scale; | 503 this._cachedScale = this._scale; |
515 this._cachedCssCanvasWidth = cssCanvasWidth; | 504 this._cachedCssCanvasWidth = cssCanvasWidth; |
516 this._cachedCssCanvasHeight = cssCanvasHeight; | 505 this._cachedCssCanvasHeight = cssCanvasHeight; |
517 this._cachedCssHeight = cssHeight; | 506 this._cachedCssHeight = cssHeight; |
518 this._cachedCssWidth = cssWidth; | 507 this._cachedCssWidth = cssWidth; |
519 this._cachedZoomFactor = zoomFactor; | 508 this._cachedZoomFactor = zoomFactor; |
520 this._cachedViewport = this._viewport; | 509 this._cachedViewport = this._viewport; |
521 this._cachedDrawContentsSize = this._drawContentsSize; | 510 this._cachedDrawContentsSize = this._drawContentsSize; |
522 this._cachedMediaInspectorHeight = mediaInspectorHeight; | 511 this._cachedMediaInspectorHeight = mediaInspectorHeight; |
523 }, | 512 }, |
524 | 513 |
525 onResize: function() | 514 onResize: function() |
526 { | 515 { |
527 if (!this._enabled || this._ignoreResize) | 516 if (!this._enabled || this._ignoreResize) |
528 return; | 517 return; |
529 var oldSize = this._availableSize; | 518 var oldSize = this._availableSize; |
| 519 |
| 520 this._pageScaleContainer.classList.remove("hidden"); |
| 521 this._pageScaleContainerWidth = this._pageScaleContainer.offsetWidth; |
| 522 |
530 delete this._availableSize; | 523 delete this._availableSize; |
531 var newSize = this._availableDipSize(); | 524 var newSize = this._availableDipSize(); |
532 if (!newSize.isEqual(oldSize)) | 525 if (!newSize.isEqual(oldSize)) |
533 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResi
zer.Events.AvailableSizeChanged, newSize); | 526 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResi
zer.Events.AvailableSizeChanged, newSize); |
534 this._updateUI(); | 527 this._updateUI(); |
535 this._inspectedPagePlaceholder.onResize(); | 528 this._inspectedPagePlaceholder.onResize(); |
536 }, | 529 }, |
537 | 530 |
538 _onZoomChanged: function() | 531 _onZoomChanged: function() |
539 { | 532 { |
(...skipping 204 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
744 value = Math.min(this._viewport.maximumPageScaleFactor, value); | 737 value = Math.min(this._viewport.maximumPageScaleFactor, value); |
745 value = Math.max(this._viewport.minimumPageScaleFactor, value) | 738 value = Math.max(this._viewport.minimumPageScaleFactor, value) |
746 this._target.pageAgent().setPageScaleFactor(value); | 739 this._target.pageAgent().setPageScaleFactor(value); |
747 } | 740 } |
748 finishCallback(); | 741 finishCallback(); |
749 } | 742 } |
750 }, | 743 }, |
751 | 744 |
752 __proto__: WebInspector.VBox.prototype | 745 __proto__: WebInspector.VBox.prototype |
753 }; | 746 }; |
OLD | NEW |