rectangle tab shape

browser/ui/BUILD.gn

@@ -6,6 +6,8 @@ source_set("ui") {
     "webui/basic_ui.h",
     "webui/brave_web_ui_controller_factory.cc",
     "webui/brave_web_ui_controller_factory.h",
+    "views/tabs/brave_tab_parent.cc",
+    "views/tabs/brave_tab_parent.h",
   ]
   public_deps = [
     "//content/public/browser",

browser/ui/brave_layout_constants.cc

@@ -0,0 +1,70 @@
+/* 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 "chrome/browser/ui/layout_constants.h"
+
+#include "base/logging.h"
+#include "build/build_config.h"
+#include "ui/base/material_design/material_design_controller.h"
+
+int GetLayoutConstant(LayoutConstant constant) {
+  const bool hybrid = ui::MaterialDesignController::GetMode() ==
+                      ui::MaterialDesignController::MATERIAL_HYBRID;
+  switch (constant) {
+    case LOCATION_BAR_BUBBLE_VERTICAL_PADDING:
+      return hybrid ? 1 : 3;
+    case LOCATION_BAR_BUBBLE_FONT_VERTICAL_PADDING:
+      return hybrid ? 3 : 2;
+    case LOCATION_BAR_BUBBLE_ANCHOR_VERTICAL_INSET:
+      if (ui::MaterialDesignController::IsSecondaryUiMaterial())
+        return 1;
+      return hybrid ? 8 : 6;
+    case LOCATION_BAR_ELEMENT_PADDING:
+      return hybrid ? 3 : 1;
+    case LOCATION_BAR_HEIGHT:
+      return hybrid ? 32 : 28;
+    case TABSTRIP_NEW_TAB_BUTTON_OVERLAP:
+      // Originally here was `return hybrid ? 6 : 5`
+      // This value means how the new tab button is moved to the most right tab
+      // from the position of rectangle shape.
+      // The was required to have beautiful positioning with inclided sides of
+      // tabs and new tab button. Does not required for rectangle tabs and button.
+      return hybrid ? 0 : 0;
+    case TAB_HEIGHT:
+      return hybrid ? 33 : 29;
+    case TOOLBAR_ELEMENT_PADDING:
+      return hybrid ? 8 : 0;
+    case TOOLBAR_STANDARD_SPACING:
+      return hybrid ? 8 : 4;
+  }
+  NOTREACHED();
+  return 0;
+}
+
+gfx::Insets GetLayoutInsets(LayoutInset inset) {
+  const bool hybrid = ui::MaterialDesignController::GetMode() ==
+                      ui::MaterialDesignController::MATERIAL_HYBRID;
+  switch (inset) {
+    case TAB:
+      // Originally here was `return gfx::Insets(1, hybrid ? 18 : 16)`
+      // Insets is a content border inside of the tab. When the tab has been
+      // changed to rectangle shape instead of trapezoid, then top part
+      // of the tab had more space. So reasonable to decrease the content
+      // border.
+      return gfx::Insets(1, hybrid ? 9 : 8);
+  }
+  NOTREACHED();
+  return gfx::Insets();
+}
+
+gfx::Size GetLayoutSize(LayoutSize size) {
+  const bool hybrid = ui::MaterialDesignController::GetMode() ==
+                      ui::MaterialDesignController::MATERIAL_HYBRID;
+  switch (size) {
+    case NEW_TAB_BUTTON:
+      return hybrid ? gfx::Size(39, 21) : gfx::Size(36, 18);
+  }
+  NOTREACHED();
+  return gfx::Size();
+}

browser/ui/views/tabs/brave_tab_parent.cc

@@ -0,0 +1,35 @@
+/* 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_parent.h"
+
+
+// Returns the width of the tab endcap in DIP.  More precisely, this is the
+// width of the curve making up either the outer or inner edge of the stroke;
+// since these two curves are horizontally offset by 1 px (regardless of scale),
+// the total width of the endcap from tab outer edge to the inside end of the
+// stroke inner edge is (GetUnscaledEndcapWidth() * scale) + 1.
+//
+// The value returned here must be at least Tab::kMinimumEndcapWidth.
+// static
+float BraveTabParent::GetTabEndcapWidth() {
+  return 4;
+}
+
+// static
+float BraveTabParent::GetInverseDiagonalSlope() {
+  // This is computed from the border path as follows:
+  // * The endcap width is enough for the whole stroke outer curve, i.e. the
+  //   side diagonal plus the curves on both its ends.
+  // * The bottom and top curve together are kMinimumEndcapWidth DIP wide, so
+  //   the diagonal is (endcap_width - kMinimumEndcapWidth) DIP wide.
+  // * The bottom and top curve are each 1.5 px high.  Additionally, there is an
+  //   extra 1 px below the bottom curve and (scale - 1) px above the top curve,
+  //   so the diagonal is ((height - 1.5 - 1.5) * scale - 1 - (scale - 1)) px
+  //   high.  Simplifying this gives (height - 4) * scale px, or (height - 4)
+  //   DIP.
+
+  // This is zero for rectangle shaped tab
+  return 0;
+}

browser/ui/views/tabs/brave_tab_parent.h

@@ -0,0 +1,32 @@
+/* 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_TAB_BRAVE_PARENT_H_
+#define BRAVE_BROWSER_UI_VIEWS_TABS_TAB_BRAVE_PARENT_H_
+
+
+class BraveTabParent {
+public:
+  virtual ~BraveTabParent(){}
+
+  // The combined width of the curves at the top and bottom of the endcap.
+  static constexpr float kMinimumEndcapWidth = 2;
+
+
+  // Returns the inverse of the slope of the diagonal portion of the tab outer
+  // border.  (This is a positive value, so it's specifically for the slope of
+  // the leading edge.)
+  //
+  // This returns the inverse (dx/dy instead of dy/dx) because we use exact
+  // values for the vertical distances between points and then compute the
+  // horizontal deltas from those.
+  //
+  // This is zero for rectangle shaped tab, because dx is 0
+  static float GetInverseDiagonalSlope();
+
+  static float GetTabEndcapWidth();
+};
+
+
+#endif //BRAVE_BROWSER_UI_VIEWS_TABS_TAB_BRAVE_PARENT_H_

patches/chrome-browser-ui-BUILD.gn.patch

@@ -0,0 +1,13 @@
+diff --git a/chrome/browser/ui/BUILD.gn b/chrome/browser/ui/BUILD.gn
+index 82f43b9591ae0645ecc046029011fe6e195371c3..fd8666d8bfa5add7193a48c667a202bdb9a5a95c 100644
+--- a/chrome/browser/ui/BUILD.gn
++++ b/chrome/browser/ui/BUILD.gn
+@@ -801,7 +801,7 @@ split_static_library("ui") {
+       "javascript_dialogs/javascript_dialog_tab_helper.h",
+       "javascript_dialogs/javascript_dialog_views.cc",
+       "javascript_dialogs/javascript_dialog_views.h",
+-      "layout_constants.cc",
++      "//brave/browser/ui/brave_layout_constants.cc",
+       "layout_constants.h",
+       "location_bar/location_bar.cc",
+       "location_bar/location_bar.h",

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

@@ -0,0 +1,45 @@
+diff --git a/chrome/browser/ui/views/tabs/tab.cc b/chrome/browser/ui/views/tabs/tab.cc
+index 6d88fa75e31be381e66a9c1fb848dd95aaae45cf..2ec7af9e280e1b9175f43470c2df6ef6eead0741 100644
+--- a/chrome/browser/ui/views/tabs/tab.cc
++++ b/chrome/browser/ui/views/tabs/tab.cc
+@@ -104,17 +104,6 @@ bool ShouldShowThrobber(TabRendererData::NetworkState state) {
+ ////////////////////////////////////////////////////////////////////////////////
+ // Drawing and utility functions
+
+-// Returns the width of the tab endcap in DIP.  More precisely, this is the
+-// width of the curve making up either the outer or inner edge of the stroke;
+-// since these two curves are horizontally offset by 1 px (regardless of scale),
+-// the total width of the endcap from tab outer edge to the inside end of the
+-// stroke inner edge is (GetUnscaledEndcapWidth() * scale) + 1.
+-//
+-// The value returned here must be at least Tab::kMinimumEndcapWidth.
+-float GetTabEndcapWidth() {
+-  return GetLayoutInsets(TAB).left() - 0.5f;
+-}
+-
+ void DrawHighlight(gfx::Canvas* canvas,
+                    const SkPoint& p,
+                    SkScalar radius,
+@@ -635,22 +624,6 @@ int Tab::GetPinnedWidth() {
+ }
+
+ // static
+-float Tab::GetInverseDiagonalSlope() {
+-  // This is computed from the border path as follows:
+-  // * The endcap width is enough for the whole stroke outer curve, i.e. the
+-  //   side diagonal plus the curves on both its ends.
+-  // * The bottom and top curve together are kMinimumEndcapWidth DIP wide, so
+-  //   the diagonal is (endcap_width - kMinimumEndcapWidth) DIP wide.
+-  // * The bottom and top curve are each 1.5 px high.  Additionally, there is an
+-  //   extra 1 px below the bottom curve and (scale - 1) px above the top curve,
+-  //   so the diagonal is ((height - 1.5 - 1.5) * scale - 1 - (scale - 1)) px
+-  //   high.  Simplifying this gives (height - 4) * scale px, or (height - 4)
+-  //   DIP.
+-  return (GetTabEndcapWidth() - kMinimumEndcapWidth) /
+-         (Tab::GetMinimumInactiveSize().height() - 4);
+-}
+-
+-// static
+ int Tab::GetOverlap() {
+   // We want to overlap the endcap portions entirely.
+   return gfx::ToCeiledInt(GetTabEndcapWidth());

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

@@ -0,0 +1,46 @@
+diff --git a/chrome/browser/ui/views/tabs/tab.h b/chrome/browser/ui/views/tabs/tab.h
+index bbab5337971f85f241f7aa22e35ec8a9c2018191..217bf58039fb940272c3153b5770eb08186202ac 100644
+--- a/chrome/browser/ui/views/tabs/tab.h
++++ b/chrome/browser/ui/views/tabs/tab.h
+@@ -26,6 +26,8 @@
+ #include "ui/views/masked_targeter_delegate.h"
+ #include "ui/views/view.h"
+
++#include "brave/browser/ui/views/tabs/brave_tab_parent.h"
++
+ class AlertIndicatorButton;
+ class TabController;
+
+@@ -49,14 +51,12 @@ class Tab : public gfx::AnimationDelegate,
+             public views::ButtonListener,
+             public views::ContextMenuController,
+             public views::MaskedTargeterDelegate,
+-            public views::View {
++            public views::View,
++            public BraveTabParent {
+  public:
+   // The Tab's class name.
+   static const char kViewClassName[];
+
+-  // The combined width of the curves at the top and bottom of the endcap.
+-  static constexpr float kMinimumEndcapWidth = 4;
+-
+   Tab(TabController* controller, gfx::AnimationContainer* container);
+   ~Tab() override;
+
+@@ -149,15 +149,6 @@ class Tab : public gfx::AnimationDelegate,
+   // Returns the width for pinned tabs. Pinned tabs always have this width.
+   static int GetPinnedWidth();
+
+-  // Returns the inverse of the slope of the diagonal portion of the tab outer
+-  // border.  (This is a positive value, so it's specifically for the slope of
+-  // the leading edge.)
+-  //
+-  // This returns the inverse (dx/dy instead of dy/dx) because we use exact
+-  // values for the vertical distances between points and then compute the
+-  // horizontal deltas from those.
+-  static float GetInverseDiagonalSlope();
+-
+   // Returns the overlap between adjacent tabs.
+   static int GetOverlap();
+