chrome/browser/resources/welcome/welcome.html - Issue 2252063002: Adding client code for new desktop First Run Experience.

Side by Side 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 unified diff | Download patch

OLD	NEW
(Empty)
	1 <html>
	michaelpg 2016/09/06 22:21:56 start with <!doctype html> start with <!doctype html> tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > start with <!doctype html> Done
	2 <head>

	3 <title>$i18n{headerText}</title>

	4

	5 <link rel="import" href="chrome://resources/html/polymer.html">

	6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-bu tton.html">

	7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.ht ml">

	8

	9 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

	10

	11 <script src="chrome://resources/js/load_time_data.js"></script>

	12 <script src="chrome://welcome/welcome.js"></script>

	13

	14 <style is="custom-style">
	michaelpg 2016/09/06 22:21:56 i don't think this needs to be an [is="custom-styl i don't think this needs to be an [is="custom-style"], since it's not Polymer-related. we generally prefer to put CSS in a separate CSS file when possible. tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > i don't think this needs to be an [is="custom-style"], since it's not Polymer-related. we generally prefer to put CSS in a separate CSS file when possible. Done
	15 body {

	16 align-items: center;

	17 box-sizing: border-box;
	michaelpg 2016/09/06 22:21:56 why do you need this? why do you need this? tmartino 2016/09/07 23:06:42 It was keeping the watermark in frame. However, se Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > why do you need this? It was keeping the watermark in frame. However, setting the min-height more precisely (see other comment thread) resolved the issue, so I've removed it.
	18 color: var(--paper-grey-900);

	19 display: flex;

	20 flex-direction: column;

	21 font-size: 100%;
	michaelpg 2016/09/06 22:21:56 Why override 81.25%? Presumably that was selected Why override 81.25%? Presumably that was selected for a reason. tmartino 2016/09/07 23:06:42 At normal settings, that 81.25% results in 13pt (a Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > Why override 81.25%? Presumably that was selected for a reason. At normal settings, that 81.25% results in 13pt (as 100% is 16pt). That makes sense as a default for settings environments, but not for a display page like this. The design I'm trying to recreate used font sizes like 12, 14, 16, and 34, and preserving those sizes resulted in hideous percentages relative to 13 (but mostly nice values relative to 16). Thus, when sizing things relative to that 81.25% value, I ended up with really arbitrary values throughout my CSS. This is the product of comments Moe made earlier in the thread, and offline discussions we had, about trying to end up with sensible values throughout the CSS.
	22 justify-content: center;

	23 min-height: 100vh;
	michaelpg 2016/09/06 22:21:56 why do you need this? why do you need this? tmartino 2016/09/07 23:06:42 The combination of a min-height here and a max-hei Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > why do you need this? The combination of a min-height here and a max-height in the .spacer class is what actually causes the content to appear at the proper height. Without this, the spacer does nothing and the content appears at the top of the frame. I've changed it to 96 (same as the .spacer min-height) so that the watermark no longer gets pushed out of frame without the border-box setting.
	24 overflow-y: hidden;
	michaelpg 2016/09/06 22:21:56 why make this unscrollable? if this is a side effe why make this unscrollable? if this is a side effect of min-height, try setting margin: 0 tmartino 2016/09/07 23:06:42 Without this, the slide up animation for the conte Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > why make this unscrollable? if this is a side effect of min-height, try setting margin: 0 Without this, the slide up animation for the content div causes a scrollbar to flash (as the content, though invisible, may initially be partially offscreen). The content fits within the viewport without the need for scrolling, even at quite small window heights.
	25 padding: 16px;

	26 }

	27

	28 @keyframes slideUpContent {

	29 from {

	30 transform: translateY(186px);

	31 }

	32 }

	33

	34 @keyframes fadeIn {

	35 from {

	36 opacity: 0;

	37 }

	38 }

	39

	40 @keyframes fadeOut {

	41 to {

	42 opacity: 0;

	43 }

	44 }

	45

	46

	47 @keyframes fadeInAndSlideUp {

	48 from {

	49 opacity: 0;

	50 transform: translateY(8px);

	51 }

	52 }

	53

	54 @keyframes spin {

	55 from {

	56 transform: rotate(-1440deg);

	57 }

	58 }

	59

	60 @keyframes fadeInAndSlideDownShadow {

	61 from {

	62 opacity: .6;

	63 top: 8px;

	64 }

	65 }

	66

	67 @keyframes scaleUp {

	68 0% {

	69 transform: scale(.8);

	70 }

	71 }

	72

	73 .spacer {

	74 flex: 1;

	75 max-height: 96px;

	76 }

	77

	78 .content {

	79 animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both;

	80 display: flex;

	81 flex: 1;

	82 flex-direction: column;

	83 justify-content: center;

	84 max-width: 500px;

	85 text-align: center;
	michaelpg 2016/09/06 22:21:56 since this is flex, use "align-items: center;" ins since this is flex, use "align-items: center;" instead that will center things without affecting text-align, so you won't need to reset text-align in text. it also means you won't need "margin: 0 auto" everywhere. tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > since this is flex, use "align-items: center;" instead > > that will center things without affecting text-align, so you won't need to reset text-align in text. > > it also means you won't need "margin: 0 auto" everywhere. Done
	86 }

	87

	88 .heading {

	89 animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;

	90 font-size: 2.125em;

	91 margin-bottom: .25em;

	92 margin-top: 1.5em;

	93 }

	94

	95 .subheading {

	96 animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;

	97 color: var(--google-grey-500);

	98 font-size: 1em;

	99 margin-top: .25em;

	100 }

	101

	102 .logo {

	103 animation: fadeIn 600ms both;

	104 height: 96px;

	105 margin: 0 auto;

	106 position: relative;

	107 width: 96px;

	108 }

	109

	110 .logo-icon {

	111 animation: scaleUp 600ms 500ms cubic-bezier(.5, -.5, 0, 2.25) both;

	112 background: white;

	113 border-radius: 50%;

	114 height: 96px;

	115 width: 96px;

	116 }

	117

	118 .logo-bw,

	119 .logo-color {

	120 animation: fadeIn 600ms 500ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) b oth;
	michaelpg 2016/09/06 22:21:56 wrap wrap tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > wrap Done
	121 content: -webkit-image-set(url(logo.png) 1x, url(logo2x.png) 2x);

	122 left: -5px;

	123 position: absolute;

	124 top: -5px;

	125 width: 106px;

	126 }

	127

	128 .logo-bw {

	129 -webkit-filter: grayscale(100%);

	130 }

	131

	132 .logo-color {

	133 animation: fadeIn 300ms 700ms both, spin 2.4s cubic-bezier(.4, .2, 0, 1) b oth;
	michaelpg 2016/09/06 22:21:56 wrap wrap tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > wrap Done
	134 }

	135

	136 .logo-shadow {

	137 -webkit-filter: blur(16px);

	138 animation: fadeInAndSlideDownShadow 300ms 600ms both;

	139 background: rgba(0, 0, 0, .2);

	140 border-radius: 50%;

	141 height: 96px;

	142 position: absolute;

	143 top: 16px;

	144 width: 96px;

	145 z-index: -1;

	146 }

	147

	148 .signin {

	149 animation: fadeInAndSlideUp 600ms 2s cubic-bezier(.4, .2, 0, 1) both;

	150 margin-top: 3em;

	151 text-align: left;

	152 }

	153

	154 .signin-description {

	155 font-size: .875em;

	156 line-height: 1.725em;

	157 margin: 0 auto;

	158 max-width: 344px;

	159 }

	160

	161 .signin-buttons {

	162 align-items: center;

	163 display: flex;

	164 flex-direction: column;

	165 margin-top: 2em;

	166 }

	167

	168 .action {

	169 background: var(--google-blue-500);

	170 color: white;

	171 font-size: .75em;

	172 font-weight: 500;

	173 line-height: 2.5em;

	174 padding: 0 1.25em;

	175 }

	176

	177 .action:focus {

	178 background: var(--google-blue-700);

	179 }

	180

	181 .link {

	182 color: var(--google-blue-500);

	183 display: inline-block;

	184 font-size: .75em;

	185 margin: 1.5em;

	186 text-align: center;

	187 text-decoration: none;

	188 }

	189

	190 .link:hover {

	191 text-decoration: underline;

	192 }

	193

	194 .watermark {

	195 -webkit-mask-image: url(chrome://welcome/watermark.svg);

	196 -webkit-mask-repeat: no-repeat;

	197 -webkit-mask-size: 100%;

	198 background: var(--paper-grey-400);

	199 height: 24px;

	200 margin-top: 48px;

	201 width: 74px;

	202 }

	203 </style>

	204 </head>

	205 <body>

	206 <div class="spacer"></div>

	207 <div class="content">

	208 <div class="logo">

	209 <div class="logo-icon">

	210 <img src="chrome://welcome/logo.png" class="logo-bw">

	211 <img src="chrome://welcome/logo.png" class="logo-color">

	212 </div>

	213 <div class="logo-shadow"></div>

	214 </div>

	215 <p class="heading">$i18n{headerText}</p>
	michaelpg 2016/09/06 22:21:56 normally we just use <div> instead of using <p> an normally we just use <div> instead of using <p> and then zeroing its margins tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > normally we just use <div> instead of using <p> and then zeroing its margins Done
	216 <p class="subheading">$i18n{subheaderText}</p>
	michaelpg 2016/09/06 22:21:56 <if expr="_google_chrome"> or something like that <if expr="_google_chrome"> or something like that rather than having an empty <p> adding space in Chromium builds tmartino 2016/09/07 23:06:42 Done Show quoted text On 2016/09/06 at 22:21:56, michaelpg wrote: > <if expr="_google_chrome"> or something like that > > rather than having an empty <p> adding space in Chromium builds Done
	217 <div class="signin">

	218 <p class="signin-description">$i18n{descriptionText}</p>

	219 <div class="signin-buttons">

	220 <paper-button class="action">$i18n{acceptText}</paper-button>

	221 <a href="#" class="link">$i18n{declineText}</a>

	222 </div>

	223 </div>

	224 </div>

	225 <div class="watermark">

	226 </body>

	227 </html>

OLD	NEW

« 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')