personalization: fullscreen mode gated by feature
Cut out clamshell entry point for full screen mode.
Should only enter full screen mode if the feature is enabled and device
is in tablet mode when selecting and previewing a wallpaper.
TEST=browser_tests --gtest_filter="PersonalizationAppControllerTest.*"
BUG=none
Cq-Include-Trybots: luci.chrome.try:linux-chromeos-chrome
Change-Id: Ibc8def443cc3cc7ebfa45ef527e99262d7ac4e2c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3223384
Reviewed-by: Yue Li <updowndota@chromium.org>
Reviewed-by: Jason Thai <jasontt@chromium.org>
Commit-Queue: Jeffrey Young <cowmoo@chromium.org>
Cr-Commit-Position: refs/heads/main@{#933751}
diff --git a/ash/webui/personalization_app/resources/common/icons.js b/ash/webui/personalization_app/resources/common/icons.js
index 9c09bad9..7f5da6d1 100644
--- a/ash/webui/personalization_app/resources/common/icons.js
+++ b/ash/webui/personalization_app/resources/common/icons.js
@@ -102,35 +102,6 @@
</defs>
</svg>
</iron-iconset-svg>
- <iron-iconset-svg name="personalization36" size="36">
- <svg>
- <defs>
- <g id="fullscreen">
- <svg width="36" height="36" viewBox="0 0 36 36" fill="none"
- xmlns="http://www.w3.org/2000/svg">
- <g filter="url(#filter0_b)">
- <rect width="36" height="36" rx="18" fill="white"
- fill-opacity="0.8" />
- <path d="M16 11.7715H11V16.7715H13V13.7715H16V11.7715Z" fill="#5F6368" />
- <path d="M13 20.7715H11V25.7715H16V23.7715H13V20.7715Z" fill="#5F6368" />
- <path d="M23 20.7715H25V25.7715H20V23.7715H23V20.7715Z" fill="#5F6368" />
- <path d="M25 16.7715V11.7715H20V13.7715H23V16.7715H25Z" fill="#5F6368" />
- </g>
- <defs>
- <filter id="filter0_b" x="-30" y="-29.2285" width="96" height="96"
- filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
- <feFlood flood-opacity="0" result="BackgroundImageFix" />
- <feGaussianBlur in="BackgroundImage" stdDeviation="15" />
- <feComposite in2="SourceAlpha" operator="in"
- result="effect1_backgroundBlur" />
- <feBlend mode="normal" in="SourceGraphic"
- in2="effect1_backgroundBlur" result="shape" />
- </filter>
- </defs>
- </svg>
- </g>
- </defs>
- </svg>
- </iron-iconset-svg>`;
+`;
document.head.appendChild(template.content);
diff --git a/ash/webui/personalization_app/resources/trusted/personalization_controller.js b/ash/webui/personalization_app/resources/trusted/personalization_controller.js
index d0a5cd9..f166e606 100644
--- a/ash/webui/personalization_app/resources/trusted/personalization_controller.js
+++ b/ash/webui/personalization_app/resources/trusted/personalization_controller.js
@@ -131,18 +131,20 @@
store.dispatch(action.beginSelectImageAction(image));
store.dispatch(action.beginLoadSelectedImageAction());
const {tabletMode} = await provider.isInTabletMode();
- if (tabletMode) {
+ const shouldPreview =
+ tabletMode && loadTimeData.getBoolean('fullScreenPreviewEnabled');
+ if (shouldPreview) {
store.dispatch(action.setFullscreenEnabledAction(/*enabled=*/ true))
}
store.endBatchUpdate();
const {success} = await (() => {
- if (image.assetId) {
+ if (image.hasOwnProperty('assetId')) {
return provider.selectWallpaper(
- image.assetId, /*preview_mode=*/ tabletMode);
+ image.assetId, /*preview_mode=*/ shouldPreview);
} else if (image.path) {
return provider.selectLocalImage(
/** @type {!mojoBase.mojom.FilePath} */ (image),
- /*preview_mode=*/ tabletMode);
+ /*preview_mode=*/ shouldPreview);
} else {
console.warn('Image must be a local image or a WallpaperImage');
return {success: false};
diff --git a/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.html b/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.html
index 0409ffc..d698efc 100644
--- a/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.html
+++ b/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.html
@@ -131,23 +131,6 @@
--iron-icon-height: 20px;
--iron-icon-width: 20px;
}
-
- #fullscreen {
- bottom: 12px;
- border: none;
- border-radius: 18px;
- height: 36px;
- min-width: 36px;
- padding: 0;
- position: absolute;
- right: 12px;
- width: 36px;
- }
-
- #fullscreen iron-icon {
- --iron-icon-height: 36px;
- --iron-icon-width: 36px;
- }
</style>
<header id="container" class$="[[getContainerClass_(isLoading_, showImage_)]]">
<template is="dom-if" if="[[showPlaceholders_(isLoading_, showImage_)]]">
@@ -161,12 +144,6 @@
<template is="dom-if" if="[[showImage_]]">
<div id="imageContainer">
<img src="[[getImageSrc_(image_)]]" aria-hidden="true">
- <template is="dom-if" if="[[showPreviewButton_]]">
- <cr-button id="fullscreen" circle-ripple on-click="onClickFullscreen_"
- aria-label="[[i18n('ariaLabelViewFullScreen')]]">
- <iron-icon icon="personalization36:fullscreen"></iron-icon>
- </cr-button>
- </template>
</div>
<h2 id="textContainer" aria-live="polite" aria-label$="[[getAriaLabel_(image_)]]">
<span id="currentlySet" aria-hidden="true">[[i18n('currentlySet')]]</span>
diff --git a/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.js b/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.js
index 0ac0cb08..5858e072 100644
--- a/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.js
+++ b/ash/webui/personalization_app/resources/trusted/wallpaper_selected_element.js
@@ -566,12 +566,6 @@
getContainerClass_(isLoading, showImage) {
return this.showPlaceholders_(isLoading, showImage) ? 'loading' : '';
}
-
- /** @private */
- onClickFullscreen_() {
- assert(!this.getState().fullscreen);
- this.dispatch(setFullscreenEnabledAction(/*enabled=*/ true));
- }
}
customElements.define(WallpaperSelected.is, WallpaperSelected);
diff --git a/chrome/test/data/webui/chromeos/personalization_app/personalization_app_controller_test.js b/chrome/test/data/webui/chromeos/personalization_app/personalization_app_controller_test.js
index dbab461..65b280a2 100644
--- a/chrome/test/data/webui/chromeos/personalization_app/personalization_app_controller_test.js
+++ b/chrome/test/data/webui/chromeos/personalization_app/personalization_app_controller_test.js
@@ -6,8 +6,8 @@
import 'chrome://resources/mojo/url/mojom/url.mojom-lite.js';
import 'chrome://personalization/trusted/file_path.mojom-lite.js';
import 'chrome://personalization/trusted/personalization_app.mojom-lite.js';
-import {fetchLocalData} from 'chrome://personalization/trusted/personalization_controller.js';
-import {assertDeepEquals, assertEquals} from '../../chai_assert.js';
+import {fetchLocalData, initializeBackdropData, selectWallpaper} from 'chrome://personalization/trusted/personalization_controller.js';
+import {assertDeepEquals, assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
import {TestWallpaperProvider} from './test_mojo_interface_provider.js';
import {TestPersonalizationStore} from './test_personalization_store.js';
@@ -322,3 +322,62 @@
assertDeepEquals({}, personalizationStore.data.loading.local.data);
});
});
+
+suite('full screen mode', () => {
+ const fullscreenPreviewFeature = 'fullScreenPreviewEnabled';
+
+ let wallpaperProvider;
+ let personalizationStore;
+
+ setup(() => {
+ wallpaperProvider = new TestWallpaperProvider();
+ personalizationStore = new TestPersonalizationStore({});
+ personalizationStore.setReducersEnabled(true);
+ loadTimeData.data = {[fullscreenPreviewFeature]: true};
+ });
+
+ test(
+ 'enters full screen mode when in tablet and preview flag is set',
+ async () => {
+ await initializeBackdropData(wallpaperProvider, personalizationStore);
+
+ assertFalse(personalizationStore.data.fullscreen);
+
+ loadTimeData.overrideValues({[fullscreenPreviewFeature]: false});
+ wallpaperProvider.isInTabletModeResponse = true;
+
+ {
+ const selectWallpaperPromise = selectWallpaper(
+ wallpaperProvider.images[0], wallpaperProvider,
+ personalizationStore);
+ const [assetId, previewMode] =
+ await wallpaperProvider.whenCalled('selectWallpaper');
+ assertFalse(previewMode);
+ assertEquals(wallpaperProvider.images[0].assetId, assetId);
+
+ await selectWallpaperPromise;
+
+ assertFalse(personalizationStore.data.fullscreen);
+ }
+
+ wallpaperProvider.reset();
+
+ {
+ // Now with flag turned on.
+ loadTimeData.overrideValues({[fullscreenPreviewFeature]: true});
+
+ const selectWallpaperPromise = selectWallpaper(
+ wallpaperProvider.images[0], wallpaperProvider,
+ personalizationStore);
+
+ const [assetId, previewMode] =
+ await wallpaperProvider.whenCalled('selectWallpaper');
+ assertTrue(previewMode);
+ assertEquals(wallpaperProvider.images[0].assetId, assetId);
+
+ await selectWallpaperPromise;
+
+ assertTrue(personalizationStore.data.fullscreen);
+ }
+ });
+});
diff --git a/chrome/test/data/webui/chromeos/personalization_app/test_mojo_interface_provider.js b/chrome/test/data/webui/chromeos/personalization_app/test_mojo_interface_provider.js
index ee75634..68ea844 100644
--- a/chrome/test/data/webui/chromeos/personalization_app/test_mojo_interface_provider.js
+++ b/chrome/test/data/webui/chromeos/personalization_app/test_mojo_interface_provider.js
@@ -158,14 +158,14 @@
}
/** @override */
- selectWallpaper(assetId) {
- this.methodCalled('selectWallpaper', assetId);
+ selectWallpaper(assetId, previewMode) {
+ this.methodCalled('selectWallpaper', assetId, previewMode);
return Promise.resolve({success: this.selectWallpaperResponse});
}
/** @override */
- selectLocalImage(id) {
- this.methodCalled('selectLocalImage', id);
+ selectLocalImage(id, previewMode) {
+ this.methodCalled('selectLocalImage', id, previewMode);
return Promise.resolve({success: this.selectLocalImageResponse});
}
