[webui] fix vertical alignment of buttons and text inputs

chrome/browser/resources/shared/css/widgets.css

Index: chrome/browser/resources/shared/css/widgets.css
diff --git a/chrome/browser/resources/shared/css/widgets.css b/chrome/browser/resources/shared/css/widgets.css
index 7a23deae29b61319ef6ca52dfd687ed425437f04..823cdece2b5b818315e4cbc6e905516ecd963ee8 100644
--- a/chrome/browser/resources/shared/css/widgets.css
+++ b/chrome/browser/resources/shared/css/widgets.css
@@ -35,6 +35,16 @@ input[type='submit']:not(.custom-appearance):not(.link-button),
 select {
   height: 2em;
   min-width: 4em;
+<if expr="pp_ifdef('chromeos')">

[Evan Stade, 2012/03/13 01:35:31]

this seems better than html[os='chromeos'] because

1. you don't have to call cr.enablePlatformSpecificCss() in every page (people
definitely will forget to do this)
2. you don't have to reproduce as many long-winded selectors (more readable and
maintainable)
3. slightly better performance wise.

therefore I think we should generally deprecate the html[os=foo] approach and
always do it at compile time.

[Dan Beam, 2012/03/13 01:50:10]

+1
I think XML in the middle of CSS is about as readable as [os='blah'] if not less
so (but overall, a wash).
I agree with this for sure.
+1

[csilv, 2012/03/13 01:55:51]

Agreed 100%.

[Evan Stade, 2012/03/13 01:58:09]

I meant that if we were to do this in css, we would have to copy the entire
selector block and put html[os=] in front of each line; it's less readable
because you have to realize that the two blocks are exactly the same.

+  /* Without this rule, chromeos button text is too high on the button. */
+  padding-top: 3px;
+</if>
+<if expr="is_macosx or is_win">
+  /* The following platform-specific rule is necessary to get adjacent
+   * buttons, text inputs, and so forth to align on their borders while also
+   * aligning on the text's baselines. */
+  padding-bottom: 1px;
+</if>
 }
 
 button:not(.custom-appearance):not(.link-button),
@@ -271,6 +281,10 @@ input:not([type]) {
   height: 2em;
   margin: 0;
   padding: 3px;
+<if expr="pp_ifdef('chromeos')">
+  /* For better alignment between adjacent buttons and inputs. */
+  padding-bottom: 2px;
+</if>
 }
 
 input[type='search'] {