Read later: Add empty state behavior.

Hide subheaders when there are no corresponding entries. Add helpful text when there are no unread or read entries. See screenshot of empty state in the bug.

Bug: 1158847
Change-Id: I0c52e09e6277a785bed20b2994c6e6f8560518c3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2593476
Commit-Queue: Caroline Rising <corising@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837800}

chrome/app/generated_resources.grd

@@ -5728,6 +5728,12 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_READ_LATER_MENU_TOOLTIP_MARK_AS_UNREAD" desc="Tooltip for the button to mark a read later entry as unread.">
         Mark as unread
       </message>
+      <message name="IDS_READ_LATER_MENU_EMPTY_STATE_HEADER" desc="Header for the read later menu when there are no unread or read entries.">
+        You'll find your reading list here
+      </message>
+      <message name="IDS_READ_LATER_MENU_EMPTY_STATE_SUBHEADER" desc="Subheader for the read later menu when there are no unread or read entries.">
+        To save a page for later, click the Bookmark icon
+      </message>
 
       <!--Tooltip strings-->
       <message name="IDS_TOOLTIP_BACK" desc="The tooltip for back button">

chrome/app/generated_resources_grd/IDS_READ_LATER_MENU_EMPTY_STATE_HEADER.png.sha1

+7d23c6173c687a85187e149bb0d6d8fc88b6c2a7
\ No newline at end of file

chrome/app/generated_resources_grd/IDS_READ_LATER_MENU_EMPTY_STATE_SUBHEADER.png.sha1

+7d23c6173c687a85187e149bb0d6d8fc88b6c2a7
\ No newline at end of file

chrome/browser/resources/read_later/app.html

-<style include="mwb-shared-style read-later-shared-style">
+<style include="mwb-shared-style read-later-shared-style cr-hidden-style">
   #top-container {
     display: flex;
+    height: var(--mwb-item-height);
+    justify-content: flex-end;
   }
 
   #header {
     align-items: center;
     color: var(--cr-primary-text-color);
-    display: flex;
     flex-grow: 1;
     font-size: 15px;
-    height: var(--mwb-item-height);
+    line-height: var(--mwb-item-height);
     margin: 0;
     padding-inline-start: var(--mwb-list-item-horizontal-margin);
   }
@@ -50,10 +51,28 @@
     margin-inline-start: var(--mwb-list-item-horizontal-margin);
     margin-top: 4px;
   }
+
+  #empty-state-header {
+    color: var(--cr-primary-text-color);
+    font-size: 15px;
+    line-height: 20px;
+    padding: 0 var(--mwb-list-item-horizontal-margin);
+    text-align: center;
+  }
+
+  #empty-state-subheader {
+    color: var(--cr-secondary-text-color);
+    font-size: var(--mwb-primary-text-font-size);
+    line-height: 20px;
+    padding: 4px var(--mwb-list-item-horizontal-margin) 24px;
+    text-align: center;
+  }
 </style>
 
 <div id="top-container">
-  <div id="header">$i18n{title}</div>
+  <div id="header"
+      hidden="[[isReadingListEmpty_(unreadItems_, readItems_)]]">$i18n{title}
+  </div>
   <cr-icon-button id="closeButton" aria-label="$i18n{tooltipClose}"
       disable-ripple iron-icon="cr:close" on-click="onCloseClick_"
       title="$i18n{tooltipClose}">
@@ -62,15 +81,25 @@
 <div id="read-later-list">
   <iron-selector id="selector" on-keydown="onItemKeyDown_"
       attr-for-selected="data-url" selectable="read-later-item">
-    <div class="sub-heading">$i18n{unreadHeader}</div>
+    <div hidden="[[!unreadItems_.length]]" class="sub-heading">
+      $i18n{unreadHeader}
+    </div>
     <template id="ureadItemsList" is="dom-repeat" items="[[unreadItems_]]">
       <read-later-item data-url$="[[item.url.url]]" on-focus="onItemFocus_"
-          class="mwb-list-item" data="[[item]]" tabindex="0"></read-later-item>
+          class="mwb-list-item" data="[[item]]" tabindex="0">
+      </read-later-item>
     </template>
-    <div class="sub-heading">$i18n{readHeader}</div>
+    <div hidden="[[!readItems_.length]]" class="sub-heading">
+      $i18n{readHeader}
+    </div>
     <template id="readItemsList" is="dom-repeat" items="[[readItems_]]">
       <read-later-item data-url$="[[item.url.url]]" on-focus="onItemFocus_"
-          class="mwb-list-item" data="[[item]]" tabindex="0"></read-later-item>
+          class="mwb-list-item" data="[[item]]" tabindex="0">
+      </read-later-item>
     </template>
   </iron-selector>
+  <div hidden="[[!isReadingListEmpty_(unreadItems_, readItems_)]]">
+    <div id="empty-state-header">$i18n{emptyStateHeader}</div>
+    <div id="empty-state-subheader">$i18n{emptyStateSubheader}</div>
+  </div>
 </div>

chrome/browser/resources/read_later/app.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'chrome://resources/cr_elements/cr_icon_button/cr_icon_button.m.js';
+import 'chrome://resources/cr_elements/hidden_style_css.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_elements/mwb_shared_style.js';
 import 'chrome://resources/cr_elements/mwb_shared_vars.js';
@@ -82,6 +83,15 @@ export class ReadLaterAppElement extends PolymerElement {
     });
   }
 
+  /**
+   * @return {boolean}
+   * @private
+   */
+  isReadingListEmpty_() {
+    return (this.unreadItems_ === undefined || !this.unreadItems_.length) &&
+        (this.readItems_ === undefined || !this.readItems_.length);
+  }
+
   /**
    * @param {!Event} e
    * @private

chrome/browser/ui/webui/read_later/read_later_ui.cc

@@ -35,6 +35,8 @@ ReadLaterUI::ReadLaterUI(content::WebUI* web_ui)
   content::WebUIDataSource* source =
       content::WebUIDataSource::Create(chrome::kChromeUIReadLaterHost);
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
+      {"emptyStateHeader", IDS_READ_LATER_MENU_EMPTY_STATE_HEADER},
+      {"emptyStateSubheader", IDS_READ_LATER_MENU_EMPTY_STATE_SUBHEADER},
       {"readHeader", IDS_READ_LATER_MENU_READ_HEADER},
       {"title", IDS_READ_LATER_TITLE},
       {"tooltipClose", IDS_CLOSE},