Skip to content

Commit

Permalink
Added header to bookmarks panel
Browse files Browse the repository at this point in the history
fix brave/brave-browser#32952

Bookmarks panel's header includes icon, title and button for loading
bookmarks manager.
  • Loading branch information
simonhong committed Sep 20, 2023
1 parent 5f301dc commit f4c1efe
Show file tree
Hide file tree
Showing 13 changed files with 315 additions and 1 deletion.
10 changes: 10 additions & 0 deletions app/brave_generated_resources.grd
Original file line number Diff line number Diff line change
Expand Up @@ -799,6 +799,16 @@ Or change later at <ph name="SETTINGS_EXTENIONS_LINK">$2<ex>brave://settings/ext
<message name="IDS_SIDEBAR_READING_LIST_PANEL_HEADER_TITLE" desc="Text of readling list panel header">
Reading List
</message>
<if expr="not use_titlecase">
<message name="IDS_SIDEBAR_READING_LIST_PANEL_HEADER_BOOKMARKS_BUTTON_TOOLTIP" desc="Text of bookmarks panel header button tooltip">
Bookmarks manager
</message>
</if>
<if expr="use_titlecase">
<message name="IDS_SIDEBAR_READING_LIST_PANEL_HEADER_BOOKMARKS_BUTTON_TOOLTIP" desc="Text of bookmark panel header button tooltip">
Bookmarks Manager
</message>
</if>
</if>

<!-- Stats -->
Expand Down
1 change: 1 addition & 0 deletions app/theme/brave_theme_resources.grd
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
</if>

<if expr="toolkit_views">
<structure type="chrome_scaled_image" name="IDR_SIDEBAR_BOOKMARKS_PANEL_HEADER" file="brave/sidebar_bookmarks_panel_header.png" />
<structure type="chrome_scaled_image" name="IDR_SIDEBAR_ITEM_HIGHLIGHT" file="brave/sidebar_item_highlight.png" />
<structure type="chrome_scaled_image" name="IDR_SIDEBAR_ITEM_HIGHLIGHT_RIGHT" file="brave/sidebar_item_highlight_right.png" />
<structure type="chrome_scaled_image" name="IDR_SIDEBAR_READING_LIST_PANEL_HEADER" file="brave/sidebar_reading_list_panel_header.png" />
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions browser/ui/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -330,6 +330,10 @@ source_set("ui") {
"views/page_action/brave_page_action_icon_container_view.h",
"views/rounded_separator.cc",
"views/rounded_separator.h",
"views/side_panel/bookmarks/brave_bookmarks_side_panel_coordinator.cc",
"views/side_panel/bookmarks/brave_bookmarks_side_panel_coordinator.h",
"views/side_panel/brave_bookmarks_side_panel_view.cc",
"views/side_panel/brave_bookmarks_side_panel_view.h",
"views/side_panel/brave_read_later_side_panel_view.cc",
"views/side_panel/brave_read_later_side_panel_view.h",
"views/side_panel/brave_side_panel.cc",
Expand Down
4 changes: 3 additions & 1 deletion browser/ui/color/brave_color_id.h
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,9 @@
E_CPONLY(kColorSidebarSeparator) \
E_CPONLY(kColorSidebarPanelHeaderSeparator) \
E_CPONLY(kColorSidebarPanelHeaderBackground) \
E_CPONLY(kColorSidebarPanelHeaderTitle)
E_CPONLY(kColorSidebarPanelHeaderTitle) \
E_CPONLY(kColorSidebarPanelHeaderButton) \
E_CPONLY(kColorSidebarPanelHeaderButtonHovered)

#if BUILDFLAG(ENABLE_SPEEDREADER)
#define BRAVE_SPEEDREADER_COLOR_IDS \
Expand Down
8 changes: 8 additions & 0 deletions browser/ui/color/brave_color_mixer.cc
Original file line number Diff line number Diff line change
Expand Up @@ -362,6 +362,10 @@ void AddBraveLightThemeColorMixer(ui::ColorProvider* provider,
leo::GetColor(leo::Color::kColorContainerBackground, leo::Theme::kLight)};
mixer[kColorSidebarPanelHeaderTitle] = {
leo::GetColor(leo::Color::kColorTextSecondary, leo::Theme::kLight)};
mixer[kColorSidebarPanelHeaderButton] = {
leo::GetColor(leo::Color::kColorIconDefault, leo::Theme::kLight)};
mixer[kColorSidebarPanelHeaderButtonHovered] = {
leo::GetColor(leo::Color::kColorGray60, leo::Theme::kLight)};

if (HasCustomToolbarColor(key)) {
// When custom color for toolbar is set, we can't depend on the color mode.
Expand Down Expand Up @@ -478,6 +482,10 @@ void AddBraveDarkThemeColorMixer(ui::ColorProvider* provider,
mixer[kColorSidebarPanelHeaderBackground] = {gfx::kGoogleGrey900};
mixer[kColorSidebarPanelHeaderTitle] = {
leo::GetColor(leo::Color::kColorTextSecondary, leo::Theme::kDark)};
mixer[kColorSidebarPanelHeaderButton] = {
leo::GetColor(leo::Color::kColorIconDefault, leo::Theme::kDark)};
mixer[kColorSidebarPanelHeaderButtonHovered] = {
leo::GetColor(leo::Color::kColorGray60, leo::Theme::kDark)};

if (HasCustomToolbarColor(key)) {
// When custom color for toolbar is set, we can't depend on the color mode.
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
/* Copyright (c) 2023 The Brave Authors. All rights reserved.
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at https://mozilla.org/MPL/2.0/. */

#include "brave/browser/ui/views/side_panel/bookmarks/brave_bookmarks_side_panel_coordinator.h"

#include "base/functional/bind.h"
#include "brave/browser/ui/views/side_panel/brave_bookmarks_side_panel_view.h"
#include "chrome/browser/ui/views/side_panel/side_panel_entry.h"
#include "chrome/browser/ui/views/side_panel/side_panel_registry.h"
#include "chrome/grit/generated_resources.h"
#include "components/omnibox/browser/vector_icons.h"
#include "ui/base/l10n/l10n_util.h"
#include "ui/base/models/image_model.h"
#include "ui/views/vector_icons.h"

BraveBookmarksSidePanelCoordinator::BraveBookmarksSidePanelCoordinator(
Browser* browser)
: BrowserUserData<BraveBookmarksSidePanelCoordinator>(*browser) {}

BraveBookmarksSidePanelCoordinator::~BraveBookmarksSidePanelCoordinator() =
default;

void BraveBookmarksSidePanelCoordinator::CreateAndRegisterEntry(
SidePanelRegistry* global_registry) {
global_registry->Register(std::make_unique<SidePanelEntry>(
SidePanelEntry::Id::kBookmarks,
l10n_util::GetStringUTF16(IDS_BOOKMARK_MANAGER_TITLE),
ui::ImageModel::FromVectorIcon(omnibox::kStarIcon, ui::kColorIcon),
base::BindRepeating(
&BraveBookmarksSidePanelCoordinator::CreateBookmarksPanelView,
base::Unretained(this))));
}

std::unique_ptr<views::View>
BraveBookmarksSidePanelCoordinator::CreateBookmarksPanelView() {
return std::make_unique<BraveBookmarksSidePanelView>(&GetBrowser());
}

BROWSER_USER_DATA_KEY_IMPL(BraveBookmarksSidePanelCoordinator);
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/* Copyright (c) 2023 The Brave Authors. All rights reserved.
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at https://mozilla.org/MPL/2.0/. */

#ifndef BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BOOKMARKS_BRAVE_BOOKMARKS_SIDE_PANEL_COORDINATOR_H_
#define BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BOOKMARKS_BRAVE_BOOKMARKS_SIDE_PANEL_COORDINATOR_H_

#include <memory>

#include "chrome/browser/ui/browser_user_data.h"

class Browser;
class SidePanelRegistry;

namespace views {
class View;
} // namespace views

// Introduced to give custom contents view(BraveBookmarksSidePanelView) for
// bookmarks panel entry. That contents view includes bookmarks panel specific
// header view and web view.
// Note that this is not the subclass of upstream BookmarksSidePanelCoordinator.
// As it inherits BrowserUserData, subclassig doesn't work well when its
// instance is created via BrowserUserData<>::CreateForBrowser(). So, new
// coordinator class is introduced and
// BookmarksSidePanelCoordinator::CreateBookmarksWebView() is reused from
// BraveBookmarksSidePanelView. That's why BraveBookmarksSidePanelView is set
// as BookmarksSidePanelCoordinator's friend.
class BraveBookmarksSidePanelCoordinator
: public BrowserUserData<BraveBookmarksSidePanelCoordinator> {
public:
explicit BraveBookmarksSidePanelCoordinator(Browser* browser);
BraveBookmarksSidePanelCoordinator(
const BraveBookmarksSidePanelCoordinator&) = delete;
BraveBookmarksSidePanelCoordinator& operator=(
const BraveBookmarksSidePanelCoordinator&) = delete;
~BraveBookmarksSidePanelCoordinator() override;

void CreateAndRegisterEntry(SidePanelRegistry* global_registry);

private:
friend class BrowserUserData<BraveBookmarksSidePanelCoordinator>;

std::unique_ptr<views::View> CreateBookmarksPanelView();

BROWSER_USER_DATA_KEY_DECL();
};

#endif // BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BOOKMARKS_BRAVE_BOOKMARKS_SIDE_PANEL_COORDINATOR_H_
143 changes: 143 additions & 0 deletions browser/ui/views/side_panel/brave_bookmarks_side_panel_view.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
/* Copyright (c) 2023 The Brave Authors. All rights reserved.
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at https://mozilla.org/MPL/2.0/. */

#include "brave/browser/ui/views/side_panel/brave_bookmarks_side_panel_view.h"

#include <memory>

#include "base/memory/raw_ref.h"
#include "brave/browser/ui/color/brave_color_id.h"
#include "brave/components/vector_icons/vector_icons.h"
#include "brave/grit/brave_generated_resources.h"
#include "brave/grit/brave_theme_resources.h"
#include "chrome/browser/ui/singleton_tabs.h"
#include "chrome/browser/ui/views/side_panel/bookmarks/bookmarks_side_panel_coordinator.h"
#include "chrome/browser/ui/views/side_panel/read_later_side_panel_web_view.h"
#include "chrome/browser/ui/views/side_panel/side_panel_content_proxy.h"
#include "chrome/browser/ui/views/side_panel/side_panel_util.h"
#include "chrome/common/webui_url_constants.h"
#include "chrome/grit/generated_resources.h"
#include "ui/base/l10n/l10n_util.h"
#include "ui/base/models/image_model.h"
#include "ui/base/resource/resource_bundle.h"
#include "ui/gfx/font_list.h"
#include "ui/gfx/geometry/insets.h"
#include "ui/views/background.h"
#include "ui/views/controls/button/image_button.h"
#include "ui/views/controls/image_view.h"
#include "ui/views/controls/label.h"
#include "ui/views/controls/separator.h"
#include "ui/views/layout/flex_layout.h"
#include "ui/views/layout/layout_types.h"

namespace {

// Renders icon, title and launch button.
class BookmarksSidePanelHeaderView : public views::View {
public:
explicit BookmarksSidePanelHeaderView(Browser* browser) {
constexpr int kHeaderInteriorMargin = 16;
SetLayoutManager(std::make_unique<views::FlexLayout>())
->SetOrientation(views::LayoutOrientation::kHorizontal)
.SetInteriorMargin(gfx::Insets(kHeaderInteriorMargin))
.SetMainAxisAlignment(views::LayoutAlignment::kStart)
.SetCrossAxisAlignment(views::LayoutAlignment::kCenter);

ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
auto* header_image = AddChildView(
std::make_unique<views::ImageView>(ui::ImageModel::FromImageSkia(
*rb.GetImageSkiaNamed(IDR_SIDEBAR_BOOKMARKS_PANEL_HEADER))));
constexpr int kSpacingBetweenHeaderImageAndLabel = 8;
header_image->SetProperty(
views::kMarginsKey,
gfx::Insets::TLBR(0, 0, 0, kSpacingBetweenHeaderImageAndLabel));
header_image->SetProperty(
views::kFlexBehaviorKey,
views::FlexSpecification(views::MinimumFlexSizeRule::kPreferred,
views::MaximumFlexSizeRule::kPreferred));

auto* header_label = AddChildView(std::make_unique<views::Label>(
l10n_util::GetStringUTF16(IDS_BOOKMARK_MANAGER_TITLE)));
header_label->SetFontList(gfx::FontList("Poppins, Semi-Bold 16px"));
header_label->SetEnabledColorId(kColorSidebarPanelHeaderTitle);
header_label->SetProperty(
views::kFlexBehaviorKey,
views::FlexSpecification(views::MinimumFlexSizeRule::kPreferred,
views::MaximumFlexSizeRule::kPreferred));
auto* spacer = AddChildView(std::make_unique<views::View>());
spacer->SetProperty(
views::kFlexBehaviorKey,
views::FlexSpecification(views::MinimumFlexSizeRule::kScaleToZero,
views::MaximumFlexSizeRule::kUnbounded)
.WithOrder(2));
// Safe to use Unretained(this) here as |button| will be destroyed before
// this class.
auto* button = AddChildView(std::make_unique<views::ImageButton>(
base::BindRepeating(&BookmarksSidePanelHeaderView::OnButtonPressed,
base::Unretained(this), browser)));
button->SetTooltipText(l10n_util::GetStringUTF16(
IDS_SIDEBAR_READING_LIST_PANEL_HEADER_BOOKMARKS_BUTTON_TOOLTIP));

constexpr int kHeaderButtonSize = 20;
button->SetImageModel(
views::Button::STATE_NORMAL,
ui::ImageModel::FromVectorIcon(
kLeoLaunchIcon, kColorSidebarPanelHeaderButton, kHeaderButtonSize));
button->SetImageModel(
views::Button::STATE_HOVERED,
ui::ImageModel::FromVectorIcon(kLeoLaunchIcon,
kColorSidebarPanelHeaderButtonHovered,
kHeaderButtonSize));

SetBackground(
views::CreateThemedSolidBackground(kColorSidebarPanelHeaderBackground));
}

~BookmarksSidePanelHeaderView() override = default;
BookmarksSidePanelHeaderView(const BookmarksSidePanelHeaderView&) = delete;
BookmarksSidePanelHeaderView& operator=(const BookmarksSidePanelHeaderView&) =
delete;

private:
void OnButtonPressed(Browser* browser, const ui::Event& event) {
ShowSingletonTab(browser, GURL(chrome::kChromeUIBookmarksURL));
}
};

} // namespace

BraveBookmarksSidePanelView::BraveBookmarksSidePanelView(Browser* browser) {
SetLayoutManager(std::make_unique<views::FlexLayout>())
->SetOrientation(views::LayoutOrientation::kVertical);
AddChildView(std::make_unique<BookmarksSidePanelHeaderView>(browser));
AddChildView(std::make_unique<views::Separator>())
->SetColorId(kColorSidebarPanelHeaderSeparator);

// Reuse upstream's bookmarks panl nwebui.
auto* web_view =
AddChildView(BookmarksSidePanelCoordinator::GetOrCreateForBrowser(browser)
->CreateBookmarksWebView());
web_view->SetProperty(
views::kFlexBehaviorKey,
views::FlexSpecification(views::MinimumFlexSizeRule::kPreferred,
views::MaximumFlexSizeRule::kUnbounded));

// See the comment in
// BraveReadLaterSidePanelView::BraveReadLaterSidePanelView() about why we do
// this.
SidePanelUtil::GetSidePanelContentProxy(this)->SetAvailable(false);
observation_.Observe(web_view);
}

BraveBookmarksSidePanelView::~BraveBookmarksSidePanelView() = default;

void BraveBookmarksSidePanelView::OnViewVisibilityChanged(
views::View* observed_view,
views::View* starting_view) {
if (observed_view->GetVisible()) {
SidePanelUtil::GetSidePanelContentProxy(this)->SetAvailable(true);
observation_.Reset();
}
}
33 changes: 33 additions & 0 deletions browser/ui/views/side_panel/brave_bookmarks_side_panel_view.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* Copyright (c) 2023 The Brave Authors. All rights reserved.
* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at https://mozilla.org/MPL/2.0/. */

#ifndef BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BRAVE_BOOKMARKS_SIDE_PANEL_VIEW_H_
#define BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BRAVE_BOOKMARKS_SIDE_PANEL_VIEW_H_

#include "base/functional/callback_forward.h"
#include "base/scoped_observation.h"
#include "ui/views/view.h"
#include "ui/views/view_observer.h"

class Browser;

// Gives bookmarks panel specific header view with web view.
class BraveBookmarksSidePanelView : public views::View,
public views::ViewObserver {
public:
explicit BraveBookmarksSidePanelView(Browser* browser);
~BraveBookmarksSidePanelView() override;
BraveBookmarksSidePanelView(const BraveBookmarksSidePanelView&) = delete;
BraveBookmarksSidePanelView& operator=(const BraveBookmarksSidePanelView&) =
delete;

private:
void OnViewVisibilityChanged(views::View* observed_view,
views::View* starting_view) override;

base::ScopedObservation<views::View, views::ViewObserver> observation_{this};
};

#endif // BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BRAVE_BOOKMARKS_SIDE_PANEL_VIEW_H_
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
// Copyright (c) 2023 The Brave Authors. All rights reserved.
// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this file,
// You can obtain one at https://mozilla.org/MPL/2.0/.

#ifndef BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_SIDE_PANEL_BOOKMARKS_BOOKMARKS_SIDE_PANEL_COORDINATOR_H_
#define BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_SIDE_PANEL_BOOKMARKS_BOOKMARKS_SIDE_PANEL_COORDINATOR_H_

#define CreateAndRegisterEntry \
CreateAndRegisterEntry_UnUsed() {} \
friend class BraveBookmarksSidePanelView; \
void CreateAndRegisterEntry

#include "src/chrome/browser/ui/views/side_panel/bookmarks/bookmarks_side_panel_coordinator.h" // IWYU pragma: export

#undef CreateAndRegisterEntry

#endif // BRAVE_CHROMIUM_SRC_CHROME_BROWSER_UI_VIEWS_SIDE_PANEL_BOOKMARKS_BOOKMARKS_SIDE_PANEL_COORDINATOR_H_
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,17 @@
// you can obtain one at http://mozilla.org/MPL/2.0/.

#include "chrome/browser/ui/views/side_panel/side_panel_util.h"
#include "brave/browser/ui/views/side_panel/bookmarks/brave_bookmarks_side_panel_coordinator.h"
#include "brave/browser/ui/views/side_panel/playlist/playlist_side_panel_coordinator.h"
#include "brave/components/playlist/common/features.h"
#include "chrome/browser/ui/views/side_panel/bookmarks/bookmarks_side_panel_coordinator.h"

#define PopulateGlobalEntries PopulateGlobalEntries_ChromiumImpl
#define BookmarksSidePanelCoordinator BraveBookmarksSidePanelCoordinator

#include "src/chrome/browser/ui/views/side_panel/side_panel_util.cc"

#undef BookmarksSidePanelCoordinator
#undef PopulateGlobalEntries

// static
Expand Down

0 comments on commit f4c1efe

Please sign in to comment.