| 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 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder | 9 * @param {!WebInspector.InspectedPagePlaceholder} inspectedPagePlaceholder |
| 10 */ | 10 */ |
| (...skipping 339 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 350 | 350 |
| 351 _onZoomChanged: function() | 351 _onZoomChanged: function() |
| 352 { | 352 { |
| 353 this._updateUI(); | 353 this._updateUI(); |
| 354 }, | 354 }, |
| 355 | 355 |
| 356 _createToolbar: function() | 356 _createToolbar: function() |
| 357 { | 357 { |
| 358 this._toolbarElement = this._responsiveDesignContainer.element.createChi
ld("div", "responsive-design-toolbar"); | 358 this._toolbarElement = this._responsiveDesignContainer.element.createChi
ld("div", "responsive-design-toolbar"); |
| 359 | 359 |
| 360 const metricsSetting = WebInspector.overridesSupport.settings.deviceMetr
ics.get(); | 360 this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingCh
eckbox(WebInspector.UIString("Resolution"), WebInspector.overridesSupport.settin
gs.overrideDeviceResolution, true)); |
| 361 var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(m
etricsSetting); | 361 this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingIn
putField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em")
.lastChild); |
| 362 this._toolbarElement.appendChild(document.createTextNode(" \u00D7 ")); |
| 363 this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingIn
putField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em"
).lastChild); |
| 362 | 364 |
| 363 /** | |
| 364 * @this {WebInspector.ResponsiveDesignView} | |
| 365 */ | |
| 366 function swapDimensionsClicked() | |
| 367 { | |
| 368 var widthValue = this._widthOverrideElement.value; | |
| 369 this._widthOverrideElement.value = this._heightOverrideElement.value
; | |
| 370 this._heightOverrideElement.value = widthValue; | |
| 371 this._applyDeviceMetricsUserInput(); | |
| 372 } | |
| 373 | |
| 374 this._toolbarElement.appendChild(document.createTextNode("Screen")).titl
e = WebInspector.UIString("Screen resolution"); | |
| 375 this._widthOverrideElement = WebInspector.SettingsUI.createInput(this._t
oolbarElement, "responsive-design-override-width", String(metrics.width), this._
applyDeviceMetricsUserInput.bind(this), true, "3em"); | |
| 376 this._toolbarElement.appendChild(document.createTextNode(" \u00D7 ")); | |
| 377 this._heightOverrideElement = WebInspector.SettingsUI.createInput(this._
toolbarElement, "responsive-design-override-height", String(metrics.height), thi
s._applyDeviceMetricsUserInput.bind(this), true, "3em"); | |
| 378 this._swapDimensionsElement = this._toolbarElement.createChild("button",
"responsive-design-override-swap"); | 365 this._swapDimensionsElement = this._toolbarElement.createChild("button",
"responsive-design-override-swap"); |
| 379 this._swapDimensionsElement.appendChild(document.createTextNode(" \u21C4
")); // RIGHTWARDS ARROW OVER LEFTWARDS ARROW. | 366 this._swapDimensionsElement.appendChild(document.createTextNode(" \u21C4
")); // RIGHTWARDS ARROW OVER LEFTWARDS ARROW. |
| 380 this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensio
ns"); | 367 this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensio
ns"); |
| 381 this._swapDimensionsElement.addEventListener("click", swapDimensionsClic
ked.bind(this), false); | 368 this._swapDimensionsElement.addEventListener("click", WebInspector.overr
idesSupport.swapDimensions.bind(WebInspector.overridesSupport), false); |
| 382 this._swapDimensionsElement.tabIndex = -1; | 369 this._swapDimensionsElement.tabIndex = -1; |
| 383 | 370 |
| 384 var span = this._toolbarElement.createChild("span"); | 371 this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingCh
eckbox(WebInspector.UIString("Dpr"), WebInspector.overridesSupport.settings.devi
ceScaleFactor, true)); |
| 385 span.textContent = WebInspector.UIString("Dpr"); | 372 this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingCh
eckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings
.emulateViewport, true)); |
| 386 span.title = WebInspector.UIString("Device pixel ratio"); | |
| 387 this._deviceScaleFactorOverrideElement = WebInspector.SettingsUI.createI
nput(this._toolbarElement, "responsive-design-device-scale", String(metrics.devi
ceScaleFactor), this._applyDeviceMetricsUserInput.bind(this), true, "2em"); | |
| 388 | |
| 389 var textAutosizingOverrideElement = WebInspector.SettingsUI.createNonPer
sistedCheckbox(WebInspector.UIString("Enable text autosizing "), this._applyDevi
ceMetricsUserInput.bind(this)); | |
| 390 textAutosizingOverrideElement.title = WebInspector.UIString("Text autosi
zing is the feature that boosts font sizes on mobile devices."); | |
| 391 this._textAutosizingOverrideCheckbox = textAutosizingOverrideElement.fir
stChild; | |
| 392 this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizing; | |
| 393 | |
| 394 var checkbox = WebInspector.SettingsUI.createSettingCheckbox(WebInspecto
r.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport,
true); | |
| 395 this._toolbarElement.appendChild(checkbox); | |
| 396 | |
| 397 WebInspector.overridesSupport.settings.deviceMetrics.addChangeListener(t
his._updateDeviceMetricsElement, this); | |
| 398 }, | |
| 399 | |
| 400 _updateDeviceMetricsElement: function() | |
| 401 { | |
| 402 const metricsSetting = WebInspector.overridesSupport.settings.deviceMetr
ics.get(); | |
| 403 var metrics = WebInspector.OverridesSupport.DeviceMetrics.parseSetting(m
etricsSetting); | |
| 404 | |
| 405 if (this._widthOverrideElement.value != metrics.width) | |
| 406 this._widthOverrideElement.value = metrics.width; | |
| 407 if (this._heightOverrideElement.value != metrics.height) | |
| 408 this._heightOverrideElement.value = metrics.height; | |
| 409 if (this._deviceScaleFactorOverrideElement.value != metrics.deviceScaleF
actor) | |
| 410 this._deviceScaleFactorOverrideElement.value = metrics.deviceScaleFa
ctor; | |
| 411 if (this._textAutosizingOverrideCheckbox.checked !== metrics.textAutosiz
ing) | |
| 412 this._textAutosizingOverrideCheckbox.checked = metrics.textAutosizin
g; | |
| 413 }, | |
| 414 | |
| 415 _applyDeviceMetricsUserInput: function() | |
| 416 { | |
| 417 WebInspector.OverridesSupport.DeviceMetrics.applyOverrides(this._widthOv
errideElement, this._heightOverrideElement, this._deviceScaleFactorOverrideEleme
nt, this._textAutosizingOverrideCheckbox); | |
| 418 }, | 373 }, |
| 419 | 374 |
| 420 __proto__: WebInspector.VBox.prototype | 375 __proto__: WebInspector.VBox.prototype |
| 421 }; | 376 }; |
| OLD | NEW |