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

5 files changed, 61 insertions, 16 deletions

diff --git a/chrome/browser/resources/options/language_add_language_overlay.html b/chrome/browser/resources/options/language_add_language_overlay.html
index 6f7bee6..3bb18c4 100644
--- a/chrome/browser/resources/options/language_add_language_overlay.html
+++ b/chrome/browser/resources/options/language_add_language_overlay.html
@@ -1,11 +1,15 @@
 <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>
diff --git a/chrome/browser/resources/options/language_add_language_overlay.js b/chrome/browser/resources/options/language_add_language_overlay.js
index f1696a1..7c0c15f 100644
--- a/chrome/browser/resources/options/language_add_language_overlay.js
+++ b/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;
diff --git a/chrome/browser/resources/options/language_options.css b/chrome/browser/resources/options/language_options.css
index 0515603..1c3a71a 100644
--- a/chrome/browser/resources/options/language_options.css
+++ b/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 */
diff --git a/chrome/browser/resources/options/language_options.js b/chrome/browser/resources/options/language_options.js
index 06b2fec..1912029 100644
--- a/chrome/browser/resources/options/language_options.js
+++ b/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;
         }
       }
 
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 346cde6..61520ae 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/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;