Brave tab separator UI

Address brave/brave-browser#962

browser/ui/BUILD.gn

@@ -44,6 +44,8 @@ source_set("ui") {
     "views/location_bar/brave_location_bar_view.h",
     "views/tabs/brave_new_tab_button.cc",
     "views/tabs/brave_new_tab_button.h",
+    "views/tabs/brave_tab.cc",
+    "views/tabs/brave_tab.h",
     "views/toolbar/bookmark_button.cc",
     "views/toolbar/bookmark_button.h",
     "views/toolbar/brave_toolbar_view.cc",

browser/ui/views/tabs/brave_tab.cc

@@ -0,0 +1,57 @@
+/* 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 http://mozilla.org/MPL/2.0/. */
+
+#include "brave/browser/ui/views/tabs/brave_tab.h"
+
+#include "chrome/browser/ui/views/tabs/tab_controller.h"
+#include "ui/gfx/canvas.h"
+#include "ui/gfx/scoped_canvas.h"
+
+using namespace chrome_browser_ui_views_tabs_tab_cc;
+
+// Same as Chomium Tab implementation except separators are
+// achored to bottom (instead of floating in middle) and rounded ends
+void BraveTab::PaintSeparators(gfx::Canvas* canvas) {
+  const auto separator_opacities = GetSeparatorOpacities(false);
+  if (!separator_opacities.left && !separator_opacities.right)
+    return;
+
+  gfx::ScopedCanvas scoped_canvas(canvas);
+  const float scale = canvas->UndoDeviceScaleFactor();
+
+  const gfx::RectF aligned_bounds =
+      ScaleAndAlignBounds(bounds(), scale, GetStrokeThickness());
+  const int corner_radius = GetCornerRadius();
+  const float separator_height = GetTabSeparatorHeight() * scale;
+  gfx::RectF leading_separator_bounds(
+      aligned_bounds.x() + corner_radius * scale,
+      aligned_bounds.y() + aligned_bounds.height() - separator_height,
+      kSeparatorThickness * scale, separator_height);
+  gfx::RectF trailing_separator_bounds = leading_separator_bounds;
+  trailing_separator_bounds.set_x(
+      aligned_bounds.right() - (corner_radius + kSeparatorThickness) * scale);
+
+  gfx::PointF origin(bounds().origin());
+  origin.Scale(scale);
+  leading_separator_bounds.Offset(-origin.x(), -origin.y());
+  trailing_separator_bounds.Offset(-origin.x(), -origin.y());
+
+  const SkColor separator_base_color = controller_->GetTabSeparatorColor();
+  const auto separator_color = [separator_base_color](float opacity) {
+    return SkColorSetA(separator_base_color,
+                       gfx::Tween::IntValueBetween(opacity, SK_AlphaTRANSPARENT,
+                                                   SK_AlphaOPAQUE));
+  };
+  const int separator_radius = kSeparatorThickness / 2;
+  const SkScalar scaled_separator_radius = SkIntToScalar(
+                                                      separator_radius * scale);
+  cc::PaintFlags flags;
+  flags.setAntiAlias(true);
+  flags.setColor(separator_color(separator_opacities.left));
+  canvas->DrawRoundRect(
+                      leading_separator_bounds, scaled_separator_radius, flags);
+  flags.setColor(separator_color(separator_opacities.right));
+  canvas->DrawRoundRect(
+                     trailing_separator_bounds, scaled_separator_radius, flags);
+}

browser/ui/views/tabs/brave_tab.h

@@ -0,0 +1,29 @@
+/* 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 http://mozilla.org/MPL/2.0/. */
+
+#ifndef BRAVE_BROWSER_UI_VIEWS_TABS_BRAVE_TAB_H_
+#define BRAVE_BROWSER_UI_VIEWS_TABS_BRAVE_TAB_H_
+
+#include "chrome/browser/ui/views/tabs/tab.h"
+#include "ui/gfx/geometry/rect.h"
+
+namespace chrome_browser_ui_views_tabs_tab_cc {
+
+const gfx::RectF ScaleAndAlignBounds(const gfx::Rect& bounds,
+                                     float scale,
+                                     float stroke_thickness);
+
+}
+
+class BraveTab : public Tab {
+  public:
+    using Tab::Tab;
+  private:
+    // Paints the separator lines on the left and right edge of the tab if in
+    // material refresh mode.
+    void PaintSeparators(gfx::Canvas* canvas) override;
+    DISALLOW_COPY_AND_ASSIGN(BraveTab);
+};
+
+#endif

chromium_src/chrome/browser/ui/views/tabs/tab_strip.cc

@@ -1,4 +1,7 @@
 #include "brave/browser/ui/views/tabs/brave_new_tab_button.h"
+// include brave_tab header so that patch inside tab_strip works
+#include "brave/browser/ui/views/tabs/brave_tab.h"
+
 #define NewTabButton BraveNewTabButton
 #include "../../../../../../chrome/browser/ui/views/tabs/tab_strip.cc"
 #undef NewTabButton

patches/chrome-browser-ui-views-tabs-tab.cc.patch

@@ -1,7 +1,25 @@
 diff --git a/chrome/browser/ui/views/tabs/tab.cc b/chrome/browser/ui/views/tabs/tab.cc
-index ed257b73ca005b0f90d64927c3edc7862efb00f6..b1714709756a1e7e15b1a053bf2335ec017b8ae8 100644
+index 0dcdb4bebb1286e493d0b85eac586954353e10d1..5fe6861d927b1eb38336b073e8c8c50f8094c620 100644
 --- a/chrome/browser/ui/views/tabs/tab.cc
 +++ b/chrome/browser/ui/views/tabs/tab.cc
+@@ -76,7 +76,7 @@
+ using base::UserMetricsAction;
+ using MD = ui::MaterialDesignController;
+
+-namespace {
++namespace chrome_browser_ui_views_tabs_tab_cc {
+
+ constexpr int kExtraLeftPaddingToBalanceCloseButtonPadding = 2;
+ constexpr int kRefreshExtraLeftPaddingToBalanceCloseButtonPadding = 4;
+@@ -99,7 +99,7 @@ constexpr float kSelectedTabThrobScale = 0.95f - kSelectedTabOpacity;
+
+ // Height of the separator painted on the left edge of the tab for the material
+ // refresh mode.
+-constexpr int kTabSeparatorHeight = 20;
++constexpr int kTabSeparatorHeight = 24;
+ constexpr int kTabSeparatorTouchHeight = 24;
+
+ // Helper functions ------------------------------------------------------------
 @@ -230,7 +230,7 @@ gfx::Path GetRefreshInteriorPath(float scale,
    bottom_offset *= scale;
 
@@ -11,7 +29,7 @@ index ed257b73ca005b0f90d64927c3edc7862efb00f6..b1714709756a1e7e15b1a053bf2335ec
    const float top_radius = std::max(radius - stroke_thickness, 0.f);
 
    // Compute |extension| as the width outside the separators.  This is a fixed
-@@ -362,8 +362,8 @@ gfx::Path GetRefreshBorderPath(const gfx::Rect& bounds,
+@@ -366,8 +366,8 @@ gfx::Path GetRefreshBorderPath(const gfx::Rect& bounds,
    bottom_offset *= scale;
 
    const float top_radius = GetTopCornerRadiusForWidth(bounds.width()) * scale;
@@ -22,3 +40,11 @@ index ed257b73ca005b0f90d64927c3edc7862efb00f6..b1714709756a1e7e15b1a053bf2335ec
 
    // See comments in GetRefreshInteriorPath().
    const float extension = Tab::GetCornerRadius() * scale;
+@@ -491,6 +491,7 @@ gfx::Path GetBorderPath(float scale,
+ }
+
+ }  // namespace
++using namespace chrome_browser_ui_views_tabs_tab_cc;
+
+ // Tab -------------------------------------------------------------------------
+

patches/chrome-browser-ui-views-tabs-tab.h.patch

@@ -0,0 +1,30 @@
+diff --git a/chrome/browser/ui/views/tabs/tab.h b/chrome/browser/ui/views/tabs/tab.h
+index 5be5d08990a6133511b9cb16ee660ce17cc907e8..6b55d3e9f733c2fe99ff6cf460def4d12f87b60d 100644
+--- a/chrome/browser/ui/views/tabs/tab.h
++++ b/chrome/browser/ui/views/tabs/tab.h
+@@ -56,7 +56,7 @@ class Tab : public gfx::AnimationDelegate,
+
+   // Under refresh, thickness in DIPs of the separator painted on the left and
+   // right edges of the tab.
+-  static constexpr int kSeparatorThickness = 1;
++  static constexpr int kSeparatorThickness = 2;
+
+   // When the content's width of the tab shrinks to below this size we should
+   // hide the close button on inactive tabs. Any smaller and they're too easy
+@@ -235,6 +235,7 @@ class Tab : public gfx::AnimationDelegate,
+   friend class AlertIndicatorButtonTest;
+   friend class TabTest;
+   friend class TabStripTest;
++  friend class BraveTab;
+   FRIEND_TEST_ALL_PREFIXES(TabStripTest, TabCloseButtonVisibilityWhenStacked);
+   FRIEND_TEST_ALL_PREFIXES(TabStripTest,
+                            TabCloseButtonVisibilityWhenNotStacked);
+@@ -284,7 +285,7 @@ class Tab : public gfx::AnimationDelegate,
+
+   // Paints the separator lines on the left and right edge of the tab if in
+   // material refresh mode.
+-  void PaintSeparators(gfx::Canvas* canvas);
++  virtual void PaintSeparators(gfx::Canvas* canvas);
+
+   // Computes which icons are visible in the tab. Should be called everytime
+   // before layout is performed.

patches/chrome-browser-ui-views-tabs-tab_strip.cc.patch

@@ -1,5 +1,13 @@
 diff --git a/chrome/browser/ui/views/tabs/tab_strip.cc b/chrome/browser/ui/views/tabs/tab_strip.cc
-index 1f7870f9ec645bd5eb15fc7b0e688bc9e60cb6eb..cbe8b005d8e11fbb00a2515127fcad34a128a3ab 100644
+index 1f7870f9ec645bd5eb15fc7b0e688bc9e60cb6eb..591ebbef63d609b18d997fc8d8bd95f9aaf074be 100644
 --- a/chrome/browser/ui/views/tabs/tab_strip.cc
 +++ b/chrome/browser/ui/views/tabs/tab_strip.cc
+@@ -446,7 +446,7 @@ void TabStrip::StopAllHighlighting() {
+ void TabStrip::AddTabAt(int model_index, TabRendererData data, bool is_active) {
+   const bool was_single_tab_mode = SingleTabMode();
 
+-  Tab* tab = new Tab(this, animation_container_.get());
++  Tab* tab = new BraveTab(this, animation_container_.get());
+   AddChildView(tab);
+   const bool pinned = data.pinned;
+   tab->SetData(std::move(data));