[Mac] Website settings: Implement custom tab appearance.

chrome/browser/ui/cocoa/website_settings_bubble_controller.mm

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #import "chrome/browser/ui/cocoa/website_settings_bubble_controller.h"
 
 #include "base/sys_string_conversions.h"
 #import "chrome/browser/ui/cocoa/browser_window_controller.h"
 #import "chrome/browser/ui/cocoa/info_bubble_view.h"
 #import "chrome/browser/ui/cocoa/info_bubble_window.h"
 #import "chrome/browser/ui/cocoa/location_bar/location_bar_view_mac.h"
 #include "chrome/browser/ui/tab_contents/tab_contents.h"
 #include "content/public/browser/cert_store.h"
 #include "grit/generated_resources.h"
+#include "grit/theme_resources.h"
 #include "grit/ui_resources.h"
 #import "third_party/GTM/AppKit/GTMUILocalizerAndLayoutTweaker.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
 
 namespace {
 
 // The width of the window, in view coordinates. The height will be determined
 // by the content.
 const CGFloat kWindowWidth = 380;
@@ skipping 21 matching lines @@
 // Width of the text fields.
 const CGFloat kTextWidth = kWindowWidth - (kImageSize + kImageSpacing +
     kFramePadding * 2);
 
 // The amount of padding given to tab view contents.
 const CGFloat kTabViewContentsPadding = kFramePadding;
 
 // The spacing between individual items in the Permissions tab.
 const CGFloat kPermissionsTabSpacing = 8;
 
+// The extra space to the left of the first tab in the tab strip.
+const CGFloat kTabStripXPadding = 19;
+
+// The amount of space between the visual borders of adjacent tabs.
+const CGFloat kTabSpacing = 4;
+
+// The extra width outside the hit rect used by the visual borders of the tab.
+const CGFloat kTabBorderExtraWidth = 16;
+
+// The height of the clickable area of the tab strip.
+const CGFloat kTabHeight = 27;
+
+// The height of the background image for the tab strip.
+const CGFloat kTabStripHeight = 44;
+
+// The amount of space above tab labels.
+const CGFloat kTabLabelTopPadding = 20;
+
+// The amount of padding to leave on either side of the tab label.
+const CGFloat kTabLabelXPadding = 12;
+
 // In the permission changing menu, the order of the menu items (which
 // correspond to different content settings).
 const ContentSetting kPermissionsMenuSettings[] = {
   CONTENT_SETTING_ALLOW,
   CONTENT_SETTING_BLOCK,
   CONTENT_SETTING_DEFAULT
 };
 
 }  // namespace
 
 // A simple container to hold all the contents of the website settings bubble.
 // It uses a flipped coordinate system to make text layout easier.
 @interface WebsiteSettingsContentView : NSView
 @end
 @implementation WebsiteSettingsContentView
 - (BOOL)isFlipped {
   return YES;
 }
 @end
 
+@interface WebsiteSettingsTabSegmentedCell : NSSegmentedCell {
+ @private
+  scoped_nsobject<NSImage> tabBackgroundImage_;
+  scoped_nsobject<NSImage> tabCenterImage_;
+  scoped_nsobject<NSImage> tabLeftImage_;
+  scoped_nsobject<NSImage> tabRightImage_;
+}
+@end

[Robert Sesek, 2012/08/09 14:44:00]

nit: blank line after

[Patrick Dubroy, 2012/08/09 15:33:19]

Done.

+@implementation WebsiteSettingsTabSegmentedCell
+- (id)init {
+  if ((self = [super init])) {
+    ResourceBundle& rb = ResourceBundle::GetSharedInstance();
+    tabBackgroundImage_.reset(
+        [rb.GetNativeImageNamed(IDR_WEBSITE_SETTINGS_TAB_BACKGROUND) retain]);
+    tabCenterImage_.reset(
+        [rb.GetNativeImageNamed(IDR_WEBSITE_SETTINGS_TAB_CENTER) retain]);
+    tabLeftImage_.reset(
+        [rb.GetNativeImageNamed(IDR_WEBSITE_SETTINGS_TAB_LEFT) retain]);
+    tabRightImage_.reset(
+        [rb.GetNativeImageNamed(IDR_WEBSITE_SETTINGS_TAB_RIGHT) retain]);
+  }
+  return self;
+}
+
+- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {

[Robert Sesek, 2012/08/09 14:44:00]

nit: no space before *

[Patrick Dubroy, 2012/08/09 15:33:19]

Done.

+  // Draw the background for the tab strip.
+  NSDrawThreePartImage(cellFrame,
+                       nil,
+                       tabBackgroundImage_,
+                       nil,
+                       /*vertical=*/ NO,
+                       NSCompositeSourceOver,
+                       1,
+                       /*flipped=*/ YES);
+
+  // Draw the tab for the selected segment. The drawing area is slightly
+  // larger than the hit rect for the tab.
+  NSRect tabRect = [self hitRectForSegment:[self selectedSegment]];
+  tabRect.origin.x -= kTabBorderExtraWidth;
+  tabRect.size.width += 2 * kTabBorderExtraWidth;
+
+  tabRect.origin.y = 0;
+  tabRect.size.height = kTabStripHeight;
+
+  NSDrawThreePartImage(tabRect,
+                       tabLeftImage_,
+                       tabCenterImage_,
+                       tabRightImage_,
+                       /*vertical=*/ NO,
+                       NSCompositeSourceOver,
+                       1,
+                       /*flipped=*/ YES);
+
+  // Call the superclass method to trigger drawing of the tab labels.
+  [self drawInteriorWithFrame:cellFrame inView:controlView];
+}
+
+// Return the hit rect (i.e., the visual bounds of the tab) for
+// the given segment.
+- (NSRect)hitRectForSegment:(NSInteger)segment {
+  NSRect rect = NSMakeRect(0, kTabStripHeight - kTabHeight,
+                           [self widthForSegment:segment], kTabHeight);
+  for (NSInteger i = 0; i < segment; ++i) {
+    rect.origin.x += [self widthForSegment:i];
+  }
+  int xAdjust = (segment == 0) ? kTabStripXPadding : 0;

[Robert Sesek, 2012/08/09 14:44:00]

nit no () around ternary

[Patrick Dubroy, 2012/08/09 15:33:19]

Done.

+  rect.size.width = [self widthForSegment:segment] - kTabSpacing - xAdjust;
+  rect.origin.x += kTabSpacing / 2 + xAdjust;
+
+  return rect;
+}
+
+- (void)drawSegment:(NSInteger)segment
+            inFrame:(NSRect)frame
+           withView:(NSView*)controlView {
+  // Call the superclass to draw the label, adjusting the rectangle so that
+  // the label appears centered in the tab.
+  if (segment == 0) {
+    frame.origin.x += kTabStripXPadding / 2;
+    frame.size.width -= kTabStripXPadding;
+  }
+  frame.origin.y += kTabLabelTopPadding;
+  frame.size.height -= kTabLabelTopPadding;
+  [super drawSegment:segment inFrame:frame withView:controlView];
+}
+
+// Override the default tracking behavior to only respond to clicks inside the
+// visual borders of the tab.
+- (BOOL)startTrackingAt:(NSPoint)startPoint inView:(NSView *)controlView {
+  NSInteger segmentCount = [self segmentCount];
+  for (NSInteger i = 0; i < segmentCount; ++i) {
+    if (NSPointInRect(startPoint, [self hitRectForSegment:i]))
+      return YES;
+  }
+  return NO;
+}
+
+@end
+
 @implementation WebsiteSettingsBubbleController
 
 - (id)initWithParentWindow:(NSWindow*)parentWindow
    websiteSettingsUIBridge:(WebsiteSettingsUIBridge*)bridge {
   DCHECK(parentWindow);
 
   // Use an arbitrary height; it will be changed in performLayout.
   NSRect contentRect = NSMakeRect(0, 0, kWindowWidth, 1);
   // Create an empty window into which content is placed.
   scoped_nsobject<InfoBubbleWindow> window(
@@ skipping 40 matching lines @@
 
   // Create a text field to identity status (e.g. verified, not verified).
   identityStatusField_ = [self addText:string16()
                               withSize:[NSFont smallSystemFontSize]
                                   bold:NO
                                 toView:contentView_
                                atPoint:controlOrigin];
 
   // Create the tab view and its two tabs.
 
+  NSRect initialFrame = NSMakeRect(0, 0, kWindowWidth, kTabStripHeight);
+  segmentedControl_.reset(
+      [[NSSegmentedControl alloc] initWithFrame:initialFrame]);
+  [segmentedControl_ setCell:[[WebsiteSettingsTabSegmentedCell alloc] init]];

[Robert Sesek, 2012/08/09 14:44:00]

This will leak the cell.

[Patrick Dubroy, 2012/08/09 15:33:19]

Fixed.

+  [segmentedControl_ setSegmentCount:2];
+  [segmentedControl_ setTarget:self];
+  [segmentedControl_ setAction:@selector(tabSelected:)];

[Robert Sesek, 2012/08/09 14:44:01]

nit: blank line after

[Patrick Dubroy, 2012/08/09 15:33:19]

Done.

+  NSFont* smallSystemFont =
+      [NSFont systemFontOfSize:[NSFont smallSystemFontSize]];
+  NSDictionary* textAttributes =
+      [NSDictionary dictionaryWithObject:smallSystemFont
+                                  forKey:NSFontAttributeName];
+
+  // Create the "Permissions" tab.
+  NSString* label = l10n_util::GetNSString(
+      IDS_WEBSITE_SETTINGS_TAB_LABEL_PERMISSIONS);
+  NSSize textSize = [label sizeWithAttributes:textAttributes];
+  CGFloat tabWidth = textSize.width + 2 * kTabLabelXPadding;
+  [segmentedControl_ setLabel:label forSegment:0];
+  [segmentedControl_ setWidth:tabWidth + kTabStripXPadding forSegment:0];
+
+  // Create the "Connection" tab.
+  label = l10n_util::GetNSString(IDS_WEBSITE_SETTINGS_TAB_LABEL_CONNECTION);
+  textSize = [label sizeWithAttributes:textAttributes];
+  [segmentedControl_ setLabel:label forSegment:1];
+
+  // Make both tabs the width of the widest. The first segment has some
+  // additional padding that is not part of the tab.

[Robert Sesek, 2012/08/09 14:44:01]

Why?

[Patrick Dubroy, 2012/08/09 15:33:19]

Changed the comment to explain.

+  tabWidth = std::max(tabWidth,
+                      textSize.width + 2 * kTabLabelXPadding);
+  [segmentedControl_ setWidth:tabWidth + kTabStripXPadding forSegment:0];
+  [segmentedControl_ setWidth:tabWidth forSegment:1];
+
+  [segmentedControl_ setFont:smallSystemFont];
+  [segmentedControl_ setSelectedSegment:0];
+  [contentView_ addSubview:segmentedControl_];
+
   NSRect tabFrame = NSMakeRect(0, 0, kWindowWidth, 300);
   tabView_.reset([[NSTabView alloc] initWithFrame:tabFrame]);
-  [tabView_ setTabViewType:NSTopTabsBezelBorder];
+  [tabView_ setTabViewType:NSNoTabsNoBorder];
+  [tabView_ setDrawsBackground:NO];
   [tabView_ setControlSize:NSSmallControlSize];
-  [tabView_ setFont:[NSFont systemFontOfSize:[NSFont smallSystemFontSize]]];
   [contentView_ addSubview:tabView_.get()];
 
   permissionsContentView_ = [self addPermissionsTabToTabView:tabView_];
   [self addConnectionTabToTabView:tabView_];
 
   // Replace the window's content.
   [[[self window] contentView] setSubviews:
       [NSArray arrayWithObject:contentView_.get()]];
 
   [self performLayout];
 }
 
 // Create the contents of the Permissions tab and add it to the given tab view.
 // Returns a weak reference to the tab view item's view.
 - (NSView*)addPermissionsTabToTabView:(NSTabView*)tabView {
   scoped_nsobject<NSTabViewItem> item([[NSTabViewItem alloc] init]);
-  [item setLabel:
-      l10n_util::GetNSString(IDS_WEBSITE_SETTINGS_TAB_LABEL_PERMISSIONS)];
   [tabView_ addTabViewItem:item.get()];
   scoped_nsobject<NSView> contentView([[WebsiteSettingsContentView alloc]
       initWithFrame:[tabView_ contentRect]]);
   [item setView:contentView.get()];
   return contentView.get();
 }
 
 // Create the contents of the Connection tab and add it to the given tab view.
 // Returns a weak reference to the tab view item's view.
 - (NSView*)addConnectionTabToTabView:(NSTabView*)tabView {
   scoped_nsobject<NSTabViewItem> item([[NSTabViewItem alloc] init]);
-  [item setLabel:
-      l10n_util::GetNSString(IDS_WEBSITE_SETTINGS_TAB_LABEL_CONNECTION)];
-
   scoped_nsobject<NSView> contentView([[WebsiteSettingsContentView alloc]
       initWithFrame:[tabView_ contentRect]]);
 
   // Place all the text at the same position. It will be adjusted in
   // performLayout.
   NSPoint textPosition = NSMakePoint(
       kTabViewContentsPadding + kImageSize + kImageSpacing,
       kTabViewContentsPadding);
 
   identityStatusIcon_ =
@@ skipping 77 matching lines @@
 
   // Lay out the last visit section.
   [self setYPositionOfView:firstVisitIcon_ to:yPos];
   [self sizeTextFieldHeightToFit:firstVisitHeaderField_];
   yPos = [self setYPositionOfView:firstVisitHeaderField_ to:yPos];
   yPos += kHeadlineSpacing;
   [self sizeTextFieldHeightToFit:firstVisitDescriptionField_];
   [self setYPositionOfView:firstVisitDescriptionField_ to:yPos];
 
   // Adjust the tab view size and place it below the identity status.
+
+  NSRect segmentedControlFrame = [segmentedControl_ frame];
+  segmentedControlFrame.origin.y =
+      NSMaxY([identityStatusField_ frame]);
+  [segmentedControl_ setFrame:segmentedControlFrame];
+
   NSRect tabViewFrame = [tabView_ frame];
-  tabViewFrame.origin.y =
-      NSMaxY([identityStatusField_ frame]) + kVerticalSpacing;
+  tabViewFrame.origin.y = NSMaxY(segmentedControlFrame);
 
   CGFloat connectionTabHeight = std::max(
       NSMaxY([firstVisitDescriptionField_ frame]),
       NSMaxY([firstVisitIcon_ frame ]));
   connectionTabHeight += kVerticalSpacing;
 
   CGFloat tabContentHeight = std::max(connectionTabHeight,
                                       permissionsTabHeight_);
   tabViewFrame.size.height = tabContentHeight +
       NSHeight(tabViewFrame) - NSHeight([tabView_ contentRect]);
@@ skipping 179 matching lines @@
 
   [button setAction:@selector(permissionValueChanged:)];
   [button setTarget:self];
 
   [self setTitleOfButton:button];
 
   [view addSubview:button.get()];
   return button.get();
 }
 
+- (void)tabSelected:(id)sender {
+  [tabView_ selectTabViewItemAtIndex:[segmentedControl_ selectedSegment]];
+}
+
 // Handler for the permission-changing menus.
 - (void)permissionValueChanged:(id)sender {
   DCHECK([sender isKindOfClass:[NSPopUpButton class]]);
   NSPopUpButton* button = static_cast<NSPopUpButton*>(sender);
   ContentSettingsType type = static_cast<ContentSettingsType>([button tag]);
   ContentSetting newSetting = [self contentSettingForButton:button];
 
   [self setTitleOfButton:button];
   if (presenter_.get())
     presenter_->OnSitePermissionChanged(type, newSetting);
@@ skipping 129 matching lines @@
 }
 
 void WebsiteSettingsUIBridge::SetIdentityInfo(
     const WebsiteSettingsUI::IdentityInfo& identity_info) {
   [bubble_controller_ setIdentityInfo:identity_info];
 }
 
 void WebsiteSettingsUIBridge::SetFirstVisit(const string16& first_visit) {
   [bubble_controller_ setFirstVisit:first_visit];
 }