diff options
Diffstat (limited to 'chromium/chrome/browser/resources/welcome/shared')
22 files changed, 783 insertions, 737 deletions
diff --git a/chromium/chrome/browser/resources/welcome/shared/BUILD.gn b/chromium/chrome/browser/resources/welcome/shared/BUILD.gn index 9a06f4194e1..9ebc573c885 100644 --- a/chromium/chrome/browser/resources/welcome/shared/BUILD.gn +++ b/chromium/chrome/browser/resources/welcome/shared/BUILD.gn @@ -3,8 +3,14 @@ # found in the LICENSE file. import("//third_party/closure_compiler/compile_js.gni") +import("//tools/polymer/polymer.gni") js_type_check("closure_compile") { + is_polymer3 = true + closure_flags = default_closure_args + [ + "js_module_root=../../chrome/browser/resources/welcome/", + "js_module_root=gen/chrome/browser/resources/welcome/", + ] deps = [ ":bookmark_proxy", ":module_metrics_proxy", @@ -15,7 +21,7 @@ js_type_check("closure_compile") { js_library("bookmark_proxy") { deps = [ - "//ui/webui/resources/js:cr", + "//ui/webui/resources/js:cr.m", ] externs_list = [ "$externs_path/chrome_extensions.js", @@ -24,17 +30,69 @@ js_library("bookmark_proxy") { } js_library("module_metrics_proxy") { - deps = [ - "//ui/webui/resources/js:cr", - ] externs_list = [ "$externs_path/metrics_private.js" ] } js_library("nux_types") { +} + +js_library("step_indicator") { deps = [ - "//ui/webui/resources/js:cr", + ":nux_types", + "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled", ] } -js_library("step_indicator") { +polymer_modulizer("animations_css") { + js_file = "animations_css.js" + html_file = "animations_css.html" + html_type = "v3-ready" +} + +polymer_modulizer("chooser_shared_css") { + js_file = "chooser_shared_css.js" + html_file = "chooser_shared_css.html" + html_type = "v3-ready" +} + +polymer_modulizer("navi_colors_css") { + js_file = "navi_colors_css.js" + html_file = "navi_colors_css.html" + html_type = "v3-ready" +} + +polymer_modulizer("action_link_style_css") { + js_file = "action_link_style_css.js" + html_file = "action_link_style_css.html" + html_type = "v3-ready" +} + +polymer_modulizer("splash_pages_shared_css") { + js_file = "splash_pages_shared_css.js" + html_file = "splash_pages_shared_css.html" + html_type = "v3-ready" +} + +polymer_modulizer("onboarding_background") { + js_file = "onboarding_background.js" + html_file = "onboarding_background.html" + html_type = "v3-ready" +} + +polymer_modulizer("step_indicator") { + js_file = "step_indicator.js" + html_file = "step_indicator.html" + html_type = "v3-ready" +} + +group("polymer3_elements") { + deps = [ + ":action_link_style_css_module", + ":animations_css_module", + ":chooser_shared_css_module", + ":navi_colors_css_module", + ":onboarding_background_module", + ":splash_pages_shared_css_module", + ":step_indicator_module", + ] } diff --git a/chromium/chrome/browser/resources/welcome/shared/action_link_style.js b/chromium/chrome/browser/resources/welcome/shared/action_link_style.js deleted file mode 100644 index b4e52c4ba58..00000000000 --- a/chromium/chrome/browser/resources/welcome/shared/action_link_style.js +++ /dev/null @@ -1,9 +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. - -/** - * @fileoverview Initiates focus-outline-manager for this document so that - * action-link style can take advantage of it. - */ -cr.ui.FocusOutlineManager.forDocument(document);
\ No newline at end of file diff --git a/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.html b/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.html index 96d00fb8bcc..90f5c2ce76e 100644 --- a/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.html +++ b/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.html @@ -1,34 +1,24 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> +<template> + <style> + button.action-link { + -webkit-appearance: none; + background: none; + border: none; + color: var(--cr-link-color); + cursor: pointer; + display: inline-block; + font-family: inherit; + text-decoration: none; + } -<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> -<link rel="import" href="chrome://resources/html/cr/ui/focus_outline_manager.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html"> + button.action-link[disabled] { + color: var(--paper-grey-600); + cursor: default; + opacity: 0.65; + } -<dom-module id="action-link-style"> - <template> - <style> - button.action-link { - -webkit-appearance: none; - background: none; - border: none; - color: var(--cr-link-color); - cursor: pointer; - display: inline-block; - font-family: inherit; - text-decoration: none; - } - - button.action-link[disabled] { - color: var(--paper-grey-600); - cursor: default; - opacity: 0.65; - } - - :host-context(html:not(.focus-outline-visible)) button.action-link { - outline: none; - } - </style> - </template> -</dom-module> - -<script src="action_link_style.js"></script> + :host-context(html:not(.focus-outline-visible)) button.action-link { + outline: none; + } + </style> +</template> diff --git a/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.js b/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.js new file mode 100644 index 00000000000..c6259334546 --- /dev/null +++ b/chromium/chrome/browser/resources/welcome/shared/action_link_style_css.js @@ -0,0 +1,17 @@ +// Copyright 2019 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/shared_vars_css.m.js'; +import 'chrome://resources/polymer/v3_0/paper-styles/color.js'; +import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = `{__html_template__}`; +styleElement.register('action-link-style'); + +// Initiate focus-outline-manager for this document so that action-link style +// can take advantage of it. +FocusOutlineManager.forDocument(document); diff --git a/chromium/chrome/browser/resources/welcome/shared/animations_css.html b/chromium/chrome/browser/resources/welcome/shared/animations_css.html index c79bd5443f6..268c0300275 100644 --- a/chromium/chrome/browser/resources/welcome/shared/animations_css.html +++ b/chromium/chrome/browser/resources/welcome/shared/animations_css.html @@ -1,39 +1,35 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> +<template> + <style> + @keyframes fade-in { + 0% { opacity: 0; } + 100% { opacity: 1; } + } -<dom-module id="animations"> - <template> - <style> - @keyframes fade-in { - 0% { opacity: 0; } - 100% { opacity: 1; } - } + @keyframes slide-in { + 0% { transform: translateX(var(--slide-in-length, 40px)); } + 100% { transform: translateX(0); } + } - @keyframes slide-in { - 0% { transform: translateX(var(--slide-in-length, 40px)); } - 100% { transform: translateX(0); } - } + .fade-in { + animation-delay: var(--animation-delay, 0); + animation-duration: 200ms; + animation-fill-mode: forwards; + animation-name: fade-in; + animation-timing-function: ease-in; + opacity: 0; + } - .fade-in { - animation-delay: var(--animation-delay, 0); - animation-duration: 200ms; - animation-fill-mode: forwards; - animation-name: fade-in; - animation-timing-function: ease-in; - opacity: 0; - } + .slide-in { + animation-delay: var(--animation-delay, 0); + animation-duration: 200ms; + animation-fill-mode: forwards; + animation-name: slide-in; + animation-timing-function: ease; + transform: translateX(30px); + } - .slide-in { - animation-delay: var(--animation-delay, 0); - animation-duration: 200ms; - animation-fill-mode: forwards; - animation-name: slide-in; - animation-timing-function: ease; - transform: translateX(30px); - } - - :host-context(html[dir='rtl']) .slide-in { - --slide-in-length: -40px; - } - </style> - </template> -</dom-module> + :host-context(html[dir='rtl']) .slide-in { + --slide-in-length: -40px; + } + </style> +</template> diff --git a/chromium/chrome/browser/resources/welcome/shared/animations_css.js b/chromium/chrome/browser/resources/welcome/shared/animations_css.js new file mode 100644 index 00000000000..5cdea0a637f --- /dev/null +++ b/chromium/chrome/browser/resources/welcome/shared/animations_css.js @@ -0,0 +1,9 @@ +// Copyright 2019 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/polymer/v3_0/polymer/polymer_bundled.min.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = `{__html_template__}`; +styleElement.register('animations'); diff --git a/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.html b/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.html deleted file mode 100644 index 0336d1ff108..00000000000 --- a/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.html +++ /dev/null @@ -1,2 +0,0 @@ -<link rel="import" href="chrome://resources/html/cr.html"> -<script src="bookmark_proxy.js"></script>
\ No newline at end of file diff --git a/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.js b/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.js index 42bf8060736..c90508462a0 100644 --- a/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.js +++ b/chromium/chrome/browser/resources/welcome/shared/bookmark_proxy.js @@ -2,91 +2,85 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -cr.define('welcome', function() { +import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js'; + +/** + * @typedef {{ + * parentId: string, + * title: string, + * url: string, + * }} + */ +let bookmarkData; + +/** @interface */ +export class BookmarkProxy { /** - * @typedef {{ - * parentId: string, - * title: string, - * url: string, - * }} + * @param {!bookmarkData} data + * @param {!Function} callback */ - let bookmarkData; + addBookmark(data, callback) {} - /** @interface */ - class BookmarkProxy { - /** - * @param {!bookmarkData} data - * @param {!Function} callback - */ - addBookmark(data, callback) {} + /** @param {string} id ID provided by callback when bookmark was added. */ + removeBookmark(id) {} - /** @param {string} id ID provided by callback when bookmark was added. */ - removeBookmark(id) {} + /** @param {boolean} show */ + toggleBookmarkBar(show) {} - /** @param {boolean} show */ - toggleBookmarkBar(show) {} + /** @return {!Promise<boolean>} */ + isBookmarkBarShown() {} +} - /** @return {!Promise<boolean>} */ - isBookmarkBarShown() {} +/** @implements {BookmarkProxy} */ +export class BookmarkProxyImpl { + /** @override */ + addBookmark(data, callback) { + chrome.bookmarks.create(data, callback); } - /** @implements {welcome.BookmarkProxy} */ - class BookmarkProxyImpl { - /** @override */ - addBookmark(data, callback) { - chrome.bookmarks.create(data, callback); - } - - /** @override */ - removeBookmark(id) { - chrome.bookmarks.remove(id); - } - - /** @override */ - toggleBookmarkBar(show) { - chrome.send('toggleBookmarkBar', [show]); - } - - /** @override */ - isBookmarkBarShown() { - return cr.sendWithPromise('isBookmarkBarShown'); - } + /** @override */ + removeBookmark(id) { + chrome.bookmarks.remove(id); } - cr.addSingletonGetter(BookmarkProxyImpl); - - // Wrapper for bookmark proxy to keep some additional states. - class BookmarkBarManager { - constructor() { - /** @private {welcome.BookmarkProxy} */ - this.proxy_ = BookmarkProxyImpl.getInstance(); - - /** @private {boolean} */ - this.isBarShown_ = false; - - /** @type {!Promise} */ - this.initialized = this.proxy_.isBookmarkBarShown().then(shown => { - this.isBarShown_ = shown; - }); - } - - /** @return {boolean} */ - getShown() { - return this.isBarShown_; - } - - /** @param {boolean} show */ - setShown(show) { - this.isBarShown_ = show; - this.proxy_.toggleBookmarkBar(show); - } + /** @override */ + toggleBookmarkBar(show) { + chrome.send('toggleBookmarkBar', [show]); } - cr.addSingletonGetter(BookmarkBarManager); + /** @override */ + isBookmarkBarShown() { + return sendWithPromise('isBookmarkBarShown'); + } +} + +addSingletonGetter(BookmarkProxyImpl); + +// Wrapper for bookmark proxy to keep some additional states. +export class BookmarkBarManager { + constructor() { + /** @private {BookmarkProxy} */ + this.proxy_ = BookmarkProxyImpl.getInstance(); + + /** @private {boolean} */ + this.isBarShown_ = false; + + /** @type {!Promise} */ + this.initialized = this.proxy_.isBookmarkBarShown().then(shown => { + this.isBarShown_ = shown; + }); + } + + /** @return {boolean} */ + getShown() { + return this.isBarShown_; + } + + /** @param {boolean} show */ + setShown(show) { + this.isBarShown_ = show; + this.proxy_.toggleBookmarkBar(show); + } +} - return { - BookmarkProxy: BookmarkProxy, - BookmarkProxyImpl: BookmarkProxyImpl, - BookmarkBarManager: BookmarkBarManager, - }; -}); +addSingletonGetter(BookmarkBarManager); diff --git a/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.html b/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.html index 52b75a13193..d7346722deb 100644 --- a/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.html +++ b/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.html @@ -1,43 +1,35 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> +<template> + <style include="navi-colors-css"> + .option { + background: var(--cr-card-background-color); + border: 1px solid var(--navi-border-color); + color: var(--cr-primary-text-color); + cursor: pointer; + flex-direction: column; + } -<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> -<link rel="import" href="chrome://resources/cr_elements/md_select_css.html"> -<link rel="import" href="navi_colors_css.html"> + .option:hover { + box-shadow: var(--navi-option-box-shadow); + } -<dom-module id="chooser-shared-css"> - <template> - <style include="navi-colors-css"> - .option { - background: var(--cr-card-background-color); - border: 1px solid var(--navi-border-color); - color: var(--cr-primary-text-color); - cursor: pointer; - flex-direction: column; - } + .option-name { + font-size: .875rem; + } - .option:hover { - box-shadow: var(--navi-option-box-shadow); - } + .button-bar { + display: flex; + justify-content: space-between; + } - .option-name { - font-size: .875rem; - } + :host-context([dir=rtl]) iron-icon[icon='cr:chevron-right'] { + transform: scaleX(-1); + } - .button-bar { - display: flex; - justify-content: space-between; - } - - :host-context([dir=rtl]) iron-icon[icon='cr:chevron-right'] { - transform: scaleX(-1); - } - - iron-icon[icon='cr:chevron-right'] { - height: 1.25rem; - margin-inline-end: -.625rem; - margin-inline-start: .375rem; - width: 1.25rem; - } - </style> - </template> -</dom-module> + iron-icon[icon='cr:chevron-right'] { + height: 1.25rem; + margin-inline-end: -.625rem; + margin-inline-start: .375rem; + width: 1.25rem; + } + </style> +</template> diff --git a/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.js b/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.js new file mode 100644 index 00000000000..6f2044bc1d3 --- /dev/null +++ b/chromium/chrome/browser/resources/welcome/shared/chooser_shared_css.js @@ -0,0 +1,13 @@ +// Copyright 2019 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/shared_vars_css.m.js'; +import 'chrome://resources/cr_elements/md_select_css.m.js'; +import './navi_colors_css.js'; + +import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = `{__html_template__}`; +styleElement.register('chooser-shared-css'); diff --git a/chromium/chrome/browser/resources/welcome/shared/i18n_setup.html b/chromium/chrome/browser/resources/welcome/shared/i18n_setup.html deleted file mode 100644 index c505b2c1365..00000000000 --- a/chromium/chrome/browser/resources/welcome/shared/i18n_setup.html +++ /dev/null @@ -1,2 +0,0 @@ -<script src="chrome://resources/js/load_time_data.js"></script> -<script src="../strings.js"></script> diff --git a/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.html b/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.html deleted file mode 100644 index 5c10f79489a..00000000000 --- a/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.html +++ /dev/null @@ -1,2 +0,0 @@ -<link rel="import" href="chrome://resources/html/cr.html"> -<script src="module_metrics_proxy.js"></script> diff --git a/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.js b/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.js index d6a437b7163..75819f2e515 100644 --- a/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.js +++ b/chromium/chrome/browser/resources/welcome/shared/module_metrics_proxy.js @@ -2,241 +2,228 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -cr.define('welcome', function() { +/** + * NuxNtpBackgroundInteractions enum. + * These values are persisted to logs and should not be renumbered or + * re-used. + * See tools/metrics/histograms/enums.xml. + * @enum {number} + */ +export const NuxNtpBackgroundInteractions = { + PageShown: 0, + DidNothingAndNavigatedAway: 1, + DidNothingAndChoseSkip: 2, + DidNothingAndChoseNext: 3, + ChoseAnOptionAndNavigatedAway: 4, + ChoseAnOptionAndChoseSkip: 5, + ChoseAnOptionAndChoseNext: 6, + NavigatedAwayThroughBrowserHistory: 7, + BackgroundImageFailedToLoad: 8, + BackgroundImageNeverLoaded: 9, +}; + +/** + * NuxGoogleAppsInteractions enum. + * These values are persisted to logs and should not be renumbered or + * re-used. + * See tools/metrics/histograms/enums.xml. + * @enum {number} + */ +export const NuxGoogleAppsInteractions = { + PageShown: 0, + NotUsed_DEPRECATED: 1, + GetStarted_DEPRECATED: 2, + DidNothingAndNavigatedAway: 3, + DidNothingAndChoseSkip: 4, + ChoseAnOptionAndNavigatedAway: 5, + ChoseAnOptionAndChoseSkip: 6, + ChoseAnOptionAndChoseNext: 7, + ClickedDisabledNextButtonAndNavigatedAway: 8, + ClickedDisabledNextButtonAndChoseSkip: 9, + ClickedDisabledNextButtonAndChoseNext: 10, + DidNothingAndChoseNext: 11, + NavigatedAwayThroughBrowserHistory: 12, +}; + +/** @interface */ +class ModuleMetricsProxy { + recordPageShown() {} + + recordDidNothingAndNavigatedAway() {} + + recordDidNothingAndChoseSkip() {} + + recordDidNothingAndChoseNext() {} + + recordChoseAnOptionAndNavigatedAway() {} + + recordChoseAnOptionAndChoseSkip() {} + + recordChoseAnOptionAndChoseNext() {} + + recordClickedDisabledNextButtonAndNavigatedAway() {} + + recordClickedDisabledNextButtonAndChoseSkip() {} + + recordClickedDisabledNextButtonAndChoseNext() {} + + recordNavigatedAwayThroughBrowserHistory() {} +} + +/** @implements {ModuleMetricsProxy} */ +export class ModuleMetricsProxyImpl { /** - * NuxNtpBackgroundInteractions enum. - * These values are persisted to logs and should not be renumbered or - * re-used. - * See tools/metrics/histograms/enums.xml. - * @enum {number} + * @param {string} histogramName The histogram that will record the module + * navigation metrics. */ - const NuxNtpBackgroundInteractions = { - PageShown: 0, - DidNothingAndNavigatedAway: 1, - DidNothingAndChoseSkip: 2, - DidNothingAndChoseNext: 3, - ChoseAnOptionAndNavigatedAway: 4, - ChoseAnOptionAndChoseSkip: 5, - ChoseAnOptionAndChoseNext: 6, - NavigatedAwayThroughBrowserHistory: 7, - BackgroundImageFailedToLoad: 8, - BackgroundImageNeverLoaded: 9, - }; - - /** - * NuxGoogleAppsInteractions enum. - * These values are persisted to logs and should not be renumbered or - * re-used. - * See tools/metrics/histograms/enums.xml. - * @enum {number} - */ - const NuxGoogleAppsInteractions = { - PageShown: 0, - NotUsed_DEPRECATED: 1, - GetStarted_DEPRECATED: 2, - DidNothingAndNavigatedAway: 3, - DidNothingAndChoseSkip: 4, - ChoseAnOptionAndNavigatedAway: 5, - ChoseAnOptionAndChoseSkip: 6, - ChoseAnOptionAndChoseNext: 7, - ClickedDisabledNextButtonAndNavigatedAway: 8, - ClickedDisabledNextButtonAndChoseSkip: 9, - ClickedDisabledNextButtonAndChoseNext: 10, - DidNothingAndChoseNext: 11, - NavigatedAwayThroughBrowserHistory: 12, - }; - - /** @interface */ - class ModuleMetricsProxy { - recordPageShown() {} - - recordDidNothingAndNavigatedAway() {} - - recordDidNothingAndChoseSkip() {} - - recordDidNothingAndChoseNext() {} - - recordChoseAnOptionAndNavigatedAway() {} - - recordChoseAnOptionAndChoseSkip() {} - - recordChoseAnOptionAndChoseNext() {} - - recordClickedDisabledNextButtonAndNavigatedAway() {} - - recordClickedDisabledNextButtonAndChoseSkip() {} - - recordClickedDisabledNextButtonAndChoseNext() {} - - recordNavigatedAwayThroughBrowserHistory() {} + constructor(histogramName, interactions) { + /** @private {string} */ + this.interactionMetric_ = histogramName; + this.interactions_ = interactions; } - /** @implements {welcome.ModuleMetricsProxy} */ - class ModuleMetricsProxyImpl { - /** - * @param {string} histogramName The histogram that will record the module - * navigation metrics. - */ - constructor(histogramName, interactions) { - /** @private {string} */ - this.interactionMetric_ = histogramName; - this.interactions_ = interactions; - } - - /** @override */ - recordPageShown() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, this.interactions_.PageShown, - Object.keys(this.interactions_).length); - } - - /** @override */ - recordDidNothingAndNavigatedAway() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, - this.interactions_.DidNothingAndNavigatedAway, - Object.keys(this.interactions_).length); - } - - /** @override */ - recordDidNothingAndChoseSkip() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, this.interactions_.DidNothingAndChoseSkip, - Object.keys(this.interactions_).length); - } + /** @override */ + recordPageShown() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, this.interactions_.PageShown, + Object.keys(this.interactions_).length); + } - /** @override */ - recordDidNothingAndChoseNext() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, this.interactions_.DidNothingAndChoseNext, - Object.keys(this.interactions_).length); - } + /** @override */ + recordDidNothingAndNavigatedAway() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, this.interactions_.DidNothingAndNavigatedAway, + Object.keys(this.interactions_).length); + } - /** @override */ - recordChoseAnOptionAndNavigatedAway() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, - this.interactions_.ChoseAnOptionAndNavigatedAway, - Object.keys(this.interactions_).length); - } + /** @override */ + recordDidNothingAndChoseSkip() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, this.interactions_.DidNothingAndChoseSkip, + Object.keys(this.interactions_).length); + } - /** @override */ - recordChoseAnOptionAndChoseSkip() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, this.interactions_.ChoseAnOptionAndChoseSkip, - Object.keys(this.interactions_).length); - } + /** @override */ + recordDidNothingAndChoseNext() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, this.interactions_.DidNothingAndChoseNext, + Object.keys(this.interactions_).length); + } - /** @override */ - recordChoseAnOptionAndChoseNext() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, this.interactions_.ChoseAnOptionAndChoseNext, - Object.keys(this.interactions_).length); - } + /** @override */ + recordChoseAnOptionAndNavigatedAway() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, + this.interactions_.ChoseAnOptionAndNavigatedAway, + Object.keys(this.interactions_).length); + } - /** @override */ - recordClickedDisabledNextButtonAndNavigatedAway() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, - this.interactions_.ClickedDisabledNextButtonAndNavigatedAway, - Object.keys(this.interactions_).length); - } + /** @override */ + recordChoseAnOptionAndChoseSkip() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, this.interactions_.ChoseAnOptionAndChoseSkip, + Object.keys(this.interactions_).length); + } - /** @override */ - recordClickedDisabledNextButtonAndChoseSkip() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, - this.interactions_.ClickedDisabledNextButtonAndChoseSkip, - Object.keys(this.interactions_).length); - } + /** @override */ + recordChoseAnOptionAndChoseNext() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, this.interactions_.ChoseAnOptionAndChoseNext, + Object.keys(this.interactions_).length); + } - /** @override */ - recordClickedDisabledNextButtonAndChoseNext() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, - this.interactions_.ClickedDisabledNextButtonAndChoseNext, - Object.keys(this.interactions_).length); - } + /** @override */ + recordClickedDisabledNextButtonAndNavigatedAway() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, + this.interactions_.ClickedDisabledNextButtonAndNavigatedAway, + Object.keys(this.interactions_).length); + } - /** @override */ - recordNavigatedAwayThroughBrowserHistory() { - chrome.metricsPrivate.recordEnumerationValue( - this.interactionMetric_, - this.interactions_.NavigatedAwayThroughBrowserHistory, - Object.keys(this.interactions_).length); - } + /** @override */ + recordClickedDisabledNextButtonAndChoseSkip() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, + this.interactions_.ClickedDisabledNextButtonAndChoseSkip, + Object.keys(this.interactions_).length); } - class ModuleMetricsManager { - /** @param {welcome.ModuleMetricsProxy} metricsProxy */ - constructor(metricsProxy) { - this.metricsProxy_ = metricsProxy; - - this.options_ = { - didNothing: { - andNavigatedAway: metricsProxy.recordDidNothingAndNavigatedAway, - andChoseSkip: metricsProxy.recordDidNothingAndChoseSkip, - andChoseNext: metricsProxy.recordDidNothingAndChoseNext, - }, - choseAnOption: { - andNavigatedAway: metricsProxy.recordChoseAnOptionAndNavigatedAway, - andChoseSkip: metricsProxy.recordChoseAnOptionAndChoseSkip, - andChoseNext: metricsProxy.recordChoseAnOptionAndChoseNext, - }, - clickedDisabledNextButton: { - andNavigatedAway: - metricsProxy.recordClickedDisabledNextButtonAndNavigatedAway, - andChoseSkip: - metricsProxy.recordClickedDisabledNextButtonAndChoseSkip, - andChoseNext: - metricsProxy.recordClickedDisabledNextButtonAndChoseNext, - }, - }; - - this.firstPart = this.options_.didNothing; - } + /** @override */ + recordClickedDisabledNextButtonAndChoseNext() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, + this.interactions_.ClickedDisabledNextButtonAndChoseNext, + Object.keys(this.interactions_).length); + } - recordPageInitialized() { - this.metricsProxy_.recordPageShown(); - this.firstPart = this.options_.didNothing; - } + /** @override */ + recordNavigatedAwayThroughBrowserHistory() { + chrome.metricsPrivate.recordEnumerationValue( + this.interactionMetric_, + this.interactions_.NavigatedAwayThroughBrowserHistory, + Object.keys(this.interactions_).length); + } +} + +export class ModuleMetricsManager { + /** @param {ModuleMetricsProxy} metricsProxy */ + constructor(metricsProxy) { + this.metricsProxy_ = metricsProxy; + + this.options_ = { + didNothing: { + andNavigatedAway: metricsProxy.recordDidNothingAndNavigatedAway, + andChoseSkip: metricsProxy.recordDidNothingAndChoseSkip, + andChoseNext: metricsProxy.recordDidNothingAndChoseNext, + }, + choseAnOption: { + andNavigatedAway: metricsProxy.recordChoseAnOptionAndNavigatedAway, + andChoseSkip: metricsProxy.recordChoseAnOptionAndChoseSkip, + andChoseNext: metricsProxy.recordChoseAnOptionAndChoseNext, + }, + clickedDisabledNextButton: { + andNavigatedAway: + metricsProxy.recordClickedDisabledNextButtonAndNavigatedAway, + andChoseSkip: metricsProxy.recordClickedDisabledNextButtonAndChoseSkip, + andChoseNext: metricsProxy.recordClickedDisabledNextButtonAndChoseNext, + }, + }; + + this.firstPart = this.options_.didNothing; + } - recordClickedOption() { - // Only overwrite this.firstPart if it's not overwritten already - if (this.firstPart == this.options_.didNothing) { - this.firstPart = this.options_.choseAnOption; - } - } + recordPageInitialized() { + this.metricsProxy_.recordPageShown(); + this.firstPart = this.options_.didNothing; + } - recordClickedDisabledButton() { - // Only overwrite this.firstPart if it's not overwritten already - if (this.firstPart == this.options_.didNothing) { - this.firstPart = this.options_.clickedDisabledNextButton; - } + recordClickedOption() { + // Only overwrite this.firstPart if it's not overwritten already + if (this.firstPart == this.options_.didNothing) { + this.firstPart = this.options_.choseAnOption; } + } - recordNoThanks() { - this.firstPart.andChoseSkip.call(this.metricsProxy_); + recordClickedDisabledButton() { + // Only overwrite this.firstPart if it's not overwritten already + if (this.firstPart == this.options_.didNothing) { + this.firstPart = this.options_.clickedDisabledNextButton; } + } - recordGetStarted() { - this.firstPart.andChoseNext.call(this.metricsProxy_); - } + recordNoThanks() { + this.firstPart.andChoseSkip.call(this.metricsProxy_); + } - recordNavigatedAway() { - this.firstPart.andNavigatedAway.call(this.metricsProxy_); - } + recordGetStarted() { + this.firstPart.andChoseNext.call(this.metricsProxy_); + } - recordBrowserBackOrForward() { - this.metricsProxy_.recordNavigatedAwayThroughBrowserHistory(); - } + recordNavigatedAway() { + this.firstPart.andNavigatedAway.call(this.metricsProxy_); } - return { - ModuleMetricsManager: ModuleMetricsManager, - ModuleMetricsProxyImpl: ModuleMetricsProxyImpl, - ModuleMetricsProxy: ModuleMetricsProxy, - NuxGoogleAppsInteractions: NuxGoogleAppsInteractions, - NuxNtpBackgroundInteractions: NuxNtpBackgroundInteractions, - }; -}); + recordBrowserBackOrForward() { + this.metricsProxy_.recordNavigatedAwayThroughBrowserHistory(); + } +} diff --git a/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.html b/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.html index 99846f3120f..403ee035ba4 100644 --- a/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.html +++ b/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.html @@ -1,51 +1,44 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> +<template> + <style> + :host { + --navi-border-color: var(--google-grey-refresh-300); + --navi-check-icon-color: lightgrey; + --navi-keyboard-focus-color: rgba(var(--google-blue-600-rgb), .4); + --navi-option-box-shadow: + 0 1px 2px 0 rgba(var(--google-grey-800-rgb), .3), + 0 3px 6px 2px rgba(var(--google-grey-800-rgb), .15); + --navi-option-icon-shadow-color: var(--google-grey-refresh-100); + --navi-shape-blue-color: rgb(26, 115, 232); /* #1A73E8 */ + --navi-shape-green-color: rgb(49, 167, 83); /* #31A753 */ + --navi-shape-grey-color: rgb(241, 243, 244); /* #F1F3F4 */ + --navi-shape-red-color: rgb(233, 66, 53); /* #E94235 */ + --navi-shape-yellow-dots-color: rgb(253, 214, 99); /* #FDD663 */ + --navi-shape-yellow-semicircle-color: rgb(250, 207, 76); /* #FACF4C */ + --navi-step-indicator-active-color: + rgba(var(--google-blue-600-rgb), .5); + --navi-step-indicator-color: var(--google-grey-200); + --navi-wallpaper-text-color: var(--google-grey-refresh-700); + } -<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> -<link rel="import" href="chrome://resources/cr_elements/md_select_css.html"> - -<dom-module id="navi-colors-css"> - <template> - <style> + @media (prefers-color-scheme: dark) { :host { - --navi-border-color: var(--google-grey-refresh-300); - --navi-check-icon-color: lightgrey; - --navi-keyboard-focus-color: rgba(var(--google-blue-600-rgb), .4); - --navi-option-box-shadow: - 0 1px 2px 0 rgba(var(--google-grey-800-rgb), .3), - 0 3px 6px 2px rgba(var(--google-grey-800-rgb), .15); - --navi-option-icon-shadow-color: var(--google-grey-refresh-100); - --navi-shape-blue-color: rgb(26, 115, 232); /* #1A73E8 */ - --navi-shape-green-color: rgb(49, 167, 83); /* #31A753 */ - --navi-shape-grey-color: rgb(241, 243, 244); /* #F1F3F4 */ - --navi-shape-red-color: rgb(233, 66, 53); /* #E94235 */ - --navi-shape-yellow-dots-color: rgb(253, 214, 99); /* #FDD663 */ - --navi-shape-yellow-semicircle-color: rgb(250, 207, 76); /* #FACF4C */ - --navi-step-indicator-active-color: - rgba(var(--google-blue-600-rgb), .5); - --navi-step-indicator-color: var(--google-grey-200); - --navi-wallpaper-text-color: var(--google-grey-refresh-700); - } - - @media (prefers-color-scheme: dark) { - :host { - --navi-border-color: var(--google-grey-refresh-700); - --navi-check-icon-color: var(--google-grey-refresh-700); - --navi-keyboard-focus-color: - rgba(var(--google-blue-refresh-300-rgb), .5); - --navi-option-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), - 0 3px 6px 2px rgba(0, 0, 0, .15); - --navi-option-icon-shadow-color: var(--google-grey-refresh-700); - --navi-shape-blue-color: rgb(138, 180, 248); /* #8AB4F8 */ - --navi-shape-green-color: rgb(129, 201, 149); /* #81C995 */ - --navi-shape-grey-color: rgb(154, 160, 166); /* #9AA0A6 */ - --navi-shape-red-color: rgb(238, 103, 92); /* #EE675C */ - /* --navi-shape-yellow-dots-color is same color in dark mode */ - --navi-shape-yellow-semicircle-color: rgb(253, 214, 99); /* #FDD663 */ - --navi-step-indicator-active-color: var(--google-blue-refresh-300); - --navi-step-indicator-color: var(--google-grey-refresh-500); - --navi-wallpaper-text-color: var(--google-grey-200); - } + --navi-border-color: var(--google-grey-refresh-700); + --navi-check-icon-color: var(--google-grey-refresh-700); + --navi-keyboard-focus-color: + rgba(var(--google-blue-refresh-300-rgb), .5); + --navi-option-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .3), + 0 3px 6px 2px rgba(0, 0, 0, .15); + --navi-option-icon-shadow-color: var(--google-grey-refresh-700); + --navi-shape-blue-color: rgb(138, 180, 248); /* #8AB4F8 */ + --navi-shape-green-color: rgb(129, 201, 149); /* #81C995 */ + --navi-shape-grey-color: rgb(154, 160, 166); /* #9AA0A6 */ + --navi-shape-red-color: rgb(238, 103, 92); /* #EE675C */ + /* --navi-shape-yellow-dots-color is same color in dark mode */ + --navi-shape-yellow-semicircle-color: rgb(253, 214, 99); /* #FDD663 */ + --navi-step-indicator-active-color: var(--google-blue-refresh-300); + --navi-step-indicator-color: var(--google-grey-refresh-500); + --navi-wallpaper-text-color: var(--google-grey-200); } - </style> - </template> -</dom-module> + } + </style> +</template> diff --git a/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.js b/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.js new file mode 100644 index 00000000000..f803f2d1757 --- /dev/null +++ b/chromium/chrome/browser/resources/welcome/shared/navi_colors_css.js @@ -0,0 +1,12 @@ +// Copyright 2019 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/shared_vars_css.m.js'; +import 'chrome://resources/cr_elements/md_select_css.m.js'; + +import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = `{__html_template__}`; +styleElement.register('navi-colors-css'); diff --git a/chromium/chrome/browser/resources/welcome/shared/nux_types.js b/chromium/chrome/browser/resources/welcome/shared/nux_types.js index d8fd86dfc57..3c8be494718 100644 --- a/chromium/chrome/browser/resources/welcome/shared/nux_types.js +++ b/chromium/chrome/browser/resources/welcome/shared/nux_types.js @@ -2,8 +2,6 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -cr.exportPath('welcome'); - /** * @typedef {{ * id: number, @@ -12,7 +10,7 @@ cr.exportPath('welcome'); * url: string, * }} */ -welcome.BookmarkListItem; +export let BookmarkListItem; /** * @typedef {{ @@ -20,7 +18,7 @@ welcome.BookmarkListItem; * active: number, * }} */ -welcome.stepIndicatorModel; +export let stepIndicatorModel; /** * TODO(hcarmona): somehow reuse from @@ -32,4 +30,4 @@ welcome.stepIndicatorModel; * isUnknownError: boolean, * }}; */ -welcome.DefaultBrowserInfo; +export let DefaultBrowserInfo; diff --git a/chromium/chrome/browser/resources/welcome/shared/onboarding_background.html b/chromium/chrome/browser/resources/welcome/shared/onboarding_background.html index 643c8eff8ee..e51c6d933b4 100644 --- a/chromium/chrome/browser/resources/welcome/shared/onboarding_background.html +++ b/chromium/chrome/browser/resources/welcome/shared/onboarding_background.html @@ -1,187 +1,180 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> - -<dom-module id="onboarding-background"> - <template> - <style> - @keyframes blue-circle-anim-x { - 50% { - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transform: translateX(44px); - } - } - - @keyframes blue-circle-anim-y { - 50% { - animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1); - transform: translateY(17px); - } - } - - @keyframes green-rectangle-anim { - 100% { - transform: rotate(360deg); - } - } - - @keyframes red-triangle-anim { - 50% { - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transform: translateY(25px) rotate(-53deg); - } - } - - @keyframes yellow-semicircle-anim { - 40% { - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transform: translateY(40px) rotate(-1deg); - } - } - - @keyframes grey-rounded-rectangle-anim { - 65% { - animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transform: translateY(-48px) rotate(-75deg); - } - } - - :host { - bottom: 0; - left: 0; - margin: auto; - overflow: hidden; - position: absolute; - right: 0; - top: 0; - z-index: -1; - } - - /* The container is necessary in order for :host to hide overflowing SVGs - correctly without disturbing their positions. */ - #container { - height: 100%; - left: 50%; - min-height: 700px; - min-width: 1024px; - position: absolute; - top: 50%; - transform: translate(-50%, -50%); - width: 100%; - } - - img, - span { - position: absolute; - } - - #blue-circle-container { - animation: blue-circle-anim-x 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; - left: calc(13% - 50px); /* Relative to #yellow-dots. */ - top: calc(18% - 26px); /* Relative to #yellow-dots. */ - } - - #blue-circle-container::after { - -webkit-mask: url(../images/background_svgs/blue_circle.svg) no-repeat - top left; - animation: blue-circle-anim-y 9s cubic-bezier(0.25, 0, 0.2, 1) infinite; - background-color: var(--navi-shape-blue-color); - content: ' '; /* Content needs to be non-empty */ - height: 43px; - position: absolute; - width: 43px; - } - - #yellow-dots { - -webkit-mask: url(../images/background_svgs/yellow_dots.svg) no-repeat - top left; - background-color: var(--navi-shape-yellow-dots-color); - content: ' '; /* Content needs to be non-empty */ - height: 57px; - left: 13%; - top: 18%; - width: 76px; - } - - #grey-rounded-rectangle { - -webkit-mask: url(../images/background_svgs/grey_rounded_rectangle.svg) - no-repeat top left; - animation: grey-rounded-rectangle-anim 10s cubic-bezier(0.4, 0, 0.2, 1) - infinite; - background-color: var(--navi-shape-grey-color); - content: ' '; /* Content needs to be non-empty */ - height: 132px; - left: -42px; - top: 45%; - width: 132px; - } - - #red-triangle { - -webkit-mask: url(../images/background_svgs/red_triangle.svg) no-repeat - bottom left; - animation: red-triangle-anim 9.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; - background-color: var(--navi-shape-red-color); - bottom: 15%; - content: ' '; /* Content needs to be non-empty */ - height: 74px; - left: 12%; - width: 65px; - } - - #yellow-semicircle { - -webkit-mask: url(../images/background_svgs/yellow_semicircle.svg) - no-repeat top right; - animation: yellow-semicircle-anim 10s cubic-bezier(0.4, 0, 0.2, 1) - infinite; - background-color: var(--navi-shape-yellow-semicircle-color); - content: ' '; /* Content needs to be non-empty */ - height: 171px; - right: 28.5%; - top: -50px; - transform: rotate(-7deg); - width: 211px; - } - - #green-rectangle { - -webkit-mask: url(../images/background_svgs/green_rectangle.svg) - no-repeat bottom right; - animation: green-rectangle-anim 40s infinite linear; - background-color: var(--navi-shape-green-color); - bottom: 8%; - content: ' '; /* Content needs to be non-empty */ - height: 371px; - right: -255px; - width: 371px; - } - - #grey-oval { - -webkit-mask: url(../images/background_svgs/grey_oval.svg) no-repeat - bottom right; - background-color: var(--navi-shape-grey-color); - bottom: calc(8% + 24px); /* Relative to green-rectangle. */ - content: ' '; /* Content needs to be non-empty */ - height: 100px; - mix-blend-mode: multiply; - right: 48px; - width: 100px; - } - - @media (prefers-color-scheme: dark) { - #grey-oval { - mix-blend-mode: screen; - } - } - </style> - <div id="container"> - <!-- Using span as container for an :after element that actually contains - the blue-circle svg, because the animation needs to curve so x and y - needs to be animated separately. --> - <span id="blue-circle-container"></span> - <span id="green-rectangle"></span> - <span id="grey-oval"></span> - <span id="grey-rounded-rectangle"></span> - <span id="red-triangle"></span> - <span id="yellow-dots"></span> - <span id="yellow-semicircle"></span> - </div> - </template> - <script src="onboarding_background.js"></script> -</dom-module> +<style> + @keyframes blue-circle-anim-x { + 50% { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translateX(44px); + } + } + + @keyframes blue-circle-anim-y { + 50% { + animation-timing-function: cubic-bezier(0.55, 0, 0.2, 1); + transform: translateY(17px); + } + } + + @keyframes green-rectangle-anim { + 100% { + transform: rotate(360deg); + } + } + + @keyframes red-triangle-anim { + 50% { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translateY(25px) rotate(-53deg); + } + } + + @keyframes yellow-semicircle-anim { + 40% { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translateY(40px) rotate(-1deg); + } + } + + @keyframes grey-rounded-rectangle-anim { + 65% { + animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transform: translateY(-48px) rotate(-75deg); + } + } + + :host { + bottom: 0; + left: 0; + margin: auto; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + z-index: -1; + } + + /* The container is necessary in order for :host to hide overflowing SVGs + correctly without disturbing their positions. */ + #container { + height: 100%; + left: 50%; + min-height: 700px; + min-width: 1024px; + position: absolute; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; + } + + img, + span { + position: absolute; + } + + #blue-circle-container { + animation: blue-circle-anim-x 9s cubic-bezier(0.4, 0, 0.2, 1) infinite; + left: calc(13% - 50px); /* Relative to #yellow-dots. */ + top: calc(18% - 26px); /* Relative to #yellow-dots. */ + } + + #blue-circle-container::after { + -webkit-mask: url(../images/background_svgs/blue_circle.svg) no-repeat + top left; + animation: blue-circle-anim-y 9s cubic-bezier(0.25, 0, 0.2, 1) infinite; + background-color: var(--navi-shape-blue-color); + content: ' '; /* Content needs to be non-empty */ + height: 43px; + position: absolute; + width: 43px; + } + + #yellow-dots { + -webkit-mask: url(../images/background_svgs/yellow_dots.svg) no-repeat + top left; + background-color: var(--navi-shape-yellow-dots-color); + content: ' '; /* Content needs to be non-empty */ + height: 57px; + left: 13%; + top: 18%; + width: 76px; + } + + #grey-rounded-rectangle { + -webkit-mask: url(../images/background_svgs/grey_rounded_rectangle.svg) + no-repeat top left; + animation: grey-rounded-rectangle-anim 10s cubic-bezier(0.4, 0, 0.2, 1) + infinite; + background-color: var(--navi-shape-grey-color); + content: ' '; /* Content needs to be non-empty */ + height: 132px; + left: -42px; + top: 45%; + width: 132px; + } + + #red-triangle { + -webkit-mask: url(../images/background_svgs/red_triangle.svg) no-repeat + bottom left; + animation: red-triangle-anim 9.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; + background-color: var(--navi-shape-red-color); + bottom: 15%; + content: ' '; /* Content needs to be non-empty */ + height: 74px; + left: 12%; + width: 65px; + } + + #yellow-semicircle { + -webkit-mask: url(../images/background_svgs/yellow_semicircle.svg) + no-repeat top right; + animation: yellow-semicircle-anim 10s cubic-bezier(0.4, 0, 0.2, 1) + infinite; + background-color: var(--navi-shape-yellow-semicircle-color); + content: ' '; /* Content needs to be non-empty */ + height: 171px; + right: 28.5%; + top: -50px; + transform: rotate(-7deg); + width: 211px; + } + + #green-rectangle { + -webkit-mask: url(../images/background_svgs/green_rectangle.svg) + no-repeat bottom right; + animation: green-rectangle-anim 40s infinite linear; + background-color: var(--navi-shape-green-color); + bottom: 8%; + content: ' '; /* Content needs to be non-empty */ + height: 371px; + right: -255px; + width: 371px; + } + + #grey-oval { + -webkit-mask: url(../images/background_svgs/grey_oval.svg) no-repeat + bottom right; + background-color: var(--navi-shape-grey-color); + bottom: calc(8% + 24px); /* Relative to green-rectangle. */ + content: ' '; /* Content needs to be non-empty */ + height: 100px; + mix-blend-mode: multiply; + right: 48px; + width: 100px; + } + + @media (prefers-color-scheme: dark) { + #grey-oval { + mix-blend-mode: screen; + } + } +</style> +<div id="container"> + <!-- Using span as container for an :after element that actually contains + the blue-circle svg, because the animation needs to curve so x and y + needs to be animated separately. --> + <span id="blue-circle-container"></span> + <span id="green-rectangle"></span> + <span id="grey-oval"></span> + <span id="grey-rounded-rectangle"></span> + <span id="red-triangle"></span> + <span id="yellow-dots"></span> + <span id="yellow-semicircle"></span> +</div> diff --git a/chromium/chrome/browser/resources/welcome/shared/onboarding_background.js b/chromium/chrome/browser/resources/welcome/shared/onboarding_background.js index 12358fa84c5..98f2999cd60 100644 --- a/chromium/chrome/browser/resources/welcome/shared/onboarding_background.js +++ b/chromium/chrome/browser/resources/welcome/shared/onboarding_background.js @@ -6,6 +6,11 @@ * @fileoverview This element contains a set of SVGs that together acts as an * animated and responsive background for any page that contains it. */ + +import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + Polymer({ is: 'onboarding-background', -});
\ No newline at end of file + + _template: html`{__html_template__}`, +}); diff --git a/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.html b/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.html index 3d662b4dac4..8d2c1b78f0d 100644 --- a/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.html +++ b/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.html @@ -1,55 +1,48 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> +<template> + <style include="navi-colors-css"> + #container { + align-items: center; + display: flex; + flex-direction: column; + justify-content: center; + margin: auto; + min-height: 100%; + min-width: 800px; + position: relative; + } -<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> -<link rel="import" href="navi_colors_css.html"> + h1 { + color: var(--cr-primary-text-color); + font-size: 4rem; + margin-bottom: 40px; + margin-top: 16px; + text-align: center; + } -<dom-module id="splash-pages-shared-css"> - <template> - <style include="navi-colors-css"> - #container { - align-items: center; - display: flex; - flex-direction: column; - justify-content: center; - margin: auto; - min-height: 100%; - min-width: 800px; - position: relative; - } + h2 { + color: var(--cr-secondary-text-color); + font-size: 1.5rem; + font-weight: 500; + line-height: 2.25rem; + margin: 0; + opacity: 0.8; + text-align: center; + } - h1 { - color: var(--cr-primary-text-color); - font-size: 4rem; - margin-bottom: 40px; - margin-top: 16px; - text-align: center; - } + cr-button { + font-size: 1rem; + height: 3rem; + padding-bottom: 12px; + padding-top: 12px; + text-align: center; + white-space: nowrap; + width: 256px; + } - h2 { - color: var(--cr-secondary-text-color); - font-size: 1.5rem; - font-weight: 500; - line-height: 2.25rem; - margin: 0; - opacity: 0.8; - text-align: center; - } - - cr-button { - font-size: 1rem; - height: 3rem; - padding-bottom: 12px; - padding-top: 12px; - text-align: center; - white-space: nowrap; - width: 256px; - } - - .action-link { - font-size: 1rem; - font-weight: 500; - margin-top: 24px; - } - </style> - </template> -</dom-module> + .action-link { + font-size: 1rem; + font-weight: 500; + margin-top: 24px; + } + </style> +</template> diff --git a/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.js b/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.js new file mode 100644 index 00000000000..896d7adc612 --- /dev/null +++ b/chromium/chrome/browser/resources/welcome/shared/splash_pages_shared_css.js @@ -0,0 +1,12 @@ +// Copyright 2019 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/shared_vars_css.m.js'; +import './navi_colors_css.js'; + +import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +const styleElement = document.createElement('dom-module'); +styleElement.innerHTML = `{__html_template__}`; +styleElement.register('splash-pages-shared-css'); diff --git a/chromium/chrome/browser/resources/welcome/shared/step_indicator.html b/chromium/chrome/browser/resources/welcome/shared/step_indicator.html index 4123eb53301..4caec81cbe7 100644 --- a/chromium/chrome/browser/resources/welcome/shared/step_indicator.html +++ b/chromium/chrome/browser/resources/welcome/shared/step_indicator.html @@ -1,32 +1,22 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> +<style include="navi-colors-css"> + :host { + align-items: center; + display: flex; + } -<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> -<link rel="import" href="navi_colors_css.html"> + span { + background: var(--navi-step-indicator-color); + border-radius: 50%; + display: inline-block; + height: 8px; + margin: 0 4px; + width: 8px; + } -<dom-module id="step-indicator"> - <template> - <style include="navi-colors-css"> - :host { - align-items: center; - display: flex; - } - - span { - background: var(--navi-step-indicator-color); - border-radius: 50%; - display: inline-block; - height: 8px; - margin: 0 4px; - width: 8px; - } - - span.active { - background: var(--navi-step-indicator-active-color); - } - </style> - <template is="dom-repeat" items="[[dots_]]"> - <span class$="[[getActiveClass_(index, model.active)]]"></span> - </template> - </template> - <script src="step_indicator.js"></script> -</dom-module> + span.active { + background: var(--navi-step-indicator-active-color); + } +</style> +<template is="dom-repeat" items="[[dots_]]"> + <span class$="[[getActiveClass_(index, model.active)]]"></span> +</template> diff --git a/chromium/chrome/browser/resources/welcome/shared/step_indicator.js b/chromium/chrome/browser/resources/welcome/shared/step_indicator.js index 4af45dc89f1..8d4b45c0ff5 100644 --- a/chromium/chrome/browser/resources/welcome/shared/step_indicator.js +++ b/chromium/chrome/browser/resources/welcome/shared/step_indicator.js @@ -6,11 +6,20 @@ * @fileoverview This element contains a set of SVGs that together acts as an * animated and responsive background for any page that contains it. */ +import 'chrome://resources/cr_elements/shared_vars_css.m.js'; +import './navi_colors_css.js'; + +import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js'; + +import {stepIndicatorModel} from './nux_types.js'; + Polymer({ is: 'step-indicator', + _template: html`{__html_template__}`, + properties: { - /** @type {welcome.stepIndicatorModel} */ + /** @type {stepIndicatorModel} */ model: Object, /** @private */ |