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

Side by Side Diff: chrome/browser/resources/md_history/history_list.js

Issue 1974713002: [MD History] Unify query state in history-app. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@secondary_toolbar
Patch Set: address comments Created 4 years, 7 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 // Copyright 2015 The Chromium Authors. All rights reserved. 1 // Copyright 2015 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 Polymer({ 5 Polymer({
6 is: 'history-list', 6 is: 'history-list',
7 7
8 properties: { 8 properties: {
9 // An array of history entries in reverse chronological order. 9 // The search term for the current query. Set when the query returns.
10 historyData: { 10 searchedTerm: {
11 type: Array 11 type: String,
12 value: '',
12 }, 13 },
13 14
14 // The time of access of the last history item in historyData. 15 lastSearchedTerm_: String,
15 lastVisitedTime: {
16 type: Number,
17 value: 0
18 },
19 16
20 searchTerm: { 17 querying: Boolean,
21 type: String,
22 value: ''
23 },
24 18
25 // True if there is a pending request to the backend. 19 // An array of history entries in reverse chronological order.
26 loading_: { 20 historyData: Array,
27 type: Boolean,
28 value: true
29 },
30 21
31 resultLoadingDisabled_: { 22 resultLoadingDisabled_: {
32 type: Boolean, 23 type: Boolean,
33 value: false 24 value: false,
34 }, 25 },
35 }, 26 },
36 27
37 listeners: { 28 listeners: {
38 'infinite-list.scroll': 'closeMenu_', 29 'infinite-list.scroll': 'closeMenu_',
39 'tap': 'closeMenu_', 30 'tap': 'closeMenu_',
40 'toggle-menu': 'toggleMenu_', 31 'toggle-menu': 'toggleMenu_',
41 }, 32 },
42 33
43 /** 34 /**
44 * Closes the overflow menu. 35 * Closes the overflow menu.
45 * @private 36 * @private
46 */ 37 */
47 closeMenu_: function() { 38 closeMenu_: function() {
48 /** @type {CrSharedMenuElement} */(this.$.sharedMenu).closeMenu(); 39 /** @type {CrSharedMenuElement} */(this.$.sharedMenu).closeMenu();
49 }, 40 },
50 41
51 /** 42 /**
52 * Mark the page as currently loading new data from the back-end.
53 */
54 setLoading: function() {
55 this.loading_ = true;
56 },
57
58 /**
59 * Opens the overflow menu unless the menu is already open and the same button 43 * Opens the overflow menu unless the menu is already open and the same button
60 * is pressed. 44 * is pressed.
61 * @param {{detail: {item: !HistoryEntry, target: !HTMLElement}}} e 45 * @param {{detail: {item: !HistoryEntry, target: !HTMLElement}}} e
62 * @private 46 * @private
63 */ 47 */
64 toggleMenu_: function(e) { 48 toggleMenu_: function(e) {
65 var target = e.detail.target; 49 var target = e.detail.target;
66 /** @type {CrSharedMenuElement} */(this.$.sharedMenu).toggleMenu( 50 /** @type {CrSharedMenuElement} */(this.$.sharedMenu).toggleMenu(
67 target, e.detail.item); 51 target, e.detail.item);
68 }, 52 },
69 53
70 /** @private */ 54 /** @private */
71 onMoreFromSiteTap_: function() { 55 onMoreFromSiteTap_: function() {
72 var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu); 56 var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu);
73 this.fire('search-changed', {search: menu.itemData.domain}); 57 this.fire('search-domain', {domain: menu.itemData.domain});
74 menu.closeMenu(); 58 menu.closeMenu();
75 }, 59 },
76 60
77 /** @private */ 61 /** @private */
78 onRemoveFromHistoryTap_: function() { 62 onRemoveFromHistoryTap_: function() {
79 var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu); 63 var menu = /** @type {CrSharedMenuElement} */(this.$.sharedMenu);
80 md_history.BrowserService.getInstance() 64 md_history.BrowserService.getInstance()
81 .deleteItems([menu.itemData]) 65 .deleteItems([menu.itemData])
82 .then(function(items) { 66 .then(function(items) {
83 this.removeDeletedHistory_(items); 67 this.removeDeletedHistory_(items);
84 // This unselect-all is to reset the toolbar when deleting a selected 68 // This unselect-all is to reset the toolbar when deleting a selected
85 // item. TODO(tsergeant): Make this automatic based on observing list 69 // item. TODO(tsergeant): Make this automatic based on observing list
86 // modifications. 70 // modifications.
87 this.fire('unselect-all'); 71 this.fire('unselect-all');
88 }.bind(this)); 72 }.bind(this));
89 menu.closeMenu(); 73 menu.closeMenu();
90 }, 74 },
91 75
92 /** 76 /**
93 * Disables history result loading when there are no more history results. 77 * Disables history result loading when there are no more history results.
94 */ 78 */
95 disableResultLoading: function() { 79 disableResultLoading: function() {
96 this.resultLoadingDisabled_ = true; 80 this.resultLoadingDisabled_ = true;
97 }, 81 },
98 82
99 /** 83 /**
100 * Adds the newly updated history results into historyData. Adds new fields 84 * Adds the newly updated history results into historyData. Adds new fields
101 * for each result. 85 * for each result.
102 * @param {!Array<!HistoryEntry>} historyResults The new history results. 86 * @param {!Array<!HistoryEntry>} historyResults The new history results.
103 * @param {string} searchTerm Search query used to find these results.
104 */ 87 */
105 addNewResults: function(historyResults, searchTerm) { 88 addNewResults: function(historyResults) {
106 this.loading_ = false;
107 /** @type {IronScrollThresholdElement} */(this.$['scroll-threshold']) 89 /** @type {IronScrollThresholdElement} */(this.$['scroll-threshold'])
108 .clearTriggers(); 90 .clearTriggers();
109 91
110 if (this.searchTerm != searchTerm) { 92 if (this.lastSearchedTerm_ != this.searchedTerm) {
111 this.resultLoadingDisabled_ = false; 93 this.resultLoadingDisabled_ = false;
112 if (this.historyData) 94 if (this.historyData)
113 this.splice('historyData', 0, this.historyData.length); 95 this.splice('historyData', 0, this.historyData.length);
114 this.searchTerm = searchTerm; 96 this.lastSearchedTerm_ = this.searchedTerm;
115 } 97 }
116 98
117 if (historyResults.length == 0) 99 if (historyResults.length == 0)
118 return; 100 return;
119 101
120 // Creates a copy of historyResults to prevent accidentally modifying this 102 // Creates a copy of historyResults to prevent accidentally modifying this
121 // field. 103 // field.
122 var results = historyResults.slice(); 104 var results = historyResults.slice();
123 105
124 var currentDate = results[0].dateRelativeDay; 106 var currentDate = results[0].dateRelativeDay;
125 107
126 for (var i = 0; i < results.length; i++) { 108 for (var i = 0; i < results.length; i++) {
127 // Sets the default values for these fields to prevent undefined types. 109 // Sets the default values for these fields to prevent undefined types.
128 results[i].selected = false; 110 results[i].selected = false;
129 results[i].readableTimestamp = 111 results[i].readableTimestamp =
130 searchTerm == '' ? results[i].dateTimeOfDay : results[i].dateShort; 112 this.searchedTerm == '' ?
113 results[i].dateTimeOfDay : results[i].dateShort;
131 114
132 if (results[i].dateRelativeDay != currentDate) { 115 if (results[i].dateRelativeDay != currentDate) {
133 currentDate = results[i].dateRelativeDay; 116 currentDate = results[i].dateRelativeDay;
134 } 117 }
135 } 118 }
136 119
137 if (this.historyData) { 120 if (this.historyData) {
138 // If we have previously received data, push the new items onto the 121 // If we have previously received data, push the new items onto the
139 // existing array. 122 // existing array.
140 results.unshift('historyData'); 123 results.unshift('historyData');
141 this.push.apply(this, results); 124 this.push.apply(this, results);
142 } else { 125 } else {
143 // The first time we receive data, use set() to ensure the iron-list is 126 // The first time we receive data, use set() to ensure the iron-list is
144 // initialized correctly. 127 // initialized correctly.
145 this.set('historyData', results); 128 this.set('historyData', results);
146 } 129 }
147
148 this.lastVisitedTime = this.historyData[this.historyData.length - 1].time;
149 }, 130 },
150 131
151 /** 132 /**
152 * Cycle through each entry in historyData and set all items to be 133 * Cycle through each entry in historyData and set all items to be
153 * unselected. 134 * unselected.
154 * @param {number} overallItemCount The number of checkboxes selected. 135 * @param {number} overallItemCount The number of checkboxes selected.
155 */ 136 */
156 unselectAllItems: function(overallItemCount) { 137 unselectAllItems: function(overallItemCount) {
157 if (this.historyData === undefined) 138 if (this.historyData === undefined)
158 return; 139 return;
(...skipping 54 matching lines...) Expand 10 before | Expand all | Expand 10 after
213 this.removeDeletedHistory_(items); 194 this.removeDeletedHistory_(items);
214 this.fire('unselect-all'); 195 this.fire('unselect-all');
215 }.bind(this)); 196 }.bind(this));
216 }, 197 },
217 198
218 /** 199 /**
219 * Called when the page is scrolled to near the bottom of the list. 200 * Called when the page is scrolled to near the bottom of the list.
220 * @private 201 * @private
221 */ 202 */
222 loadMoreData_: function() { 203 loadMoreData_: function() {
223 if (this.resultLoadingDisabled_ || this.loading_) 204 if (this.resultLoadingDisabled_ || this.querying)
224 return; 205 return;
225 206
226 this.loading_ = true; 207 this.fire('load-more-history');
227 chrome.send('queryHistory',
228 [this.searchTerm, 0, 0, this.lastVisitedTime, RESULTS_PER_PAGE]);
229 }, 208 },
230 209
231 /** 210 /**
232 * Check whether the time difference between the given history item and the 211 * Check whether the time difference between the given history item and the
233 * next one is large enough for a spacer to be required. 212 * next one is large enough for a spacer to be required.
234 * @param {HistoryEntry} item 213 * @param {HistoryEntry} item
235 * @param {number} index The index of |item| in |historyData|. 214 * @param {number} index The index of |item| in |historyData|.
236 * @param {number} length The length of |historyData|. 215 * @param {number} length The length of |historyData|.
237 * @return {boolean} Whether or not time gap separator is required. 216 * @return {boolean} Whether or not time gap separator is required.
238 * @private 217 * @private
239 */ 218 */
240 needsTimeGap_: function(item, index, length) { 219 needsTimeGap_: function(item, index, length) {
241 if (index >= length - 1 || length == 0) 220 if (index >= length - 1 || length == 0)
242 return false; 221 return false;
243 222
244 var currentItem = this.historyData[index]; 223 var currentItem = this.historyData[index];
245 var nextItem = this.historyData[index + 1]; 224 var nextItem = this.historyData[index + 1];
246 225
247 if (this.searchTerm) 226 if (this.searchedTerm)
248 return currentItem.dateShort != nextItem.dateShort; 227 return currentItem.dateShort != nextItem.dateShort;
249 228
250 return currentItem.time - nextItem.time > BROWSING_GAP_TIME && 229 return currentItem.time - nextItem.time > BROWSING_GAP_TIME &&
251 currentItem.dateRelativeDay == nextItem.dateRelativeDay; 230 currentItem.dateRelativeDay == nextItem.dateRelativeDay;
252 }, 231 },
253 232
254 hasResults: function(historyDataLength) { 233 hasResults: function(historyDataLength) {
255 return historyDataLength > 0; 234 return historyDataLength > 0;
256 }, 235 },
257 236
258 noResultsMessage_: function(searchTerm, isLoading) { 237 noResultsMessage_: function(searchedTerm, isLoading) {
259 if (isLoading) 238 if (isLoading)
260 return ''; 239 return '';
261 var messageId = searchTerm !== '' ? 'noSearchResults' : 'noResults'; 240 var messageId = searchedTerm !== '' ? 'noSearchResults' : 'noResults';
262 return loadTimeData.getString(messageId); 241 return loadTimeData.getString(messageId);
263 }, 242 },
264 243
265 /** 244 /**
266 * True if the given item is the beginning of a new card. 245 * True if the given item is the beginning of a new card.
267 * @param {HistoryEntry} item 246 * @param {HistoryEntry} item
268 * @param {number} i Index of |item| within |historyData|. 247 * @param {number} i Index of |item| within |historyData|.
269 * @param {number} length 248 * @param {number} length
270 * @return {boolean} 249 * @return {boolean}
271 * @private 250 * @private
(...skipping 15 matching lines...) Expand all
287 * @private 266 * @private
288 */ 267 */
289 isCardEnd_: function(item, i, length) { 268 isCardEnd_: function(item, i, length) {
290 if (length == 0 || i > length - 1) 269 if (length == 0 || i > length - 1)
291 return false; 270 return false;
292 return i == length - 1 || 271 return i == length - 1 ||
293 this.historyData[i].dateRelativeDay != 272 this.historyData[i].dateRelativeDay !=
294 this.historyData[i + 1].dateRelativeDay; 273 this.historyData[i + 1].dateRelativeDay;
295 }, 274 },
296 }); 275 });
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/history_list.html ('k') | chrome/browser/resources/md_history/history_toolbar.js » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698