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 |