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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/welcome/win10/inline.html

Issue 2733433002: [Win10 FRE] Make inlined-image more Polymer-friendly to fix <action-link> CSS inclusion. (Closed)
Patch Set: Fix indentations for CSS and comments. Created 3 years, 9 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
« no previous file with comments | « chrome/browser/resources/welcome/win10/inline.css ('k') | chrome/browser/resources/welcome/win10/inline.js » ('j') | chrome/browser/resources/welcome/win10/inline.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <meta charset="utf-8"> 4 <meta charset="utf-8">
5 <title>$i18n{headerText}</title> 5 <title>$i18n{headerText}</title>
6 6
7 <link rel="import" href="chrome://resources/cr_elements/icons.html"> 7 <link rel="import" href="chrome://resources/cr_elements/icons.html">
8 <link rel="import" href="chrome://resources/html/cr.html"> 8 <link rel="import" href="chrome://resources/html/cr.html">
9 <link rel="import" href="chrome://resources/html/action_link.html"> 9 <link rel="import" href="chrome://resources/html/action_link.html">
10 <link rel="import" href="chrome://resources/html/action_link_css.html"> 10 <link rel="import" href="chrome://resources/html/action_link_css.html">
11 <link rel="import" href="chrome://resources/html/polymer.html"> 11 <link rel="import" href="chrome://resources/html/polymer.html">
12 <link rel="import" href="chrome://resources/html/util.html"> 12 <link rel="import" href="chrome://resources/html/util.html">
13 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.h tml"> 13 <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.h tml">
14 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-bu tton.html"> 14 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-bu tton.html">
15 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.ht ml"> 15 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.ht ml">
16 16
17 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> 17 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
18 <link rel="stylesheet" href="/welcome.css"> 18 <link rel="stylesheet" href="/welcome.css">
19 19
20 <script src="/welcome.js"></script> 20 <dom-module id="welcome-win10-inline">
21 </head> 21 <template>
22 <body> 22 <style include="action-link">
23 <!-- TODO(tmartino): Create a dom-module and transfer contents of inline.css 23 :host {
24 inside.--> 24 align-items: flex-start;
25 <template is="dom-bind" id="inline-app"> 25 display: inline-flex;
26 <div class="content"> 26 flex-direction: column;
27 <div class="header-logo"></div> 27 }
28 <div class="heading">$i18n{headerText}</div> 28
29 <div class="sections"> 29 a {
30 <div class$="[[computeClasses(isCombined)]]"> 30 color: var(--google-blue-500);
31 <template is="dom-if" if="[[isCombined]]"> 31 text-decoration: none;
32 <a is="action-link" class="section-heading" on-tap="onToggle"> 32 }
33 <div class="section-heading-text"> 33
34 $i18n{defaultBrowserSubheaderText} 34 ol {
35 </div> 35 margin: 0;
36 <iron-icon class="section-heading-expand" icon="cr:expand-more"> 36 padding: 0;
37 </iron-icon> 37 }
38 </a> 38
39 </template> 39 strong {
40 <template is="dom-if" if="[[!isCombined]]"> 40 font-weight: 500;
41 <div class="section-heading"> 41 }
42 <div class="section-heading-text"> 42
43 $i18n{defaultBrowserSubheaderText} 43 .content {
44 </div> 44 margin: 0 auto;
huangs 2017/03/02 23:58:40 This "margin: 0 auto" was for centering, and no l
45 </div> 45 padding: 4em 1.5em 1.5em 1.5em;
46 </template> 46 }
47 <ol class="section-steps"> 47
48 <li> 48 .header-logo {
49 <a is="action-link" on-tap="onOpenSettings"> 49 content: url(chrome://welcome-win10/logo-large.png);
50 $i18n{openSettingsText} 50 height: 4em;
51 }
52
53 .heading {
54 font-size: 2.125em;
55 padding-bottom: 2rem;
56 padding-top: 1rem;
57 }
58
59 .sections {
60 margin-bottom: 2em;
61 }
62
63 .section.expandable {
64 border-top: 1px solid var(--google-grey-300);
65 }
66
67 .section.expandable:last-child {
68 border-bottom: 1px solid var(--google-grey-300);
69 }
70
71 .section.expandable .section-heading {
72 color: var(--google-blue-500);
73 cursor: pointer;
74 }
75
76 .section-heading {
77 align-items: center;
78 display: flex;
79 padding: 1.5em 0;
80 }
81
82 .section-heading-text {
83 flex: 1;
84 font-weight: 500;
85 }
86
87 .section.expandable .section-heading-text {
88 font-weight: normal;
89 }
90
91 .section.expandable.expanded .section-heading-text {
92 font-weight: 500;
93 }
94
95 .section-heading-expand {
96 height: 1.25em;
97 transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms;
98 width: 1.25em;
99 }
100
101 .section.expandable.expanded .section-heading-expand {
102 transform: rotate(180deg);
103 transition-delay: 150ms;
104 }
105
106 .section-steps {
107 overflow: hidden;
108 }
109
110 .section-steps li {
111 -webkit-margin-start: 1.25em;
112 -webkit-padding-start: 1em;
113 margin-bottom: 1em;
114 }
115
116 .section-steps li:last-child {
117 margin-bottom: 1em;
118 }
119
120 .section.expandable .section-steps {
121 max-height: 0;
122 opacity: 0;
123 transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
124 opacity 150ms;
125 visibility: hidden;
126 }
127
128 .section.expandable.expanded .section-steps {
129 max-height: 28.75em;
130 opacity: 1;
131 transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms,
132 opacity 150ms 250ms;
133 visibility: visible;
134 }
135
136 .button {
137 -webkit-font-smoothing: antialiased;
138 background: var(--google-blue-500);
139 border-radius: 2px;
140 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
141 color: #fff;
142 display: inline-block;
143 font-size: .8125em;
144 font-weight: 500;
145 line-height: 2.25rem;
146 padding: 0 1em;
147 text-align: center;
148 transition: 300ms cubic-bezier(.4, .2, 0, 1);
149 will-change: box-shadow;
150 }
151
152 .button:hover {
153 background: var(--paper-blue-a400);
154 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px
155 rgba(0, 0, 0, .24)
156 }
157
158 .logo-small {
159 content: url(chrome://welcome-win10/logo-small.png);
160 display: inline;
161 height: 1.25em;
162 vertical-align: top;
163 width: 1.25em;
164 }
165
166 .screenshot {
167 display: block;
168 height: 440px;
169 margin: 0 auto;
170 max-width: 100%;
171 position: relative;
172 top: -96px;
173 width: 720px;
174 }
175
176 .screenshot-image {
177 box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px
178 rgba(0, 0, 0, .24);
179 height: 48vw;
180 margin: 1em 0;
181 max-height: 300px;
182 max-width: 400px;
183 min-height: 150px;
184 min-width: 200px;
185 position: relative;
186 width: 64vw;
187 }
188
189 #default-image {
190 background: url(chrome://welcome-win10/default.webp);
191 background-repeat: no-repeat;
192 background-size: cover;
193 }
194
195 #taskbar-image {
196 background: url(chrome://welcome-win10/pin.webp);
197 background-repeat: no-repeat;
198 background-size: cover;
199 }
200
201 .screenshot-overlay {
202 box-sizing: border-box;
203 line-height: 0;
204 position: absolute;
205 }
206
207 #browser-overlay {
208 left: 41%;
209 top: 81%;
210 }
211
212 #edge-overlay {
213 left: 49%;
214 top: 88%;
215 }
216
217 #taskbar-overlay {
218 left: 31%;
219 top: 73%;
220 }
221
222 #taskbar-overlay div {
223 color: #ccc;
224 font-family: Tahoma, Verdana, Segoe, sans-serif;
225 font-weight: 500;
226 }
227
228 #icon-overlay {
229 background-image: url(chrome://welcome-win10/logo-small.png);
230 background-size: cover;
231 height: 8%;
232 left: 46%;
233 top: 90%;
234 width: 6%;
235 }
236
237 /* These values are precisely set so that the text over the screenshot
238 * starts scaling at the same time the image starts scaling too. */
239 @media (max-width: 626px) {
240 #browser-overlay {
241 font-size: 1.28vw;
242 }
243
244 #edge-overlay {
245 font-size: 1.44vw;
246 }
247
248 #taskbar-overlay {
249 font-size: 1.95vw;
250 }
251 }
252
253 /* Font-sizes used when the screenshot exactly reaches its max size. */
254 @media (min-width: 626px) {
255 #browser-overlay {
256 font-size: 8px;
257 }
258
259 #edge-overlay {
260 font-size: 9px;
261 }
262
263 #taskbar-overlay {
264 font-size: 12.2px;
265 }
266 }
267 </style>
268 <div class="content">
tommycli 2017/03/02 23:30:54 Are you sure you need this extra content div? Can
huangs 2017/03/02 23:57:17 Ah yes! Removed (also removed in CSS).
269 <div class="header-logo"></div>
270 <div class="heading">$i18n{headerText}</div>
271 <div class="sections">
272 <div class$="[[computeClasses(isCombined)]]">
273 <template is="dom-if" if="[[isCombined]]">
274 <a is="action-link" class="section-heading" on-tap="onToggle">
275 <div class="section-heading-text">
276 $i18n{defaultBrowserSubheaderText}
277 </div>
278 <iron-icon class="section-heading-expand" icon="cr:expand-more">
279 </iron-icon>
51 </a> 280 </a>
52 </li> 281 </template>
53 <li> 282 <template is="dom-if" if="[[!isCombined]]">
54 <div>$i18nRaw{clickEdgeText}</div> 283 <div class="section-heading">
55 <div class="screenshot-image" id="default-image"> 284 <div class="section-heading-text">
56 <div class="screenshot-overlay" id="browser-overlay"> 285 $i18n{defaultBrowserSubheaderText}
57 <div aria-hidden="true">$i18n{webBrowserLabel}</div>
58 </div>
59 <div class="screenshot-overlay" id="edge-overlay">
60 <div aria-hidden="true">$i18n{microsoftEdgeLabel}</div>
61 </div> 286 </div>
62 </div> 287 </div>
63 </li> 288 </template>
64 <li>$i18nRaw{clickSelectChrome}</li>
65 </ol>
66 </div>
67 <template is="dom-if" if="[[isCombined]]">
68 <div class="section expandable">
69 <a is="action-link" class="section-heading" on-tap="onToggle">
70 <div class="section-heading-text">$i18n{pinSubheaderText}</div>
71 <iron-icon class="section-heading-expand" icon="cr:expand-more">
72 </iron-icon>
73 </a>
74 <ol class="section-steps"> 289 <ol class="section-steps">
75 <li>$i18nRaw{rightClickText}</li>
76 <li> 290 <li>
77 <div>$i18nRaw{pinInstructionText}</div> 291 <a is="action-link" on-tap="onOpenSettings">
78 <div class="screenshot-image" id="taskbar-image"> 292 $i18n{openSettingsText}
79 <div class="screenshot-overlay" id="taskbar-overlay"> 293 </a>
80 <div aria-hidden="true">$i18n{pinToTaskbarLabel}</div> 294 </li>
295 <li>
296 <div>$i18nRaw{clickEdgeText}</div>
297 <div class="screenshot-image" id="default-image">
298 <div class="screenshot-overlay" id="browser-overlay">
299 <div aria-hidden="true">$i18n{webBrowserLabel}</div>
81 </div> 300 </div>
82 <div class="screenshot-overlay" id="icon-overlay"> 301 <div class="screenshot-overlay" id="edge-overlay">
302 <div aria-hidden="true">$i18n{microsoftEdgeLabel}</div>
83 </div> 303 </div>
84 </div> 304 </div>
85 </li> 305 </li>
306 <li>$i18nRaw{clickSelectChrome}</li>
86 </ol> 307 </ol>
87 </div> 308 </div>
88 </template> 309 <template is="dom-if" if="[[isCombined]]">
310 <div class="section expandable">
311 <a is="action-link" class="section-heading" on-tap="onToggle">
312 <div class="section-heading-text">$i18n{pinSubheaderText}</div>
313 <iron-icon class="section-heading-expand" icon="cr:expand-more">
314 </iron-icon>
315 </a>
316 <ol class="section-steps">
317 <li>$i18nRaw{rightClickText}</li>
318 <li>
319 <div>$i18nRaw{pinInstructionText}</div>
320 <div class="screenshot-image" id="taskbar-image">
321 <div class="screenshot-overlay" id="taskbar-overlay">
322 <div aria-hidden="true">$i18n{pinToTaskbarLabel}</div>
323 </div>
324 <div class="screenshot-overlay" id="icon-overlay">
325 </div>
326 </div>
327 </li>
328 </ol>
329 </div>
330 </template>
331 </div>
332 <paper-button class="button" on-tap="onContinue">
333 $i18n{continueText}
334 </paper-button>
89 </div> 335 </div>
90 <paper-button class="button" on-tap="onContinue"> 336 </template>
91 $i18n{continueText} 337 <script src="/welcome.js"></script>
92 </paper-button> 338 </dom-module>
93 </div> 339 </head>
94 </template> 340 <body>
341 <welcome-win10-inline></welcome-win10-inline>
95 </body> 342 </body>
96 </html> 343 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/welcome/win10/inline.css ('k') | chrome/browser/resources/welcome/win10/inline.js » ('j') | chrome/browser/resources/welcome/win10/inline.js » ('J')

Powered by Google App Engine
This is Rietveld 408576698