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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2670723002: [MD History] Vulcanize as part of GN build. (Closed)
Patch Set: address nits 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 unified diff | Download patch
« no previous file with comments | « chrome/browser/resources/md_history/lazy_load.crisper.js ('k') | chrome/browser/resources/vulcanize.gni » ('j') | chrome/browser/resources/vulcanize.py » ('J')
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 a {
52 color: var(--link-color);
53 }
54
55 .card-title {
56 align-items: center;
57 border-bottom: 1px solid var(--card-border-color);
58 border-radius: 2px 2px 0 0;
59 display: flex;
60 font-size: 108%;
61 font-weight: 500;
62 height: 48px;
63 line-height: 48px;
64 overflow: hidden;
65 padding: 0 20px;
66 text-overflow: ellipsis;
67 white-space: nowrap;
68 }
69
70 .centered-message {
71 align-items: center;
72 color: var(--md-loading-message-color);
73 display: flex;
74 flex: 1;
75 font-size: 108%;
76 font-weight: 500;
77 height: 100%;
78 justify-content: center;
79 }
80
81 .website-icon {
82 -webkit-margin-end: 16px;
83 background-repeat: no-repeat;
84 background-size: 16px;
85 height: 16px;
86 width: 16px;
87 }
88
89 .website-title {
90 color: var(--primary-text-color);
91 overflow: hidden;
92 text-decoration: none;
93 text-overflow: ellipsis;
94 white-space: nowrap;
95 }
96
97 button.icon-button {
98 background: none;
99 border: none;
100 height: 36px;
101 outline: none;
102 width: 36px;
103 }
104
105 button.icon-button iron-icon {
106 height: 20px;
107 width: 20px;
108 }
109
110 button.more-vert-button {
111 height: 36px;
112 padding: 8px;
113 width: 36px;
114 }
115
116 button.more-vert-button div {
117 border: 2px solid var(--secondary-text-color);
118 border-radius: 2px;
119 margin: 1px 8px;
120 pointer-events: none;
121 transform: scale(0.8);
122 }
123
124 :host {
125 display: block;
126 overflow: auto;
127 position: relative;
128 }
129
130 #main-container {
131 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);
132 align-items: center;
133 display: flex;
134 flex-direction: column;
135 padding-top: var(--first-card-padding-top);
136 }
137
138 .domain-heading {
139 align-items: center;
140 display: flex;
141 height: var(--item-height);
142 padding: 0 20px;
143 }
144
145 .domain-count {
146 color: var(--secondary-text-color);
147 padding-left: 10px;
148 }
149
150 .domain-heading-text {
151 display: flex;
152 }
153
154 .group-container {
155 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
156 background: #fff;
157 border-radius: 2px;
158 margin-bottom: var(--card-padding-between);
159 max-width: var(--card-max-width);
160 min-width: var(--card-min-width);
161 width: 100%;
162 }
163
164 .card-title {
165 margin-bottom: var(--card-first-last-item-padding);
166 }
167
168 .domain-heading-text {
169 flex: 1 1 0;
170 }
171
172 .dropdown-indicator {
173 max-width: 16px;
174 }
175
176 history-item {
177 padding-left: 20px;
178 }
179
180 </style>
181 <div id="no-results" class="centered-message" hidden$="[[hasResults(groupedH istoryData_.length)]]">
182 [[noResultsMessage(searchedTerm, querying)]]
183 </div>
184 <div id="main-container" hidden$="[[!hasResults(groupedHistoryData_.length)] ]">
185 <template is="dom-repeat" items="[[groupedHistoryData_]]" as="group" initi al-count="1" index-as="groupIndex">
186 <div class="group-container">
187 <div class="card-title">
188 [[group.title]]
189 </div>
190
191 <template is="dom-repeat" items="[[group.domains]]" as="domain" initia l-count="10" index-as="domainIndex">
192 <div>
193 <div class="domain-heading" on-tap="toggleDomainExpanded_">
194 <div class="domain-heading-text">
195 <div class="website-icon" style="[[getWebsiteIconStyle_(domain )]]"></div>
196 <span>[[domain.domain]]</span>
197 <span class="domain-count">[[domain.visits.length]]</span>
198 </div>
199 <iron-icon icon="[[getDropdownIcon_(domain.expanded)]]" class="d ropdown-indicator"></iron-icon>
200 </div>
201 <iron-collapse opened="{{domain.expanded}}" id="collapse">
202 <template is="dom-if" if="[[domain.rendered]]">
203 <template is="dom-repeat" items="[[domain.visits]]" as="item" initial-count="5" index-as="itemIndex">
204 <history-item item="[[item]]" selected="{{item.selected}}" h as-time-gap="[[needsTimeGap_(
205 groupIndex, domainIndex, itemIndex)]]" search-term=" [[searchedTerm]]" number-of-items="[[historyData.length]]" path="[[pathForItem_(
206 groupIndex, domainIndex, itemIndex)]]" embedded="">
207 </history-item>
208 </template>
209 </template>
210 </iron-collapse>
211 </div>
212 </template>
213 </div>
214 </template>
215 </div>
216 </template>
217 </dom-module>
218 <dom-module id="paper-material-shared-styles" assetpath="chrome://resources/poly mer/v1_0/paper-material/" css-build="shadow">
219 <template>
220 <style scope="paper-material-shared-styles">:host {
221 display: block;
222 position: relative;
223 }
224
225 :host([elevation="1"]) {
226 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
227 }
228
229 :host([elevation="2"]) {
230 box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
231 }
232
233 :host([elevation="3"]) {
234 box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
235 }
236
237 :host([elevation="4"]) {
238 box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
239 }
240
241 :host([elevation="5"]) {
242 box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
243 }
244
245 </style>
246 </template>
247 </dom-module>
248 <dom-module id="paper-button" assetpath="chrome://resources/polymer/v1_0/paper-b utton/" css-build="shadow">
249 <template strip-whitespace="">
250 <style scope="paper-button">:host {
251 display: block;
252 position: relative;
253 }
254
255 :host([elevation="1"]) {
256 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
257 }
258
259 :host([elevation="2"]) {
260 box-shadow: var(--shadow-elevation-4dp_-_box-shadow);
261 }
262
263 :host([elevation="3"]) {
264 box-shadow: var(--shadow-elevation-6dp_-_box-shadow);
265 }
266
267 :host([elevation="4"]) {
268 box-shadow: var(--shadow-elevation-8dp_-_box-shadow);
269 }
270
271 :host([elevation="5"]) {
272 box-shadow: var(--shadow-elevation-16dp_-_box-shadow);
273 }
274
275 :host {
276 display: var(--layout-inline_-_display);
277 -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) ;
278 position: relative;
279 box-sizing: border-box;
280 min-width: 5.14em;
281 margin: 0 0.29em;
282 background: transparent;
283 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
284 -webkit-tap-highlight-color: transparent;
285 font: inherit;
286 text-transform: uppercase;
287 outline-width: 0;
288 border-radius: 3px;
289 -moz-user-select: none;
290 -ms-user-select: none;
291 -webkit-user-select: none;
292 user-select: none;
293 cursor: pointer;
294 z-index: 0;
295 padding: 0.7em 0.57em;
296
297 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
298 ;
299 }
300
301 :host([hidden]) {
302 display: none !important;
303 }
304
305 :host([raised].keyboard-focus) {
306 font-weight: bold;
307 ;
308 }
309
310 :host(:not([raised]).keyboard-focus) {
311 font-weight: bold;
312 background: var(--paper-button-flat-keyboard-focus_-_background);
313 }
314
315 :host([disabled]) {
316 background: #eaeaea;
317 color: #a8a8a8;
318 cursor: auto;
319 pointer-events: none;
320
321 ;
322 }
323
324 :host([animated]) {
325 transition: var(--shadow-transition_-_transition);
326 }
327
328 paper-ripple {
329 color: var(--paper-button-ink-color);
330 }
331
332 </style>
333
334 <content></content>
335 </template>
336
337 </dom-module>
338 <dom-module id="cr-action-menu" assetpath="chrome://resources/cr_elements/cr_act ion_menu/" css-build="shadow">
339 <template>
340 <style scope="cr-action-menu">:host {
341 background-color: white;
342 border: none;
343 box-shadow: 0 2px 6px var(--paper-grey-500);
344 margin: 0;
345 outline: none;
346 padding: 8px 0;
347 }
348
349 :host::backdrop {
350 background-color: transparent;
351 }
352
353 :host ::content .dropdown-item {
354 background: none;
355 border: none;
356 box-sizing: border-box;
357 color: var(--paper-grey-800);
358 font: inherit;
359 min-height: 32px;
360 padding: 0 24px;
361 text-align: start;
362 width: 100%;
363 }
364
365 :host ::content .dropdown-item:not([hidden]) {
366 align-items: center;
367 display: flex;
368 }
369
370 :host ::content .dropdown-item:not([disabled]) {
371 cursor: var(--cr-actionable_-_cursor);
372 }
373
374 :host ::content .dropdown-item:focus {
375 background-color: var(--paper-grey-300);
376 outline: none;
377 }
378
379 </style>
380 <content select=".dropdown-item,hr"></content>
381 </template>
382 </dom-module>
383
384 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow">
385 <template strip-whitespace="">
386 <style scope="paper-icon-button-light">:host {
387 vertical-align: middle;
388 color: inherit;
389 outline: none;
390 width: 24px;
391 height: 24px;
392 background: none;
393 margin: 0;
394 border: none;
395 padding: 0;
396
397 position: relative;
398 cursor: pointer;
399
400
401 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
402 -webkit-tap-highlight-color: transparent;
403 }
404
405 :host([disabled]) {
406 color: #9b9b9b;
407 pointer-events: none;
408 cursor: auto;
409 }
410
411 paper-ripple {
412 opacity: 0.6;
413 color: currentColor;
414 }
415
416 </style>
417 <content></content>
418 </template>
419 </dom-module>
420 <dom-module id="history-synced-device-card" assetpath="chrome://history/" css-bu ild="shadow">
421 <template>
422 <style scope="history-synced-device-card">[hidden] {
423 display: none !important;
424 }
425
426 a {
427 color: var(--link-color);
428 }
429
430 .card-title {
431 align-items: center;
432 border-bottom: 1px solid var(--card-border-color);
433 border-radius: 2px 2px 0 0;
434 display: flex;
435 font-size: 108%;
436 font-weight: 500;
437 height: 48px;
438 line-height: 48px;
439 overflow: hidden;
440 padding: 0 20px;
441 text-overflow: ellipsis;
442 white-space: nowrap;
443 }
444
445 .centered-message {
446 align-items: center;
447 color: var(--md-loading-message-color);
448 display: flex;
449 flex: 1;
450 font-size: 108%;
451 font-weight: 500;
452 height: 100%;
453 justify-content: center;
454 }
455
456 .website-icon {
457 -webkit-margin-end: 16px;
458 background-repeat: no-repeat;
459 background-size: 16px;
460 height: 16px;
461 width: 16px;
462 }
463
464 .website-title {
465 color: var(--primary-text-color);
466 overflow: hidden;
467 text-decoration: none;
468 text-overflow: ellipsis;
469 white-space: nowrap;
470 }
471
472 button.icon-button {
473 background: none;
474 border: none;
475 height: 36px;
476 outline: none;
477 width: 36px;
478 }
479
480 button.icon-button iron-icon {
481 height: 20px;
482 width: 20px;
483 }
484
485 button.more-vert-button {
486 height: 36px;
487 padding: 8px;
488 width: 36px;
489 }
490
491 button.more-vert-button div {
492 border: 2px solid var(--secondary-text-color);
493 border-radius: 2px;
494 margin: 1px 8px;
495 pointer-events: none;
496 transform: scale(0.8);
497 }
498
499 :host {
500 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);
501 -webkit-tap-highlight-color: transparent;
502 display: block;
503 padding-bottom: var(--card-padding-between);
504 }
505
506 #card-heading {
507 -webkit-padding-end: 0;
508 cursor: pointer;
509 justify-content: space-between;
510 }
511
512 #tab-item-list {
513 padding: 8px 0;
514 }
515
516 #last-update-time {
517 color: var(--secondary-text-color);
518 }
519
520 #title-left-content {
521 display: flex;
522 overflow: hidden;
523 }
524
525 #device-name {
526 overflow: hidden;
527 padding-right: 3px;
528 text-overflow: ellipsis;
529 }
530
531 #right-buttons {
532 -webkit-margin-end: 4px;
533 color: var(--secondary-text-color);
534 }
535
536 #menu-button {
537 -webkit-margin-end: 8px;
538 }
539
540 #collapse {
541 overflow: hidden;
542 }
543
544 #history-item-container {
545 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
546 background: #fff;
547 border-radius: 2px;
548 }
549
550 .item-container {
551 align-items: center;
552 display: flex;
553 margin: 0 20px;
554 min-height: var(--item-height);
555 }
556
557 .window-separator {
558 background-color: var(--card-border-color);
559 height: 1px;
560 margin: 5px auto;
561 width: 80%;
562 }
563
564 </style>
565 <div id="history-item-container">
566 <div class="card-title" id="card-heading" aria-expanded$="[[opened]]" aria -controls="collapse" on-click="toggleTabCard">
567 <div id="title-left-content">
568 <div id="device-name">
569 [[device]]
570 </div>
571 <span id="last-update-time">[[lastUpdateTime]]</span>
572 </div>
573 <div id="right-buttons">
574 <button is="paper-icon-button-light" id="menu-button" class="more-vert -button" on-click="onMenuButtonTap_" title="$i18n{moreActionsButton}">
575 <div></div>
576 <div></div>
577 <div></div>
578 </button>
579 <button is="paper-icon-button-light" class="icon-button" id="collapse- button" title$="[[getCollapseTitle_(opened)]]">
580 <iron-icon icon="[[getCollapseIcon_(opened)]]" id="dropdown-indicato r">
581 </iron-icon>
582 </button>
583 </div>
584 </div>
585
586 <iron-collapse opened="{{opened}}" id="collapse">
587 <div id="tab-item-list">
588 <template is="dom-repeat" items="[[tabs]]" as="tab" id="tab-list">
589 <div class="item-container">
590 <div class="website-icon"></div>
591 <a href="[[tab.url]]" class="website-title" title="[[tab.title]]" on-click="openTab_" on-contextmenu="onLinkRightClick_">
592 <history-searched-label title="[[tab.title]]" search-term="[[sea rchTerm]]"></history-searched-label>
593 </a>
594 </div>
595 <div class="window-separator" hidden$="[[!isWindowSeparatorIndex_(in dex, separatorIndexes)]]">
596 </div>
597 </template>
598 </div>
599 </iron-collapse>
600 </div>
601 </template>
602 </dom-module>
603 <dom-module id="history-synced-device-manager" assetpath="chrome://history/" css -build="shadow">
604 <template>
605 <style scope="history-synced-device-manager">[hidden] {
606 display: none !important;
607 }
608
609 a {
610 color: var(--link-color);
611 }
612
613 .card-title {
614 align-items: center;
615 border-bottom: 1px solid var(--card-border-color);
616 border-radius: 2px 2px 0 0;
617 display: flex;
618 font-size: 108%;
619 font-weight: 500;
620 height: 48px;
621 line-height: 48px;
622 overflow: hidden;
623 padding: 0 20px;
624 text-overflow: ellipsis;
625 white-space: nowrap;
626 }
627
628 .centered-message {
629 align-items: center;
630 color: var(--md-loading-message-color);
631 display: flex;
632 flex: 1;
633 font-size: 108%;
634 font-weight: 500;
635 height: 100%;
636 justify-content: center;
637 }
638
639 .website-icon {
640 -webkit-margin-end: 16px;
641 background-repeat: no-repeat;
642 background-size: 16px;
643 height: 16px;
644 width: 16px;
645 }
646
647 .website-title {
648 color: var(--primary-text-color);
649 overflow: hidden;
650 text-decoration: none;
651 text-overflow: ellipsis;
652 white-space: nowrap;
653 }
654
655 button.icon-button {
656 background: none;
657 border: none;
658 height: 36px;
659 outline: none;
660 width: 36px;
661 }
662
663 button.icon-button iron-icon {
664 height: 20px;
665 width: 20px;
666 }
667
668 button.more-vert-button {
669 height: 36px;
670 padding: 8px;
671 width: 36px;
672 }
673
674 button.more-vert-button div {
675 border: 2px solid var(--secondary-text-color);
676 border-radius: 2px;
677 margin: 1px 8px;
678 pointer-events: none;
679 transform: scale(0.8);
680 }
681
682 paper-spinner {
683 --paper-spinner-layer-1-color: var(--google-blue-500);
684 --paper-spinner-layer-2-color: var(--google-blue-500);
685 --paper-spinner-layer-3-color: var(--google-blue-500);
686 --paper-spinner-layer-4-color: var(--google-blue-500);
687 }
688
689 .action-button {
690 background: var(--google-blue-500);
691 color: white;
692 --paper-button-flat-keyboard-focus_-_background: rgb(58, 117, 215);;
693 }
694
695 .action-button[disabled] {
696 opacity: .25;
697 }
698
699 .cancel-button {
700 --paper-button-flat-keyboard-focus_-_background: rgba(0, 0, 0, .12);;
701 }
702
703 .action-button, .cancel-button {
704 font-weight: 500;
705 }
706
707 [actionable] {
708 cursor: var(--cr-actionable_-_cursor);
709 }
710
711 button[is='paper-icon-button-light'] {
712 -webkit-margin-end: var(--cr-paper-icon-button-margin_-_-webkit-margin-end); - webkit-margin-start: var(--cr-paper-icon-button-margin_-_-webkit-margin-start);
713 background-position: center;
714 background-repeat: no-repeat;
715 background-size: var(--cr-icon-size);
716 flex-shrink: 0;
717 height: var(--cr-icon-ripple-size);
718 width: var(--cr-icon-ripple-size);
719 }
720
721 button[is='paper-icon-button-light'].subpage-arrow {
722 background-image: url("chrome://resources/images/arrow_right.svg");
723 }
724
725 button[is='paper-icon-button-light'].icon-external {
726 background-image: url("chrome://resources/images/open_in_new.svg");
727 }
728
729 .subpage-arrow, .icon-external {
730 display: none;
731 }
732
733 paper-icon-button.subpage-arrow {
734 background-image: url("chrome://resources/images/arrow_right.svg");
735 }
736
737 [actionable] :-webkit-any(.subpage-arrow, .icon-external), [actionable]:-webkit- any(.subpage-arrow, .icon-external) {
738 display: block;
739 }
740
741 [scrollable] {
742 border-color: transparent;
743 border-style: solid;
744 border-width: 1px 0;
745 overflow-y: auto;
746 }
747
748 [scrollable].is-scrolled {
749 border-top-color: var(--google-grey-300);
750 }
751
752 [scrollable].can-scroll:not(.scrolled-to-bottom) {
753 border-bottom-color: var(--google-grey-300);
754 }
755
756 [scrollable] :focus {
757 ;
758 background-color: var(--cr-selectable-focus_-_background-color); outline : var(--cr-selectable-focus_-_outline);
759 }
760
761 [scrollable] iron-list > * {
762 cursor: var(--cr-actionable_-_cursor);
763 }
764
765 .scroll-container {
766 display: flex;
767 flex-direction: column;
768 min-height: 1px;
769 }
770
771 [selectable]:focus, [selectable] > :focus {
772 background-color: var(--cr-selectable-focus_-_background-color); outline: var( --cr-selectable-focus_-_outline);
773 }
774
775 [selectable] > * {
776 cursor: var(--cr-actionable_-_cursor);
777 }
778
779 :host {
780 display: block;
781 overflow: auto;
782 }
783
784 #illustration {
785 background: -webkit-image-set(
786 url("chrome://history/images/100/sign_in_promo.jpg") 1x,
787 url("chrome://history/images/200/sign_in_promo.jpg") 2x)
788 no-repeat center center;
789 height: 222px;
790 margin-top: 100px;
791 width: 574px;
792 }
793
794 #no-synced-tabs {
795 height: 100%;
796 }
797
798 #sign-in-guide {
799 align-items: center;
800 display: flex;
801 flex-direction: column;
802 justify-content: center;
803 overflow-x: hidden;
804 text-align: center;
805 }
806
807 #sign-in-promo {
808 font-size: 215%;
809 margin-top: 40px;
810 }
811
812 #sign-in-promo-desc {
813 color: var(--secondary-text-color);
814 font-size: 123%;
815 margin-top: 10px;
816 }
817
818 #sign-in-button {
819 margin: 24px 0;
820 padding-left: 12px;
821 padding-right: 12px;
822 }
823
824 #synced-device-list {
825 padding-top: var(--first-card-padding-top);
826 }
827
828 </style>
829 <div id="synced-device-list" hidden="[[!syncedDevices_.length]]">
830 <template is="dom-repeat" items="[[syncedDevices_]]" as="syncedDevice">
831 <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}}">
832 </history-synced-device-card>
833 </template>
834 </div>
835 <div id="no-synced-tabs" class="centered-message" hidden="[[!showNoSyncedMes sage(signInState, syncedDevices_.length,
836 guestSession_)]]">
837 [[noSyncedTabsMessage(fetchingSyncedTabs_, searchTerm)]]
838 </div>
839 <div id="sign-in-guide" hidden="[[!showSignInGuide(signInState, guestSession _)]]">
840 <div id="illustration"></div>
841 <div id="sign-in-promo">$i18n{signInPromo}</div>
842 <div id="sign-in-promo-desc">$i18n{signInPromoDesc}</div>
843 <paper-button id="sign-in-button" class="action-button" on-tap="onSignInTa p_">
844 $i18n{signInButton}
845 </paper-button>
846 </div>
847
848 <template is="cr-lazy-render" id="menu">
849 <dialog is="cr-action-menu">
850 <button id="menuOpenButton" class="dropdown-item" on-tap="onOpenAllTap_" >
851 $i18n{openAll}
852 </button>
853 <button id="menuDeleteButton" class="dropdown-item" on-tap="onDeleteSess ionTap_">
854 $i18n{deleteSession}
855 </button>
856 </dialog>
857 </template>
858 </template>
859 </dom-module>
860 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
861 <template>
862 <style scope="cr-dialog">:host {
863 border: 0;
864 border-radius: 2px;
865 bottom: 0;
866 color: inherit;
867 padding: 0;
868 top: 0;
869 width: 512px;
870 }
871
872 :host::backdrop {
873 background-color: rgba(0, 0, 0, 0.6);
874 bottom: 0;
875 left: 0;
876 position: fixed;
877 right: 0;
878 top: 0;
879 }
880
881 .title-container {
882 align-items: center;
883
884 border-bottom: 1px solid rgba(0, 0, 0, 0.14);
885 display: flex;
886 min-height: 52px;
887 }
888
889 :host ::content .title {
890 font-size: 123.07%;
891 }
892
893 #close {
894 --paper-icon-button_-_height: 40px; --paper-icon-button_-_width: 40px;;
895 -webkit-margin-end: 6px;
896
897 padding: 10px;
898 }
899
900 .body-container {
901 display: flex;
902 flex-direction: column;
903
904 overflow: auto;
905 }
906
907 :host ::content .body {
908 padding-bottom: 12px;
909 padding-top: 12px;
910 }
911
912 :host ::content .body, :host ::content .title {
913 -webkit-padding-end: 24px;
914 -webkit-padding-start: 24px;
915 flex: 1;
916 }
917
918 :host ::content .button-container {
919 -webkit-padding-end: 16px;
920 -webkit-padding-start: 16px;
921 display: flex;
922 justify-content: flex-end;
923 margin-bottom: 12px;
924 margin-top: 12px;
925 }
926
927 :host ::content .button-container .cancel-button {
928 -webkit-margin-end: 8px;
929 color: var(--paper-grey-600);
930 }
931
932 :host ::content .footer {
933 background-color: var(--paper-grey-200);
934 border-bottom-left-radius: inherit;
935 border-bottom-right-radius: inherit;
936 margin: 0;
937 padding: 12px 20px;
938 }
939
940 </style>
941 <div class="title-container">
942 <content select=".title"></content>
943 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$= "[[closeText]]">
944 </paper-icon-button>
945 </div>
946 <div class="body-container">
947 <content select=".body"></content>
948 </div>
949 <content select=".button-container"></content>
950 <content select=".footer"></content>
951 </template>
952 </dom-module>
953 <dom-module name="cr-drawer">
954 <template>
955 <style>
956 :host {
957 --drawer-width: 256px;
958 --transition-timing: 200ms ease;
959 background-color: #fff;
960 border: none;
961 bottom: 0;
962 left: calc(-1 * var(--drawer-width));
963 margin: 0;
964 overflow: hidden;
965 padding: 0;
966 position: absolute;
967 top: 0;
968 transition: left var(--transition-timing);
969 width: var(--drawer-width);
970 }
971
972 :host,
973 #container {
974 height: 100%;
975 }
976
977 :host(.opening) {
978 left: 0;
979 }
980
981 :host([align=right]) {
982 left: auto;
983 right: calc(-1 * var(--drawer-width));
984 transition: right var(--transition-timing);
985 }
986
987 :host(.opening[align=right]) {
988 right: 0;
989 }
990
991 :host::backdrop {
992 background: rgba(0, 0, 0, 0.5);
993 bottom: 0;
994 left: 0;
995 opacity: 0;
996 position: absolute;
997 right: 0;
998 top: 0;
999 transition: opacity var(--transition-timing);
1000 }
1001
1002 :host(.opening)::backdrop {
1003 opacity: 1;
1004 }
1005
1006 :host ::content .drawer-header {
1007 -webkit-padding-start: 24px;
1008 align-items: center;
1009 border-bottom: var(--cr-separator-line);
1010 display: flex;
1011 font-size: 123.08%; /* go to 16px from 13px */
1012 min-height: 56px;
1013 }
1014
1015 :host ::content .drawer-content {
1016 height: calc(100% - 56px);
1017 overflow: auto;
1018 }
1019 </style>
1020 <div id="container" on-tap="onContainerTap_">
1021 <content></content>
1022 </div>
1023 </template>
1024 </dom-module>
1025 <dom-module id="paper-tab" assetpath="chrome://resources/polymer/v1_0/paper-tabs /" css-build="shadow">
1026 <template>
1027 <style scope="paper-tab">:host {
1028 display: var(--layout-inline_-_display);
1029 -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);
1030 -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);
1031 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout -flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1032
1033 position: relative;
1034 padding: 0 12px;
1035 overflow: hidden;
1036 cursor: pointer;
1037 vertical-align: middle;
1038
1039 font-family: var(--paper-font-common-base_-_font-family); -webkit-font-s moothing: var(--paper-font-common-base_-_-webkit-font-smoothing);
1040 ;
1041 }
1042
1043 :host(:focus) {
1044 outline: none;
1045 }
1046
1047 :host([link]) {
1048 padding: 0;
1049 }
1050
1051 .tab-content {
1052 height: 100%;
1053 transform: translateZ(0);
1054 -webkit-transform: translateZ(0);
1055 transition: opacity 0.1s cubic-bezier(0.4, 0.0, 1, 1);
1056 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);
1057 -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) ;
1058 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout -flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1059 ;
1060 }
1061
1062 :host(:not(.iron-selected)) > .tab-content {
1063 opacity: 0.8;
1064
1065 ;
1066 }
1067
1068 :host(:focus) .tab-content {
1069 opacity: 1;
1070 font-weight: 700;
1071 }
1072
1073 paper-ripple {
1074 color: var(--paper-tab-ink,var(--paper-yellow-a100));
1075 }
1076
1077 .tab-content > ::content > a {
1078 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout-flex- auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1079
1080 height: 100%;
1081 }
1082
1083 </style>
1084
1085 <div class="tab-content">
1086 <content></content>
1087 </div>
1088 </template>
1089
1090 </dom-module>
1091 <iron-iconset-svg name="paper-tabs" size="24">
1092 <svg><defs>
1093 <g id="chevron-left"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></p ath></g>
1094 <g id="chevron-right"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z">< /path></g>
1095 </defs></svg>
1096 </iron-iconset-svg>
1097 <dom-module id="paper-tabs" assetpath="chrome://resources/polymer/v1_0/paper-tab s/" css-build="shadow">
1098 <template>
1099 <style scope="paper-tabs">:host {
1100 display: var(--layout_-_display);
1101 -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);
1102
1103 height: 48px;
1104 font-size: 14px;
1105 font-weight: 500;
1106 overflow: hidden;
1107 -moz-user-select: none;
1108 -ms-user-select: none;
1109 -webkit-user-select: none;
1110 user-select: none;
1111
1112
1113 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
1114 -webkit-tap-highlight-color: transparent;
1115
1116 font-size: var(--paper-tabs_-_font-size, 14px);
1117 }
1118
1119 :host-context([dir=rtl]) {
1120 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);
1121 }
1122
1123 #tabsContainer {
1124 position: relative;
1125 height: 100%;
1126 white-space: nowrap;
1127 overflow: hidden;
1128 -ms-flex: var(--layout-flex-auto_-_-ms-flex); -webkit-flex: var(--layout -flex-auto_-_-webkit-flex); flex: var(--layout-flex-auto_-_flex);
1129 }
1130
1131 #tabsContent {
1132 height: 100%;
1133 -moz-flex-basis: auto;
1134 -ms-flex-basis: auto;
1135 flex-basis: auto;
1136 }
1137
1138 #tabsContent.scrollable {
1139 position: absolute;
1140 white-space: nowrap;
1141 }
1142
1143 #tabsContent:not(.scrollable), #tabsContent.scrollable.fit-container {
1144 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);
1145 }
1146
1147 #tabsContent.scrollable.fit-container {
1148 min-width: 100%;
1149 }
1150
1151 #tabsContent.scrollable.fit-container > ::content > * {
1152 -ms-flex: 1 0 auto;
1153 -webkit-flex: 1 0 auto;
1154 flex: 1 0 auto;
1155 }
1156
1157 .hidden {
1158 display: none;
1159 }
1160
1161 .not-visible {
1162 opacity: 0;
1163 cursor: default;
1164 }
1165
1166 paper-icon-button {
1167 width: 48px;
1168 height: 48px;
1169 padding: 12px;
1170 margin: 0 4px;
1171 }
1172
1173 #selectionBar {
1174 position: absolute;
1175 height: 2px;
1176 bottom: 0;
1177 left: 0;
1178 right: 0;
1179 background-color: var(--paper-tabs-selection-bar-color,var(--paper-yello w-a100));
1180 -webkit-transform: scale(0);
1181 transform: scale(0);
1182 -webkit-transform-origin: left center;
1183 transform-origin: left center;
1184 transition: -webkit-transform;
1185 transition: transform;
1186
1187 ;
1188 }
1189
1190 #selectionBar.align-bottom {
1191 top: 0;
1192 bottom: auto;
1193 }
1194
1195 #selectionBar.expand {
1196 transition-duration: 0.15s;
1197 transition-timing-function: cubic-bezier(0.4, 0.0, 1, 1);
1198 }
1199
1200 #selectionBar.contract {
1201 transition-duration: 0.18s;
1202 transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
1203 }
1204
1205 #tabsContent > ::content > *:not(#selectionBar) {
1206 height: 100%;
1207 }
1208
1209 </style>
1210
1211 <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>
1212
1213 <div id="tabsContainer" on-track="_scroll" on-down="_down">
1214 <div id="tabsContent" class$="[[_computeTabsContentClass(scrollable, fitCo ntainer)]]">
1215 <div id="selectionBar" class$="[[_computeSelectionBarClass(noBar, alignB ottom)]]" on-transitionend="_onBarTransitionEnd"></div>
1216 <content select="*"></content>
1217 </div>
1218 </div>
1219
1220 <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>
1221
1222 </template>
1223
1224 </dom-module>
1225 </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/vulcanize.gni » ('j') | chrome/browser/resources/vulcanize.py » ('J')

Powered by Google App Engine
This is Rietveld 408576698