From e1663b1eb39de42c988edc1f643872ee2dddc418 Mon Sep 17 00:00:00 2001
From: "jamiewalch@chromium.org"
 <jamiewalch@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98>
Date: Fri, 22 Mar 2013 18:14:48 +0000
Subject: [PATCH] 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
---
 remoting/remoting.gyp                   |  1 +
 remoting/resources/remoting_strings.grd |  9 +++++
 remoting/webapp/all_js_load.gtestjs     |  1 +
 remoting/webapp/appsv2.patch            | 12 +++----
 remoting/webapp/jscompiler_hacks.js     |  3 ++
 remoting/webapp/main.css                | 39 ++++++++++++++++++++++
 remoting/webapp/main.html               | 14 ++++++++
 remoting/webapp/manifest.json           |  1 +
 remoting/webapp/remoting.js             | 11 +++---
 remoting/webapp/survey.js               | 59 +++++++++++++++++++++++++++++++++
 10 files changed, 140 insertions(+), 10 deletions(-)
 create mode 100644 remoting/webapp/survey.js

diff --git a/remoting/remoting.gyp b/remoting/remoting.gyp
index 4105bfe37d7e..2349ef4f56cc 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 04e6e73f6e62..808e2e9adc6f 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 8650e6cb6c22..7c8aeac69969 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 940381138c42..8c2fabb2bf65 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 ec7fdb5cfa9a..79f27509e7d7 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 5b48cee5503a..58a63ba6b3cf 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 6a41abff6e3c..6004b4bb73e6 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 5be924357e18..13f93466a9fa 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 b84058b66250..931d0f71b880 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 000000000000..13954e338aa3
--- /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);
+};
-- 
2.11.4.GIT