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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 317153002: [DevTools] Move user agent override to responsive design toolbar. (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Optimized pngs Created 6 years, 6 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
« no previous file with comments | « Source/devtools/front_end/Images/src/svg2png.hashes ('k') | Source/devtools/front_end/common/Settings.js » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: Source/devtools/front_end/ResponsiveDesignView.js
diff --git a/Source/devtools/front_end/ResponsiveDesignView.js b/Source/devtools/front_end/ResponsiveDesignView.js
index b05e8c36f9604d10bd18f47b024f169930c7ee21..ba6d29acb081b1a999280d942ddb54b3bfe6193a 100644
--- a/Source/devtools/front_end/ResponsiveDesignView.js
+++ b/Source/devtools/front_end/ResponsiveDesignView.js
@@ -12,6 +12,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
{
WebInspector.VBox.call(this);
this.registerRequiredCSS("responsiveDesignView.css");
+ this.element.classList.add("overflow-hidden");
this._responsiveDesignContainer = new WebInspector.VBox();
@@ -46,7 +47,7 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
WebInspector.zoomManager.addEventListener(WebInspector.ZoomManager.Events.ZoomChanged, this._onZoomChanged, this);
WebInspector.dockController.addEventListener(WebInspector.DockController.Events.DockSideChanged, this._updateOverridesSupportOnDockSideChange, this);
- WebInspector.settings.responsiveDesignMode.addChangeListener(this._responsiveDesignModeChanged, this);
+ WebInspector.settings.responsiveDesign.enabled.addChangeListener(this._responsiveDesignEnabledChanged, this);
WebInspector.overridesSupport.settings.emulateViewport.addChangeListener(this._maybeEnableResponsiveDesign, this);
WebInspector.overridesSupport.settings.emulateTouchEvents.addChangeListener(this._maybeEnableResponsiveDesign, this);
@@ -58,7 +59,6 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
// Measured in DIP.
WebInspector.ResponsiveDesignView.SliderWidth = 19;
WebInspector.ResponsiveDesignView.RulerWidth = 20;
-WebInspector.ResponsiveDesignView.ToolbarHeight = 23;
WebInspector.ResponsiveDesignView.prototype = {
_maybeEnableResponsiveDesign: function()
@@ -68,11 +68,11 @@ WebInspector.ResponsiveDesignView.prototype = {
if (WebInspector.overridesSupport.settings.emulateViewport.get() ||
WebInspector.overridesSupport.settings.emulateTouchEvents.get() ||
WebInspector.overridesSupport.settings.overrideDeviceResolution.get()) {
- WebInspector.settings.responsiveDesignMode.set(true);
+ WebInspector.settings.responsiveDesign.enabled.set(true);
}
},
- _responsiveDesignModeChanged: function()
+ _responsiveDesignEnabledChanged: function()
{
delete this._cachedScale;
delete this._cachedCssCanvasWidth;
@@ -82,7 +82,7 @@ WebInspector.ResponsiveDesignView.prototype = {
delete this._cachedZoomFactor;
delete this._availableSize;
- var enabled = WebInspector.settings.responsiveDesignMode.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
+ var enabled = WebInspector.settings.responsiveDesign.enabled.get() && WebInspector.dockController.dockSide() !== WebInspector.DockController.State.Undocked;
if (enabled && !this._enabled) {
this._ignoreResize = true;
this._enabled = true;
@@ -107,7 +107,7 @@ WebInspector.ResponsiveDesignView.prototype = {
_updateOverridesSupportOnDockSideChange: function()
{
- this._responsiveDesignModeChanged();
+ this._responsiveDesignEnabledChanged();
},
/**
@@ -137,9 +137,9 @@ WebInspector.ResponsiveDesignView.prototype = {
{
if (typeof this._availableSize === "undefined") {
var zoomFactor = WebInspector.zoomManager.zoomFactor();
- var rect = this.element.getBoundingClientRect();
+ var rect = this._canvasContainer.element.getBoundingClientRect();
this._availableSize = new Size(rect.width * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth,
- rect.height * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth - WebInspector.ResponsiveDesignView.ToolbarHeight);
+ rect.height * zoomFactor - WebInspector.ResponsiveDesignView.RulerWidth);
}
return this._availableSize;
},
@@ -386,11 +386,23 @@ WebInspector.ResponsiveDesignView.prototype = {
_createToolbar: function()
{
- this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
+ var toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
+ this._toolbarSection = toolbarElement.createChild("div", "responsive-design-composite-section hbox");
+
+ this._expandedDeviceSection = document.createElementWithClass("div", "responsive-design-composite-section vbox");
+ this._expandedScreenTouchSection = document.createElementWithClass("div", "responsive-design-composite-section hbox");
+
+ this._expandSection = document.createElementWithClass("div", "responsive-design-section vbox");
+ WebInspector.settings.responsiveDesign.toolbarExpanded = WebInspector.settings.createSetting("responsiveDesign.toolbarExpanded", false);
+ this._expandButton = this._expandSection.createChild("div", "responsive-design-expand");
+ this._expandButton.createChild("div", "responsive-design-icon responsive-design-icon-expand");
+ this._expandButton.createChild("span");
+ this._expandButton.addEventListener("click", this._toggleToolbarExpanded.bind(this));
+ WebInspector.settings.responsiveDesign.toolbarExpanded.addChangeListener(this._toolbarExpandedChanged, this);
// Device
- var sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
- var deviceLabel = sectionElement.createChild("label");
+ this._deviceSection = document.createElementWithClass("div", "responsive-design-section");
+ var deviceLabel = this._deviceSection.createChild("label");
var deviceCheckbox = deviceLabel.createChild("input");
deviceCheckbox.type = "checkbox";
deviceLabel.createTextChild(WebInspector.UIString("Device"));
@@ -408,7 +420,7 @@ WebInspector.ResponsiveDesignView.prototype = {
}
var deviceSelect = WebInspector.overridesSupport.createDeviceSelect(document);
- sectionElement.appendChild(deviceSelect);
+ this._deviceSection.appendChild(deviceSelect);
deviceSelect.addEventListener("change", emulateDevice, false);
function emulateDevice()
@@ -431,11 +443,11 @@ WebInspector.ResponsiveDesignView.prototype = {
}
// Screen
- sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
- sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
+ this._screenSection = document.createElementWithClass("div", "responsive-design-section");
+ this._screenSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
- sectionElement.appendChild(fieldsetElement);
+ this._screenSection.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));
@@ -450,9 +462,54 @@ WebInspector.ResponsiveDesignView.prototype = {
fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingInputField("", WebInspector.overridesSupport.settings.deviceScaleFactor, true, 2, "2em", WebInspector.OverridesSupport.inputValidator, true));
// Touch and viewport
- sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
- sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
- sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
+ this._touchSection = document.createElementWithClass("div", "responsive-design-section");
+ this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Touch"), WebInspector.overridesSupport.settings.emulateTouchEvents, true));
+ this._touchSection.appendChild(WebInspector.SettingsUI.createSettingCheckbox(WebInspector.UIString("Viewport"), WebInspector.overridesSupport.settings.emulateViewport, true));
+
+ // User agent.
+ this._userAgentSection = document.createElementWithClass("div", "responsive-design-composite-section vbox solid");
+ var userAgentRow = this._userAgentSection.createChild("div", "responsive-design-composite-section hbox solid");
+ userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(WebInspector.SettingsUI.createSettingCheckbox("User Agent", WebInspector.overridesSupport.settings.overrideUserAgent, true));
+ var userAgentSelectAndInput = WebInspector.overridesSupport.createUserAgentSelectAndInput(document);
+ userAgentRow.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.select);
+ this._userAgentSection.createChild("div", "responsive-design-section hbox").appendChild(userAgentSelectAndInput.input);
+
+ this._toolbarExpandedChanged();
+ },
+
+ _toggleToolbarExpanded: function()
+ {
+ WebInspector.settings.responsiveDesign.toolbarExpanded.set(!WebInspector.settings.responsiveDesign.toolbarExpanded.get());
+ },
+
+ _toolbarExpandedChanged: function()
+ {
+ var expanded = WebInspector.settings.responsiveDesign.toolbarExpanded.get();
+ this._expandButton.classList.toggle("expanded", expanded);
+ this._expandButton.querySelector("span").textContent = WebInspector.UIString(expanded ? "Collapse" : "Expand");
+
+ if (expanded) {
+ this._expandedScreenTouchSection.textContent = "";
+ this._expandedScreenTouchSection.appendChild(this._screenSection);
+ this._expandedScreenTouchSection.appendChild(this._touchSection);
+
+ this._expandedDeviceSection.textContent = "";
+ this._expandedDeviceSection.appendChild(this._deviceSection);
+ this._expandedDeviceSection.appendChild(this._expandedScreenTouchSection);
+
+ this._toolbarSection.textContent = "";
+ this._toolbarSection.appendChild(this._expandSection);
+ this._toolbarSection.appendChild(this._expandedDeviceSection);
+ this._toolbarSection.appendChild(this._userAgentSection);
+ } else {
+ this._toolbarSection.textContent = "";
aandrey 2014/06/05 14:44:38 we can add Element.prototype.appendChildren() in D
dgozman 2014/06/06 11:31:11 Nice idea. Done.
+ this._toolbarSection.appendChild(this._expandSection);
+ this._toolbarSection.appendChild(this._deviceSection);
+ this._toolbarSection.appendChild(this._screenSection);
+ this._toolbarSection.appendChild(this._touchSection);
+ }
+
+ this.onResize();
},
_overridesWarningUpdated: function()
@@ -462,7 +519,7 @@ WebInspector.ResponsiveDesignView.prototype = {
return;
this._warningMessage.classList.toggle("hidden", !message);
this._warningMessage.textContent = message;
- this._responsiveDesignModeChanged();
+ this._responsiveDesignEnabledChanged();
this.onResize();
},
« no previous file with comments | « Source/devtools/front_end/Images/src/svg2png.hashes ('k') | Source/devtools/front_end/common/Settings.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698