[memories] Memories landing page (part 3)

Related tab groups and bookmarks section of the memory card screenshot/BC46BmffK375p7i Bug: 1180970 Change-Id: I35b29fe8578854bed389a9120bb76212afc63090 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2745786 Commit-Queue: Moe Ahmadi <[email protected]> Reviewed-by: dpapad <[email protected]> Reviewed-by: Rebekah Potter <[email protected]> Reviewed-by: Tommy Li <[email protected]> Cr-Commit-Position: refs/heads/master@{#865970}
ybhwang · Mar 24, 2021 · 1589a1c · 1589a1c
1 parent 8acd3cb
commit 1589a1c
Show file tree

Hide file tree

Showing 21 changed files with 326 additions and 49 deletions.
diff --git a/chrome/browser/resources/local_ntp/icons.grdp b/chrome/browser/resources/local_ntp/icons.grdp
@@ -1,7 +1,5 @@
 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
-  <include name="IDR_LOCAL_NTP_ICONS_BOOKMARK"
-           file="resources/local_ntp/icons/bookmark.svg" type="BINDATA" />
    <include name="IDR_LOCAL_NTP_ICONS_CALCULATOR"
            file="resources/local_ntp/icons/calculator.svg" type="BINDATA" />
    <include name="IDR_LOCAL_NTP_ICONS_CLOCK"

diff --git a/chrome/browser/resources/local_ntp/icons/bookmark.svg b/chrome/browser/resources/local_ntp/icons/bookmark.svg
diff --git a/chrome/browser/resources/memories/BUILD.gn b/chrome/browser/resources/memories/BUILD.gn
@@ -41,9 +41,22 @@ js_library("memories") {
 
 js_library("memory_card") {
   deps = [
+    ":memory_tile",
+    ":page_favicon",
+    ":page_thumbnail",
     ":top_visit",
+    ":utils",
     "//components/memories/core:mojo_bindings_webui_js",
+    "//mojo/public/mojom/base:base_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//url/mojom:url_mojom_origin_webui_js",
+  ]
+}
+
+js_library("memory_tile") {
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//url/mojom:url_mojom_origin_webui_js",
   ]
 }
 
@@ -76,7 +89,10 @@ js_library("top_visit") {
 }
 
 js_library("utils") {
-  deps = [ "//mojo/public/mojom/base:base_webui_js" ]
+  deps = [
+    "//mojo/public/mojom/base:base_webui_js",
+    "//url/mojom:url_mojom_origin_webui_js",
+  ]
 }
 
 js_library("visit_row") {
@@ -94,6 +110,7 @@ html_to_js("web_components_local") {
   js_files = [
     "app.js",
     "memory_card.js",
+    "memory_tile.js",
     "page_favicon.js",
     "page_thumbnail.js",
     "shared_vars.js",
@@ -131,6 +148,7 @@ preprocess_if_expr("preprocess_gen") {
   in_files = [
     "app.js",
     "memory_card.js",
+    "memory_tile.js",
     "page_favicon.js",
     "page_thumbnail.js",
     "shared_vars.js",

diff --git a/chrome/browser/resources/memories/app.html b/chrome/browser/resources/memories/app.html
@@ -3,7 +3,7 @@
     color: var(--cr-primary-text-color);
   }
 
-  .container {
+  #container {
     display: flex;
     flex-direction: column;
     margin: 40px auto 10px;
@@ -12,42 +12,41 @@
     width: var(--memory-card-width);
   }
 
-  .header {
+  #header {
     align-items: center;
     display: flex;
   }
 
   page-thumbnail {
-    --thumbnail-border-radius: 16px;
     --thumbnail-max-height: 100px;
     --thumbnail-max-width: 100px;
     margin-inline-end: 25px;
   }
 
-  .title {
+  #title {
     display: flex;
     flex-direction: column;
   }
 
-  .title .description {
+  #title #description {
     color: var(--cr-secondary-text-color);
     font-size: 12px;
     line-height: 20px;
   }
 
-  .title .text {
+  #title #text {
     font-size: 36px;
     line-height: 42px;
   }
 </style>
-<div class="container">
-  <div class="header" hidden="[[!result_.title]]">
+<div id="container">
+  <div id="header" hidden="[[!result_.title]]">
     <page-thumbnail page="[[createPageWithThumbnail_(result_.thumbnailUrl)]]"
         hidden="[[!result_.thumbnailUrl]]">
     </page-thumbnail>
-    <div class="title">
-      <span class="description">$i18n{memoryTitleDescription}</span>
-      <span class="text">[[decodeMojoString16_(result_.title)]]</span>
+    <div id="title">
+      <span id="description">$i18n{memoryTitleDescription}</span>
+      <span id="text">[[decodeMojoString16_(result_.title)]]</span>
     </div>
   </div>
   <template is="dom-repeat" items="[[result_.memories]]" as="memory">

diff --git a/chrome/browser/resources/memories/memory_card.html b/chrome/browser/resources/memories/memory_card.html
@@ -1,22 +1,116 @@
 <style include="cr-shared-style">
   :host {
+    --memory-card-padding: 24px;
     background-color: #fff;
     border: 1px solid var(--google-grey-refresh-300);
     border-radius: 16px;
     box-sizing: border-box;
     margin: 24px 0;
-    padding: 24px;
+    padding: var(--memory-card-padding);
     width: var(--memory-card-width);
   }
 
+  .section:not(:last-of-type) {
+    margin-bottom: 16px;
+  }
+
   .section .header {
     font-size: 14px;
     line-height: 20px;
   }
+
+  #tab-groups-and-bookmarks {
+    display: flex;
+  }
+
+  memory-tile {
+    --tile-width: 160px;
+    margin-top: 10px;
+    width: var(--tile-width);
+  }
+
+  memory-tile:not(:last-of-type) {
+    /* There can be a maximum of 4 tiles in a row. Calculate the space between
+       them accordingly. */
+    margin-inline-end: calc((var(--memory-card-width) -
+                             2 * var(--memory-card-padding) -
+                             4 * var(--tile-width)) / 3);
+  }
+
+  .tab-group .thumbnails {
+    --thumbnail-margin: 4px;
+    --thumbnail-size: 60px;
+    background-color: var(--image-background-color);
+    border-radius: var(--image-border-radius);
+    box-sizing: border-box;
+    display: flex;
+    flex-wrap: wrap;
+    height: var(--tile-width);
+    /* There can be a maximum of 4 thumbnails in a 2x2 grid. Calculate the
+       padding accordingly. */
+    padding: calc((var(--tile-width) -
+                   2 * (var(--thumbnail-size) + 2 * var(--thumbnail-margin))
+                   ) / 2);
+    width: var(--tile-width);
+  }
+
+  .tab-group page-thumbnail {
+    --thumbnail-max-height: var(--thumbnail-size);
+    --thumbnail-max-width: var(--thumbnail-size);
+    margin: var(--thumbnail-margin);
+  }
+
+  .bookmark page-thumbnail {
+    --thumbnail-max-height: var(--tile-width);
+    --thumbnail-max-width: var(--tile-width);
+  }
+
+  .bookmark [slot='secondaryCaption'] {
+    align-items: center;
+    display: flex;
+  }
+
+  .bookmark page-favicon {
+    flex-shrink: 0;
+    height: 16px;
+    width: 16px;
+  }
+
+  .bookmark .hostname {
+    margin-inline-start: 8px;
+  }
 </style>
+<div class="section" hidden="[[!hasRelatedTabGroupsOrBookmarks_]]">
+  <div class="header">$i18n{relatedTabGroupsAndBookmarksSectionHeader}</div>
+  <div id="tab-groups-and-bookmarks">
+    <template is="dom-repeat"
+        items="[[arrayItems_(memory.relatedTabGroups, 2)]]" as="tabGroup">
+      <memory-tile class="tab-group">
+        <div slot="main" class="thumbnails">
+          <template is="dom-repeat" items="[[arrayItems_(tabGroup.pages, 4)]]">
+            <page-thumbnail is-clickable page="[[item]]"></page-thumbnail>
+          </template>
+        </div>
+        <div slot="primaryCaption">[[decodeMojoString16_(tabGroup.title)]]</div>
+        <div slot="secondaryCaption">$i18n{tabGroupTileCaption}</div>
+      </memory-tile>
+    </template>
+    <template is="dom-repeat" items="[[arrayItems_(memory.bookmarks, 2)]]">
+      <memory-tile url="[[item.url]]" class="bookmark">
+        <page-thumbnail slot="main" is-bookmark page="[[item]]" tabindex="-1">
+        </page-thumbnail>
+        <div slot="primaryCaption">[[decodeMojoString16_(item.title)]]</div>
+        <div slot="secondaryCaption">
+          <page-favicon url="[[item.url]]"></page-favicon>
+          <span class="hostname">[[getHostnameFromUrl_(item.url)]]</span>
+        </div>
+      </memory-tile>
+    </template>
+  </div>
+</div>
 <div class="section" hidden="[[!memory.topVisits.length]]">
   <div class="header">$i18n{topVisitsSectionHeader}</div>
-  <div class="top-visits">
+  <div id="top-visits">
     <template is="dom-repeat" items="[[memory.topVisits]]">
       <top-visit visit="[[item]]"></top-visit>
     </template>

diff --git a/chrome/browser/resources/memories/memory_card.js b/chrome/browser/resources/memories/memory_card.js
@@ -2,13 +2,20 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './memory_tile.js';
+import './page_favicon.js';
+import './page_thumbnail.js';
 import './shared_vars.js';
 import './top_visit.js';
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
 
 import {Memory} from '/components/memories/core/memories.mojom-webui.js';
+import {String16} from 'chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-webui.js';
+import {Url} from 'chrome://resources/mojo/url/mojom/url.mojom-webui.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {decodeMojoString16, getHostnameFromUrl} from './utils.js';
+
 /**
  * @fileoverview This file provides a custom element displaying a Memory.
  */
@@ -33,8 +40,60 @@ class MemoryCardElement extends PolymerElement {
        * @type {!Memory}
        */
       memory: Object,
+
+      //========================================================================
+      // Private properties
+      //========================================================================
+
+      /**
+       * Whether the Memory has related tab groups or bookmarks.
+       * @private {boolean}
+       */
+      hasRelatedTabGroupsOrBookmarks_: {
+        type: Boolean,
+        computed: 'computeHasRelatedTabGroupsOrBookmarks_(memory)'
+      },
     };
   }
+
+  //============================================================================
+  // Helper methods
+  //============================================================================
+
+  /** @private */
+  computeHasRelatedTabGroupsOrBookmarks_() {
+    return this.memory.relatedTabGroups.length > 0 ||
+        this.memory.bookmarks.length > 0;
+  }
+
+  /**
+   * Converts a Mojo String16 to a JS string.
+   * @param {String16} str
+   * @return {string}
+   * @private
+   */
+  decodeMojoString16_(str) {
+    return decodeMojoString16(str);
+  }
+
+  /**
+   * @param {!Url} url
+   * @return {string} The domain name of the URL without the leading 'www.'.
+   * @private
+   */
+  getHostnameFromUrl_(url) {
+    return getHostnameFromUrl(url);
+  }
+
+  /**
+   * @param {!Array} array
+   * @param {number} num
+   * @return {!Array} Shallow copy of the first |num| items of the input array.
+   * @private
+   */
+  arrayItems_(array, num) {
+    return array.slice(0, num);
+  }
 }
 
 customElements.define(MemoryCardElement.is, MemoryCardElement);
diff --git a/chrome/browser/resources/memories/memory_tile.html b/chrome/browser/resources/memories/memory_tile.html
@@ -0,0 +1,35 @@
+<style>
+  :host {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  [name$='Caption'] {
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--caption-max-lines);
+    display: -webkit-box;
+    line-height: 20px;
+    overflow: hidden;
+  }
+
+  [name='primaryCaption'] {
+    --caption-max-lines: 2;
+    font-size: 14px;
+    margin-top: 12px;
+  }
+
+  [name='secondaryCaption'] {
+    --caption-max-lines: 1;
+    color: var(--cr-secondary-text-color);
+  }
+</style>
+<a href$="[[url.url]]">
+  <slot name="main"></slot>
+  <slot name="primaryCaption"></slot>
+  <slot name="secondaryCaption"></slot>
+</a>
diff --git a/chrome/browser/resources/memories/memory_tile.js b/chrome/browser/resources/memories/memory_tile.js
@@ -0,0 +1,39 @@
+// 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.
+
+import './shared_vars.js';
+
+import {Url} from 'chrome://resources/mojo/url/mojom/url.mojom-webui.js';
+import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+/**
+ * @fileoverview This file provides a custom element displaying a tile with
+ * slots for a main section at the top and primary and secondary captions below.
+ */
+
+class MemoryTileElement extends PolymerElement {
+  static get is() {
+    return 'memory-tile';
+  }
+
+  static get template() {
+    return html`{__html_template__}`;
+  }
+
+  static get properties() {
+    return {
+      //========================================================================
+      // Public properties
+      //========================================================================
+
+      /**
+       * Optional URL to navigate to when the tile is clicked.
+       * @type {Url}
+       */
+      url: Object,
+    };
+  }
+}
+
+customElements.define(MemoryTileElement.is, MemoryTileElement);