Skip to content

Commit

Permalink
Merge pull request #24 from brave/customize_tab_shape_mac
Browse files Browse the repository at this point in the history
rectangle tabs for macOS
  • Loading branch information
bbondy authored Jan 30, 2018
2 parents 4faeaa8 + 9f7d417 commit d49a8ad
Show file tree
Hide file tree
Showing 4 changed files with 178 additions and 0 deletions.
97 changes: 97 additions & 0 deletions patches/chrome-browser-ui-cocoa-new_tab_button.mm.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
diff --git a/chrome/browser/ui/cocoa/new_tab_button.mm b/chrome/browser/ui/cocoa/new_tab_button.mm
index bd8f593b4560220bd52f4b3c3d48d5325e542151..58d0c0dd1de60fad2822cd1f135d380350de6fc6 100644
--- a/chrome/browser/ui/cocoa/new_tab_button.mm
+++ b/chrome/browser/ui/cocoa/new_tab_button.mm
@@ -25,7 +25,7 @@ enum class OverlayOption {
DARKEN,
};

-const NSSize newTabButtonImageSize = {34, 18};
+const NSSize newTabButtonImageSize = {19, 19};

NSImage* GetMaskImageFromCell(NewTabButtonCell* aCell) {
return [aCell imageForState:image_button_cell::kDefaultState view:nil];
@@ -347,34 +347,30 @@ CGFloat LineWidthFromContext(CGContextRef context) {
+ (NSBezierPath*)newTabButtonBezierPathWithLineWidth:(CGFloat)lineWidth {
NSBezierPath* bezierPath = [NSBezierPath bezierPath];

- // This data comes straight from the SVG.
- [bezierPath moveToPoint:NSMakePoint(15.2762236,30)];
+ const CGFloat closeBtnWidth = 35;
+ const CGFloat closeBtnHeight = 30;
+ const CGFloat closeBtnCornerRadius = 2;

- [bezierPath curveToPoint:NSMakePoint(11.0354216,27.1770115)
- controlPoint1:NSMakePoint(13.3667706,30)
- controlPoint2:NSMakePoint(11.7297681,28.8344828)];
+ [bezierPath moveToPoint:NSMakePoint(0, 0 + closeBtnCornerRadius)];

- [bezierPath curveToPoint:NSMakePoint(7.28528951e-08,2.01431416)
- controlPoint1:NSMakePoint(11.0354216,27.1770115)
- controlPoint2:NSMakePoint(0.000412425082,3.87955717)];
+ [bezierPath curveToPoint:NSMakePoint(0 + closeBtnCornerRadius, 0)
+ controlPoint1:NSMakePoint(0, 0)
+ controlPoint2:NSMakePoint(0, 0)];

- [bezierPath curveToPoint:NSMakePoint(1.70510791,0)
- controlPoint1:NSMakePoint(-0.000270516213,0.790325707)
- controlPoint2:NSMakePoint(0.753255356,0)];
+ [bezierPath lineToPoint:NSMakePoint(closeBtnWidth - closeBtnCornerRadius, 0)];
+ [bezierPath curveToPoint:NSMakePoint(closeBtnWidth, 0 + closeBtnCornerRadius)
+ controlPoint1:NSMakePoint(closeBtnWidth, 0)
+ controlPoint2:NSMakePoint(closeBtnWidth, 0)];

- [bezierPath lineToPoint:NSMakePoint(48.7033642,0)];
+ [bezierPath lineToPoint:NSMakePoint(closeBtnWidth, closeBtnHeight - closeBtnCornerRadius)];
+ [bezierPath curveToPoint:NSMakePoint(closeBtnWidth - closeBtnCornerRadius, closeBtnHeight)
+ controlPoint1:NSMakePoint(closeBtnWidth, closeBtnHeight)
+ controlPoint2:NSMakePoint(closeBtnWidth, closeBtnHeight)];

- [bezierPath curveToPoint:NSMakePoint(52.9464653,2.82643678)
- controlPoint1:NSMakePoint(50.6151163,0)
- controlPoint2:NSMakePoint(52.2521188,1.16666667)];
-
- [bezierPath curveToPoint:NSMakePoint(64.0268555,27.5961914)
- controlPoint1:NSMakePoint(52.9464653,2.82643678)
- controlPoint2:NSMakePoint(64.0268555,27.4111339)];
-
- [bezierPath curveToPoint:NSMakePoint(62.2756294,30)
- controlPoint1:NSMakePoint(64.0268555,28.5502144)
- controlPoint2:NSMakePoint(63.227482,29.9977011)];
+ [bezierPath lineToPoint:NSMakePoint(0 + closeBtnCornerRadius, closeBtnHeight)];
+ [bezierPath curveToPoint:NSMakePoint(0, closeBtnHeight - closeBtnCornerRadius)
+ controlPoint1:NSMakePoint(0, closeBtnHeight)
+ controlPoint2:NSMakePoint(0, closeBtnHeight)];

[bezierPath closePath];

@@ -432,9 +428,11 @@ CGFloat LineWidthFromContext(CGContextRef context) {
CGFloat buttonWidth = newTabButtonImageSize.width;

// Bottom edge.
- const CGFloat kBottomEdgeX = 9;
+ const CGFloat kBottomEdgeX = 1;
const CGFloat kBottomEdgeY = 1.2825;
- const CGFloat kBottomEdgeWidth = 22;
+ const CGFloat kBottomEdgeWidth = 17.5; //35/2 this is just for doubled line at the bottom
+
+
NSPoint bottomEdgeStart = NSMakePoint(kBottomEdgeX, kBottomEdgeY);
NSPoint bottomEdgeEnd = NSMakePoint(kBottomEdgeX + kBottomEdgeWidth,
kBottomEdgeY);
@@ -455,11 +453,13 @@ CGFloat LineWidthFromContext(CGContextRef context) {
CGPoint shadowStart = NSZeroPoint;
CGPoint shadowEnd = NSZeroPoint;
NSColor* overlayColor = nil;
- const CGFloat kBottomShadowX = 8;
+
+ const CGFloat kBottomShadowX = kBottomEdgeX - 1;
const CGFloat kBottomShadowY = kBottomEdgeY - lineWidth;
const CGFloat kTopShadowX = 1;
const CGFloat kTopShadowY = kBottomShadowY + 15;
- const CGFloat kShadowWidth = 24;
+ const CGFloat kShadowWidth = kBottomEdgeWidth;
+
static NSColor* lightOverlayColor =
[[NSColor colorWithCalibratedWhite:1 alpha:0.20] retain];
static NSColor* darkOverlayColor =
15 changes: 15 additions & 0 deletions patches/chrome-browser-ui-cocoa-tabs-tab_controller.mm.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
diff --git a/chrome/browser/ui/cocoa/tabs/tab_controller.mm b/chrome/browser/ui/cocoa/tabs/tab_controller.mm
index 84d02bda00a0d9269acfc327c58b1b3e8b7445f6..e45fdc15f1764943d4525e7a3180b482ec5ee20f 100644
--- a/chrome/browser/ui/cocoa/tabs/tab_controller.mm
+++ b/chrome/browser/ui/cocoa/tabs/tab_controller.mm
@@ -63,8 +63,8 @@ class MenuDelegate : public ui::SimpleMenuModel::Delegate {
} // TabControllerInternal namespace

namespace {
-static const CGFloat kTabLeadingPadding = 18;
-static const CGFloat kTabTrailingPadding = 15;
+static const CGFloat kTabLeadingPadding = 9;
+static const CGFloat kTabTrailingPadding = 7;
static const CGFloat kIconSize = 16;
static const CGFloat kCloseButtonSize = 16;
static const CGFloat kInitialTabWidth = 160;
22 changes: 22 additions & 0 deletions patches/chrome-browser-ui-cocoa-tabs-tab_strip_controller.mm.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
diff --git a/chrome/browser/ui/cocoa/tabs/tab_strip_controller.mm b/chrome/browser/ui/cocoa/tabs/tab_strip_controller.mm
index 9ecc8fefe1f54226fabf449bbedbd79a2645d81a..f794922f8e263c445125989f7f2a3b39cbdf7f5d 100644
--- a/chrome/browser/ui/cocoa/tabs/tab_strip_controller.mm
+++ b/chrome/browser/ui/cocoa/tabs/tab_strip_controller.mm
@@ -90,7 +90,7 @@ const CGFloat kUseFullAvailableWidth = -1.0;
const CGFloat kLastPinnedTabSpacing = 2.0;

// The amount by which the new tab button is offset (from the tabs).
-const CGFloat kNewTabButtonOffset = 10.0;
+const CGFloat kNewTabButtonOffset = -7.0;

// Time (in seconds) in which tabs animate to their final position.
const NSTimeInterval kAnimationDuration = 0.125;
@@ -587,7 +587,7 @@ NSRect FlipRectInView(NSView* view, NSRect rect) {
// tab. Else, every time the throbber is painted, the throbber's invalidation
// will also invalidate parts of the tab to the left, and two tabs's
// backgrounds need to be painted on each throbber frame instead of one.
- const CGFloat kTabOverlap = 18.0;
+ const CGFloat kTabOverlap = 2.0;
return kTabOverlap;
}

44 changes: 44 additions & 0 deletions patches/chrome-browser-ui-cocoa-tabs-tab_view.mm.patch
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
diff --git a/chrome/browser/ui/cocoa/tabs/tab_view.mm b/chrome/browser/ui/cocoa/tabs/tab_view.mm
index fa3ecea4d9a524ce4d675a3125a9abce027b04a7..c71e19d0a0fd606749f2e8e73e557d8901ad6020 100644
--- a/chrome/browser/ui/cocoa/tabs/tab_view.mm
+++ b/chrome/browser/ui/cocoa/tabs/tab_view.mm
@@ -459,7 +459,6 @@ CGFloat LineWidthFromContext(CGContextRef context) {
- (void)drawFill:(NSRect)dirtyRect {
gfx::ScopedNSGraphicsContextSaveGState scopedGState;
NSRect bounds = [self bounds];
-
NSRect clippingRect = bounds;
clippingRect.size.height = [TabView maskImageFillHeight];
if (state_ != NSOnState) {
@@ -991,6 +990,7 @@ CGFloat LineWidthFromContext(CGContextRef context) {
@implementation TabImageMaker

+ (NSBezierPath*)tabLeftEdgeBezierPathForContext:(CGContextRef)context {
+
NSBezierPath* bezierPath = [NSBezierPath bezierPath];

[bezierPath moveToPoint:NSMakePoint(-2, 0)];
@@ -998,10 +998,11 @@ CGFloat LineWidthFromContext(CGContextRef context) {
controlPoint1:NSMakePoint(1.805, -0.38)
controlPoint2:NSMakePoint(2.17, 1.415)];

- [bezierPath lineToPoint:NSMakePoint(14, 27)];
- [bezierPath curveToPoint:NSMakePoint(16, 29)
- controlPoint1:NSMakePoint(14.25, 27.25)
- controlPoint2:NSMakePoint(14.747467, 29.118899)];
+ [bezierPath lineToPoint:NSMakePoint(2.5, 27)];
+
+ [bezierPath curveToPoint:NSMakePoint(4.5, 29)
+ controlPoint1:NSMakePoint(2.25, 27.25)
+ controlPoint2:NSMakePoint(2.747467, 29.118899)];

[bezierPath lineToPoint:NSMakePoint(18, 29)];

@@ -1031,6 +1032,7 @@ CGFloat LineWidthFromContext(CGContextRef context) {
}

+ (void)setTabEdgeStrokeColor {
+
static NSColor* strokeColor =
[skia::SkColorToSRGBNSColor(SkColorSetARGB(76, 0, 0, 0)) retain];
[strokeColor set];

0 comments on commit d49a8ad

Please sign in to comment.