Add a new string to entice users to remotedesktop.google.com.

We would like some flexibility around the order of annoucement for
forthcoming features, so this CL removes the requirement that only
later messages are displayed, instead suppressing only the most
recently-displayed message. It also adds strings for file transfer
and multi-monitor and cleans up some of the CSS to handle long strings.

Change-Id: Iab73367c7a8f09d588b45c3d1a02514a83094a20
Reviewed-on: https://chromium-review.googlesource.com/c/1371074Reviewed-by: Joe Downing <joedow@chromium.org>
Commit-Queue: Jamie Walch <jamiewalch@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615609}

remoting/resources/remoting_strings.grd

@@ -1354,10 +1354,13 @@ Securely access your computer from your iOS device. It's fast, simple and free.
       <message  name="IDS_WEBSITE_INVITE_STABLE" desc="Invitation to all users to try the new version">
         Chrome Remote Desktop is now on the web! Check out our <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://example.com&gt;</ex></ph>free web app<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>.
       </message>
-      <message  name="IDS_WEBSITE_INVITE_DEPRECATION_1" desc="Invitation to all users to try the new version">
-        Chrome Remote Desktop is moving to a new home on the web. Try our <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://example.com&gt;</ex></ph>web app<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>—it's fast and free, with all the same features as before.
+      <message  name="IDS_WEBSITE_INVITE_FILE_TRANSFER" desc="Announcement of the file transfer feature">
+        Chrome Remote Desktop is now on the web with new features including file transfer! Check out our <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://example.com&gt;</ex></ph>web app<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>.
       </message>
-      <message  name="IDS_WEBSITE_INVITE_DEPRECATION_2" desc="Requirement all users to try the new version">
+      <message  name="IDS_WEBSITE_INVITE_MULTI_MONITOR" desc="Announcement of improved support for multi-monitor">
+        Chrome Remote Desktop is now on the web. Try our <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://example.com&gt;</ex></ph>web app<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>—it's fast and free, with even more features, including improved support for multiple monitors.
+      </message>
+      <message  name="IDS_WEBSITE_INVITE_DEPRECATION" desc="Requirement all users to try the new version">
         This app is no longer supported. To ensure you're getting the latest features and security updates, please use the <ph name="LINK_BEGIN">$1<ex>&lt;a href=http://example.com&gt;</ex></ph>Chrome Remote Desktop web app<ph name="LINK_END">$2<ex>&lt;/a&gt;</ex></ph>.
       </message>
       <if expr="is_macosx">

remoting/webapp/crd/html/butter_bar.css

@@ -7,7 +7,8 @@
   position: absolute;
   top: 80px;
   left: 0;
-  display: -webkit-box;
+  display: flex;
+  justify-content: center;
   width: 100%;
 }
 
@@ -30,7 +31,7 @@
   color: #222;
   font-size: 12px;
   padding: 4px 16px;
-  margin: auto;
+  margin: 0 8px;
 }
 
 #butter-bar.red > p {

remoting/webapp/crd/js/butter_bar.js

@@ -25,8 +25,9 @@ remoting.ButterBar = function(writeLogFunction) {
   this.messages_ = [
     {id: /*i18n-content*/'WEBSITE_INVITE_BETA', dismissable: true},
     {id: /*i18n-content*/'WEBSITE_INVITE_STABLE', dismissable: true},
-    {id: /*i18n-content*/'WEBSITE_INVITE_DEPRECATION_1', dismissable: true},
-    {id: /*i18n-content*/'WEBSITE_INVITE_DEPRECATION_2', dismissable: false},
+    {id: /*i18n-content*/'WEBSITE_INVITE_FILE_TRANSFER', dismissable: true},
+    {id: /*i18n-content*/'WEBSITE_INVITE_MULTI_MONITOR', dismissable: true},
+    {id: /*i18n-content*/'WEBSITE_INVITE_DEPRECATION', dismissable: false},
   ];
   // TODO(jamiewalch): Read the message index using metricsPrivate.
   this.currentMessage_ = -1;
@@ -155,8 +156,9 @@ remoting.ButterBar.prototype.getMigrationPhase_ = function() {
     case 1:
       return Phase.STABLE;
     case 2:
-      return Phase.DEPRECATION_1;
     case 3:
+      return Phase.DEPRECATION_1;
+    case 4:
       return Phase.DEPRECATION_2;
     default:
       return Phase.UNSPECIFIED_PHASE;
@@ -184,7 +186,7 @@ remoting.ButterBar.prototype.onStateLoaded_ = function(syncValues, url) {
   // it unconditionally.
   var elapsed = remoting.ButterBar.now_() - messageState.timestamp;
   var show =
-      this.currentMessage_ > messageState.index ||
+      this.currentMessage_ != messageState.index ||
       !this.messages_[this.currentMessage_].dismissable ||
       (!messageState.hidden && elapsed <= remoting.ButterBar.kTimeout_);
 

remoting/webapp/crd/js/butter_bar_unittest.js

@@ -239,6 +239,28 @@ QUnit.test('should be shown if the index has increased', function(assert) {
   });
 });
 
+
+QUnit.test('should be shown if the index has decreased', function(assert) {
+  var MigrationPhase = remoting.ChromotingEvent.ChromotingDotComMigration.Phase;
+  var MigrationEvent = remoting.ChromotingEvent.ChromotingDotComMigration.Event;
+  this.currentMessage = 0;
+  chrome.storage.sync.get.callsArgWith(1, {
+    "message-state": {
+      "hidden": true,
+      "index": 1,
+      "timestamp": 0,
+    }
+  });
+  this.now = remoting.ButterBar.kTimeout_ + 1;
+  return this.butterBar.init().then(() => {
+    assert.ok(this.butterBar.root_.hidden == false);
+    verifyLog(
+        assert, 0, MigrationEvent.DEPRECATION_NOTICE_IMPRESSION,
+        MigrationPhase.BETA)
+  });
+});
+
+
 QUnit.test('should be red and not dismissable for the final message',
            function(assert) {
   var MigrationPhase = remoting.ChromotingEvent.ChromotingDotComMigration.Phase;