personalization: Stub in grid for Google Photos albums.

Note that this CL also introduces <personalization-grid-item-element>
as a generic element to perform initial styling of a grid item. It
should be able to be used in Google Photos as well as in other
personalization app grids.

Bug: b:205315328
Change-Id: Ie2937d0379cd7847da6b85039fa875ac162875f8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3261980
Reviewed-by: Jeffrey Young <cowmoo@chromium.org>
Commit-Queue: David Black <dmblack@google.com>
Cr-Commit-Position: refs/heads/main@{#939494}

ash/webui/personalization_app/resources/trusted/BUILD.gn

@@ -9,6 +9,7 @@ import("//tools/polymer/html_to_js.gni")
 polymer_element_files = [
   "google_photos_element.js",
   "local_images_element.js",
+  "personalization_grid_item_element.js",
   "personalization_router_element.js",
   "personalization_toast_element.js",
   "wallpaper_breadcrumb_element.js",
@@ -84,6 +85,7 @@ js_library("personalization_app") {
   deps = [
     ":google_photos_element",
     ":local_images_element",
+    ":personalization_grid_item_element",
     ":personalization_message_handler",
     ":personalization_reducers",
     ":personalization_router_element",
@@ -107,6 +109,13 @@ js_library("personalization_controller") {
   ]
 }
 
+js_library("personalization_grid_item_element") {
+  deps = [
+    "../common:styles",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+  ]
+}
+
 js_library("personalization_message_handler") {
   deps = [
     ":personalization_controller",
@@ -231,6 +240,7 @@ js_type_check("closure_compile") {
     ":mojo_interface_provider",
     ":personalization_actions",
     ":personalization_app",
+    ":personalization_grid_item_element",
     ":personalization_reducers",
     ":personalization_router_element",
     ":personalization_store",

ash/webui/personalization_app/resources/trusted/google_photos_element.html

@@ -13,15 +13,15 @@
 
   .tab-strip {
     flex: 0 0 auto;
-    margin-bottom: var(--personalization-app-grid-item-spacing);
+    margin-bottom: calc(var(--personalization-app-grid-item-spacing) / 2);
     width: 100%;
   }
 
-  .tab-strip > cr-button {
+  .tab-strip cr-button {
     border: 0;
   }
 
-  .tab-strip > cr-button[aria-pressed='false'] {
+  .tab-strip cr-button[aria-pressed='false'] {
     color: var(--cros-text-color-secondary);
   }
 
@@ -33,65 +33,33 @@
     width: 100%;
   }
 
-  #albumsContent {
-    /** TODO(dmblack): Remove when implementing UI. */
-    background-color: red;
-  }
-
-  #photosContent > iron-list {
+  #albumsContent iron-list,
+  #photosContent iron-list {
     height: 100%;
     width: 100%;
   }
 
-  #photosContent > iron-list > .row {
+  .album {
+    background: rgba(0, 0, 0, 0.12);
+  }
+
+  .row {
+    align-items: center;
     display: flex;
     flex-direction: row;
+    justify-content: center;
     width: 100%;
   }
 
-  #photosContent > iron-list > .row:focus-visible {
+  .row:focus-visible {
     outline: 0;
   }
 
-  #photosContent > iron-list > .row:not([rowindex='0']) {
-    padding-top: var(--personalization-app-grid-item-spacing);
-  }
-
-  #photosContent > iron-list > .row > .photo {
+  .photo {
     align-items: center;
     background: rgba(0, 0, 0, 0.12);
-    border-radius: var(--personalization-app-grid-item-border-radius);
     display: flex;
-    flex: 1 1 auto;
-    height: var(--personalization-app-grid-item-height);
     justify-content: center;
-    position: relative;
-    width: 100%;
-  }
-
-  #photosContent > iron-list > .row > .photo:focus-visible {
-    outline: 0;
-  }
-
-  #photosContent > iron-list > .row > .photo:focus-visible::before {
-    border: 2px solid var(--cros-focus-ring-color);
-    border-radius: var(--personalization-app-grid-item-border-radius);
-    box-sizing: border-box;
-    content: '';
-    display: block;
-    height: 100%;
-    left: 0;
-    position: absolute;
-    top: 0;
-    width: 100%;
-  }
-
-  #photosContent > iron-list > .row > .photo:not(:first-of-type) {
-    margin-inline-start: calc(var(--personalization-app-grid-item-spacing) / 2);
-  }
-
-  #photosContent > iron-list > .row > .photo:not(:last-of-type) {
-    margin-inline-end: calc(var(--personalization-app-grid-item-spacing) / 2);
   }
 </style>
 <main id="main" aria-label$="[[i18n('googlePhotosLabel')]]" tabindex="-1">
@@ -114,15 +82,25 @@
           on-focus="onPhotosGridRowFocused_"
           on-keydown="onPhotosGridRowKeyDown_">
           <template is="dom-repeat" items="[[row]]" as="photo">
-            <div class="photo" colindex$="[[index]]" tabindex="-1">
-              [[photo]]
-            </div>
+            <personalization-grid-item>
+              <div class="photo" colindex$="[[index]]" tabindex="-1">
+                [[photo]]
+              </div>
+            </personalization-grid-item>
           </template>
         </div>
       </template>
     </iron-list>
   </div>
   <template is="dom-if" if="[[!isAlbumsEmpty_(albums_)]]">
-    <div id="albumsContent" hidden$="[[!isAlbumsTabSelected_(tab_)]]"></div>
+    <div id="albumsContent" hidden$="[[!isAlbumsTabSelected_(tab_)]]">
+      <iron-list id="albumsGrid" items="[[albums_]]" as="album" grid>
+        <template>
+          <personalization-grid-item>
+            <div class="album"></div>
+          </personalization-grid-item>
+        </template>
+      </iron-list>
+    </div>
   </template>
 </main>

ash/webui/personalization_app/resources/trusted/google_photos_element.js

@@ -171,14 +171,10 @@ export class GooglePhotos extends WithPersonalizationStore {
     document.title = this.i18n('googlePhotosLabel');
     this.shadowRoot.getElementById('main').focus();
 
-    // When iron-list items change while their parent element is hidden, the
-    // iron-list will render incorrectly. Force another layout to happen by
-    // firing an iron-resize event when this element becomes visible.
-    afterNextRender(this, () => {
-      [...this.shadowRoot.querySelectorAll('iron-list')].forEach(ironList => {
-        ironList.fire('iron-resize');
-      });
-    });
+    // When grid items change while their parent element is hidden, the grid
+    // will render incorrectly. Force relayout by invalidating the grid for the
+    // currently selected tab when this element becomes visible.
+    afterNextRender(this, () => this.invalidateGrid_());
   }
 
   /**
@@ -290,12 +286,41 @@ export class GooglePhotos extends WithPersonalizationStore {
    * @private
    */
   onTabSelected_(e) {
+    const previousTab = this.tab_;
+
     switch (e.currentTarget.id) {
       case 'albumsTab':
         this.tab_ = Tab.Albums;
-        return;
+        break;
       case 'photosTab':
         this.tab_ = Tab.Photos;
+        break;
+      default:
+        assertNotReached();
+        break;
+    }
+
+    // When grid items change while their parent element is hidden, the grid
+    // will render incorrectly. Force relayout by invalidating the grid for the
+    // currently selected tab when it becomes visible.
+    if (this.tab_ !== previousTab) {
+      afterNextRender(this, () => this.invalidateGrid_());
+    }
+  }
+
+  /**
+   * Invalidates the grid for the currently selected tab to force relayout.
+   * @private
+   */
+  invalidateGrid_() {
+    switch (this.tab_) {
+      case Tab.Albums:
+        // Firing 'iron-resize' event forces relayout of 'iron-list'.
+        this.shadowRoot.querySelector('#albumsGrid').fire('iron-resize');
+        return;
+      case Tab.Photos:
+        // Firing 'iron-resize' event forces relayout of 'iron-list'.
+        this.shadowRoot.querySelector('#photosGrid').fire('iron-resize');
         return;
       default:
         assertNotReached();

ash/webui/personalization_app/resources/trusted/personalization_app.js

@@ -11,6 +11,7 @@
 import '/strings.m.js';
 import './google_photos_element.js';
 import './local_images_element.js';
+import './personalization_grid_item_element.js';
 import './personalization_router_element.js';
 import './personalization_test_api.js';
 import './personalization_toast_element.js';

ash/webui/personalization_app/resources/trusted/personalization_grid_item_element.html

@@ -0,0 +1,38 @@
+<style include="common-style">
+  :host {
+    box-sizing: border-box;
+    display: block;
+    height: calc(
+      var(--personalization-app-grid-item-height) +
+      var(--personalization-app-grid-item-spacing));
+    overflow: hidden;
+    padding: calc(var(--personalization-app-grid-item-spacing) / 2);
+    /* Subtract 0.34px to fix subpixel rounding issues with iron-list. This
+     * ensures all grid items in a row add up to at least 1px smaller than the
+     * parent width. */
+    width: calc(100% / 3 - 0.34px);
+  }
+
+  @media(min-width: 720px) {
+    :host {
+      /* Subtract 0.25px to fix subpixel rounding issues with iron-list. This
+       * ensures all grid items in a row add up to at least 1px smaller than the
+       * parent width. */
+      width: calc(100% / 4 - 0.25px) !important;
+    }
+  }
+
+  :host > ::slotted(*) {
+    border-radius: var(--personalization-app-grid-item-border-radius);
+    box-sizing: border-box;
+    display: block;
+    height: 100%;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  :host > ::slotted(*:focus-within) {
+    outline: 2px solid var(--cros-focus-ring-color);
+  }
+</style>
+<slot></slot>

ash/webui/personalization_app/resources/trusted/personalization_grid_item_element.js

@@ -0,0 +1,24 @@
+// Copyright 2021 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+/**
+ * @fileoverview Polymer element that displays a single grid item.
+ */
+
+import '../common/styles.js';
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/** @polymer */
+export class PersonalizationGridItemElement extends PolymerElement {
+  static get is() {
+    return 'personalization-grid-item';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+}
+
+customElements.define(
+    PersonalizationGridItemElement.is, PersonalizationGridItemElement);