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/1171860
Reviewed-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}diff --git a/chrome/app/chromeos_strings.grdp b/chrome/app/chromeos_strings.grdp
index f0d9bab..3535685 100644
--- a/chrome/app/chromeos_strings.grdp
+++ b/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.">
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.css
index 49ff75ba..63c8c7b 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.css
+++ b/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;
}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.html
index 3dd38a28..e79112a 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_confirm_reject.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.css
index eb2cc99..70d09dab 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.css
+++ b/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 {
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.html
index 6e83ee2..de1ee820 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js
index e60680d..480fa7de 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js
+++ b/chrome/browser/resources/chromeos/assistant_optin/assistant_get_more.js
@@ -69,6 +69,7 @@
*/
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 @@
'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';
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.css
index 5469665..052ecae0 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.css
+++ b/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-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%;
}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.html
index 5117ec6..47941ac 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_loading.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_optin.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_optin.css
deleted file mode 100644
index bbcc925..0000000
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_optin.css
+++ /dev/null
@@ -1,10 +0,0 @@
-/* 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;
-}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_optin.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_optin.html
index 8b3b8f92..4727f5a 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_optin.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_ready.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_ready.css
index ca470a4b..5affae8 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_ready.css
+++ b/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;
}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_ready.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_ready.html
index e4bff59..5af0408 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_ready.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_shared_styles.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_shared_styles.css
index 0099ded6..52e8c555 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_shared_styles.css
+++ b/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;
}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.css
index f39597f..181db8a 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.css
+++ b/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;
}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.html
index 0633e72..4c8b42f 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js
index 83d8f8d..b25e1dd 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js
+++ b/chrome/browser/resources/chromeos/assistant_optin/assistant_third_party.js
@@ -89,6 +89,8 @@
'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']);
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.css b/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.css
index 7871756..84f3a546 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.css
+++ b/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;
-}
-
-#view-container {
- padding-top: 32px;
-}
-
-.title {
- padding-bottom: 10px;
-}
-
.sub-title {
- padding: 8px 0 8px 0;
+ padding-bottom: 16px;
}
-.content {
- color: rgba(0, 0, 0, .54);
- font-size: 11px;
- padding-bottom: 10px;
+#value-prop-container {
+ width: 50%;
}
-.line {
- background-color: rgba(0, 0, 0, .14);
- height: 1px;
- margin: 8px 0 8px 0;
+#consents-container {
+ border-left: 1px solid rgba(0, 0, 0, .14);
+ padding-left: 24px;
+ width: 50%;
}
-#footer {
- color: rgba(0, 0, 0, .54);
- font-size: 11px;
- padding-top: 4px;
+#user-name {
+ padding-left: 8px;
}
-#skip-button {
- color: rgb(66, 133, 244);
+#footer-text {
+ padding-top: 16px;
}
-#more-button {
- margin-inline-end: 18px;
+#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;
+}
+
+#overlay-close-top:hover {
+ background-image: url(chrome://theme/IDR_CLOSE_DIALOG_H);
+}
+
+#overlay-close-top:active {
+ background-image: url(chrome://theme/IDR_CLOSE_DIALOG_P);
+}
+
+.button-strip {
+ display: flex;
+ justify-content: flex-end;
+ margin: 8px;
}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html b/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html
index 0134b1e..e9da92f 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.html
+++ b/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>
diff --git a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js b/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js
index 2d9dfb30..4730611 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js
+++ b/chrome/browser/resources/chromeos/assistant_optin/assistant_value_prop.js
@@ -42,14 +42,6 @@
},
/**
- * Whether there are more consent contents to show.
- */
- moreContents: {
- type: Boolean,
- value: false,
- },
-
- /**
* Whether user accept the activity control.
*/
userAccepted: {
@@ -132,18 +124,6 @@
},
/**
- * 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.
*
* @private
@@ -154,6 +134,27 @@
},
/**
+ * 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.
*/
reloadPage: function() {
@@ -223,8 +224,10 @@
* 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 @@
'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 @@
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. 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 @@
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 @@
*/
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();
diff --git a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.css b/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.css
index eb3a542..05824506 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.css
+++ b/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;
-}
diff --git a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.html b/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.html
index da9a52d4..02b2910 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.html
+++ b/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_]]">
diff --git a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js b/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js
index c43ef4e5..334ec85 100644
--- a/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js
+++ b/chrome/browser/resources/chromeos/assistant_optin/setting_zippy.js
@@ -16,7 +16,17 @@
value: false,
},
- noZippy: {
+ expandStyle: {
+ type: Boolean,
+ value: false,
+ },
+
+ toggleStyle: {
+ type: Boolean,
+ value: false,
+ },
+
+ popupStyle: {
type: Boolean,
value: false,
},
diff --git a/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_handler.cc b/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_handler.cc
index d46e63d..a331fa8 100644
--- a/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_handler.cc
+++ b/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(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 @@
// 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 @@
// 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)));
diff --git a/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc b/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc
index 56f89ca..d2244551 100644
--- a/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc
+++ b/chrome/browser/ui/webui/chromeos/assistant_optin/assistant_optin_ui.cc
@@ -29,8 +29,8 @@
bool is_active = false;
-constexpr int kAssistantOptInDialogWidth = 576;
-constexpr int kAssistantOptInDialogHeight = 480;
+constexpr int kAssistantOptInDialogWidth = 768;
+constexpr int kAssistantOptInDialogHeight = 640;
} // namespace
diff --git a/chrome/browser/ui/webui/chromeos/assistant_optin/value_prop_screen_handler.cc b/chrome/browser/ui/webui/chromeos/assistant_optin/value_prop_screen_handler.cc
index 0954844..cd39e083 100644
--- a/chrome/browser/ui/webui/chromeos/assistant_optin/value_prop_screen_handler.cc
+++ b/chrome/browser/ui/webui/chromeos/assistant_optin/value_prop_screen_handler.cc
@@ -40,8 +40,7 @@
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);
}