OLD | NEW |
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 /** | |
6 * The different pages that can be shown at a time. | |
7 * Note: This must remain in sync with the order in manager.html! | |
8 * @enum {string} | |
9 */ | |
10 var Page = { | |
11 ITEM_LIST: '0', | |
12 DETAIL_VIEW: '1', | |
13 KEYBOARD_SHORTCUTS: '2', | |
14 ERROR_PAGE: '3', | |
15 }; | |
16 | |
17 cr.define('extensions', function() { | 5 cr.define('extensions', function() { |
18 'use strict'; | 6 'use strict'; |
19 | 7 |
20 /** | 8 /** |
21 * Compares two extensions to determine which should come first in the list. | 9 * Compares two extensions to determine which should come first in the list. |
22 * @param {chrome.developerPrivate.ExtensionInfo} a | 10 * @param {chrome.developerPrivate.ExtensionInfo} a |
23 * @param {chrome.developerPrivate.ExtensionInfo} b | 11 * @param {chrome.developerPrivate.ExtensionInfo} b |
24 * @return {number} | 12 * @return {number} |
25 */ | 13 */ |
26 var compareExtensions = function(a, b) { | 14 var compareExtensions = function(a, b) { |
(...skipping 49 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
76 */ | 64 */ |
77 errorPageItem_: Object, | 65 errorPageItem_: Object, |
78 | 66 |
79 /** | 67 /** |
80 * The item currently displayed in the details view subpage. See also | 68 * The item currently displayed in the details view subpage. See also |
81 * errorPageItem_. | 69 * errorPageItem_. |
82 * @private {!chrome.developerPrivate.ExtensionInfo|undefined} | 70 * @private {!chrome.developerPrivate.ExtensionInfo|undefined} |
83 */ | 71 */ |
84 detailViewItem_: Object, | 72 detailViewItem_: Object, |
85 | 73 |
| 74 /** |
| 75 * The helper object to maintain page state. |
| 76 * @private {!extensions.NavigationHelper} |
| 77 */ |
| 78 navigationHelper_: Object, |
| 79 |
| 80 /** |
| 81 * The current page being shown. |
| 82 * @private {!PageState} |
| 83 */ |
| 84 currentPage_: Object, |
| 85 |
86 /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */ | 86 /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */ |
87 extensions: { | 87 extensions: { |
88 type: Array, | 88 type: Array, |
89 value: function() { return []; }, | 89 value: function() { return []; }, |
90 }, | 90 }, |
91 | 91 |
92 /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */ | 92 /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */ |
93 apps: { | 93 apps: { |
94 type: Array, | 94 type: Array, |
95 value: function() { return []; }, | 95 value: function() { return []; }, |
(...skipping 11 matching lines...) Expand all Loading... |
107 | 107 |
108 ready: function() { | 108 ready: function() { |
109 /** @type {extensions.Sidebar} */ | 109 /** @type {extensions.Sidebar} */ |
110 this.sidebar = | 110 this.sidebar = |
111 /** @type {extensions.Sidebar} */(this.$$('extensions-sidebar')); | 111 /** @type {extensions.Sidebar} */(this.$$('extensions-sidebar')); |
112 this.toolbar = | 112 this.toolbar = |
113 /** @type {extensions.Toolbar} */(this.$$('extensions-toolbar')); | 113 /** @type {extensions.Toolbar} */(this.$$('extensions-toolbar')); |
114 this.listHelper_ = new ListHelper(this); | 114 this.listHelper_ = new ListHelper(this); |
115 this.sidebar.setListDelegate(this.listHelper_); | 115 this.sidebar.setListDelegate(this.listHelper_); |
116 this.readyPromiseResolver.resolve(); | 116 this.readyPromiseResolver.resolve(); |
| 117 this.currentPage_ = {page: Page.LIST}; |
| 118 this.navigationHelper_ = |
| 119 new extensions.NavigationHelper(function(newPage) { |
| 120 this.changePage(newPage, true); |
| 121 }.bind(this)); |
| 122 this.optionsDialog.addEventListener('close', function() { |
| 123 // We update the page when the options dialog closes, but only if we're |
| 124 // still on the details page. We could be on a different page if the |
| 125 // user hit back while the options dialog was visible; in that case, the |
| 126 // new page is already correct. |
| 127 if (this.currentPage_.page == Page.DETAILS) { |
| 128 // This will update the currentPage_ and the NavigationHelper; since |
| 129 // the active page is already the details page, no main page |
| 130 // transition occurs. |
| 131 this.changePage( |
| 132 {page: Page.DETAILS, extensionId: this.currentPage_.extensionId}); |
| 133 } |
| 134 }.bind(this)); |
117 }, | 135 }, |
118 | 136 |
119 get keyboardShortcuts() { | 137 get keyboardShortcuts() { |
120 return this.$['keyboard-shortcuts']; | 138 return this.$['keyboard-shortcuts']; |
121 }, | 139 }, |
122 | 140 |
123 get packDialog() { | 141 get packDialog() { |
124 return this.$['pack-dialog']; | 142 return this.$['pack-dialog']; |
125 }, | 143 }, |
126 | 144 |
127 get loadError() { | 145 get loadError() { |
128 return this.$['load-error']; | 146 return this.$['load-error']; |
129 }, | 147 }, |
130 | 148 |
131 get optionsDialog() { | 149 get optionsDialog() { |
132 return this.$['options-dialog']; | 150 return this.$['options-dialog']; |
133 }, | 151 }, |
134 | 152 |
135 get errorPage() { | 153 get errorPage() { |
136 return this.$['error-page']; | 154 return this.$['error-page']; |
137 }, | 155 }, |
138 | 156 |
139 /** | 157 /** |
140 * Shows the details view for a given item. | 158 * Shows the details view for a given item. |
141 * @param {!chrome.developerPrivate.ExtensionInfo} data | 159 * @param {!chrome.developerPrivate.ExtensionInfo} data |
142 */ | 160 */ |
143 showItemDetails: function(data) { | 161 showItemDetails: function(data) { |
144 this.$['items-list'].willShowItemSubpage(data.id); | 162 this.changePage({page: Page.DETAILS, extensionId: data.id}); |
145 this.detailViewItem_ = data; | |
146 this.changePage(Page.DETAIL_VIEW); | |
147 }, | 163 }, |
148 | 164 |
149 /** | 165 /** |
| 166 * Initializes the page to reflect what's specified in the url so that if |
| 167 * the user visits chrome://extensions/?id=..., we land on the proper page. |
| 168 */ |
| 169 initPage: function() { |
| 170 this.changePage(this.navigationHelper_.getCurrentPage(), true); |
| 171 }, |
| 172 |
| 173 /** |
150 * @param {!CustomEvent} event | 174 * @param {!CustomEvent} event |
151 * @private | 175 * @private |
152 */ | 176 */ |
153 onFilterChanged_: function(event) { | 177 onFilterChanged_: function(event) { |
154 this.filter = /** @type {string} */ (event.detail); | 178 this.filter = /** @type {string} */ (event.detail); |
155 }, | 179 }, |
156 | 180 |
| 181 /** @private */ |
157 onMenuButtonTap_: function() { | 182 onMenuButtonTap_: function() { |
158 this.$.drawer.toggle(); | 183 this.$.drawer.toggle(); |
159 }, | 184 }, |
160 | 185 |
161 /** | 186 /** |
162 * @param {chrome.developerPrivate.ExtensionType} type The type of item. | 187 * @param {chrome.developerPrivate.ExtensionType} type The type of item. |
163 * @return {string} The ID of the list that the item belongs in. | 188 * @return {string} The ID of the list that the item belongs in. |
164 * @private | 189 * @private |
165 */ | 190 */ |
166 getListId_: function(type) { | 191 getListId_: function(type) { |
(...skipping 24 matching lines...) Expand all Loading... |
191 * @return {number} The index of the item in the list, or -1 if not found. | 216 * @return {number} The index of the item in the list, or -1 if not found. |
192 * @private | 217 * @private |
193 */ | 218 */ |
194 getIndexInList_: function(listId, itemId) { | 219 getIndexInList_: function(listId, itemId) { |
195 return this[listId].findIndex(function(item) { | 220 return this[listId].findIndex(function(item) { |
196 return item.id == itemId; | 221 return item.id == itemId; |
197 }); | 222 }); |
198 }, | 223 }, |
199 | 224 |
200 /** | 225 /** |
| 226 * @return {?chrome.developerPrivate.ExtensionInfo} |
| 227 * @private |
| 228 */ |
| 229 getData_: function(id) { |
| 230 return this.extensions[this.getIndexInList_('extensions', id)] || |
| 231 this.apps[this.getIndexInList_('apps', id)]; |
| 232 }, |
| 233 |
| 234 /** |
201 * @return {boolean} Whether the list should be visible. | 235 * @return {boolean} Whether the list should be visible. |
202 * @private | 236 * @private |
203 */ | 237 */ |
204 computeListHidden_: function() { | 238 computeListHidden_: function() { |
205 return this.$['items-list'].items.length == 0; | 239 return this.$['items-list'].items.length == 0; |
206 }, | 240 }, |
207 | 241 |
208 /** | 242 /** |
209 * Creates and adds a new extensions-item element to the list, inserting it | 243 * Creates and adds a new extensions-item element to the list, inserting it |
210 * into its sorted position in the relevant section. | 244 * into its sorted position in the relevant section. |
(...skipping 22 matching lines...) Expand all Loading... |
233 // We should never try and update a non-existent item. | 267 // We should never try and update a non-existent item. |
234 assert(index >= 0); | 268 assert(index >= 0); |
235 this.set([listId, index], item); | 269 this.set([listId, index], item); |
236 | 270 |
237 // Update the subpage if it is open and displaying the item. If it's not | 271 // Update the subpage if it is open and displaying the item. If it's not |
238 // open, we don't update the data even if it's displaying that item. We'll | 272 // open, we don't update the data even if it's displaying that item. We'll |
239 // set the item correctly before opening the page. It's a little weird | 273 // set the item correctly before opening the page. It's a little weird |
240 // that the DOM will have stale data, but there's no point in causing the | 274 // that the DOM will have stale data, but there's no point in causing the |
241 // extra work. | 275 // extra work. |
242 if (this.detailViewItem_ && this.detailViewItem_.id == item.id && | 276 if (this.detailViewItem_ && this.detailViewItem_.id == item.id && |
243 this.$.pages.selected == Page.DETAIL_VIEW) { | 277 this.$.pages.selected == Page.DETAILS) { |
244 this.detailViewItem_ = item; | 278 this.detailViewItem_ = item; |
245 } else if (this.errorPageItem_ && this.errorPageItem_.id == item.id && | 279 } else if (this.errorPageItem_ && this.errorPageItem_.id == item.id && |
246 this.$.pages.selected == Page.ERROR_PAGE) { | 280 this.$.pages.selected == Page.ERRORS) { |
247 this.errorPageItem_ = item; | 281 this.errorPageItem_ = item; |
248 } | 282 } |
249 }, | 283 }, |
250 | 284 |
251 /** | 285 /** |
252 * @param {!chrome.developerPrivate.ExtensionInfo} item The data for the | 286 * @param {!chrome.developerPrivate.ExtensionInfo} item The data for the |
253 * item to remove. | 287 * item to remove. |
254 */ | 288 */ |
255 removeItem: function(item) { | 289 removeItem: function(item) { |
256 var listId = this.getListId_(item.type); | 290 var listId = this.getListId_(item.type); |
257 var index = this.getIndexInList_(listId, item.id); | 291 var index = this.getIndexInList_(listId, item.id); |
258 // We should never try and remove a non-existent item. | 292 // We should never try and remove a non-existent item. |
259 assert(index >= 0); | 293 assert(index >= 0); |
260 this.splice(listId, index, 1); | 294 this.splice(listId, index, 1); |
261 }, | 295 }, |
262 | 296 |
263 /** | 297 /** |
264 * @param {Page} page | 298 * @param {Page} page |
265 * @return {!(extensions.KeyboardShortcuts | | 299 * @return {!(extensions.KeyboardShortcuts | |
266 * extensions.DetailView | | 300 * extensions.DetailView | |
267 * extensions.ItemList)} | 301 * extensions.ItemList)} |
268 * @private | 302 * @private |
269 */ | 303 */ |
270 getPage_: function(page) { | 304 getPage_: function(page) { |
271 switch (page) { | 305 switch (page) { |
272 case Page.ITEM_LIST: | 306 case Page.LIST: |
273 return this.$['items-list']; | 307 return this.$['items-list']; |
274 case Page.DETAIL_VIEW: | 308 case Page.DETAILS: |
275 return this.$['details-view']; | 309 return this.$['details-view']; |
276 case Page.KEYBOARD_SHORTCUTS: | 310 case Page.SHORTCUTS: |
277 return this.$['keyboard-shortcuts']; | 311 return this.$['keyboard-shortcuts']; |
278 case Page.ERROR_PAGE: | 312 case Page.ERRORS: |
279 return this.$['error-page']; | 313 return this.$['error-page']; |
280 } | 314 } |
281 assertNotReached(); | 315 assertNotReached(); |
282 }, | 316 }, |
283 | 317 |
284 /** | 318 /** |
285 * Changes the active page selection. | 319 * Changes the active page selection. |
286 * @param {Page} toPage | 320 * @param {PageState} newPage |
| 321 * @param {boolean=} isSilent If true, does not notify the navigation helper |
| 322 * of the change. |
287 */ | 323 */ |
288 changePage: function(toPage) { | 324 changePage: function(newPage, isSilent) { |
| 325 if (this.currentPage_.page == newPage.page && |
| 326 this.currentPage_.subpage == newPage.subpage && |
| 327 this.currentPage_.extensionId == newPage.extensionId) { |
| 328 return; |
| 329 } |
| 330 |
289 this.$.drawer.closeDrawer(); | 331 this.$.drawer.closeDrawer(); |
| 332 if (this.optionsDialog.open) |
| 333 this.optionsDialog.close(); |
| 334 |
290 var fromPage = this.$.pages.selected; | 335 var fromPage = this.$.pages.selected; |
291 if (fromPage == toPage) | 336 var toPage = newPage.page; |
292 return; | 337 var data; |
293 var entry; | 338 if (newPage.extensionId) |
294 var exit; | 339 data = assert(this.getData_(newPage.extensionId)); |
295 if (fromPage == Page.ITEM_LIST && (toPage == Page.DETAIL_VIEW || | 340 |
296 toPage == Page.ERROR_PAGE)) { | 341 if (toPage == Page.DETAILS) |
297 entry = [extensions.Animation.HERO]; | 342 this.detailViewItem_ = assert(data); |
298 // The item grid can be larger than the detail view that we're | 343 else if (toPage == Page.ERRORS) |
299 // hero'ing into, so we want to also fade out to avoid any jarring. | 344 this.errorPageItem_ = assert(data); |
300 exit = [extensions.Animation.HERO, extensions.Animation.FADE_OUT]; | 345 |
301 } else if (toPage == Page.ITEM_LIST) { | 346 if (fromPage != toPage) { |
302 entry = [extensions.Animation.FADE_IN]; | 347 var entry; |
303 exit = [extensions.Animation.SCALE_DOWN]; | 348 var exit; |
304 } else { | 349 if (fromPage == Page.LIST && (toPage == Page.DETAILS || |
305 assert(toPage == Page.DETAIL_VIEW || | 350 toPage == Page.ERRORS)) { |
306 toPage == Page.KEYBOARD_SHORTCUTS); | 351 this.$['items-list'].willShowItemSubpage(data.id); |
307 entry = [extensions.Animation.FADE_IN]; | 352 entry = [extensions.Animation.HERO]; |
308 exit = [extensions.Animation.FADE_OUT]; | 353 // The item grid can be larger than the detail view that we're |
| 354 // hero'ing into, so we want to also fade out to avoid any jarring. |
| 355 exit = [extensions.Animation.HERO, extensions.Animation.FADE_OUT]; |
| 356 } else if (toPage == Page.LIST) { |
| 357 entry = [extensions.Animation.FADE_IN]; |
| 358 exit = [extensions.Animation.SCALE_DOWN]; |
| 359 } else { |
| 360 assert(toPage == Page.DETAILS || |
| 361 toPage == Page.SHORTCUTS); |
| 362 entry = [extensions.Animation.FADE_IN]; |
| 363 exit = [extensions.Animation.FADE_OUT]; |
| 364 } |
| 365 |
| 366 this.getPage_(fromPage).animationHelper.setExitAnimations(exit); |
| 367 this.getPage_(toPage).animationHelper.setEntryAnimations(entry); |
| 368 this.$.pages.selected = toPage; |
309 } | 369 } |
310 this.getPage_(fromPage).animationHelper.setExitAnimations(exit); | 370 |
311 this.getPage_(toPage).animationHelper.setEntryAnimations(entry); | 371 if (newPage.subpage) { |
312 this.$.pages.selected = toPage; | 372 assert(newPage.subpage == Dialog.OPTIONS); |
| 373 assert(newPage.extensionId); |
| 374 this.optionsDialog.show(data); |
| 375 } |
| 376 |
| 377 this.currentPage_ = newPage; |
| 378 |
| 379 if (!isSilent) |
| 380 this.navigationHelper_.updateHistory(newPage); |
313 }, | 381 }, |
314 | 382 |
315 /** | 383 /** |
316 * Handles the event for the user clicking on a details button. | 384 * Handles the event for the user clicking on a details button. |
317 * @param {!CustomEvent} e | 385 * @param {!CustomEvent} e |
318 * @private | 386 * @private |
319 */ | 387 */ |
320 onShouldShowItemDetails_: function(e) { | 388 onShouldShowItemDetails_: function(e) { |
321 this.showItemDetails(e.detail.data); | 389 this.showItemDetails(e.detail.data); |
322 }, | 390 }, |
323 | 391 |
324 /** | 392 /** |
325 * Handles the event for the user clicking on the errors button. | 393 * Handles the event for the user clicking on the errors button. |
326 * @param {!CustomEvent} e | 394 * @param {!CustomEvent} e |
327 * @private | 395 * @private |
328 */ | 396 */ |
329 onShouldShowItemErrors_: function(e) { | 397 onShouldShowItemErrors_: function(e) { |
330 var data = e.detail.data; | 398 this.changePage({page: Page.ERRORS, id: e.detail.data.id}); |
331 this.$['items-list'].willShowItemSubpage(data.id); | |
332 this.errorPageItem_ = data; | |
333 this.changePage(Page.ERROR_PAGE); | |
334 }, | 399 }, |
335 | 400 |
336 /** @private */ | 401 /** @private */ |
337 onDetailsViewClose_: function() { | 402 onDetailsViewClose_: function() { |
338 // Note: we don't reset detailViewItem_ here because doing so just causes | 403 // Note: we don't reset detailViewItem_ here because doing so just causes |
339 // extra work for the data-bound details view. | 404 // extra work for the data-bound details view. |
340 this.changePage(Page.ITEM_LIST); | 405 this.changePage({page: Page.LIST}); |
341 }, | 406 }, |
342 | 407 |
343 /** @private */ | 408 /** @private */ |
344 onErrorPageClose_: function() { | 409 onErrorPageClose_: function() { |
345 // Note: we don't reset errorPageItem_ here because doing so just causes | 410 // Note: we don't reset errorPageItem_ here because doing so just causes |
346 // extra work for the data-bound error page. | 411 // extra work for the data-bound error page. |
347 this.changePage(Page.ITEM_LIST); | 412 this.changePage({page: Page.LIST}); |
348 }, | 413 }, |
349 | 414 |
350 /** @private */ | 415 /** @private */ |
351 onPackTap_: function() { | 416 onPackTap_: function() { |
352 this.$['pack-dialog'].show(); | 417 this.$['pack-dialog'].show(); |
353 } | 418 } |
354 }); | 419 }); |
355 | 420 |
356 /** | 421 /** |
357 * @param {extensions.Manager} manager | 422 * @param {extensions.Manager} manager |
(...skipping 11 matching lines...) Expand all Loading... |
369 switch (type) { | 434 switch (type) { |
370 case extensions.ShowingType.EXTENSIONS: | 435 case extensions.ShowingType.EXTENSIONS: |
371 items = this.manager_.extensions; | 436 items = this.manager_.extensions; |
372 break; | 437 break; |
373 case extensions.ShowingType.APPS: | 438 case extensions.ShowingType.APPS: |
374 items = this.manager_.apps; | 439 items = this.manager_.apps; |
375 break; | 440 break; |
376 } | 441 } |
377 | 442 |
378 this.manager_.$/* hack */ ['items-list'].set('items', assert(items)); | 443 this.manager_.$/* hack */ ['items-list'].set('items', assert(items)); |
379 this.manager_.changePage(Page.ITEM_LIST); | 444 this.manager_.changePage({page: Page.LIST}); |
380 }, | 445 }, |
381 | 446 |
382 /** @override */ | 447 /** @override */ |
383 showKeyboardShortcuts: function() { | 448 showKeyboardShortcuts: function() { |
384 this.manager_.changePage(Page.KEYBOARD_SHORTCUTS); | 449 this.manager_.changePage({page: Page.SHORTCUTS}); |
385 }, | 450 }, |
386 }; | 451 }; |
387 | 452 |
388 return {Manager: Manager}; | 453 return {Manager: Manager}; |
389 }); | 454 }); |
OLD | NEW |