[MD extensions] cr-lazy-render on pages so they are attached on demand

This CL wraps the MD extensions pages (details view, error
page, and shortcuts page) in cr-lazy-render to accelerate the initial page load.
The item list is not lazily rendered because it's the main page.

Bug: 770392
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I5cc1d58f42c7bf56463d222a9a2dda7e0aa494ce
Reviewed-on: https://chromium-review.googlesource.com/731884
Commit-Queue: Dave Schuyler <dschuyler@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#512725}

chrome/browser/resources/md_extensions/manager.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_drawer/cr_drawer.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
@@ -79,16 +80,21 @@
           filter="[[filter]]" hidden$="[[!didInitPage_]]" slot="view"
           apps="[[apps]]" extensions="[[extensions]]">
       </extensions-item-list>
-      <extensions-detail-view id="details-view" delegate="[[delegate]]"
-          in-dev-mode="[[inDevMode]]" data="[[detailViewItem_]]"
-          slot="view">
-      </extensions-detail-view>
-      <extensions-keyboard-shortcuts delegate="[[delegate]]"
-          id="keyboard-shortcuts" items="[[extensions]]" slot="view">
-      </extensions-keyboard-shortcuts>
-      <extensions-error-page id="error-page"
-          data="[[errorPageItem_]]" delegate="[[delegate]]" slot="view">
-      </extensions-error-page>
+      <template id="details-view" is="cr-lazy-render">
+        <extensions-detail-view delegate="[[delegate]]" slot="view"
+            in-dev-mode="[[inDevMode]]" data="[[detailViewItem_]]">
+        </extensions-detail-view>
+      </template>
+      <template id="keyboard-shortcuts" is="cr-lazy-render">
+        <extensions-keyboard-shortcuts delegate="[[delegate]]" slot="view"
+            items="[[extensions]]">
+        </extensions-keyboard-shortcuts>
+      </template>
+      <template id="error-page" is="cr-lazy-render">
+        <extensions-error-page data="[[errorPageItem_]]" slot="view"
+            delegate="[[delegate]]" slot="view">
+        </extensions-error-page>
+      </template>
     </extensions-view-manager>
     <template is="dom-if" if="[[showOptionsDialog_]]" restamp>
       <extensions-options-dialog id="options-dialog"

chrome/browser/resources/md_extensions/view_manager.js

@@ -71,19 +71,22 @@ cr.define('extensions', function() {
     },
 
     /**
-     * @param {!Element} element
-     * @param {!string} animation
+     * @param {!Element} view
+     * @param {string} animation
      * @return {!Promise}
      * @private
      */
-    enter_: function(element, animation) {
+    enter_: function(view, animation) {
       const animationFunction = extensions.viewAnimations.get(animation);
       assert(animationFunction);
 
-      element.classList.add('active');
-      element.dispatchEvent(new CustomEvent('view-enter-start'));
-      return animationFunction(element).then(function() {
-        element.dispatchEvent(new CustomEvent('view-enter-finish'));
+      let effectiveView =
+          view.matches('[is=cr-lazy-render]') ? view.get() : view;
+
+      effectiveView.classList.add('active');
+      effectiveView.dispatchEvent(new CustomEvent('view-enter-start'));
+      return animationFunction(effectiveView).then(() => {
+        effectiveView.dispatchEvent(new CustomEvent('view-enter-finish'));
       });
     },
 

chrome/test/data/webui/extensions/extension_manager_test.js

@@ -22,8 +22,9 @@ cr.define('extension_manager_tests', function() {
     /** @type {extensions.Manager} */
     var manager;
 
-    function isActiveView(viewId) {
-      expectEquals(viewId, manager.$.viewManager.querySelector('.active').id);
+    /** @param {string} viewElement */
+    function assertViewActive(tagName) {
+      expectTrue(!!manager.$.viewManager.querySelector(`${tagName}.active`));
     }
 
     setup(function() {
@@ -122,34 +123,34 @@ cr.define('extension_manager_tests', function() {
       // We start on the item list.
       MockInteractions.tap(manager.$$('#sidebar').$['sections-extensions']);
       Polymer.dom.flush();
-      isActiveView(Page.LIST);
+      assertViewActive('extensions-item-list');
 
       // Switch: item list -> keyboard shortcuts.
       MockInteractions.tap(manager.$$('#sidebar').$['sections-shortcuts']);
       Polymer.dom.flush();
-      isActiveView(Page.SHORTCUTS);
+      assertViewActive('extensions-keyboard-shortcuts');
 
       // Switch: item list -> detail view.
       var item = manager.$['items-list'].$$('extensions-item');
       assert(item);
       item.onDetailsTap_();
       Polymer.dom.flush();
-      isActiveView(Page.DETAILS);
+      assertViewActive('extensions-detail-view');
 
       // Switch: detail view -> keyboard shortcuts.
       MockInteractions.tap(manager.$$('#sidebar').$['sections-shortcuts']);
       Polymer.dom.flush();
-      isActiveView(Page.SHORTCUTS);
+      assertViewActive('extensions-keyboard-shortcuts');
 
       // We get back on the item list.
       MockInteractions.tap(manager.$$('#sidebar').$['sections-extensions']);
       Polymer.dom.flush();
-      isActiveView(Page.LIST);
+      assertViewActive('extensions-item-list');
     });
 
     test(assert(TestNames.UrlNavigationToDetails), function() {
-      isActiveView(Page.DETAILS);
-      var detailsView = manager.$['details-view'];
+      assertViewActive('extensions-detail-view');
+      var detailsView = manager.$$('extensions-detail-view');
       expectEquals('ldnnhddmnhbkjipkidpdiheffobcpfmf', detailsView.data.id);
     });
 
@@ -165,11 +166,13 @@ cr.define('extension_manager_tests', function() {
       manager.addItem(extension);
       manager.addItem(secondExtension);
       var data = manager.extensions[0];
+      // The detail view is not present until navigation.
+      expectFalse(!!manager.$$('extensions-detail-view'));
       // TODO(scottchen): maybe testing too many things in a single unit test.
       extensions.navigation.navigateTo(
           {page: Page.DETAILS, extensionId: extension.id});
-      Polymer.dom.flush();
-      var detailsView = manager.$['details-view'];
+      var detailsView = manager.$$('extensions-detail-view');
+      expectTrue(!!detailsView);  // View should now be present.
       expectEquals(extension.id, detailsView.data.id);
       expectEquals(oldDescription, detailsView.data.description);
       expectEquals(