Bookmarks++: Add empty state for folder

- Add a separate empty state for when viewing an empty folder
- Fix guest mode to show the guest mode empty state and no other content

Bug: 1399971
Change-Id: Id05901edce7cf7bc0d5d19351c95491851f640fc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4568408
Reviewed-by: Emily Shack <emshack@chromium.org>
Code-Coverage: Findit <findit-for-me@appspot.gserviceaccount.com>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1149963}

chrome/app/generated_resources.grd

@@ -7684,6 +7684,12 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_BOOKMARKS_EMPTY_STATE_BODY" desc="Body text for the bookmarks side panel empty state">
         Bookmark things you want to come back to later
       </message>
+      <message name="IDS_BOOKMARKS_EMPTY_STATE_TITLE_FOLDER" desc="Title for the bookmarks side panel empty state in a folder view">
+        Nothing to show yet
+      </message>
+      <message name="IDS_BOOKMARKS_EMPTY_STATE_BODY_FOLDER" desc="Body text for the bookmarks side panel empty state in a folder view">
+        Add a bookmark to this folder
+      </message>
       <message name="IDS_BOOKMARKS_EMPTY_STATE_TITLE_GUEST" desc="Title for the bookmarks side panel empty state in guest mode">
         Sign in to see your bookmarks
       </message>

chrome/app/generated_resources_grd/IDS_BOOKMARKS_EMPTY_STATE_BODY_FOLDER.png.sha1

@@ -0,0 +1 @@
+264bfe39594df448cf7bb9408af59d6f4646dfee

chrome/app/generated_resources_grd/IDS_BOOKMARKS_EMPTY_STATE_TITLE_FOLDER.png.sha1

@@ -0,0 +1 @@
+264bfe39594df448cf7bb9408af59d6f4646dfee

chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.html

@@ -91,6 +91,10 @@
     margin-top: 40px;
   }
 
+  #folderEmptyState {
+    margin-bottom: 40px;
+  }
+
   sp-empty-state[guest] {
     margin-top: 66px;
   }
@@ -184,7 +188,8 @@
   </div>
 
   <div class="sp-card"
-      hidden$="[[shouldHideCard_(labels_.*, searchQuery_, shownBookmarks_)]]">
+      hidden$="[[shouldHideCard_(labels_.*, searchQuery_, shownBookmarks_,
+          guestMode_)]]">
     <sp-heading
         hidden$="[[shouldHideHeader_(
             labels_.*, searchQuery_, shownBookmarks_)]]"
@@ -220,6 +225,15 @@ <h1 slot="heading">[[getActiveFolderLabel_(activeFolderPath_.*)]]</h1>
           on-click="onBulkEditClicked_"></cr-icon-button>
     </sp-heading>
 
+    <div class="sp-scroller" hidden="[[shownBookmarks_.length]]">
+      <sp-empty-state id="folderEmptyState"
+          image-path="./images/bookmarks_empty.svg"
+          dark-image-path="./images/bookmarks_empty_dark.svg"
+          heading="$i18n{emptyTitleFolder}"
+          body="$i18n{emptyBodyFolder}">
+      </sp-empty-state>
+    </div>
+
     <div id="bookmarks" class="bookmarks sp-scroller"
         hidden="[[!shownBookmarks_.length]]"
         role="[[getBookmarksListRole_(editing_)]]"
@@ -274,8 +288,8 @@ <h1 slot="heading">[[getActiveFolderLabel_(activeFolderPath_.*)]]</h1>
     </div>
   </div>
 
-  <sp-empty-state
-      hidden="[[shownBookmarks_.length]]"
+  <sp-empty-state id="topLevelEmptyState"
+      hidden="[[!shouldShowTopLevelEmptyState_(shownBookmarks_, guestMode_)]]"
       guest$="[[guestMode_]]"
       image-path="[[getEmptyImagePath_(labels_.*, searchQuery_)]]"
       dark-image-path="[[getEmptyImagePathDark_(labels_.*, searchQuery_)]]"

chrome/browser/resources/side_panel/bookmarks/power_bookmarks_list.ts

@@ -27,6 +27,7 @@ import '//resources/cr_elements/cr_toolbar/cr_toolbar_selection_overlay.js';
 import '//resources/cr_elements/icons.html.js';
 import '//resources/polymer/v3_0/iron-list/iron-list.js';
 
+import {SpEmptyStateElement} from '//bookmarks-side-panel.top-chrome/shared/sp_empty_state.js';
 import {startColorChangeUpdater} from '//resources/cr_components/color_change_listener/colors_css_updater.js';
 import {getInstance as getAnnouncerInstance} from '//resources/cr_elements/cr_a11y_announcer/cr_a11y_announcer.js';
 import {CrActionMenuElement} from '//resources/cr_elements/cr_action_menu/cr_action_menu.js';
@@ -86,6 +87,8 @@ export interface PowerBookmarksListElement {
     sortMenu: CrActionMenuElement,
     editDialog: PowerBookmarksEditDialogElement,
     disabledFeatureDialog: CrDialogElement,
+    topLevelEmptyState: SpEmptyStateElement,
+    folderEmptyState: SpEmptyStateElement,
   };
 }
 
@@ -765,12 +768,19 @@ export class PowerBookmarksListElement extends PolymerElement {
     return false;
   }
 
-  private shouldShowEmptySearchState_() {
+  private shouldShowEmptySearchState_(): boolean {
     return this.hasActiveLabels_() || !!this.searchQuery_;
   }
 
+  private shouldShowTopLevelEmptyState_(): boolean {
+    return this.guestMode_ ||
+        (this.shownBookmarks_.length === 0 &&
+         (!!this.searchQuery_ || this.activeFolderPath_.length === 0));
+  }
+
   private shouldHideCard_(): boolean {
-    return this.shouldHideHeader_() && this.shownBookmarks_.length === 0;
+    return this.guestMode_ ||
+        (this.shouldHideHeader_() && this.shownBookmarks_.length === 0);
   }
 
   private shouldHideHeader_(): boolean {

chrome/browser/ui/webui/side_panel/bookmarks/bookmarks_side_panel_ui.cc

@@ -101,6 +101,8 @@ BookmarksSidePanelUI::BookmarksSidePanelUI(content::WebUI* web_ui)
       {"addCurrentTab", IDS_READ_LATER_ADD_CURRENT_TAB},
       {"emptyTitle", IDS_BOOKMARKS_EMPTY_STATE_TITLE},
       {"emptyBody", IDS_BOOKMARKS_EMPTY_STATE_BODY},
+      {"emptyTitleFolder", IDS_BOOKMARKS_EMPTY_STATE_TITLE_FOLDER},
+      {"emptyBodyFolder", IDS_BOOKMARKS_EMPTY_STATE_BODY_FOLDER},
       {"emptyTitleGuest", IDS_BOOKMARKS_EMPTY_STATE_TITLE_GUEST},
       {"emptyBodyGuest", IDS_BOOKMARKS_EMPTY_STATE_BODY_GUEST},
       {"emptyTitleSearch", IDS_BOOKMARKS_EMPTY_STATE_TITLE_SEARCH},

chrome/test/data/webui/side_panel/BUILD.gn

@@ -34,6 +34,10 @@ build_webui_tests("build") {
         rebase_path(
             "$root_gen_dir/chrome/browser/resources/side_panel/bookmarks/tsc/*",
             target_gen_dir),
+    "chrome://bookmarks-side-panel.top-chrome/shared/*|" +
+        rebase_path(
+            "$root_gen_dir/chrome/browser/resources/side_panel/shared/tsc/*",
+            target_gen_dir),
     "chrome://read-later.top-chrome/*|" + rebase_path(
             "$root_gen_dir/chrome/browser/resources/side_panel/reading_list/tsc/*",
             target_gen_dir),

chrome/test/data/webui/side_panel/bookmarks/power_bookmarks_list_test.ts

@@ -10,12 +10,13 @@ import {BookmarksApiProxyImpl} from 'chrome://bookmarks-side-panel.top-chrome/bo
 import {ShoppingListApiProxyImpl} from 'chrome://bookmarks-side-panel.top-chrome/commerce/shopping_list_api_proxy.js';
 import {PowerBookmarkRowElement} from 'chrome://bookmarks-side-panel.top-chrome/power_bookmark_row.js';
 import {PowerBookmarksListElement} from 'chrome://bookmarks-side-panel.top-chrome/power_bookmarks_list.js';
+import {SpEmptyStateElement} from 'chrome://bookmarks-side-panel.top-chrome/shared/sp_empty_state.js';
 import {PageImageServiceBrowserProxy} from 'chrome://resources/cr_components/page_image_service/browser_proxy.js';
 import {PageImageServiceHandlerRemote} from 'chrome://resources/cr_components/page_image_service/page_image_service.mojom-webui.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.js';
 import {PluralStringProxyImpl} from 'chrome://resources/js/plural_string_proxy.js';
 import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {assertEquals, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
+import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://webui-test/chai_assert.js';
 import {flushTasks} from 'chrome://webui-test/polymer_test_util.js';
 import {TestMock} from 'chrome://webui-test/test_mock.js';
 import {TestPluralStringProxy} from 'chrome://webui-test/test_plural_string_proxy.js';
@@ -75,7 +76,7 @@ suite('SidePanelPowerBookmarksListTest', () => {
     },
   ];
 
-  function getBookmarkElements(root: HTMLElement): HTMLElement[] {
+  function getBookmarkElements(root: HTMLElement): PowerBookmarkRowElement[] {
     return Array.from(root.shadowRoot!.querySelectorAll('power-bookmark-row'));
   }
 
@@ -104,6 +105,10 @@ suite('SidePanelPowerBookmarksListTest', () => {
       viewType: ViewType.kCompact,
       emptyTitle: 'empty title base',
       emptyTitleSearch: 'empty title search',
+      emptyTitleFolder: 'folder is empty',
+      emptyBodyFolder: 'folder body',
+      emptyTitleGuest: 'guest title',
+      emptyBodyGuest: 'guest body',
     });
 
     powerBookmarksList = document.createElement('power-bookmarks-list');
@@ -325,20 +330,37 @@ suite('SidePanelPowerBookmarksListTest', () => {
   });
 
   test('ShowsCorrectEmptyState', () => {
-    const emptyStateElement =
-        powerBookmarksList.shadowRoot!.querySelector('sp-empty-state');
-    assertTrue(!!emptyStateElement);
+    function emptyStateIsHidden(emptyState: SpEmptyStateElement): boolean {
+      return emptyState.matches('[hidden], [hidden] *');
+    }
 
+    const folderEmptyState = powerBookmarksList.$.folderEmptyState;
+    const topLevelEmptyState = powerBookmarksList.$.topLevelEmptyState;
     assertEquals(
-        loadTimeData.getString('emptyTitle'), emptyStateElement.heading);
+        loadTimeData.getString('emptyTitle'), topLevelEmptyState.heading);
+    assertEquals(loadTimeData.getString('emptyBody'), topLevelEmptyState.body);
 
+    // Has bookmarks so both empty states should be hidden.
+    assertTrue(emptyStateIsHidden(folderEmptyState));
+    assertTrue(emptyStateIsHidden(topLevelEmptyState));
+
+    // Opening an empty folder should show the folder empty state.
+    getBookmarkElements(powerBookmarksList)[0]!.$.crUrlListItem.click();
+    flush();
+    assertFalse(emptyStateIsHidden(folderEmptyState));
+    assertTrue(emptyStateIsHidden(topLevelEmptyState));
+
+    // A search with no results should show the top level empty state with
+    // text specific to search.
     const searchField =
         powerBookmarksList.shadowRoot!.querySelector('cr-toolbar-search-field');
     assertTrue(!!searchField);
     searchField.$.searchInput.value = 'abcdef';
     searchField.onSearchTermSearch();
     flush();
     assertEquals(
-        loadTimeData.getString('emptyTitleSearch'), emptyStateElement.heading);
+        loadTimeData.getString('emptyTitleSearch'), topLevelEmptyState.heading);
+    assertTrue(emptyStateIsHidden(folderEmptyState));
+    assertFalse(emptyStateIsHidden(topLevelEmptyState));
   });
 });