DevTools: improved layout for Kbd Shortcuts & Settings

Source/devtools/front_end/ui/helpScreen.css

Index: Source/devtools/front_end/ui/helpScreen.css
diff --git a/Source/devtools/front_end/ui/helpScreen.css b/Source/devtools/front_end/ui/helpScreen.css
index b7f5bd8e75cdbd7097f2b97c941ae2ee40ed076d..aa24b8d21a4b907c80f9559ce3dadf810c2f11c2 100644
--- a/Source/devtools/front_end/ui/helpScreen.css
+++ b/Source/devtools/front_end/ui/helpScreen.css
@@ -33,7 +33,7 @@
 .help-content {
     overflow-y: auto;
     overflow-x: hidden;
-    margin: 8px;
+    margin: 8px 8px 8px 0;
     padding: 0 4px;
     flex: auto;
 }
@@ -83,7 +83,7 @@ body.dock-to-bottom .help-content {
 .help-container {
     width: 100%;
     -webkit-user-select: auto;
-    -webkit-column-width: 470px;
+    -webkit-column-width: 288px;
 }
 
 .help-no-columns {
@@ -93,19 +93,19 @@ body.dock-to-bottom .help-content {
 .help-block {
     display: block;
     padding-bottom: 9px;
-    width: 470px;
+    width: 288px;
     -webkit-column-break-inside: avoid;
 }
 
 .settings-tab.help-container {
-    -webkit-column-width: 410px;
+    -webkit-column-width: 308px;
 }
 
 .settings-tab .help-block {
-    width: 410px;
     margin-left: 20px;
 }
 
+

[lushnikov, 2015/08/13 04:21:55]

stray line

 .settings-tab .field-error-message {
     color: DarkRed;
     height: 0; /* Avoid changing element height when content is set. */
@@ -118,18 +118,20 @@ body.dock-to-bottom .help-content {
 
 .help-key-cell {
     display: inline-block;
-    width: 270px;
-    text-align: right;
+    width: 120px;
+    white-space: nowrap;
 }
 
 .help-cell {
     display: inline-block;
-    width: 200px;
+    width: 168px;
     vertical-align: middle;
+    text-align: right;
 }
 
 .help-section-title {
     font-size: 120%;
+    text-align: left;
 }
 
 .help-key {
@@ -227,7 +229,7 @@ body.dock-to-bottom .help-content {
 .help-container-wrapper {
     position: absolute;
     top: 40px;
-    left: 15px;
+    left: 0px;
     right: 0;
     bottom: 0;
     overflow: auto;
@@ -260,16 +262,13 @@ body.dock-to-bottom .help-content {
     border-bottom: 1px solid #EEEEEE;
 }
 
-#tab-shortcuts {
-    margin-top: 25px !important;
-}
-
 #experiments-tab-content .help-container {
     -webkit-column-width: 470px;
 }
 
 #experiments-tab-content .help-block {
     width: 470px;
+    margin-left: 0;
 }
 
 .settings-tab-container header > h3 {