Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(2845)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: chrome/browser/resources/welcome/welcome.html

Issue 2252063002: Adding client code for new desktop First Run Experience. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fixing build issues after rebasing Created 4 years, 3 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« chrome/app/chromium_strings.grd ('K') | « chrome/browser/browser_resources.grd ('k') | chrome/browser/resources/welcome/welcome.js » ('j') | chrome/browser/resources/welcome/welcome.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: chrome/browser/resources/welcome/welcome.html
diff --git a/chrome/browser/resources/welcome/welcome.html b/chrome/browser/resources/welcome/welcome.html
new file mode 100644
index 0000000000000000000000000000000000000000..f61e10b2f82c80a5102dc0a04bdad8bace34cab9
--- /dev/null
+++ b/chrome/browser/resources/welcome/welcome.html
@@ -0,0 +1,227 @@
+<html>
michaelpg 2016/09/06 22:21:56 start with <!doctype html>
tmartino 2016/09/07 23:06:42 Done
+<head>
+ <title>$i18n{headerText}</title>
+
+ <link rel="import" href="chrome://resources/html/polymer.html">
+ <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+ <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
+
+ <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
+
+ <script src="chrome://resources/js/load_time_data.js"></script>
+ <script src="chrome://welcome/welcome.js"></script>
+
+ <style is="custom-style">
michaelpg 2016/09/06 22:21:56 i don't think this needs to be an [is="custom-styl
tmartino 2016/09/07 23:06:42 Done
+ body {
+ align-items: center;
+ box-sizing: border-box;
michaelpg 2016/09/06 22:21:56 why do you need this?
tmartino 2016/09/07 23:06:42 It was keeping the watermark in frame. However, se
+ color: var(--paper-grey-900);
+ display: flex;
+ flex-direction: column;
+ font-size: 100%;
michaelpg 2016/09/06 22:21:56 Why override 81.25%? Presumably that was selected
tmartino 2016/09/07 23:06:42 At normal settings, that 81.25% results in 13pt (a
+ justify-content: center;
+ min-height: 100vh;
michaelpg 2016/09/06 22:21:56 why do you need this?
tmartino 2016/09/07 23:06:42 The combination of a min-height here and a max-hei
+ overflow-y: hidden;
michaelpg 2016/09/06 22:21:56 why make this unscrollable? if this is a side effe
tmartino 2016/09/07 23:06:42 Without this, the slide up animation for the conte
+ padding: 16px;
+ }
+
+ @keyframes slideUpContent {
+ from {
+ transform: translateY(186px);
+ }
+ }
+
+ @keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ }
+
+ @keyframes fadeOut {
+ to {
+ opacity: 0;
+ }
+ }
+
+
+ @keyframes fadeInAndSlideUp {
+ from {
+ opacity: 0;
+ transform: translateY(8px);
+ }
+ }
+
+ @keyframes spin {
+ from {
+ transform: rotate(-1440deg);
+ }
+ }
+
+ @keyframes fadeInAndSlideDownShadow {
+ from {
+ opacity: .6;
+ top: 8px;
+ }
+ }
+
+ @keyframes scaleUp {
+ 0% {
+ transform: scale(.8);
+ }
+ }
+
+ .spacer {
+ flex: 1;
+ max-height: 96px;
+ }
+
+ .content {
+ animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both;
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
+ max-width: 500px;
+ text-align: center;
michaelpg 2016/09/06 22:21:56 since this is flex, use "align-items: center;" ins
tmartino 2016/09/07 23:06:42 Done
+ }
+
+ .heading {
+ animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
+ font-size: 2.125em;
+ margin-bottom: .25em;
+ margin-top: 1.5em;
+ }
+
+ .subheading {
+ animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
+ color: var(--google-grey-500);
+ font-size: 1em;
+ margin-top: .25em;
+ }
+
+ .logo {
+ animation: fadeIn 600ms both;
+ height: 96px;
+ margin: 0 auto;
+ position: relative;
+ width: 96px;
+ }
+
+ .logo-icon {
+ animation: scaleUp 600ms 500ms cubic-bezier(.5, -.5, 0, 2.25) both;
+ background: white;
+ border-radius: 50%;
+ height: 96px;
+ width: 96px;
+ }
+
+ .logo-bw,
+ .logo-color {
+ animation: fadeIn 600ms 500ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) both;
michaelpg 2016/09/06 22:21:56 wrap
tmartino 2016/09/07 23:06:42 Done
+ content: -webkit-image-set(url(logo.png) 1x, url(logo2x.png) 2x);
+ left: -5px;
+ position: absolute;
+ top: -5px;
+ width: 106px;
+ }
+
+ .logo-bw {
+ -webkit-filter: grayscale(100%);
+ }
+
+ .logo-color {
+ animation: fadeIn 300ms 700ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) both;
michaelpg 2016/09/06 22:21:56 wrap
tmartino 2016/09/07 23:06:42 Done
+ }
+
+ .logo-shadow {
+ -webkit-filter: blur(16px);
+ animation: fadeInAndSlideDownShadow 300ms 600ms both;
+ background: rgba(0, 0, 0, .2);
+ border-radius: 50%;
+ height: 96px;
+ position: absolute;
+ top: 16px;
+ width: 96px;
+ z-index: -1;
+ }
+
+ .signin {
+ animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both;
+ margin-top: 3em;
+ text-align: left;
+ }
+
+ .signin-description {
+ font-size: .875em;
+ line-height: 1.725em;
+ margin: 0 auto;
+ max-width: 344px;
+ }
+
+ .signin-buttons {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ margin-top: 2em;
+ }
+
+ .action {
+ background: var(--google-blue-500);
+ color: white;
+ font-size: .75em;
+ font-weight: 500;
+ line-height: 2.5em;
+ padding: 0 1.25em;
+ }
+
+ .action:focus {
+ background: var(--google-blue-700);
+ }
+
+ .link {
+ color: var(--google-blue-500);
+ display: inline-block;
+ font-size: .75em;
+ margin: 1.5em;
+ text-align: center;
+ text-decoration: none;
+ }
+
+ .link:hover {
+ text-decoration: underline;
+ }
+
+ .watermark {
+ -webkit-mask-image: url(chrome://welcome/watermark.svg);
+ -webkit-mask-repeat: no-repeat;
+ -webkit-mask-size: 100%;
+ background: var(--paper-grey-400);
+ height: 24px;
+ margin-top: 48px;
+ width: 74px;
+ }
+ </style>
+</head>
+<body>
+ <div class="spacer"></div>
+ <div class="content">
+ <div class="logo">
+ <div class="logo-icon">
+ <img src="chrome://welcome/logo.png" class="logo-bw">
+ <img src="chrome://welcome/logo.png" class="logo-color">
+ </div>
+ <div class="logo-shadow"></div>
+ </div>
+ <p class="heading">$i18n{headerText}</p>
michaelpg 2016/09/06 22:21:56 normally we just use <div> instead of using <p> an
tmartino 2016/09/07 23:06:42 Done
+ <p class="subheading">$i18n{subheaderText}</p>
michaelpg 2016/09/06 22:21:56 <if expr="_google_chrome"> or something like that
tmartino 2016/09/07 23:06:42 Done
+ <div class="signin">
+ <p class="signin-description">$i18n{descriptionText}</p>
+ <div class="signin-buttons">
+ <paper-button class="action">$i18n{acceptText}</paper-button>
+ <a href="#" class="link">$i18n{declineText}</a>
+ </div>
+ </div>
+ </div>
+ <div class="watermark">
+</body>
+</html>
« chrome/app/chromium_strings.grd ('K') | « chrome/browser/browser_resources.grd ('k') | chrome/browser/resources/welcome/welcome.js » ('j') | chrome/browser/resources/welcome/welcome.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698