Commit 584d3c52 authored by rbpotter's avatar rbpotter Committed by Commit Bot

Print Preview: Fix resizing issue in destinations dialog

https://chromium-review.googlesource.com/c/chromium/src/+/1984717
fixed an issue with the iron-list sometimes setting an infinite
displayed item count by setting the height of iron-list using JS so
that it was always set to something nonzero before the list items were
updated. Unfortunately, this causes the list to never increase in
size if the dialog is resized larger after it has been opened, leaving
an odd empty space between the destinations list and the buttons.

Fix by adding a listener for the resize event that updates the height
of the list.

Change-Id: I7e010293831e5e1459cf1f0f6ba429dd52825b94
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2006110
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#732688}
parent bd6cf81e
......@@ -61,6 +61,21 @@ Polymer({
'destinations.*, searchQuery, loadingDestinations)',
],
/** @private {?function(Event)} */
boundUpdateHeight_: null,
/** @override */
attached() {
this.boundUpdateHeight_ = () => this.updateHeight_();
window.addEventListener('resize', this.boundUpdateHeight_);
},
/** @override */
detached() {
window.removeEventListener('resize', this.boundUpdateHeight_);
this.boundUpdateHeight_ = null;
},
/**
* This is a workaround to ensure that the iron-list correctly updates the
* displayed destination information when the elements in the
......@@ -74,6 +89,30 @@ Polymer({
this.$.list.fire('iron-resize');
},
/**
* @param {number=} numDestinations
* @private
*/
updateHeight_(numDestinations) {
const count = numDestinations === undefined ?
this.matchingDestinations_.length :
numDestinations;
const maxDisplayedItems = this.offsetHeight / DESTINATION_ITEM_HEIGHT;
const isListFullHeight = maxDisplayedItems <= count;
const listHeight =
isListFullHeight ? this.offsetHeight : count * DESTINATION_ITEM_HEIGHT;
// Update the throbber and "No destinations" message.
this.hasDestinations_ = count > 0 || this.loadingDestinations;
this.throbberHidden_ =
!this.loadingDestinations || isListFullHeight || !this.hasDestinations_;
this.$.list.style.height = listHeight > DESTINATION_ITEM_HEIGHT ?
`${listHeight}px` :
`${DESTINATION_ITEM_HEIGHT}px`;
},
/** @private */
updateMatchingDestinations_() {
if (this.destinations === undefined) {
......@@ -85,20 +124,8 @@ Polymer({
d => d.matches(/** @type {!RegExp} */ (this.searchQuery))) :
this.destinations.slice();
const maxDisplayedItems = this.offsetHeight / DESTINATION_ITEM_HEIGHT;
const isListFullHeight = maxDisplayedItems <= matchingDestinations.length;
const listHeight = isListFullHeight ?
this.offsetHeight :
matchingDestinations.length * DESTINATION_ITEM_HEIGHT;
// Update the throbber and "No destinations" message.
this.hasDestinations_ =
matchingDestinations.length > 0 || this.loadingDestinations;
this.throbberHidden_ =
!this.loadingDestinations || isListFullHeight || !this.hasDestinations_;
// Update the height before updating the list.
this.$.list.style.height = `${listHeight}px`;
this.updateHeight_(matchingDestinations.length);
this.updateList(
'matchingDestinations_', destination => destination.key,
matchingDestinations);
......
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