Added survey butter-bar to web-app.

The butter-bar is shown until the user either closes it with the X icon or begins the survey. Once dismissed, a cookie is stored in sync storage to prevent it showing up again for that user on another computer (note that this uses Chrome Sync, so it relies on them being signed in to Chrome).

BUG=191368

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

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

10 files changed, 140 insertions, 10 deletions

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index 4105bfe..2349ef4 100644
--- a/remoting/remoting.gyp
+++ b/remoting/remoting.gyp
@@ -206,6 +206,7 @@
       'webapp/server_log_entry.js',
       'webapp/stats_accumulator.js',
       'webapp/storage.js',
+      'webapp/survey.js',
       'webapp/toolbar.js',
       'webapp/ui_mode.js',
       'webapp/wcs.js',
diff --git a/remoting/resources/remoting_strings.grd b/remoting/resources/remoting_strings.grd
index 04e6e73..808e2e9 100644
--- a/remoting/resources/remoting_strings.grd
+++ b/remoting/resources/remoting_strings.grd
@@ -193,6 +193,9 @@
 	<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>
       </if>
 
       <if expr="not pp_ifdef('_google_chrome')">
@@ -253,6 +256,9 @@
 	<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>
       </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">
@@ -537,6 +543,9 @@
       <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>
     </messages>
   </release>
 </grit>
diff --git a/remoting/webapp/all_js_load.gtestjs b/remoting/webapp/all_js_load.gtestjs
index 8650e6c..7c8aeac 100644
--- a/remoting/webapp/all_js_load.gtestjs
+++ b/remoting/webapp/all_js_load.gtestjs
@@ -55,6 +55,7 @@ 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.
diff --git a/remoting/webapp/appsv2.patch b/remoting/webapp/appsv2.patch
index 9403811..8c2fabb 100644
--- a/remoting/webapp/appsv2.patch
+++ b/remoting/webapp/appsv2.patch
@@ -10,7 +10,7 @@ index 5dfc368..f69d984 100644
        { event: 'click', id: 'share-button', fn: remoting.tryShare },
        { event: 'click', id: 'access-mode-button', fn: goEnterAccessCode },
        { event: 'click', id: 'cancel-share-button', fn: remoting.cancelShare },
-@@ -118,6 +117,4 @@ function onBeforeUnload() {
+@@ -117,6 +116,4 @@ function onBeforeUnload() {
  }
  
  window.addEventListener('load', onLoad, false);
@@ -34,7 +34,7 @@ diff --git a/remoting/webapp/host_table_entry.js b/remoting/webapp/host_table_en
 index 4eb09d9..6d2ce85 100644
 --- a/host_table_entry.js
 +++ b/host_table_entry.js
-@@ -191,9 +191,7 @@ remoting.HostTableEntry.prototype.updateStatus = function(opt_forEdit) {
+@@ -176,9 +176,7 @@ remoting.HostTableEntry.prototype.updateStatus = function(opt_forEdit) {
        /** @type {string} */
        var encodedHostId = encodeURIComponent(this.host.hostId)
        this.onConnectReference_ = function() {
@@ -89,9 +89,10 @@ index 5be9243..39052b9 100644
    "permissions": [
      "OAUTH2_ACCOUNTS_HOST/*",
      "OAUTH2_API_BASE_URL/*",
-@@ -30,17 +22,22 @@
+@@ -30,18 +22,22 @@
      "TALK_GADGET_HOST/talkgadget/*",
      "https://relay.google.com/*",
+     "storage",
      "clipboardRead",
 -    "clipboardWrite"
 -  ],
@@ -101,8 +102,7 @@ index 5be9243..39052b9 100644
 -    { "path": "libremoting_host_plugin.x64.so", "public": false },
 -    { "path": "remoting_host_plugin.plugin", "public": false }
 +    "clipboardWrite",
-+    "experimental",
-+    "storage"
++    "experimental"
    ],
 +  "oauth2": {
 +    "client_id": "45833509441.apps.googleusercontent.com",
@@ -135,7 +135,7 @@ index f89072a..2fadd83 100644
    remoting.stats = new remoting.ConnectionStats(
        document.getElementById('statistics'));
    remoting.formatIq = new remoting.FormatIq();
-@@ -118,9 +115,6 @@ remoting.initDaemonUi = function () {
+@@ -129,9 +126,6 @@ remoting.initHomeScreenUi = function () {
    document.getElementById('share-button').disabled =
        !remoting.hostController.isPluginSupported();
    remoting.setMode(remoting.AppMode.HOME);
diff --git a/remoting/webapp/jscompiler_hacks.js b/remoting/webapp/jscompiler_hacks.js
index ec7fdb5..79f2750 100644
--- a/remoting/webapp/jscompiler_hacks.js
+++ b/remoting/webapp/jscompiler_hacks.js
@@ -77,6 +77,9 @@ chrome.storage = {};
 /** @type {remoting.MockStorage} */
 chrome.storage.local;
 
+/** @type {remoting.MockStorage} */
+chrome.storage.sync;
+
 /** @type {Object} */
 chrome.app.runtime = {
   /** @type {chrome.Event} */
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index 5b48cee..58a63ba 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -377,6 +377,45 @@ section {
   margin-top: 30px;
 }
 
+#survey-opt-in {
+  position: absolute;
+  top: 80px;
+  left: 0;
+}
+
+.butter-bar {
+  display: -webkit-box;
+  width: 100%;
+}
+
+.butter-bar .close-icon {
+  vertical-align: top;
+  opacity: 0.4;
+  margin-__MSG_@@bidi_start_edge__: 2px;
+  margin-__MSG_@@bidi_end_edge__: -12px;
+}
+
+.butter-bar .close-icon:hover {
+  opacity: 0.7;
+}
+
+.butter-bar > p {
+  background-color: #f9edbe;
+  border: 1px solid #f0c36d;
+  -webkit-border-radius: 2px;
+  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.2);
+  color: #222;
+  font-size: 12px;
+  padding: 4px 16px;
+  margin: auto;
+}
+
+.butter-bar a {
+  color: inherit;
+  text-decoration: underline;
+  padding-__MSG_@@bidi_start_edge__: 2px;
+}
+
 .message {
   margin-bottom: 24px;
 }
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index 6a41abf..6004b4b 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -44,6 +44,7 @@ found in the LICENSE file.
     <script src="server_log_entry.js"></script>
     <script src="stats_accumulator.js"></script>
     <script src="storage.js"></script>
+    <script src="survey.js"></script>
     <script src="toolbar.js"></script>
     <script src="ui_mode.js"></script>
     <script src="xhr.js"></script>
@@ -84,6 +85,19 @@ found in the LICENSE file.
       </div>
     </header>
 
+    <div id="survey-opt-in" class="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>
+        </a>
+      </p>
+    </div>
+
     <div data-ui-mode="home" hidden>
 
       <section>
diff --git a/remoting/webapp/manifest.json b/remoting/webapp/manifest.json
index 5be9243..13f9346 100644
--- a/remoting/webapp/manifest.json
+++ b/remoting/webapp/manifest.json
@@ -29,6 +29,7 @@
     "DIRECTORY_API_BASE_URL/*",
     "TALK_GADGET_HOST/talkgadget/*",
     "https://relay.google.com/*",
+    "storage",
     "clipboardRead",
     "clipboardWrite"
   ],
diff --git a/remoting/webapp/remoting.js b/remoting/webapp/remoting.js
index b84058b..931d0f7 100644
--- a/remoting/webapp/remoting.js
+++ b/remoting/webapp/remoting.js
@@ -93,7 +93,7 @@ remoting.init = function() {
       }
     }
     // No valid URL parameters, start up normally.
-    remoting.initDaemonUi();
+    remoting.initHomeScreenUi();
   }
   remoting.hostList.load(onLoad);
 
@@ -122,9 +122,11 @@ remoting.onEmail = function(email) {
   document.getElementById('get-started-me2me').disabled = false;
 };
 
-/** initDaemonUi is called if the app is not starting up in session mode, and
- * also if the user cancels pin entry or the connection in session mode. */
-remoting.initDaemonUi = function() {
+/**
+ * initHomeScreenUi is called if the app is not starting up in session mode,
+ * and also if the user cancels pin entry or the connection in session mode.
+ */
+remoting.initHomeScreenUi = function() {
   remoting.hostController = new remoting.HostController();
   document.getElementById('share-button').disabled =
       !remoting.hostController.isPluginSupported();
@@ -137,6 +139,7 @@ remoting.initDaemonUi = function() {
   // Display the cached host list, then asynchronously update and re-display it.
   remoting.updateLocalHostState();
   remoting.hostList.refresh(remoting.updateLocalHostState);
+  remoting.initSurvey();
 };
 
 /**
diff --git a/remoting/webapp/survey.js b/remoting/webapp/survey.js
new file mode 100644
index 0000000..13954e3
--- /dev/null
+++ b/remoting/webapp/survey.js
@@ -0,0 +1,59 @@
+// 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);
+};