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 |
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
48 this._widthSliderContainer = hbox.createChild("div", "vbox responsive-design -slider-width"); | 48 this._widthSliderContainer = hbox.createChild("div", "vbox responsive-design -slider-width"); |
49 | 49 |
50 this._widthSlider = this._widthSliderContainer.createChild("div", "responsiv e-design-slider-thumb"); | 50 this._widthSlider = this._widthSliderContainer.createChild("div", "responsiv e-design-slider-thumb"); |
51 this._widthSlider.createChild("div", "responsive-design-thumb-handle"); | 51 this._widthSlider.createChild("div", "responsive-design-thumb-handle"); |
52 this._createResizer(this._widthSlider, false); | 52 this._createResizer(this._widthSlider, false); |
53 this._heightSlider = this._heightSliderContainer.createChild("div", "respons ive-design-slider-thumb"); | 53 this._heightSlider = this._heightSliderContainer.createChild("div", "respons ive-design-slider-thumb"); |
54 this._heightSlider.createChild("div", "responsive-design-thumb-handle"); | 54 this._heightSlider.createChild("div", "responsive-design-thumb-handle"); |
55 this._createResizer(this._heightSlider, true); | 55 this._createResizer(this._heightSlider, true); |
56 | 56 |
57 // Page scale controls. | 57 // Page scale controls. |
58 this._pageScaleContainer = this._canvasContainer.element.createChild("div", "vbox responsive-design-page-scale-container"); | 58 this._pageScaleContainer = this._canvasContainer.element.createChild("div", "hbox responsive-design-page-scale-container"); |
59 this._pageScaleContainer.style.width = WebInspector.ResponsiveDesignView.Pag eScaleContainerWidth + "px"; | |
60 this._pageScaleContainer.style.height = WebInspector.ResponsiveDesignView.Pa geScaleContainerHeight + "px"; | |
61 this._increasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal e-increase"); | |
62 this._increasePageScaleButton.element.tabIndex = -1; | |
63 this._increasePageScaleButton.addEventListener("click", this._pageScaleButto nClicked.bind(this, true), this); | |
64 this._pageScaleContainer.appendChild(this._increasePageScaleButton.element); | |
65 this._pageScaleLabel = this._pageScaleContainer.createChild("label", "respon sive-design-page-scale-label"); | |
66 this._pageScaleLabel.title = WebInspector.UIString("For a simpler way to cha nge the current page scale, hold down Shift and drag with your mouse."); | |
67 this._decreasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal e-decrease"); | 59 this._decreasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal e-decrease"); |
68 this._decreasePageScaleButton.element.tabIndex = -1; | 60 this._decreasePageScaleButton.element.tabIndex = -1; |
69 this._decreasePageScaleButton.addEventListener("click", this._pageScaleButto nClicked.bind(this, false), this); | 61 this._decreasePageScaleButton.addEventListener("click", this._pageScaleButto nClicked.bind(this, false), this); |
70 this._pageScaleContainer.appendChild(this._decreasePageScaleButton.element); | 62 this._pageScaleContainer.appendChild(this._decreasePageScaleButton.element); |
71 | 63 |
64 this._pageScaleLabel = this._pageScaleContainer.createChild("label", "respon sive-design-page-scale-label"); | |
65 this._pageScaleLabel.title = WebInspector.UIString("For a simpler way to cha nge the current page scale, hold down Shift and drag with your mouse."); | |
66 | |
67 this._increasePageScaleButton = new WebInspector.StatusBarButton(WebInspecto r.UIString(""), "responsive-design-page-scale-button responsive-design-page-scal e-increase"); | |
68 this._increasePageScaleButton.element.tabIndex = -1; | |
69 this._increasePageScaleButton.addEventListener("click", this._pageScaleButto nClicked.bind(this, true), this); | |
70 this._pageScaleContainer.appendChild(this._increasePageScaleButton.element); | |
71 | |
72 this._inspectedPagePlaceholder = inspectedPagePlaceholder; | 72 this._inspectedPagePlaceholder = inspectedPagePlaceholder; |
73 inspectedPagePlaceholder.show(this.element); | 73 inspectedPagePlaceholder.show(this.element); |
74 | 74 |
75 this._enabled = false; | 75 this._enabled = false; |
76 this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight: 0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 }; | 76 this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight: 0, pageScaleFactor: 1, minimumPageScaleFactor: 1, maximumPageScaleFactor: 1 }; |
77 this._drawContentsSize = true; | 77 this._drawContentsSize = true; |
78 this._viewportChangedThrottler = new WebInspector.Throttler(0); | 78 this._viewportChangedThrottler = new WebInspector.Throttler(0); |
79 this._pageScaleFactorThrottler = new WebInspector.Throttler(50); | 79 this._pageScaleFactorThrottler = new WebInspector.Throttler(50); |
80 | 80 |
81 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo omChanged, this._onZoomChanged, this); | 81 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo omChanged, this._onZoomChanged, this); |
82 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport .Events.EmulationStateChanged, this._emulationEnabledChanged, this); | 82 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport .Events.EmulationStateChanged, this._emulationEnabledChanged, this); |
83 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event s.CountUpdated, this._updateMediaQueryInspectorButton, this); | 83 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event s.CountUpdated, this._updateMediaQueryInspectorButton, this); |
84 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event s.HeightUpdated, this.onResize, this); | 84 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event s.HeightUpdated, this.onResize, this); |
85 WebInspector.targetManager.observeTargets(this); | 85 WebInspector.targetManager.observeTargets(this); |
86 | 86 |
87 this._emulationEnabledChanged(); | 87 this._emulationEnabledChanged(); |
88 this._overridesWarningUpdated(); | 88 this._overridesWarningUpdated(); |
89 }; | 89 }; |
90 | 90 |
91 // Measured in DIP. | 91 // Measured in DIP. |
92 WebInspector.ResponsiveDesignView.SliderWidth = 19; | 92 WebInspector.ResponsiveDesignView.SliderWidth = 19; |
93 WebInspector.ResponsiveDesignView.RulerWidth = 34; | 93 WebInspector.ResponsiveDesignView.RulerWidth = 34; |
94 WebInspector.ResponsiveDesignView.RulerHeight = 22; | 94 WebInspector.ResponsiveDesignView.RulerHeight = 22; |
95 WebInspector.ResponsiveDesignView.RulerTopHeight = 11; | |
95 WebInspector.ResponsiveDesignView.RulerBottomHeight = 9; | 96 WebInspector.ResponsiveDesignView.RulerBottomHeight = 9; |
96 WebInspector.ResponsiveDesignView.PageScaleContainerWidth = 40; | |
97 WebInspector.ResponsiveDesignView.PageScaleContainerHeight = 80; | |
98 | 97 |
99 WebInspector.ResponsiveDesignView.prototype = { | 98 WebInspector.ResponsiveDesignView.prototype = { |
100 | 99 |
101 /** | 100 /** |
102 * @param {!WebInspector.Target} target | 101 * @param {!WebInspector.Target} target |
103 */ | 102 */ |
104 targetAdded: function(target) | 103 targetAdded: function(target) |
105 { | 104 { |
106 // FIXME: adapt this to multiple targets. | 105 // FIXME: adapt this to multiple targets. |
107 if (this._target) | 106 if (this._target) |
(...skipping 72 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
180 }, | 179 }, |
181 | 180 |
182 /** | 181 /** |
183 * @return {!Size} | 182 * @return {!Size} |
184 */ | 183 */ |
185 _availableDipSize: function() | 184 _availableDipSize: function() |
186 { | 185 { |
187 if (typeof this._availableSize === "undefined") { | 186 if (typeof this._availableSize === "undefined") { |
188 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | 187 var zoomFactor = WebInspector.zoomManager.zoomFactor(); |
189 var rect = this._canvasContainer.element.getBoundingClientRect(); | 188 var rect = this._canvasContainer.element.getBoundingClientRect(); |
190 var mediaInspectorHeight = this._mediaInspector.element.offsetHeight ; | 189 var rulerTotalHeight = this._rulerTotalHeightDIP(); |
191 if (mediaInspectorHeight) | |
192 mediaInspectorHeight += WebInspector.ResponsiveDesignView.RulerB ottomHeight; | |
193 this._availableSize = new Size(Math.max(rect.width * zoomFactor - We bInspector.ResponsiveDesignView.RulerWidth, 1), | 190 this._availableSize = new Size(Math.max(rect.width * zoomFactor - We bInspector.ResponsiveDesignView.RulerWidth, 1), |
194 Math.max(rect.height * zoomFactor - m ediaInspectorHeight - WebInspector.ResponsiveDesignView.RulerHeight, 1)); | 191 Math.max(rect.height * zoomFactor - r ulerTotalHeight, 1)); |
195 } | 192 } |
196 return this._availableSize; | 193 return this._availableSize; |
197 }, | 194 }, |
198 | 195 |
199 /** | 196 /** |
200 * @param {!Element} element | 197 * @param {!Element} element |
201 * @param {boolean} vertical | 198 * @param {boolean} vertical |
202 * @return {!WebInspector.ResizerWidget} | 199 * @return {!WebInspector.ResizerWidget} |
203 */ | 200 */ |
204 _createResizer: function(element, vertical) | 201 _createResizer: function(element, vertical) |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
254 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer. Events.FixedScaleRequested, false); | 251 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer. Events.FixedScaleRequested, false); |
255 delete this._resizeStartSize; | 252 delete this._resizeStartSize; |
256 this._updateUI(); | 253 this._updateUI(); |
257 }, | 254 }, |
258 | 255 |
259 /** | 256 /** |
260 * Draws canvas of the specified css size in DevTools page space. | 257 * Draws canvas of the specified css size in DevTools page space. |
261 * Canvas contains grid and rulers. | 258 * Canvas contains grid and rulers. |
262 * @param {number} cssCanvasWidth | 259 * @param {number} cssCanvasWidth |
263 * @param {number} cssCanvasHeight | 260 * @param {number} cssCanvasHeight |
264 * @param {number} mediaInspectorHeight | |
265 */ | 261 */ |
266 _drawCanvas: function(cssCanvasWidth, cssCanvasHeight, mediaInspectorHeight) | 262 _drawCanvas: function(cssCanvasWidth, cssCanvasHeight) |
267 { | 263 { |
268 if (!this._enabled) | 264 if (!this._enabled) |
269 return; | 265 return; |
270 | 266 |
271 var canvas = this._canvas; | 267 var canvas = this._canvas; |
272 var context = canvas.getContext("2d"); | 268 var context = canvas.getContext("2d"); |
273 canvas.style.width = cssCanvasWidth + "px"; | 269 canvas.style.width = cssCanvasWidth + "px"; |
274 canvas.style.height = cssCanvasHeight + "px"; | 270 canvas.style.height = cssCanvasHeight + "px"; |
275 | 271 |
276 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | 272 var zoomFactor = WebInspector.zoomManager.zoomFactor(); |
277 var dipCanvasWidth = cssCanvasWidth * zoomFactor; | 273 var dipCanvasWidth = cssCanvasWidth * zoomFactor; |
278 var dipCanvasHeight = cssCanvasHeight * zoomFactor; | 274 var dipCanvasHeight = cssCanvasHeight * zoomFactor; |
279 var dipMediaInspectorHeight = mediaInspectorHeight * zoomFactor; | |
280 | 275 |
281 var deviceScaleFactor = window.devicePixelRatio; | 276 var deviceScaleFactor = window.devicePixelRatio; |
282 canvas.width = deviceScaleFactor * cssCanvasWidth; | 277 canvas.width = deviceScaleFactor * cssCanvasWidth; |
283 canvas.height = deviceScaleFactor * cssCanvasHeight; | 278 canvas.height = deviceScaleFactor * cssCanvasHeight; |
284 context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHe ight); | 279 context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHe ight); |
285 context.font = "11px " + WebInspector.fontFamily(); | 280 context.font = "11px " + WebInspector.fontFamily(); |
286 | 281 |
287 const backgroundColor = "rgb(102, 102, 102)"; | 282 const backgroundColor = "rgb(102, 102, 102)"; |
288 const lightLineColor = "rgb(132, 132, 132)"; | 283 const lightLineColor = "rgb(132, 132, 132)"; |
289 const darkLineColor = "rgb(114, 114, 114)"; | 284 const darkLineColor = "rgb(114, 114, 114)"; |
290 const rulerColor = "rgb(125, 125, 125)"; | 285 const rulerColor = "rgb(125, 125, 125)"; |
291 const rulerOverlayColor = "rgba(255, 255, 255, 0.2)"; | |
292 const textColor = "rgb(186, 186, 186)"; | 286 const textColor = "rgb(186, 186, 186)"; |
293 const contentsSizeColor = "rgba(0, 0, 0, 0.3)"; | 287 const contentsSizeColor = "rgba(0, 0, 0, 0.3)"; |
294 | 288 |
295 var scale = (this._scale || 1) * this._viewport.pageScaleFactor; | 289 var scale = (this._scale || 1) * this._viewport.pageScaleFactor; |
296 var rulerScale = 0.5; | 290 var rulerScale = 0.5; |
297 while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) * scale - 1)) | 291 while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) * scale - 1)) |
298 rulerScale += 0.5; | 292 rulerScale += 0.5; |
299 | 293 |
300 var gridStep = 50 * scale * rulerScale; | 294 var gridStep = 50 * scale * rulerScale; |
301 var gridSubStep = 10 * scale * rulerScale; | 295 var gridSubStep = 10 * scale * rulerScale; |
302 | 296 |
303 var rulerSubStep = 5 * scale * rulerScale; | 297 var rulerSubStep = 5 * scale * rulerScale; |
304 var rulerStepCount = 20; | 298 var rulerStepCount = 20; |
305 | 299 |
306 var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth; | 300 var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth; |
307 var rulerHeight = WebInspector.ResponsiveDesignView.RulerHeight; | 301 var rulerHeight = this._rulerTotalHeightDIP(); |
dgozman
2014/09/19 08:41:25
This introduces an extra layout. You should calcul
pfeldman
2014/09/19 09:21:47
Done.
| |
308 if (dipMediaInspectorHeight) | 302 |
309 rulerHeight += WebInspector.ResponsiveDesignView.RulerBottomHeight + dipMediaInspectorHeight; | |
310 var dipGridWidth = dipCanvasWidth - rulerWidth; | 303 var dipGridWidth = dipCanvasWidth - rulerWidth; |
311 var dipGridHeight = dipCanvasHeight - rulerHeight; | 304 var dipGridHeight = dipCanvasHeight - rulerHeight; |
312 var dipScrollX = this._viewport.scrollX * scale; | 305 var dipScrollX = this._viewport.scrollX * scale; |
313 var dipScrollY = this._viewport.scrollY * scale; | 306 var dipScrollY = this._viewport.scrollY * scale; |
314 context.translate(rulerWidth, rulerHeight); | 307 context.translate(rulerWidth, rulerHeight); |
315 | 308 |
316 context.fillStyle = backgroundColor; | 309 context.fillStyle = backgroundColor; |
317 context.fillRect(0, 0, dipGridWidth, dipGridHeight); | 310 context.fillRect(0, 0, dipGridWidth, dipGridHeight); |
318 | 311 |
319 context.translate(0.5, 0.5); | 312 context.translate(0.5, 0.5); |
320 context.strokeStyle = rulerColor; | 313 context.strokeStyle = rulerColor; |
321 context.fillStyle = textColor; | 314 context.fillStyle = textColor; |
322 context.lineWidth = 1; | 315 context.lineWidth = 1; |
323 | 316 |
324 // Draw horizontal ruler. | 317 // Draw horizontal ruler. |
325 context.save(); | 318 context.save(); |
326 context.beginPath(); | |
327 context.moveTo(0, -rulerHeight + WebInspector.ResponsiveDesignView.Ruler Height); | |
328 context.lineTo(dipGridWidth, -rulerHeight + WebInspector.ResponsiveDesig nView.RulerHeight); | |
329 context.stroke(); | |
330 | 319 |
331 var minXIndex = Math.ceil(dipScrollX / rulerSubStep); | 320 var minXIndex = Math.ceil(dipScrollX / rulerSubStep); |
332 var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep); | 321 var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep); |
333 if (minXIndex) { | 322 if (minXIndex) { |
334 context.beginPath(); | 323 context.beginPath(); |
335 context.moveTo(0, -rulerHeight); | 324 context.moveTo(0, -rulerHeight); |
336 context.lineTo(0, 0); | 325 context.lineTo(0, 0); |
337 context.stroke(); | 326 context.stroke(); |
338 } | 327 } |
339 | 328 |
340 context.translate(-dipScrollX, 0); | 329 context.translate(-dipScrollX, 0); |
341 for (var index = minXIndex; index <= maxXIndex; index++) { | 330 for (var index = minXIndex; index <= maxXIndex; index++) { |
342 var x = index * rulerSubStep; | 331 var x = index * rulerSubStep; |
343 var y = -WebInspector.ResponsiveDesignView.RulerHeight * 0.25; | 332 var height = WebInspector.ResponsiveDesignView.RulerHeight * 0.25; |
344 var copyHeight = WebInspector.ResponsiveDesignView.RulerHeight * 0.2 5; | |
345 | 333 |
346 if (!(index % (rulerStepCount / 4))) | 334 if (!(index % (rulerStepCount / 4))) |
347 copyHeight = WebInspector.ResponsiveDesignView.RulerHeight * 0.5 ; | 335 height = WebInspector.ResponsiveDesignView.RulerHeight * 0.5; |
348 if (!(index % (rulerStepCount / 2))) { | 336 |
349 context.strokeStyle = rulerOverlayColor; | 337 if (!(index % (rulerStepCount / 2))) |
350 y = -rulerHeight + WebInspector.ResponsiveDesignView.RulerHeight * 0.25; | 338 height = rulerHeight; |
351 copyHeight = 0; | 339 |
352 } | |
353 if (!(index % rulerStepCount)) { | 340 if (!(index % rulerStepCount)) { |
354 context.save(); | 341 context.save(); |
355 context.translate(x, 0); | 342 context.translate(x, 0); |
356 context.fillText(Math.round(x / scale), 2, -rulerHeight + 10); | 343 context.fillText(Math.round(x / scale), 2, -rulerHeight + 10); |
357 context.restore(); | 344 context.restore(); |
358 y = -rulerHeight; | 345 height = rulerHeight; |
359 } | 346 } |
360 | 347 |
361 context.beginPath(); | 348 context.beginPath(); |
362 context.moveTo(x, y); | 349 context.moveTo(x, - height); |
363 context.lineTo(x, 0); | 350 context.lineTo(x, 0); |
364 context.stroke(); | 351 context.stroke(); |
365 if (copyHeight) { | |
366 context.beginPath(); | |
367 context.moveTo(x, -rulerHeight + WebInspector.ResponsiveDesignVi ew.RulerHeight - copyHeight); | |
368 context.lineTo(x, -rulerHeight + WebInspector.ResponsiveDesignVi ew.RulerHeight); | |
369 context.stroke(); | |
370 } | |
371 | 352 |
372 if (!(index % (rulerStepCount / 2))) | 353 if (!(index % (rulerStepCount / 2))) |
dgozman
2014/09/19 08:41:26
This is not needed any more.
pfeldman
2014/09/19 09:21:47
Done.
| |
373 context.strokeStyle = rulerColor; | 354 context.strokeStyle = rulerColor; |
374 } | 355 } |
375 context.restore(); | 356 context.restore(); |
376 | 357 |
377 // Draw vertical ruler. | 358 // Draw vertical ruler. |
378 context.save(); | 359 context.save(); |
379 var minYIndex = Math.ceil(dipScrollY / rulerSubStep); | 360 var minYIndex = Math.ceil(dipScrollY / rulerSubStep); |
380 var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep); | 361 var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep); |
381 context.translate(0, -dipScrollY); | 362 context.translate(0, -dipScrollY); |
382 for (var index = minYIndex; index <= maxYIndex; index++) { | 363 for (var index = minYIndex; index <= maxYIndex; index++) { |
(...skipping 64 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
447 // Draw contents size. | 428 // Draw contents size. |
448 var pageScaleAvailable = WebInspector.overridesSupport.settings.emulateM obile.get() || WebInspector.overridesSupport.settings.emulateTouch.get(); | 429 var pageScaleAvailable = WebInspector.overridesSupport.settings.emulateM obile.get() || WebInspector.overridesSupport.settings.emulateTouch.get(); |
449 if (this._drawContentsSize && pageScaleAvailable) { | 430 if (this._drawContentsSize && pageScaleAvailable) { |
450 context.fillStyle = contentsSizeColor; | 431 context.fillStyle = contentsSizeColor; |
451 var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._ viewport.contentsWidth * scale - dipScrollX)); | 432 var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._ viewport.contentsWidth * scale - dipScrollX)); |
452 var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this ._viewport.contentsHeight * scale - dipScrollY)); | 433 var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this ._viewport.contentsHeight * scale - dipScrollY)); |
453 context.fillRect(0, 0, visibleContentsWidth, visibleContentsHeight); | 434 context.fillRect(0, 0, visibleContentsWidth, visibleContentsHeight); |
454 } | 435 } |
455 }, | 436 }, |
456 | 437 |
438 /** | |
439 * @return {number} | |
440 */ | |
441 _rulerTotalHeightDIP: function() | |
442 { | |
443 var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._medi aInspector.element.offsetHeight : 0; | |
444 if (!mediaInspectorHeight) | |
445 return WebInspector.ResponsiveDesignView.RulerHeight; | |
446 return WebInspector.ResponsiveDesignView.RulerTopHeight + WebInspector.R esponsiveDesignView.RulerBottomHeight + mediaInspectorHeight * WebInspector.zoom Manager.zoomFactor(); | |
447 }, | |
448 | |
457 _updateUI: function() | 449 _updateUI: function() |
458 { | 450 { |
459 if (!this._enabled || !this.isShowing()) | 451 if (!this._enabled || !this.isShowing()) |
460 return; | 452 return; |
461 | 453 |
462 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | 454 var zoomFactor = WebInspector.zoomManager.zoomFactor(); |
463 var rect = this._canvas.parentElement.getBoundingClientRect(); | 455 var rect = this._canvas.parentElement.getBoundingClientRect(); |
464 var availableDip = this._availableDipSize(); | 456 var availableDip = this._availableDipSize(); |
465 var cssCanvasWidth = rect.width; | 457 var cssCanvasWidth = rect.width; |
466 var cssCanvasHeight = rect.height; | 458 var cssCanvasHeight = rect.height; |
467 var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._medi aInspector.element.offsetHeight : 0; | 459 var mediaInspectorHeight = this._mediaInspector.isShowing() ? this._medi aInspector.element.offsetHeight : 0; |
468 var rulerTotalHeight = WebInspector.ResponsiveDesignView.RulerHeight + ( mediaInspectorHeight ? WebInspector.ResponsiveDesignView.RulerBottomHeight : 0); | 460 var rulerTotalHeight = this._rulerTotalHeightDIP(); |
469 | 461 |
470 this._mediaInspector.setAxisTransform(this._viewport.scrollX, this._scal e * this._viewport.pageScaleFactor); | 462 this._mediaInspector.setAxisTransform(this._viewport.scrollX, this._scal e * this._viewport.pageScaleFactor); |
471 | 463 |
472 if (this._cachedZoomFactor !== zoomFactor || this._cachedMediaInspectorH eight !== mediaInspectorHeight) { | 464 if (this._cachedZoomFactor !== zoomFactor || this._cachedMediaInspectorH eight !== mediaInspectorHeight) { |
473 var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / z oomFactor + "px"; | 465 var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / z oomFactor + "px"; |
474 var cssRulerHeight = WebInspector.ResponsiveDesignView.RulerHeight / zoomFactor + "px"; | 466 var cssRulerHeight = (mediaInspectorHeight ? WebInspector.Responsive DesignView.RulerTopHeight : WebInspector.ResponsiveDesignView.RulerHeight) / zoo mFactor + "px"; |
dgozman
2014/09/19 08:41:25
cssRulerTopHeight
pfeldman
2014/09/19 09:21:47
Is that important?
dgozman
2014/09/19 09:25:22
Well, I expect cssRulerHeight === rulerTotalHeight
| |
475 var cssCanvasOffset = rulerTotalHeight / zoomFactor + mediaInspector Height + "px"; | 467 var cssCanvasOffset = rulerTotalHeight / zoomFactor + "px"; |
476 this._slidersContainer.style.left = cssRulerWidth; | 468 this._slidersContainer.style.left = cssRulerWidth; |
477 this._slidersContainer.style.top = cssCanvasOffset; | 469 this._slidersContainer.style.top = cssCanvasOffset; |
478 this._warningMessage.style.height = cssRulerHeight; | 470 this._warningMessage.style.height = cssCanvasOffset; |
471 this._pageScaleContainer.style.top = cssCanvasOffset; | |
479 this._mediaInspectorContainer.style.left = cssRulerWidth; | 472 this._mediaInspectorContainer.style.left = cssRulerWidth; |
480 this._mediaInspectorContainer.style.marginTop = cssRulerHeight; | 473 this._mediaInspectorContainer.style.marginTop = cssRulerHeight; |
481 | 474 |
482 var cssSliderWidth = WebInspector.ResponsiveDesignView.SliderWidth / zoomFactor + "px"; | 475 var cssSliderWidth = WebInspector.ResponsiveDesignView.SliderWidth / zoomFactor + "px"; |
483 this._heightSliderContainer.style.flexBasis = cssSliderWidth; | 476 this._heightSliderContainer.style.flexBasis = cssSliderWidth; |
484 this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidt h; | 477 this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidt h; |
485 this._widthSliderContainer.style.flexBasis = cssSliderWidth; | 478 this._widthSliderContainer.style.flexBasis = cssSliderWidth; |
486 this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth; | 479 this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth; |
487 } | 480 } |
488 | 481 |
489 var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) / zoomFactor; | 482 var cssWidth = (this._dipWidth ? this._dipWidth : availableDip.width) / zoomFactor; |
490 var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height ) / zoomFactor; | 483 var cssHeight = (this._dipHeight ? this._dipHeight : availableDip.height ) / zoomFactor; |
491 if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHe ight) { | 484 if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHe ight) { |
492 this._slidersContainer.style.width = cssWidth + "px"; | 485 this._slidersContainer.style.width = cssWidth + "px"; |
493 this._slidersContainer.style.height = cssHeight + "px"; | 486 this._slidersContainer.style.height = cssHeight + "px"; |
494 this._inspectedPagePlaceholder.onResize(); | 487 this._inspectedPagePlaceholder.onResize(); |
495 } | 488 } |
496 | 489 |
497 var pageScaleVisible = cssWidth + WebInspector.ResponsiveDesignView.Page ScaleContainerWidth + WebInspector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width || | 490 var pageScaleVisible = cssWidth + this._pageScaleContainerWidth + WebIns pector.ResponsiveDesignView.RulerWidth / zoomFactor <= rect.width; |
498 cssHeight + WebInspector.ResponsiveDesignView.PageScaleContainerHeig ht + mediaInspectorHeight + rulerTotalHeight / zoomFactor <= rect.height; | |
499 this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible); | 491 this._pageScaleContainer.classList.toggle("hidden", !pageScaleVisible); |
500 | 492 |
501 var viewportChanged = !this._cachedViewport | 493 var viewportChanged = !this._cachedViewport |
502 || this._cachedViewport.scrollX !== this._viewport.scrollX || this._ cachedViewport.scrollY !== this._viewport.scrollY | 494 || this._cachedViewport.scrollX !== this._viewport.scrollX || this._ cachedViewport.scrollY !== this._viewport.scrollY |
503 || this._cachedViewport.contentsWidth !== this._viewport.contentsWid th || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight | 495 || this._cachedViewport.contentsWidth !== this._viewport.contentsWid th || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight |
504 || this._cachedViewport.pageScaleFactor !== this._viewport.pageScale Factor | 496 || this._cachedViewport.pageScaleFactor !== this._viewport.pageScale Factor |
505 || this._cachedViewport.minimumPageScaleFactor !== this._viewport.mi nimumPageScaleFactor | 497 || this._cachedViewport.minimumPageScaleFactor !== this._viewport.mi nimumPageScaleFactor |
506 || this._cachedViewport.maximumPageScaleFactor !== this._viewport.ma ximumPageScaleFactor; | 498 || this._cachedViewport.maximumPageScaleFactor !== this._viewport.ma ximumPageScaleFactor; |
507 | 499 |
508 var canvasInvalidated = viewportChanged || this._drawContentsSize !== th is._cachedDrawContentsSize || this._cachedScale !== this._scale || | 500 var canvasInvalidated = viewportChanged || this._drawContentsSize !== th is._cachedDrawContentsSize || this._cachedScale !== this._scale || |
509 this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanv asHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor || | 501 this._cachedCssCanvasWidth !== cssCanvasWidth || this._cachedCssCanv asHeight !== cssCanvasHeight || this._cachedZoomFactor !== zoomFactor || |
510 this._cachedMediaInspectorHeight !== mediaInspectorHeight; | 502 this._cachedMediaInspectorHeight !== mediaInspectorHeight; |
511 | 503 |
512 if (canvasInvalidated) | 504 if (canvasInvalidated) |
513 this._drawCanvas(cssCanvasWidth, cssCanvasHeight, mediaInspectorHeig ht); | 505 this._drawCanvas(cssCanvasWidth, cssCanvasHeight); |
514 | 506 |
515 if (viewportChanged) { | 507 if (viewportChanged) { |
516 this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", thi s._viewport.pageScaleFactor); | 508 this._pageScaleLabel.textContent = WebInspector.UIString("%.1f", thi s._viewport.pageScaleFactor); |
517 this._decreasePageScaleButton.title = WebInspector.UIString("Scale d own (minimum %.1f)", this._viewport.minimumPageScaleFactor); | 509 this._decreasePageScaleButton.title = WebInspector.UIString("Scale d own (minimum %.1f)", this._viewport.minimumPageScaleFactor); |
518 this._decreasePageScaleButton.setEnabled(this._viewport.pageScaleFac tor > this._viewport.minimumPageScaleFactor); | 510 this._decreasePageScaleButton.setEnabled(this._viewport.pageScaleFac tor > this._viewport.minimumPageScaleFactor); |
519 this._increasePageScaleButton.title = WebInspector.UIString("Scale u p (maximum %.1f)", this._viewport.maximumPageScaleFactor); | 511 this._increasePageScaleButton.title = WebInspector.UIString("Scale u p (maximum %.1f)", this._viewport.maximumPageScaleFactor); |
520 this._increasePageScaleButton.setEnabled(this._viewport.pageScaleFac tor < this._viewport.maximumPageScaleFactor); | 512 this._increasePageScaleButton.setEnabled(this._viewport.pageScaleFac tor < this._viewport.maximumPageScaleFactor); |
521 } | 513 } |
522 | 514 |
523 this._cachedScale = this._scale; | 515 this._cachedScale = this._scale; |
524 this._cachedCssCanvasWidth = cssCanvasWidth; | 516 this._cachedCssCanvasWidth = cssCanvasWidth; |
525 this._cachedCssCanvasHeight = cssCanvasHeight; | 517 this._cachedCssCanvasHeight = cssCanvasHeight; |
526 this._cachedCssHeight = cssHeight; | 518 this._cachedCssHeight = cssHeight; |
527 this._cachedCssWidth = cssWidth; | 519 this._cachedCssWidth = cssWidth; |
528 this._cachedZoomFactor = zoomFactor; | 520 this._cachedZoomFactor = zoomFactor; |
529 this._cachedViewport = this._viewport; | 521 this._cachedViewport = this._viewport; |
530 this._cachedDrawContentsSize = this._drawContentsSize; | 522 this._cachedDrawContentsSize = this._drawContentsSize; |
531 this._cachedMediaInspectorHeight = mediaInspectorHeight; | 523 this._cachedMediaInspectorHeight = mediaInspectorHeight; |
532 }, | 524 }, |
533 | 525 |
534 onResize: function() | 526 onResize: function() |
535 { | 527 { |
536 if (!this._enabled || this._ignoreResize) | 528 if (!this._enabled || this._ignoreResize) |
537 return; | 529 return; |
538 var oldSize = this._availableSize; | 530 var oldSize = this._availableSize; |
531 | |
532 this._pageScaleContainer.classList.remove("hidden"); | |
533 this._pageScaleContainerWidth = this._pageScaleContainer.offsetWidth; | |
534 | |
539 delete this._availableSize; | 535 delete this._availableSize; |
540 var newSize = this._availableDipSize(); | 536 var newSize = this._availableDipSize(); |
541 if (!newSize.isEqual(oldSize)) | 537 if (!newSize.isEqual(oldSize)) |
542 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResi zer.Events.AvailableSizeChanged, newSize); | 538 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResi zer.Events.AvailableSizeChanged, newSize); |
543 this._updateUI(); | 539 this._updateUI(); |
544 this._inspectedPagePlaceholder.onResize(); | 540 this._inspectedPagePlaceholder.onResize(); |
545 }, | 541 }, |
546 | 542 |
547 _onZoomChanged: function() | 543 _onZoomChanged: function() |
548 { | 544 { |
(...skipping 204 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... | |
753 value = Math.min(this._viewport.maximumPageScaleFactor, value); | 749 value = Math.min(this._viewport.maximumPageScaleFactor, value); |
754 value = Math.max(this._viewport.minimumPageScaleFactor, value) | 750 value = Math.max(this._viewport.minimumPageScaleFactor, value) |
755 this._target.pageAgent().setPageScaleFactor(value); | 751 this._target.pageAgent().setPageScaleFactor(value); |
756 } | 752 } |
757 finishCallback(); | 753 finishCallback(); |
758 } | 754 } |
759 }, | 755 }, |
760 | 756 |
761 __proto__: WebInspector.VBox.prototype | 757 __proto__: WebInspector.VBox.prototype |
762 }; | 758 }; |
OLD | NEW |