Index: chrome/browser/resources/welcome/win10/inline.html |
diff --git a/chrome/browser/resources/welcome/win10/inline.html b/chrome/browser/resources/welcome/win10/inline.html |
index dd31a55412a93ab89147521a1491b35f30ee5d1f..55a9ca973b452c989608e789cee1d482cc9a56c3 100644 |
--- a/chrome/browser/resources/welcome/win10/inline.html |
+++ b/chrome/browser/resources/welcome/win10/inline.html |
@@ -17,80 +17,327 @@ |
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> |
<link rel="stylesheet" href="/welcome.css"> |
- <script src="/welcome.js"></script> |
-</head> |
-<body> |
- <!-- TODO(tmartino): Create a dom-module and transfer contents of inline.css |
- inside.--> |
- <template is="dom-bind" id="inline-app"> |
- <div class="content"> |
- <div class="header-logo"></div> |
- <div class="heading">$i18n{headerText}</div> |
- <div class="sections"> |
- <div class$="[[computeClasses(isCombined)]]"> |
- <template is="dom-if" if="[[isCombined]]"> |
- <a is="action-link" class="section-heading" on-tap="onToggle"> |
- <div class="section-heading-text"> |
- $i18n{defaultBrowserSubheaderText} |
- </div> |
- <iron-icon class="section-heading-expand" icon="cr:expand-more"> |
- </iron-icon> |
- </a> |
- </template> |
- <template is="dom-if" if="[[!isCombined]]"> |
- <div class="section-heading"> |
- <div class="section-heading-text"> |
- $i18n{defaultBrowserSubheaderText} |
- </div> |
- </div> |
- </template> |
- <ol class="section-steps"> |
- <li> |
- <a is="action-link" on-tap="onOpenSettings"> |
- $i18n{openSettingsText} |
- </a> |
- </li> |
- <li> |
- <div>$i18nRaw{clickEdgeText}</div> |
- <div class="screenshot-image" id="default-image"> |
- <div class="screenshot-overlay" id="browser-overlay"> |
- <div aria-hidden="true">$i18n{webBrowserLabel}</div> |
+ <dom-module id="welcome-win10-inline"> |
+ <template> |
+ <style include="action-link"> |
+ :host { |
+ align-items: flex-start; |
+ display: inline-flex; |
+ flex-direction: column; |
+ } |
+ |
+ a { |
+ color: var(--google-blue-500); |
+ text-decoration: none; |
+ } |
+ |
+ ol { |
+ margin: 0; |
+ padding: 0; |
+ } |
+ |
+ strong { |
+ font-weight: 500; |
+ } |
+ |
+ .content { |
+ margin: 0 auto; |
huangs
2017/03/02 23:58:40
This "margin: 0 auto" was for centering, and no l
|
+ padding: 4em 1.5em 1.5em 1.5em; |
+ } |
+ |
+ .header-logo { |
+ content: url(chrome://welcome-win10/logo-large.png); |
+ height: 4em; |
+ } |
+ |
+ .heading { |
+ font-size: 2.125em; |
+ padding-bottom: 2rem; |
+ padding-top: 1rem; |
+ } |
+ |
+ .sections { |
+ margin-bottom: 2em; |
+ } |
+ |
+ .section.expandable { |
+ border-top: 1px solid var(--google-grey-300); |
+ } |
+ |
+ .section.expandable:last-child { |
+ border-bottom: 1px solid var(--google-grey-300); |
+ } |
+ |
+ .section.expandable .section-heading { |
+ color: var(--google-blue-500); |
+ cursor: pointer; |
+ } |
+ |
+ .section-heading { |
+ align-items: center; |
+ display: flex; |
+ padding: 1.5em 0; |
+ } |
+ |
+ .section-heading-text { |
+ flex: 1; |
+ font-weight: 500; |
+ } |
+ |
+ .section.expandable .section-heading-text { |
+ font-weight: normal; |
+ } |
+ |
+ .section.expandable.expanded .section-heading-text { |
+ font-weight: 500; |
+ } |
+ |
+ .section-heading-expand { |
+ height: 1.25em; |
+ transition: transform 150ms cubic-bezier(.4, .2, 0, 1) 50ms; |
+ width: 1.25em; |
+ } |
+ |
+ .section.expandable.expanded .section-heading-expand { |
+ transform: rotate(180deg); |
+ transition-delay: 150ms; |
+ } |
+ |
+ .section-steps { |
+ overflow: hidden; |
+ } |
+ |
+ .section-steps li { |
+ -webkit-margin-start: 1.25em; |
+ -webkit-padding-start: 1em; |
+ margin-bottom: 1em; |
+ } |
+ |
+ .section-steps li:last-child { |
+ margin-bottom: 1em; |
+ } |
+ |
+ .section.expandable .section-steps { |
+ max-height: 0; |
+ opacity: 0; |
+ transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, |
+ opacity 150ms; |
+ visibility: hidden; |
+ } |
+ |
+ .section.expandable.expanded .section-steps { |
+ max-height: 28.75em; |
+ opacity: 1; |
+ transition: max-height 300ms cubic-bezier(.4, .2, 0, 1) 50ms, |
+ opacity 150ms 250ms; |
+ visibility: visible; |
+ } |
+ |
+ .button { |
+ -webkit-font-smoothing: antialiased; |
+ background: var(--google-blue-500); |
+ border-radius: 2px; |
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); |
+ color: #fff; |
+ display: inline-block; |
+ font-size: .8125em; |
+ font-weight: 500; |
+ line-height: 2.25rem; |
+ padding: 0 1em; |
+ text-align: center; |
+ transition: 300ms cubic-bezier(.4, .2, 0, 1); |
+ will-change: box-shadow; |
+ } |
+ |
+ .button:hover { |
+ background: var(--paper-blue-a400); |
+ box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 2px |
+ rgba(0, 0, 0, .24) |
+ } |
+ |
+ .logo-small { |
+ content: url(chrome://welcome-win10/logo-small.png); |
+ display: inline; |
+ height: 1.25em; |
+ vertical-align: top; |
+ width: 1.25em; |
+ } |
+ |
+ .screenshot { |
+ display: block; |
+ height: 440px; |
+ margin: 0 auto; |
+ max-width: 100%; |
+ position: relative; |
+ top: -96px; |
+ width: 720px; |
+ } |
+ |
+ .screenshot-image { |
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, .12), 0 1px 2px |
+ rgba(0, 0, 0, .24); |
+ height: 48vw; |
+ margin: 1em 0; |
+ max-height: 300px; |
+ max-width: 400px; |
+ min-height: 150px; |
+ min-width: 200px; |
+ position: relative; |
+ width: 64vw; |
+ } |
+ |
+ #default-image { |
+ background: url(chrome://welcome-win10/default.webp); |
+ background-repeat: no-repeat; |
+ background-size: cover; |
+ } |
+ |
+ #taskbar-image { |
+ background: url(chrome://welcome-win10/pin.webp); |
+ background-repeat: no-repeat; |
+ background-size: cover; |
+ } |
+ |
+ .screenshot-overlay { |
+ box-sizing: border-box; |
+ line-height: 0; |
+ position: absolute; |
+ } |
+ |
+ #browser-overlay { |
+ left: 41%; |
+ top: 81%; |
+ } |
+ |
+ #edge-overlay { |
+ left: 49%; |
+ top: 88%; |
+ } |
+ |
+ #taskbar-overlay { |
+ left: 31%; |
+ top: 73%; |
+ } |
+ |
+ #taskbar-overlay div { |
+ color: #ccc; |
+ font-family: Tahoma, Verdana, Segoe, sans-serif; |
+ font-weight: 500; |
+ } |
+ |
+ #icon-overlay { |
+ background-image: url(chrome://welcome-win10/logo-small.png); |
+ background-size: cover; |
+ height: 8%; |
+ left: 46%; |
+ top: 90%; |
+ width: 6%; |
+ } |
+ |
+ /* These values are precisely set so that the text over the screenshot |
+ * starts scaling at the same time the image starts scaling too. */ |
+ @media (max-width: 626px) { |
+ #browser-overlay { |
+ font-size: 1.28vw; |
+ } |
+ |
+ #edge-overlay { |
+ font-size: 1.44vw; |
+ } |
+ |
+ #taskbar-overlay { |
+ font-size: 1.95vw; |
+ } |
+ } |
+ |
+ /* Font-sizes used when the screenshot exactly reaches its max size. */ |
+ @media (min-width: 626px) { |
+ #browser-overlay { |
+ font-size: 8px; |
+ } |
+ |
+ #edge-overlay { |
+ font-size: 9px; |
+ } |
+ |
+ #taskbar-overlay { |
+ font-size: 12.2px; |
+ } |
+ } |
+ </style> |
+ <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).
|
+ <div class="header-logo"></div> |
+ <div class="heading">$i18n{headerText}</div> |
+ <div class="sections"> |
+ <div class$="[[computeClasses(isCombined)]]"> |
+ <template is="dom-if" if="[[isCombined]]"> |
+ <a is="action-link" class="section-heading" on-tap="onToggle"> |
+ <div class="section-heading-text"> |
+ $i18n{defaultBrowserSubheaderText} |
</div> |
- <div class="screenshot-overlay" id="edge-overlay"> |
- <div aria-hidden="true">$i18n{microsoftEdgeLabel}</div> |
+ <iron-icon class="section-heading-expand" icon="cr:expand-more"> |
+ </iron-icon> |
+ </a> |
+ </template> |
+ <template is="dom-if" if="[[!isCombined]]"> |
+ <div class="section-heading"> |
+ <div class="section-heading-text"> |
+ $i18n{defaultBrowserSubheaderText} |
</div> |
</div> |
- </li> |
- <li>$i18nRaw{clickSelectChrome}</li> |
- </ol> |
- </div> |
- <template is="dom-if" if="[[isCombined]]"> |
- <div class="section expandable"> |
- <a is="action-link" class="section-heading" on-tap="onToggle"> |
- <div class="section-heading-text">$i18n{pinSubheaderText}</div> |
- <iron-icon class="section-heading-expand" icon="cr:expand-more"> |
- </iron-icon> |
- </a> |
+ </template> |
<ol class="section-steps"> |
- <li>$i18nRaw{rightClickText}</li> |
<li> |
- <div>$i18nRaw{pinInstructionText}</div> |
- <div class="screenshot-image" id="taskbar-image"> |
- <div class="screenshot-overlay" id="taskbar-overlay"> |
- <div aria-hidden="true">$i18n{pinToTaskbarLabel}</div> |
+ <a is="action-link" on-tap="onOpenSettings"> |
+ $i18n{openSettingsText} |
+ </a> |
+ </li> |
+ <li> |
+ <div>$i18nRaw{clickEdgeText}</div> |
+ <div class="screenshot-image" id="default-image"> |
+ <div class="screenshot-overlay" id="browser-overlay"> |
+ <div aria-hidden="true">$i18n{webBrowserLabel}</div> |
</div> |
- <div class="screenshot-overlay" id="icon-overlay"> |
+ <div class="screenshot-overlay" id="edge-overlay"> |
+ <div aria-hidden="true">$i18n{microsoftEdgeLabel}</div> |
</div> |
</div> |
</li> |
+ <li>$i18nRaw{clickSelectChrome}</li> |
</ol> |
</div> |
- </template> |
+ <template is="dom-if" if="[[isCombined]]"> |
+ <div class="section expandable"> |
+ <a is="action-link" class="section-heading" on-tap="onToggle"> |
+ <div class="section-heading-text">$i18n{pinSubheaderText}</div> |
+ <iron-icon class="section-heading-expand" icon="cr:expand-more"> |
+ </iron-icon> |
+ </a> |
+ <ol class="section-steps"> |
+ <li>$i18nRaw{rightClickText}</li> |
+ <li> |
+ <div>$i18nRaw{pinInstructionText}</div> |
+ <div class="screenshot-image" id="taskbar-image"> |
+ <div class="screenshot-overlay" id="taskbar-overlay"> |
+ <div aria-hidden="true">$i18n{pinToTaskbarLabel}</div> |
+ </div> |
+ <div class="screenshot-overlay" id="icon-overlay"> |
+ </div> |
+ </div> |
+ </li> |
+ </ol> |
+ </div> |
+ </template> |
+ </div> |
+ <paper-button class="button" on-tap="onContinue"> |
+ $i18n{continueText} |
+ </paper-button> |
</div> |
- <paper-button class="button" on-tap="onContinue"> |
- $i18n{continueText} |
- </paper-button> |
- </div> |
- </template> |
+ </template> |
+ <script src="/welcome.js"></script> |
+ </dom-module> |
+</head> |
+<body> |
+ <welcome-win10-inline></welcome-win10-inline> |
</body> |
</html> |