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

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: Inlining CSS Created 4 years, 4 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
« no previous file with comments | « chrome/browser/browser_resources.grd ('k') | chrome/browser/resources/welcome/welcome.js » ('j') | chrome/browser/ui/webui/welcome_ui.cc » ('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..afa9cfda388adb5fd8dc853b876af3b4c8009883
--- /dev/null
+++ b/chrome/browser/resources/welcome/welcome.html
@@ -0,0 +1,238 @@
+<html>
+<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/cr.js"></script>
+ <script src="chrome://resources/js/load_time_data.js"></script>
+ <script src="chrome://resources/js/util.js"></script>
+ <script src="chrome://welcome/welcome.js"></script>
+
+ <style is="custom-style">
+ * {
Moe 2016/08/22 20:40:52 override these only where needed.
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ }
+
+ body {
+ align-items: center;
+ box-sizing: border-box;
+ color: var(--paper-grey-900);
+ display: flex;
+ flex-direction: column;
+ font-size: 87.5%;
Moe 2016/08/22 20:40:52 Is this intentionally different form the default 8
+ justify-content: center;
+ line-height: 171%;
Moe 2016/08/22 20:40:52 Why do you need to fiddle with line-height so much
+ min-height: 100vh;
+ overflow-y: hidden;
+ padding: 16px;
+ }
+
+ a {
Moe 2016/08/22 20:40:52 you probably want a google blue 500 or sth for thi
tmartino 2016/08/23 18:49:06 Moved to the .link class below. Hover is covered;
+ text-decoration: none;
+ }
+
+
+ @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;
Moe 2016/08/22 20:40:52 space after commas. here and elsewhere. others wil
tmartino 2016/08/23 18:49:06 Sorry, I totally didn't notice the animations had
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ justify-content: center;
+ max-width: 500px;
+ text-align: center;
+ }
+
+ .heading {
+ animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4,.2,0,1) both;
+ font-size: 243%;
Moe 2016/08/22 20:40:52 Can you try using em or rem for font size? I find
+ letter-spacing: -.44px;
Moe 2016/08/22 20:40:52 is letter spacing really needed here?
+ line-height: 118%;
+ margin-bottom: 12px;
+ margin-top: 56px;
+ }
+
+ .subheading {
+ animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4,.2,0,1) both;
+ color: var(--google-grey-500);
+ font-size: 114%;
+ line-height: 150%;
+ }
+
+ .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: #fff;
Moe 2016/08/22 20:40:52 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;
+ 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;
+ }
+
+ .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: 48px;
+ text-align: left;
+ }
+
+ .signin-description {
+ margin: 0 auto;
+ max-width: 344px;
+ }
+
+ .signin-buttons {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ margin-top: 32px;
+ }
+
+ .action {
Moe 2016/08/22 20:40:52 what happens if the buttons get focus?
tmartino 2016/08/23 18:49:06 The focus/active/hover behavior is all inherited f
Moe 2016/08/23 21:15:31 just make sure with Alan/Chris that's the behavior
+ background: var(--google-blue-500);
+ color: white;
+ font-size: 86%;
+ font-weight: 500;
+ line-height: 250%;
+ min-width: 32px;
+ padding: 0 16px;
+ }
+
+ .link {
+ color: var(--google-blue-500);
+ display: inline-block;
+ font-size: 86%;
Moe 2016/08/22 20:40:52 these font sizes seem so random. I think it is ok
+ line-height: 250%;
+ margin: 8px;
+ min-width: 56px;
+ text-align: center;
+ }
+
+ .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>
+ <p class="subheading">$i18n{subheaderText}</p>
+ <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>
« no previous file with comments | « chrome/browser/browser_resources.grd ('k') | chrome/browser/resources/welcome/welcome.js » ('j') | chrome/browser/ui/webui/welcome_ui.cc » ('J')

Powered by Google App Engine
This is Rietveld 408576698