diff --git a/app/brave_generated_resources.grd b/app/brave_generated_resources.grd index 4ee5945a2139..076d59fa1acc 100644 --- a/app/brave_generated_resources.grd +++ b/app/brave_generated_resources.grd @@ -796,6 +796,9 @@ Or change later at $2brave://settings/ext Add to Sidebar + + Reading List + diff --git a/app/theme/brave_theme_resources.grd b/app/theme/brave_theme_resources.grd index 2f5988f271e2..ebfe896e5415 100644 --- a/app/theme/brave_theme_resources.grd +++ b/app/theme/brave_theme_resources.grd @@ -50,6 +50,7 @@ + diff --git a/app/theme/default_100_percent/brave/sidebar_reading_list_panel_header.png b/app/theme/default_100_percent/brave/sidebar_reading_list_panel_header.png new file mode 100644 index 000000000000..f7d271dff419 Binary files /dev/null and b/app/theme/default_100_percent/brave/sidebar_reading_list_panel_header.png differ diff --git a/app/theme/default_200_percent/brave/sidebar_reading_list_panel_header.png b/app/theme/default_200_percent/brave/sidebar_reading_list_panel_header.png new file mode 100644 index 000000000000..f9944f887dd8 Binary files /dev/null and b/app/theme/default_200_percent/brave/sidebar_reading_list_panel_header.png differ diff --git a/browser/ui/BUILD.gn b/browser/ui/BUILD.gn index 7e90cce56fdf..b5be9fbf3f46 100644 --- a/browser/ui/BUILD.gn +++ b/browser/ui/BUILD.gn @@ -330,6 +330,8 @@ source_set("ui") { "views/page_action/brave_page_action_icon_container_view.h", "views/rounded_separator.cc", "views/rounded_separator.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", "views/side_panel/brave_side_panel.h", "views/side_panel/brave_side_panel_resize_widget.cc", diff --git a/browser/ui/color/brave_color_id.h b/browser/ui/color/brave_color_id.h index aa7e788b8744..9ae91bf4a8a9 100644 --- a/browser/ui/color/brave_color_id.h +++ b/browser/ui/color/brave_color_id.h @@ -54,7 +54,10 @@ E_CPONLY(kColorSidebarButtonPressed) \ E_CPONLY(kColorSidebarItemBackgroundHovered) \ E_CPONLY(kColorSidebarItemDragIndicator) \ - E_CPONLY(kColorSidebarSeparator) + E_CPONLY(kColorSidebarSeparator) \ + E_CPONLY(kColorSidebarPanelHeaderSeparator) \ + E_CPONLY(kColorSidebarPanelHeaderBackground) \ + E_CPONLY(kColorSidebarPanelHeaderTitle) #if BUILDFLAG(ENABLE_SPEEDREADER) #define BRAVE_SPEEDREADER_COLOR_IDS \ diff --git a/browser/ui/color/brave_color_mixer.cc b/browser/ui/color/brave_color_mixer.cc index c6cc3d245fcb..d7d9850f8c5b 100644 --- a/browser/ui/color/brave_color_mixer.cc +++ b/browser/ui/color/brave_color_mixer.cc @@ -356,6 +356,12 @@ void AddBraveLightThemeColorMixer(ui::ColorProvider* provider, mixer[kColorSidebarArrowBackgroundHovered] = {GetToolbarInkDropColor(mixer)}; mixer[kColorSidebarItemBackgroundHovered] = {GetToolbarInkDropColor(mixer)}; mixer[kColorSidebarSeparator] = {SkColorSetRGB(0xE6, 0xE8, 0xF5)}; + mixer[kColorSidebarPanelHeaderSeparator] = { + leo::GetColor(leo::Color::kColorDividerSubtle, leo::Theme::kLight)}; + mixer[kColorSidebarPanelHeaderBackground] = { + leo::GetColor(leo::Color::kColorContainerBackground, leo::Theme::kLight)}; + mixer[kColorSidebarPanelHeaderTitle] = { + leo::GetColor(leo::Color::kColorTextSecondary, leo::Theme::kLight)}; if (HasCustomToolbarColor(key)) { // When custom color for toolbar is set, we can't depend on the color mode. @@ -462,6 +468,17 @@ void AddBraveDarkThemeColorMixer(ui::ColorProvider* provider, mixer[kColorSidebarArrowBackgroundHovered] = {GetToolbarInkDropColor(mixer)}; mixer[kColorSidebarItemBackgroundHovered] = {GetToolbarInkDropColor(mixer)}; mixer[kColorSidebarSeparator] = {SkColorSetRGB(0x5E, 0x61, 0x75)}; + mixer[kColorSidebarPanelHeaderSeparator] = { + leo::GetColor(leo::Color::kColorDividerSubtle, leo::Theme::kDark)}; + + // To align with upstream's panel backround color, use |kGogleGreay900|. + // When we apply our style to panel webui, use below color for header. + // leo::GetColor(leo::Color::kColorContainerBackground, leo::Theme::kDark). + // Or delete when panel webui renders header view also. + mixer[kColorSidebarPanelHeaderBackground] = {gfx::kGoogleGrey900}; + mixer[kColorSidebarPanelHeaderTitle] = { + leo::GetColor(leo::Color::kColorTextSecondary, leo::Theme::kDark)}; + if (HasCustomToolbarColor(key)) { // When custom color for toolbar is set, we can't depend on the color mode. mixer[kColorSidebarButtonBase] = {PickColorContrastingToToolbar( diff --git a/browser/ui/views/side_panel/brave_read_later_side_panel_view.cc b/browser/ui/views/side_panel/brave_read_later_side_panel_view.cc new file mode 100644 index 000000000000..25841064d29b --- /dev/null +++ b/browser/ui/views/side_panel/brave_read_later_side_panel_view.cc @@ -0,0 +1,115 @@ +/* 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_read_later_side_panel_view.h" + +#include + +#include "brave/browser/ui/color/brave_color_id.h" +#include "brave/grit/brave_generated_resources.h" +#include "brave/grit/brave_theme_resources.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 "ui/base/l10n/l10n_util.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/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 and title. +class ReadLaterSidePanelHeaderView : public views::View { + public: + ReadLaterSidePanelHeaderView() { + constexpr int kHeaderInteriorMargin = 16; + SetLayoutManager(std::make_unique()) + ->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(ui::ImageModel::FromImageSkia( + *rb.GetImageSkiaNamed(IDR_SIDEBAR_READING_LIST_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(l10n_util::GetStringUTF16( + IDS_SIDEBAR_READING_LIST_PANEL_HEADER_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)); + + SetBackground( + views::CreateThemedSolidBackground(kColorSidebarPanelHeaderBackground)); + } + + ~ReadLaterSidePanelHeaderView() override = default; + ReadLaterSidePanelHeaderView(const ReadLaterSidePanelHeaderView&) = delete; + ReadLaterSidePanelHeaderView& operator=(const ReadLaterSidePanelHeaderView&) = + delete; +}; + +} // namespace + +BraveReadLaterSidePanelView::BraveReadLaterSidePanelView( + Browser* browser, + base::RepeatingClosure close_cb) { + SetLayoutManager(std::make_unique()) + ->SetOrientation(views::LayoutOrientation::kVertical); + AddChildView(std::make_unique()); + AddChildView(std::make_unique()) + ->SetColorId(kColorSidebarPanelHeaderSeparator); + auto* web_view = AddChildView( + std::make_unique(browser, close_cb)); + web_view->SetProperty( + views::kFlexBehaviorKey, + views::FlexSpecification(views::MinimumFlexSizeRule::kPreferred, + views::MaximumFlexSizeRule::kUnbounded)); + + // Originally SidePanelEntry's Content was ReadLaterSidePanelWebView + // and it's availability is set to true when SidePanelWebUIView::ShowUI() + // and then proxy's availability callback is executed. + // However, we use parent view(BraveReadLaterSidePanelView) to have + // panel specific header view and this class becomes SidePanelEntry's Content. + // To make this content available when SidePanelWebUIVew::ShowUI() is called, + // this observes WebView's visibility because it's set as visible when + // ShowUI() is called. + // NOTE: If we use our own reading list page and it has loading spinner, maybe + // we can set `true` here. + SidePanelUtil::GetSidePanelContentProxy(this)->SetAvailable(false); + observation_.Observe(web_view); +} + +void BraveReadLaterSidePanelView::OnViewVisibilityChanged( + views::View* observed_view, + views::View* starting_view) { + // Once it becomes available, stop observing becuase its availablity is + // not changed from now on. + if (observed_view->GetVisible()) { + SidePanelUtil::GetSidePanelContentProxy(this)->SetAvailable(true); + observation_.Reset(); + } +} + +BraveReadLaterSidePanelView::~BraveReadLaterSidePanelView() = default; diff --git a/browser/ui/views/side_panel/brave_read_later_side_panel_view.h b/browser/ui/views/side_panel/brave_read_later_side_panel_view.h new file mode 100644 index 000000000000..d68e1489fb41 --- /dev/null +++ b/browser/ui/views/side_panel/brave_read_later_side_panel_view.h @@ -0,0 +1,34 @@ +/* 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_READ_LATER_SIDE_PANEL_VIEW_H_ +#define BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BRAVE_READ_LATER_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 reading list specific header view with web view. +class BraveReadLaterSidePanelView : public views::View, + public views::ViewObserver { + public: + BraveReadLaterSidePanelView(Browser* browser, + base::RepeatingClosure close_cb); + ~BraveReadLaterSidePanelView() override; + BraveReadLaterSidePanelView(const BraveReadLaterSidePanelView&) = delete; + BraveReadLaterSidePanelView& operator=(const BraveReadLaterSidePanelView&) = + delete; + + private: + void OnViewVisibilityChanged(views::View* observed_view, + views::View* starting_view) override; + + base::ScopedObservation observation_{this}; +}; + +#endif // BRAVE_BROWSER_UI_VIEWS_SIDE_PANEL_BRAVE_READ_LATER_SIDE_PANEL_VIEW_H_ diff --git a/chromium_src/chrome/browser/ui/views/side_panel/reading_list/reading_list_side_panel_coordinator.cc b/chromium_src/chrome/browser/ui/views/side_panel/reading_list/reading_list_side_panel_coordinator.cc new file mode 100644 index 000000000000..ebdfb3b791aa --- /dev/null +++ b/chromium_src/chrome/browser/ui/views/side_panel/reading_list/reading_list_side_panel_coordinator.cc @@ -0,0 +1,13 @@ +// 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_read_later_side_panel_view.h" +#include "chrome/browser/ui/views/side_panel/read_later_side_panel_web_view.h" + +#define ReadLaterSidePanelWebView BraveReadLaterSidePanelView + +#include "src/chrome/browser/ui/views/side_panel/reading_list/reading_list_side_panel_coordinator.cc" + +#undef ReadLaterSidePanelWebView