Discharge7443/brave-core
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #27008 from brave/split_view_separator

Browse Source 
Re-style split view UI
This commit is contained in:
Simon Hong
2024-12-16 10:25:20 +09:00
committed by GitHub
parent 52e4e19786 1e4887afa8
commit 265e2aca04
5 changed files with 85 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser/ui/color/brave_color_id.h
+9 -8
View File
@@ -113,7 +113,6 @@
E_CPONLY(kColorBraveVerticalTabSeparator) \
E_CPONLY(kColorBraveVerticalTabActiveBackground) \
E_CPONLY(kColorBraveVerticalTabInactiveBackground) \
E_CPONLY(kColorBraveVerticalTabInactiveHoverBackground) \
E_CPONLY(kColorBraveVerticalTabNTBIconColor) \
E_CPONLY(kColorBraveVerticalTabNTBTextColor) \
E_CPONLY(kColorBraveVerticalTabNTBShortcutTextColor)
@@ -126,13 +125,15 @@
#define BRAVE_SPLIT_VIEW_COLOR_IDS \
E_CPONLY(kColorBraveSplitViewTileBackground) \
E_CPONLY(kColorBraveSplitViewActiveWebViewBorder) \
E_CPONLY(kColorBraveSplitViewInactiveWebViewBorder) \
E_CPONLY(kColorBraveSplitViewMenuButtonIcon) \
E_CPONLY(kColorBraveSplitViewMenuButtonBackground) \
E_CPONLY(kColorBraveSplitViewMenuButtonBorder) \
E_CPONLY(kColorBraveSplitViewMenuItemIcon) \
E_CPONLY(kColorBraveSplitViewTileBackgroundHorizontal) \
E_CPONLY(kColorBraveSplitViewTileBackgroundVertical) \
E_CPONLY(kColorBraveSplitViewTileDivider) \
E_CPONLY(kColorBraveSplitViewActiveWebViewBorder) \
E_CPONLY(kColorBraveSplitViewInactiveWebViewBorder) \
E_CPONLY(kColorBraveSplitViewMenuButtonIcon) \
E_CPONLY(kColorBraveSplitViewMenuButtonBackground) \
E_CPONLY(kColorBraveSplitViewMenuButtonBorder) \
E_CPONLY(kColorBraveSplitViewMenuItemIcon) \
E_CPONLY(kColorBraveSplitViewUrl)
browser/ui/color/brave_color_mixer.cc
+7
View File
@@ -724,4 +724,11 @@ void AddBravifiedTabStripColorMixer(ui::ColorProvider* provider,
ui::AlphaBlend({nala::kColorDividerStrong},
{kColorTabBackgroundInactiveFrameActive}, 0.75 * 0xff);
mixer[kColorTabDividerFrameInactive] = {kColorTabDividerFrameActive};
if (key.color_mode == ui::ColorProviderKey::ColorMode::kDark) {
mixer[kColorTabBackgroundActiveFrameActive] = {
nala::kColorDesktopbrowserTabbarActiveTabHorizontal};
mixer[kColorTabBackgroundInactiveHoverFrameActive] = {
nala::kColorDesktopbrowserTabbarHoverTabHorizontal};
}
}
browser/ui/tabs/brave_tab_color_mixer.cc
+17 -18
View File
@@ -21,20 +21,9 @@ void AddBraveTabThemeColorMixer(ui::ColorProvider* provider,
const ui::ColorProviderKey& key) {
auto& mixer = provider->AddMixer();
// This is the default dark theme. We need this because we customize some of
// the default dark colors.
auto is_grayscale_dark =
key.color_mode == ui::ColorProviderKey::ColorMode::kDark &&
key.user_color_source ==
ui::ColorProviderKey::UserColorSource::kGrayscale;
mixer[kColorBraveVerticalTabActiveBackground] = {
kColorTabBackgroundInactiveFrameActive};
mixer[kColorBraveVerticalTabInactiveBackground] = {kColorToolbar};
mixer[kColorBraveVerticalTabInactiveHoverBackground] =
ui::AlphaBlend(kColorBraveVerticalTabActiveBackground,
kColorBraveVerticalTabInactiveBackground,
/* 40% opacity */ 0.4 * SK_AlphaOPAQUE);
mixer[kColorBraveVerticalTabSeparator] = {kColorToolbarContentAreaSeparator};
mixer[kColorBraveVerticalTabNTBIconColor] = {
kColorTabForegroundInactiveFrameActive};
@@ -43,11 +32,12 @@ void AddBraveTabThemeColorMixer(ui::ColorProvider* provider,
mixer[kColorBraveVerticalTabNTBShortcutTextColor] = {
kColorTabForegroundActiveFrameActive};
// Unfortunately, we need to specify a different blend amount in the default
// dark theme, as we override the Upstream colors.
mixer[kColorBraveSplitViewTileBackground] =
ui::BlendTowardMaxContrast(kColorTabBackgroundInactiveFrameActive,
(is_grayscale_dark ? 0.15 : 0.075) * 0xFF);
mixer[kColorBraveSplitViewTileBackgroundHorizontal] = {
nala::kColorDesktopbrowserTabbarSplitViewBackgroundHorizontal};
mixer[kColorBraveSplitViewTileBackgroundVertical] = {
nala::kColorDesktopbrowserTabbarSplitViewBackgroundVertical};
mixer[kColorBraveSplitViewTileDivider] = {
nala::kColorDesktopbrowserTabbarSplitViewDivider};
mixer[kColorBraveSplitViewMenuItemIcon] = {nala::kColorIconDefault};
mixer[kColorBraveSplitViewUrl] = {nala::kColorTextTertiary};
mixer[kColorBraveSplitViewMenuButtonBorder] = {nala::kColorDividerSubtle};
@@ -74,7 +64,12 @@ void AddBraveTabPrivateThemeColorMixer(ui::ColorProvider* provider,
mixer.GetResultColor(kColorTabBackgroundActiveFrameActive)};
mixer[kColorBraveVerticalTabInactiveBackground] = {
mixer.GetResultColor(kColorToolbar)};
mixer[kColorBraveSplitViewTileBackground] = {SkColorSetRGB(0x2A, 0xD, 0x58)};
mixer[kColorBraveSplitViewTileBackgroundHorizontal] = {
nala::kColorPrimitivePrivateWindow10};
mixer[kColorBraveSplitViewTileBackgroundVertical] = {
kColorBraveSplitViewTileBackgroundHorizontal};
mixer[kColorBraveSplitViewTileDivider] = {
nala::kColorPrimitivePrivateWindow20};
}
void AddBraveTabTorThemeColorMixer(ui::ColorProvider* provider,
@@ -84,7 +79,11 @@ void AddBraveTabTorThemeColorMixer(ui::ColorProvider* provider,
mixer.GetResultColor(kColorTabBackgroundActiveFrameActive)};
mixer[kColorBraveVerticalTabInactiveBackground] = {
mixer.GetResultColor(kColorToolbar)};
mixer[kColorBraveSplitViewTileBackground] = {SkColorSetRGB(0x35, 0x0B, 0x49)};
mixer[kColorBraveSplitViewTileBackgroundHorizontal] = {
nala::kColorPrimitiveTorWindow10};
mixer[kColorBraveSplitViewTileBackgroundVertical] = {
kColorBraveSplitViewTileBackgroundHorizontal};
mixer[kColorBraveSplitViewTileDivider] = {nala::kColorPrimitiveTorWindow20};
}
} // namespace tabs
browser/ui/views/tabs/brave_tab_container.cc
+21 -1
View File
@@ -23,6 +23,7 @@
#include "brave/browser/ui/views/tabs/brave_tab_group_header.h"
#include "brave/browser/ui/views/tabs/brave_tab_strip.h"
#include "brave/browser/ui/views/tabs/vertical_tab_utils.h"
#include "brave/ui/color/nala/nala_color_id.h"
#include "cc/paint/paint_flags.h"
#include "chrome/browser/profiles/profile.h"
#include "chrome/browser/ui/color/chrome_color_id.h"
@@ -340,9 +341,28 @@ void BraveTabContainer::PaintBoundingBoxForTile(gfx::Canvas& canvas,
DCHECK(cp);
cc::PaintFlags flags;
flags.setColor(cp->GetColor(kColorBraveSplitViewTileBackground));
flags.setColor(cp->GetColor(
is_vertical_tab ? kColorBraveSplitViewTileBackgroundVertical
: kColorBraveSplitViewTileBackgroundHorizontal));
canvas.DrawRoundRect(bounding_rects, kRadius, flags);
auto active_tab_handle =
tab_strip_model->GetTabHandleAt(tab_strip_model->active_index());
if (!is_vertical_tab && active_tab_handle != tile.first &&
active_tab_handle != tile.second) {
constexpr int kSplitViewSeparatorHeight = 24;
auto separator_top = bounding_rects.top_center();
CHECK_GT(bounding_rects.height(), kSplitViewSeparatorHeight);
// Calculate gap between tab bounds top and separator top.
const int gap = (bounding_rects.height() - kSplitViewSeparatorHeight) / 2;
separator_top.Offset(0, gap);
auto separator_bottom = separator_top;
separator_bottom.Offset(0, kSplitViewSeparatorHeight);
canvas.DrawLine(
separator_top, separator_bottom,
cp->GetColor(nala::kColorDesktopbrowserTabbarSplitViewDivider));
}
}
void BraveTabContainer::OnUnlockLayout() {
browser/ui/views/tabs/brave_tab_style_views.inc.cc
+31 -21
View File
@@ -7,6 +7,7 @@
// depending on what's defined in anonymous namespace of tab_style_views.cc
#include "brave/browser/ui/tabs/split_view_browser_data.h"
#include "brave/ui/color/nala/nala_color_id.h"
namespace {
@@ -169,15 +170,6 @@ SkPath BraveVerticalTabStyle::GetPath(
}
}
const bool is_tab_tiled = IsTabTiled(tab());
if (is_tab_tiled && !tab()->IsActive() &&
(path_type == TabStyle::PathType::kBorder ||
path_type == TabStyle::PathType::kFill)) {
// We don't want inactive tab in a tile to have border or fill.
return SkPath();
}
const bool is_pinned = tab()->data().pinned;
// Calculate the bounds of the actual path.
@@ -216,7 +208,7 @@ SkPath BraveVerticalTabStyle::GetPath(
}
}
if (is_tab_tiled && path_type != TabStyle::PathType::kHitTest) {
if (IsTabTiled(tab()) && path_type != TabStyle::PathType::kHitTest) {
if (ShouldShowVerticalTabs()) {
constexpr auto kPaddingForVerticalTab = 4;
tab_top += scale * kPaddingForVerticalTab;
@@ -397,28 +389,46 @@ void BraveVerticalTabStyle::PaintTab(gfx::Canvas* canvas) const {
SkColor BraveVerticalTabStyle::GetTargetTabBackgroundColor(
TabStyle::TabSelectionState selection_state,
bool hovered) const {
const ui::ColorProvider* cp = tab()->GetColorProvider();
if (!cp) {
return gfx::kPlaceholderColor;
}
// Tab in tile doesn't have background in inactive state.
// In split view tile, we don't have selected tab's background.
// When any tab in a tile is clicked, the other tab in a same tile
// is also selected because clicking is start point of dragging.
// Because of that, whenever click a tab in a tile, the other tab's
// background is changed as its becomes selected tab.
// It's not easy to know whether selected state is from clicking or
// dragging here. As having selected tab state in a tile is not a
// common state, I think it's fine to not have that state in a tile.
if (IsTabTiled(tab()) && !tab()->IsActive() && !hovered) {
return cp->GetColor(ShouldShowVerticalTabs()
? kColorBraveSplitViewTileBackgroundVertical
: kColorBraveSplitViewTileBackgroundHorizontal);
}
if (!ShouldShowVerticalTabs()) {
return BraveTabStyleViews::GetTargetTabBackgroundColor(selection_state,
hovered);
}
if (tab()->IsActive()) {
return cp->GetColor(nala::kColorDesktopbrowserTabbarActiveTabVertical);
}
if (hovered) {
return cp->GetColor(nala::kColorDesktopbrowserTabbarHoverTabVertical);
}
if (selection_state == TabStyle::TabSelectionState::kSelected) {
// Use the same color if th tab is selected via multiselection.
return BraveTabStyleViews::GetTargetTabBackgroundColor(selection_state,
hovered);
}
const ui::ColorProvider* cp = tab()->GetColorProvider();
if (!cp) {
return gfx::kPlaceholderColor;
}
if (selection_state == TabStyle::TabSelectionState::kInactive) {
return cp->GetColor(hovered ? kColorBraveVerticalTabInactiveHoverBackground
: kColorBraveVerticalTabInactiveBackground);
}
return cp->GetColor(kColorBraveVerticalTabActiveBackground);
return cp->GetColor(kColorBraveVerticalTabInactiveBackground);
}
bool BraveVerticalTabStyle::ShouldShowVerticalTabs() const {