Make settings page more touch friendly (font-size, checkbox, radio, adding language page).

chrome/browser/resources/options/options_page.css

 .hbox {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
 }
 
 .vbox {
   display: -webkit-box;
   -webkit-box-orient: vertical;
 }
 
 .stretch {
-  -webkit-box-flex: 1;  
+  -webkit-box-flex: 1;
 }
 
 .frozen,
 .subpage-sheet-container.frozen {
   position: fixed;
 }
 
 #search-field {
   font-size: inherit;
   margin: 0;
 }
 
+/**

[Rick Byers, 2011/10/28 20:07:13]

Remove second * - not jsdoc

[bshe, 2011/10/30 22:46:10]

Done.

+ * In TOUCH_UI builds, make the radio/checkbox input boxes in
+ * options/preference pages easier to touch.

[Rick Byers, 2011/10/28 20:07:13]

Move this comment down since it applies just to the radio/checkbox rules

[bshe, 2011/10/30 22:46:10]

Done.

+ */
+<if expr="pp_ifdef('touchui')">
+/* Fix the width issue of search box after increase font size. */
+#search-field {

[Rick Byers, 2011/10/28 20:07:13]

This seems wrong - you shouldn't have to hard-code a specific width here (this
is probably only right for a given navbar-container width).  Also you're really
forcing the input to be smaller than it thinks it's minimum size is (although
it's not being too smart about it - it's including the space at the end reserved
for the 'x' along with the placeholder text to determine it's minimal size).

Instead I'd suggest setting the font size back to a small value here (so the
search box still fits) but setting a height value to make it a little taller
than normal and so easier to touch.

[bshe, 2011/10/30 22:46:10]

I totally agree not to hard-code a specific width. The reason I use a specific
width is because the chrome navbar-container has a hard-code fixed size:
http://www.google.com/codesearch#OAMlx_jo-ck/src/chrome/browser/resources/sha...

Anyway, I have changed the code based on your suggestions. I used scaleY(1.2).
It is easier to touch and the text doesn't have much distortion due to scale.

On 2011/10/28 20:07:13, Rick Byers wrote:

[Rick Byers, 2011/10/31 15:18:18]

Cool, thanks.  Stretching the text is sub-optimal still though.  Doesn't setting
height make the input box bigger without affecting the text (just adds padding
to the top/bottom)?  It seems to work for me on Linux Chrome, but I see now that
on Mac WebKit severely restricts how you can change search boxes (including
ignoring height and line-height).  I didn't try on ChromeOS though (don't have a
device at home with me right now).

If there's really no way on ChromeOS to make the box taller without stretching
the text, then I guess I prefer your original solution of a large font size with
a fixed width.  Just add a comment describing the size calculation (so people
know how to update it if the other constant changes).

[bshe, 2011/10/31 21:41:18]

The height works for chrome os. Didn't test it on Mac, but I guess we dont have
to worry about it right now since it only applies to TouchUI. Directly add
padding also works and I think its a better solution here. The drawback of
height is the extra top and bottom blank space, which makes the position of x
button awkward (1 px on the right of x button, however 5px on both bottom and
top).

Also, I rescaled the webkit X button in search box to make it better for touch.
It looks good too.

On 2011/10/31 15:18:18, Rick Byers wrote:

+  width: 160px;
+}
+
+/* Using padding to increase the touchable area for radio/checkbox input. */
+div.radio > label > span,
+div.checkbox > label > span {

[Rick Byers, 2011/10/28 20:07:13]

This seems like a hack.  If the webkit transform below is sufficient to increase
the touch target, then can we just remove this?

[bshe, 2011/10/30 22:46:10]

Done.

+  position: relative;

[Rick Byers, 2011/10/28 20:07:13]

sort properties alphabetically

[bshe, 2011/10/30 22:46:10]

No need to use padding hack. Only one property left.
On 2011/10/28 20:07:13, Rick Byers wrote:

+  left: -30px;
+  padding: 4px 0 4px 35px;
+}
+
+div.radio > input,
+div.checkbox > input {
+  -webkit-transform: scale(1.4);
+}
+
+/**

[Rick Byers, 2011/10/28 20:07:13]

Remove second *

[bshe, 2011/10/30 22:46:10]

Done.

+ * Overwrite the font-size rule in shared_options.css file.

[Rick Byers, 2011/10/28 20:07:13]

replace 'Overwrite' with 'Override'.

[bshe, 2011/10/31 21:41:18]

Done.

+ * 16 px font-size proved to be more touch friendly. It increases the touchable
+ * area for buttons and input boxes.
+ */
+body{

[Rick Byers, 2011/10/28 20:07:13]

add space before {

[bshe, 2011/10/30 22:46:10]

Done.

+  font-size:16px;

[Rick Byers, 2011/10/28 20:07:13]

add space after :

[bshe, 2011/10/30 22:46:10]

Done.

+}
+</if>
+
+
 .overlay {
   -webkit-box-align: center;
   -webkit-box-orient: vertical;
   -webkit-box-pack: center;
   -webkit-transition: 0.25s opacity;
   background: -webkit-radial-gradient(rgba(127, 127, 127, 0.5),
                                       rgba(127, 127, 127, 0.5) 35%,
                                       rgba(0, 0, 0, 0.7));
   bottom: 0;
   display: -webkit-box;
@@ skipping 566 matching lines @@
   display: table-cell;
   vertical-align: baseline;
   border-bottom: 1px solid #eeeeee;
 }
 
 /* do not display a border after the last section in the table */
 .displaytable:not([searching='true']) > section:last-child > *  {
   border-bottom: none;
 }