Skip to content

GitLab

T
tangled
Commit e2196439 authored by tsergeant's avatar tsergeant Committed by Commit bot
Browse files
Options

MD WebUI: Move history-lazy-render into cr-elements 

This is the first step in making this element usable by WebUI pages
other than MD History.

BUG=642200
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2282403005
Cr-Commit-Position: refs/heads/master@{#418788}
parent 0a388886
Hide whitespace changes
Inline Side-by-side
Showing with 189 additions and 177 deletions
chrome/browser/browser_resources.grd
View file @ e2196439
......@@ -245,8 +245,6 @@
<include name="IDR_MD_HISTORY_HISTORY_TOOLBAR_HTML" file="resources\md_history\history_toolbar.html" type="BINDATA" />
<include name="IDR_MD_HISTORY_HISTORY_TOOLBAR_JS" file="resources\md_history\history_toolbar.js" type="BINDATA" />
<include name="IDR_MD_HISTORY_ICONS_HTML" file="resources\md_history\icons.html" type="BINDATA" />
<include name="IDR_MD_HISTORY_LAZY_RENDER_HTML" file="resources\md_history\lazy_render.html" type="BINDATA" />
<include name="IDR_MD_HISTORY_LAZY_RENDER_JS" file="resources\md_history\lazy_render.js" type="BINDATA" />
<include name="IDR_MD_HISTORY_LIST_CONTAINER_HTML" file="resources\md_history\list_container.html" type="BINDATA" />
<include name="IDR_MD_HISTORY_LIST_CONTAINER_JS" file="resources\md_history\list_container.js" type="BINDATA" />
<include name="IDR_MD_HISTORY_SEARCHED_LABEL_HTML" file="resources\md_history\searched_label.html" type="BINDATA" />
......
chrome/browser/resources/md_history/app.crisper.js
View file @ e2196439
......@@ -5380,6 +5380,53 @@ Polymer({
}
});
// Copyright 2016 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.
Polymer({
is: 'cr-lazy-render',
"extends": 'template',
behaviors: [ Polymer.Templatizer ],
_renderPromise: null,
_instance: null,
get: function() {
if (!this._renderPromise) {
this._renderPromise = new Promise(function(resolve) {
this._debounceTemplate(function() {
this._render();
this._renderPromise = null;
resolve(this.getIfExists());
}.bind(this));
}.bind(this));
}
return this._renderPromise;
},
getIfExists: function() {
if (this._instance) {
var children = this._instance._children;
for (var i = 0; i < children.length; i++) {
if (children[i].nodeType == Node.ELEMENT_NODE) return children[i];
}
}
return null;
},
_render: function() {
if (!this.ctor) this.templatize(this);
var parentNode = this.parentNode;
if (parentNode && !this._instance) {
this._instance = this.stamp({});
var root = this._instance.root;
parentNode.insertBefore(root, this);
}
},
_forwardParentProp: function(prop, value) {
if (this._instance) this._instance.__setProperty(prop, value, true);
},
_forwardParentPath: function(path, value) {
if (this._instance) this._instance._notifyPath(path, value, true);
}
});
(function() {
'use strict';
Polymer.IronA11yAnnouncer = Polymer({
......@@ -6040,53 +6087,6 @@ Polymer({
}
});
// Copyright 2016 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.
Polymer({
is: 'history-lazy-render',
"extends": 'template',
behaviors: [ Polymer.Templatizer ],
_renderPromise: null,
_instance: null,
get: function() {
if (!this._renderPromise) {
this._renderPromise = new Promise(function(resolve) {
this._debounceTemplate(function() {
this._render();
this._renderPromise = null;
resolve(this.getIfExists());
}.bind(this));
}.bind(this));
}
return this._renderPromise;
},
getIfExists: function() {
if (this._instance) {
var children = this._instance._children;
for (var i = 0; i < children.length; i++) {
if (children[i].nodeType == Node.ELEMENT_NODE) return children[i];
}
}
return null;
},
_render: function() {
if (!this.ctor) this.templatize(this);
var parentNode = this.parentNode;
if (parentNode && !this._instance) {
this._instance = this.stamp({});
var root = this._instance.root;
parentNode.insertBefore(root, this);
}
},
_forwardParentProp: function(prop, value) {
if (this._instance) this._instance.__setProperty(prop, value, true);
},
_forwardParentPath: function(path, value) {
if (this._instance) this._instance._notifyPath(path, value, true);
}
});
// 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.
......
chrome/browser/resources/md_history/app.vulcanized.html
View file @ e2196439
......@@ -1284,8 +1284,6 @@ paper-icon-button {
</defs>
</svg>
</iron-iconset-svg>
<dom-module id="iron-a11y-announcer" assetpath="chrome://resources/polymer/v1_0/iron-a11y-announcer/" css-build="shadow">
<template>
<style scope="iron-a11y-announcer">:host {
......@@ -3226,7 +3224,7 @@ paper-tabs {
</template>
</div>
</cr-toolbar>
<template is="history-lazy-render" id="syncNotice">
<template is="cr-lazy-render" id="syncNotice">
<iron-dropdown vertical-align="top" horizontal-align="right" allow-outside-scroll="">
<div class="dropdown-content">
$i18nRaw{hasSyncedResults}
......@@ -4422,7 +4420,7 @@ dialog .body {
</template>
</iron-pages>
<template is="history-lazy-render" id="dialog">
<template is="cr-lazy-render" id="dialog">
<dialog is="cr-dialog">
<div class="title">$i18n{removeSelected}</div>
<div class="body">$i18n{deleteWarning}</div>
......@@ -4437,7 +4435,7 @@ dialog .body {
</dialog>
</template>
<template is="history-lazy-render" id="sharedMenu">
<template is="cr-lazy-render" id="sharedMenu">
<cr-shared-menu>
<paper-item id="menuMoreButton" class="menu-item" on-tap="onMoreFromSiteTap_">
$i18n{moreFromSite}
......@@ -4844,7 +4842,7 @@ paper-spinner {
</paper-button>
</div>
<template is="history-lazy-render" id="menu">
<template is="cr-lazy-render" id="menu">
<cr-shared-menu>
<paper-item id="menuOpenButton" class="menu-item" on-tap="onOpenAllTap_">
$i18n{openAll}
......
chrome/browser/resources/md_history/compiled_resources2.gyp
View file @ e2196439
......@@ -91,20 +91,14 @@
],
'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
},
{
'target_name': 'lazy_render',
'dependencies': [
'externs',
],
'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
},
{
'target_name': 'list_container',
'dependencies': [
'<(DEPTH)/ui/webui/resources/cr_elements/cr_lazy_render/compiled_resources2.gyp:cr_lazy_render',
'externs',
'grouped_list',
'history_list',
'history_list_behavior',
'lazy_render',
'<(EXTERNS_GYP):chrome_send',
'../history/compiled_resources2.gyp:externs',
],
......@@ -151,9 +145,9 @@
{
'target_name': 'synced_device_manager',
'dependencies': [
'<(DEPTH)/ui/webui/resources/cr_elements/cr_lazy_render/compiled_resources2.gyp:cr_lazy_render',
'<(DEPTH)/ui/webui/resources/cr_elements/cr_shared_menu/compiled_resources2.gyp:cr_shared_menu',
'browser_service',
'lazy_render',
'synced_device_card',
],
'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
......
chrome/browser/resources/md_history/externs.js
View file @ e2196439
......@@ -32,27 +32,3 @@ var DomRepeatClickEvent = function() {};
/** @type {Object} */
DomRepeatClickEvent.prototype.model;
/**
* A template instance created by Polymer.Templatizer.
* @constructor
* @extends {PolymerElement}
*/
var TemplateInstance = function() {};
/** @type {Array<Element>} */
TemplateInstance.prototype._children;
/**
* @param {string} prop
* @param {Object} value
* @param {boolean} quiet
*/
TemplateInstance.prototype.__setProperty = function(prop, value, quiet) {};
/**
* @param {string} path
* @param {Object} value
* @param {boolean} quiet
*/
TemplateInstance.prototype._notifyPath = function(path, value, quiet) {};
chrome/browser/resources/md_history/history_toolbar.html
View file @ e2196439
......@@ -7,9 +7,9 @@
<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tab.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-tabs/paper-tabs.html">
<link rel="import" href="chrome://resources/cr_elements/icons.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://history/icons.html">
<link rel="import" href="chrome://history/lazy_render.html">
<link rel="import" href="chrome://history/shared_style.html">
<dom-module id="history-toolbar">
......@@ -178,7 +178,7 @@
</template>
</div>
</cr-toolbar>
<template is="history-lazy-render" id="syncNotice">
<template is="cr-lazy-render" id="syncNotice">
<iron-dropdown vertical-align="top" horizontal-align="right"
allow-outside-scroll>
<div class="dropdown-content">
......
chrome/browser/resources/md_history/list_container.html
View file @ e2196439
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.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_shared_menu/cr_shared_menu.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
......@@ -7,7 +8,6 @@
<link rel="import" href="chrome://history/browser_service.html">
<link rel="import" href="chrome://history/grouped_list.html">
<link rel="import" href="chrome://history/history_list.html">
<link rel="import" href="chrome://history/lazy_render.html">
<link rel="import" href="chrome://history/shared_style.html">
<dom-module id="history-list-container">
......@@ -42,7 +42,7 @@
</template>
</iron-pages>
<template is="history-lazy-render" id="dialog">
<template is="cr-lazy-render" id="dialog">
<dialog is="cr-dialog">
<div class="title">$i18n{removeSelected}</div>
<div class="body">$i18n{deleteWarning}</div>
......@@ -58,7 +58,7 @@
</dialog>
</template>
<template is="history-lazy-render" id="sharedMenu">
<template is="cr-lazy-render" id="sharedMenu">
<cr-shared-menu>
<paper-item id="menuMoreButton" class="menu-item"
on-tap="onMoreFromSiteTap_">
......
chrome/browser/resources/md_history/synced_device_manager.html
View file @ e2196439
......@@ -2,9 +2,9 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-item/paper-item.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_shared_menu/cr_shared_menu.html">
<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
<link rel="import" href="chrome://history/lazy_render.html">
<link rel="import" href="chrome://history/shared_style.html">
<link rel="import" href="chrome://history/synced_device_card.html">
......@@ -89,7 +89,7 @@
</paper-button>
</div>
<template is="history-lazy-render" id="menu">
<template is="cr-lazy-render" id="menu">
<cr-shared-menu>
<paper-item id="menuOpenButton" class="menu-item"
on-tap="onOpenAllTap_">
......
chrome/browser/ui/webui/md_history_ui.cc
View file @ e2196439
......@@ -159,10 +159,6 @@ content::WebUIDataSource* CreateMdHistoryUIHTMLSource(Profile* profile) {
source->AddResourcePath("history_toolbar.js",
IDR_MD_HISTORY_HISTORY_TOOLBAR_JS);
source->AddResourcePath("icons.html", IDR_MD_HISTORY_ICONS_HTML);
source->AddResourcePath("lazy_render.html",
IDR_MD_HISTORY_LAZY_RENDER_HTML);
source->AddResourcePath("lazy_render.js",
IDR_MD_HISTORY_LAZY_RENDER_JS);
source->AddResourcePath("list_container.html",
IDR_MD_HISTORY_LIST_CONTAINER_HTML);
source->AddResourcePath("list_container.js",
......
chrome/test/data/webui/cr_elements/cr_elements_browsertest.js
View file @ e2196439
......@@ -37,6 +37,25 @@ CrElementsBrowserTest.prototype = {
},
};
function CrElementsLazyRenderTest() {}
CrElementsLazyRenderTest.prototype = {
__proto__: CrElementsBrowserTest.prototype,
/** @override */
browsePreload:
'chrome://resources/cr_elements/cr_lazy_render/cr_lazy_render.html',
/** @override */
extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
'cr_lazy_render_tests.js'
]),
};
TEST_F('CrElementsLazyRenderTest', 'All', function() {
mocha.run();
});
function CrElementsProfileAvatarSelectorTest() {}
CrElementsProfileAvatarSelectorTest.prototype = {
......
chrome/test/data/webui/cr_elements/cr_lazy_render_tests.js 0 → 100644
View file @ e2196439
// Copyright 2016 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.
suite('cr-lazy-render', function() {
suiteSetup(function() {
return PolymerTest.importHtml(
'chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html');
});
setup(function() {
PolymerTest.clearBody();
var 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>';
document.body.innerHTML = template;
});
test('stamps after get()', function() {
var lazy = document.getElementById('lazy');
assertFalse(!!document.body.querySelector('h1'));
assertFalse(!!lazy.getIfExists());
return lazy.get().then(function(inner) {
assertEquals('H1', inner.nodeName);
assertEquals(inner, document.body.querySelector('h1'));
});
});
test('one-way binding works', function() {
var bind = document.getElementById('bind');
bind.name = 'Wings';
var lazy = document.getElementById('lazy');
return lazy.get().then(function(inner) {
assertNotEquals(-1, inner.textContent.indexOf('Wings'));
bind.name = 'DC';
assertNotEquals(-1, inner.textContent.indexOf('DC'));
});
});
test('two-way binding works', function() {
var bind = document.getElementById('bind');
bind.checked = true;
var lazy = document.getElementById('lazy');
return lazy.get().then(function(inner) {
var checkbox = document.querySelector('paper-checkbox');
assertTrue(checkbox.checked);
MockInteractions.tap(checkbox);
assertFalse(checkbox.checked);
assertFalse(bind.checked);
});
});
});
chrome/test/data/webui/md_history/lazy_render_test.js deleted 100644 → 0
View file @ 0a388886
// Copyright 2016 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.
cr.define('md_history.lazy_render_test', function() {
function registerTests() {
suite('history-lazy-render', function() {
setup(function() {
PolymerTest.clearBody();
var template =
'<template is="dom-bind" id="bind">' +
' <template is="history-lazy-render" id="lazy">' +
' <h1>' +
' <history-side-bar selected-page="{{selectedPage}}">' +
' </history-side-bar>' +
' {{name}}' +
' </h1>' +
' </template>' +
'</template>';
document.body.innerHTML = template;
});
test('stamps after get()', function() {
var lazy = document.getElementById('lazy');
assertFalse(!!document.body.querySelector('h1'));
assertFalse(!!lazy.getIfExists());
return lazy.get().then(function(inner) {
assertEquals('H1', inner.nodeName);
assertEquals(inner, document.body.querySelector('h1'));
});
});
test('one-way binding works', function() {
var bind = document.getElementById('bind');
bind.name = 'Wings';
var lazy = document.getElementById('lazy');
return lazy.get().then(function(inner) {
assertNotEquals(-1, inner.textContent.indexOf('Wings'));
bind.name = 'DC';
assertNotEquals(-1, inner.textContent.indexOf('DC'));
});
});
test('two-way binding works', function() {
var bind = document.getElementById('bind');
bind.selectedPage = 'totally real page';
var lazy = document.getElementById('lazy');
return lazy.get().then(function(inner) {
var sideBar = document.querySelector('history-side-bar');
assertEquals(bind.selectedPage, sideBar.selectedPage);
sideBar.selectedPage = 'different page';
assertEquals(bind.selectedPage, sideBar.selectedPage);
});
});
});
}
return {
registerTests: registerTests,
}
});
chrome/test/data/webui/md_history/md_history_browsertest.js
View file @ e2196439
......@@ -39,7 +39,6 @@ MaterialHistoryBrowserTest.prototype = {
'history_supervised_user_test.js',
'history_synced_tabs_test.js',
'history_toolbar_test.js',
'lazy_render_test.js'
]),
/** @override */
......@@ -100,11 +99,6 @@ TEST_F('MaterialHistoryBrowserTest', 'HistoryOverflowMenuTest', function() {
mocha.run();
});
TEST_F('MaterialHistoryBrowserTest', 'LazyRenderTest', function() {
md_history.lazy_render_test.registerTests();
mocha.run();
});
TEST_F('MaterialHistoryBrowserTest', 'RoutingTest', function() {
md_history.history_routing_test.registerTests();
mocha.run();
......
ui/webui/resources/cr_elements/cr_lazy_render/compiled_resources2.gyp 0 → 100644
View file @ e2196439
# Copyright 2016 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.
{
'targets': [
{
'target_name': 'cr_lazy_render',
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
],
}
chrome/browser/resources/md_history/lazy_render.html → ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.html
View file @ e2196439
<link rel="import" href="chrome://resources/html/polymer.html">
<script src="chrome://history/lazy_render.js"></script>
<script src="cr_lazy_render.js"></script>
chrome/browser/resources/md_history/lazy_render.js → ui/webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js
View file @ e2196439
......@@ -4,10 +4,10 @@
/**
* @fileoverview
* history-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.
* Usage:
* <template is="history-lazy-render" id="menu">
* <template is="cr-lazy-render" id="menu">
* <heavy-menu></heavy-menu>
* </template>
*
......@@ -16,8 +16,32 @@
* });
*/
/**
* A template instance created by Polymer.Templatizer.
* @constructor
* @extends {PolymerElement}
*/
var TemplateInstance = function() {};
/** @type {Array<Element>} */
TemplateInstance.prototype._children;
/**
* @param {string} prop
* @param {Object} value
* @param {boolean} quiet
*/
TemplateInstance.prototype.__setProperty = function(prop, value, quiet) {};
/**
* @param {string} path
* @param {Object} value
* @param {boolean} quiet
*/
TemplateInstance.prototype._notifyPath = function(path, value, quiet) {};
Polymer({
is: 'history-lazy-render',
is: 'cr-lazy-render',
extends: 'template',
behaviors: [
......
ui/webui/resources/cr_elements_resources.grdp
View file @ e2196439
......@@ -26,6 +26,12 @@
file="../../webui/resources/cr_elements/icons.html"
type="chrome_html"
preprocess="true" />
<structure name="IDR_CR_ELEMENTS_CR_LAZY_RENDER_HTML"
file="../../webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.html"
type="chrome_html" />
<structure name="IDR_CR_ELEMENTS_CR_LAZY_RENDER_JS"
file="../../webui/resources/cr_elements/cr_lazy_render/cr_lazy_render.js"
type="chrome_html" />
<if expr="chromeos">
<structure name="IDR_CR_ELEMENTS_CR_NETWORK_ICON_HTML"
file="../../webui/resources/cr_elements/network/cr_network_icon.html"
......
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