Web Inspector: Settings: group titles should vertically align with the first editor

https://bugs.webkit.org/show_bug.cgi?id=193391

Reviewed by Dean Jackson.

* UserInterface/Views/SettingsTabContentView.css:
(.content-view.settings > .settings-view > .container):
(.content-view.settings > .settings-view > .container > .editor-group > .editor): Added.
(.content-view.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Added.
(.content-view.settings > .settings-view > .container > .editor-group > .editor select):
(.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"]):


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

Author: [email protected]

Source/WebInspectorUI/ChangeLog

@@ -1,3 +1,17 @@
+2019-01-14  Devin Rousso  <[email protected]>
+
+        Web Inspector: Settings: group titles should vertically align with the first editor
+        https://bugs.webkit.org/show_bug.cgi?id=193391
+
+        Reviewed by Dean Jackson.
+
+        * UserInterface/Views/SettingsTabContentView.css:
+        (.content-view.settings > .settings-view > .container):
+        (.content-view.settings > .settings-view > .container > .editor-group > .editor): Added.
+        (.content-view.settings > .settings-view > .container > .editor-group > .editor:first-child > *): Added.
+        (.content-view.settings > .settings-view > .container > .editor-group > .editor select):
+        (.content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"]):
+
 2019-01-11  Matt Baker  <[email protected]>
 
         Web Inspector: REGRESSION: deleting an audit puts selection in a selected but invisible state

Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css

@@ -55,7 +55,6 @@
 
 .content-view.settings > .settings-view > .container {
     display: flex;
-    align-items: center;
     margin-top: 1em;
     font-size: 13px;
 }
@@ -85,6 +84,14 @@
     flex-direction: column;
 }
 
+.content-view.settings > .settings-view > .container > .editor-group > .editor {
+    --settings-editor-child-margin-top: 0;
+}
+
+.content-view.settings > .settings-view > .container > .editor-group > .editor:first-child > * {
+    margin-top: var(--settings-editor-child-margin-top);
+}
+
 .content-view.settings > .settings-view > .container > .editor-group > .editor input {
     font-size: inherit;
 }
@@ -103,16 +110,18 @@
     font-size: 16px;
 
     /* Vertically align <select> with the group title text. */
-    margin-top: 0;
+    --settings-editor-child-margin-top: -2px;
 }
 
 .content-view.settings > .settings-view > .container > .editor-group > .editor input[type="number"] {
-    /* Vertically align <input> with the group title text. */
-    margin-top: -1px;
-
     max-width: 48px;
+    padding-top: 0;
+    padding-bottom: 0;
     text-align: end;
+    vertical-align: 1px;
 
+    /* Vertically align <input> with the group title text. */
+    --settings-editor-child-margin-top: -2px;
     --settings-input-number-margin-start: 2px;
     --settings-input-number-margin-end: 5px;
 }