[webui] fix vertical alignment of buttons and text inputs

The crux of the problem is that buttons and text inputs are being aligned on their baseline, which I believe is correct. However they place their baseline differently relative to the top and bottom border, so the top and bottom borders wind up misaligned. To correct this, we have to add padding to the buttons and/or text inputs. The amount of padding is platform-specific.

Using vertical-align: (not-baseline) would work, but would make it look bad because the baselines would not align.

BUG=117662
TEST=visual (on win, mac, linux, chromeos)


Review URL: http://codereview.chromium.org/9689048

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@126796 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/history/history.js

@@ -869,6 +869,7 @@ PageState.getHashString = function(term, page) {
  * Window onload handler, sets up the page.
  */
 function load() {
+  cr.enablePlatformSpecificCSSRules();
   uber.onContentFrameLoaded();
 
   var searchField = $('search-field');

chrome/browser/resources/options2/options_page.css

@@ -47,21 +47,6 @@ div.disabled {
   margin-top: 0.45em;
 }
 
-/* TEXT */
-input[type='password'],
-input[type='text'],
-input[type='url'],
-input:not([type]) {
-  -webkit-border-radius: 2px;
-  border: 1px solid #aaa;
-  font-size: inherit;
-  padding: 3px;
-}
-
-input[type='text']:disabled {
-  color: #888;
-}
-
 .hbox {
   -webkit-box-orient: horizontal;
   display: -webkit-box;

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')">
+  /* 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),
@@ -270,6 +280,10 @@ input:not([type]):not(.custom-appearance) {
   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'] {

chrome/browser/resources/shared_resources.grd

@@ -41,7 +41,8 @@ without changes to the corresponding grd file. -->
       <include name="IDR_SHARED_CSS_TREE_JS"
                file="shared/css/tree.css.js" type="BINDATA" />
       <include name="IDR_SHARED_CSS_WIDGETS"
-               file="shared/css/widgets.css" type="BINDATA" />
+               file="shared/css/widgets.css" type="BINDATA"
+               flattenhtml="true" />
       <include name="IDR_SHARED_IMAGES_CHECK"
                file="shared/images/check.png" type="BINDATA" />
       <include name="IDR_SHARED_IMAGES_CHECKBOX_BLACK"