Consolidate Help and Feeback under a single icon and add to toolbar.

BUG=343773

Review URL: https://codereview.chromium.org/225143009

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

6 files changed, 75 insertions, 25 deletions

diff --git a/remoting/webapp/feedback.js b/remoting/webapp/feedback.js
index 1ecbc19..74e4ff9 100644
--- a/remoting/webapp/feedback.js
+++ b/remoting/webapp/feedback.js
@@ -10,14 +10,26 @@ var remoting = remoting || {};
  * Show or hide the feedback button based on whether or not the current version
  * of Chrome recognizes Chrome Remote Desktop as an authorized feedback source.
  *
- * @param {HTMLElement} feedbackButton
+ * @param {HTMLElement} helpIcon The parent <span> for the help icon and the
+ *     <ul> containing the help and feedback entries.
+ * @param {HTMLElement} helpButton The Help <li> associated with the help icon.
+ * @param {HTMLElement} feedbackButton The Feedback <li> associated with the
+ *     help icon.
+ * @constructor
  */
-remoting.initFeedback = function(feedbackButton) {
+remoting.Feedback = function(helpIcon, helpButton, feedbackButton) {
+  var menuButton = new remoting.MenuButton(helpIcon);
+  var showHelp = function() {
+    window.open('https://www.google.com/support/chrome/bin/answer.py?' +
+                'answer=1649523');
+  }
+  helpButton.addEventListener('click', showHelp, false);
   var chromeVersion = parseInt(
       window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10);
   if (chromeVersion >= 35) {
-    feedbackButton.hidden = false;
-    feedbackButton.addEventListener('click', remoting.sendFeedback, false);
+    feedbackButton.addEventListener('click',
+                                    this.sendFeedback_.bind(this),
+                                    false);
   } else {
     feedbackButton.hidden = true;
   }
@@ -27,7 +39,7 @@ remoting.initFeedback = function(feedbackButton) {
  * Pass the current version of Chrome Remote Desktop to the Google Feedback
  * extension and instruct it to show the feedback dialog.
  */
-remoting.sendFeedback = function() {
+remoting.Feedback.prototype.sendFeedback_ = function() {
   var message = {
     requestFeedback: true,
     feedbackInfo: {
diff --git a/remoting/webapp/html/toolbar.html b/remoting/webapp/html/toolbar.html
index 6838f49..eeead15 100644
--- a/remoting/webapp/html/toolbar.html
+++ b/remoting/webapp/html/toolbar.html
@@ -27,7 +27,7 @@ found in the LICENSE file.
     </button>
 
     <span class="menu-button" id="send-keys-menu">
-      <button>
+      <button class="menu-button-activator">
         <span i18n-content="SEND_KEYS"></span>
         <img src="disclosure_arrow_down.webp"
              class="kd-disclosureindicator">
@@ -39,7 +39,7 @@ found in the LICENSE file.
     </span>
 
     <span class="menu-button" id="screen-options-menu">
-      <button>
+      <button class="menu-button-activator">
         <span i18n-content="SCREEN_OPTIONS"></span>
         <img src="disclosure_arrow_down.webp"
              class="kd-disclosureindicator">
@@ -53,6 +53,14 @@ found in the LICENSE file.
       </ul>
     </span>
 
+    <span class="menu-button" id="help-feedback-toolbar">
+      <img src="icon_help.webp" class="menu-button-activator help-icon">
+      <ul class="right-align">
+        <li id="help-toolbar" i18n-content="HELP"></li>
+        <li id="send-feedback-toolbar" i18n-content="ACTIONBAR_FEEDBACK"></li>
+      </ul>
+    </span>
+
   </div>
 
   <div class="toolbar-stub" id="toolbar-stub">
diff --git a/remoting/webapp/html/ui_header.html b/remoting/webapp/html/ui_header.html
index 45551fc..19e1795 100644
--- a/remoting/webapp/html/ui_header.html
+++ b/remoting/webapp/html/ui_header.html
@@ -12,18 +12,18 @@ found in the LICENSE file.
 
   <div class="box-spacer"></div>
 
-  <div id="top-secondary">
+  <div id="top-secondary" data-ui-mode="home">
     <span id="current-email"></span>
-    <span data-ui-mode="home" class="apps-v1-only">
-      <a id="sign-out" href="#" i18n-content="SIGN_OUT_BUTTON"></a>
-      <!-- TODO(jamiewalch): Add this back in when we support it.
-           <a id="connection-history"
-              i18n-content="CONNECTION_HISTORY_BUTTON"></a> |
-           -->
-    </span> |
-    <a href="https://www.google.com/support/chrome/bin/answer.py?answer=1649523"
-       target="_blank" i18n-content="HELP"></a> |
-    <a id="send-feedback" i18n-content="ACTIONBAR_FEEDBACK"></a>
+    <a id="sign-out" href="#"
+       i18n-content="SIGN_OUT_BUTTON"
+       class="apps-v1-only"></a>
+    <span class="menu-button" id="help-feedback-main">
+      <img src="icon_help.webp" class="menu-button-activator help-icon">
+      <ul class="right-align">
+        <li id="help-main" i18n-content="HELP"></li>
+        <li id="send-feedback-main" i18n-content="ACTIONBAR_FEEDBACK"></li>
+      </ul>
+    </span>
   </div>
 
 </header>
diff --git a/remoting/webapp/menu_button.css b/remoting/webapp/menu_button.css
index d495624..d20750a 100644
--- a/remoting/webapp/menu_button.css
+++ b/remoting/webapp/menu_button.css
@@ -7,18 +7,24 @@
   position: relative;
 }
 
-.menu-button button + ul {
+.menu-button-activator + ul {
   visibility: hidden;
   position: absolute;
-  top: 22px;
+}
+
+.menu-button-activator + ul:not(.right-align) {
   left: 1px;
 }
 
-.menu-button button.active + ul {
+.menu-button-activator + ul.right-align {
+  right: 1px;
+}
+
+.menu-button-activator.active + ul {
   visibility: visible;
 }
 
-.menu-button button.active {
+.menu-button-activator.active {
   background-color: #EEE;
   background-image: -webkit-gradient(linear, left top, left bottom,
                                      from(#EEE), to(#E0E0E0));
@@ -27,7 +33,7 @@
   color: #333;
 }
 
-.menu-button button .kd-disclosureindicator {
+.menu-button-activator .kd-disclosureindicator {
   vertical-align: middle;
   margin-left: 7px;
   opacity: .8;
@@ -64,4 +70,20 @@
   background-image: url('tick.webp');
   background-position: left center;
   background-repeat: no-repeat;
+}
+
+.help-icon {
+  vertical-align: -4px;
+  border: 1px solid transparent;
+  opacity: 0.35;
+  -webkit-transition: opacity 0.218s;
+}
+
+.help-icon:hover, .help-icon.active {
+  opacity: 0.5;
+}
+
+#help-feedback-toolbar {
+  margin-left: 8px;
+  margin-top: 4px;
 }
\ No newline at end of file
diff --git a/remoting/webapp/menu_button.js b/remoting/webapp/menu_button.js
index c429210..225e0e7 100644
--- a/remoting/webapp/menu_button.js
+++ b/remoting/webapp/menu_button.js
@@ -24,7 +24,8 @@ remoting.MenuButton = function(container, opt_onShow) {
    * @type {HTMLElement}
    * @private
    */
-  this.button_ = /** @type {HTMLElement} */ (container.querySelector('button'));
+  this.button_ = /** @type {HTMLElement} */
+      (container.querySelector('button,.menu-button-activator'));
 
   /**
    * @type {undefined|function():void}
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js
index b59ec6e..d015832 100644
--- a/remoting/webapp/remoting.js
+++ b/remoting/webapp/remoting.js
@@ -82,6 +82,14 @@ remoting.init = function() {
   var sandbox = /** @type {HTMLIFrameElement} */
       document.getElementById('wcs-sandbox');
   remoting.wcsSandbox = new remoting.WcsSandboxContainer(sandbox.contentWindow);
+  var menuFeedback = new remoting.Feedback(
+      document.getElementById('help-feedback-main'),
+      document.getElementById('help-main'),
+      document.getElementById('send-feedback-main'));
+  var toolbarFeedback = new remoting.Feedback(
+      document.getElementById('help-feedback-toolbar'),
+      document.getElementById('help-toolbar'),
+      document.getElementById('send-feedback-toolbar'));
 
   /** @param {remoting.Error} error */
   var onGetEmailError = function(error) {
@@ -102,7 +110,6 @@ remoting.init = function() {
   window.addEventListener('copy', pluginGotCopy_, false);
 
   remoting.initModalDialogs();
-  remoting.initFeedback(document.getElementById('send-feedback'));
 
   if (isHostModeSupported_()) {
     var noShare = document.getElementById('chrome-os-no-share');