Change tool-bar behaviour to click-to-show. This is based on user feedback the...

Change tool-bar behaviour to click-to-show. This is based on user feedback the auto-show behaviour makes it hard to access the top of the host screen. By auto-expanding only the stub, the inaccessible part of the host screen is reduced.

BUG=110211
TEST=Manual

Review URL: https://chromiumcodereview.appspot.com/9129009

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

remoting/webapp/choice.html

@@ -81,7 +81,7 @@ found in the LICENSE file.
           </button>
         </span>
       </div>
-      <div class="toolbar-stub">
+      <div class="toolbar-stub" id="toolbar-stub">
         <div class="arrow-down"></div>
       </div>
     </div> <!-- session-toolbar -->

remoting/webapp/client_screen.js

@@ -288,7 +288,7 @@ function startSession_() {
   remoting.clientSession =
       new remoting.ClientSession(
           remoting.hostJid, remoting.hostPublicKey,
-          remoting.accessCode, "v1_token", "",
+          remoting.accessCode, 'v1_token', '',
           /** @type {string} */ (remoting.oauth2.getCachedEmail()),
           remoting.ClientSession.Mode.IT2ME,
           onClientStateChange_);
@@ -421,7 +421,7 @@ remoting.connectMe2Me = function(hostId, retryIfOffline) {
 
   // TODO(sergeyu): Ask pin only when it is necessary: crbug.com/111290 .
   remoting.setMode(remoting.AppMode.CLIENT_PIN_PROMPT);
-}
+};
 
 /**
  * Start a connection to the specified host, using the cached details
@@ -461,7 +461,7 @@ function connectMe2MeWithAccessToken_(token) {
     remoting.clientSession =
         new remoting.ClientSession(
             remoting.hostJid, remoting.hostPublicKey,
-            pin, "spake2_hmac,spake2_plain", remoting.hostId,
+            pin, 'spake2_hmac,spake2_plain', remoting.hostId,
             /** @type {string} */ (remoting.oauth2.getCachedEmail()),
             remoting.ClientSession.Mode.ME2ME, onClientStateChange_);
     remoting.clientSession.createPluginAndConnect(

remoting/webapp/event_handlers.js

@@ -54,6 +54,8 @@ function onLoad() {
       { event: 'click', id: 'client-reconnect-button', fn: reload },
       { event: 'click', id: 'cancel-button',
         fn: remoting.cancelPendingOperation },
+      { event: 'click', id: 'toolbar-stub',
+        fn: function() { remoting.toolbar.toggle(); } },
       { event: 'submit', id: 'access-code-form', fn: sendAccessCode },
       { event: 'submit', id: 'pin-form', fn: connectHostWithPin }
   ];

remoting/webapp/toolbar.css

-/* Copyright (c) 2011 The Chromium Authors. All rights reserved.
+/* Copyright (c) 2012 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.
  */
 
 .toolbar-container {
   position: fixed;
-  top: -45px;
+  top: -48px;
   width: 640px;
-  -webkit-transition: top 0.2s linear;
-  -webkit-transition-delay: 0.7s;
+  -webkit-transition: top 0.15s ease;
   font-size: 13px;
   pointer-events: none;
   z-index: 1;
@@ -20,7 +19,6 @@
 
 .toolbar-visible {
   top: -8px;
-  -webkit-transition-delay: 0s;
 }
 
 .toolbar-container div {
@@ -39,6 +37,12 @@
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
   pointer-events: all;
   clip: rect(0, 999px, 999px, -999px);
+  -webkit-transition: height 0.15s ease;
+}
+
+.toolbar-stub-extended,
+.toolbar-visible .toolbar-stub {
+  height: 14px;
 }
 
 .toolbar-border {
@@ -65,11 +69,28 @@
 }
 
 .arrow-down {
+  position: absolute;
   width: 0;
   height: 0;
   border-left: 5px solid transparent;
   border-right: 5px solid transparent;
   border-top: 5px solid white;
-  left: auto;
-  right: auto;
+  left: 62px;
+  bottom: 2px;
+  opacity: 0.5;
+  -webkit-transition: bottom 0.15s ease, opacity 0.1s linear;
+}
+
+.toolbar-stub-extended .arrow-down,
+.toolbar-visible .arrow-down {
+  bottom: 6px;
 }
+
+
+.toolbar-stub:hover .arrow-down {
+  opacity: 1.0;
+}
+
+.toolbar-visible .arrow-down {
+  -webkit-transform: rotate(180deg);
+}
\ No newline at end of file

remoting/webapp/toolbar.js

-// Copyright (c) 2011 The Chromium Authors. All rights reserved.
+// Copyright (c) 2012 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.
 
@@ -23,48 +23,58 @@ remoting.Toolbar = function(toolbar) {
    */
   this.toolbar_ = toolbar;
   /**
-   * @type {boolean} False if the tool-bar is currently hidden, or should be
-   *      hidden once the over-shoot timer expires; true otherwise.
+   * @type {Element}
+   * @private
    */
-  this.visible = false;
+  this.stub_ = toolbar.querySelector('.toolbar-stub');
   /**
-   * @type {number?} The id of the current timer, if any.
+   * @type {number?} The id of the preview timer, if any.
+   * @private
    */
-  this.timerId = null;
-
-  /** @type {remoting.Toolbar} */
-  var that = this;
-
+  this.timerId_ = null;
   /**
-   * @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.
+   * @type {number} The left edge of the tool-bar stub, updated on resize.
+   * @private
    */
-  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.stubLeft_ = 0;
+  /**
+   * @type {number} The right edge of the tool-bar stub, updated on resize.
+   * @private
+   */
+  this.stubRight_ = 0;
 
-  this.toolbar_.onmouseover = function() {
-    that.showForAtLeast_(1000);
-  };
+  /** @type {remoting.Toolbar} */
+  var that = this;
 
+  window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
   window.addEventListener('resize', function() { that.center(); }, false);
+
+  // Prevent the preview canceling if the user is interacting with the tool-bar.
+  var stopTimer = function() {
+    if (that.timerId_) {
+      window.clearTimeout(that.timerId_);
+      that.timerId_ = null;
+    }
+  }
+  this.toolbar_.addEventListener('mousemove', stopTimer, false);
 };
 
 /**
- * Preview the tool-bar functionality by showing it for 3s if it is not
- *     already visible.
+ * Preview the tool-bar functionality by showing it for 3s.
  * @return {void} Nothing.
  */
 remoting.Toolbar.prototype.preview = function() {
-  this.showForAtLeast_(3000);
-  this.visible = false;
+  addClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+  if (this.timerId_) {
+    window.clearTimeout(this.timerId_);
+    this.timerId_ = null;
+  }
+  /** @type {remoting.Toolbar} */
+  var that = this;
+  var endPreview = function() {
+    removeClass(that.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+  };
+  this.timerId_ = window.setTimeout(endPreview, 3000);
 };
 
 /**
@@ -73,67 +83,66 @@ remoting.Toolbar.prototype.preview = function() {
 remoting.Toolbar.prototype.center = function() {
   var toolbarX = (window.innerWidth - this.toolbar_.clientWidth) / 2;
   this.toolbar_.style['left'] = toolbarX + 'px';
+  var r = this.stub_.getBoundingClientRect();
+  this.stubLeft_ = r.left;
+  this.stubRight_ = r.right;
 };
 
 /**
- * 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
+ * Toggle the tool-bar visibility.
  */
-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;
+remoting.Toolbar.prototype.toggle = function() {
+  if (hasClass(this.toolbar_.className,
+               remoting.Toolbar.VISIBLE_CLASS_)) {
+    removeClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+  } else {
+    addClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
   }
-  /** @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.
+ * Test the specified co-ordinate to see if it is close enough to the stub
+ * to activate it.
  *
- * @return {void} Nothing.
+ * @param {number} x The x co-ordinate.
+ * @param {number} y The y co-ordinate.
+ * @return {boolean} True if the position should activate the tool-bar stub, or
+ *     false otherwise.
  * @private
  */
-remoting.Toolbar.prototype.hide_ = function() {
-  if (!this.visible) {
-    return;
-  }
-  this.visible = false;
-  if (!this.timerId) {
-    this.checkVisibility_();
-  }
+remoting.Toolbar.prototype.hitTest_ = function(x, y) {
+  var threshold = 50;
+  return (x >= this.stubLeft_ - threshold &&
+          x <= this.stubRight_ + threshold &&
+          y < threshold);
 };
 
 /**
- * Hide the tool-bar if it is visible and should not be.
+ * Called whenever the mouse moves in the document. This is used to make the
+ * active area of the tool-bar stub larger without making a corresponding area
+ * of the host screen inactive.
  *
+ * @param {Event} event The mouse move event.
  * @return {void} Nothing.
- * @private
  */
-remoting.Toolbar.prototype.checkVisibility_ = function() {
-  this.timerId = null;
-  if (!this.visible) {
-    removeClass(this.toolbar_, remoting.Toolbar.VISIBLE_CLASS_);
+remoting.Toolbar.onMouseMove = function(event) {
+  if (remoting.toolbar) {
+    if (remoting.toolbar.hitTest_(event.x, event.y)) {
+      addClass(remoting.toolbar.stub_, remoting.Toolbar.STUB_EXTENDED_CLASS_);
+    } else {
+      removeClass(remoting.toolbar.stub_,
+                  remoting.Toolbar.STUB_EXTENDED_CLASS_);
+    }
+  } else {
+    document.removeEventListener('mousemove',
+                                 remoting.Toolbar.onMouseMove, false);
   }
 };
 
 /** @type {remoting.Toolbar} */
 remoting.toolbar = null;
 
+/** @private */
+remoting.Toolbar.STUB_EXTENDED_CLASS_ = 'toolbar-stub-extended';
 /** @private */
 remoting.Toolbar.VISIBLE_CLASS_ = 'toolbar-visible';