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)
@@ -7,9 +7,39 @@
 }
 
 .command-shortcut {
+  border: solid 1px Gray;
+  color: Black;

[Evan Stade, 2012/06/05 00:20:37]

I think we don't capitalize colors

   float: right;
+  height: 18px;
+  min-height: 18px;

[Evan Stade, 2012/06/05 00:20:37]

should probably be expressed in em. Also what is the point of setting both
height and min-height?

[Finnur, 2012/06/05 15:04:46]

I don't always set font heights, but when I do I use the latest in font sizing
technology: both belts and suspenders at the same time.

(min-height removed)

On 2012/06/05 00:20:37, Evan Stade wrote:

+  min-width: 150px;
+  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: Gray;
+}
+
+.contains-chars {
+  color: Black;

[Evan Stade, 2012/06/05 00:20:37]

please re-use the colors we are already using for normal text (not exactly
black) and disabled stuff (also not 'gray'). Why change the normal color for
<input> text?

[Finnur, 2012/06/05 15:04:46]

Well, firstly, this isn't actually an input text, it is a focusable span with a
border that looks like one. When you press Ctrl in a normal text box nothing
happens but in this case you are shown 'Ctrl + ' and you can continue pressing
for more to appear.

This was designed by alcor and is similar to the way Mac and Windows implement a
config UI to capture shortcut assignments (not sure how it works in the Linux
world).

There are three states, some seen in the images (http://crbug.com/121420).

1. No binding is set
  - We show "Not set" hint in gray on white background.
2. Active binding, not being changed
  - The keybinding (such as "Ctrl-Shift-F") is shown in black on white.
3. Incomplete input
  - While capturing we show a purple background and a hint in gray ("Type a
shortcut") that disappears once you start typing. Once we have a valid binding
we save it and go to state 2 but the user can continue typing and then we
restart capture and go to state 3 again.

So, to answer your question: Gray is for hints and black is to indicate that
you've made a complete and valid keybinding assignment (an active keybinding, if
you will).

[Evan Stade, 2012/06/05 18:28:01]

I don't have a problem with the UI, but I kind of doubt alcor consciously chose
just plain black while all other text on the page, input or not, isn't black.
If I am to comment on these screenshots, I would say that the dialog should look
like other dialogs. That is, the title must be bolded and there needs to be an
(x) in the top right. The CSS is already there, you just need to fiddle with the
markup.

the button text should be [ OK ], not [ Close ], the input-looking things should
have the same border color, roundedness, and height as normal text inputs.
that's fine, as long as you change the definitions in that sentence. "Gray" is
#999 and "black" is rgb(48, 57, 66)

[Finnur, 2012/06/05 21:12:13]

Hmm, I actually wasn't referring to the colors scheme for the fonts when I
referred to his design. I'm not sure he meant his mocks to go to that level of
detail (besides, it would be weird to change the font color just for this
dialog) and I didn't realize we used something slightly off-black and off-gray.
Silly really, as I could have anticipated us using a different color but didn't.
Not a problem, I'll work on that tomorrow. Was the rest of the changelist ok?
But... that's exactly what the latest CL I asked you to review contains... does
it not?

+}
+
 .inactive-keybinding {
   color: Gray;
 }
+
+.left-column {
+  width: 200px;
+}
+
+.right-column {
+  width: 170px;
+}