Update Assistant optin UI for new specs

Link to new mock: https://docs.google.com/presentation/d/1wEy1dkObL9GSVGKNigqNHiqn1m7ciHHLgcdW2oWwXcY/edit#slide=id.g36522ea91d_0_2

Bug: b/78190629
Test: Manual Test
Change-Id: Ie8715c8b2c08eeb5a62514457c2fb1487f37c710
Reviewed-on: https://chromium-review.googlesource.com/1171860Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Yue Li <updowndota@chromium.org>
Cr-Commit-Position: refs/heads/master@{#583116}

chrome/app/chromeos_strings.grdp

@@ -4808,9 +4808,6 @@
   <message name="IDS_VOICE_INTERACTION_VALUE_PROP_NEXT_BUTTION" desc="Button label for accepting voice interaction value proposition.">
     Next
   </message>
-  <message name="IDS_VOICE_INTERACTION_VALUE_PROP_MORE_BUTTION" desc="Button label for more information in voice interaction value proposition.">
-    More
-  </message>
   <message name="IDS_WAIT_FOR_CONTAINER_READY_TITLE" desc="Title of the wait for container ready OOBE screen.">
     Just a sec
   </message>
@@ -4835,6 +4832,9 @@
   <message name="IDS_ASSISTANT_GET_MORE_SCREEN_TITLE" desc="Title for assistant get more screen.">
     Get the most out of your Assistant
   </message>
+  <message name="IDS_ASSISTANT_GET_MORE_SCREEN_INTRO" desc="Introduction message for assistant get more screen.">
+    Your Assistant can offer more relevant suggestions and specific actions related to what's on your screen. You can change this in Assistant settings
+  </message>
   <message name="IDS_ASSISTANT_READY_SCREEN_TITLE" desc="Title for assistant ready screen.">
     Your Assistant is ready
   </message>
@@ -4871,6 +4871,12 @@
   <message name="IDS_ASSISTANT_HOTWORD_NOTIFICATION_TITLE" desc="Title for assistant hotword enable notification.">
     Turn on 'Ok Google'
   </message>
+  <message name="IDS_ASSISTANT_VALUE_PROP_TITLE" desc="Title for assistant value prop.">
+    Meet your Google Assistant
+  </message>
+  <message name="IDS_ASSISTANT_ACTIVITY_CONTROL_POPUP_LINK" desc="Link text for activity control details popup.">
+    Learn more
+  </message>
 
   <!-- Print Job Notification -->
   <message name="IDS_PRINT_JOB_NOTIFICATION_DISPLAY_SOURCE" desc="The context title of printing notification.">

chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.css

@@ -2,19 +2,13 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.title {
-  padding: 32px 0 18px 0;
-}
-
-.content {
+.message {
   color: rgba(0, 0, 0, .8);
-  font-size: 11px;
+  font-size: 13px;
   padding-top: 6px;
 }
 
-.extra-content {
-  color: rgba(0, 0, 0, .54);
-  font-size: 10px;
+.content {
   padding-top: 6px;
 }
 
@@ -26,6 +20,6 @@
 
 #confirm-reject-img {
   display: block;
-  height: 100px;
+  height: 150px;
   margin: auto;
 }

chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.html

@@ -10,28 +10,28 @@
     <link rel="stylesheet" href="assistant_confirm_reject.css">
     <link rel="stylesheet" href="assistant_shared_styles.css">
     <oobe-dialog id="confirm-reject-dialog" role="dialog" has-buttons
-        hide-shadow no-footer-padding no-header android>
+        hide-shadow no-footer-padding no-header>
       <div slot="footer">
-        <div id="main-container">
+        <div class="container">
           <img id="logo" src="assistant_logo.png">
           <div class="title" id="title-text"></div>
           <img id="confirm-reject-img" src="assistant_confirm_reject.svg">
           <paper-radio-group selected="accept" selectable="cr-radio-button">
             <cr-radio-button id="accept" name="accept">
               <div class="sub-title" id="accept-title-text"></div>
-              <div class="content" id="accept-message-text"></div>
-              <div class="extra-content" id="accept-message-extra-text"></div>
+              <div class="message" id="accept-message-text"></div>
+              <div class="content" id="accept-message-extra-text"></div>
             </cr-radio-button>
             <cr-radio-button id="reject" name="reject">
               <div class="sub-title" id="reject-title-text"></div>
-              <div class="content" id="reject-message-text"></div>
+              <div class="message" id="reject-message-text"></div>
             </cr-radio-button>
           </paper-radio-group>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
-        <oobe-text-button id="next-button" inverse android on-tap="onNextTap_"
+        <oobe-text-button id="next-button" inverse on-tap="onNextTap_"
             disabled="[[buttonsDisabled]]" hidden="[[moreContents]]">
           <div id="next-button-text"></div>
         </oobe-text-button>

chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.css

@@ -2,8 +2,8 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.title {
-  padding: 32px 0 24px 0;
+#intro-text {
+  padding-bottom: 48px;
 }
 
 p {

chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.html

@@ -8,17 +8,19 @@
     <link rel="stylesheet" href="assistant_get_more.css">
     <link rel="stylesheet" href="assistant_shared_styles.css">
     <oobe-dialog id="get-more-dialog" role="dialog" has-buttons hide-shadow
-        no-footer-padding no-header android>
+        no-footer-padding no-header>
       <div slot="footer">
-        <div id="main-container">
+        <div class="container">
           <img id="logo" src="assistant_logo.png">
           <div class="title" id="title-text"></div>
+          <div class="sub-title" id="intro-text"></div>
+          <div class="line"></div>
           <div id="insertion-point"></div>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
-        <oobe-text-button id="next-button" inverse android on-tap="onNextTap_"
+        <oobe-text-button id="next-button" inverse on-tap="onNextTap_"
             disabled="[[buttonsDisabled]]" hidden="[[moreContents]]">
           <div id="next-button-text"></div>
         </oobe-text-button>

chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js

@@ -69,6 +69,7 @@ Polymer({
    */
   reloadContent: function(data) {
     this.$['title-text'].textContent = data['getMoreTitle'];
+    this.$['intro-text'].textContent = data['getMoreIntro'];
     this.$['next-button-text'].textContent = data['getMoreContinueButton'];
 
     this.consentStringLoaded_ = true;
@@ -89,7 +90,7 @@ Polymer({
           'icon-src',
           'data:text/html;charset=utf-8,' +
               encodeURIComponent(zippy.getWrappedIcon(data['iconUri'])));
-      zippy.setAttribute('no-zippy', true);
+      zippy.setAttribute('toggle-style', true);
       zippy.id = 'zippy' + i;
       var title = document.createElement('div');
       title.className = 'zippy-title';

chrome/browser/resources/chromeos/assistant_optin/assistant_loading.css

@@ -12,12 +12,7 @@
 
 #loading-container,
 #error-container {
-  height: 372px;
-  overflow: hidden;
-  padding: 48px 48px 0 48px;
-  position: absolute;
   visibility: hidden;
-  width: 480px;
 }
 
 .loading-animation #loading-container,
@@ -29,19 +24,10 @@
   pointer-events: none;
 }
 
-.title {
-  padding: 32px 0 18px 0;
-}
-
-.sub-title {
-  padding-bottom: 8px;
-}
-
 #loading-message {
   color: rgba(0, 0, 0, .54);
-  font-size: 12px;
-  line: 17px;
-  padding: 168px 0 0 0;
+  font-size: 13px;
+  padding: 210px 0 0 0;
 }
 
 paper-progress {
@@ -49,7 +35,7 @@ paper-progress {
   --paper-progress-container-color: #CEE0FC;
   --paper-progress-secondary-color: rgb(66, 133, 244);
   display: block;
-  height: 3px;
-  padding: 4px 0 0 0;
+  height: 4px;
+  padding: 12px 0 0 0;
   width: 100%;
 }

chrome/browser/resources/chromeos/assistant_optin/assistant_loading.html

@@ -11,15 +11,15 @@
     <link rel="stylesheet" href="assistant_loading.css">
     <link rel="stylesheet" href="assistant_shared_styles.css">
     <oobe-dialog id="loading-dialog" role="dialog" has-buttons hide-shadow
-        no-footer-padding no-header android>
+        no-footer-padding no-header>
       <div slot="footer">
-        <div id="error-container">
+        <div class="container" id="error-container">
           <img id="logo" src="assistant_logo.png">
           <div class="title" i18n-content="assistantOptinLoadErrorTitle"></div>
           <div class="sub-title" i18n-content="assistantOptinLoadErrorMessage">
           </div>
         </div>
-        <div id="loading-container">
+        <div class="container" id="loading-container">
           <div id="loading-message">
             <div i18n-content="assistantOptinLoading"></div>
           </div>

chrome/browser/resources/chromeos/assistant_optin/assistant_optin.css

-/* Copyright 2018 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. */
-
-#consent-dialog {
-  display: flex;
-  flex-flow: column;
-  font-size: 16px;
-  width: 576px;
-}

chrome/browser/resources/chromeos/assistant_optin/assistant_optin.html

@@ -31,7 +31,6 @@
 <link rel="stylesheet" href="chrome://resources/css/chrome_shared.css">
 <link rel="stylesheet" href="../login/oobe_flex_layout.css">
 <link rel="stylesheet" href="../login/oobe_screen.css">
-<link rel="stylesheet" href="assistant_optin.css">
 <link rel="stylesheet" href="setting_zippy.css">
 <style include="paper-button-style cr-icons cr-shared-style"></style>
 

chrome/browser/resources/chromeos/assistant_optin/assistant_ready.css

@@ -2,17 +2,9 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-.title {
-  padding-top: 32px;
-}
-
-.sub-title {
-  padding-top: 12px;
-}
-
 #ready-img {
   display: block;
   height: 180px;
   margin: auto;
-  padding: 48px 0 0 32px;
+  padding: 72px 0 0 32px;
 }

chrome/browser/resources/chromeos/assistant_optin/assistant_ready.html

@@ -8,9 +8,9 @@
     <link rel="stylesheet" href="assistant_ready.css">
     <link rel="stylesheet" href="assistant_shared_styles.css">
     <oobe-dialog id="ready-dialog" role="dialog" has-buttons hide-shadow
-        no-footer-padding no-header android>
+        no-footer-padding no-header>
       <div slot="footer">
-        <div id="main-container">
+        <div class="container">
           <img id="logo" src="assistant_logo.png">
           <div class="title" i18n-content="assistantReadyTitle"></div>
           <div class="sub-title" i18n-content="assistantReadyMessage"></div>
@@ -19,7 +19,7 @@
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
-        <oobe-text-button id="next-button" inverse android on-tap="onNextTap_"
+        <oobe-text-button id="next-button" inverse on-tap="onNextTap_"
             disabled="[[buttonsDisabled]]" hidden="[[moreContents]]">
           <div i18n-content="assistantReadyButton"></div>
         </oobe-text-button>

chrome/browser/resources/chromeos/assistant_optin/assistant_shared_styles.css

@@ -2,24 +2,44 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#main-container {
-  height: 372px;
+a {
+  color: var(--google-blue-500);
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.container {
+  height: 496px;
   overflow: hidden;
-  padding: 48px 48px 0 48px;
+  padding: 60px 64px 0 64px;
   position: absolute;
-  width: 480px;
+  width: 640px;
+}
+
+.line {
+  background-color: rgba(0, 0, 0, .14);
+  height: 1px;
+  margin: 8px 0 8px 0;
 }
 
 .title {
-  font-size: 18px;
+  font: 28px 'Google Sans', sans-serif;
+  font-weight: 500;
+  padding: 32px 0 16px 0;
 }
 
 .sub-title {
-  font-size: 12px;
+  font: 13px Roboto, sans-serif;
+  font-weight: 400;
+}
+
+.content {
+  color: rgba(0, 0, 0, .54);
+  font-size: 13px;
 }
 
 #logo {
-  height: 24px;
+  height: 32px;
   margin: 0;
 }
 

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.css

@@ -3,11 +3,11 @@
  * found in the LICENSE file. */
 
 .title {
-  padding: 32px 0 24px 0;
+  font-size: 27px;
+  padding-bottom: 48px;
 }
 
-#footer {
-  color: rgba(0, 0, 0, .54);
-  font-size: 11px;
-  padding-top: 4px;
+#footer-text {
+  font-size: 13px;
+  padding-top: 16px;
 }

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.html

@@ -8,20 +8,19 @@
     <link rel="stylesheet" href="assistant_shared_styles.css">
     <link rel="stylesheet" href="assistant_third_party.css">
     <oobe-dialog id="third-party-dialog" role="dialog" has-buttons hide-shadow
-        no-footer-padding no-header android>
+        no-footer-padding no-header>
       <div slot="footer">
-        <div id="main-container">
+        <div class="container">
           <img id="logo" src="assistant_logo.png">
           <div class="title" id="title-text"></div>
+          <div class="line"></div>
           <div id="insertion-point"></div>
-          <div id="footer">
-            <div id="footer-text"></div>
-          </div>
+          <div id="footer-text"></div>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
         <div class="flex"></div>
-        <oobe-text-button id="next-button" inverse android on-tap="onNextTap_"
+        <oobe-text-button id="next-button" inverse on-tap="onNextTap_"
             disabled="[[buttonsDisabled]]" hidden="[[moreContents]]">
           <div id="next-button-text"></div>
         </oobe-text-button>

chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js

@@ -89,6 +89,8 @@ Polymer({
           'icon-src',
           'data:text/html;charset=utf-8,' +
               encodeURIComponent(zippy.getWrappedIcon(data['iconUri'])));
+      zippy.setAttribute('expand-style', true);
+
       var title = document.createElement('div');
       title.className = 'zippy-title';
       title.innerHTML = this.sanitizer_.sanitizeHtml(data['title']);

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.css

@@ -8,50 +8,68 @@
   margin: auto;
 }
 
-#view-container,
-#more-container {
-  height: 372px;
-  overflow: hidden;
-  overflow-y: scroll;
-  padding: 48px 48px 0 48px;
-  position: absolute;
-  width: 480px;
+.sub-title {
+  padding-bottom: 16px;
 }
 
-#view-container {
-  padding-top: 32px;
+#value-prop-container {
+  width: 50%;
 }
 
-.title {
-  padding-bottom: 10px;
+#consents-container {
+  border-left: 1px solid rgba(0, 0, 0, .14);
+  padding-left: 24px;
+  width: 50%;
 }
 
-.sub-title {
-  padding: 8px 0 8px 0;
+#user-name {
+  padding-left: 8px;
 }
 
-.content {
-  color: rgba(0, 0, 0, .54);
-  font-size: 11px;
-  padding-bottom: 10px;
+#footer-text {
+  padding-top: 16px;
 }
 
-.line {
-  background-color: rgba(0, 0, 0, .14);
-  height: 1px;
-  margin: 8px 0 8px 0;
+#user-image {
+  border-radius: 50%;
+  height: 24px;
+}
+
+.oobe-popup {
+  border-radius: 8px;
+  box-shadow: unset;
+}
+
+#overlay-text {
+  box-sizing: border-box;
+  margin: auto;
+  min-height: 200px;
+  padding: 24px 24px 16px 24px;
+  width: 100%;
+}
+
+#overlay-close-top {
+  background-image: url(chrome://theme/IDR_CLOSE_DIALOG);
+  background-position: center;
+  background-repeat: no-repeat;
+  height: 14px;
+  position: absolute;
+  right: 7px;
+  top: 7px;
+  width: 14px;
+  z-index: 1;
 }
 
-#footer {
-  color: rgba(0, 0, 0, .54);
-  font-size: 11px;
-  padding-top: 4px;
+#overlay-close-top:hover {
+  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
 }
 
-#skip-button {
-  color: rgb(66, 133, 244);
+#overlay-close-top:active {
+  background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
 }
 
-#more-button {
-  margin-inline-end: 18px;
+.button-strip {
+  display: flex;
+  justify-content: flex-end;
+  margin: 8px;
 }

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html

@@ -7,40 +7,58 @@
 <dom-module id="assistant-value-prop">
   <template>
     <link rel="stylesheet" href="../login/oobe_flex_layout.css">
+    <link rel="stylesheet" href="../login/oobe_popup_overlay.css">
     <link rel="stylesheet" href="assistant_shared_styles.css">
     <link rel="stylesheet" href="assistant_value_prop.css">
     <oobe-dialog id="value-prop-dialog" class="value-prop-loading"
-        role="dialog" has-buttons no-footer-padding no-header android>
+        role="dialog" has-buttons no-footer-padding no-header>
       <div slot="footer">
-        <div id="view-container">
-          <webview id="value-prop-view"></webview>
-          <div class="line"></div>
+        <div class="container">
+          <img id="logo" src="assistant_logo.png">
+          <div class="title" id="title-text"></div>
           <div class="sub-title" id="intro-text"></div>
-          <div class="content" id="identity"></div>
-          <div id="insertion-point-0"></div>
-        </div>
-        <div id="more-container" hidden>
-          <div id="insertion-point-1"></div>
-          <div id="footer">
-            <div id="footer-text"></div>
+          <div class="flex layout horizontal">
+            <div id="value-prop-container">
+              <div class="flex layout horizontal center">
+                <img id="user-image">
+                <div class="content" id="user-name"></div>
+              </div>
+              <webview id="value-prop-view"></webview>
+            </div>
+            <div id="consents-container">
+              <div id="insertion-point"></div>
+            </div>
           </div>
+          <div class="content" id="footer-text"></div>
         </div>
       </div>
       <div slot="bottom-buttons" class="flex layout horizontal">
-        <oobe-text-button id="skip-button" android on-tap="onSkipTap_"
+        <div class="flex"></div>
+        <oobe-text-button id="skip-button" on-tap="onSkipTap_"
             disabled="[[buttonsDisabled]]">
           <div id="skip-button-text"></div>
         </oobe-text-button>
-        <div class="flex"></div>
-        <oobe-text-button id="more-button" inverse android on-tap="onMoreTap_"
-            disabled="[[buttonsDisabled]]" hidden="[[!moreContents]]">
-          <div i18n-content="assistantOptinMoreButton"></div>
-        </oobe-text-button>
-        <oobe-text-button id="next-button" inverse android on-tap="onNextTap_"
-            disabled="[[buttonsDisabled]]" hidden="[[moreContents]]">
+        <oobe-text-button id="next-button" inverse on-tap="onNextTap_"
+            disabled="[[buttonsDisabled]]">
           <div id="next-button-text"></div>
         </oobe-text-button>
       </div>
     </oobe-dialog>
+
+    <div id="learn-more-overlay" class="popup-overlay" hidden>
+      <div id="overlay-container" class="oobe-popup not-resizable">
+        <div id="overlay-close-top">
+        </div>
+        <div id="overlay-text">
+          <b id="overlay-title-text"></b><p></p>
+          <div id="overlay-additional-info-text"></div>
+        </div>
+        <div class="button-strip">
+          <oobe-text-button inverse id="overlay-close-bottom">
+            <div i18n-content="assistantOptinOKButton"></div>
+          </oobe-text-button>
+        </div>
+      </div>
+    </div>
   </template>
 </dom-module>

chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js

@@ -41,14 +41,6 @@ Polymer({
           'https://www.gstatic.com/opa-android/oobe/a02187e41eed9e42/v1_omni_en_us.html',
     },
 
-    /**
-     * Whether there are more consent contents to show.
-     */
-    moreContents: {
-      type: Boolean,
-      value: false,
-    },
-
     /**
      * Whether user accept the activity control.
      */
@@ -131,18 +123,6 @@ Polymer({
     chrome.send('AssistantValuePropScreen.userActed', ['skip-pressed']);
   },
 
-  /**
-   * On-tap event handler for more button.
-   *
-   * @private
-   */
-  onMoreTap_: function() {
-    this.$['view-container'].hidden = true;
-    this.$['more-container'].hidden = false;
-    this.moreContents = false;
-    this.$['next-button'].focus();
-  },
-
   /**
    * On-tap event handler for next button.
    *
@@ -153,6 +133,27 @@ Polymer({
     chrome.send('AssistantValuePropScreen.userActed', ['next-pressed']);
   },
 
+  /**
+   * Sets learn more content text and shows it as overlay dialog.
+   * @param {string} content HTML formatted text to show.
+   */
+  showLearnMoreOverlay: function(title, additionalInfo) {
+    this.$['overlay-title-text'].innerHTML =
+        this.sanitizer_.sanitizeHtml(title);
+    this.$['overlay-additional-info-text'].innerHTML =
+        this.sanitizer_.sanitizeHtml(additionalInfo);
+
+    var overlay = this.$['learn-more-overlay'];
+    overlay.hidden = false;
+  },
+
+  /**
+   * Hides overlay dialog.
+   */
+  hideOverlay: function() {
+    this.$['learn-more-overlay'].hidden = true;
+  },
+
   /**
    * Reloads value prop webview.
    */
@@ -223,8 +224,10 @@ Polymer({
    * Reload the page with the given consent string text data.
    */
   reloadContent: function(data) {
+    this.$['user-image'].src = data['valuePropUserImage'];
+    this.$['title-text'].textContent = data['valuePropTitle'];
     this.$['intro-text'].textContent = data['valuePropIntro'];
-    this.$['identity'].textContent = data['valuePropIdentity'];
+    this.$['user-name'].textContent = data['valuePropIdentity'];
     this.$['next-button-text'].textContent = data['valuePropNextButton'];
     this.$['skip-button-text'].textContent = data['valuePropSkipButton'];
     this.$['footer-text'].innerHTML =
@@ -247,8 +250,8 @@ Polymer({
           'icon-src',
           'data:text/html;charset=utf-8,' +
               encodeURIComponent(zippy.getWrappedIcon(data['iconUri'])));
-      if (i == 0)
-        zippy.setAttribute('hide-line', true);
+      zippy.setAttribute('hide-line', true);
+      zippy.setAttribute('popup-style', true);
 
       var title = document.createElement('div');
       title.className = 'zippy-title';
@@ -260,22 +263,18 @@ Polymer({
       description.innerHTML = this.sanitizer_.sanitizeHtml(data['description']);
       zippy.appendChild(description);
 
-      var additional = document.createElement('div');
-      additional.className = 'zippy-additional';
-      additional.innerHTML =
-          this.sanitizer_.sanitizeHtml(data['additionalInfo']);
-      zippy.appendChild(additional);
+      var learnMoreLink = document.createElement('a');
+      learnMoreLink.className = 'learn-more-link';
+      learnMoreLink.textContent = data['popupLink'];
+      learnMoreLink.setAttribute('href', 'javascript:void(0)');
+      learnMoreLink.onclick = function(title, additionalInfo) {
+        this.showLearnMoreOverlay(title, additionalInfo);
+      }.bind(this, data['title'], data['additionalInfo']);
+      zippy.appendChild(learnMoreLink);
 
-      if (i == 0) {
-        this.$['insertion-point-0'].appendChild(zippy);
-      } else {
-        this.$['insertion-point-1'].appendChild(zippy);
-      }
+      this.$['insertion-point'].appendChild(zippy);
     }
 
-    if (zippy_data.length >= 2)
-      this.moreContents = true;
-
     this.settingZippyLoaded_ = true;
     if (this.webViewLoaded_ && this.consentStringLoaded_) {
       this.onPageLoaded();
@@ -289,11 +288,7 @@ Polymer({
     this.fire('loaded');
 
     this.buttonsDisabled = false;
-    if (this.moreContents) {
-      this.$['more-button'].focus();
-    } else {
-      this.$['next-button'].focus();
-    }
+    this.$['next-button'].focus();
   },
 
   /**
@@ -301,6 +296,11 @@ Polymer({
    */
   onShow: function() {
     var requestFilter = {urls: ['<all_urls>'], types: ['main_frame']};
+
+    this.$['overlay-close-top'].addEventListener(
+        'click', this.hideOverlay.bind(this));
+    this.$['overlay-close-bottom'].addEventListener(
+        'click', this.hideOverlay.bind(this));
     this.valuePropView_ = this.$['value-prop-view'];
     this.locale =
         loadTimeData.getString('locale').replace('-', '_').toLowerCase();

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.css

@@ -6,20 +6,18 @@
   padding-bottom: 14px;
 }
 
-.title {
-  font-size: 12px;
-}
-
 .content {
-  color: rgba(0, 0, 0, .54);
-  font-size: 11px;
   padding: 6px 0 6px 0;
 }
 
-.content[noZippy] {
+.content[toggleStyle] {
   padding-bottom: 0;
 }
 
+.content[popupStyle] {
+  padding-bottom: 24px;
+}
+
 .icon {
   min-width: 38px;
 }
@@ -37,9 +35,3 @@
 .indent {
   padding: 6px 0 0 38px;
 }
-
-.line {
-  background-color: rgba(0, 0, 0, .14);
-  height: 1px;
-  margin: 8px 0 8px 0;
-}

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.html

@@ -7,25 +7,27 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-collapse/iron-collapse.html">
 <dom-module id="setting-zippy">
   <template>
-    <link rel="stylesheet" href="setting_zippy.css">
     <link rel="stylesheet" href="../login/oobe_flex_layout.css">
+    <link rel="stylesheet" href="setting_zippy.css">
+    <link rel="stylesheet" href="assistant_shared_styles.css">
     <div class="flex layout horizontal">
       <div class="icon">
         <webview class="icon-view" src="[[iconSrc]]"></webview>
       </div>
       <div>
-        <div class="title">
+        <div class="sub-title">
           <content select=".zippy-title"></content>
         </div>
-        <div class="content" noZippy$="[[noZippy]]">
-          <content select=".zippy-description"></content>
+        <div class="content" toggleStyle$="[[toggleStyle]]"
+            popupStyle$="[[popupStyle]]">
+          <content select=".zippy-description, .learn-more-link"></content>
         </div>
       </div>
       <div class="flex"></div>
-      <cr-expand-button expanded="{{expanded_}}" hidden="[[noZippy]]">
+      <cr-expand-button expanded="{{expanded_}}" hidden="[[!expandStyle]]">
       </cr-expand-button>
       <div class="toggle">
-        <content select=".zippy-toggle" hidden="[[!noZippy]]"></content>
+        <content select=".zippy-toggle" hidden="[[!toggleStyle]]"></content>
       </div>
     </div>
     <iron-collapse opened="[[expanded_]]">

chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js

@@ -16,7 +16,17 @@ Polymer({
       value: false,
     },
 
-    noZippy: {
+    expandStyle: {
+      type: Boolean,
+      value: false,
+    },
+
+    toggleStyle: {
+      type: Boolean,
+      value: false,
+    },
+
+    popupStyle: {
       type: Boolean,
       value: false,
     },

chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_handler.cc

@@ -6,6 +6,7 @@
 
 #include "chrome/browser/browser_process.h"
 #include "chrome/browser/profiles/profile.h"
+#include "chrome/browser/ui/webui/chromeos/user_image_source.h"
 #include "chrome/grit/browser_resources.h"
 #include "chrome/grit/generated_resources.h"
 #include "chromeos/services/assistant/public/mojom/constants.mojom.h"
@@ -13,8 +14,10 @@
 #include "components/arc/arc_prefs.h"
 #include "components/login/localized_values_builder.h"
 #include "components/prefs/pref_service.h"
+#include "components/user_manager/user_manager.h"
 #include "services/service_manager/public/cpp/connector.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/base/webui/web_ui_util.h"
 
 namespace chromeos {
 
@@ -76,6 +79,8 @@ base::Value CreateZippyData(const SettingZippyList& zippy_list) {
                   base::Value(setting_zippy.additional_info_paragraph(0)));
     }
     data.SetKey("iconUri", base::Value(setting_zippy.icon_uri()));
+    data.SetKey("popupLink", base::Value(l10n_util::GetStringUTF16(
+                                 IDS_ASSISTANT_ACTIVITY_CONTROL_POPUP_LINK)));
     zippy_data.GetList().push_back(std::move(data));
   }
   return zippy_data;
@@ -160,8 +165,17 @@ base::Value GetSettingsUiStrings(const assistant::SettingsUi& settings_ui,
 
   // Add activity controll string constants.
   if (activity_control_needed) {
+    scoped_refptr<base::RefCountedMemory> image =
+        chromeos::UserImageSource::GetUserImage(
+            user_manager::UserManager::Get()->GetActiveUser()->GetAccountId());
+    std::string icon_url = webui::GetPngDataUrl(image->front(), image->size());
+    dictionary.SetKey("valuePropUserImage", base::Value(icon_url));
+
     dictionary.SetKey("valuePropIdentity",
                       base::Value(activity_control_ui.identity()));
+    dictionary.SetKey(
+        "valuePropTitle",
+        base::Value(l10n_util::GetStringUTF16(IDS_ASSISTANT_VALUE_PROP_TITLE)));
     if (activity_control_ui.intro_text_paragraph_size()) {
       dictionary.SetKey(
           "valuePropIntro",
@@ -213,6 +227,8 @@ base::Value GetSettingsUiStrings(const assistant::SettingsUi& settings_ui,
   // Add get more screen string constants.
   dictionary.SetKey("getMoreTitle", base::Value(l10n_util::GetStringUTF16(
                                         IDS_ASSISTANT_GET_MORE_SCREEN_TITLE)));
+  dictionary.SetKey("getMoreIntro", base::Value(l10n_util::GetStringUTF16(
+                                        IDS_ASSISTANT_GET_MORE_SCREEN_INTRO)));
   dictionary.SetKey(
       "getMoreContinueButton",
       base::Value(l10n_util::GetStringUTF16(IDS_ASSISTANT_CONTINUE_BUTTON)));

chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc

@@ -29,8 +29,8 @@ namespace {
 
 bool is_active = false;
 
-constexpr int kAssistantOptInDialogWidth = 576;
-constexpr int kAssistantOptInDialogHeight = 480;
+constexpr int kAssistantOptInDialogWidth = 768;
+constexpr int kAssistantOptInDialogHeight = 640;
 
 }  // namespace
 

chrome/browser/ui/webui/chromeos/assistant_optin/value_prop_screen_handler.cc

@@ -40,8 +40,7 @@ void ValuePropScreenHandler::DeclareLocalizedValues(
                IDS_VOICE_INTERACTION_VALUE_PROP_LOAD_ERROR_MESSAGE);
   builder->Add("assistantOptinRetryButton",
                IDS_VOICE_INTERACTION_VALUE_PROP_RETRY_BUTTON);
-  builder->Add("assistantOptinMoreButton",
-               IDS_VOICE_INTERACTION_VALUE_PROP_MORE_BUTTION);
+  builder->Add("assistantOptinOKButton", IDS_OOBE_OK_BUTTON_TEXT);
   builder->Add("back", IDS_EULA_BACK_BUTTON);
   builder->Add("next", IDS_EULA_NEXT_BUTTON);
 }