Change tool-bar behaviour to click-to-show.

remoting/webapp/toolbar.css

Index: remoting/webapp/toolbar.css
diff --git a/remoting/webapp/toolbar.css b/remoting/webapp/toolbar.css
index 9a56d1e7f58b43bb454eda3c169df2938fd8cb57..45312d8d36b805d066957e95b721ab9cc22595e3 100644
--- a/remoting/webapp/toolbar.css
+++ b/remoting/webapp/toolbar.css
@@ -1,14 +1,13 @@
-/* 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);
+}