Re-style split view UI

browser/ui/color/brave_color_id.h

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 (selection_state == TabStyle::TabSelectionState::kSelected) {
-    // Use the same color if th tab is selected via multiselection.
-    return BraveTabStyleViews::GetTargetTabBackgroundColor(selection_state,
-                                                           hovered);
+  if (tab()->IsActive()) {
+    return cp->GetColor(nala::kColorDesktopbrowserTabbarActiveTabVertical);
   }
 
-  const ui::ColorProvider* cp = tab()->GetColorProvider();
-  if (!cp) {
-    return gfx::kPlaceholderColor;
+  if (hovered) {
+    return cp->GetColor(nala::kColorDesktopbrowserTabbarHoverTabVertical);
   }
 
-  if (selection_state == TabStyle::TabSelectionState::kInactive) {
-    return cp->GetColor(hovered ? kColorBraveVerticalTabInactiveHoverBackground
-                                : kColorBraveVerticalTabInactiveBackground);
+  if (selection_state == TabStyle::TabSelectionState::kSelected) {
+    // Use the same color if th tab is selected via multiselection.
+    return BraveTabStyleViews::GetTargetTabBackgroundColor(selection_state,
+                                                           hovered);
   }
 
-  return cp->GetColor(kColorBraveVerticalTabActiveBackground);
+  return cp->GetColor(kColorBraveVerticalTabInactiveBackground);
 }
 
 bool BraveVerticalTabStyle::ShouldShowVerticalTabs() const {