0

WebUI: Update Polymer iron-list 1.4.6 -> 2.0.14.

Bug: 815009
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: If3c93fa90def4d7332d077d54efe9a8ca2c51ea3
Reviewed-on: https://chromium-review.googlesource.com/988247
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#552149}
This commit is contained in:
Scott Chen
2018-04-19 20:47:59 +00:00
committed by Commit Bot
parent 54d6ad6225
commit 9417cbbdf2
8 changed files with 600 additions and 511 deletions
chrome/browser/resources/md_downloads
third_party/polymer/v1_0
ui/webui/resources/cr_elements/cr_action_menu

@ -248,8 +248,10 @@ cr.define('downloads', function() {
type: 'splice',
removed: [],
}]);
const list = /** @type {!IronListElement} */ (this.$['downloads-list']);
list.updateSizeForItem(index);
this.async(() => {
const list = /** @type {!IronListElement} */ (this.$['downloads-list']);
list.updateSizeForIndex(index);
});
},
});

@ -18,7 +18,7 @@
"iron-iconset-svg": "PolymerElements/iron-iconset-svg#2.1.1",
"iron-icons": "PolymerElements/iron-icons#2.0.1",
"iron-input": "PolymerElements/iron-input#1.0.10",
"iron-list": "PolymerElements/iron-list#1.4.6",
"iron-list": "PolymerElements/iron-list#2.0.14",
"iron-location": "PolymerElements/iron-location#2.0.3",
"iron-media-query": "PolymerElements/iron-media-query#2.0.0",
"iron-menu-behavior": "PolymerElements/iron-menu-behavior#2.0.1",

@ -25,10 +25,10 @@ index 11bc05a37471..8d425e02c30b 100644
_ariaDescribedByChanged: function(ariaDescribedBy) {
diff --git a/components-chromium/iron-list/iron-list-extracted.js b/components-chromium/iron-list/iron-list-extracted.js
index c9e0a9fd5330..bb2f6aad64e8 100644
index 43c59653a39b..26652936735c 100644
--- a/components-chromium/iron-list/iron-list-extracted.js
+++ b/components-chromium/iron-list/iron-list-extracted.js
@@ -126,6 +126,14 @@
@@ -128,6 +128,14 @@
scrollOffset: {
type: Number,
value: 0
@ -42,15 +42,15 @@ index c9e0a9fd5330..bb2f6aad64e8 100644
+ value: false
}
},
@@ -895,6 +903,15 @@
@@ -791,6 +799,15 @@
* to `items`, splices or updates to a single item.
*/
_itemsChanged: function(change) {
+ var rendering = /^items(\.splices){0,1}$/.test(change.path);
+ var lastFocusedIndex, focusedElement;
+ if (rendering && this.preserveFocus) {
+ lastFocusedIndex = this._focusedIndex;
+ lastFocusedIndex = this._focusedVirtualIndex;
+ focusedElement = this.querySelector('* /deep/ *:focus');
+ }
+
@ -59,7 +59,7 @@ index c9e0a9fd5330..bb2f6aad64e8 100644
if (change.path === 'items') {
this._virtualStart = 0;
this._physicalTop = 0;
@@ -907,12 +924,11 @@
@@ -804,7 +821,7 @@
this._physicalItems = this._physicalItems || [];
this._physicalSizes = this._physicalSizes || [];
this._physicalStart = 0;
@ -68,14 +68,9 @@ index c9e0a9fd5330..bb2f6aad64e8 100644
this._resetScrollPosition(0);
}
this._removeFocusedItem();
this._debounceTemplate(this._render);
-
} else if (change.path === 'items.splices') {
this._adjustVirtualIndex(change.value.indexSplices);
this._virtualCount = this.items ? this.items.length : 0;
@@ -921,6 +937,17 @@
} else {
this._forwardItemPath(change.path.split('.').slice(1).join('.'), change.value);
@@ -826,6 +843,17 @@
} else if (change.path !== 'items.length') {
this._forwardItemPath(change.path, change.value);
}
+
+ // If the list was in focus when updated, preserve the focus on item.
@ -84,21 +79,10 @@ index c9e0a9fd5330..bb2f6aad64e8 100644
+ focusedElement.blur(); // paper- elements breaks when focused twice.
+ this._focusPhysicalItem(
+ Math.min(this.items.length - 1, lastFocusedIndex));
+ if (!this._isIndexVisible(this._focusedIndex)) {
+ this.scrollToIndex(this._focusedIndex);
+ if (!this._isIndexVisible(this._focusedVirtualIndex)) {
+ this.scrollToIndex(this._focusedVirtualIndex);
+ }
+ }
},
/**
@@ -1466,6 +1493,10 @@
return this._physicalIndexForKey[this._collection.getKey(this._getNormalizedItem(idx))];
},
+ focusItem: function(idx) {
+ this._focusPhysicalItem(idx);
+ },
+
_focusPhysicalItem: function(idx) {
if (idx < 0 || idx >= this._virtualCount) {
return;
_forwardItemPath: function(path, value) {

@ -7,7 +7,7 @@
"list",
"virtual-list"
],
"version": "1.4.6",
"version": "2.0.14",
"homepage": "https://github.com/PolymerElements/iron-list",
"authors": [
"The Polymer Authors"
@ -20,29 +20,65 @@
"license": "http://polymer.github.io/LICENSE.txt",
"ignore": [],
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.1.0"
"polymer": "Polymer/polymer#1.9 - 2",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#1 - 2",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#1 - 2",
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#1 - 2"
},
"devDependencies": {
"app-layout": "polymerelements/app-layout#^0.10.0",
"iron-flex-layout": "polymerelements/iron-flex-layout#^1.0.0",
"iron-component-page": "polymerelements/iron-component-page#^1.0.0",
"iron-ajax": "polymerelements/iron-ajax#^1.0.0",
"iron-icon": "polymerelements/iron-icon#^1.0.0",
"iron-icons": "polymerelements/iron-icons#^1.0.0",
"iron-scroll-threshold": "polymerelements/iron-scroll-threshold#^1.0.0",
"iron-image": "polymerelements/iron-image#^1.0.0",
"paper-menu-button": "polymerelements/paper-menu-button#^1.0.0",
"paper-item": "polymerelements/paper-item#^1.0.0",
"paper-icon-button": "polymerelements/paper-icon-button#^1.0.0",
"paper-button": "polymerelements/paper-button#^1.0.0",
"paper-badge": "polymerelements/paper-badge#^1.0.0",
"paper-spinner": "polymerelements/paper-spinner#^1.0.0",
"test-fixture": "polymerelements/test-fixture#^1.0.0",
"iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.2",
"web-component-tester": "^4.0.0"
"app-layout": "PolymerElements/app-layout#1 - 2",
"iron-flex-layout": "PolymerElements/iron-flex-layout#1 - 2",
"iron-component-page": "PolymerElements/iron-component-page#1 - 2",
"iron-ajax": "PolymerElements/iron-ajax#1 - 2",
"iron-icon": "PolymerElements/iron-icon#1 - 2",
"iron-icons": "PolymerElements/iron-icons#1 - 2",
"iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#1 - 2",
"iron-image": "PolymerElements/iron-image#1 - 2",
"paper-menu-button": "PolymerElements/paper-menu-button#1 - 2",
"paper-item": "PolymerElements/paper-item#1 - 2",
"paper-icon-button": "PolymerElements/paper-icon-button#1 - 2",
"paper-button": "PolymerElements/paper-button#1 - 2",
"paper-badge": "PolymerElements/paper-badge#1 - 2",
"paper-spinner": "PolymerElements/paper-spinner#1 - 2",
"test-fixture": "PolymerElements/test-fixture#^3.0.0-rc.1",
"iron-test-helpers": "PolymerElements/iron-test-helpers#1 - 2",
"webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
"web-component-tester": "^6.0.0"
},
"variants": {
"1.x": {
"dependencies": {
"polymer": "Polymer/polymer#^1.9",
"iron-resizable-behavior": "PolymerElements/iron-resizable-behavior#^1.0.0",
"iron-a11y-keys-behavior": "PolymerElements/iron-a11y-keys-behavior#^1.0.0",
"iron-scroll-target-behavior": "PolymerElements/iron-scroll-target-behavior#^1.0.0"
},
"devDependencies": {
"app-layout": "PolymerElements/app-layout#^0.10.0",
"iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-ajax": "PolymerElements/iron-ajax#^1.0.0",
"iron-icon": "PolymerElements/iron-icon#^1.0.0",
"iron-icons": "PolymerElements/iron-icons#^1.0.0",
"iron-scroll-threshold": "PolymerElements/iron-scroll-threshold#^1.0.0",
"iron-image": "PolymerElements/iron-image#^1.0.0",
"paper-menu-button": "PolymerElements/paper-menu-button#^1.0.0",
"paper-item": "PolymerElements/paper-item#^1.0.0",
"paper-icon-button": "PolymerElements/paper-icon-button#^1.0.0",
"paper-button": "PolymerElements/paper-button#^1.0.0",
"paper-badge": "PolymerElements/paper-badge#^1.0.0",
"paper-spinner": "PolymerElements/paper-spinner#^1.0.0",
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
"web-component-tester": "^4.0.0"
},
"resolutions": {
"webcomponentsjs": "^0.7"
}
}
},
"resolutions": {
"webcomponentsjs": "^1.0.0"
}
}

File diff suppressed because it is too large Load Diff

@ -1,6 +1,6 @@
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
@ -20,7 +20,7 @@ The `items` property specifies an array of list item data.
For performance reasons, not every item in the list is rendered at once;
instead a small subset of actual template elements *(enough to fill the viewport)*
are rendered and reused as the user scrolls. As such, it is important that all
state of the list template be bound to the model driving it, since the view may
state of the list template is bound to the model driving it, since the view may
be reused with a new model at any time. Particularly, any state that may change
as the result of a user interaction with the list item must be bound to the model
to avoid view state inconsistency.
@ -32,7 +32,7 @@ explicitly sized parent. By "explicitly sized", we mean it either has an explici
CSS `height` property set via a class or inline style, or else is sized by other
layout means (e.g. the `flex` or `fit` classes).
#### Flexbox - [jsbin](http://jsbin.com/kokaki/edit?html,output)
#### Flexbox - [jsbin](https://jsbin.com/vejoni/edit?html,output)
```html
<template is="x-list">
@ -58,7 +58,7 @@ layout means (e.g. the `flex` or `fit` classes).
</iron-list>
</template>
```
#### Explicit size - [jsbin](http://jsbin.com/pibefo/edit?html,output)
#### Explicit size - [jsbin](https://jsbin.com/vopucus/edit?html,output)
```html
<template is="x-list">
<style>
@ -79,7 +79,7 @@ layout means (e.g. the `flex` or `fit` classes).
</iron-list>
</template>
```
#### Main document scrolling - [jsbin](http://jsbin.com/cojuli/edit?html,output)
#### Main document scrolling - [jsbin](https://jsbin.com/wevirow/edit?html,output)
```html
<head>
<style>
@ -104,16 +104,14 @@ layout means (e.g. the `flex` or `fit` classes).
</style>
</head>
<body>
<template is="dom-bind">
<app-toolbar>App name</app-toolbar>
<iron-list scroll-target="document" items="[[items]]">
<template>
<div>
...
</div>
</template>
</iron-list>
</template>
<app-toolbar>App name</app-toolbar>
<iron-list scroll-target="document">
<template>
<div>
...
</div>
</template>
</iron-list>
</body>
```
@ -149,20 +147,18 @@ For example, given the following `data` array:
]
```
The following code would render the list (note the name and checked properties are
bound from the model object provided to the template scope):
The following code would render the list (note the name property is bound from the model
object provided to the template scope):
```html
<template is="dom-bind">
<iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: [[item.name]]
</div>
</template>
</iron-list>
</template>
<iron-ajax url="data.json" last-response="{{data}}" auto></iron-ajax>
<iron-list items="[[data]]" as="item">
<template>
<div>
Name: [[item.name]]
</div>
</template>
</iron-list>
```
### Grid layout
@ -247,15 +243,15 @@ will only render 20.
}
#items {
@apply(--iron-list-items-container);
@apply --iron-list-items-container;
position: relative;
}
:host(:not([grid])) #items > ::content > * {
:host(:not([grid])) #items > ::slotted(*) {
width: 100%;
}
#items > ::content > * {
#items > ::slotted(*) {
box-sizing: border-box;
margin: 0;
position: absolute;
@ -264,11 +260,10 @@ will only render 20.
}
</style>
<array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}">
</array-selector>
<array-selector id="selector" items="{{items}}" selected="{{selectedItems}}" selected-item="{{selectedItem}}"></array-selector>
<div id="items">
<content></content>
<slot></slot>
</div>
</template>

@ -96,9 +96,9 @@ Tree link: https://github.com/PolymerElements/iron-input/tree/1.0.10
Name: iron-list
Repository: https://github.com/PolymerElements/iron-list.git
Tree: v1.4.6
Revision: c1c7301e66705f7d080187e7afe2caf148d203d4
Tree link: https://github.com/PolymerElements/iron-list/tree/v1.4.6
Tree: v2.0.14
Revision: 2289099da9cbb9ed593350de0192b7b5e36aed9e
Tree link: https://github.com/PolymerElements/iron-list/tree/v2.0.14
Name: iron-location
Repository: https://github.com/PolymerElements/iron-location.git

@ -209,6 +209,8 @@ Polymer({
* @private
*/
onKeyDown_: function(e) {
e.stopPropagation();
if (e.key == 'Tab' || e.key == 'Escape') {
this.close();
e.preventDefault();