Commit eab21dcc authored by wutao's avatar wutao Committed by Commit Bot

ambient: Do now show img element when no url

The preview photo is fetched and shown async, the img element on the
settings page is broken for a while before the image is downloaded.

This patch hides the img and shows it when the url is not empty.

Bug: b/166816130
Test: added new js test
Change-Id: I5ccc563dcc3f22c836a2fc35e7fa0e007ace846f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2383262
Commit-Queue: Tao Wu <wutao@chromium.org>
Reviewed-by: default avatarJimmy Gong <jimmyxgong@chromium.org>
Reviewed-by: default avatarKyle Horimoto <khorimoto@chromium.org>
Reviewed-by: default avatarXiaohui Chen <xiaohuic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#805364}
parent c07a387a
...@@ -100,13 +100,17 @@ ...@@ -100,13 +100,17 @@
class$="layout vertical left flex [[computeClass_(topicSource)]]"> class$="layout vertical left flex [[computeClass_(topicSource)]]">
<div id="imageContainer" class$="[[computeClass_(topicSource)]]" <div id="imageContainer" class$="[[computeClass_(topicSource)]]"
aria-hidden="true"> aria-hidden="true">
<img id="image" class$="[[computeClass_(topicSource)]]" actionable <!-- Only shows the image and icon when the URL is successfully
src="[[album.url]]" on-click="onImageClick_"> fetched -->
</img> <template is="dom-if" if="[[album.url]]">
<iron-icon icon="os-settings:ic-checked-filled" <img id="image" class$="[[computeClass_(topicSource)]]" actionable
class$="check [[computeClass_(topicSource)]]" src="[[album.url]]" on-click="onImageClick_">
hidden="[[!album.checked]]"> </img>
</iron-icon> <iron-icon icon="os-settings:ic-checked-filled"
class$="check [[computeClass_(topicSource)]]"
hidden="[[!album.checked]]">
</iron-icon>
</template>
</div> </div>
<div id="albumInfo" class$="[[computeClass_(topicSource)]]" <div id="albumInfo" class$="[[computeClass_(topicSource)]]"
......
...@@ -84,7 +84,6 @@ Polymer({ ...@@ -84,7 +84,6 @@ Polymer({
event.stopPropagation(); event.stopPropagation();
}, },
/** /**
* @param {!MouseEvent} event * @param {!MouseEvent} event
* @private * @private
......
...@@ -163,8 +163,8 @@ suite('AmbientModeHandler', function() { ...@@ -163,8 +163,8 @@ suite('AmbientModeHandler', function() {
test('toggleAlbumSelectionByClick', function() { test('toggleAlbumSelectionByClick', function() {
ambientModePhotosPage.albums = [ ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0'}, {albumId: 'id0', checked: true, title: 'album0', url: 'url'},
{albumId: 'id1', checked: false, title: 'album1'} {albumId: 'id1', checked: false, title: 'album1', url: 'url'}
]; ];
Polymer.dom.flush(); Polymer.dom.flush();
...@@ -186,30 +186,32 @@ suite('AmbientModeHandler', function() { ...@@ -186,30 +186,32 @@ suite('AmbientModeHandler', function() {
}); });
// Click album item image will toggle the check. // Click album item image will toggle the check.
album0.$.image.click(); const image0 = album0.$$('#image');
image0.click();
assertFalse(album0.checked); assertFalse(album0.checked);
assertEquals(1, selectedAlbumsChangedEventCalls); assertEquals(1, selectedAlbumsChangedEventCalls);
// Click album item image will toggle the check. // Click album item image will toggle the check.
album0.$.image.click(); image0.click();
assertTrue(album0.checked); assertTrue(album0.checked);
assertEquals(2, selectedAlbumsChangedEventCalls); assertEquals(2, selectedAlbumsChangedEventCalls);
// Click album item image will toggle the check. // Click album item image will toggle the check.
album1.$.image.click(); const image1 = album1.$$('#image');
image1.click();
assertTrue(album1.checked); assertTrue(album1.checked);
assertEquals(3, selectedAlbumsChangedEventCalls); assertEquals(3, selectedAlbumsChangedEventCalls);
// Click album item image will toggle the check. // Click album item image will toggle the check.
album1.$.image.click(); image1.click();
assertFalse(album1.checked); assertFalse(album1.checked);
assertEquals(4, selectedAlbumsChangedEventCalls); assertEquals(4, selectedAlbumsChangedEventCalls);
}); });
test('showCheckIconOnSelectedAlbum', function() { test('showCheckIconOnSelectedAlbum', function() {
ambientModePhotosPage.albums = [ ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0'}, {albumId: 'id0', checked: true, title: 'album0', url: 'url'},
{albumId: 'id1', checked: false, title: 'album1'} {albumId: 'id1', checked: false, title: 'album1', url: 'url'}
]; ];
Polymer.dom.flush(); Polymer.dom.flush();
...@@ -223,7 +225,7 @@ suite('AmbientModeHandler', function() { ...@@ -223,7 +225,7 @@ suite('AmbientModeHandler', function() {
assertFalse(check0.hidden); assertFalse(check0.hidden);
// Click album item image will toggle the check. // Click album item image will toggle the check.
album0.$.image.click(); album0.$$('#image').click();
assertFalse(album0.checked); assertFalse(album0.checked);
assertTrue(check0.hidden); assertTrue(check0.hidden);
...@@ -233,7 +235,7 @@ suite('AmbientModeHandler', function() { ...@@ -233,7 +235,7 @@ suite('AmbientModeHandler', function() {
assertTrue(check1.hidden); assertTrue(check1.hidden);
// Click album item image will toggle the check. // Click album item image will toggle the check.
album1.$.image.click(); album1.$$('#image').click();
assertTrue(album1.checked); assertTrue(album1.checked);
assertFalse(check1.hidden); assertFalse(check1.hidden);
// Click album1 will not affect album0. // Click album1 will not affect album0.
...@@ -251,8 +253,8 @@ suite('AmbientModeHandler', function() { ...@@ -251,8 +253,8 @@ suite('AmbientModeHandler', function() {
test('setSelectedAlbums', async () => { test('setSelectedAlbums', async () => {
ambientModePhotosPage.albums = [ ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0'}, {albumId: 'id0', checked: true, title: 'album0', url: 'url'},
{albumId: 'id1', checked: false, title: 'album1'} {albumId: 'id1', checked: false, title: 'album1', url: 'url'}
]; ];
Polymer.dom.flush(); Polymer.dom.flush();
...@@ -269,7 +271,7 @@ suite('AmbientModeHandler', function() { ...@@ -269,7 +271,7 @@ suite('AmbientModeHandler', function() {
browserProxy.resetResolver('setSelectedAlbums'); browserProxy.resetResolver('setSelectedAlbums');
// Click album item image will toggle the check. // Click album item image will toggle the check.
album1.$.image.click(); album1.$$('#image').click();
assertTrue(album1.checked); assertTrue(album1.checked);
assertEquals(1, browserProxy.getCallCount('setSelectedAlbums')); assertEquals(1, browserProxy.getCallCount('setSelectedAlbums'));
...@@ -280,7 +282,7 @@ suite('AmbientModeHandler', function() { ...@@ -280,7 +282,7 @@ suite('AmbientModeHandler', function() {
browserProxy.resetResolver('setSelectedAlbums'); browserProxy.resetResolver('setSelectedAlbums');
// Click album item image will toggle the check. // Click album item image will toggle the check.
album0.$.image.click(); album0.$$('#image').click();
assertFalse(album0.checked); assertFalse(album0.checked);
assertEquals(1, browserProxy.getCallCount('setSelectedAlbums')); assertEquals(1, browserProxy.getCallCount('setSelectedAlbums'));
...@@ -398,4 +400,36 @@ suite('AmbientModeHandler', function() { ...@@ -398,4 +400,36 @@ suite('AmbientModeHandler', function() {
}); });
assertEquals('', album0.album.url); assertEquals('', album0.album.url);
}); });
test('updateImgVisibility', function() {
ambientModePhotosPage.albums = [
{albumId: 'id0', checked: true, title: 'album0', url: ''},
];
ambientModePhotosPage.topicSource = AmbientModeTopicSource.ART_GALLERY;
Polymer.dom.flush();
const albumList = ambientModePhotosPage.$$('album-list');
const ironList = albumList.$$('iron-list');
const albumItems = ironList.querySelectorAll('album-item:not([hidden])');
assertEquals(1, albumItems.length);
const album0 = albumItems[0];
assertEquals('', album0.album.url);
let img = album0.$$('#image');
assertFalse(!!img);
// Update album URL.
const url = 'https://ambient-art-gallery-preview-url';
cr.webUIListenerCallback('album-preview-changed', {
topicSource: AmbientModeTopicSource.ART_GALLERY,
albumId: 'id0',
url: url
});
assertEquals(url, album0.album.url);
img = album0.$$('#image');
assertTrue(!!img);
assertFalse(img.hidden);
});
}); });
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