- Revision
- 188629
- Author
- drou...@apple.com
- Date
- 2015-08-18 21:54:10 -0700 (Tue, 18 Aug 2015)
Log Message
Web Inspector: Add support for positioning Visual editors on non-retina displays
https://bugs.webkit.org/show_bug.cgi?id=148160
Reviewed by Timothy Hatcher.
Cleans up the positioning, dimensions, and widths of the
Visual editors on non-retina displays.
* UserInterface/Views/VisualStyleColorPicker.css:
(.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input):
* UserInterface/Views/VisualStyleDetailsPanel.css:
(.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row):
(@media (-webkit-min-device-pixel-ratio: 2)):
* UserInterface/Views/VisualStyleDetailsPanel.js:
(WebInspector.VisualStyleDetailsPanel.prototype._clearModifiedSection):
* UserInterface/Views/VisualStylePropertyEditorLink.css:
(.visual-style-property-editor-link):
(.visual-style-property-editor-link > .visual-style-property-editor-link-border.left):
(.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left):
(.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border):
(.visual-style-property-editor-link > .visual-style-property-editor-link-icon):
(.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon):
(@media (-webkit-min-device-pixel-ratio: 2)):
(.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left):
(.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right): Deleted.
(.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right): Deleted.
(.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon): Deleted.
* UserInterface/Views/VisualStyleSelectorTreeItem.css:
(.item.visual-style-selector-item > input[type="checkbox"]):
(.item.visual-style-selector-item > .icon):
(.item.visual-style-selector-item.selector-invalid > .titles > .title::before):
(@media (-webkit-min-device-pixel-ratio: 2)):
(.item.visual-style-selector-item > .titles):
(.item.visual-style-selector-item.selector-invalid > .icon): Deleted.
* UserInterface/Views/VisualStyleTimingEditor.css:
(.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor):
(@media (-webkit-min-device-pixel-ratio: 2)):
Modified Paths
Diff
Modified: trunk/Source/WebInspectorUI/ChangeLog (188628 => 188629)
--- trunk/Source/WebInspectorUI/ChangeLog 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-08-19 04:54:10 UTC (rev 188629)
@@ -1,5 +1,52 @@
2015-08-18 Devin Rousso <drou...@apple.com>
+ Web Inspector: Add support for positioning Visual editors on non-retina displays
+ https://bugs.webkit.org/show_bug.cgi?id=148160
+
+ Reviewed by Timothy Hatcher.
+
+ Cleans up the positioning, dimensions, and widths of the
+ Visual editors on non-retina displays.
+
+ * UserInterface/Views/VisualStyleColorPicker.css:
+ (.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input):
+
+ * UserInterface/Views/VisualStyleDetailsPanel.css:
+ (.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+
+ * UserInterface/Views/VisualStyleDetailsPanel.js:
+ (WebInspector.VisualStyleDetailsPanel.prototype._clearModifiedSection):
+
+ * UserInterface/Views/VisualStylePropertyEditorLink.css:
+ (.visual-style-property-editor-link):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border):
+ (.visual-style-property-editor-link > .visual-style-property-editor-link-icon):
+ (.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left):
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right): Deleted.
+ (.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right): Deleted.
+ (.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon): Deleted.
+
+ * UserInterface/Views/VisualStyleSelectorTreeItem.css:
+ (.item.visual-style-selector-item > input[type="checkbox"]):
+ (.item.visual-style-selector-item > .icon):
+ (.item.visual-style-selector-item.selector-invalid > .titles > .title::before):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+ (.item.visual-style-selector-item > .titles):
+ (.item.visual-style-selector-item.selector-invalid > .icon): Deleted.
+
+ * UserInterface/Views/VisualStyleTimingEditor.css:
+ (.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor):
+ (@media (-webkit-min-device-pixel-ratio: 2)):
+
+
+
+2015-08-18 Devin Rousso <drou...@apple.com>
+
Web Inspector: Show the computed value in an overlay for numerical Visual Editors
https://bugs.webkit.org/show_bug.cgi?id=148161
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css (188628 => 188629)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css 2015-08-19 04:54:10 UTC (rev 188629)
@@ -67,7 +67,7 @@
}
.visual-style-property-container.input-color-picker > .visual-style-property-value-container > input {
- margin: 1px 1.5px 3px -3px;
+ margin: 1px 0 3px -3px;
padding: 0 3px 0 5px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css (188628 => 188629)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css 2015-08-19 04:54:10 UTC (rev 188629)
@@ -69,11 +69,17 @@
}
.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row {
- border-bottom: 0.5px solid hsl(0, 0%, 83%);
+ border-bottom: 1px solid hsl(0, 0%, 83%);
margin-bottom: 5px;
padding-bottom: 2px;
}
+@media (-webkit-min-device-pixel-ratio: 2) {
+ .sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row.visual-style-separated-row {
+ border-bottom-width: 0.5px !important;
+ }
+}
+
.sidebar > .panel.details.css-style .visual > .details-section .details-section > .content .group > .row > .visual-style-property-container > .visual-style-property-title {
width: 55px;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js (188628 => 188629)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js 2015-08-19 04:54:10 UTC (rev 188629)
@@ -248,6 +248,7 @@
}
this._currentStyle.text = newStyleText;
+ group.section.element.classList.toggle("has-set-property", this._groupHasSetProperty(group));
}
get _initialTextList()
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css (188628 => 188629)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css 2015-08-19 04:54:10 UTC (rev 188629)
@@ -24,6 +24,8 @@
*/
.visual-style-property-editor-link {
+ display: flex;
+ align-items: center;
position: relative;
min-width: 32px;
margin-left: 1px;
@@ -57,31 +59,26 @@
border-top: 1px dashed hsl(0, 0%, 50%);
}
-.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left,
-.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right {
- width: 49px;
-}
-
-.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
- width: 52px;
-}
-
-.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.right {
- width: 51px;
-}
-
.visual-style-property-editor-link.linked > .visual-style-property-editor-link-border {
border-top: 1px solid black;
}
.visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
- left: 1px;
+ left: 0;
}
.visual-style-property-editor-link > .visual-style-property-editor-link-border.right {
right: 1px;
}
+.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left {
+ left: 1px;
+}
+
+.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border {
+ width: 51px;
+}
+
.visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
left: 0;
}
@@ -100,8 +97,8 @@
}
.visual-style-property-editor-link > .visual-style-property-editor-link-icon {
- width: 10px;
- height: 10px;
+ width: 9px;
+ height: 12px;
}
.visual-style-property-editor-link > .visual-style-property-editor-link-icon > .unlinked-icon {
@@ -119,9 +116,24 @@
}
.visual-style-property-editor-link:not(.link-all) > .visual-style-property-editor-link-icon {
- margin: 5px 0 0 11px;
+ margin-left: 11px;
}
-.visual-style-property-editor-link.link-all > .visual-style-property-editor-link-icon {
- margin-top: 1px;
+@media (-webkit-min-device-pixel-ratio: 2) {
+ .visual-style-property-editor-link.link-all > .visual-style-property-editor-link-border.left,
+ .visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-icon:hover + .visual-style-property-editor-link-border.right {
+ width: 49px;
+ }
+
+ .visual-style-property-editor-link > .visual-style-property-editor-link-border.left {
+ left: 1px;
+ }
+
+ .visual-style-property-editor-link.link-all.linked > .visual-style-property-editor-link-border.left {
+ width: 52px;
+ }
+
+ .visual-style-property-editor-link > .visual-style-property-editor-link-icon {
+ width: 10px;
+ }
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css (188628 => 188629)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css 2015-08-19 04:54:10 UTC (rev 188629)
@@ -42,8 +42,9 @@
}
.item.visual-style-selector-item > input[type="checkbox"] {
+ align-self: center;
position: relative;
- margin: 4.5px 0 4px 5px;
+ margin-left: 5px;
}
body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-item.selected > input[type="checkbox"]:checked::before {
@@ -58,9 +59,10 @@
}
.item.visual-style-selector-item > .icon {
+ align-self: center;
width: 16px;
height: 16px;
- margin: 2.5px 0 2.5px 4px;
+ margin-left: 4px;
}
.item.visual-style-selector-item.modified > .icon {
@@ -70,7 +72,6 @@
.item.visual-style-selector-item.selector-invalid > .icon {
width: 14px;
height: 14px;
- margin: 3.5px 0 3.5px 5px;
content: url(../Images/Error.svg);
}
@@ -80,14 +81,22 @@
.item.visual-style-selector-item.selector-invalid > .titles > .title::before {
position: absolute;
- top: calc(50% - 0.5px);
+ top: 0;
left: 0;
width: 100%;
+ height: 50%;
border-bottom: 1px solid hsla(0, 100%, 50%, 0.6);
content: "";
}
+@media (-webkit-min-device-pixel-ratio: 2) {
+ .item.visual-style-selector-item.selector-invalid > .titles > .title::before {
+ top: -0.5px;
+ }
+}
+
.item.visual-style-selector-item > .titles {
+ align-self: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css (188628 => 188629)
--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css 2015-08-19 04:50:38 UTC (rev 188628)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css 2015-08-19 04:54:10 UTC (rev 188629)
@@ -34,11 +34,17 @@
.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
width: 23px;
height: 20px;
- margin: 0 2px 0 0.5px;
+ margin-right: 2px;
content: url(../Images/CubicBezier.svg);
cursor: default;
}
+@media (-webkit-min-device-pixel-ratio: 2) {
+ .visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor {
+ margin-left: 0.5px;
+ }
+}
+
.visual-style-property-container.timing-editor > .visual-style-property-value-container > .bezier-editor:hover {
filter: brightness(0.9);
}
