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;
 }
 
+<if expr="pp_ifdef('touchui')">
+/*
+ * Add padding to increase the touchable area of search box. Use original font
+ * size to avoid the width of search box exceeding the width of navbar.
+ */
+#search-field {
+  font-size: 13px;
+  padding: 5px;
+}
+#search-field::-webkit-search-cancel-button {
+  -webkit-transform: scale(1.5);
+}
+
+/*
+ * In TOUCH_UI builds, make the radio/checkbox input boxes in
+ * options/preference pages easier to touch.
+ */
+div.radio > label > span,
+div.checkbox > label > span {
+  -webkit-padding-start: 5px;
+}
+
+label > input[type="checkbox"],

[Rick Byers, 2011/11/01 17:06:10]

style nit: remove quotes
(looks like we're not consistent with this - in this file we have single quotes,
double quotes and no quotes, let's just go with no quotes for new code since
it's unnecessary extra characters).

[bshe, 2011/11/01 19:23:46]

Done.

+label > input[type="radio"] {
+  -webkit-transform: scale(1.4);
+}
+
+/*
+ * Override the font-size rule in shared_options.css file.
+ * 16 px font-size proved to be more touch friendly. It increases the touchable
+ * area for buttons and input boxes.
+ */
+body {
+  font-size: 16px;
+}
+</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;
 }