Web Inspector: Styles Redesign: clicking above selector should prepend new property
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Dec 2017 08:28:45 +0000 (08:28 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Fri, 15 Dec 2017 08:28:45 +0000 (08:28 +0000)
https://bugs.webkit.org/show_bug.cgi?id=180628
<rdar://problem/35954570>

Reviewed by Devin Rousso.

* UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
(.spreadsheet-style-declaration-editor .property):
(.spreadsheet-style-declaration-editor .property-toggle):
(.spreadsheet-style-declaration-editor .property.has-warning .warning):
* UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
(.spreadsheet-css-declaration):
(.spreadsheet-css-declaration :matches(.header, .header-media)):
(.spreadsheet-css-declaration :matches(.header, .header-media):first-child):
When header-media element is present, header element should have padding-top set to 0.

(.spreadsheet-css-declaration .header.editing-selector .origin):
(.spreadsheet-css-declaration .close-brace):

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css

index 5f1b069..de11405 100644 (file)
@@ -1,3 +1,24 @@
+2017-12-15  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Styles Redesign: clicking above selector should prepend new property
+        https://bugs.webkit.org/show_bug.cgi?id=180628
+        <rdar://problem/35954570>
+
+        Reviewed by Devin Rousso.
+
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css:
+        (.spreadsheet-style-declaration-editor .property):
+        (.spreadsheet-style-declaration-editor .property-toggle):
+        (.spreadsheet-style-declaration-editor .property.has-warning .warning):
+        * UserInterface/Views/SpreadsheetCSSStyleDeclarationSection.css:
+        (.spreadsheet-css-declaration):
+        (.spreadsheet-css-declaration :matches(.header, .header-media)):
+        (.spreadsheet-css-declaration :matches(.header, .header-media):first-child):
+        When header-media element is present, header element should have padding-top set to 0.
+
+        (.spreadsheet-css-declaration .header.editing-selector .origin):
+        (.spreadsheet-css-declaration .close-brace):
+
 2017-12-14  David Kilzer  <ddkilzer@apple.com>
 
         Enable -Wstrict-prototypes for WebKit
index 9ce2efb..66e8493 100644 (file)
@@ -29,8 +29,8 @@
 }
 
 .spreadsheet-style-declaration-editor .property {
-    padding-right: var(--css-declaration-side-padding);
-    padding-left: calc(var(--css-declaration-side-padding) + 17px);
+    padding-right: var(--css-declaration-horizontal-padding);
+    padding-left: calc(var(--css-declaration-horizontal-padding) + 17px);
 }
 
 .spreadsheet-style-declaration-editor .name {
@@ -60,7 +60,7 @@
 .spreadsheet-style-declaration-editor .property-toggle {
     visibility: hidden;
     position: absolute;
-    left: calc(var(--css-declaration-side-padding) + 1px);
+    left: calc(var(--css-declaration-horizontal-padding) + 1px);
     width: 10px;
     height: 10px;
     margin: 0;
     position: absolute;
     right: 0;
     display: inline-block;
-    width: calc(20px + var(--css-declaration-side-padding));
+    width: calc(20px + var(--css-declaration-horizontal-padding));
     height: 13px;
 
     background-image: url(../Images/Warning.svg);
index cd9104b..777fe8d 100644 (file)
 
 .spreadsheet-css-declaration {
     margin: 0;
-    padding: 4px 0;
+    padding: 0 0 var(--css-declaration-vertical-padding);
     font-family: Menlo, monospace;
     color: hsl(0, 0%, 70%);
     background: white;
     border-bottom: 0.5px solid hsla(0, 0%, 0%, 0.2);
     -webkit-user-select: text;
 
-    --css-declaration-side-padding: 6px;
+    --css-declaration-vertical-padding: 4px;
+    --css-declaration-horizontal-padding: 6px;
 }
 
 .spreadsheet-css-declaration :matches(.header, .header-media) {
-    padding: 0 var(--css-declaration-side-padding);
+    padding: 0 var(--css-declaration-horizontal-padding);
+}
+
+.spreadsheet-css-declaration :matches(.header, .header-media):first-child {
+    padding-top: var(--css-declaration-vertical-padding);
 }
 
 .spreadsheet-css-declaration .header.editing-selector .origin {
     position: absolute;
-    right: var(--css-declaration-side-padding);
+    right: var(--css-declaration-horizontal-padding);
 }
 
 .spreadsheet-css-declaration .media-label {
 
 .spreadsheet-css-declaration .close-brace {
     display: inline-block;
-    padding-left: var(--css-declaration-side-padding);
+    padding-left: var(--css-declaration-horizontal-padding);
 }