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

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

Issue 2684493002: MD History: Delete Grouped History (Closed)
Patch Set: Vulc 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
OLDNEW
1 <html><head><!-- 1 <html><head><!--
2 @license 2 @license
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
11 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 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 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 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 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 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 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=""> 17 --><meta charset="UTF-8"></head><body><div hidden="" by-vulcanize=""><dom-module id="paper-material-shared-styles" assetpath="chrome://resources/polymer/v1_0/pa per-material/" css-build="shadow">
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> 18 <template>
220 <style scope="paper-material-shared-styles">:host { 19 <style scope="paper-material-shared-styles">:host {
221 display: block; 20 display: block;
222 position: relative; 21 position: relative;
223 } 22 }
224 23
225 :host([elevation="1"]) { 24 :host([elevation="1"]) {
226 box-shadow: var(--shadow-elevation-2dp_-_box-shadow); 25 box-shadow: var(--shadow-elevation-2dp_-_box-shadow);
227 } 26 }
228 27
(...skipping 145 matching lines...) Expand 10 before | Expand all | Expand 10 after
374 :host ::content .dropdown-item:focus { 173 :host ::content .dropdown-item:focus {
375 background-color: var(--paper-grey-300); 174 background-color: var(--paper-grey-300);
376 outline: none; 175 outline: none;
377 } 176 }
378 177
379 </style> 178 </style>
380 <content select=".dropdown-item,hr"></content> 179 <content select=".dropdown-item,hr"></content>
381 </template> 180 </template>
382 </dom-module> 181 </dom-module>
383 182
183
184 <dom-module id="iron-collapse" assetpath="chrome://resources/polymer/v1_0/iron-c ollapse/" css-build="shadow">
185
186 <template>
187
188 <style scope="iron-collapse">:host {
189 display: block;
190 transition-duration: var(--iron-collapse-transition-duration, 300ms);
191 overflow: visible;
192 }
193
194 :host(.iron-collapse-closed) {
195 display: none;
196 }
197
198 :host(:not(.iron-collapse-opened)) {
199 overflow: hidden;
200 }
201
202 </style>
203
204 <content></content>
205
206 </template>
207
208 </dom-module>
209
384 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow"> 210 <dom-module id="paper-icon-button-light" assetpath="chrome://resources/polymer/v 1_0/paper-icon-button/" css-build="shadow">
385 <template strip-whitespace=""> 211 <template strip-whitespace="">
386 <style scope="paper-icon-button-light">:host { 212 <style scope="paper-icon-button-light">:host {
387 vertical-align: middle; 213 vertical-align: middle;
388 color: inherit; 214 color: inherit;
389 outline: none; 215 outline: none;
390 width: 24px; 216 width: 24px;
391 height: 24px; 217 height: 24px;
392 background: none; 218 background: none;
393 margin: 0; 219 margin: 0;
(...skipping 462 matching lines...) Expand 10 before | Expand all | Expand 10 after
856 </dialog> 682 </dialog>
857 </template> 683 </template>
858 </template> 684 </template>
859 </dom-module> 685 </dom-module>
860 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow"> 686 <dom-module id="cr-dialog" assetpath="chrome://resources/cr_elements/cr_dialog/" css-build="shadow">
861 <template> 687 <template>
862 <style scope="cr-dialog">:host { 688 <style scope="cr-dialog">:host {
863 border: 0; 689 border: 0;
864 border-radius: 2px; 690 border-radius: 2px;
865 bottom: 0; 691 bottom: 0;
692 box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.12),
693 0px 16px 16px rgba(0, 0, 0, 0.24);
866 color: inherit; 694 color: inherit;
867 padding: 0; 695 padding: 0;
868 top: 0; 696 top: 0;
869 width: 512px; 697 width: 512px;
870 } 698 }
871 699
872 :host::backdrop { 700 :host::backdrop {
873 background-color: rgba(0, 0, 0, 0.6); 701 background-color: rgba(0, 0, 0, 0.6);
874 bottom: 0; 702 bottom: 0;
875 left: 0; 703 left: 0;
876 position: fixed; 704 position: fixed;
877 right: 0; 705 right: 0;
878 top: 0; 706 top: 0;
879 } 707 }
880 708
881 .title-container { 709 .title-container {
882 align-items: center; 710 align-items: center;
883 711 border-bottom: 1px solid var(--divider-color);
884 border-bottom: 1px solid rgba(0, 0, 0, 0.14);
885 display: flex; 712 display: flex;
886 min-height: 52px; 713 min-height: 52px;
887 } 714 }
888 715
889 :host ::content .title { 716 :host ::content .title {
890 font-size: 123.07%; 717 font-size: 123.07%;
891 } 718 }
892 719
893 #close { 720 #close {
894 --paper-icon-button_-_height: 40px; --paper-icon-button_-_width: 40px;; 721 --paper-icon-button_-_height: 40px; --paper-icon-button_-_width: 40px;;
(...skipping 28 matching lines...) Expand all
923 margin-bottom: 12px; 750 margin-bottom: 12px;
924 margin-top: 12px; 751 margin-top: 12px;
925 } 752 }
926 753
927 :host ::content .button-container .cancel-button { 754 :host ::content .button-container .cancel-button {
928 -webkit-margin-end: 8px; 755 -webkit-margin-end: 8px;
929 color: var(--paper-grey-600); 756 color: var(--paper-grey-600);
930 } 757 }
931 758
932 :host ::content .footer { 759 :host ::content .footer {
933 background-color: var(--paper-grey-200); 760 border-bottom-left-radius: inherit;
934 border-bottom-left-radius: inherit;
935 border-bottom-right-radius: inherit; 761 border-bottom-right-radius: inherit;
936 margin: 0; 762 margin: 0;
937 padding: 12px 20px; 763 padding: 12px 20px;
938 } 764 }
939 765
766 :host ::content .border-top-divider {
767 border-top: 1px solid var(--divider-color);
768 }
769
940 </style> 770 </style>
941 <div class="title-container"> 771 <div class="title-container">
942 <content select=".title"></content> 772 <content select=".title"></content>
943 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$= "[[closeText]]"> 773 <paper-icon-button icon="cr:clear" on-tap="cancel" id="close" aria-label$= "[[closeText]]">
944 </paper-icon-button> 774 </paper-icon-button>
945 </div> 775 </div>
946 <div class="body-container"> 776 <div class="body-container">
947 <content select=".body"></content> 777 <content select=".body"></content>
948 </div> 778 </div>
949 <content select=".button-container"></content> 779 <content select=".button-container"></content>
(...skipping 65 matching lines...) Expand 10 before | Expand all | Expand 10 after
1015 :host ::content .drawer-content { 845 :host ::content .drawer-content {
1016 height: calc(100% - 56px); 846 height: calc(100% - 56px);
1017 overflow: auto; 847 overflow: auto;
1018 } 848 }
1019 </style> 849 </style>
1020 <div id="container" on-tap="onContainerTap_"> 850 <div id="container" on-tap="onContainerTap_">
1021 <content></content> 851 <content></content>
1022 </div> 852 </div>
1023 </template> 853 </template>
1024 </dom-module> 854 </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> 855 </div><script src="lazy_load.crisper.js"></script></body></html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698