personalization: refactor PUB main page elements

Clean up wallpaper_preview and ambient_preview_large elements so that the HTML files are easier to follow. BUG=None TEST=browser_tests --gtest_filter="*PersonalizationApp*" Change-Id: I3533d87909b70bbddc6d883f89c335ef1227db54 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4548360 Commit-Queue: Jerry Liu <pzliu@google.com> Reviewed-by: Jeffrey Young <cowmoo@google.com> Cr-Commit-Position: refs/heads/main@{#1146741}
chromium · May 19, 2023 · e7ad7ca · e7ad7ca
1 parent d18bc52
commit e7ad7ca
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 57 deletions.
diff --git a/ash/webui/personalization_app/resources/js/ambient/ambient_preview_large_element.html b/ash/webui/personalization_app/resources/js/ambient/ambient_preview_large_element.html
@@ -56,13 +56,13 @@
     margin-top: 12px;
   }
 
-  #ambientSubpageLink {
+  #ambientLabel > cr-icon-button {
     --cr-icon-button-size: 44px;
     /* Make the arrow align with the thumbnail image */
     margin-inline-end: -18px;
   }
 
-  #ambientLabel>h2 {
+  #ambientLabel > h2 {
     color: var(--cros-text-color-primary);
     font: var(--personalization-app-label-font);
     margin: 12px 0;
@@ -320,7 +320,6 @@
       <div id="ambientLabel" class="enterprise">
         <h2>$i18n{screensaverLabel}</h2>
         <cr-icon-button disabled
-            id="ambientSubpageLink"
             iron-icon="cr:chevron-right">
         </cr-icon-button>
       </div>
@@ -350,7 +349,6 @@ <h2 class="clickable" on-click="onClickAmbientSubpageLink_">
         </h2>
         <cr-icon-button aria-label="$i18n{ariaLabelChangeScreensaver}"
             class="tast-open-subpage"
-            id="ambientSubpageLink"
             iron-icon="cr:chevron-right"
             on-click="onClickAmbientSubpageLink_">
         </cr-icon-button>
@@ -435,7 +433,6 @@ <h2 on-click="onClickAmbientSubpageLink_" class="clickable">
       </h2>
       <cr-icon-button aria-label="$i18n{ariaLabelChangeScreensaver}"
           class="tast-open-subpage"
-          id="ambientSubpageLink"
           iron-icon="cr:chevron-right"
           on-click="onClickAmbientSubpageLink_">
       </cr-icon-button>

diff --git a/ash/webui/personalization_app/resources/js/wallpaper/wallpaper_preview_element.html b/ash/webui/personalization_app/resources/js/wallpaper/wallpaper_preview_element.html
@@ -1,15 +1,4 @@
 <style include="common cros-button-style">
-  #wallpaperLabel {
-    align-items: center;
-    background: none;
-    border: none;
-    display: flex;
-    flex-flow: row nowrap;
-    grid-area: label;
-    justify-content: space-between;
-    margin-top: 12px;
-  }
-
   #container {
     display: grid;
     grid-template-areas:
@@ -23,6 +12,23 @@
     height: 100%;
   }
 
+  #wallpaperLabel {
+    align-items: center;
+    background: none;
+    border: none;
+    display: flex;
+    flex-flow: row nowrap;
+    grid-area: label;
+    justify-content: space-between;
+    margin-top: 12px;
+  }
+
+  #wallpaperLabel > cr-icon-button {
+    --cr-icon-button-size: 44px;
+    /* Make the arrow align with the thumbnail image */
+    margin-inline-end: -18px;
+  }
+
   #wallpaperLabel > h2 {
     color: var(--cros-text-color-primary);
     display: inline-block;
@@ -34,12 +40,6 @@
     --iron-icon-fill-color: var(--cros-icon-color-secondary);
   }
 
-  #wallpaperButton {
-    --cr-icon-button-size: 44px;
-    /* Make the arrow align with the thumbnail image */
-    margin-inline-end: -18px;
-  }
-
   #imageContainer,
   #imagePlaceholder {
     background-color: var(--personalization-app-grid-item-background-color);
@@ -86,41 +86,37 @@
   }
 </style>
 <div class="preview-container" id="container">
-  <div id="wallpaperLabel">
-    <template is="dom-if" if="[[showPlaceholders_(imageLoading_, image_)]]">
+  <template is="dom-if" if="[[loading_]]">
+    <div id="wallpaperLabel">
       <h2>$i18n{wallpaperLabel}</h2>
-    </template>
-    <template is="dom-if" if="[[!showPlaceholders_(imageLoading_, image_)]]">
-      <template is="dom-if" if="[[!isPolicyControlled_(image_)]]">
+    </div>
+    <div id="imagePlaceholder" class="photo-images-container placeholder"></div>
+  </template>
+  <template is="dom-if" if="[[!loading_]]">
+    <template is="dom-if" if="[[!policyControlled_]]">
+      <div id="wallpaperLabel">
         <h2 on-click="onClickWallpaper_" class="clickable">
           $i18n{wallpaperLabel}
         </h2>
-    <cr-icon-button id="wallpaperButton" iron-icon="cr:chevron-right"
-        role="button" on-click="onClickWallpaper_"
-        class="tast-open-subpage"
-        aria-label="$i18n{ariaLabelChangeWallpaper}">
-    </cr-icon-button>
-      </template>
-      <template is="dom-if" if="[[isPolicyControlled_(image_)]]">
-        <p>$i18n{wallpaperLabel}</p>
-        <iron-icon icon="personalization:managed" title="$i18n{managedSetting}">
-        </iron-icon>
-      </template>
-    </template>
-  </div>
-  <template is="dom-if" if="[[showPlaceholders_(imageLoading_, image_)]]">
-    <div id="imagePlaceholder" class="photo-images-container placeholder"></div>
-  </template>
-  <template is="dom-if" if="[[!showPlaceholders_(imageLoading_, image_)]]">
-    <template is="dom-if" if="[[!isPolicyControlled_(image_)]]">
+        <cr-icon-button iron-icon="cr:chevron-right"
+            role="button" on-click="onClickWallpaper_"
+            class="tast-open-subpage"
+            aria-label="$i18n{ariaLabelChangeWallpaper}">
+        </cr-icon-button>
+      </div>
       <div id="imageContainer" class="photo-images-container clickable"
           on-click="onClickWallpaper_" on-keypress="onClickWallpaper_">
         <div class="photo-images-border"></div>
         <img alt$="[[getImageAltDescription_(image_)]]"
             src$="[[getWallpaperSrc_(image_)]]">
       </div>
     </template>
-    <template is="dom-if" if="[[isPolicyControlled_(image_)]]">
+    <template is="dom-if" if="[[policyControlled_]]">
+      <div id="wallpaperLabel">
+        <p>$i18n{wallpaperLabel}</p>
+        <iron-icon icon="personalization:managed" title="$i18n{managedSetting}">
+        </iron-icon>
+      </div>
       <div id="imageContainer" class="photo-images-container">
         <div class="photo-images-border"></div>
         <img alt$="[[getImageAltDescription_(image_)]]"

diff --git a/ash/webui/personalization_app/resources/js/wallpaper/wallpaper_preview_element.ts b/ash/webui/personalization_app/resources/js/wallpaper/wallpaper_preview_element.ts
@@ -41,11 +41,21 @@ export class WallpaperPreview extends WithPersonalizationStore {
         value: null,
       },
       imageLoading_: Boolean,
+      loading_: {
+        type: Boolean,
+        computed: 'computeLoading_(imageLoading_, image_)',
+      },
+      policyControlled_: {
+        type: Boolean,
+        computed: 'isPolicyControlled_(image_)',
+      },
     };
   }
 
   private image_: CurrentWallpaper|null;
   private imageLoading_: boolean;
+  private loading_: boolean;
+  private policyControlled_: boolean;
 
   override connectedCallback() {
     super.connectedCallback();
@@ -91,16 +101,12 @@ export class WallpaperPreview extends WithPersonalizationStore {
         this.i18n('unknownImageAttribution')}`;
   }
 
-  /**
-   * Returns visible state of loading placeholder.
-   */
-  private showPlaceholders_(
-      imageLoading: boolean, image: CurrentWallpaper|null): boolean {
-    return imageLoading || !image;
+  private computeLoading_(): boolean {
+    return this.imageLoading_ || !this.image_;
   }
 
-  private isPolicyControlled_(image: CurrentWallpaper|null): boolean {
-    return !!image && image.type === WallpaperType.kPolicy;
+  private isPolicyControlled_(): boolean {
+    return !!this.image_ && this.image_.type === WallpaperType.kPolicy;
   }
 }
 

diff --git a/chrome/test/data/webui/chromeos/personalization_app/personalization_app_browsertest.js b/chrome/test/data/webui/chromeos/personalization_app/personalization_app_browsertest.js
@@ -225,7 +225,7 @@ TEST_F(
               getRouter()
                   .shadowRoot.querySelector('personalization-main')
                   .shadowRoot.querySelector('ambient-preview-large')
-                  .shadowRoot.querySelector('#ambientSubpageLink');
+                  .shadowRoot.querySelector('cr-icon-button');
           assertTrue(!!ambientSubpageLink);
         });
       });
@@ -262,7 +262,7 @@ TEST_F(
           const ambientSubpageLink =
               getRouter()
                   .shadowRoot.querySelector('personalization-main')
-                  .shadowRoot.getElementById('ambientSubpageLink');
+                  .shadowRoot.querySelector('cr-icon-button');
           assertFalse(!!ambientSubpageLink);
         });
       });
@@ -286,7 +286,7 @@ TEST_F(PersonalizationAppWallpaperSubpageBrowserTest.name, 'All', async () => {
     getRouter()
         .shadowRoot.querySelector('personalization-main')
         .shadowRoot.querySelector('wallpaper-preview')
-        .shadowRoot.getElementById('wallpaperButton')
+        .shadowRoot.querySelector('cr-icon-button')
         .click();
     assertEquals(
         ROOT_PAGE + 'wallpaper', window.location.href,