| OLD | NEW |
|---|
| (Empty) |
| 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 | |
| 3 // found in the LICENSE file. | |
| 4 | |
| 5 /** | |
| 6 * @constructor | |
| 7 * @extends {WebInspector.VBox} | |
| 8 * @implements {WebInspector.OverridesSupport.PageResizer} | |
| 9 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder | |
| 10 */ | |
| 11 WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder) | |
| 12 { | |
| 13 WebInspector.VBox.call(this); | |
| 14 this.setMinimumSize(150, 150); | |
| 15 this.registerRequiredCSS("responsiveDesignView.css"); | |
| 16 this.element.classList.add("overflow-hidden"); | |
| 17 | |
| 18 this._responsiveDesignContainer = new WebInspector.VBox(); | |
| 19 | |
| 20 this._createToolbar(); | |
| 21 | |
| 22 this._mediaInspector = new WebInspector.MediaQueryInspector(); | |
| 23 this._mediaInspectorContainer = this._responsiveDesignContainer.element.crea
teChild("div", "responsive-design-media-container"); | |
| 24 this._updateMediaQueryInspector(); | |
| 25 | |
| 26 this._canvasContainer = new WebInspector.View(); | |
| 27 this._canvasContainer.element.classList.add("responsive-design"); | |
| 28 this._canvasContainer.show(this._responsiveDesignContainer.element); | |
| 29 | |
| 30 this._canvas = this._canvasContainer.element.createChild("canvas", "fill"); | |
| 31 | |
| 32 this._rulerGlasspane = this._canvasContainer.element.createChild("div", "res
ponsive-design-ruler-glasspane"); | |
| 33 this._rulerGlasspane.appendChild(this._mediaInspector.rulerDecorationLayer()
); | |
| 34 | |
| 35 this._warningMessage = this._canvasContainer.element.createChild("div", "res
ponsive-design-warning hidden"); | |
| 36 this._warningMessage.createChild("div", "warning-icon-small"); | |
| 37 this._warningMessage.createChild("span"); | |
| 38 var warningCloseButton = this._warningMessage.createChild("div", "close-butt
on"); | |
| 39 warningCloseButton.addEventListener("click", WebInspector.overridesSupport.c
learWarningMessage.bind(WebInspector.overridesSupport), false); | |
| 40 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport
.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this); | |
| 41 | |
| 42 this._slidersContainer = this._canvasContainer.element.createChild("div", "v
box responsive-design-sliders-container"); | |
| 43 var hbox = this._slidersContainer.createChild("div", "hbox flex-auto"); | |
| 44 this._heightSliderContainer = this._slidersContainer.createChild("div", "hbo
x responsive-design-slider-height"); | |
| 45 this._pageContainer = hbox.createChild("div", "vbox flex-auto"); | |
| 46 this._widthSliderContainer = hbox.createChild("div", "vbox responsive-design
-slider-width"); | |
| 47 | |
| 48 this._widthSlider = this._widthSliderContainer.createChild("div", "responsiv
e-design-slider-thumb"); | |
| 49 this._widthSlider.createChild("div", "responsive-design-thumb-handle"); | |
| 50 this._createResizer(this._widthSlider, false); | |
| 51 this._heightSlider = this._heightSliderContainer.createChild("div", "respons
ive-design-slider-thumb"); | |
| 52 this._heightSlider.createChild("div", "responsive-design-thumb-handle"); | |
| 53 this._createResizer(this._heightSlider, true); | |
| 54 | |
| 55 this._inspectedPagePlaceholder = inspectedPagePlaceholder; | |
| 56 inspectedPagePlaceholder.show(this.element); | |
| 57 | |
| 58 this._enabled = false; | |
| 59 this._viewport = { scrollX: 0, scrollY: 0, contentsWidth: 0, contentsHeight:
0, pageScaleFactor: 1 }; | |
| 60 this._drawContentsSize = true; | |
| 61 this._viewportChangedThrottler = new WebInspector.Throttler(0); | |
| 62 | |
| 63 WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.Zo
omChanged, this._onZoomChanged, this); | |
| 64 WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport
.Events.EmulationStateChanged, this._emulationEnabledChanged, this); | |
| 65 this._mediaInspector.addEventListener(WebInspector.MediaQueryInspector.Event
s.HeightUpdated, this.onResize, this); | |
| 66 WebInspector.resourceTreeModel.addEventListener(WebInspector.ResourceTreeMod
el.EventTypes.ViewportChanged, this._viewportChanged, this); | |
| 67 | |
| 68 this._emulationEnabledChanged(); | |
| 69 this._overridesWarningUpdated(); | |
| 70 }; | |
| 71 | |
| 72 // Measured in DIP. | |
| 73 WebInspector.ResponsiveDesignView.SliderWidth = 19; | |
| 74 WebInspector.ResponsiveDesignView.RulerWidth = 22; | |
| 75 | |
| 76 WebInspector.ResponsiveDesignView.prototype = { | |
| 77 _invalidateCache: function() | |
| 78 { | |
| 79 delete this._cachedScale; | |
| 80 delete this._cachedCssCanvasWidth; | |
| 81 delete this._cachedCssCanvasHeight; | |
| 82 delete this._cachedCssHeight; | |
| 83 delete this._cachedCssWidth; | |
| 84 delete this._cachedZoomFactor; | |
| 85 delete this._cachedViewport; | |
| 86 delete this._cachedDrawContentsSize; | |
| 87 delete this._availableSize; | |
| 88 }, | |
| 89 | |
| 90 _emulationEnabledChanged: function() | |
| 91 { | |
| 92 var enabled = WebInspector.overridesSupport.emulationEnabled(); | |
| 93 this._mediaInspector.setEnabled(enabled); | |
| 94 if (enabled && !this._enabled) { | |
| 95 this._invalidateCache(); | |
| 96 this._ignoreResize = true; | |
| 97 this._enabled = true; | |
| 98 this._inspectedPagePlaceholder.clearMinimumSizeAndMargins(); | |
| 99 this._inspectedPagePlaceholder.show(this._pageContainer); | |
| 100 this._responsiveDesignContainer.show(this.element); | |
| 101 delete this._ignoreResize; | |
| 102 this.onResize(); | |
| 103 } else if (!enabled && this._enabled) { | |
| 104 this._invalidateCache(); | |
| 105 this._ignoreResize = true; | |
| 106 this._enabled = false; | |
| 107 this._scale = 1; | |
| 108 this._inspectedPagePlaceholder.restoreMinimumSizeAndMargins(); | |
| 109 this._responsiveDesignContainer.detach(); | |
| 110 this._inspectedPagePlaceholder.show(this.element); | |
| 111 delete this._ignoreResize; | |
| 112 this.onResize(); | |
| 113 } | |
| 114 }, | |
| 115 | |
| 116 /** | |
| 117 * WebInspector.OverridesSupport.PageResizer override. | |
| 118 * @param {number} dipWidth | |
| 119 * @param {number} dipHeight | |
| 120 * @param {number} scale | |
| 121 */ | |
| 122 update: function(dipWidth, dipHeight, scale) | |
| 123 { | |
| 124 this._scale = scale; | |
| 125 this._dipWidth = dipWidth ? Math.max(dipWidth, 1) : 0; | |
| 126 this._dipHeight = dipHeight ? Math.max(dipHeight, 1) : 0; | |
| 127 this._updateUI(); | |
| 128 }, | |
| 129 | |
| 130 updatePageResizer: function() | |
| 131 { | |
| 132 WebInspector.overridesSupport.setPageResizer(this, this._availableDipSiz
e()); | |
| 133 }, | |
| 134 | |
| 135 /** | |
| 136 * @return {!Size} | |
| 137 */ | |
| 138 _availableDipSize: function() | |
| 139 { | |
| 140 if (typeof this._availableSize === "undefined") { | |
| 141 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | |
| 142 var rect = this._canvasContainer.element.getBoundingClientRect(); | |
| 143 this._availableSize = new Size(Math.max(rect.width * zoomFactor - We
bInspector.ResponsiveDesignView.RulerWidth, 1), | |
| 144 Math.max(rect.height * zoomFactor - W
ebInspector.ResponsiveDesignView.RulerWidth, 1)); | |
| 145 } | |
| 146 return this._availableSize; | |
| 147 }, | |
| 148 | |
| 149 /** | |
| 150 * @param {!Element} element | |
| 151 * @param {boolean} vertical | |
| 152 * @return {!WebInspector.ResizerWidget} | |
| 153 */ | |
| 154 _createResizer: function(element, vertical) | |
| 155 { | |
| 156 var resizer = new WebInspector.ResizerWidget(); | |
| 157 resizer.addElement(element); | |
| 158 resizer.setVertical(vertical); | |
| 159 resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeStart,
this._onResizeStart, this); | |
| 160 resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeUpdate,
this._onResizeUpdate, this); | |
| 161 resizer.addEventListener(WebInspector.ResizerWidget.Events.ResizeEnd, th
is._onResizeEnd, this); | |
| 162 return resizer; | |
| 163 }, | |
| 164 | |
| 165 /** | |
| 166 * @param {!WebInspector.Event} event | |
| 167 */ | |
| 168 _onResizeStart: function(event) | |
| 169 { | |
| 170 this._drawContentsSize = false; | |
| 171 var available = this._availableDipSize(); | |
| 172 this._slowPositionStart = null; | |
| 173 this._resizeStartSize = event.target.isVertical() ? (this._dipHeight ||
available.height) : (this._dipWidth || available.width); | |
| 174 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.
Events.FixedScaleRequested, true); | |
| 175 this._updateUI(); | |
| 176 }, | |
| 177 | |
| 178 /** | |
| 179 * @param {!WebInspector.Event} event | |
| 180 */ | |
| 181 _onResizeUpdate: function(event) | |
| 182 { | |
| 183 if (event.data.shiftKey !== !!this._slowPositionStart) | |
| 184 this._slowPositionStart = event.data.shiftKey ? event.data.currentPo
sition : null; | |
| 185 var cssOffset = this._slowPositionStart ? (event.data.currentPosition -
this._slowPositionStart) / 10 + this._slowPositionStart - event.data.startPositi
on : event.data.currentPosition - event.data.startPosition; | |
| 186 var dipOffset = Math.round(cssOffset * WebInspector.zoomManager.zoomFact
or()); | |
| 187 var newSize = this._resizeStartSize + dipOffset; | |
| 188 newSize = Math.round(newSize / (this._scale || 1)); | |
| 189 newSize = Math.max(Math.min(newSize, WebInspector.OverridesSupport.MaxDe
viceSize), 1); | |
| 190 var requested = {}; | |
| 191 if (event.target.isVertical()) | |
| 192 requested.height = newSize; | |
| 193 else | |
| 194 requested.width = newSize; | |
| 195 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.
Events.ResizeRequested, requested); | |
| 196 }, | |
| 197 | |
| 198 /** | |
| 199 * @param {!WebInspector.Event} event | |
| 200 */ | |
| 201 _onResizeEnd: function(event) | |
| 202 { | |
| 203 this._drawContentsSize = true; | |
| 204 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResizer.
Events.FixedScaleRequested, false); | |
| 205 delete this._resizeStartSize; | |
| 206 this._updateUI(); | |
| 207 }, | |
| 208 | |
| 209 /** | |
| 210 * Draws canvas of the specified css size in DevTools page space. | |
| 211 * Canvas contains grid and rulers. | |
| 212 * @param {number} cssCanvasWidth | |
| 213 * @param {number} cssCanvasHeight | |
| 214 */ | |
| 215 _drawCanvas: function(cssCanvasWidth, cssCanvasHeight) | |
| 216 { | |
| 217 if (!this._enabled) | |
| 218 return; | |
| 219 | |
| 220 var canvas = this._canvas; | |
| 221 var context = canvas.getContext("2d"); | |
| 222 canvas.style.width = cssCanvasWidth + "px"; | |
| 223 canvas.style.height = cssCanvasHeight + "px"; | |
| 224 | |
| 225 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | |
| 226 var dipCanvasWidth = cssCanvasWidth * zoomFactor; | |
| 227 var dipCanvasHeight = cssCanvasHeight * zoomFactor; | |
| 228 | |
| 229 var deviceScaleFactor = window.devicePixelRatio; | |
| 230 canvas.width = deviceScaleFactor * cssCanvasWidth; | |
| 231 canvas.height = deviceScaleFactor * cssCanvasHeight; | |
| 232 context.scale(canvas.width / dipCanvasWidth, canvas.height / dipCanvasHe
ight); | |
| 233 context.font = "11px " + WebInspector.fontFamily(); | |
| 234 | |
| 235 const rulerBackgroundColor = "rgb(0, 0, 0)"; | |
| 236 const backgroundColor = "rgb(102, 102, 102)"; | |
| 237 const lightLineColor = "rgb(132, 132, 132)"; | |
| 238 const darkLineColor = "rgb(114, 114, 114)"; | |
| 239 const rulerColor = "rgb(125, 125, 125)"; | |
| 240 const textColor = "rgb(186, 186, 186)"; | |
| 241 const contentsSizeColor = "rgba(128, 128, 128, 0.5)"; | |
| 242 | |
| 243 var scale = (this._scale || 1) * this._viewport.pageScaleFactor; | |
| 244 var rulerScale = 0.5; | |
| 245 while (Math.abs(rulerScale * scale - 1) > Math.abs((rulerScale + 0.5) *
scale - 1)) | |
| 246 rulerScale += 0.5; | |
| 247 | |
| 248 var gridStep = 50 * scale * rulerScale; | |
| 249 var gridSubStep = 10 * scale * rulerScale; | |
| 250 | |
| 251 var rulerSubStep = 5 * scale * rulerScale; | |
| 252 var rulerStepCount = 20; | |
| 253 | |
| 254 var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth; | |
| 255 var dipGridWidth = dipCanvasWidth - rulerWidth; | |
| 256 var dipGridHeight = dipCanvasHeight - rulerWidth; | |
| 257 var dipScrollX = this._viewport.scrollX * scale; | |
| 258 var dipScrollY = this._viewport.scrollY * scale; | |
| 259 context.translate(rulerWidth, rulerWidth); | |
| 260 | |
| 261 context.fillStyle = rulerBackgroundColor; | |
| 262 context.fillRect(-rulerWidth, -rulerWidth, dipGridWidth + rulerWidth, ru
lerWidth); | |
| 263 context.fillRect(-rulerWidth, 0, rulerWidth, dipGridHeight); | |
| 264 | |
| 265 context.fillStyle = backgroundColor; | |
| 266 context.fillRect(0, 0, dipGridWidth, dipGridHeight); | |
| 267 | |
| 268 context.translate(0.5, 0.5); | |
| 269 context.strokeStyle = rulerColor; | |
| 270 context.fillStyle = textColor; | |
| 271 context.lineWidth = 1; | |
| 272 | |
| 273 // Draw vertical ruler. | |
| 274 context.save(); | |
| 275 var minXIndex = Math.ceil(dipScrollX / rulerSubStep); | |
| 276 var maxXIndex = Math.floor((dipScrollX + dipGridWidth) / rulerSubStep); | |
| 277 context.translate(-dipScrollX, 0); | |
| 278 for (var index = minXIndex; index <= maxXIndex; index++) { | |
| 279 var x = index * rulerSubStep; | |
| 280 var y = -rulerWidth / 4; | |
| 281 if (!(index % (rulerStepCount / 4))) | |
| 282 y = -rulerWidth / 2; | |
| 283 if (!(index % (rulerStepCount / 2))) | |
| 284 y = -rulerWidth + 2; | |
| 285 | |
| 286 if (!(index % rulerStepCount)) { | |
| 287 context.save(); | |
| 288 context.translate(x, 0); | |
| 289 context.fillText(Math.round(x / scale), 2, -rulerWidth / 2); | |
| 290 context.restore(); | |
| 291 y = -rulerWidth; | |
| 292 } | |
| 293 | |
| 294 context.beginPath(); | |
| 295 context.moveTo(x, y); | |
| 296 context.lineTo(x, 0); | |
| 297 context.stroke(); | |
| 298 } | |
| 299 context.restore(); | |
| 300 | |
| 301 // Draw horizontal ruler. | |
| 302 context.save(); | |
| 303 var minYIndex = Math.ceil(dipScrollY / rulerSubStep); | |
| 304 var maxYIndex = Math.floor((dipScrollY + dipGridHeight) / rulerSubStep); | |
| 305 context.translate(0, -dipScrollY); | |
| 306 for (var index = minYIndex; index <= maxYIndex; index++) { | |
| 307 var y = index * rulerSubStep; | |
| 308 var x = -rulerWidth / 4; | |
| 309 if (!(index % (rulerStepCount / 4))) | |
| 310 x = -rulerWidth / 2; | |
| 311 if (!(index % (rulerStepCount / 2))) | |
| 312 x = -rulerWidth + 2; | |
| 313 | |
| 314 if (!(index % rulerStepCount)) { | |
| 315 context.save(); | |
| 316 context.translate(0, y); | |
| 317 context.rotate(-Math.PI / 2); | |
| 318 context.fillText(Math.round(y / scale), 2, -rulerWidth / 2); | |
| 319 context.restore(); | |
| 320 x = -rulerWidth; | |
| 321 } | |
| 322 | |
| 323 context.beginPath(); | |
| 324 context.moveTo(x, y); | |
| 325 context.lineTo(0, y); | |
| 326 context.stroke(); | |
| 327 } | |
| 328 context.restore(); | |
| 329 | |
| 330 // Draw grid. | |
| 331 drawGrid(dipScrollX, dipScrollY, darkLineColor, gridSubStep); | |
| 332 drawGrid(dipScrollX, dipScrollY, lightLineColor, gridStep); | |
| 333 | |
| 334 /** | |
| 335 * @param {number} scrollX | |
| 336 * @param {number} scrollY | |
| 337 * @param {string} color | |
| 338 * @param {number} step | |
| 339 */ | |
| 340 function drawGrid(scrollX, scrollY, color, step) | |
| 341 { | |
| 342 context.strokeStyle = color; | |
| 343 var minX = Math.ceil(scrollX / step) * step; | |
| 344 var maxX = Math.floor((scrollX + dipGridWidth) / step) * step - minX
; | |
| 345 var minY = Math.ceil(scrollY / step) * step; | |
| 346 var maxY = Math.floor((scrollY + dipGridHeight) / step) * step - min
Y; | |
| 347 | |
| 348 context.save(); | |
| 349 context.translate(minX - scrollX, 0); | |
| 350 for (var x = 0; x <= maxX; x += step) { | |
| 351 context.beginPath(); | |
| 352 context.moveTo(x, 0); | |
| 353 context.lineTo(x, dipGridHeight); | |
| 354 context.stroke(); | |
| 355 } | |
| 356 context.restore(); | |
| 357 | |
| 358 context.save(); | |
| 359 context.translate(0, minY - scrollY); | |
| 360 for (var y = 0; y <= maxY; y += step) { | |
| 361 context.beginPath(); | |
| 362 context.moveTo(0, y); | |
| 363 context.lineTo(dipGridWidth, y); | |
| 364 context.stroke(); | |
| 365 } | |
| 366 context.restore(); | |
| 367 } | |
| 368 | |
| 369 context.translate(-0.5, -0.5); | |
| 370 | |
| 371 // Draw contents size. | |
| 372 if (this._drawContentsSize) { | |
| 373 context.fillStyle = contentsSizeColor; | |
| 374 var visibleContentsWidth = Math.max(0, Math.min(dipGridWidth, this._
viewport.contentsWidth * scale - dipScrollX)); | |
| 375 var visibleContentsHeight = Math.max(0, Math.min(dipGridHeight, this
._viewport.contentsHeight * scale - dipScrollY)); | |
| 376 context.fillRect(0, 0, visibleContentsWidth, visibleContentsHeight); | |
| 377 } | |
| 378 }, | |
| 379 | |
| 380 _updateUI: function() | |
| 381 { | |
| 382 if (!this._enabled || !this.isShowing()) | |
| 383 return; | |
| 384 | |
| 385 var zoomFactor = WebInspector.zoomManager.zoomFactor(); | |
| 386 var rect = this._canvas.parentElement.getBoundingClientRect(); | |
| 387 var availableDip = this._availableDipSize(); | |
| 388 var cssCanvasWidth = rect.width; | |
| 389 var cssCanvasHeight = rect.height; | |
| 390 | |
| 391 this._mediaInspector.setAxisTransform(WebInspector.ResponsiveDesignView.
RulerWidth / zoomFactor, this._viewport.scrollX, this._scale * this._viewport.pa
geScaleFactor); | |
| 392 | |
| 393 if (this._cachedZoomFactor !== zoomFactor) { | |
| 394 var cssRulerWidth = WebInspector.ResponsiveDesignView.RulerWidth / z
oomFactor + "px"; | |
| 395 this._rulerGlasspane.style.height = cssRulerWidth; | |
| 396 this._rulerGlasspane.style.left = cssRulerWidth; | |
| 397 this._slidersContainer.style.left = cssRulerWidth; | |
| 398 this._slidersContainer.style.top = cssRulerWidth; | |
| 399 this._warningMessage.style.height = cssRulerWidth; | |
| 400 | |
| 401 var cssSliderWidth = WebInspector.ResponsiveDesignView.SliderWidth /
zoomFactor + "px"; | |
| 402 this._heightSliderContainer.style.flexBasis = cssSliderWidth; | |
| 403 this._heightSliderContainer.style.marginBottom = "-" + cssSliderWidt
h; | |
| 404 this._widthSliderContainer.style.flexBasis = cssSliderWidth; | |
| 405 this._widthSliderContainer.style.marginRight = "-" + cssSliderWidth; | |
| 406 } | |
| 407 | |
| 408 var cssWidth = this._dipWidth ? (this._dipWidth / zoomFactor + "px") : (
availableDip.width / zoomFactor + "px"); | |
| 409 var cssHeight = this._dipHeight ? (this._dipHeight / zoomFactor + "px")
: (availableDip.height / zoomFactor + "px"); | |
| 410 if (this._cachedCssWidth !== cssWidth || this._cachedCssHeight !== cssHe
ight) { | |
| 411 this._slidersContainer.style.width = cssWidth; | |
| 412 this._slidersContainer.style.height = cssHeight; | |
| 413 this._inspectedPagePlaceholder.onResize(); | |
| 414 } | |
| 415 | |
| 416 var viewportChanged = !this._cachedViewport | |
| 417 || this._cachedViewport.scrollX !== this._viewport.scrollX || this._
cachedViewport.scrollY !== this._viewport.scrollY | |
| 418 || this._cachedViewport.contentsWidth !== this._viewport.contentsWid
th || this._cachedViewport.contentsHeight !== this._viewport.contentsHeight | |
| 419 || this._cachedViewport.pageScaleFactor !== this._viewport.pageScale
Factor; | |
| 420 if (viewportChanged || this._drawContentsSize !== this._cachedDrawConten
tsSize || this._cachedScale !== this._scale || this._cachedCssCanvasWidth !== cs
sCanvasWidth || this._cachedCssCanvasHeight !== cssCanvasHeight || this._cachedZ
oomFactor !== zoomFactor) | |
| 421 this._drawCanvas(cssCanvasWidth, cssCanvasHeight); | |
| 422 | |
| 423 this._cachedScale = this._scale; | |
| 424 this._cachedCssCanvasWidth = cssCanvasWidth; | |
| 425 this._cachedCssCanvasHeight = cssCanvasHeight; | |
| 426 this._cachedCssHeight = cssHeight; | |
| 427 this._cachedCssWidth = cssWidth; | |
| 428 this._cachedZoomFactor = zoomFactor; | |
| 429 this._cachedViewport = this._viewport; | |
| 430 this._cachedDrawContentsSize = this._drawContentsSize; | |
| 431 }, | |
| 432 | |
| 433 onResize: function() | |
| 434 { | |
| 435 if (!this._enabled || this._ignoreResize) | |
| 436 return; | |
| 437 var oldSize = this._availableSize; | |
| 438 delete this._availableSize; | |
| 439 var newSize = this._availableDipSize(); | |
| 440 if (!newSize.isEqual(oldSize)) | |
| 441 this.dispatchEventToListeners(WebInspector.OverridesSupport.PageResi
zer.Events.AvailableSizeChanged, newSize); | |
| 442 this._updateUI(); | |
| 443 this._inspectedPagePlaceholder.onResize(); | |
| 444 }, | |
| 445 | |
| 446 _onZoomChanged: function() | |
| 447 { | |
| 448 this._updateUI(); | |
| 449 }, | |
| 450 | |
| 451 _createToolbar: function() | |
| 452 { | |
| 453 this._toolbarElement = this._responsiveDesignContainer.element.createChi
ld("div", "responsive-design-toolbar"); | |
| 454 this._createButtonsSection(); | |
| 455 this._toolbarElement.createChild("div", "responsive-design-separator"); | |
| 456 this._createDeviceSection(); | |
| 457 this._toolbarElement.createChild("div", "responsive-design-separator"); | |
| 458 this._createNetworkSection(); | |
| 459 this._toolbarElement.createChild("div", "responsive-design-separator"); | |
| 460 | |
| 461 var moreButtonContainer = this._toolbarElement.createChild("div", "respo
nsive-design-more-button-container"); | |
| 462 var moreButton = moreButtonContainer.createChild("button", "responsive-d
esign-more-button"); | |
| 463 moreButton.title = WebInspector.UIString("More overrides"); | |
| 464 moreButton.addEventListener("click", this._showEmulationInDrawer.bind(th
is), false); | |
| 465 moreButton.textContent = "\u2026"; | |
| 466 }, | |
| 467 | |
| 468 _createButtonsSection: function() | |
| 469 { | |
| 470 var buttonsSection = this._toolbarElement.createChild("div", "responsive
-design-section responsive-design-section-buttons"); | |
| 471 | |
| 472 var resetButton = new WebInspector.StatusBarButton(WebInspector.UIString
("Reset all overrides."), "clear-status-bar-item"); | |
| 473 buttonsSection.appendChild(resetButton.element); | |
| 474 resetButton.addEventListener("click", WebInspector.overridesSupport.rese
t, WebInspector.overridesSupport); | |
| 475 | |
| 476 // Media Query Inspector. | |
| 477 this._toggleMediaInspectorButton = new WebInspector.StatusBarButton(WebI
nspector.UIString("Media queries."), "responsive-design-toggle-media-inspector")
; | |
| 478 this._toggleMediaInspectorButton.toggled = WebInspector.settings.showMed
iaQueryInspector.get(); | |
| 479 this._toggleMediaInspectorButton.addEventListener("click", this._onToggl
eMediaInspectorButtonClick, this); | |
| 480 WebInspector.settings.showMediaQueryInspector.addChangeListener(this._up
dateMediaQueryInspector, this); | |
| 481 buttonsSection.appendChild(this._toggleMediaInspectorButton.element); | |
| 482 }, | |
| 483 | |
| 484 _createDeviceSection: function() | |
| 485 { | |
| 486 var deviceSection = this._toolbarElement.createChild("div", "responsive-
design-section responsive-design-section-device"); | |
| 487 | |
| 488 // Device. | |
| 489 var deviceElement = deviceSection.createChild("div", "responsive-design-
suite responsive-design-suite-top").createChild("div"); | |
| 490 var fieldsetElement = deviceElement.createChild("fieldset"); | |
| 491 fieldsetElement.createChild("label").textContent = WebInspector.UIString
("Device"); | |
| 492 fieldsetElement.appendChild(WebInspector.overridesSupport.createDeviceSe
lect(document)); | |
| 493 | |
| 494 var separator = deviceSection.createChild("div", "responsive-design-sect
ion-separator"); | |
| 495 | |
| 496 var detailsElement = deviceSection.createChild("div", "responsive-design
-suite"); | |
| 497 | |
| 498 // Dimensions. | |
| 499 var screenElement = detailsElement.createChild("div", ""); | |
| 500 fieldsetElement = screenElement.createChild("fieldset"); | |
| 501 | |
| 502 var emulateResolutionCheckbox = WebInspector.SettingsUI.createSettingChe
ckbox("", WebInspector.overridesSupport.settings.emulateResolution, true, undefi
ned, WebInspector.UIString("Emulate screen resolution")); | |
| 503 fieldsetElement.appendChild(emulateResolutionCheckbox); | |
| 504 | |
| 505 var resolutionButton = new WebInspector.StatusBarButton(WebInspector.UIS
tring("Screen resolution"), "responsive-design-icon responsive-design-icon-resol
ution"); | |
| 506 resolutionButton.setEnabled(false); | |
| 507 fieldsetElement.appendChild(resolutionButton.element); | |
| 508 var resolutionFieldset = WebInspector.SettingsUI.createSettingFieldset(W
ebInspector.overridesSupport.settings.emulateResolution); | |
| 509 fieldsetElement.appendChild(resolutionFieldset); | |
| 510 | |
| 511 resolutionFieldset.appendChild(WebInspector.SettingsUI.createSettingInpu
tField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", W
ebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UIStr
ing("\u2013"))); | |
| 512 resolutionFieldset.appendChild(document.createTextNode(" \u00D7 ")); | |
| 513 resolutionFieldset.appendChild(WebInspector.SettingsUI.createSettingInpu
tField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em",
WebInspector.OverridesSupport.deviceSizeValidator, true, true, WebInspector.UISt
ring("\u2013"))); | |
| 514 | |
| 515 var swapButton = new WebInspector.StatusBarButton(WebInspector.UIString(
"Swap dimensions"), "responsive-design-icon responsive-design-icon-swap"); | |
| 516 swapButton.element.tabIndex = -1; | |
| 517 swapButton.addEventListener("click", WebInspector.overridesSupport.swapD
imensions, WebInspector.overridesSupport); | |
| 518 resolutionFieldset.appendChild(swapButton.element); | |
| 519 | |
| 520 // Device pixel ratio. | |
| 521 detailsElement.createChild("div", "responsive-design-suite-separator"); | |
| 522 | |
| 523 var dprElement = detailsElement.createChild("div", ""); | |
| 524 var resolutionFieldset2 = WebInspector.SettingsUI.createSettingFieldset(
WebInspector.overridesSupport.settings.emulateResolution); | |
| 525 dprElement.appendChild(resolutionFieldset2); | |
| 526 var dprButton = new WebInspector.StatusBarButton(WebInspector.UIString("
Device pixel ratio"), "responsive-design-icon responsive-design-icon-dpr"); | |
| 527 dprButton.setEnabled(false); | |
| 528 resolutionFieldset2.appendChild(dprButton.element); | |
| 529 resolutionFieldset2.appendChild(WebInspector.SettingsUI.createSettingInp
utField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 4, "
2.5em", WebInspector.OverridesSupport.deviceScaleFactorValidator, true, true, We
bInspector.UIString("\u2013"))); | |
| 530 | |
| 531 // Fit to window. | |
| 532 detailsElement.createChild("div", "responsive-design-suite-separator"); | |
| 533 var fitToWindowElement = detailsElement.createChild("div", ""); | |
| 534 fieldsetElement = fitToWindowElement.createChild("fieldset"); | |
| 535 fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbo
x(WebInspector.UIString("Fit"), WebInspector.overridesSupport.settings.deviceFit
Window, true, undefined, WebInspector.UIString("Zoom to fit available space"))); | |
| 536 }, | |
| 537 | |
| 538 _createNetworkSection: function() | |
| 539 { | |
| 540 var networkSection = this._toolbarElement.createChild("div", "responsive
-design-section responsive-design-section-network"); | |
| 541 | |
| 542 // Bandwidth. | |
| 543 var bandwidthElement = networkSection.createChild("div", "responsive-des
ign-suite responsive-design-suite-top").createChild("div"); | |
| 544 var fieldsetElement = bandwidthElement.createChild("fieldset"); | |
| 545 var networkCheckbox = fieldsetElement.createChild("label"); | |
| 546 networkCheckbox.textContent = WebInspector.UIString("Network"); | |
| 547 fieldsetElement.appendChild(WebInspector.overridesSupport.createNetworkC
onditionsSelect(document)); | |
| 548 | |
| 549 var separator = networkSection.createChild("div", "responsive-design-sec
tion-separator"); | |
| 550 | |
| 551 // User agent. | |
| 552 var userAgentElement = networkSection.createChild("div", "responsive-des
ign-suite").createChild("div"); | |
| 553 fieldsetElement = userAgentElement.createChild("fieldset"); | |
| 554 fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputFi
eld("UA", WebInspector.overridesSupport.settings.userAgent, false, 0, "", undefi
ned, false, false, WebInspector.UIString("No override"))); | |
| 555 }, | |
| 556 | |
| 557 _onToggleMediaInspectorButtonClick: function() | |
| 558 { | |
| 559 WebInspector.settings.showMediaQueryInspector.set(!this._toggleMediaInsp
ectorButton.toggled); | |
| 560 }, | |
| 561 | |
| 562 _updateMediaQueryInspector: function() | |
| 563 { | |
| 564 this._toggleMediaInspectorButton.toggled = WebInspector.settings.showMed
iaQueryInspector.get(); | |
| 565 if (this._mediaInspector.isShowing() === WebInspector.settings.showMedia
QueryInspector.get()) | |
| 566 return; | |
| 567 if (this._mediaInspector.isShowing()) | |
| 568 this._mediaInspector.detach(); | |
| 569 else | |
| 570 this._mediaInspector.show(this._mediaInspectorContainer); | |
| 571 this.onResize(); | |
| 572 }, | |
| 573 | |
| 574 _overridesWarningUpdated: function() | |
| 575 { | |
| 576 var message = WebInspector.overridesSupport.warningMessage(); | |
| 577 if (this._warningMessage.querySelector("span").textContent === message) | |
| 578 return; | |
| 579 this._warningMessage.classList.toggle("hidden", !message); | |
| 580 this._warningMessage.querySelector("span").textContent = message; | |
| 581 this._invalidateCache(); | |
| 582 this.onResize(); | |
| 583 }, | |
| 584 | |
| 585 _showEmulationInDrawer: function() | |
| 586 { | |
| 587 WebInspector.overridesSupport.reveal(); | |
| 588 }, | |
| 589 | |
| 590 /** | |
| 591 * @param {!WebInspector.Event} event | |
| 592 */ | |
| 593 _viewportChanged: function(event) | |
| 594 { | |
| 595 var viewport = /** @type {?PageAgent.Viewport} */ (event.data); | |
| 596 if (viewport) { | |
| 597 this._viewport = viewport; | |
| 598 this._viewportChangedThrottler.schedule(this._updateUIThrottled.bind
(this)); | |
| 599 } | |
| 600 }, | |
| 601 | |
| 602 /** | |
| 603 * @param {!WebInspector.Throttler.FinishCallback} finishCallback | |
| 604 */ | |
| 605 _updateUIThrottled: function(finishCallback) | |
| 606 { | |
| 607 this._updateUI(); | |
| 608 finishCallback(); | |
| 609 }, | |
| 610 | |
| 611 __proto__: WebInspector.VBox.prototype | |
| 612 }; | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 366633002:
DevTools: Move jsdifflib to "sources", extract "toolbox" module (Closed)
Base URL: svn://svn.chromium.org/blink/trunk