DevTools: improved layout for Kbd Shortcuts & Settings

Source/devtools/front_end/ui/helpScreen.css

 .help-window-outer {
     position: absolute !important;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 2000;
 }
 
 .help-window-main {
@@ skipping 15 matching lines @@
 .help-window-title {
     font-size: 16px;
     margin: 0;
     padding-top: 1px;
     margin-bottom: -1px;
 }
 
 .help-content {
     overflow-y: auto;
     overflow-x: hidden;
-    margin: 8px;
+    margin: 8px 8px 8px 0;
     padding: 0 4px;
     flex: auto;
 }
 
 .help-footnote {
     border-top: 1px solid #EEEEEE;
     margin: 0;
     padding: 12px;
 }
 
@@ skipping 29 matching lines @@
     z-index: 10;
 }
 
 body.dock-to-bottom .help-content {
     margin-bottom: 8px;
 }
 
 .help-container {
     width: 100%;
     -webkit-user-select: auto;
-    -webkit-column-width: 470px;
+    -webkit-column-width: 288px;
 }
 
 .help-no-columns {
     -webkit-column-width: initial !important;
 }
 
 .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. */
 }
 
 .help-line {
     padding-bottom: 5px;
     margin-bottom: 5px;
 }
 
 .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 {
     padding: 0.1em 0.6em;
     border: 1px solid #ccc;
     font-size: 11px;
     background-color: #f7f7f7;
     color: #333;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
     border-radius: 3px;
@@ skipping 77 matching lines @@
 
 #settings-screen .help-window-label {
     font-size: 18px;
     color: inherit;
     padding: 1px 0 15px 17px;
 }
 
 .help-container-wrapper {
     position: absolute;
     top: 40px;
-    left: 15px;
+    left: 0px;
     right: 0;
     bottom: 0;
     overflow: auto;
 }
 
 .settings-tab.help-content {
     margin: 0;
     padding: 0;
 }
 
@@ skipping 12 matching lines @@
 .settings-tab-container {
     flex: auto;
     overflow: hidden;
 }
 
 .settings-tab-container header {
     padding: 0 0 6px;
     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 {
     font-size: 18px;
     font-weight: normal;
     margin: 0;
     padding-bottom: 3px;
 }
 
 .settings-tab .help-section-title {
@@ skipping 268 matching lines @@
     display: none;
 }
 
 .settings-experiment-hidden label {
     background-color: #ddd;
 }
 
 .settings-developer-mode .settings-experiment-hidden {
     display: block;
 }