WebUI Polymer 2 migration: Remove cr-lazy-render type extension.

This CL upgrades cr-lazy-render for compatibility with Polymer 2. It
does this by using a slot for a <template> from the light DOM which
gets templatized since the cr-lazy-render element itself can no longer
be a <template>.

This means that all clients need to wrap their light DOM in <template>
tags.

Bug: 818279
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ieaed7cb2f9422557aed0c3a388939b17b5825245
Reviewed-on: https://chromium-review.googlesource.com/977203
Commit-Queue: calamity <calamity@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#546012}

chrome/browser/resources/md_bookmarks/command_manager.html

@@ -28,7 +28,8 @@
         display: none;
       }
     </style>
-    <template is="cr-lazy-render" id="dropdown">
+    <cr-lazy-render id="dropdown">
+      <template>
         <cr-action-menu on-mousedown="onMenuMousedown_">
           <template is="dom-repeat" items="[[menuCommands_]]" as="command">
             <button slot="item" class="dropdown-item"
@@ -45,14 +46,17 @@
             </button>
             <hr hidden$="[[!showDividerAfter_(command, menuIds_)]]"
                 aria-hidden="true">
-          </hr>
           </template>
         </cr-action-menu>
       </template>
-    <template is="cr-lazy-render" id="editDialog">
+    </cr-lazy-render>
+    <cr-lazy-render id="editDialog">
+      <template>
         <bookmarks-edit-dialog></bookmarks-edit-dialog>
       </template>
-    <template is="cr-lazy-render" id="openDialog">
+    </cr-lazy-render>
+    <cr-lazy-render id="openDialog">
+      <template>
         <dialog is="cr-dialog">
           <div slot="title">$i18n{openDialogTitle}</div>
           <div slot="body"></div>
@@ -66,6 +70,7 @@
           </div>
         </dialog>
       </template>
+    </cr-lazy-render>
   </template>
   <script src="chrome://bookmarks/command_manager.js"></script>
 </dom-module>

chrome/browser/resources/md_extensions/manager.html

@@ -87,23 +87,29 @@
           apps="[[apps_]]" extensions="[[extensions_]]"
           on-show-install-warnings="onShowInstallWarnings_">
       </extensions-item-list>
-      <template id="details-view" is="cr-lazy-render">
+      <cr-lazy-render id="details-view">
+        <template>
           <extensions-detail-view delegate="[[delegate]]" slot="view"
               in-dev-mode="[[inDevMode]]"
               incognito-available="[[incognitoAvailable_]]"
               data="[[detailViewItem_]]">
           </extensions-detail-view>
         </template>
-      <template id="keyboard-shortcuts" is="cr-lazy-render">
+      </cr-lazy-render>
+      <cr-lazy-render id="keyboard-shortcuts">
+        <template>
           <extensions-keyboard-shortcuts delegate="[[delegate]]" slot="view"
               items="[[extensions_]]">
           </extensions-keyboard-shortcuts>
         </template>
-      <template id="error-page" is="cr-lazy-render">
+      </cr-lazy-render>
+      <cr-lazy-render id="error-page">
+        <template>
           <extensions-error-page data="[[errorPageItem_]]" slot="view"
               delegate="[[delegate]]" slot="view">
           </extensions-error-page>
         </template>
+      </cr-lazy-render>
     </extensions-view-manager>
     <template is="dom-if" if="[[showOptionsDialog_]]" restamp>
       <extensions-options-dialog id="options-dialog"

chrome/browser/resources/md_extensions/view_manager.js

@@ -80,8 +80,7 @@ cr.define('extensions', function() {
       const animationFunction = extensions.viewAnimations.get(animation);
       assert(animationFunction);
 
-      let effectiveView =
-          view.matches('[is=cr-lazy-render]') ? view.get() : view;
+      let effectiveView = view.matches('cr-lazy-render') ? view.get() : view;
 
       effectiveView.classList.add('active');
       effectiveView.dispatchEvent(new CustomEvent('view-enter-start'));

chrome/browser/resources/md_history/app.html

@@ -103,7 +103,8 @@
       </iron-pages>
     </div>
 
-    <template is="cr-lazy-render" id="drawer">
+    <cr-lazy-render id="drawer">
+      <template>
         <cr-drawer heading="$i18n{title}" align="$i18n{textdirection}"
             swipe-open>
           <history-side-bar id="drawer-side-bar" class="drawer-content"
@@ -112,6 +113,7 @@
           </history-side-bar>
         </cr-drawer>
       </template>
+    </cr-lazy-render>
 
     <iron-media-query query="(max-width: 1023px)"
         query-matches="{{hasDrawer_}}">

chrome/browser/resources/md_history/history_list.html

@@ -58,7 +58,8 @@
         lower-threshold="500" on-lower-threshold="onScrollToBottom_">
     </iron-scroll-threshold>
 
-    <template is="cr-lazy-render" id="dialog">
+    <cr-lazy-render id="dialog">
+      <template>
         <dialog is="cr-dialog">
           <div slot="title">$i18n{removeSelected}</div>
           <div slot="body">$i18n{deleteWarning}</div>
@@ -72,8 +73,10 @@
           </div>
         </dialog>
       </template>
+    </cr-lazy-render>
 
-    <template is="cr-lazy-render" id="sharedMenu">
+    <cr-lazy-render id="sharedMenu">
+      <template>
         <cr-action-menu>
           <button id="menuMoreButton" slot="item" class="dropdown-item"
               hidden="[[!canSearchMoreFromSite_(
@@ -88,6 +91,7 @@
           </button>
         </cr-action-menu>
       </template>
+    </cr-lazy-render>
   </template>
   <script src="chrome://history/history_list.js"></script>
 </dom-module>

chrome/browser/resources/md_history/synced_device_manager.html

@@ -87,7 +87,8 @@
       </paper-button>
     </div>
 
-    <template is="cr-lazy-render" id="menu">
+    <cr-lazy-render id="menu">
+      <template>
         <cr-action-menu>
           <button id="menuOpenButton" slot="item" class="dropdown-item"
               on-click="onOpenAllTap_">
@@ -99,6 +100,7 @@
           </button>
         </cr-action-menu>
       </template>
+    </cr-lazy-render>
   </template>
   <script src="chrome://history/synced_device_manager.js"></script>
 </dom-module>

chrome/browser/resources/print_preview/new/advanced_options_settings.html

@@ -24,11 +24,13 @@
         </button>
       </div>
     </print-preview-settings-section>
-    <template is="cr-lazy-render" id="advancedDialog">
+    <cr-lazy-render id="advancedDialog">
+      <template>
         <print-preview-advanced-dialog
             settings="{{settings}}" destination="[[destination]]">
         </print-preview-advanced-dialog>
       </template>
+    </cr-lazy-render>
   </template>
   <script src="advanced_options_settings.js"></script>
 </dom-module>

chrome/browser/resources/print_preview/new/destination_settings.html

@@ -88,7 +88,8 @@
         </button>
       </div>
     </print-preview-settings-section>
-    <template is="cr-lazy-render" id="destinationDialog">
+    <cr-lazy-render id="destinationDialog">
+      <template>
         <print-preview-destination-dialog
             destination-store="[[destinationStore]]"
             recent-destinations="[[recentDestinations]]"
@@ -96,6 +97,7 @@
             show-cloud-print-promo="{{showCloudPrintPromo_}}">
         </print-preview-destination-dialog>
       </template>
+    </cr-lazy-render>
   </template>
   <script src="destination_settings.js"></script>
 </dom-module>

chrome/browser/resources/settings/languages_page/languages_page.html

@@ -265,7 +265,8 @@
           </div>
         </iron-collapse>
 </if>
-        <template is="cr-lazy-render" id="menu">
+        <cr-lazy-render id="menu">
+          <template>
             <cr-action-menu
                 class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
 <if expr="chromeos or is_win">
@@ -298,7 +299,8 @@
               </button>
               <button slot="item" class="dropdown-item" role="menuitem"
                   on-click="onMoveUpTap_"
-                hidden="[[!showMoveUp_(detailLanguage_, languages.enabled.*)]]">
+                  hidden="[[!showMoveUp_(detailLanguage_,
+                      languages.enabled.*)]]">
                 $i18n{moveUp}
               </button>
               <button slot="item" class="dropdown-item" role="menuitem"
@@ -314,6 +316,7 @@
               </button>
             </cr-action-menu>
           </template>
+        </cr-lazy-render>
       </neon-animatable>
 <if expr="chromeos">
       <template is="dom-if" route-path="/inputMethods">

chrome/browser/resources/settings/on_startup_page/startup_url_entry.html

@@ -30,7 +30,8 @@
               focus-row-control focus-type="menu">
           </button>
         </paper-icon-button-light>
-        <template is="cr-lazy-render" id="menu">
+        <cr-lazy-render id="menu">
+          <template>
             <cr-action-menu>
               <button slot="item" class="dropdown-item" on-click="onEditTap_">
                 $i18n{edit}
@@ -41,6 +42,7 @@
               </button>
             </cr-action-menu>
           </template>
+        </cr-lazy-render>
       </template>
     </div>
   </template>

chrome/browser/resources/settings/reset_page/reset_page.html

@@ -40,10 +40,13 @@
         </div>
         <!-- Keep a single instance of reset-profile-dialog on purpose, to
           preserve state across show/hide operations. -->
-        <template is="cr-lazy-render" id="resetProfileDialog">
-          <settings-reset-profile-dialog on-close="onResetProfileDialogClose_">
+        <cr-lazy-render id="resetProfileDialog">
+          <template>
+            <settings-reset-profile-dialog
+                on-close="onResetProfileDialogClose_">
             </settings-reset-profile-dialog>
           </template>
+        </cr-lazy-render>
 <if expr="chromeos">
         <div class="settings-box two-line" id="powerwash" actionable
             on-click="onShowPowerwashDialog_" hidden="[[!allowPowerwash_]]">

chrome/test/data/webui/cr_elements/cr_lazy_render_tests.js

@@ -13,15 +13,17 @@ suite('cr-lazy-render', function() {
 
   setup(function() {
     PolymerTest.clearBody();
-    const template =
-        '<template is="dom-bind" id="bind">' +
-        '  <template is="cr-lazy-render" id="lazy">' +
-        '    <h1>' +
-        '      <paper-checkbox checked="{{checked}}"></paper-checkbox>' +
-        '      {{name}}' +
-        '    </h1>' +
-        '  </template>' +
-        '</template>';
+    const template = `
+        <template is="dom-bind" id="bind">
+          <cr-lazy-render id="lazy">
+            <template>
+              <h1>
+                <paper-checkbox checked="{{checked}}"></paper-checkbox>
+                {{name}}
+              </h1>
+            </template>
+          </cr-lazy-render>
+        </template>`;
     document.body.innerHTML = template;
     lazy = document.getElementById('lazy');
     bind = document.getElementById('bind');

ui/webui/resources/cr_components/certificate_manager/certificate_subentry.html

@@ -36,7 +36,8 @@
         <button id="dots" title="[[i18n('moreActions')]]" on-tap="onDotsTap_">
         </button>
       </paper-icon-button-light>
-      <template is="cr-lazy-render" id="menu">
+      <cr-lazy-render id="menu">
+        <template>
           <cr-action-menu>
             <button slot="item" class="dropdown-item" id="view"
                 on-tap="onViewTap_">
@@ -59,6 +60,7 @@
             </button>
           </cr-action-menu>
         </template>
+      </cr-lazy-render>
     <div>
   </template>
   <script src="certificate_subentry.js"></script>

ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
-<script src="cr_lazy_render.js"></script>
+<dom-module id="cr-lazy-render">
+  <template>
+    <slot></slot>
+  </template>
+  <script src="cr_lazy_render.js"></script>
+</dom-module>

ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js

@@ -7,16 +7,20 @@
  * cr-lazy-render is a simple variant of dom-if designed for lazy rendering
  * of elements that are accessed imperatively.
  * Usage:
- *   <template is="cr-lazy-render" id="menu">
+ *   <cr-lazy-render id="menu">
+ *     <template>
  *       <heavy-menu></heavy-menu>
  *     </template>
+ *   </cr-lazy-render>
  *
  *   this.$.menu.get().show();
+ *
+ * TODO(calamity): Use Polymer.Templatize instead of inheriting the
+ * Polymer.Templatizer behavior once Polymer 2.0 is available.
  */
 
 Polymer({
   is: 'cr-lazy-render',
-  extends: 'template',
 
   behaviors: [Polymer.Templatizer],
 
@@ -43,8 +47,9 @@ Polymer({
 
   /** @private */
   render_: function() {
-    if (!this.ctor)
-      this.templatize(this);
+    var template = this.getContentChildren()[0];
+    if (!template.ctor)
+      this.templatize(template);
     var parentNode = this.parentNode;
     if (parentNode && !this.child_) {
       var instance = this.stamp({});