Make settings page more touch friendly.

(font-size, checkbox, radio button, adding new language page)



1. Change font size to 16px. This font size proves to be more touch 
friendly while not affecting layout.
2. Rescale the checkbox and radio button. They were too tiny to touch.
3. Use drop down menu for adding new languages overlay page in touch ui builds.

BUG=100377
TEST=None


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

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

chrome/browser/resources/options/language_add_language_overlay.html

 <div id="add-language-overlay-page" class="page" hidden>
-<if expr="pp_ifdef('chromeos')">
+<!--
+Buttons are too small for touch in the touchui builds.
+Use drop down box for touchui builds instead.
+-->
+<if expr="pp_ifdef('chromeos') and not pp_ifdef('touchui')">
   <ul id="add-language-overlay-language-list">
   </ul>
   <button id="add-language-overlay-cancel-button"
           i18n-content="cancel"></button>
 </if>
-<if expr="not pp_ifdef('chromeos')">
+<if expr="not pp_ifdef('chromeos') or pp_ifdef('touchui')">
   <h1 i18n-content="add_language_title"></h1>
   <div class="content-area">
     <label>

chrome/browser/resources/options/language_add_language_overlay.js

@@ -47,7 +47,8 @@ cr.define('options', function() {
         if (language.displayName != language.nativeDisplayName) {
           displayText += ' - ' + language.nativeDisplayName;
         }
-        if (cr.isChromeOS) {
+
+        if (cr.isChromeOS && !cr.isTouch) {
           var button = document.createElement('button');
           button.className = 'link-button';
           button.textContent = displayText;

chrome/browser/resources/options/language_options.css

@@ -118,6 +118,7 @@
   margin-top: 12px;
 }
 
+<if expr="not pp_ifdef('touchui')">
 html[os=chromeos] #add-language-overlay-language-list {
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
@@ -144,6 +145,7 @@ html[os=chromeos] #add-language-overlay-page ul {
   padding: 0;
   margin: 0;
 }
+</if>
 
 /* TODO(kochi): This is temporary copy from new_tab.css */
 /* Notification */

chrome/browser/resources/options/language_options.js

@@ -77,30 +77,30 @@ cr.define('options', function() {
         }
       };
 
-      if (cr.isChromeOS) {
+      if (cr.isChromeOS && !cr.isTouch) {
         // Listen to user clicks on the add language list.
         var addLanguageList = $('add-language-overlay-language-list');
         addLanguageList.addEventListener('click',
             this.handleAddLanguageListClick_.bind(this));
+      } else {
+        // Listen to add language dialog ok button.
+        var addLanguageOkButton = $('add-language-overlay-ok-button');
+        addLanguageOkButton.addEventListener('click',
+            this.handleAddLanguageOkButtonClick_.bind(this));
+
         // Listen to user clicks on the "Change touch keyboard settings..."
         // button.
-        if (cr.isTouch) {
+        if (cr.isChromeOS && cr.isTouch) {
           var virtualKeyboardButton = $('language-options-virtual-keyboard');
           // TODO(yusukes): would be better to hide the button if no virtual
           // keyboard is registered.
           virtualKeyboardButton.onclick = function(e) {
             OptionsPage.navigateToPage('virtualKeyboards');
           };
-        }
-      } else {
-        // Listen to add language dialog ok button.
-        var addLanguageOkButton = $('add-language-overlay-ok-button');
-        addLanguageOkButton.addEventListener('click',
-            this.handleAddLanguageOkButtonClick_.bind(this));
-
-        // Show experimental features if enabled.
-        if (templateData.experimentalSpellCheckFeatures == 'true') {
-          $('auto-spell-correction-option').hidden = false;
+        } else {
+          // Show experimental features if enabled.
+          if (templateData.experimentalSpellCheckFeatures == 'true')
+            $('auto-spell-correction-option').hidden = false;
         }
       }
 

chrome/browser/resources/options/options_page.css

@@ -9,7 +9,7 @@
 }
 
 .stretch {
-  -webkit-box-flex: 1;  
+  -webkit-box-flex: 1;
 }
 
 .frozen,
@@ -22,6 +22,44 @@
   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],
+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;