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

Issues Search
    My Issues | Starred     Open | Closed | All

Unified 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, 10 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/resources/welcome/win10/inline.css ('k') | chrome/browser/resources/welcome/win10/inline.js » ('j') | chrome/browser/resources/welcome/win10/inline.js » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« 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