Skip to content

GitLab

T
tangled
Commit 7f9deb23 authored by Tibor Goldschwendt's avatar Tibor Goldschwendt Committed by Commit Bot
Browse files
Options

[webui][ntp] Add doodle share dialog (reland) 

The share dialog opens when clicking the share button on simple and
animated doodles. The dialog lets the user share the doodle via
Facebook, Twitter, email, and copy the doodle URL.

+ Add doodle description tooltip.

+ Remove TODO about the share button focus ring working for dark
  doodles. We decided it's an edge case and doesn't warrant fixing.

This is a reland of 275bf019 with a fix
for flaky Mac tests. `navigator.clipboard.readText()` requires a focused
document. Therefore, 'clicking copy copies URL' was moved to
interactive_ui_tests, which focuses the document for each test case
robustly. Original change info:
> Change-Id: Ib2b8d9ca9447a2d6363d3c76167b393f914f60e1
> Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2138792
> Reviewed-by: Esmael Elmoslimany <aee@chromium.org>
> Reviewed-by: Alex Gough <ajgo@chromium.org>
> Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
> Cr-Commit-Position: refs/heads/master@{#758033}

TBR=ajgo@,owone@,aee@

Bug: 1039910
Change-Id: Ia3cd23e03c3c147314066d7e5420138c906b3557
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2145755Reviewed-by: default avatarEsmael Elmoslimany <aee@chromium.org>
Commit-Queue: Tibor Goldschwendt <tiborg@chromium.org>
Cr-Commit-Position: refs/heads/master@{#758240}
parent b2b4fea4
Hide whitespace changes
Inline Side-by-side
Showing with 484 additions and 55 deletions
chrome/browser/resources/new_tab_page/BUILD.gn
View file @ 7f9deb23
......@@ -11,6 +11,7 @@ js_type_check("closure_compile") {
":app",
":browser_proxy",
":customize_dialog",
":doodle_share_dialog",
":fakebox",
":grid",
":logo",
......@@ -128,11 +129,22 @@ js_library("fakebox") {
js_library("logo") {
deps = [
":doodle_share_dialog",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
]
}
js_library("doodle_share_dialog") {
deps = [
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/cr_elements/cr_button:cr_button.m",
"//ui/webui/resources/cr_elements/cr_dialog:cr_dialog.m",
"//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
"//ui/webui/resources/cr_elements/cr_input:cr_input.m",
]
}
polymer_modulizer("app") {
js_file = "app.js"
html_file = "app.html"
......@@ -211,6 +223,12 @@ polymer_modulizer("logo") {
html_type = "v3-ready"
}
polymer_modulizer("doodle_share_dialog") {
js_file = "doodle_share_dialog.js"
html_file = "doodle_share_dialog.html"
html_type = "v3-ready"
}
group("polymer3_elements") {
public_deps = [
":app_module",
......@@ -218,6 +236,7 @@ group("polymer3_elements") {
":customize_dialog_module",
":customize_shortcuts_module",
":customize_themes_module",
":doodle_share_dialog_module",
":fakebox_module",
":grid_module",
":logo_module",
......
chrome/browser/resources/new_tab_page/doodle_share_dialog.html 0 → 100644
View file @ 7f9deb23
<style>
#dialog::part(dialog) {
max-width: 300px;
}
#buttons {
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 28px;
margin-top: 20px;
}
#buttons cr-button {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border: none;
height: 48px;
min-width: 48px;
width: 48px;
}
#buttons cr-button:hover {
opacity: 0.8;
}
#buttons > :not(:last-child) {
margin-inline-end: 12px;
}
#facebookButton {
background-image: url(icons/facebook.svg);
}
#twitterButton {
background-image: url(icons/twitter.svg);
}
#emailButton {
background-image: url(icons/mail.svg);
}
#url {
--cr-input-error-display: none;
}
#copyButton {
--cr-icon-image: url(icons/copy.svg);
margin-inline-start: 2px;
}
</style>
<cr-dialog id="dialog" show-on-attach>
<div id="title" slot="title">
[[title]]
</div>
<div slot="body">
<div id="buttons">
<cr-button id="facebookButton" title="$i18n{facebook}"
on-click="onFacebookClick_">
</cr-button>
<cr-button id="twitterButton" title="$i18n{twitter}"
on-click="onTwitterClick_">
</cr-button>
<cr-button id="emailButton" title="$i18n{email}"
on-click="onEmailClick_">
</cr-button>
</div>
<cr-input readonly label="$i18n{doodleLink}" id="url"
value="[[url.url]]">
<cr-icon-button id="copyButton" slot="suffix" title="$i18n{copyLink}"
on-click="onCopyClick_">
</cr-icon-button>
</cr-input>
</div>
<div slot="button-container">
<cr-button id="doneButton" class="action-button" on-click="onCloseClick_">
$i18n{doneButton}
</cr-button>
</div>
</cr-dialog>
chrome/browser/resources/new_tab_page/doodle_share_dialog.js 0 → 100644
View file @ 7f9deb23
// Copyright 2020 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.
import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import 'chrome://resources/cr_elements/cr_dialog/cr_dialog.m.js';
import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {BrowserProxy} from './browser_proxy.js';
/**
* The ID of the doodle app for Facebook. Used to share doodles to Facebook.
* @type {number}
*/
const FACEBOOK_APP_ID = 738026486351791;
// Dialog that lets the user share the doodle.
class DoodleShareDialogElement extends PolymerElement {
static get is() {
return 'ntp-doodle-share-dialog';
}
static get template() {
return html`{__html_template__}`;
}
static get properties() {
return {
/**
* Title shown on the dialog.
* @type {string}
*/
title: String,
/**
* Share URL provided to the user.
* @type {url.mojom.Url}
*/
url: Object,
};
}
/** @private */
onFacebookClick_() {
const url = 'https://www.facebook.com/dialog/share' +
`?app_id=${FACEBOOK_APP_ID}` +
`&href=${encodeURIComponent(this.url.url)}` +
`&hashtag=${encodeURIComponent('#GoogleDoodle')}`;
BrowserProxy.getInstance().open(url);
}
/** @private */
onTwitterClick_() {
const url = 'https://twitter.com/intent/tweet' +
`?text=${encodeURIComponent(`${this.title}\n${this.url.url}`)}`;
BrowserProxy.getInstance().open(url);
}
/** @private */
onEmailClick_() {
const url = `mailto:?subject=${encodeURIComponent(this.title)}` +
`&body=${encodeURIComponent(this.url.url)}`;
BrowserProxy.getInstance().navigate(url);
}
/** @private */
onCopyClick_() {
this.$.url.select();
navigator.clipboard.writeText(this.url.url);
}
/** @private */
onCloseClick_() {
this.$.dialog.close();
}
}
customElements.define(DoodleShareDialogElement.is, DoodleShareDialogElement);
chrome/browser/resources/new_tab_page/icons/copy.svg 0 → 100644
View file @ 7f9deb23
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M35.25 14a.76.76 0 0 1 .75.75v25.5a.76.76 0 0 1-.75.75h-16.5a.76.76 0 0 1-.75-.75v-25.5a.76.76 0 0 1 .75-.75h16.5m0-4h-16.5A4.77 4.77 0 0 0 14 14.75v25.5A4.77 4.77 0 0 0 18.75 45h16.5A4.77 4.77 0 0 0 40 40.25v-25.5A4.77 4.77 0 0 0 35.25 10z" fill="#666"/><path d="M9 38V9.75A4.77 4.77 0 0 1 13.75 5h19.16" fill="none" stroke="#666" stroke-miterlimit="10" stroke-width="4"/></svg>
\ No newline at end of file
chrome/browser/resources/new_tab_page/icons/facebook.svg 0 → 100644
View file @ 7f9deb23
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M43.5 48h-39C2 48 0 46 0 43.5v-39C0 2 2 0 4.5 0h39C46 0 48 2 48 4.5v39c0 2.5-2 4.5-4.5 4.5z" fill="#3a589b"/><path d="M39.4 29.4l.9-7.3h-7.2v-4.7c0-2.1.6-3.5 3.6-3.5h3.8V7.5c-.7-.1-2.9-.3-5.6-.3-5.5 0-9.3 3.4-9.3 9.6v5.3h-6.2v7.3h6.2V48h7.5V29.4h6.3z" fill="#fff"/></svg>
\ No newline at end of file
chrome/browser/resources/new_tab_page/icons/mail.svg 0 → 100644
View file @ 7f9deb23
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M43.5 48h-39C2 48 0 46 0 43.5v-39C0 2 2 0 4.5 0h39C46 0 48 2 48 4.5v39c0 2.5-2 4.5-4.5 4.5z" fill="#9da6aa"/><path d="M35.9 12.8H12.1c-2.2 0-4 1.8-4 4v14.4c0 2.2 1.8 4 4 4h23.8c2.2 0 4-1.8 4-4V16.8c0-2.2-1.8-4-4-4z" fill="#fff"/><path fill="none" stroke="#9da6aa" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M35.4 17.2L24 26.1l-11.4-8.9"/></svg>
\ No newline at end of file
chrome/browser/resources/new_tab_page/icons/twitter.svg 0 → 100644
View file @ 7f9deb23
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><path d="M43.5 48h-39C2 48 0 46 0 43.5v-39C0 2 2 0 4.5 0h39C46 0 48 2 48 4.5v39c0 2.5-2 4.5-4.5 4.5z" fill="#3aaae1"/><path d="M39.3 15.5c-1.1.5-2.3.8-3.5.9 1.2-.7 2.2-1.9 2.6-3.3-1.1.7-2.5 1.2-3.8 1.5-1.1-1.1-2.6-1.9-4.4-1.9-3.3 0-6 2.7-6 6 0 .5.1.9.1 1.3-4.9-.3-9.4-2.6-12.4-6.3-.5.9-.8 1.9-.8 3 0 2 1.1 3.9 2.7 5-1 0-1.9-.3-2.7-.8v.1c0 2.9 2 5.3 4.8 5.9-.5.1-1.1.2-1.6.2-.4 0-.8-.1-1.1-.1.8 2.4 3 4.1 5.6 4.2-2 1.6-4.7 2.5-7.4 2.5-.5 0-1 0-1.4-.1 2.7 1.7 5.8 2.7 9.2 2.7 11 0 17-9.1 17-17v-.8c1.3-.8 2.3-1.8 3.1-3z" fill="#fff"/></svg>
\ No newline at end of file
chrome/browser/resources/new_tab_page/logo.html
View file @ 7f9deb23
......@@ -80,7 +80,7 @@
<div id="singleColoredLogo" hidden="[[!singleColored]]"></div>
<div id="multiColoredLogo" hidden="[[singleColored]]"></div>
</div>
<div id="doodle">
<div id="doodle" title="[[doodle_.description]]">
<div id="imageContainer" hidden="[[!doodle_.content.imageDoodle]]"
tabindex="1" on-click="onImageClick_" on-keydown="onImageKeydown_">
<!-- The static image is always visible and the animated image is stacked
......@@ -91,13 +91,11 @@
<ntp-untrusted-iframe id="animation" path="[[animationUrl_]]"
hidden="[[!showAnimation_]]">
</ntp-untrusted-iframe>
<!-- TODO(crbug.com/1039910): Set focus ring that works for both dark and
light doodles.
TODO(crbug.com/1039910): Open share dialog on click. -->
<cr-button id="shareButton" title="$i18n{shareDoodle}"
style="background-color: [[rgbOrUnset_(doodle_.content.imageDoodle.shareButton.backgroundColor)]];
left: [[doodle_.content.imageDoodle.shareButton.x]]px;
top: [[doodle_.content.imageDoodle.shareButton.y]]px;">
on-click="onShareButtonClick_"
style="background-color: [[rgbOrUnset_(doodle_.content.imageDoodle.shareButton.backgroundColor)]];
left: [[doodle_.content.imageDoodle.shareButton.x]]px;
top: [[doodle_.content.imageDoodle.shareButton.y]]px;">
<img id="shareButtonImage"
src="[[doodle_.content.imageDoodle.shareButton.iconUrl.url]]">
</img>
......@@ -111,3 +109,11 @@
</ntp-untrusted-iframe>
</div>
</iron-pages>
<dom-if if="[[showShareDialog_]]" restamp>
<template>
<ntp-doodle-share-dialog title="[[doodle_.description]]"
url="[[doodle_.content.imageDoodle.shareUrl]]"
on-close="onShareDialogClose_">
</ntp-doodle-share-dialog>
</template>
</dom-if>
chrome/browser/resources/new_tab_page/logo.js
View file @ 7f9deb23
......@@ -6,6 +6,7 @@ import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import 'chrome://resources/cr_elements/hidden_style_css.m.js';
import 'chrome://resources/polymer/v3_0/iron-pages/iron-pages.js';
import './untrusted_iframe.js';
import './doodle_share_dialog.js';
import {assert} from 'chrome://resources/js/assert.m.js';
import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
......@@ -98,6 +99,9 @@ class LogoElement extends PolymerElement {
type: String,
value: null,
},
/** @private */
showShareDialog_: Boolean,
};
}
......@@ -224,6 +228,20 @@ class LogoElement extends PolymerElement {
rgbOrUnset_(skColor) {
return skColor ? skColorToRgb(skColor) : 'unset';
}
/**
* @param {!Event} e
* @private
*/
onShareButtonClick_(e) {
e.stopPropagation();
this.showShareDialog_ = true;
}
/** @private */
onShareDialogClose_() {
this.showShareDialog_ = false;
}
}
customElements.define(LogoElement.is, LogoElement);
chrome/browser/resources/new_tab_page/new_tab_page_resources.grd
View file @ 7f9deb23
......@@ -78,6 +78,14 @@
file="icons/mic.svg" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_LINK_SVG"
file="icons/link.svg" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_COPY_SVG"
file="icons/copy.svg" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_FACEBOOK_SVG"
file="icons/facebook.svg" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_TWITTER_SVG"
file="icons/twitter.svg" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_MAIL_SVG"
file="icons/mail.svg" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_MINI_PAGE_JS"
file="${root_gen_dir}/chrome/browser/resources/new_tab_page/mini_page.js"
use_base_dir="false" type="BINDATA" compress="gzip" />
......@@ -87,6 +95,9 @@
<include name="IDR_NEW_TAB_PAGE_LOGO_JS"
file="${root_gen_dir}/chrome/browser/resources/new_tab_page/logo.js"
use_base_dir="false" type="BINDATA" compress="gzip" />
<include name="IDR_NEW_TAB_PAGE_DOODLE_SHARE_DIALOG_JS"
file="${root_gen_dir}/chrome/browser/resources/new_tab_page/doodle_share_dialog.js"
use_base_dir="false" type="BINDATA" compress="gzip" />
</includes>
<structures>
<structure name="IDR_NEW_TAB_PAGE_NEW_TAB_PAGE_HTML"
......
chrome/browser/ui/webui/new_tab_page/new_tab_page.mojom
View file @ 7f9deb23
......@@ -132,6 +132,8 @@ struct ImageDoodleContent {
url.mojom.Url? animation_url;
// Specification of the share button.
DoodleShareButton share_button;
// URL displayed to users, which they can use to share the doodle.
url.mojom.Url share_url;
};
// The contents of a doodle.
......@@ -146,6 +148,8 @@ union DoodleContent {
struct Doodle {
// The doodle content.
DoodleContent content;
// Localized description of the doodle.
string description;
};
// Used by the WebUI page to bootstrap bidirectional communication.
......
chrome/browser/ui/webui/new_tab_page/new_tab_page_handler.cc
View file @ 7f9deb23
......@@ -449,6 +449,7 @@ void NewTabPageHandler::OnLogoAvailable(
"data:image/png;base64,%s", logo->metadata.share_button_icon.c_str()));
image_doodle_content->share_button->background_color =
SkColorSetA(doodle_share_button_background_color, 255);
image_doodle_content->share_url = logo->metadata.short_link;
doodle->content = new_tab_page::mojom::DoodleContent::NewImageDoodle(
std::move(image_doodle_content));
} else if (logo->metadata.type ==
......@@ -459,5 +460,6 @@ void NewTabPageHandler::OnLogoAvailable(
std::move(callback).Run(nullptr);
return;
}
doodle->description = logo->metadata.alt_text;
std::move(callback).Run(std::move(doodle));
}
chrome/browser/ui/webui/new_tab_page/new_tab_page_ui.cc
View file @ 7f9deb23
......@@ -52,6 +52,7 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
.spec());
static constexpr webui::LocalizedString kStrings[] = {
{"doneButton", IDS_DONE},
{"title", IDS_NEW_TAB_TITLE},
{"undo", IDS_NEW_TAB_UNDO_THUMBNAIL_REMOVE},
......@@ -80,7 +81,6 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
{"customizeButton", IDS_NTP_CUSTOMIZE_BUTTON_LABEL},
{"customizeThisPage", IDS_NTP_CUSTOM_BG_CUSTOMIZE_NTP_LABEL},
{"defaultThemeLabel", IDS_NTP_CUSTOMIZE_DEFAULT_LABEL},
{"doneButton", IDS_DONE},
{"hideShortcuts", IDS_NTP_CUSTOMIZE_HIDE_SHORTCUTS_LABEL},
{"hideShortcutsDesc", IDS_NTP_CUSTOMIZE_HIDE_SHORTCUTS_DESC},
{"mostVisited", IDS_NTP_CUSTOMIZE_MOST_VISITED_LABEL},
......@@ -115,7 +115,12 @@ content::WebUIDataSource* CreateNewTabPageUiHtmlSource(Profile* profile) {
{"searchBoxHint", IDS_GOOGLE_SEARCH_BOX_EMPTY_HINT_MD},
// Logo/doodle.
{"copyLink", IDS_NTP_DOODLE_SHARE_DIALOG_COPY_LABEL},
{"doodleLink", IDS_NTP_DOODLE_SHARE_DIALOG_LINK_LABEL},
{"email", IDS_NTP_DOODLE_SHARE_DIALOG_MAIL_LABEL},
{"facebook", IDS_NTP_DOODLE_SHARE_DIALOG_FACEBOOK_LABEL},
{"shareDoodle", IDS_NTP_DOODLE_SHARE_LABEL},
{"twitter", IDS_NTP_DOODLE_SHARE_DIALOG_TWITTER_LABEL},
};
AddLocalizedStringsBulk(source, kStrings);
......
chrome/test/data/webui/new_tab_page/doodle_share_dialog_focus_test.js 0 → 100644
View file @ 7f9deb23
// Copyright 2020 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.
import 'chrome://new-tab-page/doodle_share_dialog.js';
import {BrowserProxy} from 'chrome://new-tab-page/browser_proxy.js';
import {createTestProxy} from 'chrome://test/new_tab_page/test_support.js';
suite('NewTabPageDoodleShareDialogFocusTest', () => {
/** @type {!DoodleShareDialogElement} */
let doodleShareDialog;
/**
* @implements {BrowserProxy}
* @extends {TestBrowserProxy}
*/
let testProxy;
setup(() => {
PolymerTest.clearBody();
testProxy = createTestProxy();
BrowserProxy.instance_ = testProxy;
doodleShareDialog = document.createElement('ntp-doodle-share-dialog');
document.body.appendChild(doodleShareDialog);
});
test('clicking copy copies URL', async () => {
// Arrange.
doodleShareDialog.url = {url: 'https://bar.com'};
// Act.
doodleShareDialog.$.copyButton.click();
// Assert.
const text = await navigator.clipboard.readText();
assertEquals(text, 'https://bar.com');
});
});
chrome/test/data/webui/new_tab_page/doodle_share_dialog_test.js 0 → 100644
View file @ 7f9deb23
// Copyright 2020 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.
import 'chrome://new-tab-page/doodle_share_dialog.js';
import {BrowserProxy} from 'chrome://new-tab-page/browser_proxy.js';
import {createTestProxy} from 'chrome://test/new_tab_page/test_support.js';
suite('NewTabPageDoodleShareDialogTest', () => {
/** @type {!DoodleShareDialogElement} */
let doodleShareDialog;
/**
* @implements {BrowserProxy}
* @extends {TestBrowserProxy}
*/
let testProxy;
setup(() => {
PolymerTest.clearBody();
testProxy = createTestProxy();
BrowserProxy.instance_ = testProxy;
doodleShareDialog = document.createElement('ntp-doodle-share-dialog');
document.body.appendChild(doodleShareDialog);
});
test('creating doodle share dialog opens cr dialog', () => {
// Assert.
assertTrue(doodleShareDialog.$.dialog.open);
});
test('setting title, url shows title, url', () => {
// Act.
doodleShareDialog.title = 'foo';
doodleShareDialog.url = {url: 'https://bar.com'};
// Assert.
assertEquals(doodleShareDialog.$.title.innerText, 'foo');
assertEquals(doodleShareDialog.$.url.value, 'https://bar.com');
});
const testParams = [
{
label: 'Facebook',
buttonId: 'facebookButton',
url: 'https://www.facebook.com/dialog/share' +
'?app_id=738026486351791' +
`&href=${encodeURIComponent('https://bar.com')}` +
`&hashtag=${encodeURIComponent('#GoogleDoodle')}`,
},
{
label: 'Twitter',
buttonId: 'twitterButton',
url: 'https://twitter.com/intent/tweet' +
`?text=${encodeURIComponent('foo\nhttps://bar.com')}`,
},
];
testParams.forEach(({label, buttonId, url}) => {
test(`clicking ${label} opens ${label}`, async () => {
// Arrange.
doodleShareDialog.title = 'foo';
doodleShareDialog.url = {url: 'https://bar.com'};
// Act.
doodleShareDialog.$[buttonId].click();
// Assert.
const openedUrl = await testProxy.whenCalled('open');
assertEquals(openedUrl, url);
});
});
test(`clicking email navigates to email`, async () => {
// Arrange.
doodleShareDialog.title = 'foo';
doodleShareDialog.url = {url: 'https://bar.com'};
// Act.
doodleShareDialog.$.emailButton.click();
// Assert.
const navigateUrl = await testProxy.whenCalled('navigate');
assertEquals(
navigateUrl,
`mailto:?subject=foo&body=${encodeURIComponent('https://bar.com')}`);
});
test('clicking done closes dialog', async () => {
// Act.
doodleShareDialog.$.doneButton.click();
// Assert.
assertFalse(doodleShareDialog.$.dialog.open);
});
});
chrome/test/data/webui/new_tab_page/logo_test.js
View file @ 7f9deb23
......@@ -8,6 +8,27 @@ import {BrowserProxy} from 'chrome://new-tab-page/browser_proxy.js';
import {assertNotStyle, assertStyle, createTestProxy, keydown} from 'chrome://test/new_tab_page/test_support.js';
import {eventToPromise, flushTasks} from 'chrome://test/test_util.m.js';
function createImageDoodle(config = {}) {
const doodle = {
content: {
imageDoodle: {
imageUrl: {url: config.imageUrl || 'data:foo'},
onClickUrl: {url: config.onClickUrl || 'https://foo.com'},
shareButton: {
backgroundColor: {value: config.backgroundColor || 0xFFFF0000},
x: config.x || 0,
y: config.y || 0,
iconUrl: {url: config.iconUrl || 'data:bar'},
},
}
}
};
if (config.animationUrl) {
doodle.content.imageDoodle.animationUrl = {url: config.animationUrl};
}
return doodle;
}
suite('NewTabPageLogoTest', () => {
/**
* @implements {BrowserProxy}
......@@ -34,19 +55,13 @@ suite('NewTabPageLogoTest', () => {
test('setting simple doodle shows image', async () => {
// Act.
const logo = await createLogo({
content: {
imageDoodle: {
imageUrl: {url: 'data:foo'},
shareButton: {
backgroundColor: {value: 0xFFFF0000},
x: 11,
y: 12,
iconUrl: {url: 'data:bar'},
},
}
}
});
const logo = await createLogo(createImageDoodle({
imageUrl: 'data:foo',
backgroundColor: 0xFFFF0000,
x: 11,
y: 12,
iconUrl: 'data:bar',
}));
// Assert.
assertNotStyle(logo.$.doodle, 'display', 'none');
......@@ -64,14 +79,10 @@ suite('NewTabPageLogoTest', () => {
test('setting animated doodle shows image', async () => {
// Act.
const logo = await createLogo({
content: {
imageDoodle: {
imageUrl: {url: 'data:foo'},
animationUrl: {url: 'https://foo.com'},
}
}
});
const logo = await createLogo(createImageDoodle({
imageUrl: 'data:foo',
animationUrl: 'https://foo.com',
}));
// Assert.
assertNotStyle(logo.$.doodle, 'display', 'none');
......@@ -96,7 +107,7 @@ suite('NewTabPageLogoTest', () => {
test('disallowing doodle shows logo', async () => {
// Act.
const logo = await await createLogo({content: {image: 'data:foo'}});
const logo = await createLogo(createImageDoodle());
logo.doodleAllowed = false;
// Assert.
......@@ -201,14 +212,10 @@ suite('NewTabPageLogoTest', () => {
test('clicking simple doodle opens link', async () => {
// Arrange.
const logo = await createLogo({
content: {
imageDoodle: {
imageUrl: {url: 'data:foo'},
onClickUrl: {url: 'https://foo.com'},
}
}
});
const logo = await createLogo(createImageDoodle({
imageUrl: 'data:foo',
onClickUrl: 'https://foo.com',
}));
// Act.
logo.$.image.click();
......@@ -241,14 +248,10 @@ suite('NewTabPageLogoTest', () => {
test('clicking image of animated doodle starts animation', async () => {
// Arrange.
const logo = await createLogo({
content: {
imageDoodle: {
imageUrl: {url: 'data:foo'},
animationUrl: {url: 'https://foo.com'},
}
}
});
const logo = await createLogo(createImageDoodle({
imageUrl: 'data:foo',
animationUrl: 'https://foo.com',
}));
// Act.
logo.$.image.click();
......@@ -262,15 +265,11 @@ suite('NewTabPageLogoTest', () => {
test('clicking animation of animated doodle opens link', async () => {
// Arrange.
const logo = await createLogo({
content: {
imageDoodle: {
imageUrl: {url: 'data:foo'},
animationUrl: {url: 'https://foo.com'},
onClickUrl: {url: 'https://bar.com'},
}
}
});
const logo = await createLogo(createImageDoodle({
imageUrl: 'data:foo',
animationUrl: 'https://foo.com',
onClickUrl: 'https://bar.com',
}));
logo.$.image.click();
// Act.
......@@ -280,4 +279,39 @@ suite('NewTabPageLogoTest', () => {
// Assert.
assertEquals(url, 'https://bar.com');
});
test('share dialog removed on start', async () => {
// Arrange.
const logo = await createLogo(createImageDoodle());
// Assert.
assertFalse(!!logo.shadowRoot.querySelector('ntp-doodle-share-dialog'));
});
test('clicking share button adds share dialog', async () => {
// Arrange.
const logo = await createLogo(createImageDoodle());
// Act.
logo.$.shareButton.click();
await flushTasks();
// Assert.
assertTrue(!!logo.shadowRoot.querySelector('ntp-doodle-share-dialog'));
});
test('closing share dialog removes share dialog', async () => {
// Arrange.
const logo = await createLogo(createImageDoodle());
logo.$.shareButton.click();
await flushTasks();
// Act.
logo.shadowRoot.querySelector('ntp-doodle-share-dialog')
.dispatchEvent(new Event('close'));
await flushTasks();
// Assert.
assertFalse(!!logo.shadowRoot.querySelector('ntp-doodle-share-dialog'));
});
});
chrome/test/data/webui/new_tab_page/new_tab_page_browsertest.js
View file @ 7f9deb23
......@@ -158,3 +158,15 @@ var NewTabPageLogoTest = class extends NewTabPageBrowserTest {
TEST_F('NewTabPageLogoTest', 'All', function() {
mocha.run();
});
// eslint-disable-next-line no-var
var NewTabPageDoodleShareDialogTest = class extends NewTabPageBrowserTest {
/** @override */
get browsePreload() {
return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/doodle_share_dialog_test.js';
}
};
TEST_F('NewTabPageDoodleShareDialogTest', 'All', function() {
mocha.run();
});
chrome/test/data/webui/new_tab_page/new_tab_page_interactive_test.js
View file @ 7f9deb23
......@@ -63,3 +63,16 @@ var NewTabPageGridFocusTest = class extends NewTabPageInteractiveTest {
TEST_F('NewTabPageGridFocusTest', 'All', function() {
mocha.run();
});
// eslint-disable-next-line no-var
var NewTabPageDoodleShareDialogFocusTest =
class extends NewTabPageInteractiveTest {
/** @override */
get browsePreload() {
return 'chrome://new-tab-page/test_loader.html?module=new_tab_page/doodle_share_dialog_focus_test.js';
}
};
TEST_F('NewTabPageDoodleShareDialogFocusTest', 'All', function() {
mocha.run();
});
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