Implement "Open in playlist" from PlaylistActionBubbleView

browser/ui/views/playlist/playlist_action_bubble_view.cc

@@ -6,12 +6,14 @@
 #include "brave/browser/ui/views/playlist/playlist_action_bubble_view.h"
 
 #include <memory>
+#include <string>
 #include <utility>
 #include <vector>
 
 #include "brave/app/vector_icons/vector_icons.h"
 #include "brave/browser/playlist/playlist_tab_helper.h"
 #include "brave/browser/ui/color/brave_color_id.h"
+#include "brave/browser/ui/views/side_panel/playlist/playlist_side_panel_coordinator.h"
 #include "brave/grit/brave_theme_resources.h"
 #include "chrome/grit/generated_resources.h"
 #include "ui/base/l10n/l10n_util.h"
@@ -62,7 +64,8 @@ class ConfirmBubble : public PlaylistActionBubbleView {
  public:
  METADATA_HEADER(ConfirmBubble);
 
- ConfirmBubble(views::View* anchor,
+ ConfirmBubble(Browser* browser,
+ views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper);
  ~ConfirmBubble() override = default;
 
@@ -102,9 +105,10 @@ void ConfirmBubble::Row::Layout() {
  {label()->width() + label()->x() - contents_x, label()->height()});
 }
 
-ConfirmBubble::ConfirmBubble(views::View* anchor,
+ConfirmBubble::ConfirmBubble(Browser* browser,
+ views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper)
- : PlaylistActionBubbleView(anchor, playlist_tab_helper) {
+ : PlaylistActionBubbleView(browser, anchor, playlist_tab_helper) {
  // What this look like
  // https://user-images.githubusercontent.com/5474642/243532057-4bbbe779-47a1-4c3a-bd34-ce1334cf1d1d.png
  set_margins({});
@@ -150,7 +154,21 @@ ConfirmBubble::ConfirmBubble(views::View* anchor,
 }
 
 void ConfirmBubble::OpenInPlaylist() {
- NOTIMPLEMENTED();
+ // Technically, the saved items could belong to multiple playlists
+ // at the same time and their parent playlists could be different from each
+ // other's. But for simplicity, we just open the first one assuming that most
+ // users keep items from a site in a same playlist.
+ const auto& saved_items = playlist_tab_helper_->saved_items();
+ CHECK(saved_items.size());
+ CHECK(saved_items.front()->parents.size());
+ const std::string& playlist_id = saved_items.front()->parents.front();
+ const std::string& item_id = saved_items.front()->id;
+
+ auto* side_panel_coordinator =
+ PlaylistSidePanelCoordinator::FromBrowser(browser_);
+ CHECK(side_panel_coordinator);
+ side_panel_coordinator->ActivatePanel();
+ side_panel_coordinator->LoadPlaylist(playlist_id, item_id);
 }
 
 void ConfirmBubble::ChangeFolder() {
@@ -185,7 +203,8 @@ END_METADATA
 class AddBubble : public PlaylistActionBubbleView {
  public:
  METADATA_HEADER(AddBubble);
- AddBubble(views::View* anchor,
+ AddBubble(Browser* browser,
+ views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper);
 
  private:
@@ -296,9 +315,10 @@ void AddBubble::ItemRow::UpdateBackground() {
  }
 }
 
-AddBubble::AddBubble(views::View* anchor,
+AddBubble::AddBubble(Browser* browser,
+ views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper)
- : PlaylistActionBubbleView(anchor, playlist_tab_helper) {
+ : PlaylistActionBubbleView(browser, anchor, playlist_tab_helper) {
  // What this look like
  // https://user-images.githubusercontent.com/5474642/243532255-f82fc740-eea0-4c52-b43a-378ab703d229.png
  SetTitle(l10n_util::GetStringUTF16(IDS_PLAYLIST_ADD_TO_PLAYLIST));
@@ -382,15 +402,16 @@ END_METADATA
 
 // static
 void PlaylistActionBubbleView::ShowBubble(
+ Browser* browser,
  views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper) {
  DCHECK(!g_bubble);
  DCHECK(playlist_tab_helper);
 
  if (playlist_tab_helper->saved_items().size()) {
- g_bubble = new ConfirmBubble(anchor, playlist_tab_helper);
+ g_bubble = new ConfirmBubble(browser, anchor, playlist_tab_helper);
  } else if (playlist_tab_helper->found_items().size()) {
- g_bubble = new AddBubble(anchor, playlist_tab_helper);
+ g_bubble = new AddBubble(browser, anchor, playlist_tab_helper);
  } else {
  NOTREACHED() << "Caller should filter this case";
  }
@@ -415,9 +436,11 @@ PlaylistActionBubbleView* PlaylistActionBubbleView::GetBubble() {
 }
 
 PlaylistActionBubbleView::PlaylistActionBubbleView(
+ Browser* browser,
  views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper)
  : BubbleDialogDelegateView(anchor, views::BubbleBorder::Arrow::TOP_RIGHT),
+ browser_(browser),
  playlist_tab_helper_(playlist_tab_helper) {}
 
 PlaylistActionBubbleView::~PlaylistActionBubbleView() = default;

browser/ui/views/playlist/playlist_action_bubble_view.h

@@ -6,6 +6,8 @@
 #ifndef BRAVE_BROWSER_UI_VIEWS_PLAYLIST_PLAYLIST_ACTION_BUBBLE_VIEW_H_
 #define BRAVE_BROWSER_UI_VIEWS_PLAYLIST_PLAYLIST_ACTION_BUBBLE_VIEW_H_
 
+class Browser;
+
 namespace playlist {
 class PlaylistTabHelper;
 } // namespace playlist
@@ -16,7 +18,8 @@ class PlaylistActionBubbleView : public views::BubbleDialogDelegateView {
  public:
  METADATA_HEADER(PlaylistActionBubbleView);
 
- static void ShowBubble(views::View* anchor,
+ static void ShowBubble(Browser* browser,
+ views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper);
  static bool IsShowingBubble();
  static void CloseBubble();
@@ -28,9 +31,11 @@ class PlaylistActionBubbleView : public views::BubbleDialogDelegateView {
  void WindowClosing() override;
 
  protected:
- PlaylistActionBubbleView(views::View* anchor,
+ PlaylistActionBubbleView(Browser* browser,
+ views::View* anchor,
  playlist::PlaylistTabHelper* playlist_tab_helper);
 
+ raw_ptr<Browser> browser_;
  raw_ptr<playlist::PlaylistTabHelper> playlist_tab_helper_ = nullptr;
 };
 

browser/ui/views/playlist/playlist_action_icon_view.cc

@@ -26,7 +26,8 @@ PlaylistActionIconView::PlaylistActionIconView(
  icon_label_bubble_delegate,
  page_action_icon_delegate,
  "PlaylistActionIconView",
- /*ephemeral=*/false) {
+ /*ephemeral=*/false),
+ browser_(browser) {
  SetVisible(false);
 }
 
@@ -68,15 +69,11 @@ void PlaylistActionIconView::ShowPlaylistBubble() {
  playlist_tab_helper->AddItems(std::move(items_to_add));
  return;
  }
-
- DCHECK_GE(found_item_count, 1u);
- PlaylistActionBubbleView::ShowBubble(this, playlist_tab_helper);
- return;
  }
 
- DCHECK(saved_item_count);
+ DCHECK(saved_item_count || found_item_count > 1u);
  DCHECK_EQ(last_web_contents_, GetWebContents());
- PlaylistActionBubbleView::ShowBubble(this, playlist_tab_helper);
+ PlaylistActionBubbleView::ShowBubble(browser_, this, playlist_tab_helper);
 }
 
 const gfx::VectorIcon& PlaylistActionIconView::GetVectorIcon() const {

browser/ui/views/playlist/playlist_action_icon_view.h

@@ -57,6 +57,8 @@ class PlaylistActionIconView : public PageActionIconView,
  void OnAddedItemFromTabHelper(
  const std::vector<playlist::mojom::PlaylistItemPtr>& items) override;
 
+ raw_ptr<Browser> browser_ = nullptr;
+
  State state_ = State::kNone;
 
  raw_ptr<content::WebContents> last_web_contents_ = nullptr;

browser/ui/views/side_panel/playlist/playlist_side_panel_coordinator.cc

@@ -8,6 +8,9 @@
 #include <memory>
 
 #include "base/functional/callback.h"
+#include "brave/browser/ui/brave_browser.h"
+#include "brave/browser/ui/sidebar/sidebar_controller.h"
+#include "brave/browser/ui/sidebar/sidebar_model.h"
 #include "brave/browser/ui/views/side_panel/playlist/playlist_side_panel_web_view.h"
 #include "brave/components/constants/webui_url_constants.h"
 #include "chrome/app/vector_icons/vector_icons.h"
@@ -24,7 +27,8 @@
 #include "ui/views/vector_icons.h"
 
 PlaylistSidePanelCoordinator::PlaylistSidePanelCoordinator(Browser* browser)
- : BrowserUserData<PlaylistSidePanelCoordinator>(*browser) {}
+ : BrowserUserData<PlaylistSidePanelCoordinator>(*browser),
+ browser_(browser) {}
 
 PlaylistSidePanelCoordinator::~PlaylistSidePanelCoordinator() = default;
 
@@ -38,6 +42,27 @@ void PlaylistSidePanelCoordinator::CreateAndRegisterEntry(
  base::Unretained(this))));
 }
 
+void PlaylistSidePanelCoordinator::ActivatePanel() {
+ auto* sidebar_controller =
+ static_cast<BraveBrowser*>(browser_.get())->sidebar_controller();
+ sidebar_controller->ActivatePanelItem(
+ sidebar::SidebarItem::BuiltInItemType::kPlaylist);
+}
+
+void PlaylistSidePanelCoordinator::LoadPlaylist(const std::string& playlist_id,
+ const std::string& item_id) {
+ CHECK(contents_wrapper());
+
+ auto* web_contents = contents_wrapper()->web_contents();
+ CHECK(web_contents);
+
+ CHECK(!playlist_id.empty());
+ web_contents->GetController().LoadURL(
+ GURL("chrome-untrusted://playlist/playlist/" + playlist_id + "#" +
+ item_id),
+ {}, ui::PageTransition::PAGE_TRANSITION_AUTO_BOOKMARK, {});
+}
+
 std::unique_ptr<views::View> PlaylistSidePanelCoordinator::CreateWebView() {
  const bool should_create_contents_wrapper = !contents_wrapper_;
  if (should_create_contents_wrapper) {

browser/ui/views/side_panel/playlist/playlist_side_panel_coordinator.h

@@ -7,6 +7,7 @@
 #define BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_PLAYLIST_PLAYLIST_SIDE_PANEL_COORDINATOR_H_
 
 #include <memory>
+#include <string>
 
 #include "base/scoped_observation.h"
 #include "chrome/browser/ui/browser_user_data.h"
@@ -37,6 +38,9 @@ class PlaylistSidePanelCoordinator
  return contents_wrapper_.get();
  }
 
+ void ActivatePanel();
+ void LoadPlaylist(const std::string& playlist_id, const std::string& item_id);
+
  // views::ViewObserver:
  void OnViewIsDeleting(views::View* view) override;
 
@@ -47,6 +51,8 @@ class PlaylistSidePanelCoordinator
 
  std::unique_ptr<views::View> CreateWebView();
 
+ raw_ptr<Browser> browser_ = nullptr;
+
  std::unique_ptr<BubbleContentsWrapperT<playlist::PlaylistUI>>
  contents_wrapper_;
 

components/playlist/browser/resources/components/playlistItem.tsx

@@ -69,9 +69,27 @@ export default function PlaylistItem ({
  cached,
  onClick
 }: Props) {
+ const anchorElem = React.useRef<HTMLAnchorElement>(null)
+
+ const scrollToThisIfNeeded = React.useCallback(() => {
+ if (window.location.hash.replace('#', '') !== id) return
+
+ if (anchorElem.current)
+ window.scrollTo({ top: anchorElem.current.offsetTop })
+ }, [id])
+
+ React.useEffect(() => {
+ window.addEventListener('hashchange', scrollToThisIfNeeded)
+ return () => {
+ window.removeEventListener('hashchange', scrollToThisIfNeeded)
+ }
+ }, [scrollToThisIfNeeded])
+
+ React.useEffect(() => scrollToThisIfNeeded(), [])
+
  return (
  <PlaylistItemContainer onClick={() => onClick(id)}>
- <a href={`#${id}`} />
+ <a ref={anchorElem} href={`#${id}`} />
  {thumbnailUrl ? (
  <StyledThumbnail src={thumbnailUrl} />
  ) : (