Fix tool-bar auto-hide behaviour.

BUG=105797
TEST=Manual


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

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

6 files changed, 147 insertions, 23 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index 252cab8..4f0922f 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -128,6 +128,7 @@
       'webapp/me2mom/server_log_entry.js',
       'webapp/me2mom/spinner.gif',
       'webapp/me2mom/toolbar.css',
+      'webapp/me2mom/toolbar.js',
       'webapp/me2mom/ui_mode.js',
       'webapp/me2mom/util.js',
       'webapp/me2mom/wcs.js',
diff --git a/remoting/webapp/me2mom/choice.html b/remoting/webapp/me2mom/choice.html
index b92063c..c7ba334 100644
--- a/remoting/webapp/me2mom/choice.html
+++ b/remoting/webapp/me2mom/choice.html
@@ -28,6 +28,7 @@ found in the LICENSE file.
     <script src="plugin_settings.js"></script>
     <script src="remoting.js"></script>
     <script src="server_log_entry.js"></script>
+    <script src="toolbar.js"></script>
     <script src="ui_mode.js"></script>
     <script src="util.js"></script>
     <script src="xhr.js"></script>
diff --git a/remoting/webapp/me2mom/client_screen.js b/remoting/webapp/me2mom/client_screen.js
index 50d80e8..0090c53 100644
--- a/remoting/webapp/me2mom/client_screen.js
+++ b/remoting/webapp/me2mom/client_screen.js
@@ -123,7 +123,7 @@ remoting.toggleScaleToFit = function(button) {
 remoting.onResize = function() {
   if (remoting.clientSession)
     remoting.clientSession.onWindowSizeChanged();
-  recenterToolbar_();
+  remoting.toolbar.center();
 }
 
 /**
@@ -222,8 +222,8 @@ function onClientStateChange_(oldState, newState) {
   } else if (newState == remoting.ClientSession.State.CONNECTED) {
     if (remoting.clientSession) {
       remoting.setMode(remoting.AppMode.IN_SESSION);
-      recenterToolbar_();
-      showToolbarPreview_();
+      remoting.toolbar.center();
+      remoting.toolbar.preview();
       updateStatistics_();
     }
 
@@ -393,23 +393,6 @@ function updateStatistics_() {
   window.setTimeout(updateStatistics_, 1000);
 }
 
-/**
- * Force-show the tool-bar for three seconds to aid discoverability.
- */
-function showToolbarPreview_() {
-  var toolbar = document.getElementById('session-toolbar');
-  addClass(toolbar, 'toolbar-preview');
-  window.setTimeout(removeClass, 3000, toolbar, 'toolbar-preview');
-}
-
-/**
- * Update the horizontal position of the tool-bar to center it.
- */
-function recenterToolbar_() {
-  var toolbar = document.getElementById('session-toolbar');
-  var toolbarX = (window.innerWidth - toolbar.clientWidth) / 2;
-  toolbar.style['left'] = toolbarX + 'px';
-}
 
 /**
  * Start a connection to the specified host, using the stored details.
diff --git a/remoting/webapp/me2mom/remoting.js b/remoting/webapp/me2mom/remoting.js
index b96da60..33de900 100644
--- a/remoting/webapp/me2mom/remoting.js
+++ b/remoting/webapp/me2mom/remoting.js
@@ -40,6 +40,8 @@ remoting.init = function() {
   remoting.hostList = new remoting.HostList(
       document.getElementById('host-list'),
       document.getElementById('host-list-error'));
+  remoting.toolbar = new remoting.Toolbar(
+      document.getElementById('session-toolbar'));
 
   refreshEmail_();
   var email = remoting.oauth2.getCachedEmail();
@@ -165,8 +167,8 @@ function getEmail_() {
  * @return {remoting.AppMode} The mode to start in.
  */
 function getAppStartupMode_() {
-  return remoting.oauth2.isAuthenticated() ? remoting.AppMode.HOME
-      : remoting.AppMode.UNAUTHENTICATED;
+  return remoting.oauth2.isAuthenticated() ? remoting.AppMode.HOME :
+      remoting.AppMode.UNAUTHENTICATED;
 }
 
 /**
diff --git a/remoting/webapp/me2mom/toolbar.css b/remoting/webapp/me2mom/toolbar.css
index a89b243..9a56d1e 100644
--- a/remoting/webapp/me2mom/toolbar.css
+++ b/remoting/webapp/me2mom/toolbar.css
@@ -18,7 +18,7 @@
   padding: 3px 9px;
 }
 
-.toolbar-container:hover, .toolbar-preview {
+.toolbar-visible {
   top: -8px;
   -webkit-transition-delay: 0s;
 }
diff --git a/remoting/webapp/me2mom/toolbar.js b/remoting/webapp/me2mom/toolbar.js
new file mode 100644
index 0000000..b4b5644
--- /dev/null
+++ b/remoting/webapp/me2mom/toolbar.js
@@ -0,0 +1,137 @@
+// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview
+ * Class representing the client tool-bar.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @param {Element} toolbar The HTML element representing the tool-bar.
+ * @constructor
+ */
+remoting.Toolbar = function(toolbar) {
+  /**
+   * @type {Element}
+   * @private
+   */
+  this.toolbar_ = toolbar;
+  /** @type {remoting.Toolbar} */
+  var that = this;
+
+  /**
+   * @param {Event} event The mouseout event, used to determine whether or
+   *     not the mouse is leaving the tool-bar or (due to event-bubbling)
+   *     one of its children.
+   */
+  var onMouseOut = function(event) {
+    for (var e = event.toElement; e != null; e = e.parentElement) {
+      if (e == that.toolbar_) {
+        return;  // Still over a child element => ignore.
+      }
+    }
+    that.hide_();
+  };
+  this.toolbar_.onmouseout = onMouseOut;
+
+  this.toolbar_.onmouseover = function() {
+    that.showForAtLeast_(1000);
+  };
+
+  /**
+   * @type {boolean} False if the tool-bar is currently hidden, or should be
+   *      hidden once the over-shoot timer expires; true otherwise.
+   */
+  this.visible = false;
+  /**
+   * @type {number?} The id of the current timer, if any.
+   */
+  this.timerId = null;
+};
+
+/**
+ * Preview the tool-bar functionality by showing it for 3s if it is not
+ *     already visible.
+ * @return {void} Nothing.
+ */
+remoting.Toolbar.prototype.preview = function() {
+  this.showForAtLeast_(3000);
+  this.visible = false;
+};
+
+/**
+ * Center the tool-bar horizonally.
+ */
+remoting.Toolbar.prototype.center = function() {
+  var toolbarX = (window.innerWidth - this.toolbar_.clientWidth) / 2;
+  this.toolbar_.style['left'] = toolbarX + 'px';
+};
+
+/**
+ * If the tool-bar is not currently visible, show it and start a timer to
+ * prevent it from being hidden again for a short time. This is to guard
+ * against users over-shooting the tool-bar stub when trying to access it.
+ *
+ * @param {number} timeout The minimum length of time, in ms, for which to
+ *     show the tool-bar. If the hide_() method is called within this time,
+ *     it will not take effect until the timeout expires.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.Toolbar.prototype.showForAtLeast_ = function(timeout) {
+  if (this.visible) {
+    return;
+  }
+  addClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+  this.visible = true;
+  if (this.timerId) {
+    window.clearTimeout(this.timerId);
+    this.timerId = null;
+  }
+  /** @type {remoting.Toolbar} */
+  var that = this;
+  var checkVisibility = function() { that.checkVisibility_(); };
+  this.timerId = window.setTimeout(checkVisibility, timeout);
+};
+
+/**
+ * Hide the tool-bar if it is visible. If there is a visibility timer running,
+ * the tool-bar will not be hidden until it expires.
+ *
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.Toolbar.prototype.hide_ = function() {
+  if (!this.visible) {
+    return;
+  }
+  this.visible = false;
+  if (!this.timerId) {
+    this.checkVisibility_();
+  }
+};
+
+/**
+ * Hide the tool-bar if it is visible and should not be.
+ *
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.Toolbar.prototype.checkVisibility_ = function() {
+  this.timerId = null;
+  if (!this.visible) {
+    removeClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+  }
+};
+
+/** @type {remoting.Toolbar} */
+remoting.toolbar = null;
+
+/** @private */
+remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';