DevTools: improved layout for Kbd Shortcuts & Settings

Increase information density and address broken layout.

BUG=519609

Review URL: https://codereview.chromium.org/1291483002

git-svn-id: svn://svn.chromium.org/blink/trunk@200951 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/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,16 +93,15 @@ 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;
 }
 
@@ -118,18 +117,22 @@ body.dock-to-bottom .help-content {
 
 .help-key-cell {
     display: inline-block;
-    width: 270px;
+    width: 153px;
+    white-space: nowrap;
     text-align: right;
+    vertical-align: middle;
+    padding-right: 6px;
 }
 
 .help-cell {
     display: inline-block;
-    width: 200px;
+    width: 135px;
     vertical-align: middle;
 }
 
 .help-section-title {
     font-size: 120%;
+    text-align: left;
 }
 
 .help-key {
@@ -159,6 +162,7 @@ body.dock-to-bottom .help-content {
 
 .help-key-delimiter {
     margin: 0 0.5em;
+    display: none;
 }
 
 .help-window-outer fieldset {
@@ -227,7 +231,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 +264,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 {