[MD Extensions] Add support for URL navigation

chrome/browser/resources/md_extensions/manager.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * The different pages that can be shown at a time.
- * Note: This must remain in sync with the order in manager.html!
- * @enum {string}
- */
-var Page = {
-  ITEM_LIST: '0',
-  DETAIL_VIEW: '1',
-  KEYBOARD_SHORTCUTS: '2',
-  ERROR_PAGE: '3',
-};
-
 cr.define('extensions', function() {
   'use strict';
 
   /**
    * Compares two extensions to determine which should come first in the list.
    * @param {chrome.developerPrivate.ExtensionInfo} a
    * @param {chrome.developerPrivate.ExtensionInfo} b
    * @return {number}
    */
   var compareExtensions = function(a, b) {
@@ skipping 49 matching lines @@
        */
       errorPageItem_: Object,
 
       /**
        * The item currently displayed in the details view subpage. See also
        * errorPageItem_.
        * @private {!chrome.developerPrivate.ExtensionInfo|undefined}
        */
       detailViewItem_: Object,
 
+      /**
+       * The helper object to maintain page state.
+       * @private {!extensions.PageState}
+       */
+      pageState_: Object,
+
+      /**
+       * The current page being shown.
+       * @private {!PageEntry}
+       */
+      currentPage_: Object,
+
       /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
       extensions: {
         type: Array,
         value: function() { return []; },
       },
 
       /** @type {!Array<!chrome.developerPrivate.ExtensionInfo>} */
       apps: {
         type: Array,
         value: function() { return []; },
@@ skipping 11 matching lines @@
 
     ready: function() {
       /** @type {extensions.Sidebar} */
       this.sidebar =
           /** @type {extensions.Sidebar} */(this.$$('extensions-sidebar'));
       this.toolbar =
           /** @type {extensions.Toolbar} */(this.$$('extensions-toolbar'));
       this.listHelper_ = new ListHelper(this);
       this.sidebar.setListDelegate(this.listHelper_);
       this.readyPromiseResolver.resolve();
+      this.currentPage_ = {page: Page.LIST};
+      this.pageState_ = new extensions.PageState(function(newPage) {
+        this.changePage(newPage, true);
+      }.bind(this));
+      this.optionsDialog.addEventListener('close', function() {
+        // We update the page when the options dialog closes, but only if we're
+        // still on the details page. We could be on a different page if the
+        // user hit back while the options dialog was visible; in that case, the
+        // new page is already correct.
+        if (this.currentPage_.page == Page.DETAILS)
+          this.changePage({page: Page.DETAILS, id: this.currentPage_.id});

[michaelpg, 2017/04/14 20:23:53]

this seems to contradict the comment: if we're on the details page, change to
the details page? Are we trying to update the URL here and nothing else?

[Devlin, 2017/04/17 23:29:24]

Tried to clear it up with some comments.

[michaelpg, 2017/04/18 22:03:11]

Thanks.

+      }.bind(this));
     },
 
     get keyboardShortcuts() {
       return this.$['keyboard-shortcuts'];
     },
 
     get packDialog() {
       return this.$['pack-dialog'];
     },
 
     get loadError() {
       return this.$['load-error'];
     },
 
     get optionsDialog() {
       return this.$['options-dialog'];
     },
 
     get errorPage() {
       return this.$['error-page'];
     },
 
     /**
      * Shows the details view for a given item.
      * @param {!chrome.developerPrivate.ExtensionInfo} data
      */
     showItemDetails: function(data) {
-      this.$['items-list'].willShowItemSubpage(data.id);
-      this.detailViewItem_ = data;
-      this.changePage(Page.DETAIL_VIEW);
+      this.changePage({page: Page.DETAILS, id: data.id});
     },
 
     /**
+     * Initializes the page to reflect what's specified in the url so that if
+     * the user visits chrome://extensions/?id=..., we land on the proper page.
+     */
+    initPage: function() {
+      this.changePage(this.pageState_.getCurrentPage(), true);
+    },
+
+    /**
      * @param {!CustomEvent} event
      * @private
      */
     onFilterChanged_: function(event) {
       this.filter = /** @type {string} */ (event.detail);
     },
 
+    /** @private */
     onMenuButtonTap_: function() {
       this.$.drawer.toggle();
     },
 
     /**
      * @param {chrome.developerPrivate.ExtensionType} type The type of item.
      * @return {string} The ID of the list that the item belongs in.
      * @private
      */
     getListId_: function(type) {
@@ skipping 24 matching lines @@
      * @return {number} The index of the item in the list, or -1 if not found.
      * @private
      */
     getIndexInList_: function(listId, itemId) {
       return this[listId].findIndex(function(item) {
         return item.id == itemId;
       });
     },
 
     /**
+     * @return {?chrome.developerPrivate.ExtensionInfo}
+     * @private
+     */
+    getData_: function(id) {
+      return this.extensions[this.getIndexInList_('extensions', id)] ||
+             this.apps[this.getIndexInList_('apps', id)];
+    },
+
+    /**
      * @return {boolean} Whether the list should be visible.
      * @private
      */
     computeListHidden_: function() {
       return this.$['items-list'].items.length == 0;
     },
 
     /**
      * Creates and adds a new extensions-item element to the list, inserting it
      * into its sorted position in the relevant section.
@@ skipping 22 matching lines @@
       // We should never try and update a non-existent item.
       assert(index >= 0);
       this.set([listId, index], item);
 
       // Update the subpage if it is open and displaying the item. If it's not
       // open, we don't update the data even if it's displaying that item. We'll
       // set the item correctly before opening the page. It's a little weird
       // that the DOM will have stale data, but there's no point in causing the
       // extra work.
       if (this.detailViewItem_ && this.detailViewItem_.id == item.id &&
-          this.$.pages.selected == Page.DETAIL_VIEW) {
+          this.$.pages.selected == Page.DETAILS) {
         this.detailViewItem_ = item;
       } else if (this.errorPageItem_ && this.errorPageItem_.id == item.id &&
-                 this.$.pages.selected == Page.ERROR_PAGE) {
+                 this.$.pages.selected == Page.ERRORS) {
         this.errorPageItem_ = item;
       }
     },
 
     /**
      * @param {!chrome.developerPrivate.ExtensionInfo} item The data for the
      *     item to remove.
      */
     removeItem: function(item) {
       var listId = this.getListId_(item.type);
       var index = this.getIndexInList_(listId, item.id);
       // We should never try and remove a non-existent item.
       assert(index >= 0);
       this.splice(listId, index, 1);
     },
 
     /**
      * @param {Page} page
      * @return {!(extensions.KeyboardShortcuts |
      *            extensions.DetailView |
      *            extensions.ItemList)}
      * @private
      */
     getPage_: function(page) {
       switch (page) {
-        case Page.ITEM_LIST:
+        case Page.LIST:
           return this.$['items-list'];
-        case Page.DETAIL_VIEW:
+        case Page.DETAILS:
           return this.$['details-view'];
-        case Page.KEYBOARD_SHORTCUTS:
+        case Page.SHORTCUTS:
           return this.$['keyboard-shortcuts'];
-        case Page.ERROR_PAGE:
+        case Page.ERRORS:
           return this.$['error-page'];
       }
       assertNotReached();
     },
 
     /**
      * Changes the active page selection.
-     * @param {Page} toPage
+     * @param {PageEntry} newPage
+     * @param {boolean=} isSilent

[michaelpg, 2017/04/14 20:23:53]

document isSilent

[Devlin, 2017/04/17 23:29:24]

Done.

      */
-    changePage: function(toPage) {
+    changePage: function(newPage, isSilent) {
+      if (this.currentPage_.page == newPage.page &&
+          this.currentPage_.subpage == newPage.subpage &&
+          this.currentPage_.id == newPage.id) {
+        return;
+      }
+
       this.$.drawer.closeDrawer();
+      if (this.optionsDialog.open)
+        this.optionsDialog.close();
+
       var fromPage = this.$.pages.selected;
-      if (fromPage == toPage)
-        return;
-      var entry;
-      var exit;
-      if (fromPage == Page.ITEM_LIST && (toPage == Page.DETAIL_VIEW ||
-                                         toPage == Page.ERROR_PAGE)) {
-        entry = [extensions.Animation.HERO];
-        // The item grid can be larger than the detail view that we're
-        // hero'ing into, so we want to also fade out to avoid any jarring.
-        exit = [extensions.Animation.HERO, extensions.Animation.FADE_OUT];
-      } else if (toPage == Page.ITEM_LIST) {
-        entry = [extensions.Animation.FADE_IN];
-        exit = [extensions.Animation.SCALE_DOWN];
-      } else {
-        assert(toPage == Page.DETAIL_VIEW ||
-               toPage == Page.KEYBOARD_SHORTCUTS);
-        entry = [extensions.Animation.FADE_IN];
-        exit = [extensions.Animation.FADE_OUT];
+      var toPage = newPage.page;
+      var data;
+      if (newPage.id) {
+        data = this.getData_(newPage.id);
+        assert(data, newPage.id);
       }
-      this.getPage_(fromPage).animationHelper.setExitAnimations(exit);
-      this.getPage_(toPage).animationHelper.setEntryAnimations(entry);
-      this.$.pages.selected = toPage;
+
+      if (toPage == Page.DETAILS) {
+        assert(newPage.id);
+        this.detailViewItem_ = data;
+      } else if (toPage == Page.ERRORS) {
+        assert(newPage.id);
+        this.errorPageItem_ = data;
+      }
+
+      if (fromPage != toPage) {
+        var entry;
+        var exit;
+        if (fromPage == Page.LIST && (toPage == Page.DETAILS ||
+                                           toPage == Page.ERRORS)) {
+          assert(newPage.id);
+          this.$['items-list'].willShowItemSubpage(data.id);
+          entry = [extensions.Animation.HERO];
+          // The item grid can be larger than the detail view that we're
+          // hero'ing into, so we want to also fade out to avoid any jarring.
+          exit = [extensions.Animation.HERO, extensions.Animation.FADE_OUT];
+        } else if (toPage == Page.LIST) {
+          entry = [extensions.Animation.FADE_IN];
+          exit = [extensions.Animation.SCALE_DOWN];
+        } else {
+          assert(toPage == Page.DETAILS ||
+                 toPage == Page.SHORTCUTS);
+          entry = [extensions.Animation.FADE_IN];
+          exit = [extensions.Animation.FADE_OUT];
+        }
+
+        this.getPage_(fromPage).animationHelper.setExitAnimations(exit);
+        this.getPage_(toPage).animationHelper.setEntryAnimations(entry);
+        this.$.pages.selected = toPage;
+      }
+
+      if (newPage.subpage) {
+        assert(newPage.subpage == Subpage.OPTIONS);
+        assert(newPage.id);
+        this.optionsDialog.show(data);
+      }
+
+      this.currentPage_ = newPage;
+
+      if (!isSilent)
+        this.pageState_.onPageChange(newPage);
     },
 
     /**
      * Handles the event for the user clicking on a details button.
      * @param {!CustomEvent} e
      * @private
      */
     onShouldShowItemDetails_: function(e) {
       this.showItemDetails(e.detail.data);
     },
 
     /**
      * Handles the event for the user clicking on the errors button.
      * @param {!CustomEvent} e
      * @private
      */
     onShouldShowItemErrors_: function(e) {
-      var data = e.detail.data;
-      this.$['items-list'].willShowItemSubpage(data.id);
-      this.errorPageItem_ = data;
-      this.changePage(Page.ERROR_PAGE);
+      this.changePage({page: Page.ERRORS, id: e.detail.data.id});
     },
 
     /** @private */
     onDetailsViewClose_: function() {
       // Note: we don't reset detailViewItem_ here because doing so just causes
       // extra work for the data-bound details view.
-      this.changePage(Page.ITEM_LIST);
+      this.changePage({page: Page.LIST});
     },
 
     /** @private */
     onErrorPageClose_: function() {
       // Note: we don't reset errorPageItem_ here because doing so just causes
       // extra work for the data-bound error page.
-      this.changePage(Page.ITEM_LIST);
+      this.changePage({page: Page.LIST});
     },
 
     /** @private */
     onPackTap_: function() {
       this.$['pack-dialog'].show();
     }
   });
 
   /**
    * @param {extensions.Manager} manager
@@ skipping 11 matching lines @@
       switch (type) {
         case extensions.ShowingType.EXTENSIONS:
           items = this.manager_.extensions;
           break;
         case extensions.ShowingType.APPS:
           items = this.manager_.apps;
           break;
       }
 
       this.manager_.$/* hack */ ['items-list'].set('items', assert(items));
-      this.manager_.changePage(Page.ITEM_LIST);
+      this.manager_.changePage({page: Page.LIST});
     },
 
     /** @override */
     showKeyboardShortcuts: function() {
-      this.manager_.changePage(Page.KEYBOARD_SHORTCUTS);
+      this.manager_.changePage({page: Page.SHORTCUTS});
     },
   };
 
   return {Manager: Manager};
 });