Commit 44cb6549 authored by Christopher Lam's avatar Christopher Lam Committed by Commit Bot

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: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#546012}
parent 68272510
...@@ -28,44 +28,49 @@ ...@@ -28,44 +28,49 @@
display: none; display: none;
} }
</style> </style>
<template is="cr-lazy-render" id="dropdown"> <cr-lazy-render id="dropdown">
<cr-action-menu on-mousedown="onMenuMousedown_"> <template>
<template is="dom-repeat" items="[[menuCommands_]]" as="command"> <cr-action-menu on-mousedown="onMenuMousedown_">
<button slot="item" class="dropdown-item" <template is="dom-repeat" items="[[menuCommands_]]" as="command">
command$="[[command]]" <button slot="item" class="dropdown-item"
hidden$="[[!isCommandVisible_(command, menuIds_)]]" command$="[[command]]"
disabled$="[[!isCommandEnabled_(command, menuIds_)]]" hidden$="[[!isCommandVisible_(command, menuIds_)]]"
on-click="onCommandClick_"> disabled$="[[!isCommandEnabled_(command, menuIds_)]]"
<span class="label"> on-click="onCommandClick_">
[[getCommandLabel_(command, menuIds_)]] <span class="label">
</span> [[getCommandLabel_(command, menuIds_)]]
<span class="sublabel"> </span>
[[getCommandSublabel_(command, menuIds_)]] <span class="sublabel">
</span> [[getCommandSublabel_(command, menuIds_)]]
</button> </span>
<hr hidden$="[[!showDividerAfter_(command, menuIds_)]]" </button>
aria-hidden="true"> <hr hidden$="[[!showDividerAfter_(command, menuIds_)]]"
</hr> aria-hidden="true">
</template> </template>
</cr-action-menu> </cr-action-menu>
</template> </template>
<template is="cr-lazy-render" id="editDialog"> </cr-lazy-render>
<bookmarks-edit-dialog></bookmarks-edit-dialog> <cr-lazy-render id="editDialog">
</template> <template>
<template is="cr-lazy-render" id="openDialog"> <bookmarks-edit-dialog></bookmarks-edit-dialog>
<dialog is="cr-dialog"> </template>
<div slot="title">$i18n{openDialogTitle}</div> </cr-lazy-render>
<div slot="body"></div> <cr-lazy-render id="openDialog">
<div slot="button-container"> <template>
<paper-button class="cancel-button" on-click="onOpenCancelTap_"> <dialog is="cr-dialog">
$i18n{cancel} <div slot="title">$i18n{openDialogTitle}</div>
</paper-button> <div slot="body"></div>
<paper-button class="action-button" on-click="onOpenConfirmTap_"> <div slot="button-container">
$i18n{openDialogConfirm} <paper-button class="cancel-button" on-click="onOpenCancelTap_">
</paper-button> $i18n{cancel}
</div> </paper-button>
</dialog> <paper-button class="action-button" on-click="onOpenConfirmTap_">
</template> $i18n{openDialogConfirm}
</paper-button>
</div>
</dialog>
</template>
</cr-lazy-render>
</template> </template>
<script src="chrome://bookmarks/command_manager.js"></script> <script src="chrome://bookmarks/command_manager.js"></script>
</dom-module> </dom-module>
...@@ -87,23 +87,29 @@ ...@@ -87,23 +87,29 @@
apps="[[apps_]]" extensions="[[extensions_]]" apps="[[apps_]]" extensions="[[extensions_]]"
on-show-install-warnings="onShowInstallWarnings_"> on-show-install-warnings="onShowInstallWarnings_">
</extensions-item-list> </extensions-item-list>
<template id="details-view" is="cr-lazy-render"> <cr-lazy-render id="details-view">
<extensions-detail-view delegate="[[delegate]]" slot="view" <template>
in-dev-mode="[[inDevMode]]" <extensions-detail-view delegate="[[delegate]]" slot="view"
incognito-available="[[incognitoAvailable_]]" in-dev-mode="[[inDevMode]]"
data="[[detailViewItem_]]"> incognito-available="[[incognitoAvailable_]]"
</extensions-detail-view> data="[[detailViewItem_]]">
</template> </extensions-detail-view>
<template id="keyboard-shortcuts" is="cr-lazy-render"> </template>
<extensions-keyboard-shortcuts delegate="[[delegate]]" slot="view" </cr-lazy-render>
items="[[extensions_]]"> <cr-lazy-render id="keyboard-shortcuts">
</extensions-keyboard-shortcuts> <template>
</template> <extensions-keyboard-shortcuts delegate="[[delegate]]" slot="view"
<template id="error-page" is="cr-lazy-render"> items="[[extensions_]]">
<extensions-error-page data="[[errorPageItem_]]" slot="view" </extensions-keyboard-shortcuts>
delegate="[[delegate]]" slot="view"> </template>
</extensions-error-page> </cr-lazy-render>
</template> <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> </extensions-view-manager>
<template is="dom-if" if="[[showOptionsDialog_]]" restamp> <template is="dom-if" if="[[showOptionsDialog_]]" restamp>
<extensions-options-dialog id="options-dialog" <extensions-options-dialog id="options-dialog"
......
...@@ -80,8 +80,7 @@ cr.define('extensions', function() { ...@@ -80,8 +80,7 @@ cr.define('extensions', function() {
const animationFunction = extensions.viewAnimations.get(animation); const animationFunction = extensions.viewAnimations.get(animation);
assert(animationFunction); assert(animationFunction);
let effectiveView = let effectiveView = view.matches('cr-lazy-render') ? view.get() : view;
view.matches('[is=cr-lazy-render]') ? view.get() : view;
effectiveView.classList.add('active'); effectiveView.classList.add('active');
effectiveView.dispatchEvent(new CustomEvent('view-enter-start')); effectiveView.dispatchEvent(new CustomEvent('view-enter-start'));
......
...@@ -103,15 +103,17 @@ ...@@ -103,15 +103,17 @@
</iron-pages> </iron-pages>
</div> </div>
<template is="cr-lazy-render" id="drawer"> <cr-lazy-render id="drawer">
<cr-drawer heading="$i18n{title}" align="$i18n{textdirection}" <template>
swipe-open> <cr-drawer heading="$i18n{title}" align="$i18n{textdirection}"
<history-side-bar id="drawer-side-bar" class="drawer-content" swipe-open>
selected-page="{{selectedPage_}}" <history-side-bar id="drawer-side-bar" class="drawer-content"
show-footer="[[showSidebarFooter]]"> selected-page="{{selectedPage_}}"
</history-side-bar> show-footer="[[showSidebarFooter]]">
</cr-drawer> </history-side-bar>
</template> </cr-drawer>
</template>
</cr-lazy-render>
<iron-media-query query="(max-width: 1023px)" <iron-media-query query="(max-width: 1023px)"
query-matches="{{hasDrawer_}}"> query-matches="{{hasDrawer_}}">
......
...@@ -58,36 +58,40 @@ ...@@ -58,36 +58,40 @@
lower-threshold="500" on-lower-threshold="onScrollToBottom_"> lower-threshold="500" on-lower-threshold="onScrollToBottom_">
</iron-scroll-threshold> </iron-scroll-threshold>
<template is="cr-lazy-render" id="dialog"> <cr-lazy-render id="dialog">
<dialog is="cr-dialog"> <template>
<div slot="title">$i18n{removeSelected}</div> <dialog is="cr-dialog">
<div slot="body">$i18n{deleteWarning}</div> <div slot="title">$i18n{removeSelected}</div>
<div slot="button-container"> <div slot="body">$i18n{deleteWarning}</div>
<paper-button class="cancel-button" on-click="onDialogCancelTap_"> <div slot="button-container">
$i18n{cancel} <paper-button class="cancel-button" on-click="onDialogCancelTap_">
</paper-button> $i18n{cancel}
<paper-button class="action-button" on-click="onDialogConfirmTap_"> </paper-button>
$i18n{deleteConfirm} <paper-button class="action-button" on-click="onDialogConfirmTap_">
</paper-button> $i18n{deleteConfirm}
</div> </paper-button>
</dialog> </div>
</template> </dialog>
</template>
</cr-lazy-render>
<template is="cr-lazy-render" id="sharedMenu"> <cr-lazy-render id="sharedMenu">
<cr-action-menu> <template>
<button id="menuMoreButton" slot="item" class="dropdown-item" <cr-action-menu>
hidden="[[!canSearchMoreFromSite_( <button id="menuMoreButton" slot="item" class="dropdown-item"
searchedTerm, actionMenuModel_.item.domain)]]" hidden="[[!canSearchMoreFromSite_(
on-click="onMoreFromSiteTap_"> searchedTerm, actionMenuModel_.item.domain)]]"
$i18n{moreFromSite} on-click="onMoreFromSiteTap_">
</button> $i18n{moreFromSite}
<button id="menuRemoveButton" slot="item" class="dropdown-item" </button>
hidden="[[!canDeleteHistory_]]" <button id="menuRemoveButton" slot="item" class="dropdown-item"
on-click="onRemoveFromHistoryTap_"> hidden="[[!canDeleteHistory_]]"
$i18n{removeFromHistory} on-click="onRemoveFromHistoryTap_">
</button> $i18n{removeFromHistory}
</cr-action-menu> </button>
</template> </cr-action-menu>
</template>
</cr-lazy-render>
</template> </template>
<script src="chrome://history/history_list.js"></script> <script src="chrome://history/history_list.js"></script>
</dom-module> </dom-module>
...@@ -87,18 +87,20 @@ ...@@ -87,18 +87,20 @@
</paper-button> </paper-button>
</div> </div>
<template is="cr-lazy-render" id="menu"> <cr-lazy-render id="menu">
<cr-action-menu> <template>
<button id="menuOpenButton" slot="item" class="dropdown-item" <cr-action-menu>
on-click="onOpenAllTap_"> <button id="menuOpenButton" slot="item" class="dropdown-item"
$i18n{openAll} on-click="onOpenAllTap_">
</button> $i18n{openAll}
<button id="menuDeleteButton" slot="item" class="dropdown-item" </button>
on-click="onDeleteSessionTap_"> <button id="menuDeleteButton" slot="item" class="dropdown-item"
$i18n{deleteSession} on-click="onDeleteSessionTap_">
</button> $i18n{deleteSession}
</cr-action-menu> </button>
</template> </cr-action-menu>
</template>
</cr-lazy-render>
</template> </template>
<script src="chrome://history/synced_device_manager.js"></script> <script src="chrome://history/synced_device_manager.js"></script>
</dom-module> </dom-module>
...@@ -24,11 +24,13 @@ ...@@ -24,11 +24,13 @@
</button> </button>
</div> </div>
</print-preview-settings-section> </print-preview-settings-section>
<template is="cr-lazy-render" id="advancedDialog"> <cr-lazy-render id="advancedDialog">
<print-preview-advanced-dialog <template>
settings="{{settings}}" destination="[[destination]]"> <print-preview-advanced-dialog
</print-preview-advanced-dialog> settings="{{settings}}" destination="[[destination]]">
</template> </print-preview-advanced-dialog>
</template>
</cr-lazy-render>
</template> </template>
<script src="advanced_options_settings.js"></script> <script src="advanced_options_settings.js"></script>
</dom-module> </dom-module>
...@@ -88,14 +88,16 @@ ...@@ -88,14 +88,16 @@
</button> </button>
</div> </div>
</print-preview-settings-section> </print-preview-settings-section>
<template is="cr-lazy-render" id="destinationDialog"> <cr-lazy-render id="destinationDialog">
<print-preview-destination-dialog <template>
destination-store="[[destinationStore]]" <print-preview-destination-dialog
recent-destinations="[[recentDestinations]]" destination-store="[[destinationStore]]"
user-info="{{userInfo}}" recent-destinations="[[recentDestinations]]"
show-cloud-print-promo="{{showCloudPrintPromo_}}"> user-info="{{userInfo}}"
</print-preview-destination-dialog> show-cloud-print-promo="{{showCloudPrintPromo_}}">
</template> </print-preview-destination-dialog>
</template>
</cr-lazy-render>
</template> </template>
<script src="destination_settings.js"></script> <script src="destination_settings.js"></script>
</dom-module> </dom-module>
...@@ -265,55 +265,58 @@ ...@@ -265,55 +265,58 @@
</div> </div>
</iron-collapse> </iron-collapse>
</if> </if>
<template is="cr-lazy-render" id="menu"> <cr-lazy-render id="menu">
<cr-action-menu <template>
class$="[[getMenuClass_(prefs.translate.enabled.value)]]"> <cr-action-menu
class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
<if expr="chromeos or is_win"> <if expr="chromeos or is_win">
<paper-checkbox id="uiLanguageItem" slot="item" <paper-checkbox id="uiLanguageItem" slot="item"
class="dropdown-item" class="dropdown-item"
checked="[[isProspectiveUILanguage_( checked="[[isProspectiveUILanguage_(
detailLanguage_.language.code, detailLanguage_.language.code,
languages.prospectiveUILanguage)]]" languages.prospectiveUILanguage)]]"
on-change="onUILanguageChange_" on-change="onUILanguageChange_"
disabled="[[disableUILanguageCheckbox_( disabled="[[disableUILanguageCheckbox_(
detailLanguage_, languages.prospectiveUILanguage)]]"> detailLanguage_, languages.prospectiveUILanguage)]]">
$i18n{displayInThisLanguage} $i18n{displayInThisLanguage}
</paper-checkbox> </paper-checkbox>
</if> </if>
<paper-checkbox id="offerTranslations" slot="item" <paper-checkbox id="offerTranslations" slot="item"
class="dropdown-item" class="dropdown-item"
checked="[[detailLanguage_.translateEnabled]]" checked="[[detailLanguage_.translateEnabled]]"
on-change="onTranslateCheckboxChange_" on-change="onTranslateCheckboxChange_"
hidden="[[!prefs.translate.enabled.value]]" hidden="[[!prefs.translate.enabled.value]]"
disabled="[[disableTranslateCheckbox_( disabled="[[disableTranslateCheckbox_(
detailLanguage_.language, languages.translateTarget)]]"> detailLanguage_.language, languages.translateTarget)]]">
$i18n{offerToTranslateInThisLanguage} $i18n{offerToTranslateInThisLanguage}
</paper-checkbox> </paper-checkbox>
<hr slot="item"> <hr slot="item">
<button slot="item" class="dropdown-item" role="menuitem" <button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveToTopTap_" on-click="onMoveToTopTap_"
hidden="[[isNthLanguage_( hidden="[[isNthLanguage_(
0, detailLanguage_, languages.enabled.*)]]"> 0, detailLanguage_, languages.enabled.*)]]">
$i18n{moveToTop} $i18n{moveToTop}
</button> </button>
<button slot="item" class="dropdown-item" role="menuitem" <button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveUpTap_" on-click="onMoveUpTap_"
hidden="[[!showMoveUp_(detailLanguage_, languages.enabled.*)]]"> hidden="[[!showMoveUp_(detailLanguage_,
$i18n{moveUp} languages.enabled.*)]]">
</button> $i18n{moveUp}
<button slot="item" class="dropdown-item" role="menuitem" </button>
on-click="onMoveDownTap_" <button slot="item" class="dropdown-item" role="menuitem"
hidden="[[!showMoveDown_( on-click="onMoveDownTap_"
detailLanguage_, languages.enabled.*)]]"> hidden="[[!showMoveDown_(
$i18n{moveDown} detailLanguage_, languages.enabled.*)]]">
</button> $i18n{moveDown}
<button slot="item" class="dropdown-item" role="menuitem" </button>
on-click="onRemoveLanguageTap_" <button slot="item" class="dropdown-item" role="menuitem"
hidden="[[!detailLanguage_.removable]]"> on-click="onRemoveLanguageTap_"
$i18n{removeLanguage} hidden="[[!detailLanguage_.removable]]">
</button> $i18n{removeLanguage}
</cr-action-menu> </button>
</template> </cr-action-menu>
</template>
</cr-lazy-render>
</neon-animatable> </neon-animatable>
<if expr="chromeos"> <if expr="chromeos">
<template is="dom-if" route-path="/inputMethods"> <template is="dom-if" route-path="/inputMethods">
......
...@@ -30,17 +30,19 @@ ...@@ -30,17 +30,19 @@
focus-row-control focus-type="menu"> focus-row-control focus-type="menu">
</button> </button>
</paper-icon-button-light> </paper-icon-button-light>
<template is="cr-lazy-render" id="menu"> <cr-lazy-render id="menu">
<cr-action-menu> <template>
<button slot="item" class="dropdown-item" on-click="onEditTap_"> <cr-action-menu>
$i18n{edit} <button slot="item" class="dropdown-item" on-click="onEditTap_">
</button> $i18n{edit}
<button slot="item" class="dropdown-item" id="remove" </button>
on-click="onRemoveTap_"> <button slot="item" class="dropdown-item" id="remove"
$i18n{onStartupRemove} on-click="onRemoveTap_">
</button> $i18n{onStartupRemove}
</cr-action-menu> </button>
</template> </cr-action-menu>
</template>
</cr-lazy-render>
</template> </template>
</div> </div>
</template> </template>
......
...@@ -40,10 +40,13 @@ ...@@ -40,10 +40,13 @@
</div> </div>
<!-- Keep a single instance of reset-profile-dialog on purpose, to <!-- Keep a single instance of reset-profile-dialog on purpose, to
preserve state across show/hide operations. --> preserve state across show/hide operations. -->
<template is="cr-lazy-render" id="resetProfileDialog"> <cr-lazy-render id="resetProfileDialog">
<settings-reset-profile-dialog on-close="onResetProfileDialogClose_"> <template>
</settings-reset-profile-dialog> <settings-reset-profile-dialog
</template> on-close="onResetProfileDialogClose_">
</settings-reset-profile-dialog>
</template>
</cr-lazy-render>
<if expr="chromeos"> <if expr="chromeos">
<div class="settings-box two-line" id="powerwash" actionable <div class="settings-box two-line" id="powerwash" actionable
on-click="onShowPowerwashDialog_" hidden="[[!allowPowerwash_]]"> on-click="onShowPowerwashDialog_" hidden="[[!allowPowerwash_]]">
......
...@@ -13,15 +13,17 @@ suite('cr-lazy-render', function() { ...@@ -13,15 +13,17 @@ suite('cr-lazy-render', function() {
setup(function() { setup(function() {
PolymerTest.clearBody(); PolymerTest.clearBody();
const template = const template = `
'<template is="dom-bind" id="bind">' + <template is="dom-bind" id="bind">
' <template is="cr-lazy-render" id="lazy">' + <cr-lazy-render id="lazy">
' <h1>' + <template>
' <paper-checkbox checked="{{checked}}"></paper-checkbox>' + <h1>
' {{name}}' + <paper-checkbox checked="{{checked}}"></paper-checkbox>
' </h1>' + {{name}}
' </template>' + </h1>
'</template>'; </template>
</cr-lazy-render>
</template>`;
document.body.innerHTML = template; document.body.innerHTML = template;
lazy = document.getElementById('lazy'); lazy = document.getElementById('lazy');
bind = document.getElementById('bind'); bind = document.getElementById('bind');
......
...@@ -36,29 +36,31 @@ ...@@ -36,29 +36,31 @@
<button id="dots" title="[[i18n('moreActions')]]" on-tap="onDotsTap_"> <button id="dots" title="[[i18n('moreActions')]]" on-tap="onDotsTap_">
</button> </button>
</paper-icon-button-light> </paper-icon-button-light>
<template is="cr-lazy-render" id="menu"> <cr-lazy-render id="menu">
<cr-action-menu> <template>
<button slot="item" class="dropdown-item" id="view" <cr-action-menu>
on-tap="onViewTap_"> <button slot="item" class="dropdown-item" id="view"
[[i18n('certificateManagerView')]] on-tap="onViewTap_">
</button> [[i18n('certificateManagerView')]]
<button slot="item" class="dropdown-item" id="edit" </button>
hidden$="[[!canEdit_(certificateType, model)]]" <button slot="item" class="dropdown-item" id="edit"
on-tap="onEditTap_"> hidden$="[[!canEdit_(certificateType, model)]]"
[[i18n('edit')]] on-tap="onEditTap_">
</button> [[i18n('edit')]]
<button slot="item" class="dropdown-item" id="export" </button>
hidden$="[[!canExport_(certificateType, model)]]" <button slot="item" class="dropdown-item" id="export"
on-tap="onExportTap_"> hidden$="[[!canExport_(certificateType, model)]]"
[[i18n('certificateManagerExport')]] on-tap="onExportTap_">
</button> [[i18n('certificateManagerExport')]]
<button slot="item" class="dropdown-item" id="delete" </button>
hidden$="[[!canDelete_(model)]]" <button slot="item" class="dropdown-item" id="delete"
on-tap="onDeleteTap_"> hidden$="[[!canDelete_(model)]]"
[[i18n('certificateManagerDelete')]] on-tap="onDeleteTap_">
</button> [[i18n('certificateManagerDelete')]]
</cr-action-menu> </button>
</template> </cr-action-menu>
</template>
</cr-lazy-render>
<div> <div>
</template> </template>
<script src="certificate_subentry.js"></script> <script src="certificate_subentry.js"></script>
......
<link rel="import" href="chrome://resources/html/polymer.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>
...@@ -7,16 +7,20 @@ ...@@ -7,16 +7,20 @@
* cr-lazy-render is a simple variant of dom-if designed for lazy rendering * cr-lazy-render is a simple variant of dom-if designed for lazy rendering
* of elements that are accessed imperatively. * of elements that are accessed imperatively.
* Usage: * Usage:
* <template is="cr-lazy-render" id="menu"> * <cr-lazy-render id="menu">
* <heavy-menu></heavy-menu> * <template>
* </template> * <heavy-menu></heavy-menu>
* </template>
* </cr-lazy-render>
* *
* this.$.menu.get().show(); * this.$.menu.get().show();
*
* TODO(calamity): Use Polymer.Templatize instead of inheriting the
* Polymer.Templatizer behavior once Polymer 2.0 is available.
*/ */
Polymer({ Polymer({
is: 'cr-lazy-render', is: 'cr-lazy-render',
extends: 'template',
behaviors: [Polymer.Templatizer], behaviors: [Polymer.Templatizer],
...@@ -43,8 +47,9 @@ Polymer({ ...@@ -43,8 +47,9 @@ Polymer({
/** @private */ /** @private */
render_: function() { render_: function() {
if (!this.ctor) var template = this.getContentChildren()[0];
this.templatize(this); if (!template.ctor)
this.templatize(template);
var parentNode = this.parentNode; var parentNode = this.parentNode;
if (parentNode && !this.child_) { if (parentNode && !this.child_) {
var instance = this.stamp({}); var instance = this.stamp({});
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment