Web Inspector: Add support for positioning Visual editors on non-retina displays
authordrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 04:54:10 +0000 (04:54 +0000)
committerdrousso@apple.com <drousso@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Wed, 19 Aug 2015 04:54:10 +0000 (04:54 +0000)
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)):

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@188629 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/VisualStyleColorPicker.css
Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.css
Source/WebInspectorUI/UserInterface/Views/VisualStyleDetailsPanel.js
Source/WebInspectorUI/UserInterface/Views/VisualStylePropertyEditorLink.css
Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorTreeItem.css
Source/WebInspectorUI/UserInterface/Views/VisualStyleTimingEditor.css

index 1d7ff40..3341359 100644 (file)
@@ -1,5 +1,52 @@
 2015-08-18  Devin Rousso  <drousso@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  <drousso@apple.com>
+
         Web Inspector: Show the computed value in an overlay for numerical Visual Editors
         https://bugs.webkit.org/show_bug.cgi?id=148161
 
index af46f05..9aa728c 100644 (file)
@@ -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;
index ae994e6..87b3cac 100644 (file)
 }
 
 .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;
 }
index 250665a..ab044f6 100644 (file)
@@ -248,6 +248,7 @@ WebInspector.VisualStyleDetailsPanel = class VisualStyleDetailsPanel extends Web
         }
 
         this._currentStyle.text = newStyleText;
+        group.section.element.classList.toggle("has-set-property", this._groupHasSetProperty(group));
     }
 
     get _initialTextList()
index d03b222..5f18577 100644 (file)
@@ -24,6 +24,8 @@
  */
 
 .visual-style-property-editor-link {
+    display: flex;
+    align-items: center;
     position: relative;
     min-width: 32px;
     margin-left: 1px;
     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;
 }
 }
 
 .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 {
 }
 
 .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;
+    }
 }
index e701c48..5638726 100644 (file)
@@ -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 @@ body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-
 }
 
 .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 @@ body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-
 .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 @@ body:not(.window-inactive, .window-docked-inactive) .item.visual-style-selector-
 
 .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;
index 7d72ff6..c80eb15 100644 (file)
 .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);
 }