Add link to Hangouts Remote Desktop in the It2Me section of the remoting app.

BUG=237912

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

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

remoting/remoting.gyp

@@ -173,6 +173,7 @@
       'webapp/wcs_sandbox.html',
     ],
     'remoting_webapp_js_files': [
+      'webapp/butter_bar.js',
       'webapp/client_plugin.js',
       'webapp/client_plugin_async.js',
       'webapp/client_screen.js',
@@ -201,14 +202,13 @@
       'webapp/oauth2.js',
       'webapp/oauth2_callback.js',
       'webapp/plugin_settings.js',
-      'webapp/xhr_proxy.js',
       'webapp/remoting.js',
-      'webapp/session_connector.js',
       'webapp/server_log_entry.js',
+      'webapp/session_connector.js',
       'webapp/stats_accumulator.js',
       'webapp/storage.js',
-      'webapp/survey.js',
       'webapp/third_party_host_permissions.js',
+      'webapp/xhr_proxy.js',
       'webapp/third_party_token_fetcher.js',
       'webapp/toolbar.js',
       'webapp/ui_mode.js',
@@ -2180,6 +2180,7 @@
         'sources': [
           'base/resources_unittest.cc',
           'host/plugin/host_script_object.cc',
+          'webapp/butter_bar.js',
           'webapp/client_screen.js',
           'webapp/error.js',
           'webapp/host_list.js',

remoting/resources/remoting_strings.grd

@@ -190,15 +190,15 @@
         <message desc="The product name. Displayed in various Chrome pages, including the New Tab page, and displayed prominently on the app's main page." name="IDR_PRODUCT_NAME">
           Chrome Remote Desktop
         </message>
-	<message desc="Message displayed at the bottom of the client connect dialog if Chrome Remote Desktop is running in the wrong start-up mode." name="IDR_WARNING_NOT_WINDOWED">
+        <message desc="Message displayed at the bottom of the client connect dialog if Chrome Remote Desktop is running in the wrong start-up mode." name="IDR_WARNING_NOT_WINDOWED">
           NOTE: To ensure that all keyboard shortcuts are available, you can configure Chrome Remote Desktop to ‘Open as window’.
-	</message>
-	<message desc="Error message displayed if the user tries to connect to a computer running out-of-date Me2Me host software." name="IDR_HOST_NEEDS_UPDATE_TITLE">
-	  Chrome Remote Desktop on <ph name="HOSTNAME">$1<ex>My Linux desktop</ex></ph> is out-of-date and needs to be updated.
-	</message>
-	<message desc="Invitation to the user to participate in a user survey for Chrome Remote Desktop" name="IDR_SURVEY_INVITATION">
-	  Want to help improve Chrome Remote Desktop?
-	</message>
+        </message>
+        <message desc="Error message displayed if the user tries to connect to a computer running out-of-date Me2Me host software." name="IDR_HOST_NEEDS_UPDATE_TITLE">
+          Chrome Remote Desktop on <ph name="HOSTNAME">$1<ex>My Linux desktop</ex></ph> is out-of-date and needs to be updated.
+        </message>
+        <message name="IDR_SURVEY_INVITATION" desc="Invitation to the user to participate in a user survey for Chrome Remote Desktop">
+          Want to help improve Chrome Remote Desktop? <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://goo.gl/njH2q&gt;</ex></ph>Take the survey.<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>
+        </message>
       </if>
 
       <if expr="not pp_ifdef('_google_chrome')">
@@ -256,15 +256,15 @@
         <message desc="The product name. Displayed in various Chrome pages, including the New Tab page, and displayed prominently on the app's main page." name="IDR_PRODUCT_NAME">
           Chromoting
         </message>
-	<message desc="Message displayed at the bottom of the client connect dialog if Chromoting is running in the wrong start-up mode." name="IDR_WARNING_NOT_WINDOWED">
+        <message desc="Message displayed at the bottom of the client connect dialog if Chromoting is running in the wrong start-up mode." name="IDR_WARNING_NOT_WINDOWED">
           NOTE: To ensure that all keyboard shortcuts are available, you can configure Chromoting to ‘Open as window’.
-	</message>
-	<message desc="Error message displayed if the user tries to connect to a computer running out-of-date Me2Me host software." name="IDR_HOST_NEEDS_UPDATE_TITLE">
-	  Chromoting on <ph name="HOSTNAME">$1<ex>My Linux desktop</ex></ph> is out-of-date and needs to be updated.
-	</message>
-	<message desc="Invitation to the user to participate in a user survey for Chromoting" name="IDR_SURVEY_INVITATION">
-	  Want to help improve Chromoting?
-	</message>
+        </message>
+        <message desc="Error message displayed if the user tries to connect to a computer running out-of-date Me2Me host software." name="IDR_HOST_NEEDS_UPDATE_TITLE">
+          Chromoting on <ph name="HOSTNAME">$1<ex>My Linux desktop</ex></ph> is out-of-date and needs to be updated.
+        </message>
+        <message  name="IDR_SURVEY_INVITATION" desc="Invitation to the user to participate in a user survey for Chromoting">
+          Want to help improve Chromoting? <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://goo.gl/njH2q&gt;</ex></ph>Take the survey.<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>
+        </message>
       </if>
 
       <message desc="Label for the access code entry box. This is where the client user enters the code that permits access to the host." name="IDR_ACCESS_CODE">
@@ -544,17 +544,17 @@
         NOTE: Policy settings permit connections only between computers within your network.
       </message>
       <message desc="Link to learn more detailed information on a topic." name="IDR_LEARN_HOW">
-	Learn how.
+        Learn how.
       </message>
       <message desc="Help link displayed when the user enables the host on this computer. Clicking this link opens a page that explains why this operation is safe. This string appears in a UI with limited horizontal space. Please try to keep translations no more than about 30 characters." name="IDR_WHY_IS_THIS_SAFE">
         Why is this safe?
       </message>
-      <message desc="Survey link for users that want to take part." name="IDR_SIGN_ME_UP">
-        Take the survey
-      </message>
       <message desc="Check-box displayed when the user enters their PIN to connect to a host allowing them to 'pair' the client and host, avoiding the need to enter the PIN each time." name="IDR_REMEMBER_PIN">
         Don't ask for a PIN again when connecting to this host from this computer.
       </message>
+      <message name="IDR_HANGOUTS_INVITATION" desc="Text for the invitation to try Remote Desktop app in Hangouts.">
+        Want to help someone while having a video chat with them too? Try <ph name="LINK_BEGIN">$1<ex>&lt;a href=https://plus.google.com/hangouts&gt;</ex></ph> Remote Desktop in Google Hangouts<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>.
+      </message>
     </messages>
   </release>
 </grit>

remoting/webapp/all_js_load.gtestjs

@@ -32,6 +32,7 @@ AllJsLoadTest.prototype = {
                                  // file's days are numbered, skip it for now.
     'error.js',
     'event_handlers.js',
+    'butter_bar.js',
     //'format_iq.js',  // Already covered by format_iq.gtestjs
     'host.js',
     'host_controller.js',
@@ -56,7 +57,6 @@ AllJsLoadTest.prototype = {
     'server_log_entry.js',
     'stats_accumulator.js',
     'storage.js',
-    'survey.js',
     'toolbar.js',
     'ui_mode.js',
     //'viewer_plugin_proto.js',  // Only used by jscompiler.

remoting/webapp/butter_bar.js

+// Copyright 2013 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
+ * ButterBar class that is used to show the butter bar with various
+ * notifications.
+ */
+
+'use strict';
+
+/** @suppress {duplicate} */
+var remoting = remoting || {};
+
+/**
+ * @constructor
+ */
+remoting.ButterBar = function() {
+  this.storageKey_ = '';
+
+  /** @type{remoting.ButterBar} */
+  var that = this;
+
+  /** @param {Object} syncValues */
+  var onSyncDataLoaded = function(syncValues) {
+    chrome.storage.local.get(
+        remoting.kIT2MeVisitedStorageKey,
+        that.onStateLoaded_.bind(that, syncValues));
+  };
+
+  chrome.storage.sync.get(
+      [remoting.ButterBar.kSurveyStorageKey_,
+       remoting.ButterBar.kHangoutsStorageKey_],
+      onSyncDataLoaded);
+}
+
+/**
+ * Shows butter bar with the specified |message| and updates |storageKey| after
+ * the bar is dismissed.
+ *
+ * @param {string} messageId
+ * @param {string} substitutions
+ * @param {string} storageKey
+ * @private
+ */
+remoting.ButterBar.prototype.show_ =
+    function(messageId, substitutions, storageKey) {
+  this.storageKey_ = storageKey;
+
+  var messageElement = document.getElementById(remoting.ButterBar.kMessageId_);
+  l10n.localizeElementFromTag(messageElement, messageId, substitutions, true);
+  var acceptLink =
+      /** @type{Element} */ messageElement.getElementsByTagName('a')[0];
+  acceptLink.addEventListener(
+      'click', this.dismiss.bind(this, true), false);
+
+  document.getElementById(remoting.ButterBar.kDismissId_).addEventListener(
+      'click', this.dismiss.bind(this, false), false);
+
+  document.getElementById(remoting.ButterBar.kId_).hidden = false;
+}
+
+/**
+  * @param {Object} syncValues
+  * @param {Object} localValues
+  * @private
+  */
+remoting.ButterBar.prototype.onStateLoaded_ =
+    function(syncValues, localValues) {
+  /** @type {boolean} */
+  var surveyDismissed = !!syncValues[remoting.ButterBar.kSurveyStorageKey_];
+  /** @type {boolean} */
+  var hangoutsDismissed =
+      !!syncValues[remoting.ButterBar.kHangoutsStorageKey_];
+  /** @type {boolean} */
+  var it2meExpanded = !!localValues[remoting.kIT2MeVisitedStorageKey];
+
+  var showSurvey = !surveyDismissed;
+  var showHangouts = it2meExpanded && !hangoutsDismissed;
+
+  // If both messages can be shown choose only one randomly.
+  if (showSurvey && showHangouts) {
+    if (Math.random() > 0.5) {
+      showSurvey = false;
+    } else {
+      showHangouts = false;
+    }
+  }
+
+  if (showSurvey) {
+    this.show_(/*i18n-content*/'SURVEY_INVITATION',
+               ['<a href="http://goo.gl/njH2q" target="_blank">', '</a>'],
+               remoting.ButterBar.kSurveyStorageKey_);
+  } else if (showHangouts) {
+    this.show_(/*i18n-content*/'HANGOUTS_INVITATION',
+               ['<a id="hangouts-accept" ' +
+                'href="https://plus.google.com/hangouts/_?gid=818572447316">',
+                '</a>'],
+               remoting.ButterBar.kHangoutsStorageKey_);
+  }
+};
+
+/** @const @private */
+remoting.ButterBar.kId_ = 'butter-bar';
+
+/** @const @private */
+remoting.ButterBar.kMessageId_ = 'butter-bar-message';
+/** @const @private */
+remoting.ButterBar.kDismissId_ = 'butter-bar-dismiss';
+
+/** @const @private */
+remoting.ButterBar.kSurveyStorageKey_ = 'feedback-survey-dismissed';
+/** @const @private */
+remoting.ButterBar.kHangoutsStorageKey_ = 'hangouts-notice-dismissed';
+
+/**
+ * Hide the butter bar request and record some basic information about the
+ * current state of the world in synced storage. This may be useful in the
+ * future if we want to show the request again. At the moment, the data itself
+ * is ignored; only its presence or absence is important.
+ *
+ * @param {boolean} accepted True if the user clicked the "accept" link;
+ *     false if they clicked the close icon.
+ */
+remoting.ButterBar.prototype.dismiss = function(accepted) {
+  var value = {};
+  value[this.storageKey_] = {
+    optIn: accepted,
+    date: new Date(),
+    version: chrome.runtime.getManifest().version
+  };
+  chrome.storage.sync.set(value);
+
+  document.getElementById(remoting.ButterBar.kId_).hidden = true;
+};

remoting/webapp/main.css

@@ -377,29 +377,26 @@ section {
   margin-top: 30px;
 }
 
-#survey-opt-in {
+#butter-bar {
   position: absolute;
   top: 80px;
   left: 0;
-}
-
-.butter-bar {
   display: -webkit-box;
   width: 100%;
 }
 
-.butter-bar .close-icon {
+#butter-bar-dismiss img {
   vertical-align: top;
   opacity: 0.4;
   margin-__MSG_@@bidi_start_edge__: 2px;
   margin-__MSG_@@bidi_end_edge__: -12px;
 }
 
-.butter-bar .close-icon:hover {
+#butter-bar-dimiss:hover {
   opacity: 0.7;
 }
 
-.butter-bar > p {
+#butter-bar > p {
   background-color: #f9edbe;
   border: 1px solid #f0c36d;
   -webkit-border-radius: 2px;
@@ -410,7 +407,7 @@ section {
   margin: auto;
 }
 
-.butter-bar a {
+#butter-bar a {
   color: inherit;
   text-decoration: underline;
   padding-__MSG_@@bidi_start_edge__: 2px;

remoting/webapp/main.html

@@ -15,6 +15,7 @@ found in the LICENSE file.
     <link rel="stylesheet" href="main.css">
     <link rel="stylesheet" href="menu_button.css">
     <link rel="stylesheet" href="toolbar.css">
+    <script src="butter_bar.js"></script>
     <script src="client_plugin.js"></script>
     <script src="client_plugin_async.js"></script>
     <script src="client_screen.js"></script>
@@ -41,11 +42,10 @@ found in the LICENSE file.
     <script src="oauth2.js"></script>
     <script src="plugin_settings.js"></script>
     <script src="remoting.js"></script>
-    <script src="session_connector.js"></script>
     <script src="server_log_entry.js"></script>
+    <script src="session_connector.js"></script>
     <script src="stats_accumulator.js"></script>
     <script src="storage.js"></script>
-    <script src="survey.js"></script>
     <script src="third_party_host_permissions.js"></script>
     <script src="third_party_token_fetcher.js"></script>
     <script src="toolbar.js"></script>
@@ -89,15 +89,11 @@ found in the LICENSE file.
       </div>
     </header>
 
-    <div id="survey-opt-in" class="butter-bar" hidden>
+    <div id="butter-bar" hidden>
       <p>
-        <span i18n-content="SURVEY_INVITATION"></span>
-        <a id="survey-accept"
-           href="http://goo.gl/njH2q"
-           target="_blank"
-           i18n-content="SIGN_ME_UP"></a>
-        <a id="survey-decline" href="#">
-          <img src="icon_cross.webp" class="close-icon"></img>
+        <span id="butter-bar-message"></span>
+        <a id="butter-bar-dismiss" href="#">
+          <img src="icon_cross.webp" class="close-icon">
         </a>
       </p>
     </div>

remoting/webapp/remoting.js

@@ -164,7 +164,7 @@ remoting.initHomeScreenUi = function() {
   // Display the cached host list, then asynchronously update and re-display it.
   remoting.updateLocalHostState();
   remoting.hostList.refresh(remoting.updateLocalHostState);
-  remoting.initSurvey();
+  remoting.butterBar = new remoting.ButterBar();
 };
 
 /**

remoting/webapp/survey.js

-// Copyright 2013 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
- * Functions and event handlers to invite the user to participate in a survey
- * to help improve the product.
- */
-
-'use strict';
-
-/** @suppress {duplicate} */
-var remoting = remoting || {};
-
-var kStorageKey = 'feedback-survey-dismissed';
-var kSurveyDivId = 'survey-opt-in';
-var kSurveyAcceptId = 'survey-accept';
-var kSurveyDeclineId = 'survey-decline';
-
-/**
- * Hide the survey request and record some basic information about the current
- * state of the world in synced storage. This may be useful in the future if we
- * want to show the request again. At the moment, the data itself is ignored;
- * only its presence or absence is important.
- *
- * @param {boolean} optIn True if the user clicked the "Take the survey" link;
- *     false if they clicked the close icon.
- */
-remoting.dismissSurvey = function(optIn) {
-  var value = {};
-  value[kStorageKey] = {
-    optIn: optIn,
-    date: new Date(),
-    version: chrome.runtime.getManifest().version
-  };
-  chrome.storage.sync.set(value);
-  document.getElementById(kSurveyDivId).hidden = true;
-};
-
-/**
- * Show or hide the survey request, depending on whether or not the user has
- * already seen it.
- */
-remoting.initSurvey = function() {
-  /** @param {Object} value */
-  var onFeedbackSurveyInfo = function(value) {
-    /** @type {*} */
-    var dismissed = value[kStorageKey];
-    document.getElementById(kSurveyDivId).hidden = !!dismissed;
-  };
-  chrome.storage.sync.get(kStorageKey, onFeedbackSurveyInfo);
-  var accept = document.getElementById(kSurveyAcceptId);
-  var decline = document.getElementById(kSurveyDeclineId);
-  accept.addEventListener(
-      'click', remoting.dismissSurvey.bind(null, true), false);
-  decline.addEventListener(
-      'click', remoting.dismissSurvey.bind(null, false), false);
-};

remoting/webapp/ui_mode.js

@@ -50,6 +50,11 @@ remoting.AppMode = {
   IN_SESSION: 'in-session'
 };
 
+/** @const */
+remoting.kIT2MeVisitedStorageKey = 'it2me-visited';
+/** @const */
+remoting.kMe2MeVisitedStorageKey = 'me2me-visited';
+
 /**
  * @param {Element} element The element to check.
  * @param {string} attrName The attribute on the element to check.
@@ -152,32 +157,32 @@ remoting.showOrHideCallback = function(mode, items) {
 };
 
 remoting.showOrHideIT2MeUi = function() {
-  remoting.storage.local.get('it2me-visited',
+  remoting.storage.local.get(remoting.kIT2MeVisitedStorageKey,
                              remoting.showOrHideCallback.bind(null, 'it2me'));
 };
 
 remoting.showOrHideMe2MeUi = function() {
-  remoting.storage.local.get('me2me-visited',
+  remoting.storage.local.get(remoting.kMe2MeVisitedStorageKey,
                              remoting.showOrHideCallback.bind(null, 'me2me'));
 };
 
 remoting.showIT2MeUiAndSave = function() {
   var items = {};
-  items['it2me-visited'] = true;
+  items[remoting.kIT2MeVisitedStorageKey] = true;
   remoting.storage.local.set(items);
   remoting.showOrHideCallback('it2me', [true]);
 };
 
 remoting.showMe2MeUiAndSave = function() {
   var items = {};
-  items['me2me-visited'] = true;
+  items[remoting.kMe2MeVisitedStorageKey] = true;
   remoting.storage.local.set(items);
   remoting.showOrHideCallback('me2me', [true]);
 };
 
 remoting.resetInfographics = function() {
-  remoting.storage.local.remove('it2me-visited');
-  remoting.storage.local.remove('me2me-visited');
+  remoting.storage.local.remove(remoting.kIT2MeVisitedStorageKey);
+  remoting.storage.local.remove(remoting.kMe2MeVisitedStorageKey);
   remoting.showOrHideCallback('it2me', [false]);
   remoting.showOrHideCallback('me2me', [false]);
 }