Web Inspector: Settings tab should look more like a native macOS view
authornvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Nov 2016 17:40:41 +0000 (17:40 +0000)
committernvasilyev@apple.com <nvasilyev@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 14 Nov 2016 17:40:41 +0000 (17:40 +0000)
https://bugs.webkit.org/show_bug.cgi?id=164708
<rdar://problem/29241296>

Reviewed by Timothy Hatcher.

* UserInterface/Views/SettingsTabContentView.css:
(.content-view.settings):
(.content-view.settings > .header):
(.content-view.settings > .setting-container):
Match macOS Sierra default font size for settings view.

(.content-view.settings > .setting-container > .setting-name):
(.content-view.settings > .setting-container > .setting-value-controller):
(.content-view.settings > .setting-container > .setting-value-controller input):
(.content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
Make checkbox larger.

(.content-view.settings > .setting-container > .setting-value-controller select):
(.content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
Decrease the width of the number fields to make them just wide enough to fit 2 digit numbers.

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

Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css

index 74df6c4..c176024 100644 (file)
@@ -1,3 +1,27 @@
+2016-11-14  Nikita Vasilyev  <nvasilyev@apple.com>
+
+        Web Inspector: Settings tab should look more like a native macOS view
+        https://bugs.webkit.org/show_bug.cgi?id=164708
+        <rdar://problem/29241296>
+
+        Reviewed by Timothy Hatcher.
+
+        * UserInterface/Views/SettingsTabContentView.css:
+        (.content-view.settings):
+        (.content-view.settings > .header):
+        (.content-view.settings > .setting-container):
+        Match macOS Sierra default font size for settings view.
+
+        (.content-view.settings > .setting-container > .setting-name):
+        (.content-view.settings > .setting-container > .setting-value-controller):
+        (.content-view.settings > .setting-container > .setting-value-controller input):
+        (.content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"]):
+        Make checkbox larger.
+
+        (.content-view.settings > .setting-container > .setting-value-controller select):
+        (.content-view.settings > .setting-container > .setting-value-controller input[type="number"]):
+        Decrease the width of the number fields to make them just wide enough to fit 2 digit numbers.
+
 2016-11-12  Joseph Pecoraro  <pecoraro@apple.com>
 
         Web Inspector: Type Profiler and Code Coverage Profiler should work in Workers
index 60534f3..2aae3b7 100644 (file)
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2016 Devin Rousso <dcrousso+webkit@gmail.com>. All rights reserved.
+ * Copyright (C) 2016 Apple Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
 
 .content-view.settings {
     overflow-y: auto;
-    font-weight: lighter;
+    background-color: hsl(0, 0%, 93%);
 }
 
 .content-view.settings > .header {
     margin: 6vh auto 4vh;
     text-align: center;
     font-size: 32px;
+    font-weight: lighter;
 }
 
 .content-view.settings > .setting-container {
     display: flex;
     align-items: center;
     margin: 1em 0;
-    font-size: 14px;
+    font-size: 13px;
 }
 
 .content-view.settings > .setting-container > .setting-name {
     width: 50%;
-    margin-right: 2px;
+    margin-right: 6px;
     text-align: right;
 }
 
     display: flex;
     align-items: center;
     width: 50%;
-    margin-left: 2px;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller input {
+    font-size: inherit;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller input[type="checkbox"] {
+    font-size: 16px;
+    margin-right: 4px;
+}
+
+.content-view.settings > .setting-container > .setting-value-controller select {
+    /*
+    To set the font-size of <select> to be exactly 13px, it needs to be set to 16px.
+    Setting the font-size to 13px actually sets it to 11px.
+    */
+    font-size: 16px;
+
+    /* Vertically align <select> with its label text. */
+    position: relative;
+    top: 0.5px;
 }
 
 .content-view.settings > .setting-container > .setting-value-controller input[type="number"] {
-    max-width: 50px;
-    margin: 0 5px;
+    max-width: 42px;
+    margin: 0 5px 0 2px;
     text-align: right;
 }