Skip to content

GitLab

T
tangled
Commit 4f97ffeb authored by Tibor Goldschwendt's avatar Tibor Goldschwendt Committed by Commit Bot
Browse files
Options

[ntp][modules] Add info dialog to shopping module 

Screenshot: https://screenshot.googleplex.com/7pbxJMPP2QgAgkM

Fixed: 1130862
Change-Id: Ied56500f9384fc9bedc15eef4cb8ffcde4830b5d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2437473
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Reviewed-by: default avatarMoe Ahmadi <mahmadi@chromium.org>
Auto-Submit: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#812227}
parent 9abba10b
Hide whitespace changes
Inline Side-by-side
Showing with 113 additions and 2 deletions
chrome/app/generated_resources.grd
View file @ 4f97ffeb
......@@ -5623,6 +5623,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
<message name="IDS_NTP_COLORS_DARK_PURPLE" desc="A color option in the customization menu on the New Tab Page.">
Dark purple
</message>
<message name="IDS_NTP_MODULES_INFO_BUTTON_TITLE" desc="Text shown in tooltip of info button of an NTP module.">
Why am I seeing this?
</message>
<message name="IDS_NTP_MODULES_DUMMY_TITLE" translateable="false" desc="Title shown in the header of the dummy module.">
Super Duper Module
</message>
......@@ -5632,7 +5635,18 @@ Keep your key file in a safe place. You will need it to create new versions of y
<message name="IDS_NTP_MODULES_KALEIDOSCOPE_TITLE" desc="Title shown in the header of the Kaleidoscope module.">
Top picks for you
</message>
<message name="IDS_NTP_MODULES_SHOPPING_TASKS_INFO_TITLE" desc="Title shown on the info dialog of the shopping tasks module.">
Why am I seeing this?
</message>
<message name="IDS_NTP_MODULES_SHOPPING_TASKS_INFO_1" desc="First paragraph shown in the body of the info dialog of the shopping tasks module.">
You’re seeing this item based on your previous activity using Google services. You can see your data, delete it, and change your settings at <ph name="BEGIN_LINK">&lt;a href="$1" target="_blank"&gt;</ph>myactivity.google.com<ph name="END_LINK">&lt;/a&gt;</ph>.
</message>
<message name="IDS_NTP_MODULES_SHOPPING_TASKS_INFO_2" desc="Second paragraph shown in the body of the info dialog of the shopping tasks module.">
Learn about the data Google collects and why at <ph name="BEGIN_LINK">&lt;a href="$1" target="_blank"&gt;</ph>policies.google.com<ph name="END_LINK">&lt;/a&gt;</ph>.
</message>
<message name="IDS_NTP_MODULES_SHOPPING_TASKS_INFO_CLOSE" desc="Text shown on close button of the shopping tasks module.">
Close
</message>
<!-- Extensions NTP Middle Slot Promo -->
<message name="IDS_EXTENSIONS_PROMO_PERFORMANCE">
Web browsing should be fast. Take a moment to <ph name="BEGIN_LINK">&lt;a href="chrome://extensions"&gt;</ph>check your extensions<ph name="END_LINK">&lt;/a&gt;</ph> now.
......
chrome/app/generated_resources_grd/IDS_NTP_MODULES_INFO_BUTTON_TITLE.png.sha1 0 → 100644
View file @ 4f97ffeb
0c104339df37eafa8a4cc54d7ff55821f1f61182
\ No newline at end of file
chrome/app/generated_resources_grd/IDS_NTP_MODULES_SHOPPING_TASKS_INFO_1.png.sha1 0 → 100644
View file @ 4f97ffeb
17d84613543ae607815f2dafdc944ba72db70da8
\ No newline at end of file
chrome/app/generated_resources_grd/IDS_NTP_MODULES_SHOPPING_TASKS_INFO_2.png.sha1 0 → 100644
View file @ 4f97ffeb
17d84613543ae607815f2dafdc944ba72db70da8
\ No newline at end of file
chrome/app/generated_resources_grd/IDS_NTP_MODULES_SHOPPING_TASKS_INFO_CLOSE.png.sha1 0 → 100644
View file @ 4f97ffeb
17d84613543ae607815f2dafdc944ba72db70da8
\ No newline at end of file
chrome/app/generated_resources_grd/IDS_NTP_MODULES_SHOPPING_TASKS_INFO_TITLE.png.sha1 0 → 100644
View file @ 4f97ffeb
17d84613543ae607815f2dafdc944ba72db70da8
\ No newline at end of file
chrome/browser/resources/new_tab_page/icons/info.svg 0 → 100644
View file @ 4f97ffeb
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.333 10.667h1.334V8H7.333v2.667zM8 2C4.688 2 2 4.688 2 8s2.688 6 6 6 6-2.688 6-6-2.688-6-6-6zm0 10.667A4.673 4.673 0 0 1 3.333 8 4.673 4.673 0 0 1 8 3.333 4.673 4.673 0 0 1 12.667 8 4.673 4.673 0 0 1 8 12.667zm-.667-6h1.334V5.333H7.333v1.334z" fill="#5F6368"/></svg>
\ No newline at end of file
chrome/browser/resources/new_tab_page/modules/module_descriptor.js
View file @ 4f97ffeb
......@@ -7,11 +7,19 @@
* module descriptor and register it at the NTP.
*/
/**
* @typedef {{
* info: (function()|undefined),
* }}
*/
let Actions;
/**
* @typedef {function(): !Promise<?{
* element: !HTMLElement,
* title: string,
* }>}
* actions: (undefined|Actions),
* }>}
*/
let InitializeModuleCallback;
......@@ -32,6 +40,8 @@ export class ModuleDescriptor {
this.element_ = null;
/** @private {!InitializeModuleCallback} */
this.initializeCallback_ = initializeCallback;
/** @private {?Actions} */
this.actions_ = null;
}
/** @return {string} */
......@@ -54,6 +64,11 @@ export class ModuleDescriptor {
return this.element_;
}
/** @return {?Actions} */
get actions() {
return this.actions_;
}
async initialize() {
const info = await this.initializeCallback_();
if (!info) {
......@@ -61,5 +76,6 @@ export class ModuleDescriptor {
}
this.title_ = info.title;
this.element_ = info.element;
this.actions_ = info.actions || null;
}
}
chrome/browser/resources/new_tab_page/modules/module_wrapper.html
View file @ 4f97ffeb
......@@ -18,6 +18,14 @@
color: var(--cr-primary-text-color);
}
#headerSpacer {
flex-grow: 1;
}
#infoButton {
--cr-icon-image: url(./icons/info.svg);
}
#moduleElement {
align-items: center;
display: flex;
......@@ -26,5 +34,11 @@
</style>
<div id="header">
<span id="title">[[descriptor.title]]</span>
<div id="headerSpacer"></div>
<template is="dom-if" if="[[descriptor.actions.info]]">
<cr-icon-button id="infoButton" title="$i18n{moduleInfoButtonTitle}"
on-click="onInfoButtonClick_">
</cr-icon-button>
</template>
</div>
<div id="moduleElement"></div>
chrome/browser/resources/new_tab_page/modules/module_wrapper.js
View file @ 4f97ffeb
......@@ -58,6 +58,11 @@ class ModuleWrapperElement extends PolymerElement {
BrowserProxy.getInstance().handler.onModuleUsage(this.descriptor.id);
}, {once: true});
}
/** @private */
onInfoButtonClick_() {
this.descriptor.actions.info();
}
}
customElements.define(ModuleWrapperElement.is, ModuleWrapperElement);
chrome/browser/resources/new_tab_page/modules/shopping_tasks/module.html
View file @ 4f97ffeb
......@@ -117,6 +117,19 @@
margin-inline-end: 12px;
margin-inline-start: 8px;
}
cr-dialog::part(dialog) {
width: 459px;
}
cr-dialog [slot='body'] div:not(:last-of-type) {
margin-bottom: 24px;
}
cr-dialog [slot='body'] a[href] {
color: var(--cr-link-color);
text-decoration: none;
}
</style>
<div id="products">
<template is="dom-repeat" id="productsRepeat"
......@@ -142,3 +155,17 @@
</a>
</template>
</div>
<template is="dom-if" if="[[showInfoDialog]]" restamp>
<cr-dialog show-on-attach>
<div slot="title">$i18n{modulesShoppingTasksInfoTitle}</div>
<div slot="body">
<div>$i18nRaw{modulesShoppingTasksInfo1}</div>
<div>$i18nRaw{modulesShoppingTasksInfo2}</div>
</div>
<div slot="button-container">
<cr-button class="action-button" on-click="onCloseClick_">
$i18n{modulesShoppingTasksInfoClose}
</cr-button>
</div>
</cr-dialog>
</template>
chrome/browser/resources/new_tab_page/modules/shopping_tasks/module.js
View file @ 4f97ffeb
......@@ -27,6 +27,9 @@ class ShoppingTasksModuleElement extends PolymerElement {
return {
/** @type {shoppingTasks.mojom.ShoppingTask} */
shoppingTask: Object,
/** @type {boolean} */
showInfoDialog: Boolean,
};
}
......@@ -34,6 +37,11 @@ class ShoppingTasksModuleElement extends PolymerElement {
onClick_() {
this.dispatchEvent(new Event('usage', {bubbles: true, composed: true}));
}
/** @private */
onCloseClick_() {
this.showInfoDialog = false;
}
}
customElements.define(
......@@ -51,6 +59,11 @@ async function createModule() {
return {
element: element,
title: shoppingTask.title,
actions: {
info: () => {
element.showInfoDialog = true;
},
},
};
}
......
chrome/browser/resources/new_tab_page/new_tab_page_resources_common.grdp
View file @ 4f97ffeb
......@@ -43,6 +43,8 @@
file="icons/mail.svg" type="BINDATA" />
<include name="IDR_NEW_TAB_PAGE_UPLOAD_SVG" file="icons/upload.svg"
type="BINDATA" />
<include name="IDR_NEW_TAB_PAGE_INFO_SVG" file="icons/info.svg"
type="BINDATA" />
<include name="IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML"
file="new_tab_page.html" type="BINDATA" />
<include name="IDR_NEW_TAB_PAGE_SHARED_VARS_CSS"
......
chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
View file @ 4f97ffeb
......@@ -181,12 +181,26 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
{"themeCreatedBy", IDS_NEW_TAB_ATTRIBUTION_INTRO},
// Modules.
{"moduleInfoButtonTitle", IDS_NTP_MODULES_INFO_BUTTON_TITLE},
{"modulesDummyTitle", IDS_NTP_MODULES_DUMMY_TITLE},
{"modulesDummy2Title", IDS_NTP_MODULES_DUMMY2_TITLE},
{"modulesKaleidoscopeTitle", IDS_NTP_MODULES_KALEIDOSCOPE_TITLE},
{"modulesShoppingTasksInfoTitle",
IDS_NTP_MODULES_SHOPPING_TASKS_INFO_TITLE},
{"modulesShoppingTasksInfoClose",
IDS_NTP_MODULES_SHOPPING_TASKS_INFO_CLOSE},
};
AddLocalizedStringsBulk(source, kStrings);
source->AddString("modulesShoppingTasksInfo1",
l10n_util::GetStringFUTF16(
IDS_NTP_MODULES_SHOPPING_TASKS_INFO_1,
base::UTF8ToUTF16("https://myactivity.google.com/")));
source->AddString("modulesShoppingTasksInfo2",
l10n_util::GetStringFUTF16(
IDS_NTP_MODULES_SHOPPING_TASKS_INFO_2,
base::UTF8ToUTF16("https://policies.google.com/")));
// Register images that are purposefully not inlined in the HTML and instead
// are set in Javascript.
static constexpr webui::ResourcePath kImages[] = {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment