Config UI for Extension Commands (part 1).

chrome/browser/resources/extensions/extension_commands_overlay.css

Index: chrome/browser/resources/extensions/extension_commands_overlay.css
===================================================================
--- chrome/browser/resources/extensions/extension_commands_overlay.css	(revision 140271)
+++ chrome/browser/resources/extensions/extension_commands_overlay.css	(working copy)
@@ -6,10 +6,55 @@
   margin-left: 12px;
 }
 
-.command-shortcut {
+.command-title {
+  display: inline-block;
+  margin-top: 1em;
+}
+
+.command-container {
+  width: 450px;
+}
+
+.command-description {
+  display: inline-block;
+  margin-top: 0.5em;
+  min-height: 2em;
+  width: 55%;
+}
+
+.command-shortcut-container {
+  display: inline-block;
   float: right;

[Evan Stade, 2012/06/05 21:25:52]

make the parent container a flex box.

+  margin-top: 0.25em;
+  min-height: 2em;
+  width: 35%;
 }
 
+.command-shortcut {
+  border: solid 1px #999;
+  color: rgb(48, 57, 66);
+  display: inline-block;
+  height: 1.5em;
+  min-width: 12.5em;
+  outline: none;
+  padding: 4px 0 1px 4px;
+}
+
+.clearable {
+  background: white url('chrome://theme/IDR_EXTENSION_COMMAND_CLOSE')
+              no-repeat right;
+}
+
+.capturing {
+  background: rgb(243, 244, 255);
+  border: solid 1px rgb(140, 147, 255);
+  color: #999;
+}
+
+.contains-chars {
+  color: rgb(48, 57, 66);
+}
+
 .inactive-keybinding {
-  color: Gray;
+  color: #999;
 }