Skip to content

GitLab

T
tangled
Commit c05ff885 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org
Browse files
Options

DevTools: brush up responsive design toolbar css. 

Review URL: https://codereview.chromium.org/307973002

git-svn-id: svn://svn.chromium.org/blink/trunk@175083 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent dc415f8e
Hide whitespace changes
Inline Side-by-side
Showing with 29 additions and 34 deletions
third_party/WebKit/Source/devtools/front_end/ResponsiveDesignView.js
View file @ c05ff885
......@@ -14,7 +14,11 @@ WebInspector.ResponsiveDesignView = function(inspectedPagePlaceholder)
this.registerRequiredCSS("responsiveDesignView.css");
this._responsiveDesignContainer = new WebInspector.VBox();
this._createToolbar();
this._warningMessage = this._responsiveDesignContainer.element.createChild("div", "responsive-design-warning hidden");
WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
this._canvasContainer = new WebInspector.View();
this._canvasContainer.element.classList.add("responsive-design");
this._canvasContainer.show(this._responsiveDesignContainer.element);
......@@ -390,8 +394,8 @@ WebInspector.ResponsiveDesignView.prototype = {
this._toolbarElement = this._responsiveDesignContainer.element.createChild("div", "responsive-design-toolbar");
// Device
var fieldsetElement = this._toolbarElement.createChild("fieldset");
var deviceLabel = fieldsetElement.createChild("label");
var sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
var deviceLabel = sectionElement.createChild("label");
var deviceCheckbox = deviceLabel.createChild("input");
deviceCheckbox.type = "checkbox";
deviceLabel.createTextChild(WebInspector.UIString("Device"));
......@@ -409,7 +413,7 @@ WebInspector.ResponsiveDesignView.prototype = {
}
var deviceSelect = WebInspector.overridesSupport.createDeviceSelect(document);
fieldsetElement.appendChild(deviceSelect);
sectionElement.appendChild(deviceSelect);
deviceSelect.addEventListener("change", emulateDevice, false);
function emulateDevice()
......@@ -419,9 +423,11 @@ WebInspector.ResponsiveDesignView.prototype = {
}
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() &&
......@@ -430,11 +436,11 @@ WebInspector.ResponsiveDesignView.prototype = {
}
// Screen
fieldsetElement = this._toolbarElement.createChild("fieldset", "responsive-design-section");
fieldsetElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
sectionElement = this._toolbarElement.createChild("div", "responsive-design-section");
sectionElement.appendChild(WebInspector.SettingsUI.createSettingCheckbox("Screen", WebInspector.overridesSupport.settings.overrideDeviceResolution, true));
fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
this._toolbarElement.appendChild(fieldsetElement);
var fieldsetElement = WebInspector.SettingsUI.createSettingFieldset(WebInspector.overridesSupport.settings.overrideDeviceResolution);
sectionElement.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));
......@@ -449,13 +455,9 @@ WebInspector.ResponsiveDesignView.prototype = {
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));
// Warning
this._warningMessage = this._responsiveDesignContainer.element.createChild("div", "responsive-design-warning hidden");
WebInspector.overridesSupport.addEventListener(WebInspector.OverridesSupport.Events.OverridesWarningUpdated, this._overridesWarningUpdated, this);
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));
},
_overridesWarningUpdated: function()
......
third_party/WebKit/Source/devtools/front_end/responsiveDesignView.css
View file @ c05ff885
......@@ -77,13 +77,9 @@
}
.responsive-design-toolbar {
flex: 0 0 24px;
flex: none;
background-color: rgb(64, 64, 64);
color: rgb(180, 180, 180);
display: flex;
align-items: center;
border-bottom: 1px solid rgb(163, 163, 163);
white-space: nowrap;
}
.responsive-design-toolbar fieldset,
......@@ -94,27 +90,20 @@
display: inline-block;
}
.responsive-design-toolbar fieldset {
padding: 0 7px 0 0;
height: 23px;
}
.responsive-design-toolbar .responsive-design-section {
border-left: 1px solid rgb(163, 163, 163);
}
.responsive-design-toolbar fieldset:first-child {
border-right: none;
display: inline-flex;
height: 24px;
border: 1px solid rgb(163, 163, 163);
border-left: none;
margin-top: -1px;
white-space: nowrap;
align-items: center;
padding-right: 3px;
}
.responsive-design-toolbar .field-error-message {
display: none;
}
.responsive-design-toolbar fieldset > label {
display: inline-flex;
height: 22px;
align-items: center;
}
.responsive-design-toolbar input[type='text'] {
color: rgb(255, 156, 0);
......@@ -136,6 +125,8 @@
border: 1px solid rgb(45, 45, 45);
border-radius: 3px;
background-color: rgb(102, 102, 102);
position: relative;
top: 1px;
}
.responsive-design-toolbar input[type='checkbox']:after {
......@@ -164,6 +155,8 @@
border: 0;
margin-left: 10px;
line-height: 16px;
position: relative;
top: 1px;
}
.responsive-design-toolbar input:focus {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment