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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_history/lazy_load.vulcanized.html

Issue 2264983002: MD History: Lazily load element files which are not needed for first paint (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Remove flattenhtml, rebase Created 4 years, 2 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/md_history/lazy_load.crisper.js ('k') | chrome/browser/resources/md_history/list_container.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <html><head><!--
2 @license
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!--
10 @license
11 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
12 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
13 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
14 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
15 Code distributed by Google as part of the polymer project is also
16 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
17 --><meta charset="UTF-8"></head><body><div hidden="" by-vulcanize="">
18
19 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c ollapse/" css-build="shadow">
20
21 <template>
22
23 <style scope="iron-collapse">:host {
24 display: block;
25 transition-duration: var(--iron-collapse-transition-duration, 300ms);
26 overflow: visible;
27 }
28
29 :host(.iron-collapse-closed) {
30 display: none;
31 }
32
33 :host(:not(.iron-collapse-opened)) {
34 overflow: hidden;
35 }
36
37 </style>
38
39 <content></content>
40
41 </template>
42
43 </dom-module>
44
45 <dom-module id="history-grouped-list" assetpath="chrome://history/" css-build="s hadow">
46 <template>
47 <style scope="history-grouped-list">[hidden] {
48 display: none !important;
49 }
50
51 .card-title {
52 align-items: center;
53 border-bottom: 1px solid var(--card-border-color);
54 border-radius: 2px 2px 0 0;
55 color: var(--primary-text-color);
56 display: flex;
57 font-size: 14px;
58 font-weight: 500;
59 height: 48px;
60 line-height: 48px;
61 overflow: hidden;
62 padding: 0 20px;
63 text-overflow: ellipsis;
64 white-space: nowrap;
65 }
66
67 .centered-message {
68 align-items: center;
69 color: #b4b4b4;
70 display: flex;
71 flex: 1;
72 font-size: 14px;
73 font-weight: 500;
74 height: 100%;
75 justify-content: center;
76 }
77
78 .menu-item {
79 -webkit-user-select: none;
80 cursor: pointer;
81 font: inherit;
82 white-space: nowrap;
83 }
84
85 .website-icon {
86 -webkit-margin-end: 16px;
87 background-repeat: no-repeat;
88 background-size: 16px;
89 height: 16px;
90 width: 16px;
91 }
92
93 .website-title {
94 color: var(--primary-text-color);
95 overflow: hidden;
96 text-decoration: none;
97 text-overflow: ellipsis;
98 white-space: nowrap;
99 }
100
101 button.icon-button {
102 background: none;
103 border: none;
104 height: 36px;
105 outline: none;
106 width: 36px;
107 }
108
109 button.icon-button iron-icon {
110 color: var(--secondary-text-color);
111 height: 20px;
112 width: 20px;
113 }
114
115 button.more-vert-button {
116 height: 36px;
117 padding: 6px;
118 width: 36px;
119 }
120
121 button.more-vert-button div {
122 border: 2px solid var(--secondary-text-color);
123 border-radius: 2px;
124 margin: 1px 10px;
125 pointer-events: none;
126 transform: scale(0.8);
127 }
128
129 :host {
130 display: block;
131 overflow: auto;
132 position: relative;
133 }
134
135 #main-container {
136 margin: var(--card-sizing_-_margin); max-width: var(--card-sizing_-_max-width) ; min-width: var(--card-sizing_-_min-width); padding: var(--card-sizing_-_paddin g); width: var(--card-sizing_-_width);
137 align-items: center;
138 display: flex;
139 flex-direction: column;
140 padding-top: var(--first-card-padding-top);
141 }
142
143 .domain-heading {
144 align-items: center;
145 display: flex;
146 height: var(--item-height);
147 padding: 0 20px;
148 }
149
150 .domain-count {
151 color: rgb(151, 156, 160);
152 padding-left: 10px;
153 }
154
155 .domain-heading-text {
156 display: flex;
157 }
158
159 .group-container {
160 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
161 background: #fff;
162 border-radius: 2px;
163 margin-bottom: var(--card-padding-between);
164 max-width: var(--card-max-width);
165 min-width: var(--card-min-width);
166 width: 100%;
167 }
168
169 .card-title {
170 margin-bottom: var(--card-first-last-item-padding);
171 }
172
173 .domain-heading-text {
174 flex: 1 1 0;
175 }
176
177 .dropdown-indicator {
178 max-width: 16px;
179 }
180
181 history-item {
182 padding-left: 20px;
183 }
184
185 </style>
186 <div id="no-results" class="centered-message" hidden$="[[hasResults(groupedH istoryData_.length)]]">
187 [[noResultsMessage(searchedTerm, querying)]]
188 </div>
189 <div id="main-container" hidden$="[[!hasResults(groupedHistoryData_.length)] ]">
190 <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" initi al-count="1" index-as="groupIndex">
191 <div class="group-container">
192 <div class="card-title">
193 [[group.title]]
194 </div>
195
196 <template is="dom-repeat" items="[[group.domains]]" as="domain" initia l-count="10" index-as="domainIndex">
197 <div>
198 <div class="domain-heading" on-tap="toggleDomainExpanded_">
199 <div class="domain-heading-text">
200 <div class="website-icon" style="[[getWebsiteIconStyle_(domain )]]"></div>
201 <span>[[domain.domain]]</span>
202 <span class="domain-count">[[domain.visits.length]]</span>
203 </div>
204 <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" class="d ropdown-indicator"></iron-icon>
205 </div>
206 <iron-collapse opened="{{domain.expanded}}" id="collapse">
207 <template is="dom-if" if="[[domain.rendered]]">
208 <template is="dom-repeat" items="[[domain.visits]]" as="item" initial-count="5" index-as="itemIndex">
209 <history-item item="[[item]]" selected="{{item.selected}}" h as-time-gap="[[needsTimeGap_(
210 groupIndex, domainIndex, itemIndex)]]" search-term=" [[searchedTerm]]" number-of-items="[[historyData.length]]" path="[[pathForItem_(
211 groupIndex, domainIndex, itemIndex)]]" embedded="">
212 </history-item>
213 </template>
214 </template>
215 </iron-collapse>
216 </div>
217 </template>
218 </div>
219 </template>
220 </div>
221 </template>
222 </dom-module>
223 <dom-module id="paper-material-shared-styles" assetpath="chrome://resources/poly mer/v1_0/paper-material/" css-build="shadow">
224 <template>
225 <style scope="paper-material-shared-styles">:host {
226 display: block;
227 position: relative;
228 }
229
230 :host([elevation="1"]) {
231 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
232 }
233
234 :host([elevation="2"]) {
235 box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
236 }
237
238 :host([elevation="3"]) {
239 box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
240 }
241
242 :host([elevation="4"]) {
243 box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
244 }
245
246 :host([elevation="5"]) {
247 box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
248 }
249
250 </style>
251 </template>
252 </dom-module>
253
254
255 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b utton/" css-build="shadow">
256 <template strip-whitespace="">
257 <style scope="paper-button">:host {
258 display: block;
259 position: relative;
260 }
261
262 :host([elevation="1"]) {
263 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
264 }
265
266 :host([elevation="2"]) {
267 box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
268 }
269
270 :host([elevation="3"]) {
271 box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
272 }
273
274 :host([elevation="4"]) {
275 box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
276 }
277
278 :host([elevation="5"]) {
279 box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
280 }
281
282 :host {
283 display: var(--layout-inline_-_display);
284 -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-al ign-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(- -layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_ -_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit- justify-content); justify-content: var(--layout-center-center_-_justify-content) ;
285 position: relative;
286 box-sizing: border-box;
287 min-width: 5.14em;
288 margin: 0 0.29em;
289 background: transparent;
290 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
291 -webkit-tap-highlight-color: transparent;
292 font: inherit;
293 text-transform: uppercase;
294 outline-width: 0;
295 border-radius: 3px;
296 -moz-user-select: none;
297 -ms-user-select: none;
298 -webkit-user-select: none;
299 user-select: none;
300 cursor: pointer;
301 z-index: 0;
302 padding: 0.7em 0.57em;
303
304 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
305 ;
306 }
307
308 :host([hidden]) {
309 display: none !important;
310 }
311
312 :host([raised].keyboard-focus) {
313 font-weight: bold;
314 ;
315 }
316
317 :host(:not([raised]).keyboard-focus) {
318 font-weight: bold;
319 background: var(--paper-button-flat-keyboard-focus_-_background);
320 }
321
322 :host([disabled]) {
323 background: #eaeaea;
324 color: #a8a8a8;
325 cursor: auto;
326 pointer-events: none;
327
328 ;
329 }
330
331 :host([animated]) {
332 transition: var(--shadow-transition_-_transition);
333 }
334
335 paper-ripple {
336 color: var(--paper-button-ink-color);
337 }
338
339 </style>
340
341 <content></content>
342 </template>
343
344 </dom-module>
345 <dom-module id="paper-item-shared-styles" assetpath="chrome://resources/polymer/ v1_0/paper-item/" css-build="shadow">
346 <template>
347 <style scope="paper-item-shared-styles">:host, .paper-item {
348 display: block;
349 position: relative;
350 min-height: var(--paper-item-min-height, 48px);
351 padding: 0px 16px;
352 }
353
354 .paper-item {
355 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height);
356 border:none;
357 outline: none;
358 background: white;
359 width: 100%;
360 text-align: left;
361 }
362
363 :host([hidden]), .paper-item[hidden] {
364 display: none !important;
365 }
366
367 :host(.iron-selected), .paper-item.iron-selected {
368 font-weight: var(--paper-item-selected-weight, bold);
369
370 ;
371 }
372
373 :host([disabled]), .paper-item[disabled] {
374 color: var(--paper-item-disabled-color,var(--disabled-text-color));;
375
376 ;
377 }
378
379 :host(:focus), .paper-item:focus {
380 position: relative;
381 outline: 0;
382
383 ;
384 }
385
386 :host(:focus):before, .paper-item:focus:before {
387 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout -fit_-_left);
388
389 background: currentColor;
390 content: '';
391 opacity: var(--dark-divider-opacity);
392 pointer-events: none;
393
394 ;
395 }
396
397 </style>
398 </template>
399 </dom-module>
400
401
402 <dom-module id="paper-item" assetpath="chrome://resources/polymer/v1_0/paper-ite m/" css-build="shadow">
403 <template>
404
405 <style scope="paper-item">:host, .paper-item {
406 display: block;
407 position: relative;
408 min-height: var(--paper-item-min-height, 48px);
409 padding: 0px 16px;
410 }
411
412 .paper-item {
413 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoothing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper-font- subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight); line -height: var(--paper-font-subhead_-_line-height);
414 border:none;
415 outline: none;
416 background: white;
417 width: 100%;
418 text-align: left;
419 }
420
421 :host([hidden]), .paper-item[hidden] {
422 display: none !important;
423 }
424
425 :host(.iron-selected), .paper-item.iron-selected {
426 font-weight: var(--paper-item-selected-weight, bold);
427
428 ;
429 }
430
431 :host([disabled]), .paper-item[disabled] {
432 color: var(--paper-item-disabled-color,var(--disabled-text-color));;
433
434 ;
435 }
436
437 :host(:focus), .paper-item:focus {
438 position: relative;
439 outline: 0;
440
441 ;
442 }
443
444 :host(:focus):before, .paper-item:focus:before {
445 position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: v ar(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout -fit_-_left);
446
447 background: currentColor;
448 content: '';
449 opacity: var(--dark-divider-opacity);
450 pointer-events: none;
451
452 ;
453 }
454
455 :host {
456 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout- horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizonta l_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-dire ction);
457 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center _-_align-items);
458 font-family: var(--paper-font-subhead_-_font-family); -webkit-font-smoot hing: var(--paper-font-subhead_-_-webkit-font-smoothing); font-size: var(--paper -font-subhead_-_font-size); font-weight: var(--paper-font-subhead_-_font-weight) ; line-height: var(--paper-font-subhead_-_line-height);
459
460 ;
461 }
462
463 </style>
464
465 <content></content>
466 </template>
467
468 </dom-module>
469 <dom-module id="iron-overlay-backdrop" assetpath="chrome://resources/polymer/v1_ 0/iron-overlay-behavior/" css-build="shadow">
470
471 <template>
472 <style scope="iron-overlay-backdrop">:host {
473 position: fixed;
474 top: 0;
475 left: 0;
476 width: 100%;
477 height: 100%;
478 background-color: var(--iron-overlay-backdrop-background-color, #000);
479 opacity: 0;
480 transition: opacity 0.2s;
481 pointer-events: none;
482 ;
483 }
484
485 :host(.opened) {
486 opacity: var(--iron-overlay-backdrop-opacity, 0.6);
487 pointer-events: auto;
488 ;
489 }
490
491 </style>
492
493 <content></content>
494 </template>
495
496 </dom-module>
497
498 <script src="chrome://resources/polymer/v1_0/web-animations-js/web-animations-ne xt-lite.min.js"></script>
499
500
501 <dom-module id="iron-dropdown" assetpath="chrome://resources/polymer/v1_0/iron-d ropdown/" css-build="shadow">
502 <template>
503 <style scope="iron-dropdown">:host {
504 position: fixed;
505 }
506
507 #contentWrapper ::content > * {
508 overflow: auto;
509 }
510
511 #contentWrapper.animating ::content > * {
512 overflow: hidden;
513 }
514
515 </style>
516
517 <div id="contentWrapper">
518 <content id="content" select=".dropdown-content"></content>
519 </div>
520 </template>
521
522 </dom-module>
523 <dom-module id="cr-shared-menu" assetpath="chrome://resources/cr_elements/cr_sha red_menu/" css-build="shadow">
524 <template>
525 <style scope="cr-shared-menu">#menu {
526 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
527 background-color: white;
528 overflow: hidden;
529 padding: 8px 0;
530 position: relative;
531 }
532
533 </style>
534 <iron-dropdown id="dropdown" allow-outside-scroll="" restore-focus-on-close= "" vertical-align="auto" horizontal-align="right" opened="{{menuOpen}}" open-ani mation-config="[[openAnimationConfig]]" close-animation-config="[[closeAnimation Config]]">
535 <div id="menu" class="dropdown-content" role="menu">
536 <content></content>
537 </div>
538 </iron-dropdown>
539 </template>
540 </dom-module>
541
542 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow">
543 <template strip-whitespace="">
544 <style scope="paper-icon-button-light">:host {
545 vertical-align: middle;
546 color: inherit;
547 outline: none;
548 width: 24px;
549 height: 24px;
550 background: none;
551 margin: 0;
552 border: none;
553 padding: 0;
554
555 position: relative;
556 cursor: pointer;
557
558
559 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
560 -webkit-tap-highlight-color: transparent;
561 }
562
563 :host([disabled]) {
564 color: #9b9b9b;
565 pointer-events: none;
566 cursor: auto;
567 }
568
569 paper-ripple {
570 opacity: 0.6;
571 color: currentColor;
572 }
573
574 </style>
575 <content></content>
576 </template>
577 </dom-module>
578 <dom-module id="history-synced-device-card" assetpath="chrome://history/" css-bu ild="shadow">
579 <template>
580 <style scope="history-synced-device-card">[hidden] {
581 display: none !important;
582 }
583
584 .card-title {
585 align-items: center;
586 border-bottom: 1px solid var(--card-border-color);
587 border-radius: 2px 2px 0 0;
588 color: var(--primary-text-color);
589 display: flex;
590 font-size: 14px;
591 font-weight: 500;
592 height: 48px;
593 line-height: 48px;
594 overflow: hidden;
595 padding: 0 20px;
596 text-overflow: ellipsis;
597 white-space: nowrap;
598 }
599
600 .centered-message {
601 align-items: center;
602 color: #b4b4b4;
603 display: flex;
604 flex: 1;
605 font-size: 14px;
606 font-weight: 500;
607 height: 100%;
608 justify-content: center;
609 }
610
611 .menu-item {
612 -webkit-user-select: none;
613 cursor: pointer;
614 font: inherit;
615 white-space: nowrap;
616 }
617
618 .website-icon {
619 -webkit-margin-end: 16px;
620 background-repeat: no-repeat;
621 background-size: 16px;
622 height: 16px;
623 width: 16px;
624 }
625
626 .website-title {
627 color: var(--primary-text-color);
628 overflow: hidden;
629 text-decoration: none;
630 text-overflow: ellipsis;
631 white-space: nowrap;
632 }
633
634 button.icon-button {
635 background: none;
636 border: none;
637 height: 36px;
638 outline: none;
639 width: 36px;
640 }
641
642 button.icon-button iron-icon {
643 color: var(--secondary-text-color);
644 height: 20px;
645 width: 20px;
646 }
647
648 button.more-vert-button {
649 height: 36px;
650 padding: 6px;
651 width: 36px;
652 }
653
654 button.more-vert-button div {
655 border: 2px solid var(--secondary-text-color);
656 border-radius: 2px;
657 margin: 1px 10px;
658 pointer-events: none;
659 transform: scale(0.8);
660 }
661
662 :host {
663 margin: var(--card-sizing_-_margin); max-width: var(--card-sizing_-_max-width) ; min-width: var(--card-sizing_-_min-width); padding: var(--card-sizing_-_paddin g); width: var(--card-sizing_-_width);
664 display: block;
665 padding-bottom: var(--card-padding-between);
666 }
667
668 #card-heading {
669 -webkit-padding-end: 0;
670 cursor: pointer;
671 justify-content: space-between;
672 }
673
674 #tab-item-list {
675 padding: 8px 0;
676 }
677
678 #last-update-time {
679 color: var(--secondary-text-color);
680 }
681
682 #title-left-content {
683 display: flex;
684 overflow: hidden;
685 }
686
687 #device-name {
688 overflow: hidden;
689 padding-right: 3px;
690 text-overflow: ellipsis;
691 }
692
693 #right-buttons {
694 -webkit-margin-end: 4px;
695 }
696
697 #menu-button {
698 -webkit-margin-end: 8px;
699 }
700
701 #collapse {
702 overflow: hidden;
703 }
704
705 #history-item-container {
706 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
707 background: #fff;
708 border-radius: 2px;
709 }
710
711 #item-container {
712 align-items: center;
713 display: flex;
714 margin: 0 20px;
715 min-height: var(--item-height);
716 }
717
718 #window-separator {
719 background-color: var(--card-border-color);
720 height: 1px;
721 margin: 5px auto;
722 width: 80%;
723 }
724
725 </style>
726 <div id="history-item-container">
727 <div class="card-title" id="card-heading" aria-expanded$="[[opened]]" aria -controls="collapse" on-tap="toggleTabCard">
728 <div id="title-left-content">
729 <div id="device-name">
730 [[device]]
731 </div>
732 <span id="last-update-time">[[lastUpdateTime]]</span>
733 </div>
734 <div id="right-buttons">
735 <button is="paper-icon-button-light" id="menu-button" class="more-vert -button" on-tap="onMenuButtonTap_" title="$i18n{moreActionsButton}">
736 <div></div>
737 <div></div>
738 <div></div>
739 </button>
740 <button is="paper-icon-button-light" class="icon-button" title$="[[get CollapseTitle_(opened)]]">
741 <iron-icon icon="[[getCollapseIcon_(opened)]]" id="dropdown-indicato r">
742 </iron-icon>
743 </button>
744 </div>
745 </div>
746
747 <iron-collapse opened="{{opened}}" id="collapse">
748 <div id="tab-item-list">
749 <template is="dom-repeat" items="[[tabs]]" as="tab" id="tab-list">
750 <div id="item-container">
751 <div id="icon" class="website-icon"></div>
752 <a href="[[tab.url]]" class="website-title" title="[[tab.title]]" on-click="openTab_" on-contextmenu="onLinkRightClick_">
753 <history-searched-label title="[[tab.title]]" search-term="[[sea rchTerm]]"></history-searched-label>
754 </a>
755 </div>
756 <div id="window-separator" hidden$="[[!isWindowSeparatorIndex_(index , separatorIndexes)]]">
757 </div>
758 </template>
759 </div>
760 </iron-collapse>
761 </div>
762 </template>
763 </dom-module>
764 <dom-module id="history-synced-device-manager" assetpath="chrome://history/" css -build="shadow">
765 <template>
766 <style scope="history-synced-device-manager">[hidden] {
767 display: none !important;
768 }
769
770 .card-title {
771 align-items: center;
772 border-bottom: 1px solid var(--card-border-color);
773 border-radius: 2px 2px 0 0;
774 color: var(--primary-text-color);
775 display: flex;
776 font-size: 14px;
777 font-weight: 500;
778 height: 48px;
779 line-height: 48px;
780 overflow: hidden;
781 padding: 0 20px;
782 text-overflow: ellipsis;
783 white-space: nowrap;
784 }
785
786 .centered-message {
787 align-items: center;
788 color: #b4b4b4;
789 display: flex;
790 flex: 1;
791 font-size: 14px;
792 font-weight: 500;
793 height: 100%;
794 justify-content: center;
795 }
796
797 .menu-item {
798 -webkit-user-select: none;
799 cursor: pointer;
800 font: inherit;
801 white-space: nowrap;
802 }
803
804 .website-icon {
805 -webkit-margin-end: 16px;
806 background-repeat: no-repeat;
807 background-size: 16px;
808 height: 16px;
809 width: 16px;
810 }
811
812 .website-title {
813 color: var(--primary-text-color);
814 overflow: hidden;
815 text-decoration: none;
816 text-overflow: ellipsis;
817 white-space: nowrap;
818 }
819
820 button.icon-button {
821 background: none;
822 border: none;
823 height: 36px;
824 outline: none;
825 width: 36px;
826 }
827
828 button.icon-button iron-icon {
829 color: var(--secondary-text-color);
830 height: 20px;
831 width: 20px;
832 }
833
834 button.more-vert-button {
835 height: 36px;
836 padding: 6px;
837 width: 36px;
838 }
839
840 button.more-vert-button div {
841 border: 2px solid var(--secondary-text-color);
842 border-radius: 2px;
843 margin: 1px 10px;
844 pointer-events: none;
845 transform: scale(0.8);
846 }
847
848 paper-spinner {
849 --paper-spinner-layer-1-color: var(--google-blue-500);
850 --paper-spinner-layer-2-color: var(--google-blue-500);
851 --paper-spinner-layer-3-color: var(--google-blue-500);
852 --paper-spinner-layer-4-color: var(--google-blue-500);
853 }
854
855 .action-button {
856 background: var(--google-blue-500);
857 color: white;
858 --paper-button-flat-keyboard-focus_-_background: rgb(58, 117, 215);;
859 }
860
861 .action-button[disabled] {
862 opacity: .25;
863 }
864
865 .cancel-button {
866 --paper-button-flat-keyboard-focus_-_background: rgba(0, 0, 0, .12);;
867 }
868
869 .action-button, .cancel-button {
870 font-weight: 500;
871 }
872
873 [actionable] {
874 cursor: var(--cr-actionable_-_cursor);
875 }
876
877 [scrollable] {
878 border-color: transparent;
879 border-style: solid;
880 border-width: 1px 0;
881 overflow-y: auto;
882 }
883
884 [scrollable].is-scrolled {
885 border-top-color: var(--google-grey-300);
886 }
887
888 [scrollable].can-scroll:not(.scrolled-to-bottom) {
889 border-bottom-color: var(--google-grey-300);
890 }
891
892 [scrollable] :focus {
893 ;
894 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline);
895 }
896
897 [scrollable] iron-list > * {
898 cursor: var(--cr-actionable_-_cursor);
899 }
900
901 [selectable]:focus, [selectable] > :focus {
902 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline);
903 }
904
905 [selectable] > * {
906 cursor: var(--cr-actionable_-_cursor);
907 }
908
909 :host {
910 display: block;
911 overflow: auto;
912 }
913
914 #illustration {
915 background: -webkit-image-set(
916 url("chrome://history/images/100/sign_in_promo.png") 1x,
917 url("chrome://history/images/200/sign_in_promo.png") 2x)
918 no-repeat center center;
919 height: 222px;
920 margin-top: 100px;
921 width: 594px;
922 }
923
924 #no-synced-tabs {
925 height: 100%;
926 }
927
928 #sign-in-guide {
929 align-items: center;
930 display: flex;
931 flex-direction: column;
932 justify-content: center;
933 overflow-x: hidden;
934 text-align: center;
935 }
936
937 #sign-in-promo {
938 color: var(--primary-text-color);
939 font-size: 215%;
940 margin-top: 40px;
941 }
942
943 #sign-in-promo-desc {
944 color: #848484;
945 font-size: 123%;
946 margin-top: 10px;
947 }
948
949 #sign-in-button {
950 margin: 24px 0;
951 padding-left: 12px;
952 padding-right: 12px;
953 }
954
955 #synced-device-list {
956 padding-top: var(--first-card-padding-top);
957 }
958
959 </style>
960 <div id="synced-device-list" hidden="[[!syncedDevices_.length]]">
961 <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
962 <history-synced-device-card device="[[syncedDevice.device]]" last-update -time="[[syncedDevice.lastUpdateTime]]" tabs="[[syncedDevice.tabs]]" separator-i ndexes="[[syncedDevice.separatorIndexes]]" search-term="[[searchTerm]]" session- tag="[[syncedDevice.tag]]" opened="{{syncedDevice.opened}}">
963 </history-synced-device-card>
964 </template>
965 </div>
966 <div id="no-synced-tabs" class="centered-message" hidden="[[!showNoSyncedMes sage(signInState, syncedDevices_.length,
967 guestSession_)]]">
968 [[noSyncedTabsMessage(fetchingSyncedTabs_)]]
969 </div>
970 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState, guestSession _)]]">
971 <div id="illustration"></div>
972 <div id="sign-in-promo">$i18n{signInPromo}</div>
973 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
974 <paper-button id="sign-in-button" class="action-button" on-tap="onSignInTa p_">
975 $i18n{signInButton}
976 </paper-button>
977 </div>
978
979 <template is="cr-lazy-render" id="menu">
980 <cr-shared-menu>
981 <paper-item id="menuOpenButton" class="menu-item" on-tap="onOpenAllTap_" >
982 $i18n{openAll}
983 </paper-item>
984 <paper-item id="menuDeleteButton" class="menu-item" on-tap="onDeleteSess ionTap_">
985 $i18n{deleteSession}
986 </paper-item>
987 </cr-shared-menu>
988 </template>
989 </template>
990 </dom-module>
991 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
992 <template>
993 <style scope="cr-dialog">:host {
994 border: 0;
995 border-radius: 2px;
996 bottom: 0;
997 color: inherit;
998 padding: 0;
999 top: 0;
1000 }
1001
1002 :host::backdrop {
1003 background-color: rgba(0, 0, 0, 0.6);
1004 bottom: 0;
1005 left: 0;
1006 position: fixed;
1007 right: 0;
1008 top: 0;
1009 }
1010
1011 .title-container {
1012 align-items: center;
1013
1014 border-bottom: 1px solid rgba(0, 0, 0, 0.14);
1015 display: flex;
1016 min-height: 52px;
1017 }
1018
1019 :host ::content .title {
1020 font-size: 123.07%;
1021 }
1022
1023 #close {
1024 --paper-icon-button_-_height: 40px; --paper-icon-button_-_width: 40px;;
1025 -webkit-margin-end: 6px;
1026
1027 padding: 10px;
1028 }
1029
1030 .body-container {
1031 display: flex;
1032 flex-direction: column;
1033 max-width: 800px;
1034 min-width: 512px;
1035
1036 overflow: auto;
1037 }
1038
1039 :host ::content .body {
1040 padding-bottom: 12px;
1041 padding-top: 12px;
1042 }
1043
1044 :host ::content .body, :host ::content .title {
1045 -webkit-padding-end: 24px;
1046 -webkit-padding-start: 24px;
1047 flex: 1;
1048 }
1049
1050 :host ::content .button-container {
1051 -webkit-padding-end: 16px;
1052 -webkit-padding-start: 16px;
1053 display: flex;
1054 justify-content: flex-end;
1055 margin-bottom: 12px;
1056 margin-top: 12px;
1057 }
1058
1059 :host ::content .button-container .cancel-button {
1060 -webkit-margin-end: 8px;
1061 color: var(--paper-grey-600);
1062 }
1063
1064 :host ::content .footer {
1065 background-color: var(--paper-grey-200);
1066 border-bottom-left-radius: inherit;
1067 border-bottom-right-radius: inherit;
1068 margin: 0;
1069 padding: 12px 20px;
1070 }
1071
1072 </style>
1073 <div class="title-container">
1074 <content select=".title"></content>
1075 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close">
1076 </paper-icon-button>
1077 </div>
1078 <div class="body-container">
1079 <content select=".body"></content>
1080 </div>
1081 <content select=".button-container"></content>
1082 <content select=".footer"></content>
1083 </template>
1084 </dom-module>
1085
1086
1087 <dom-module id="app-drawer" assetpath="chrome://resources/polymer/v1_0/app-layou t/app-drawer/" css-build="shadow">
1088 <template>
1089 <style scope="app-drawer">:host {
1090 position: fixed;
1091 top: -120px;
1092 right: 0;
1093 bottom: -120px;
1094 left: 0;
1095
1096 visibility: hidden;
1097
1098 transition: visibility 0.2s ease;
1099 }
1100
1101 :host([opened]) {
1102 visibility: visible;
1103 }
1104
1105 :host([persistent]) {
1106 width: var(--app-drawer-width, 256px);
1107 }
1108
1109 :host([persistent][position=left]) {
1110 right: auto;
1111 }
1112
1113 :host([persistent][position=right]) {
1114 left: auto;
1115 }
1116
1117 #contentContainer {
1118 position: absolute;
1119 top: 0;
1120 bottom: 0;
1121 left: 0;
1122
1123 width: var(--app-drawer-width, 256px);
1124 padding: 120px 0;
1125
1126 transition: 0.2s ease;
1127 transition-property: -webkit-transform;
1128 transition-property: transform;
1129 -webkit-transform: translate3d(-100%, 0, 0);
1130 transform: translate3d(-100%, 0, 0);
1131
1132 background-color: #FFF;
1133
1134 ;
1135 }
1136
1137 :host([position=right]) > #contentContainer {
1138 right: 0;
1139 left: auto;
1140
1141 -webkit-transform: translate3d(100%, 0, 0);
1142 transform: translate3d(100%, 0, 0);
1143 }
1144
1145 :host([swipe-open]) > #contentContainer::after {
1146 position: fixed;
1147 top: 0;
1148 bottom: 0;
1149 left: 100%;
1150
1151 visibility: visible;
1152
1153 width: 20px;
1154
1155 content: '';
1156 }
1157
1158 :host([swipe-open][position=right]) > #contentContainer::after {
1159 right: 100%;
1160 left: auto;
1161 }
1162
1163 :host([opened]) > #contentContainer {
1164 -webkit-transform: translate3d(0, 0, 0);
1165 transform: translate3d(0, 0, 0);
1166 }
1167
1168 #scrim {
1169 position: absolute;
1170 top: 0;
1171 right: 0;
1172 bottom: 0;
1173 left: 0;
1174
1175 transition: opacity 0.2s ease;
1176 -webkit-transform: translateZ(0);
1177 transform: translateZ(0);
1178
1179 opacity: 0;
1180 background: var(--app-drawer-scrim-background, rgba(0, 0, 0, 0.5));
1181 }
1182
1183 :host([opened]) > #scrim {
1184 opacity: 1;
1185 }
1186
1187 :host([opened][persistent]) > #scrim {
1188 visibility: hidden;
1189
1190
1191 opacity: 0;
1192 }
1193
1194 </style>
1195
1196 <div id="scrim" on-tap="close"></div>
1197
1198 <div id="contentContainer">
1199 <content></content>
1200 </div>
1201 </template>
1202
1203 </dom-module>
1204 <dom-module id="paper-checkbox" assetpath="chrome://resources/polymer/v1_0/paper -checkbox/" css-build="shadow">
1205 <template strip-whitespace="">
1206 <style scope="paper-checkbox">:host {
1207 display: inline-block;
1208 white-space: nowrap;
1209 cursor: pointer;
1210 --calculated-paper-checkbox-size: var(--paper-checkbox-size, 18px);
1211
1212 --calculated-paper-checkbox-ink-size: var(--paper-checkbox-ink-size, -1p x);
1213 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
1214 line-height: 0;
1215 -webkit-tap-highlight-color: transparent;
1216 }
1217
1218 :host([hidden]) {
1219 display: none !important;
1220 }
1221
1222 :host(:focus) {
1223 outline: none;
1224 }
1225
1226 .hidden {
1227 display: none;
1228 }
1229
1230 #checkboxContainer {
1231 display: inline-block;
1232 position: relative;
1233 width: var(--calculated-paper-checkbox-size);
1234 height: var(--calculated-paper-checkbox-size);
1235 min-width: var(--calculated-paper-checkbox-size);
1236 margin: var(--paper-checkbox-margin, initial);
1237 vertical-align: var(--paper-checkbox-vertical-align, middle);
1238 background-color: var(--paper-checkbox-unchecked-background-color, trans parent);
1239 }
1240
1241 #ink {
1242 position: absolute;
1243
1244
1245 top: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calcu lated-paper-checkbox-size)) / 2);
1246 left: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calc ulated-paper-checkbox-size)) / 2);
1247 width: var(--calculated-paper-checkbox-ink-size);
1248 height: var(--calculated-paper-checkbox-ink-size);
1249 color: var(--paper-checkbox-unchecked-ink-color, var(--primary-text-colo r));
1250 opacity: 0.6;
1251 pointer-events: none;
1252 }
1253
1254 :host-context([dir="rtl"]) #ink {
1255 right: calc(0px - (var(--calculated-paper-checkbox-ink-size) - var(--calculate d-paper-checkbox-size)) / 2);
1256 left: auto;
1257 }
1258
1259 #ink[checked] {
1260 color: var(--paper-checkbox-checked-ink-color, var(--primary-color));
1261 }
1262
1263 #checkbox {
1264 position: relative;
1265 box-sizing: border-box;
1266 height: 100%;
1267 border: solid 2px;
1268 border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-c olor));
1269 border-radius: 2px;
1270 pointer-events: none;
1271 -webkit-transition: background-color 140ms, border-color 140ms;
1272 transition: background-color 140ms, border-color 140ms;
1273 }
1274
1275 #checkbox.checked #checkmark {
1276 -webkit-animation: checkmark-expand 140ms ease-out forwards;
1277 animation: checkmark-expand 140ms ease-out forwards;
1278 }
1279
1280 @-webkit-keyframes checkmark-expand {
1281 0% {
1282 -webkit-transform: scale(0, 0) rotate(45deg);
1283 }
1284
1285 100% {
1286 -webkit-transform: scale(1, 1) rotate(45deg);
1287 }
1288
1289 }
1290
1291 @keyframes checkmark-expand {
1292 0% {
1293 transform: scale(0, 0) rotate(45deg);
1294 }
1295
1296 100% {
1297 transform: scale(1, 1) rotate(45deg);
1298 }
1299
1300 }
1301
1302 #checkbox.checked {
1303 background-color: var(--paper-checkbox-checked-color, var(--primary-color));
1304 border-color: var(--paper-checkbox-checked-color, var(--primary-color));
1305 }
1306
1307 #checkmark {
1308 position: absolute;
1309 width: 36%;
1310 height: 70%;
1311 border-style: solid;
1312 border-top: none;
1313 border-left: none;
1314 border-right-width: calc(2/15 * var(--calculated-paper-checkbox-size));
1315 border-bottom-width: calc(2/15 * var(--calculated-paper-checkbox-size));
1316 border-color: var(--paper-checkbox-checkmark-color, white);
1317 -webkit-transform-origin: 97% 86%;
1318 transform-origin: 97% 86%;
1319 box-sizing: content-box;
1320 }
1321
1322 :host-context([dir="rtl"]) #checkmark {
1323 -webkit-transform-origin: 50% 14%;
1324 transform-origin: 50% 14%;
1325 }
1326
1327 #checkboxLabel {
1328 position: relative;
1329 display: inline-block;
1330 vertical-align: middle;
1331 padding-left: var(--paper-checkbox-label-spacing, 8px);
1332 white-space: normal;
1333 line-height: normal;
1334 color: var(--paper-checkbox-label-color, var(--primary-text-color));
1335 ;
1336 }
1337
1338 :host([checked]) #checkboxLabel {
1339 color: var(--paper-checkbox-label-checked-color, var(--paper-checkbox-label-co lor, var(--primary-text-color)));
1340 ;
1341 }
1342
1343 :host-context([dir="rtl"]) #checkboxLabel {
1344 padding-right: var(--paper-checkbox-label-spacing, 8px);
1345 padding-left: 0;
1346 }
1347
1348 #checkboxLabel[hidden] {
1349 display: none;
1350 }
1351
1352 :host([disabled]) #checkbox {
1353 opacity: 0.5;
1354 border-color: var(--paper-checkbox-unchecked-color, var(--primary-text-c olor));
1355 }
1356
1357 :host([disabled][checked]) #checkbox {
1358 background-color: var(--paper-checkbox-unchecked-color, var(--primary-text-col or));
1359 opacity: 0.5;
1360 }
1361
1362 :host([disabled]) #checkboxLabel {
1363 opacity: 0.65;
1364 }
1365
1366 #checkbox.invalid:not(.checked) {
1367 border-color: var(--paper-checkbox-error-color, var(--error-color));
1368 }
1369
1370 </style>
1371
1372 <div id="checkboxContainer">
1373 <div id="checkbox" class$="[[_computeCheckboxClass(checked, invalid)]]">
1374 <div id="checkmark" class$="[[_computeCheckmarkClass(checked)]]"></div>
1375 </div>
1376 </div>
1377
1378 <div id="checkboxLabel"><content></content></div>
1379 </template>
1380
1381 </dom-module>
1382 <dom-module id="paper-tab" assetpath="chrome://resources/polymer/v1_0/paper-tabs /" css-build="shadow">
1383 <template>
1384 <style scope="paper-tab">:host {
1385 display: var(--layout-inline_-_display);
1386 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center _-_align-items);
1387 -ms-flex-pack: var(--layout-center-justified_-_-ms-flex-pack); -webkit-j ustify-content: var(--layout-center-justified_-_-webkit-justify-content); justif y-content: var(--layout-center-justified_-_justify-content);
1388 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout -flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1389
1390 position: relative;
1391 padding: 0 12px;
1392 overflow: hidden;
1393 cursor: pointer;
1394 vertical-align: middle;
1395
1396 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
1397 ;
1398 }
1399
1400 :host(:focus) {
1401 outline: none;
1402 }
1403
1404 :host([link]) {
1405 padding: 0;
1406 }
1407
1408 .tab-content {
1409 height: 100%;
1410 transform: translateZ(0);
1411 -webkit-transform: translateZ(0);
1412 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
1413 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--l ayout-horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-hor izontal_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_fle x-direction);
1414 -ms-flex-align: var(--layout-center-center_-_-ms-flex-align); -webkit-al ign-items: var(--layout-center-center_-_-webkit-align-items); align-items: var(- -layout-center-center_-_align-items); -ms-flex-pack: var(--layout-center-center_ -_-ms-flex-pack); -webkit-justify-content: var(--layout-center-center_-_-webkit- justify-content); justify-content: var(--layout-center-center_-_justify-content) ;
1415 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout -flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1416 ;
1417 }
1418
1419 :host(:not(.iron-selected)) > .tab-content {
1420 opacity: 0.8;
1421
1422 ;
1423 }
1424
1425 :host(:focus) .tab-content {
1426 opacity: 1;
1427 font-weight: 700;
1428 }
1429
1430 paper-ripple {
1431 color: var(--paper-tab-ink,var(--paper-yellow-a100));;
1432 }
1433
1434 .tab-content > ::content > a {
1435 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex- auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1436
1437 height: 100%;
1438 }
1439
1440 </style>
1441
1442 <div class="tab-content">
1443 <content></content>
1444 </div>
1445 </template>
1446
1447 </dom-module>
1448 <iron-iconset-svg name="paper-tabs" size="24">
1449 <svg><defs>
1450 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p ath></g>
1451 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z">< /path></g>
1452 </defs></svg>
1453 </iron-iconset-svg>
1454
1455
1456 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab s/" css-build="shadow">
1457 <template>
1458 <style scope="paper-tabs">:host {
1459 display: var(--layout_-_display);
1460 -ms-flex-align: var(--layout-center_-_-ms-flex-align); -webkit-align-ite ms: var(--layout-center_-_-webkit-align-items); align-items: var(--layout-center _-_align-items);
1461
1462 height: 48px;
1463 font-size: 14px;
1464 font-weight: 500;
1465 overflow: hidden;
1466 -moz-user-select: none;
1467 -ms-user-select: none;
1468 -webkit-user-select: none;
1469 user-select: none;
1470
1471
1472 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1473 -webkit-tap-highlight-color: transparent;
1474
1475 ;
1476 }
1477
1478 :host-context([dir=rtl]) {
1479 display: var(--layout-horizontal-reverse_-_display); -ms-flex-direction: var(- -layout-horizontal-reverse_-_-ms-flex-direction); -webkit-flex-direction: var(-- layout-horizontal-reverse_-_-webkit-flex-direction); flex-direction: var(--layou t-horizontal-reverse_-_flex-direction);
1480 }
1481
1482 #tabsContainer {
1483 position: relative;
1484 height: 100%;
1485 white-space: nowrap;
1486 overflow: hidden;
1487 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout -flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1488 }
1489
1490 #tabsContent {
1491 height: 100%;
1492 -moz-flex-basis: auto;
1493 -ms-flex-basis: auto;
1494 flex-basis: auto;
1495 }
1496
1497 #tabsContent.scrollable {
1498 position: absolute;
1499 white-space: nowrap;
1500 }
1501
1502 #tabsContent:not(.scrollable), #tabsContent.scrollable.fit-container {
1503 display: var(--layout-horizontal_-_display); -ms-flex-direction: var(--layout- horizontal_-_-ms-flex-direction); -webkit-flex-direction: var(--layout-horizonta l_-_-webkit-flex-direction); flex-direction: var(--layout-horizontal_-_flex-dire ction);
1504 }
1505
1506 #tabsContent.scrollable.fit-container {
1507 min-width: 100%;
1508 }
1509
1510 #tabsContent.scrollable.fit-container > ::content > * {
1511 -ms-flex: 1 0 auto;
1512 -webkit-flex: 1 0 auto;
1513 flex: 1 0 auto;
1514 }
1515
1516 .hidden {
1517 display: none;
1518 }
1519
1520 .not-visible {
1521 opacity: 0;
1522 cursor: default;
1523 }
1524
1525 paper-icon-button {
1526 width: 48px;
1527 height: 48px;
1528 padding: 12px;
1529 margin: 0 4px;
1530 }
1531
1532 #selectionBar {
1533 position: absolute;
1534 height: 2px;
1535 bottom: 0;
1536 left: 0;
1537 right: 0;
1538 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello w-a100));;
1539 -webkit-transform: scale(0);
1540 transform: scale(0);
1541 -webkit-transform-origin: left center;
1542 transform-origin: left center;
1543 transition: -webkit-transform;
1544 transition: transform;
1545
1546 ;
1547 }
1548
1549 #selectionBar.align-bottom {
1550 top: 0;
1551 bottom: auto;
1552 }
1553
1554 #selectionBar.expand {
1555 transition-duration: 0.15s;
1556 transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
1557 }
1558
1559 #selectionBar.contract {
1560 transition-duration: 0.18s;
1561 transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
1562 }
1563
1564 #tabsContent > ::content > *:not(#selectionBar) {
1565 height: 100%;
1566 }
1567
1568 </style>
1569
1570 <paper-icon-button icon="paper-tabs:chevron-left" class$="[[_computeScrollBu ttonClass(_leftHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButtonU p" on-down="_onLeftScrollButtonDown" tabindex="-1"></paper-icon-button>
1571
1572 <div id="tabsContainer" on-track="_scroll" on-down="_down">
1573 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitCo ntainer)]]">
1574 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB ottom)]]" on-transitionend="_onBarTransitionEnd"></div>
1575 <content select="*"></content>
1576 </div>
1577 </div>
1578
1579 <paper-icon-button icon="paper-tabs:chevron-right" class$="[[_computeScrollB uttonClass(_rightHidden, scrollable, hideScrollButtons)]]" on-up="_onScrollButto nUp" on-down="_onRightScrollButtonDown" tabindex="-1"></paper-icon-button>
1580
1581 </template>
1582
1583 </dom-module>
1584 </div><script src="lazy_load.crisper.js"></script></body></html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/lazy_load.crisper.js ('k') | chrome/browser/resources/md_history/list_container.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698