Replace TOUCH_UI condition in WebUI with dynamic flag.

Touch-specific builds are being retired.  Instead we want to be able to enable touch-friendly UI dynamically.  For now I'm adding a --touch-optimized-ui flag which can be used to enable the touch-optimized CSS tweaks we've made to WebUI.

This undoes the tweak to use the non-ChromeOS language UI for touch_ui builds.  The conditional HTML for the add-language-overlay-page is non-trivial to convert to something dynamic - I'll do something in a separate changelist.

Also fix a number of issues where overrides of WebUI virtuals (like RenderViewCreated) weren't properly delegating back to their base class (or were delegating to WebUI instead of the immediate base ChromeWebUI).

Also removes the Touch-specific User-Agent string.

BUG=105315
TEST=


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

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

18 files changed, 92 insertions, 66 deletions

diff --git a/chrome/browser/resources/chromeos/login/screen_gaia_signin.css b/chrome/browser/resources/chromeos/login/screen_gaia_signin.css
index b15cdba..04dba02 100644
--- a/chrome/browser/resources/chromeos/login/screen_gaia_signin.css
+++ b/chrome/browser/resources/chromeos/login/screen_gaia_signin.css
@@ -17,12 +17,10 @@
   width: 200px;
 }
 
-/*  In TOUCH_UI builds, make the links easier to touch. */
-<if expr="pp_ifdef('touchui')">
-#signin-right {
+/*  For touch-optimized UI, make the links bigger. */
+html[touch-optimized] #signin-right {
   font-size: 14px;
 }
-</if>
 
 html[dir=ltr] #signin-right {
   right: -150px;  /* ('gaia-sign'.width - 'signin-frame'.width) / 2 -
diff --git a/chrome/browser/resources/ntp4/new_tab.html b/chrome/browser/resources/ntp4/new_tab.html
index 6f30f06..bb79acd 100644
--- a/chrome/browser/resources/ntp4/new_tab.html
+++ b/chrome/browser/resources/ntp4/new_tab.html
@@ -20,12 +20,6 @@
 <!-- It's important that this be the first script loaded. -->
 <script src="logging.js"></script>
 
-<if expr="pp_ifdef('touchui')">
-<script>
-document.documentElement.setAttribute('touchui', true);
-</script>
-</if>
-
 <link rel="stylesheet" href="../shared/css/button.css">
 <link rel="stylesheet" href="../shared/css/bubble.css">
 <link rel="stylesheet" href="../shared/css/expandable_bubble.css">
diff --git a/chrome/browser/resources/options/language_add_language_overlay.html b/chrome/browser/resources/options/language_add_language_overlay.html
index 3bb18c4..bca2e75 100644
--- a/chrome/browser/resources/options/language_add_language_overlay.html
+++ b/chrome/browser/resources/options/language_add_language_overlay.html
@@ -3,13 +3,13 @@
 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')">
+<if expr="pp_ifdef('chromeos')">
   <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') or pp_ifdef('touchui')">
+<if expr="not pp_ifdef('chromeos')">
   <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 7c0c15f..9fa856d 100644
--- a/chrome/browser/resources/options/language_add_language_overlay.js
+++ b/chrome/browser/resources/options/language_add_language_overlay.js
@@ -48,7 +48,7 @@ cr.define('options', function() {
           displayText += ' - ' + language.nativeDisplayName;
         }
 
-        if (cr.isChromeOS && !cr.isTouch) {
+        if (cr.isChromeOS) {
           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 384f64b..c1dc7a4 100644
--- a/chrome/browser/resources/options/language_options.css
+++ b/chrome/browser/resources/options/language_options.css
@@ -118,7 +118,10 @@
   margin-top: 12px;
 }
 
-<if expr="not pp_ifdef('touchui')">
+/*
+ * In ChromeOS we present the language choices as a big page of links.
+ */
+
 html[os=chromeos] #add-language-overlay-language-list {
   -webkit-column-count: 2;
   -webkit-column-gap: 20px;
@@ -145,7 +148,6 @@ 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 1912029..7503212 100644
--- a/chrome/browser/resources/options/language_options.js
+++ b/chrome/browser/resources/options/language_options.js
@@ -77,7 +77,7 @@ cr.define('options', function() {
         }
       };
 
-      if (cr.isChromeOS && !cr.isTouch) {
+      if (cr.isChromeOS) {
         // Listen to user clicks on the add language list.
         var addLanguageList = $('add-language-overlay-language-list');
         addLanguageList.addEventListener('click',
@@ -88,27 +88,25 @@ cr.define('options', function() {
         addLanguageOkButton.addEventListener('click',
             this.handleAddLanguageOkButtonClick_.bind(this));
 
-        // Listen to user clicks on the "Change touch keyboard settings..."
-        // button.
-        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 {
-          // Show experimental features if enabled.
-          if (templateData.experimentalSpellCheckFeatures == 'true')
-            $('auto-spell-correction-option').hidden = false;
-        }
-      }
+        // Show experimental features if enabled.
+        if (templateData.experimentalSpellCheckFeatures == 'true')
+          $('auto-spell-correction-option').hidden = false;
 
-      if(!cr.isChromeOS) {
         // Handle spell check enable/disable.
         Preferences.getInstance().addEventListener(this.enableSpellCheckPref,
             this.updateEnableSpellCheck_.bind(this));
       }
+
+      // Listen to user clicks on the "Change touch keyboard settings..."
+      // button (if it exists).
+      var virtualKeyboardButton = $('language-options-virtual-keyboard');
+      if (virtualKeyboardButton) {
+        // TODO(yusukes): would be better to hide the button if no virtual
+        // keyboard is registered.
+        virtualKeyboardButton.onclick = function(e) {
+          OptionsPage.navigateToPage('virtualKeyboards');
+        };
+      }
     },
 
     // The preference is a boolean that enables/disables spell checking.
diff --git a/chrome/browser/resources/options/options.js b/chrome/browser/resources/options/options.js
index 35c8fde..5a744f3 100644
--- a/chrome/browser/resources/options/options.js
+++ b/chrome/browser/resources/options/options.js
@@ -103,7 +103,10 @@ function load() {
                         templateData.languagePinyinPageTabTitle,
                         'languagePinyinPage'),
         LanguageOptions.getInstance());
-    if (cr.isTouch) {
+    // Only use the VirtualKeyboardManager if the keyboard DOM elements (which
+    // it will assume exists) are present (i.e. if we were built with
+    // USE_VIRTUAL_KEYBOARD).
+    if ($('language-options-virtual-keyboard')) {
       OptionsPage.registerSubPage(VirtualKeyboardManager.getInstance(),
                                   LanguageOptions.getInstance());
     }
diff --git a/chrome/browser/resources/options/options_page.css b/chrome/browser/resources/options/options_page.css
index 0af6120..ff45d67 100644
--- a/chrome/browser/resources/options/options_page.css
+++ b/chrome/browser/resources/options/options_page.css
@@ -22,30 +22,31 @@
   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 {
+html[touch-optimized] #search-field {
   font-size: 13px;
   padding: 5px;
 }
-#search-field::-webkit-search-cancel-button {
+html[touch-optimized] #search-field::-webkit-search-cancel-button {
   -webkit-transform: scale(1.5);
 }
 
 /*
- * In TOUCH_UI builds, make the radio/checkbox input boxes in
+ * For touch-optimized UI, make the radio/checkbox input boxes in
  * options/preference pages easier to touch.
+ * TODO(rbyers): We need to solve this more generally for all web pages
+ * (crbug.com/99981), and perhaps temporarily for all WebUI (crbug.com/102482).
  */
-div.radio > label > span,
-div.checkbox > label > span {
+html[touch-optimized] div.radio > label > span,
+html[touch-optimized] div.checkbox > label > span {
   -webkit-padding-start: 5px;
 }
 
-label > input[type=checkbox],
-label > input[type=radio] {
+html[touch-optimized] label > input[type=checkbox],
+html[touch-optimized] label > input[type=radio] {
   -webkit-transform: scale(1.4);
 }
 
@@ -54,10 +55,9 @@ label > input[type=radio] {
  * 16 px font-size proved to be more touch friendly. It increases the touchable
  * area for buttons and input boxes.
  */
-body {
+html[touch-optimized] body {
   font-size: 16px;
 }
-</if>
 
 .overlay {
   -webkit-box-align: center;
diff --git a/chrome/browser/resources/shared/js/cr.js b/chrome/browser/resources/shared/js/cr.js
index fb47a8a..d9479f9 100644
--- a/chrome/browser/resources/shared/js/cr.js
+++ b/chrome/browser/resources/shared/js/cr.js
@@ -23,12 +23,6 @@ const cr = (function() {
   const isChromeOS = /CrOS/.test(navigator.userAgent);
 
   /**
-   * Whether this is on touchui build or not.
-   * @type {boolean}
-   */
-  const isTouch = /Touch/.test(navigator.userAgent);
-
-  /**
    * Whether this is on vanilla Linux (not chromeOS).
    * @type {boolean}
    */
@@ -47,6 +41,12 @@ const cr = (function() {
   const isViews = /views/.test(chrome.toolkit);
 
   /**
+   * Whether this window is optimized for touch-based input.
+   * @type {boolean}
+   */
+  const isTouchOptimized = !!chrome.touchOptimized;
+
+  /**
    * Sets the os and toolkit attributes in the <html> element so that platform
    * specific css rules can be applied.
    */
@@ -63,6 +63,8 @@ const cr = (function() {
       doc.documentElement.setAttribute('toolkit', 'gtk');
     if (isViews)
       doc.documentElement.setAttribute('toolkit', 'views');
+    if (isTouchOptimized)
+      doc.documentElement.setAttribute('touch-optimized', '');
   }
 
   /**
@@ -372,7 +374,7 @@ const cr = (function() {
     isWindows: isWindows,
     isLinux: isLinux,
     isViews: isViews,
-    isTouch: isTouch,
+    isTouchOptimized: isTouchOptimized,
     enablePlatformSpecificCSSRules: enablePlatformSpecificCSSRules,
     define: define,
     defineProperty: defineProperty,
diff --git a/chrome/browser/resources/shared/js/cr/ui/card_slider.js b/chrome/browser/resources/shared/js/cr/ui/card_slider.js
index b98aa66..1dc4bf6 100644
--- a/chrome/browser/resources/shared/js/cr/ui/card_slider.js
+++ b/chrome/browser/resources/shared/js/cr/ui/card_slider.js
@@ -132,19 +132,22 @@ cr.define('cr.ui', function() {
       this.frame_.addEventListener('mousewheel',
                                    this.onMouseWheel_.bind(this));
 
-      if (document.documentElement.getAttribute('touchui')) {
-        var TouchHandler = cr.ui.TouchHandler;
-        this.container_.addEventListener(TouchHandler.EventType.TOUCH_START,
-                                         this.onTouchStart_.bind(this));
-        this.container_.addEventListener(TouchHandler.EventType.DRAG_START,
-                                         this.onDragStart_.bind(this));
-        this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE,
-                                         this.onDragMove_.bind(this));
-        this.container_.addEventListener(TouchHandler.EventType.DRAG_END,
-                                         this.onDragEnd_.bind(this));
-
-        this.touchHandler_.enable(/* opt_capture */ false);
-      }
+      // Also support touch events in case a touch screen happens to be
+      // available.  Note that we could check cr.isTouchOptimized here, but
+      // in general sites should just be listening for touch events without
+      // trying to determine in advance if they may be supported (eg. a touch
+      // screen can always be plugged in after a page has loaded).
+      var TouchHandler = cr.ui.TouchHandler;
+      this.container_.addEventListener(TouchHandler.EventType.TOUCH_START,
+                                       this.onTouchStart_.bind(this));
+      this.container_.addEventListener(TouchHandler.EventType.DRAG_START,
+                                       this.onDragStart_.bind(this));
+      this.container_.addEventListener(TouchHandler.EventType.DRAG_MOVE,
+                                       this.onDragMove_.bind(this));
+      this.container_.addEventListener(TouchHandler.EventType.DRAG_END,
+                                       this.onDragEnd_.bind(this));
+
+      this.touchHandler_.enable(/* opt_capture */ false);
     },
 
     /**
diff --git a/chrome/browser/ui/webui/chrome_web_ui.cc b/chrome/browser/ui/webui/chrome_web_ui.cc
index ea37886..4663098 100644
--- a/chrome/browser/ui/webui/chrome_web_ui.cc
+++ b/chrome/browser/ui/webui/chrome_web_ui.cc
@@ -7,6 +7,7 @@
 #include "base/command_line.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/common/chrome_switches.h"
+#include "content/browser/renderer_host/render_view_host.h"
 #include "content/browser/tab_contents/tab_contents.h"
 
 #if defined(TOOLKIT_VIEWS)
@@ -35,6 +36,17 @@ bool ChromeWebUI::CanShowBookmarkBar() const {
   return false;
 }
 
+void ChromeWebUI::RenderViewCreated(RenderViewHost* render_view_host) {
+  WebUI::RenderViewCreated(render_view_host);
+
+  // Let the WebUI know that we're looking for UI that's optimized for touch
+  // input.
+  // TODO(rbyers) Figure out the right model for enabling touch-optimized UI
+  // (http://crbug.com/105380).
+  if (CommandLine::ForCurrentProcess()->HasSwitch(switches::kTouchOptimizedUI))
+    render_view_host->SetWebUIProperty("touchOptimized", "true");
+}
+
 // static
 bool ChromeWebUI::IsMoreWebUI() {
   bool more_webui = CommandLine::ForCurrentProcess()->HasSwitch(
diff --git a/chrome/browser/ui/webui/chrome_web_ui.h b/chrome/browser/ui/webui/chrome_web_ui.h
index 1e5ebc5..118a110 100644
--- a/chrome/browser/ui/webui/chrome_web_ui.h
+++ b/chrome/browser/ui/webui/chrome_web_ui.h
@@ -22,6 +22,9 @@ class ChromeWebUI : public WebUI {
   // detached from the location bar.
   virtual bool CanShowBookmarkBar() const;
 
+  // Overridden from WebUI:
+  virtual void RenderViewCreated(RenderViewHost* render_view_host) OVERRIDE;
+
   // IsMoreWebUI returns a command line flag that tracks whether to use
   // available WebUI implementations of native dialogs.
   static bool IsMoreWebUI();
diff --git a/chrome/browser/ui/webui/devtools_ui.cc b/chrome/browser/ui/webui/devtools_ui.cc
index 8a66808..5ea6be7 100644
--- a/chrome/browser/ui/webui/devtools_ui.cc
+++ b/chrome/browser/ui/webui/devtools_ui.cc
@@ -108,4 +108,6 @@ DevToolsUI::DevToolsUI(TabContents* contents) : ChromeWebUI(contents) {
 void DevToolsUI::RenderViewCreated(RenderViewHost* render_view_host) {
   render_view_host->Send(new DevToolsMsg_SetupDevToolsClient(
       render_view_host->routing_id()));
+
+  ChromeWebUI::RenderViewCreated(render_view_host);
 }
diff --git a/chrome/browser/ui/webui/html_dialog_ui.cc b/chrome/browser/ui/webui/html_dialog_ui.cc
index 05d9fec..4a35f0a 100644
--- a/chrome/browser/ui/webui/html_dialog_ui.cc
+++ b/chrome/browser/ui/webui/html_dialog_ui.cc
@@ -74,6 +74,8 @@ void HtmlDialogUI::RenderViewCreated(RenderViewHost* render_view_host) {
       chrome::NOTIFICATION_HTML_DIALOG_SHOWN,
       content::Source<WebUI>(this),
       content::Details<RenderViewHost>(render_view_host));
+
+  ChromeWebUI::RenderViewCreated(render_view_host);
 }
 
 void HtmlDialogUI::OnDialogClosed(const ListValue* args) {
diff --git a/chrome/browser/ui/webui/ntp/new_tab_ui.cc b/chrome/browser/ui/webui/ntp/new_tab_ui.cc
index cd1e9f3..9b34883 100644
--- a/chrome/browser/ui/webui/ntp/new_tab_ui.cc
+++ b/chrome/browser/ui/webui/ntp/new_tab_ui.cc
@@ -155,12 +155,15 @@ void NewTabUI::StartTimingPaint(RenderViewHost* render_view_host) {
                &NewTabUI::PaintTimeout);
 
 }
+
 void NewTabUI::RenderViewCreated(RenderViewHost* render_view_host) {
   StartTimingPaint(render_view_host);
+  ChromeWebUI::RenderViewCreated(render_view_host);
 }
 
 void NewTabUI::RenderViewReused(RenderViewHost* render_view_host) {
   StartTimingPaint(render_view_host);
+  ChromeWebUI::RenderViewReused(render_view_host);
 }
 
 bool NewTabUI::CanShowBookmarkBar() const {
diff --git a/chrome/browser/ui/webui/options/options_ui.cc b/chrome/browser/ui/webui/options/options_ui.cc
index 291e217..3455124 100644
--- a/chrome/browser/ui/webui/options/options_ui.cc
+++ b/chrome/browser/ui/webui/options/options_ui.cc
@@ -298,12 +298,12 @@ OptionsUI::~OptionsUI() {
 // Override.
 void OptionsUI::RenderViewCreated(RenderViewHost* render_view_host) {
   SetCommandLineString(render_view_host);
-  WebUI::RenderViewCreated(render_view_host);
+  ChromeWebUI::RenderViewCreated(render_view_host);
 }
 
 void OptionsUI::RenderViewReused(RenderViewHost* render_view_host) {
   SetCommandLineString(render_view_host);
-  WebUI::RenderViewReused(render_view_host);
+  ChromeWebUI::RenderViewReused(render_view_host);
 }
 
 void OptionsUI::DidBecomeActiveForReusedRenderView() {
@@ -315,7 +315,7 @@ void OptionsUI::DidBecomeActiveForReusedRenderView() {
   // initialized).
   CallJavascriptFunction("OptionsPage.reinitializeCore");
 
-  WebUI::DidBecomeActiveForReusedRenderView();
+  ChromeWebUI::DidBecomeActiveForReusedRenderView();
 }
 
 // static
diff --git a/chrome/common/chrome_switches.cc b/chrome/common/chrome_switches.cc
index ea9da6d2..1991f88 100644
--- a/chrome/common/chrome_switches.cc
+++ b/chrome/common/chrome_switches.cc
@@ -1059,6 +1059,9 @@ const char kTestType[]                      = "test-type";
 // channel with the given ID.
 const char kTestingChannelID[]              = "testing-channel";
 
+// Enables UI changes that make it easier to use with a touchscreen.
+const char kTouchOptimizedUI[]              = "touch-optimized-ui";
+
 // Experimental. Shows a dialog asking the user to try chrome. This flag is to
 // be used only by the upgrade process.
 const char kTryChromeAgain[]                = "try-chrome-again";
diff --git a/chrome/common/chrome_switches.h b/chrome/common/chrome_switches.h
index 5c135af..11f4a19a 100644
--- a/chrome/common/chrome_switches.h
+++ b/chrome/common/chrome_switches.h
@@ -287,6 +287,7 @@ extern const char kTestNaClSandbox[];
 extern const char kTestName[];
 extern const char kTestType[];
 extern const char kTestingChannelID[];
+extern const char kTouchOptimizedUI[];
 extern const char kTryChromeAgain[];
 extern const char kUninstall[];
 extern const char kUseMoreWebUI[];