Update split view tile color for custom theme

fix brave/brave-browser#43052

When custom theme is used, we use different tile bg color and border color as
custom theme could have any colors so it's difficult to generate tile color from
them.

Author: simonhong

browser/ui/color/brave_color_id.h

@@ -128,6 +128,7 @@
 #define BRAVE_SPLIT_VIEW_COLOR_IDS \
     E_CPONLY(kColorBraveSplitViewTileBackgroundHorizontal) \
     E_CPONLY(kColorBraveSplitViewTileBackgroundVertical)   \
+    E_CPONLY(kColorBraveSplitViewTileBackgroundBorder)     \
     E_CPONLY(kColorBraveSplitViewTileDivider)              \
     E_CPONLY(kColorBraveSplitViewActiveWebViewBorder)      \
     E_CPONLY(kColorBraveSplitViewInactiveWebViewBorder)    \

browser/ui/tabs/brave_tab_color_mixer.cc

@@ -21,6 +21,24 @@ void AddBraveTabThemeColorMixer(ui::ColorProvider* provider,
                                 const ui::ColorProviderKey& key) {
   auto& mixer = provider->AddMixer();
 
+  if (key.custom_theme) {
+    mixer[kColorBraveSplitViewTileBackgroundHorizontal] = {
+        SkColorSetARGB(0x1A, 0x00, 0x00, 0x00)};
+    mixer[kColorBraveSplitViewTileBackgroundVertical] = {
+        kColorBraveSplitViewTileBackgroundHorizontal};
+    mixer[kColorBraveSplitViewTileBackgroundBorder] = {
+        SkColorSetARGB(0x34, 0xFF, 0xFF, 0xFF)};
+    mixer[kColorBraveSplitViewTileDivider] = {kColorTabDividerFrameActive};
+  } else {
+    mixer[kColorBraveSplitViewTileBackgroundHorizontal] = {
+        nala::kColorDesktopbrowserTabbarSplitViewBackgroundHorizontal};
+    mixer[kColorBraveSplitViewTileBackgroundVertical] = {
+        nala::kColorDesktopbrowserTabbarSplitViewBackgroundVertical};
+    mixer[kColorBraveSplitViewTileBackgroundBorder] = {SK_ColorTRANSPARENT};
+    mixer[kColorBraveSplitViewTileDivider] = {
+        nala::kColorDesktopbrowserTabbarSplitViewDivider};
+  }
+
   mixer[kColorBraveVerticalTabActiveBackground] = {
       nala::kColorDesktopbrowserTabbarActiveTabVertical};
   mixer[kColorBraveVerticalTabHoveredBackground] = {
@@ -33,13 +51,6 @@ void AddBraveTabThemeColorMixer(ui::ColorProvider* provider,
       kColorTabForegroundInactiveFrameActive};
   mixer[kColorBraveVerticalTabNTBShortcutTextColor] = {
       kColorTabForegroundActiveFrameActive};
-
-  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,6 +85,7 @@ void AddBraveTabPrivateThemeColorMixer(ui::ColorProvider* provider,
       nala::kColorPrimitivePrivateWindow5};
   mixer[kColorBraveSplitViewTileDivider] = {
       nala::kColorPrimitivePrivateWindow20};
+  mixer[kColorBraveSplitViewTileBackgroundBorder] = {SK_ColorTRANSPARENT};
 }
 
 void AddBraveTabTorThemeColorMixer(ui::ColorProvider* provider,
@@ -90,6 +102,7 @@ void AddBraveTabTorThemeColorMixer(ui::ColorProvider* provider,
   mixer[kColorBraveSplitViewTileBackgroundVertical] = {
       nala::kColorPrimitiveTorWindow5};
   mixer[kColorBraveSplitViewTileDivider] = {nala::kColorPrimitiveTorWindow20};
+  mixer[kColorBraveSplitViewTileBackgroundBorder] = {SK_ColorTRANSPARENT};
 }
 
 }  // namespace tabs

browser/ui/views/tabs/brave_tab_container.cc

@@ -366,10 +366,14 @@ void BraveTabContainer::PaintBoundingBoxForTile(gfx::Canvas& canvas,
     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));
+    canvas.DrawLine(separator_top, separator_bottom,
+                    cp->GetColor(kColorBraveSplitViewTileDivider));
   }
+
+  bounding_rects.Outset(1);
+  flags.setStyle(cc::PaintFlags::kStroke_Style);
+  flags.setColor(cp->GetColor(kColorBraveSplitViewTileBackgroundBorder));
+  canvas.DrawRoundRect(bounding_rects, kRadius, flags);
 }
 
 void BraveTabContainer::OnUnlockLayout() {

browser/ui/views/tabs/brave_tab_style_views.inc.cc

@@ -434,9 +434,7 @@ SkColor BraveVerticalTabStyle::GetTargetTabBackgroundColor(
   // 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);
+    return SK_ColorTRANSPARENT;
   }
 
   if (!ShouldShowVerticalTabs()) {