Skip to content

Commit

Permalink
personalization: hide description button when viewing a different col…
Browse files Browse the repository at this point in the history 
…lection

Hide "About the art" button when viewing a different collection or
Google Photos. It is confusing to show collection buttons and the
description button together, since they refer to different collections.

BUG=b:284493612
TEST=browser_tests --gtest_filter="*WallpaperSelected*"

Change-Id: Ifb67261ca7033acc97d5b92eaca5f09a0aa44867
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4590873
Reviewed-by: Jason Thai <jasontt@chromium.org>
Commit-Queue: Jerry Liu <pzliu@google.com>
Cr-Commit-Position: refs/heads/main@{#1153626}
  • Loading branch information
@lpzjerry
lpzjerry authored and Chromium LUCI CQ committed Jun 6, 2023
1 parent 0d4bf38 commit 661ebf3
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 13 deletions.
37 changes: 32 additions & 5 deletions ash/webui/personalization_app/resources/js/wallpaper/wallpaper_selected_element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import './google_photos_shared_album_dialog_element.js';
import {loadTimeData} from 'chrome://resources/ash/common/load_time_data.m.js';
import {assert} from 'chrome://resources/js/assert_ts.js';

import {CurrentWallpaper, GooglePhotosPhoto, WallpaperLayout, WallpaperType} from '../../personalization_app.mojom-webui.js';
import {CurrentWallpaper, GooglePhotosPhoto, WallpaperCollection, WallpaperImage, WallpaperLayout, WallpaperType} from '../../personalization_app.mojom-webui.js';
import {isGooglePhotosSharedAlbumsEnabled, isPersonalizationJellyEnabled} from '../load_time_booleans.js';
import {Paths} from '../personalization_router_element.js';
import {WithPersonalizationStore} from '../personalization_store.js';
Expand Down Expand Up @@ -66,6 +66,8 @@ export class WallpaperSelected extends WithPersonalizationStore {
*/
path: String,

imagesByCollectionId_: Object,

photosByAlbumId_: Object,

image_: {
Expand Down Expand Up @@ -107,7 +109,8 @@ export class WallpaperSelected extends WithPersonalizationStore {

showDescriptionButton_: {
type: Boolean,
computed: 'computeShowDescriptionButton_(image_)',
computed:
'computeShowDescriptionButton_(image_,path,collectionId,imagesByCollectionId_)',
},

showDescriptionDialog_: Boolean,
Expand Down Expand Up @@ -186,6 +189,8 @@ export class WallpaperSelected extends WithPersonalizationStore {
private centerIcon_: string;
private error_: string;
private googlePhotosSharedAlbumsEnabled_: boolean;
private imagesByCollectionId_:
Record<WallpaperCollection['id'], WallpaperImage[]|null>|undefined;
private photosByAlbumId_: Record<string, GooglePhotosPhoto[]|null|undefined>|
undefined;

Expand All @@ -200,6 +205,8 @@ export class WallpaperSelected extends WithPersonalizationStore {
state.wallpaper.loading.selected ||
state.wallpaper.loading.refreshWallpaper);
this.watch('dailyRefreshState_', state => state.wallpaper.dailyRefresh);
this.watch(
'imagesByCollectionId_', state => state.wallpaper.backdrop.images);
this.watch(
'photosByAlbumId_',
state => state.wallpaper.googlePhotos.photosByAlbumId);
Expand Down Expand Up @@ -266,10 +273,30 @@ export class WallpaperSelected extends WithPersonalizationStore {
path === Paths.GOOGLE_PHOTOS_COLLECTION && !googlePhotosAlbumId)));
}

private computeShowDescriptionButton_(image: CurrentWallpaper|null) {
private computeShowDescriptionButton_(
image: CurrentWallpaper|null, path: string, collectionId: string,
imagesByCollectionId:
Record<WallpaperCollection['id'], WallpaperImage[]|null>) {
// Only show the description dialog if title and content exist.
return isPersonalizationJellyEnabled() && image?.descriptionContent &&
image?.descriptionTitle;
if (!isPersonalizationJellyEnabled() || !image?.descriptionContent ||
!image?.descriptionTitle) {
return false;
}
switch (path) {
// Hide button when viewing a different collection.
case Paths.COLLECTION_IMAGES:
if (!imagesByCollectionId![collectionId!]) {
return false;
}
const imageIsInCollection = imagesByCollectionId[collectionId]?.find(
(wallpaper) => wallpaper.unitId.toString() === image.key);
return !!imageIsInCollection;
// Hide button when viewing Google Photos.
case Paths.GOOGLE_PHOTOS_COLLECTION:
return false;
default:
return true;
}
}

private computeShowDailyRefreshButton_(
Expand Down
94 changes: 86 additions & 8 deletions chrome/test/data/webui/chromeos/personalization_app/wallpaper_selected_element_test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -662,13 +662,12 @@ suite('WallpaperSelectedTest', function() {
wallpaperSelectedElement = initElement(
WallpaperSelected,
{
path: Paths.GOOGLE_PHOTOS_COLLECTION,
path: Paths.COLLECTIONS,
},
);
await waitAfterNextRender(wallpaperSelectedElement);

assertEquals(
null,
assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionOptionsId),
'no description options present');
Expand All @@ -687,6 +686,87 @@ suite('WallpaperSelectedTest', function() {
'description options present');
});

test('hides description options when viewing Google Photos', async () => {
loadTimeData.overrideValues({isPersonalizationJellyEnabled: true});
personalizationStore.data.wallpaper.currentSelected = {
attribution: ['testing'],
descriptionContent: '',
descriptionTitle: '',
key: 'key',
layout: WallpaperLayout.kStretch,
type: WallpaperType.kDefault,
};
personalizationStore.data.wallpaper.loading.selected = false;

wallpaperSelectedElement = initElement(
WallpaperSelected,
{
path: Paths.GOOGLE_PHOTOS_COLLECTION,
},
);
await waitAfterNextRender(wallpaperSelectedElement);

assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionOptionsId),
'no description options present');

personalizationStore.data.wallpaper.currentSelected = {
...personalizationStore.data.wallpaper.currentSelected,
descriptionContent: 'content',
descriptionTitle: 'title',
};
personalizationStore.notifyObservers();
await waitAfterNextRender(wallpaperSelectedElement);

assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionOptionsId),
'no description options present when viewing Google Photos');
});

test(
'hides description options when viewing a different collection',
async () => {
loadTimeData.overrideValues({isPersonalizationJellyEnabled: true});
personalizationStore.data.wallpaper.currentSelected = {
attribution: ['testing'],
descriptionContent: '',
descriptionTitle: '',
key: 'key',
layout: WallpaperLayout.kStretch,
type: WallpaperType.kDefault,
};
personalizationStore.data.wallpaper.backdrop.images = {};
personalizationStore.data.wallpaper.loading.selected = false;

wallpaperSelectedElement = initElement(
WallpaperSelected,
{
path: Paths.COLLECTION_IMAGES,
},
);
await waitAfterNextRender(wallpaperSelectedElement);

assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionOptionsId),
'no description options present');

personalizationStore.data.wallpaper.currentSelected = {
...personalizationStore.data.wallpaper.currentSelected,
descriptionContent: 'content',
descriptionTitle: 'title',
};
personalizationStore.notifyObservers();
await waitAfterNextRender(wallpaperSelectedElement);

assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionOptionsId),
'no description options present when viewing a different collection');
});

test('clicking description options opens dialog', async () => {
loadTimeData.overrideValues({isPersonalizationJellyEnabled: true});
personalizationStore.data.wallpaper.currentSelected = {
Expand All @@ -702,13 +782,12 @@ suite('WallpaperSelectedTest', function() {
wallpaperSelectedElement = initElement(
WallpaperSelected,
{
path: Paths.GOOGLE_PHOTOS_COLLECTION,
path: Paths.COLLECTIONS,
},
);
await waitAfterNextRender(wallpaperSelectedElement);

assertEquals(
null,
assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionDialogId),
'no description dialog until button clicked');
Expand All @@ -734,8 +813,7 @@ suite('WallpaperSelectedTest', function() {
'dialogCloseButton')!.click();
await waitAfterNextRender(wallpaperSelectedElement);

assertEquals(
null,
assertNull(
wallpaperSelectedElement.shadowRoot!.getElementById(
descriptionDialogId),
'no description dialog after close button clicked');
Expand Down

0 comments on commit 661ebf3

Please sign in to comment.