Skip to content

GitLab

T
tangled
Commit 44cb6549 authored by Christopher Lam's avatar Christopher Lam Committed by Commit Bot
Browse files
Options

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
Hide whitespace changes
Inline Side-by-side
Showing with 265 additions and 221 deletions
chrome/browser/resources/md_bookmarks/command_manager.html
View file @ 44cb6549
......@@ -28,44 +28,49 @@
display: none;
}
</style>
<template is="cr-lazy-render" id="dropdown">
<cr-action-menu on-mousedown="onMenuMousedown_">
<template is="dom-repeat" items="[[menuCommands_]]" as="command">
<button slot="item" class="dropdown-item"
command$="[[command]]"
hidden$="[[!isCommandVisible_(command, menuIds_)]]"
disabled$="[[!isCommandEnabled_(command, menuIds_)]]"
on-click="onCommandClick_">
<span class="label">
[[getCommandLabel_(command, menuIds_)]]
</span>
<span class="sublabel">
[[getCommandSublabel_(command, menuIds_)]]
</span>
</button>
<hr hidden$="[[!showDividerAfter_(command, menuIds_)]]"
aria-hidden="true">
</hr>
</template>
</cr-action-menu>
</template>
<template is="cr-lazy-render" id="editDialog">
<bookmarks-edit-dialog></bookmarks-edit-dialog>
</template>
<template is="cr-lazy-render" id="openDialog">
<dialog is="cr-dialog">
<div slot="title">$i18n{openDialogTitle}</div>
<div slot="body"></div>
<div slot="button-container">
<paper-button class="cancel-button" on-click="onOpenCancelTap_">
$i18n{cancel}
</paper-button>
<paper-button class="action-button" on-click="onOpenConfirmTap_">
$i18n{openDialogConfirm}
</paper-button>
</div>
</dialog>
</template>
<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"
command$="[[command]]"
hidden$="[[!isCommandVisible_(command, menuIds_)]]"
disabled$="[[!isCommandEnabled_(command, menuIds_)]]"
on-click="onCommandClick_">
<span class="label">
[[getCommandLabel_(command, menuIds_)]]
</span>
<span class="sublabel">
[[getCommandSublabel_(command, menuIds_)]]
</span>
</button>
<hr hidden$="[[!showDividerAfter_(command, menuIds_)]]"
aria-hidden="true">
</template>
</cr-action-menu>
</template>
</cr-lazy-render>
<cr-lazy-render id="editDialog">
<template>
<bookmarks-edit-dialog></bookmarks-edit-dialog>
</template>
</cr-lazy-render>
<cr-lazy-render id="openDialog">
<template>
<dialog is="cr-dialog">
<div slot="title">$i18n{openDialogTitle}</div>
<div slot="body"></div>
<div slot="button-container">
<paper-button class="cancel-button" on-click="onOpenCancelTap_">
$i18n{cancel}
</paper-button>
<paper-button class="action-button" on-click="onOpenConfirmTap_">
$i18n{openDialogConfirm}
</paper-button>
</div>
</dialog>
</template>
</cr-lazy-render>
</template>
<script src="chrome://bookmarks/command_manager.js"></script>
</dom-module>
chrome/browser/resources/md_extensions/manager.html
View file @ 44cb6549
......@@ -87,23 +87,29 @@
apps="[[apps_]]" extensions="[[extensions_]]"
on-show-install-warnings="onShowInstallWarnings_">
</extensions-item-list>
<template id="details-view" is="cr-lazy-render">
<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">
<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>
<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>
</cr-lazy-render>
<cr-lazy-render id="keyboard-shortcuts">
<template>
<extensions-keyboard-shortcuts delegate="[[delegate]]" slot="view"
items="[[extensions_]]">
</extensions-keyboard-shortcuts>
</template>
</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
View file @ 44cb6549
......@@ -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
View file @ 44cb6549
......@@ -103,15 +103,17 @@
</iron-pages>
</div>
<template is="cr-lazy-render" id="drawer">
<cr-drawer heading="$i18n{title}" align="$i18n{textdirection}"
swipe-open>
<history-side-bar id="drawer-side-bar" class="drawer-content"
selected-page="{{selectedPage_}}"
show-footer="[[showSidebarFooter]]">
</history-side-bar>
</cr-drawer>
</template>
<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"
selected-page="{{selectedPage_}}"
show-footer="[[showSidebarFooter]]">
</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
View file @ 44cb6549
......@@ -58,36 +58,40 @@
lower-threshold="500" on-lower-threshold="onScrollToBottom_">
</iron-scroll-threshold>
<template is="cr-lazy-render" id="dialog">
<dialog is="cr-dialog">
<div slot="title">$i18n{removeSelected}</div>
<div slot="body">$i18n{deleteWarning}</div>
<div slot="button-container">
<paper-button class="cancel-button" on-click="onDialogCancelTap_">
$i18n{cancel}
</paper-button>
<paper-button class="action-button" on-click="onDialogConfirmTap_">
$i18n{deleteConfirm}
</paper-button>
</div>
</dialog>
</template>
<cr-lazy-render id="dialog">
<template>
<dialog is="cr-dialog">
<div slot="title">$i18n{removeSelected}</div>
<div slot="body">$i18n{deleteWarning}</div>
<div slot="button-container">
<paper-button class="cancel-button" on-click="onDialogCancelTap_">
$i18n{cancel}
</paper-button>
<paper-button class="action-button" on-click="onDialogConfirmTap_">
$i18n{deleteConfirm}
</paper-button>
</div>
</dialog>
</template>
</cr-lazy-render>
<template is="cr-lazy-render" id="sharedMenu">
<cr-action-menu>
<button id="menuMoreButton" slot="item" class="dropdown-item"
hidden="[[!canSearchMoreFromSite_(
searchedTerm, actionMenuModel_.item.domain)]]"
on-click="onMoreFromSiteTap_">
$i18n{moreFromSite}
</button>
<button id="menuRemoveButton" slot="item" class="dropdown-item"
hidden="[[!canDeleteHistory_]]"
on-click="onRemoveFromHistoryTap_">
$i18n{removeFromHistory}
</button>
</cr-action-menu>
</template>
<cr-lazy-render id="sharedMenu">
<template>
<cr-action-menu>
<button id="menuMoreButton" slot="item" class="dropdown-item"
hidden="[[!canSearchMoreFromSite_(
searchedTerm, actionMenuModel_.item.domain)]]"
on-click="onMoreFromSiteTap_">
$i18n{moreFromSite}
</button>
<button id="menuRemoveButton" slot="item" class="dropdown-item"
hidden="[[!canDeleteHistory_]]"
on-click="onRemoveFromHistoryTap_">
$i18n{removeFromHistory}
</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
View file @ 44cb6549
......@@ -87,18 +87,20 @@
</paper-button>
</div>
<template is="cr-lazy-render" id="menu">
<cr-action-menu>
<button id="menuOpenButton" slot="item" class="dropdown-item"
on-click="onOpenAllTap_">
$i18n{openAll}
</button>
<button id="menuDeleteButton" slot="item" class="dropdown-item"
on-click="onDeleteSessionTap_">
$i18n{deleteSession}
</button>
</cr-action-menu>
</template>
<cr-lazy-render id="menu">
<template>
<cr-action-menu>
<button id="menuOpenButton" slot="item" class="dropdown-item"
on-click="onOpenAllTap_">
$i18n{openAll}
</button>
<button id="menuDeleteButton" slot="item" class="dropdown-item"
on-click="onDeleteSessionTap_">
$i18n{deleteSession}
</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
View file @ 44cb6549
......@@ -24,11 +24,13 @@
</button>
</div>
</print-preview-settings-section>
<template is="cr-lazy-render" id="advancedDialog">
<print-preview-advanced-dialog
settings="{{settings}}" destination="[[destination]]">
</print-preview-advanced-dialog>
</template>
<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
View file @ 44cb6549
......@@ -88,14 +88,16 @@
</button>
</div>
</print-preview-settings-section>
<template is="cr-lazy-render" id="destinationDialog">
<print-preview-destination-dialog
destination-store="[[destinationStore]]"
recent-destinations="[[recentDestinations]]"
user-info="{{userInfo}}"
show-cloud-print-promo="{{showCloudPrintPromo_}}">
</print-preview-destination-dialog>
</template>
<cr-lazy-render id="destinationDialog">
<template>
<print-preview-destination-dialog
destination-store="[[destinationStore]]"
recent-destinations="[[recentDestinations]]"
user-info="{{userInfo}}"
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
View file @ 44cb6549
......@@ -265,55 +265,58 @@
</div>
</iron-collapse>
</if>
<template is="cr-lazy-render" id="menu">
<cr-action-menu
class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
<cr-lazy-render id="menu">
<template>
<cr-action-menu
class$="[[getMenuClass_(prefs.translate.enabled.value)]]">
<if expr="chromeos or is_win">
<paper-checkbox id="uiLanguageItem" slot="item"
class="dropdown-item"
checked="[[isProspectiveUILanguage_(
detailLanguage_.language.code,
languages.prospectiveUILanguage)]]"
on-change="onUILanguageChange_"
disabled="[[disableUILanguageCheckbox_(
detailLanguage_, languages.prospectiveUILanguage)]]">
$i18n{displayInThisLanguage}
</paper-checkbox>
<paper-checkbox id="uiLanguageItem" slot="item"
class="dropdown-item"
checked="[[isProspectiveUILanguage_(
detailLanguage_.language.code,
languages.prospectiveUILanguage)]]"
on-change="onUILanguageChange_"
disabled="[[disableUILanguageCheckbox_(
detailLanguage_, languages.prospectiveUILanguage)]]">
$i18n{displayInThisLanguage}
</paper-checkbox>
</if>
<paper-checkbox id="offerTranslations" slot="item"
class="dropdown-item"
checked="[[detailLanguage_.translateEnabled]]"
on-change="onTranslateCheckboxChange_"
hidden="[[!prefs.translate.enabled.value]]"
disabled="[[disableTranslateCheckbox_(
detailLanguage_.language, languages.translateTarget)]]">
$i18n{offerToTranslateInThisLanguage}
</paper-checkbox>
<hr slot="item">
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveToTopTap_"
hidden="[[isNthLanguage_(
0, detailLanguage_, languages.enabled.*)]]">
$i18n{moveToTop}
</button>
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveUpTap_"
hidden="[[!showMoveUp_(detailLanguage_, languages.enabled.*)]]">
$i18n{moveUp}
</button>
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveDownTap_"
hidden="[[!showMoveDown_(
detailLanguage_, languages.enabled.*)]]">
$i18n{moveDown}
</button>
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onRemoveLanguageTap_"
hidden="[[!detailLanguage_.removable]]">
$i18n{removeLanguage}
</button>
</cr-action-menu>
</template>
<paper-checkbox id="offerTranslations" slot="item"
class="dropdown-item"
checked="[[detailLanguage_.translateEnabled]]"
on-change="onTranslateCheckboxChange_"
hidden="[[!prefs.translate.enabled.value]]"
disabled="[[disableTranslateCheckbox_(
detailLanguage_.language, languages.translateTarget)]]">
$i18n{offerToTranslateInThisLanguage}
</paper-checkbox>
<hr slot="item">
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveToTopTap_"
hidden="[[isNthLanguage_(
0, detailLanguage_, languages.enabled.*)]]">
$i18n{moveToTop}
</button>
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveUpTap_"
hidden="[[!showMoveUp_(detailLanguage_,
languages.enabled.*)]]">
$i18n{moveUp}
</button>
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onMoveDownTap_"
hidden="[[!showMoveDown_(
detailLanguage_, languages.enabled.*)]]">
$i18n{moveDown}
</button>
<button slot="item" class="dropdown-item" role="menuitem"
on-click="onRemoveLanguageTap_"
hidden="[[!detailLanguage_.removable]]">
$i18n{removeLanguage}
</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
View file @ 44cb6549
......@@ -30,17 +30,19 @@
focus-row-control focus-type="menu">
</button>
</paper-icon-button-light>
<template is="cr-lazy-render" id="menu">
<cr-action-menu>
<button slot="item" class="dropdown-item" on-click="onEditTap_">
$i18n{edit}
</button>
<button slot="item" class="dropdown-item" id="remove"
on-click="onRemoveTap_">
$i18n{onStartupRemove}
</button>
</cr-action-menu>
</template>
<cr-lazy-render id="menu">
<template>
<cr-action-menu>
<button slot="item" class="dropdown-item" on-click="onEditTap_">
$i18n{edit}
</button>
<button slot="item" class="dropdown-item" id="remove"
on-click="onRemoveTap_">
$i18n{onStartupRemove}
</button>
</cr-action-menu>
</template>
</cr-lazy-render>
</template>
</div>
</template>
......
chrome/browser/resources/settings/reset_page/reset_page.html
View file @ 44cb6549
......@@ -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_">
</settings-reset-profile-dialog>
</template>
<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
View file @ 44cb6549
......@@ -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
View file @ 44cb6549
......@@ -36,29 +36,31 @@
<button id="dots" title="[[i18n('moreActions')]]" on-tap="onDotsTap_">
</button>
</paper-icon-button-light>
<template is="cr-lazy-render" id="menu">
<cr-action-menu>
<button slot="item" class="dropdown-item" id="view"
on-tap="onViewTap_">
[[i18n('certificateManagerView')]]
</button>
<button slot="item" class="dropdown-item" id="edit"
hidden$="[[!canEdit_(certificateType, model)]]"
on-tap="onEditTap_">
[[i18n('edit')]]
</button>
<button slot="item" class="dropdown-item" id="export"
hidden$="[[!canExport_(certificateType, model)]]"
on-tap="onExportTap_">
[[i18n('certificateManagerExport')]]
</button>
<button slot="item" class="dropdown-item" id="delete"
hidden$="[[!canDelete_(model)]]"
on-tap="onDeleteTap_">
[[i18n('certificateManagerDelete')]]
</button>
</cr-action-menu>
</template>
<cr-lazy-render id="menu">
<template>
<cr-action-menu>
<button slot="item" class="dropdown-item" id="view"
on-tap="onViewTap_">
[[i18n('certificateManagerView')]]
</button>
<button slot="item" class="dropdown-item" id="edit"
hidden$="[[!canEdit_(certificateType, model)]]"
on-tap="onEditTap_">
[[i18n('edit')]]
</button>
<button slot="item" class="dropdown-item" id="export"
hidden$="[[!canExport_(certificateType, model)]]"
on-tap="onExportTap_">
[[i18n('certificateManagerExport')]]
</button>
<button slot="item" class="dropdown-item" id="delete"
hidden$="[[!canDelete_(model)]]"
on-tap="onDeleteTap_">
[[i18n('certificateManagerDelete')]]
</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
View file @ 44cb6549
<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
View file @ 44cb6549
......@@ -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">
* <heavy-menu></heavy-menu>
* </template>
* <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({});
......
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