Settings[DICE]: show promo-style banner until 10 impressions

This CL gives the sign-in row a more eye-catching banner style, and
shrinks to the normal style after 10 impressions.

Bug: 800981
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Id3b55249d0eea22d6f426faf6ef863c2355f7e92
Reviewed-on: https://chromium-review.googlesource.com/912695
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#537901}

chrome/app/settings_strings.grdp

@@ -3081,6 +3081,9 @@
     <message name="IDS_SETTINGS_PEOPLE_DOMAIN_MANAGED_PROFILE" desc="Provides the domain information for domain-managed accounts.">
       Managed by <ph name="DOMAIN">$1<ex>example.com</ex></ph>
     </message>
+    <message name="IDS_SETTINGS_PEOPLE_SIGN_IN" desc="The label of the button that lets user sign-in to chrome.">
+      Sign in
+    </message>
     <message name="IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT" desc="The text displayed to prompt users to sign in to chrome.">
       Web browsing with Google smarts
     </message>

chrome/browser/resources/settings/images/sync_banner.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="155px" height="131px" viewBox="0 0 155 131" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <polygon fill="#3874D5" points="0 114.5 154.75 114.5 154.75 0 0 0"></polygon>
+    <g transform="translate(61.000000, 53.250000)">
+      <path d="M59.25,77 L19,77 C17.35,77 16,75.65 16,74 L16,3 C16,1.35 17.35,0 19,0 L59.25,0 C60.9,0 62.25,1.35 62.25,3 L62.25,74 C62.25,75.65 60.9,77 59.25,77" fill="#4285F4"></path>
+      <path d="M31.4473,61.5527 C31.4473,70.0837 24.5313,76.9997 16.0003,76.9997 C7.4683,76.9997 0.5523,70.0837 0.5523,61.5527 C0.5523,53.0207 7.4683,46.1047 16.0003,46.1047 C24.5313,46.1047 31.4473,53.0207 31.4473,61.5527" fill="#FABB05"></path>
+    </g>
+  </g>
+</svg>
\ No newline at end of file

chrome/browser/resources/settings/people_page/sync_account_control.html

@@ -77,17 +77,61 @@
         margin: auto;
         width: 12px;
       }
+
+      #sign-in {
+        min-width: 100px;
+      }
+
+      #banner {
+        background-color: var(--google-blue-500);
+        display: none;
+      }
+
+      #banner img {
+        -webkit-margin-start: 380px;
+        height: 100px;
+        margin-bottom: -12px;
+        margin-top: 32px;
+      }
+
+      :host([showing-promo]) #banner {
+        display: flex;
+      }
+
+      :host([showing-promo]) #promo-headers {
+        line-height: 1.625rem;
+        padding-bottom: 10px;
+        padding-top: 10px;
+      }
+
+      :host([showing-promo]) #promo-headers #promo-title {
+        font-size: 1.1rem;
+      }
+
+      :host([showing-promo]) #promo-headers .secondary {
+        font-size: 0.9rem;
+      }
+
+      :host([showing-promo]) #promo-headers .separator {
+        display: none;
+      }
     </style>
-    <div class="settings-box first two-line" hidden="[[syncStatus.signedIn]]">
+    <div class="settings-box" id="banner">
+      <img src="../images/sync_banner.svg">
+    </div>
+    <div class="settings-box first two-line" id="promo-headers"
+        hidden="[[syncStatus.signedIn]]">
       <div class="start">
-        <div>[[promoLabel]]</div>
-        <div class="secondary">[[promoSecondaryLabel]]</div>
+        <div id="promo-title">[[promoLabel]]</div>
+        <div class="secondary">
+          [[promoSecondaryLabel]]
+        </div>
       </div>
       <div class="separator" hidden="[[shouldShowAvatarRow_]]"></div>
-      <paper-button class="primary-button" on-click="onSigninTap_"
-          disabled="[[syncStatus.setupInProgress]]"
+      <paper-button class="action-button" on-click="onSigninTap_"
+          disabled="[[syncStatus.setupInProgress]]" id="sign-in"
           hidden="[[shouldShowAvatarRow_]]">
-        $i18n{syncSignin}
+        $i18n{peopleSignIn}
       </paper-button>
     </div>
     <template is="dom-if" if="[[shouldShowAvatarRow_]]">

chrome/browser/resources/settings/people_page/sync_account_control.js

@@ -16,12 +16,29 @@ Polymer({
      */
     syncStatus: Object,
 
+    /**
+     * Proxy variable for syncStatus.signedIn to shield observer from being
+     * triggered multiple times whenever syncStatus changes.
+     * @private {boolean}
+     */
+    signedIn_: {
+      type: Boolean,
+      computed: 'computeSignedIn_(syncStatus.signedIn)',
+      observer: 'onSignedInChanged_',
+    },
+
     /** @private {!Array<!settings.StoredAccount>} */
     storedAccounts_: Object,
 
     /** @private {?settings.StoredAccount} */
     shownAccount_: Object,
 
+    showingPromo: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+
     promoLabel: String,
 
     promoSecondaryLabel: String,
@@ -56,6 +73,26 @@ Polymer({
         'stored-accounts-updated', this.handleStoredAccounts_.bind(this));
   },
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeSignedIn_: function() {
+    return !!this.syncStatus.signedIn;
+  },
+
+  /** @private */
+  onSignedInChanged_: function() {
+    if (!this.showingPromo && !this.syncStatus.signedIn &&
+        this.syncBrowserProxy_.getPromoImpressionCount() < 10) {
+      this.showingPromo = true;
+      this.syncBrowserProxy_.incrementPromoImpressionCount();
+    } else {
+      // Turn off the promo if the user is signed in.
+      this.showingPromo = false;
+    }
+  },
+
   /**
    * @param {string} label
    * @param {string} name

chrome/browser/resources/settings/people_page/sync_browser_proxy.js

@@ -111,6 +111,12 @@ settings.PageStatus = {
 };
 
 cr.define('settings', function() {
+  /**
+   * Key to be used with localStorage.
+   * @type {string}
+   */
+  const PROMO_IMPRESSION_COUNT_KEY = 'signin-promo-count';
+
   /** @interface */
   class SyncBrowserProxy {
     // <if expr="not chromeos">
@@ -131,6 +137,16 @@ cr.define('settings', function() {
      */
     manageOtherPeople() {}
 
+    /**
+     * @return {number} the number of times the sync account promo was shown.
+     */
+    getPromoImpressionCount() {}
+
+    /**
+     * Increment the number of times the sync account promo was shown.
+     */
+    incrementPromoImpressionCount() {}
+
     // </if>
 
     // <if expr="chromeos">
@@ -212,6 +228,20 @@ cr.define('settings', function() {
       chrome.send('SyncSetupManageOtherPeople');
     }
 
+    /** @override */
+    getPromoImpressionCount() {
+      return parseInt(
+                 window.localStorage.getItem(PROMO_IMPRESSION_COUNT_KEY), 10) ||
+          0;
+    }
+
+    /** @override */
+    incrementPromoImpressionCount() {
+      window.localStorage.setItem(
+          PROMO_IMPRESSION_COUNT_KEY,
+          (this.getPromoImpressionCount() + 1).toString());
+    }
+
     // </if>
     // <if expr="chromeos">
     /** @override */

chrome/browser/resources/settings/settings_resources.grd

@@ -703,7 +703,9 @@
       <if expr="not chromeos">
         <structure name="IDR_SETTINGS_PEOPLE_PAGE_SYNC_ACCOUNT_CONTROL_HTML"
                    file="people_page/sync_account_control.html"
-                   type="chrome_html" />
+                   type="chrome_html"
+                   flattenhtml="true"
+                   allowexternalscript="true" />
         <structure name="IDR_SETTINGS_PEOPLE_PAGE_SYNC_ACCOUNT_CONTROL_JS"
                    file="people_page/sync_account_control.js"
                    type="chrome_html" />

chrome/browser/ui/webui/settings/md_settings_localized_strings_provider.cc

@@ -1456,6 +1456,7 @@ void AddPeopleStrings(content::WebUIDataSource* html_source) {
     {"showShortcutLabel", IDS_SETTINGS_PROFILE_SHORTCUT_TOGGLE_LABEL},
 #endif  // defined(OS_CHROMEOS)
 #if BUILDFLAG(ENABLE_DICE_SUPPORT)
+    {"peopleSignIn", IDS_SETTINGS_PEOPLE_SIGN_IN},
     {"peopleSignInPrompt", IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT},
     {"peopleSignInPromptSecondary",
      IDS_SETTINGS_PEOPLE_SIGN_IN_PROMPT_SECONDARY},

chrome/browser/ui/webui/settings/people_handler.cc

@@ -65,6 +65,7 @@
 #include "components/signin/core/browser/signin_manager.h"
 #endif
 #if BUILDFLAG(ENABLE_DICE_SUPPORT)
+#include "chrome/browser/profiles/profile_avatar_icon_util.h"
 #include "chrome/browser/signin/account_tracker_service_factory.h"
 #include "components/signin/core/browser/account_tracker_service.h"
 #include "third_party/skia/include/core/SkBitmap.h"