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

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

Issue 2165903003: MD History: Show sidebar next to content on wide screens (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@history_fix_footer_link
Patch Set: dpapad@ review Created 4 years, 4 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 2016 The Chromium Authors. All rights reserved. 1 // Copyright 2016 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-app', 6 is: 'history-app',
7 7
8 properties: { 8 properties: {
9 showSidebarFooter: Boolean,
10
9 // The id of the currently selected page. 11 // The id of the currently selected page.
10 selectedPage_: {type: String, value: 'history', observer: 'unselectAll'}, 12 selectedPage_: {type: String, value: 'history', observer: 'unselectAll'},
11 13
12 // Whether domain-grouped history is enabled. 14 // Whether domain-grouped history is enabled.
13 grouped_: {type: Boolean, reflectToAttribute: true}, 15 grouped_: {type: Boolean, reflectToAttribute: true},
14 16
15 /** @type {!QueryState} */ 17 /** @type {!QueryState} */
16 queryState_: { 18 queryState_: {
17 type: Object, 19 type: Object,
18 value: function() { 20 value: function() {
(...skipping 24 matching lines...) Expand all
43 sessionList: null, 45 sessionList: null,
44 }; 46 };
45 } 47 }
46 }, 48 },
47 49
48 // Route data for the current page. 50 // Route data for the current page.
49 routeData_: Object, 51 routeData_: Object,
50 52
51 // The query params for the page. 53 // The query params for the page.
52 queryParams_: Object, 54 queryParams_: Object,
55
56 // True if the window is narrow enough for the page to have a drawer.
57 hasDrawer_: Boolean,
53 }, 58 },
54 59
55 observers: [ 60 observers: [
56 // routeData_.page <=> selectedPage 61 // routeData_.page <=> selectedPage
57 'routeDataChanged_(routeData_.page)', 62 'routeDataChanged_(routeData_.page)',
58 'selectedPageChanged_(selectedPage_)', 63 'selectedPageChanged_(selectedPage_)',
59 64
60 // queryParams_.q <=> queryState.searchTerm 65 // queryParams_.q <=> queryState.searchTerm
61 'searchTermChanged_(queryState_.searchTerm)', 66 'searchTermChanged_(queryState_.searchTerm)',
62 'searchQueryParamChanged_(queryParams_.q)', 67 'searchQueryParamChanged_(queryParams_.q)',
63 68
64 ], 69 ],
65 70
66 // TODO(calamity): Replace these event listeners with data bound properties. 71 // TODO(calamity): Replace these event listeners with data bound properties.
67 listeners: { 72 listeners: {
68 'cr-menu-tap': 'onMenuTap_', 73 'cr-menu-tap': 'onMenuTap_',
69 'history-checkbox-select': 'checkboxSelected', 74 'history-checkbox-select': 'checkboxSelected',
70 'unselect-all': 'unselectAll', 75 'unselect-all': 'unselectAll',
71 'delete-selected': 'deleteSelected', 76 'delete-selected': 'deleteSelected',
72 'search-domain': 'searchDomain_', 77 'search-domain': 'searchDomain_',
78 'history-close-drawer': 'closeDrawer_',
73 }, 79 },
74 80
75 /** @override */ 81 /** @override */
76 ready: function() { 82 ready: function() {
77 this.grouped_ = loadTimeData.getBoolean('groupByDomain'); 83 this.grouped_ = loadTimeData.getBoolean('groupByDomain');
78 84
79 cr.ui.decorate('command', cr.ui.Command); 85 cr.ui.decorate('command', cr.ui.Command);
80 document.addEventListener('canExecute', this.onCanExecute_.bind(this)); 86 document.addEventListener('canExecute', this.onCanExecute_.bind(this));
81 document.addEventListener('command', this.onCommand_.bind(this)); 87 document.addEventListener('command', this.onCommand_.bind(this));
82 88
83 // Redirect legacy search URLs to URLs compatible with material history. 89 // Redirect legacy search URLs to URLs compatible with material history.
84 if (window.location.hash) { 90 if (window.location.hash) {
85 window.location.href = window.location.href.split('#')[0] + '?' + 91 window.location.href = window.location.href.split('#')[0] + '?' +
86 window.location.hash.substr(1); 92 window.location.hash.substr(1);
87 } 93 }
88 }, 94 },
89 95
90 /** @private */ 96 /** @private */
91 onMenuTap_: function() { this.$['side-bar'].toggle(); }, 97 onMenuTap_: function() {
98 var drawer = this.$$('#drawer');
99 if (drawer)
100 drawer.toggle();
101 },
92 102
93 /** 103 /**
94 * Listens for history-item being selected or deselected (through checkbox) 104 * Listens for history-item being selected or deselected (through checkbox)
95 * and changes the view of the top toolbar. 105 * and changes the view of the top toolbar.
96 * @param {{detail: {countAddition: number}}} e 106 * @param {{detail: {countAddition: number}}} e
97 */ 107 */
98 checkboxSelected: function(e) { 108 checkboxSelected: function(e) {
99 var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar); 109 var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
100 toolbar.count += e.detail.countAddition; 110 toolbar.count += e.detail.countAddition;
101 }, 111 },
102 112
103 /** 113 /**
104 * @return {HistorySideBarElement} The side bar of this history app.
105 */
106 getSideBar: function() {
107 return this.$['side-bar'];
108 },
109
110 /**
111 * Listens for call to cancel selection and loops through all items to set 114 * Listens for call to cancel selection and loops through all items to set
112 * checkbox to be unselected. 115 * checkbox to be unselected.
113 * @private 116 * @private
114 */ 117 */
115 unselectAll: function() { 118 unselectAll: function() {
116 var listContainer = 119 var listContainer =
117 /** @type {HistoryListContainerElement} */ (this.$['history']); 120 /** @type {HistoryListContainerElement} */ (this.$['history']);
118 var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar); 121 var toolbar = /** @type {HistoryToolbarElement} */ (this.$.toolbar);
119 listContainer.unselectAllItems(toolbar.count); 122 listContainer.unselectAllItems(toolbar.count);
120 toolbar.count = 0; 123 toolbar.count = 0;
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
156 break; 159 break;
157 case 'slash-command': 160 case 'slash-command':
158 e.canExecute = !this.$.toolbar.searchBar.isSearchFocused(); 161 e.canExecute = !this.$.toolbar.searchBar.isSearchFocused();
159 break; 162 break;
160 case 'delete-command': 163 case 'delete-command':
161 e.canExecute = this.$.toolbar.count > 0; 164 e.canExecute = this.$.toolbar.count > 0;
162 break; 165 break;
163 } 166 }
164 }, 167 },
165 168
169 /** @private */
170 onDrawerFocus_: function() {
171 var sideBar = this.$$('#drawer-side-bar');
172 if (sideBar)
173 sideBar.focusCurrentPage();
174 },
175
166 /** 176 /**
167 * @param {string} searchTerm 177 * @param {string} searchTerm
168 * @private 178 * @private
169 */ 179 */
170 searchTermChanged_: function(searchTerm) { 180 searchTermChanged_: function(searchTerm) {
171 this.set('queryParams_.q', searchTerm || null); 181 this.set('queryParams_.q', searchTerm || null);
172 this.$['history'].queryHistory(false); 182 this.$['history'].queryHistory(false);
173 }, 183 },
174 184
175 /** 185 /**
(...skipping 28 matching lines...) Expand all
204 }, 214 },
205 215
206 /** 216 /**
207 * Update sign in state of synced device manager after user logs in or out. 217 * Update sign in state of synced device manager after user logs in or out.
208 * @param {boolean} isUserSignedIn 218 * @param {boolean} isUserSignedIn
209 */ 219 */
210 updateSignInState: function(isUserSignedIn) { 220 updateSignInState: function(isUserSignedIn) {
211 var syncedDeviceManagerElem = 221 var syncedDeviceManagerElem =
212 /** @type {HistorySyncedDeviceManagerElement} */this 222 /** @type {HistorySyncedDeviceManagerElement} */this
213 .$$('history-synced-device-manager'); 223 .$$('history-synced-device-manager');
214 syncedDeviceManagerElem.updateSignInState(isUserSignedIn); 224 if (syncedDeviceManagerElem)
225 syncedDeviceManagerElem.updateSignInState(isUserSignedIn);
215 }, 226 },
216 227
217 /** 228 /**
218 * @param {string} selectedPage 229 * @param {string} selectedPage
219 * @return {boolean} 230 * @return {boolean}
220 * @private 231 * @private
221 */ 232 */
222 syncedTabsSelected_: function(selectedPage) { 233 syncedTabsSelected_: function(selectedPage) {
223 return selectedPage == 'syncedTabs'; 234 return selectedPage == 'syncedTabs';
224 }, 235 },
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
257 * fallback selection will continue to be used after the corresponding item is 268 * fallback selection will continue to be used after the corresponding item is
258 * added as a child of iron-pages. 269 * added as a child of iron-pages.
259 * @param {string} selectedPage 270 * @param {string} selectedPage
260 * @param {Array} items 271 * @param {Array} items
261 * @return {string} 272 * @return {string}
262 * @private 273 * @private
263 */ 274 */
264 getSelectedPage_(selectedPage, items) { 275 getSelectedPage_(selectedPage, items) {
265 return selectedPage; 276 return selectedPage;
266 }, 277 },
278
279 /** @private */
280 closeDrawer_: function() {
281 var drawer = this.$$('#drawer');
282 if (drawer)
283 drawer.close();
284 },
267 }); 285 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698