Title: [208686] trunk/Source/WebInspectorUI
Revision
208686
Author
nvasil...@apple.com
Date
2016-11-14 09:40:41 -0800 (Mon, 14 Nov 2016)

Log Message

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.

Modified Paths

Diff

Modified: trunk/Source/WebInspectorUI/ChangeLog (208685 => 208686)


--- trunk/Source/WebInspectorUI/ChangeLog	2016-11-14 17:39:10 UTC (rev 208685)
+++ trunk/Source/WebInspectorUI/ChangeLog	2016-11-14 17:40:41 UTC (rev 208686)
@@ -1,3 +1,27 @@
+2016-11-14  Nikita Vasilyev  <nvasil...@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  <pecor...@apple.com>
 
         Web Inspector: Type Profiler and Code Coverage Profiler should work in Workers

Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css (208685 => 208686)


--- trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css	2016-11-14 17:39:10 UTC (rev 208685)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SettingsTabContentView.css	2016-11-14 17:40:41 UTC (rev 208686)
@@ -1,5 +1,6 @@
 /*
  * Copyright (C) 2016 Devin Rousso <dcrousso+web...@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
@@ -25,7 +26,7 @@
 
 .content-view.settings {
     overflow-y: auto;
-    font-weight: lighter;
+    background-color: hsl(0, 0%, 93%);
 }
 
 .content-view.settings > .header {
@@ -32,6 +33,7 @@
     margin: 6vh auto 4vh;
     text-align: center;
     font-size: 32px;
+    font-weight: lighter;
 }
 
 .content-view.settings > .setting-container {
@@ -38,12 +40,12 @@
     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;
 }
 
@@ -51,11 +53,31 @@
     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;
 }
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to