Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1139)

Unified Diff: Source/devtools/front_end/ResponsiveDesignView.js

Issue 302943002: DevTools: add device selector and touch checkbox into the responsive toolbar. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Rebaselined Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
Index: Source/devtools/front_end/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/ResponsiveDesignView.js b/Source/devtools/front_end/ResponsiveDesignView.js
index a9f8b17c92c6ce6d3053e8e2b8535fb41c4342be..f6f483649d37236fcd53ce5ba01594e83291f106 100644
--- a/Source/devtools/front_end/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/ResponsiveDesignView.js
@@ -213,7 +213,7 @@ WebInspector.ResponsiveDesignView.prototype = {
const backgroundColor = "rgb(102, 102, 102)";
const lightLineColor = "rgb(132, 132, 132)";
const darkLineColor = "rgb(114, 114, 114)";
- const textColor = "rgb(220, 220, 220)";
+ const textColor = "rgb(180, 180, 180)";
var scale = this._scale || 1;
var rulerWidth = WebInspector.ResponsiveDesignView.RulerWidth;
@@ -373,24 +373,70 @@ WebInspector.ResponsiveDesignView.prototype = {
{
this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
- this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Resolution"), WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
+ // Device
+ var fieldsetElement = this._toolbarElement.createChild("fieldset");
+ var deviceLabel = fieldsetElement.createChild("label");
+ var deviceCheckbox = deviceLabel.createChild("input");
+ deviceCheckbox.type = "checkbox";
+ deviceLabel.createTextChild(WebInspector.UIString("Device"));
+ deviceLabel.title = WebInspector.UIString("Emulate device");
+ deviceCheckbox.addEventListener("change", deviceChecked, false);
- var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
+ function deviceChecked()
+ {
+ if (deviceCheckbox.checked) {
+ var option = deviceSelect.options[deviceSelect.selectedIndex];
+ WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
+ } else {
+ WebInspector.overridesSupport.resetEmulatedDevice();
+ }
+ }
+
+ var deviceSelect = WebInspector.overridesSupport.createDeviceSelect(document);
+ fieldsetElement.appendChild(deviceSelect);
+ deviceSelect.addEventListener("change", emulateDevice, false);
+
+ function emulateDevice()
+ {
+ var option = deviceSelect.options[deviceSelect.selectedIndex];
+ WebInspector.overridesSupport.emulateDevice(option.metrics, option.userAgent);
+ }
+
+ updateDeviceCheckboxStatus();
+ WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(updateDeviceCheckboxStatus);
+ WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(updateDeviceCheckboxStatus);
+ WebInspector.overridesSupport.settings.overrideDeviceResolution.addChangeListener(updateDeviceCheckboxStatus);
+ function updateDeviceCheckboxStatus()
+ {
+ deviceCheckbox.checked = WebInspector.overridesSupport.settings.emulateViewport.get() &&
+ WebInspector.overridesSupport.settings.emulateTouchEvents.get() &&
+ WebInspector.overridesSupport.settings.overrideDeviceResolution.get();
+ }
+
+ // Screen
+ fieldsetElement = this._toolbarElement.createChild("fieldset", "responsive-design-section");
+ fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
+
+ fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
this._toolbarElement.appendChild(fieldsetElement);
+ fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-resolution").title = WebInspector.UIString("Screen resolution");
fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceWidth, true, 4, "3em", WebInspector.OverridesSupport.inputValidator, true));
fieldsetElement.appendChild(document.createTextNode(" \u00D7 "));
fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceHeight, true, 4, "3em", WebInspector.OverridesSupport.inputValidator, true));
- this._swapDimensionsElement = fieldsetElement.createChild("button", "responsive-design-override-swap");
- this._swapDimensionsElement.appendChild(document.createTextNode(" \u21C4 ")); // RIGHTWARDS ARROW OVER LEFTWARDS ARROW.
+ this._swapDimensionsElement = fieldsetElement.createChild("button", "responsive-design-icon responsive-design-icon-swap");
this._swapDimensionsElement.title = WebInspector.UIString("Swap dimensions");
this._swapDimensionsElement.addEventListener("click", WebInspector.overridesSupport.swapDimensions.bind(WebInspector.overridesSupport), false);
- this._swapDimensionsElement.tabIndex = -1;
- fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField(WebInspector.UIString("Dpr"), WebInspector.overridesSupport.settings.deviceScaleFactor, true, 2, "2em", WebInspector.OverridesSupport.inputValidator, true));
- this._toolbarElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
- },
+ fieldsetElement.createChild("div", "responsive-design-icon responsive-design-icon-dpr").title = WebInspector.UIString("Device pixel ratio");
+ fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 2, "2em", WebInspector.OverridesSupport.inputValidator, true));
+
+ // Touch and viewport
+ fieldsetElement = this._toolbarElement.createChild("fieldset", "responsive-design-section");
+ fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
+ fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
+},
__proto__: WebInspector.VBox.prototype
};
« no previous file with comments | « Source/devtools/front_end/Images/src/responsiveDesign.svg ('k') | Source/devtools/front_end/elements/OverridesView.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698