Convert OSX Page Info Bubble to Material Design

chrome/browser/ui/cocoa/website_settings/website_settings_bubble_controller.mm

Index: chrome/browser/ui/cocoa/website_settings/website_settings_bubble_controller.mm
diff --git a/chrome/browser/ui/cocoa/website_settings/website_settings_bubble_controller.mm b/chrome/browser/ui/cocoa/website_settings/website_settings_bubble_controller.mm
index 9e9e2462a38226a604b3ebc93df677e71fc726b5..81780f12f17a35e8c31da2dcd5b7d421442d0c7f 100644
--- a/chrome/browser/ui/cocoa/website_settings/website_settings_bubble_controller.mm
+++ b/chrome/browser/ui/cocoa/website_settings/website_settings_bubble_controller.mm
@@ -59,61 +59,58 @@ using ChosenObjectDeleteCallback =
 
 namespace {
 
+// NOTE: This assumes that there will never be more than one website settings
+// popup shown, and that the one that is shown is associated with the current
+// window. This matches the behaviour in views: see WebsiteSettingsPopupView.
+bool g_is_popup_showing = false;
+
+/**************** General ****************/
+
 // The default width of the window, in view coordinates. It may be larger to
 // fit the content.
-const CGFloat kDefaultWindowWidth = 310;
+const CGFloat kDefaultWindowWidth = 320;
 
-// Padding between the window frame and content.
-const CGFloat kFramePadding = 20;
+// Padding around each section
+const CGFloat kSectionVerticalPadding = 20;
+const CGFloat kSectionHorizontalPadding = 16;
 
-// Padding between the window frame and content.
-const CGFloat kVerticalSectionMargin = 16;
-
-// Padding between the window frame and content for the internal page bubble.
-const CGFloat kInternalPageFramePadding = 10;
+/**************** Security Section ****************/
 
-// Spacing between the identity field and the security summary.
-const CGFloat kSpacingBeforeSecuritySummary = 2;
+// Tweak to move the security summary up.
+const CGFloat kSecuritySummaryYAdjustment = -6;
 
-// Spacing between the security summary and the reset decisions button.
-const CGFloat kSpacingBeforeResetDecisionsButton = 8;
+// Spacing between security summary, security details, and cert decisions text.
+const CGFloat kSecurityParagraphSpacing = 12;
 
-// Spacing between parts of the site settings section.
-const CGFloat kSiteSettingsSectionSpacing = 2;
+/**************** Site Settings Section ****************/
 
-// Spacing between the image and text for internal pages.
-const CGFloat kInternalPageImageSpacing = 10;
+// The amount of padding to *remove* when placing
+// |IDS_WEBSITE_SETTINGS_{FIRST,THIRD}_PARTY_SITE_DATA| next to each other.
+const CGFloat kCookieCountXAdjustment = 5;
 
 // Square size of the permission images.
-const CGFloat kPermissionImageSize = 19;
+const CGFloat kPermissionImageSize = 16;
+
+// Spacing between a permission image and the text.
+const CGFloat kPermissionImageSpacing = 6;
 
 // Square size of the permission delete button image.
 const CGFloat kPermissionDeleteImageSize = 16;
 
-// Vertical adjustment for the permission images. They have an extra pixel of
-// padding on the bottom edge.
-const CGFloat kPermissionImageYAdjust = 1;
-
-// Spacing between a permission image and the text.
-const CGFloat kPermissionImageSpacing = 3;
-
-// The spacing between individual items in the Permissions tab.
-const CGFloat kPermissionsTabSpacing = 12;
+// The spacing between individual permissions.
+const CGFloat kPermissionsVerticalSpacing = 16;
 
-// Extra spacing after a headline on the Permissions tab.
-const CGFloat kPermissionsHeadlineSpacing = 2;
+// Amount to lower each permission popup button to make its text align with the
+// permission label.
+const CGFloat kPermissionPopupButtonYAdjustment = 3;
 
-// The amount of horizontal space between a permission label and the popup.
-const CGFloat kPermissionPopUpXSpacing = 3;
+/**************** Internal Page Bubble ****************/
 
-// The amount of padding to *remove* when placing
-// |IDS_WEBSITE_SETTINGS_{FIRST,THIRD}_PARTY_SITE_DATA| next to each other.
-const CGFloat kTextLabelXPadding = 5;
+// Padding between the window frame and content for the internal page bubble.
+const CGFloat kInternalPageFramePadding = 10;
 
-// NOTE: This assumes that there will never be more than one website settings
-// popup shown, and that the one that is shown is associated with the current
-// window. This matches the behaviour in views: see WebsiteSettingsPopupView.
-bool g_is_popup_showing = false;
+// Spacing between the image and text for internal pages.
+const CGFloat kInternalPageImageSpacing = 10;
 
 // Takes in the parent window, which should be a BrowserWindow, and gets the
 // proper anchor point for the bubble. The returned point is in screen
@@ -131,6 +128,17 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   return origin;
 }
 
+// Copied from omnibox_view_mac.mm
+NSColor* ColorWithRGBBytes(int rr, int gg, int bb) {
+  DCHECK_LE(rr, 255);
+  DCHECK_LE(bb, 255);
+  DCHECK_LE(gg, 255);
+  return [NSColor colorWithCalibratedRed:static_cast<float>(rr) / 255.0
+                                   green:static_cast<float>(gg) / 255.0
+                                    blue:static_cast<float>(bb) / 255.0
+                                   alpha:1.0];
+}
+
 }  // namespace
 
 @interface ChosenObjectDeleteButton : HoverImageButton {
@@ -280,8 +288,8 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
   // Adjust the contentView to fit everything.
   CGFloat maxY = std::max(NSMaxY(imageFrame), NSMaxY(textFrame));
-  [contentView_ setFrame:NSMakeRect(
-      0, 0, [self defaultWindowWidth], maxY + kInternalPageFramePadding)];
+  [contentView_ setFrame:NSMakeRect(0, 0, [self defaultWindowWidth],
+                                    maxY + kInternalPageFramePadding)];
 
   [self sizeAndPositionWindow];
 }
@@ -304,23 +312,24 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
   // Create a controlOrigin to place the text fields. The y value doesn't
   // matter, because the correct value is calculated in -performLayout.
-  NSPoint controlOrigin = NSMakePoint(kFramePadding, 0);
-
-  // Create a text field (empty for now) to show the site identity.
-  identityField_ = [self addText:base::string16()
-                        withSize:[NSFont systemFontSize]
-                            bold:YES
-                          toView:securitySectionView
-                         atPoint:controlOrigin];
+  NSPoint controlOrigin = NSMakePoint(kSectionHorizontalPadding, 0);
 
   // Create a text field for the security summary (private/not private/etc.).
   securitySummaryField_ = [self addText:base::string16()
+                               withSize:[NSFont systemFontSize]
+                                   bold:NO
+                                 toView:securitySectionView
+                                atPoint:controlOrigin];
+
+  securityDetailsField_ = [self addText:base::string16()
                                withSize:[NSFont smallSystemFontSize]
                                    bold:NO
                                  toView:securitySectionView
                                 atPoint:controlOrigin];
 
-  resetDecisionsButton_ = nil;  // This will be created only if necessary.
+  // These will be created only if necessary.
+  resetDecisionsField_ = nil;
+  resetDecisionsButton_ = nil;
 
   NSString* securityDetailsButtonText =
       l10n_util::GetNSString(IDS_WEBSITE_SETTINGS_DETAILS_LINK);
@@ -358,6 +367,10 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
       l10n_util::GetNSString(IDS_PAGE_INFO_SITE_SETTINGS_LINK);
   siteSettingsButton_ = [self addLinkButtonWithText:siteSettingsButtonText
                                              toView:siteSettingsSectionView];
+  NSFont* font = [NSFont boldSystemFontOfSize:[NSFont smallSystemFontSize]];
+  [siteSettingsButton_ setFont:font];
+  [GTMUILocalizerAndLayoutTweaker sizeToFitView:siteSettingsButton_];
+
   [siteSettingsButton_ setTarget:self];
   [siteSettingsButton_ setAction:@selector(showSiteSettingsData:)];
 
@@ -450,17 +463,17 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   CGFloat yPos = info_bubble::kBubbleArrowHeight;
 
   [self layoutSecuritySection];
-  yPos = [self setYPositionOfView:securitySectionView_ to:yPos + kFramePadding];
+  yPos = [self setYPositionOfView:securitySectionView_ to:yPos];
 
   yPos = [self setYPositionOfView:separatorAfterSecuritySection_
-                               to:yPos + kVerticalSectionMargin];
+                               to:yPos + kSectionHorizontalPadding];
 
   [self layoutSiteSettingsSection];
   yPos = [self setYPositionOfView:siteSettingsSectionView_
-                               to:yPos + kVerticalSectionMargin];
+                               to:yPos + kSectionHorizontalPadding];
 
   [contentView_ setFrame:NSMakeRect(0, 0, NSWidth([contentView_ frame]),
-                                    yPos + kFramePadding)];
+                                    yPos + kSectionVerticalPadding)];
 
   [self sizeAndPositionWindow];
 }
@@ -469,12 +482,14 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   // Start the layout with the first element. Margins are handled by the caller.
   CGFloat yPos = 0;
 
-  [self sizeTextFieldHeightToFit:identityField_];
-  yPos = [self setYPositionOfView:identityField_ to:yPos];
-
   [self sizeTextFieldHeightToFit:securitySummaryField_];
   yPos = [self setYPositionOfView:securitySummaryField_
-                               to:yPos + kSpacingBeforeSecuritySummary];
+                               to:yPos + kSectionVerticalPadding +
+                                  kSecuritySummaryYAdjustment];
+
+  [self sizeTextFieldHeightToFit:securityDetailsField_];
+  yPos = [self setYPositionOfView:securityDetailsField_
+                               to:yPos + kSecurityParagraphSpacing];
 
   if (isDevToolsDisabled_ && certificateId_ == 0) {
     // -removeFromSuperview is idempotent.
@@ -486,8 +501,10 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   }
 
   if (resetDecisionsButton_) {
-    yPos = [self setYPositionOfView:resetDecisionsButton_
-                                 to:yPos + kSpacingBeforeResetDecisionsButton];
+    DCHECK(resetDecisionsField_);
+    yPos = [self setYPositionOfView:resetDecisionsField_
+                                 to:yPos + kSecurityParagraphSpacing];
+    yPos = [self setYPositionOfView:resetDecisionsButton_ to:yPos];
   }
 
   // Resize the height based on contents.
@@ -502,15 +519,15 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
   if (permissionsPresent_) {
     // Put the permission info just below the link button.
-    yPos = [self setYPositionOfView:permissionsView_
-                                 to:yPos + kSiteSettingsSectionSpacing];
+    yPos = [self setYPositionOfView:permissionsView_ to:yPos];
   }
 
   // Put the link button for site settings just below the permissions.
   // TODO(lgarron): set the position of this based on RTL/LTR.
   // http://code.google.com/p/chromium/issues/detail?id=525304
-  yPos += kSiteSettingsSectionSpacing;
-  [siteSettingsButton_ setFrameOrigin:NSMakePoint(kFramePadding, yPos)];
+  CGFloat xPos = kDefaultWindowWidth - kSectionVerticalPadding -
+                 NSWidth([siteSettingsButton_ frame]);
+  [siteSettingsButton_ setFrameOrigin:NSMakePoint(xPos, yPos)];
   yPos = NSMaxY([siteSettingsButton_ frame]);
 
   // Resize the height based on contents.
@@ -565,7 +582,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
                 atPoint:(NSPoint)point {
   // Size the text to take up the full available width, with some padding.
   // The height is arbitrary as it will be adjusted later.
-  CGFloat width = NSWidth([view frame]) - point.x - kFramePadding;
+  CGFloat width = NSWidth([view frame]) - point.x - kSectionHorizontalPadding;
   NSRect frame = NSMakeRect(point.x, point.y, width, 100);
   base::scoped_nsobject<NSTextField> textField(
       [[NSTextField alloc] initWithFrame:frame]);
@@ -605,7 +622,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 // Add a link button with the given text to |view|.
 - (NSButton*)addLinkButtonWithText:(NSString*)text toView:(NSView*)view {
   // Frame size is arbitrary; it will be adjusted by the layout tweaker.
-  NSRect frame = NSMakeRect(kFramePadding, 0, 100, 10);
+  NSRect frame = NSMakeRect(kSectionHorizontalPadding, 0, 100, 10);
   base::scoped_nsobject<NSButton> button(
       [[NSButton alloc] initWithFrame:frame]);
   base::scoped_nsobject<HyperlinkButtonCell> cell(
@@ -625,7 +642,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 - (NSButton*)addButtonWithText:(NSString*)text toView:(NSView*)view {
   NSRect containerFrame = [view frame];
   // Frame size is arbitrary; it will be adjusted by the layout tweaker.
-  NSRect frame = NSMakeRect(kFramePadding, 0, 100, 10);
+  NSRect frame = NSMakeRect(kSectionHorizontalPadding, 0, 100, 10);
   base::scoped_nsobject<NSButton> button(
       [[NSButton alloc] initWithFrame:frame]);
 
@@ -633,7 +650,8 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   // of the connection section minus the padding on both sides minus the
   // connection image size and spacing.
   // TODO(lgarron): handle this sizing in -performLayout.
-  CGFloat maxTitleWidth = containerFrame.size.width - kFramePadding * 2;
+  CGFloat maxTitleWidth =
+      containerFrame.size.width - kSectionHorizontalPadding * 2;
 
   base::scoped_nsobject<NSButtonCell> cell(
       [[NSButtonCell alloc] initTextCell:text]);
@@ -655,18 +673,47 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
 // Set the content of the identity and identity status fields.
 - (void)setIdentityInfo:(const WebsiteSettingsUI::IdentityInfo&)identityInfo {
-  [identityField_
-      setStringValue:base::SysUTF8ToNSString(identityInfo.site_identity)];
-  [securitySummaryField_ setStringValue:base::SysUTF16ToNSString(
-                                            identityInfo.GetSecuritySummary())];
+  std::unique_ptr<WebsiteSettingsUI::SecurityDescription> security_description =
+      identityInfo.GetSecurityDescription();
+  [securitySummaryField_
+      setStringValue:base::SysUTF16ToNSString(security_description->summary)];
+
+  switch (security_description->summary_style) {
+    case WebsiteSettingsUI::STYLE_DEFAULT:
+      break;
+    case WebsiteSettingsUI::STYLE_GREEN:
+      [securitySummaryField_ setTextColor:ColorWithRGBBytes(0x0B, 0x80, 0x43)];

[Robert Sesek, 2016/06/29 18:22:06]

Are these colors going to be the same on Mac and other platforms? If so, you
could add a method SecurityDescription to get the SkColor for the summary_style.

[lgarron, 2016/06/29 20:04:41]

Sharing sounds good. iOS seems to have a utility for converting an SkColor to
UIColor[1]; is there something I can use on desktop Mac?

[1]
https://cs.chromium.org/chromium/src/skia/ext/skia_utils_ios.mm?q=SkColor+fil...

[Robert Sesek, 2016/06/29 20:15:02]

Did you check skia_utils_mac.h? ;-)

[lgarron, 2016/07/08 17:47:08]

I didn't find it. ;-)
Thanks for the pointer; I've used it.

+      break;
+    case WebsiteSettingsUI::STYLE_YELLOW:
+      [securitySummaryField_ setTextColor:ColorWithRGBBytes(0xF1, 0x9D, 0x28)];
+      break;
+    case WebsiteSettingsUI::STYLE_RED:
+      [securitySummaryField_ setTextColor:ColorWithRGBBytes(0xC5, 0x39, 0x29)];
+      break;
+  }
+
+  [securityDetailsField_
+      setStringValue:SysUTF16ToNSString(security_description->details)];
 
   certificateId_ = identityInfo.cert_id;
 
   if (certificateId_ &&  identityInfo.show_ssl_decision_revoke_button) {
-    NSString* text = l10n_util::GetNSString(
-        IDS_PAGEINFO_RESET_INVALID_CERTIFICATE_DECISIONS_BUTTON);
+    resetDecisionsField_ =
+        [self addText:base::string16()
+             withSize:[NSFont smallSystemFontSize]
+                 bold:NO
+               toView:securitySectionView_
+              atPoint:NSMakePoint(kSectionHorizontalPadding, 0)];
+    [resetDecisionsField_
+        setStringValue:l10n_util::GetNSString(
+                           IDS_PAGEINFO_INVALID_CERTIFICATE_DESCRIPTION)];
+    [self sizeTextFieldHeightToFit:resetDecisionsField_];
+
     resetDecisionsButton_ =
-        [self addButtonWithText:text toView:securitySectionView_];
+        [self addLinkButtonWithText:
+                  l10n_util::GetNSString(
+                      IDS_PAGEINFO_RESET_INVALID_CERTIFICATE_DECISIONS_BUTTON)
+                             toView:securitySectionView_];
     [resetDecisionsButton_ setTarget:self];
     [resetDecisionsButton_ setAction:@selector(resetCertificateDecisions:)];
   }
@@ -690,6 +737,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
       [[PermissionSelectorButton alloc] initWithPermissionInfo:permissionInfo
                                                         forURL:url
                                                   withCallback:callback]);
+
   // Determine the largest possible size for this button.
   CGFloat maxTitleWidth = [button
       maxTitleWidthForContentSettingsType:permissionInfo.type
@@ -698,8 +746,9 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   // Ensure the containing view is large enough to contain the button with its
   // widest possible title.
   NSRect containerFrame = [view frame];
-  containerFrame.size.width = std::max(
-      NSWidth(containerFrame), point.x + maxTitleWidth + kFramePadding);
+  containerFrame.size.width =
+      std::max(NSWidth(containerFrame),
+               point.x + maxTitleWidth + kSectionHorizontalPadding);
   [view setFrame:containerFrame];
   [view addSubview:button.get()];
   return button.get();
@@ -723,8 +772,8 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   // Ensure the containing view is large enough to contain the button.
   NSRect containerFrame = [view frame];
   containerFrame.size.width =
-      std::max(NSWidth(containerFrame),
-               point.x + kPermissionDeleteImageSize + kFramePadding);
+      std::max(NSWidth(containerFrame), point.x + kPermissionDeleteImageSize +
+                                            kSectionHorizontalPadding);
   [view setFrame:containerFrame];
   [view addSubview:button.get()];
   return button.get();
@@ -751,8 +800,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
                   toView:(NSView*)view
                  atPoint:(NSPoint)point {
   base::string16 labelText =
-      WebsiteSettingsUI::PermissionTypeToUIString(permissionInfo.type) +
-      base::ASCIIToUTF16(":");
+      WebsiteSettingsUI::PermissionTypeToUIString(permissionInfo.type);
   bool isRTL =
       base::i18n::RIGHT_TO_LEFT == base::i18n::GetStringDirection(labelText);
   base::scoped_nsobject<NSImage> image(
@@ -768,13 +816,13 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
   if (isRTL) {
     point.x = NSWidth([view frame]) - kPermissionImageSize -
-              kPermissionImageSpacing - kFramePadding;
+              kPermissionImageSpacing - kSectionHorizontalPadding;
     imageView = [self addImageWithSize:[image size] toView:view atPoint:point];
     [imageView setImage:image];
     point.x -= kPermissionImageSpacing;
 
     label = [self addText:labelText
-                 withSize:[NSFont smallSystemFontSize]
+                 withSize:[NSFont systemFontSize]
                      bold:NO
                    toView:view
                   atPoint:point];
@@ -782,7 +830,8 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
     point.x -= NSWidth([label frame]);
     [label setFrameOrigin:point];
 
-    position = NSMakePoint(point.x, point.y);
+    position =
+        NSMakePoint(point.x, point.y + kPermissionPopupButtonYAdjustment);
     button = [self addPopUpButtonForPermission:permissionInfo
                                         toView:view
                                        atPoint:position];
@@ -794,13 +843,15 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
     point.x += kPermissionImageSize + kPermissionImageSpacing;
 
     label = [self addText:labelText
-                 withSize:[NSFont smallSystemFontSize]
+                 withSize:[NSFont systemFontSize]
                      bold:NO
                    toView:view
                   atPoint:point];
     [label sizeToFit];
 
-    position = NSMakePoint(NSMaxX([label frame]), point.y);
+    position = NSMakePoint(NSMaxX([label frame]),
+                           point.y + kPermissionPopupButtonYAdjustment);
+
     button = [self addPopUpButtonForPermission:permissionInfo
                                         toView:view
                                        atPoint:position];
@@ -814,9 +865,10 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   // invisible bezel.
   NSRect titleRect = [[button cell] titleRectForBounds:[button bounds]];
   if (isRTL) {
-    position.x += kPermissionPopUpXSpacing;
+    position.x = kSectionHorizontalPadding;
   } else {
-    position.x -= titleRect.origin.x - kPermissionPopUpXSpacing;
+    position.x = kDefaultWindowWidth - kSectionHorizontalPadding -
+                 [button frame].size.width;
   }
   position.y -= titleRect.origin.y;
   [button setFrameOrigin:position];
@@ -858,7 +910,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
   if (isRTL) {
     point.x = NSWidth([view frame]) - kPermissionImageSize -
-              kPermissionImageSpacing - kFramePadding;
+              kPermissionImageSpacing - kSectionHorizontalPadding;
     imageView = [self addImageWithSize:[image size] toView:view atPoint:point];
     [imageView setImage:image];
     point.x -= kPermissionImageSpacing;
@@ -904,9 +956,7 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   // invisible bezel.
   NSRect titleRect = [[button cell] titleRectForBounds:[button bounds]];
   if (isRTL) {
-    position.x += kPermissionPopUpXSpacing;
-  } else {
-    position.x -= titleRect.origin.x - kPermissionPopUpXSpacing;
+    // position.x += BYEkPermissionPopUpXSpacing; // TODO

[Robert Sesek, 2016/06/29 18:22:06]

?

[lgarron, 2016/06/29 20:04:41]

I did a lot of simplifications of constants. This one needs to go BYE. :-P

   }
   position.y -= titleRect.origin.y;
   [button setFrameOrigin:position];
@@ -926,8 +976,8 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 
   // Calculate the offset from the top of the text field.
   CGFloat capHeight = [font capHeight];
-  CGFloat offset = (kPermissionImageSize - capHeight) / 2 -
-      ([font ascender] - capHeight) - kPermissionImageYAdjust;
+  CGFloat offset =
+      (kPermissionImageSize - capHeight) / 2 - ([font ascender] - capHeight);
 
   NSRect frame = [imageView frame];
   frame.origin.y -= offset;
@@ -960,30 +1010,16 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
                base::i18n::GetStringDirection(firstPartyLabelText);
 
   [cookiesView_ setSubviews:[NSArray array]];
-  NSPoint controlOrigin = NSMakePoint(kFramePadding, 0);
+  NSPoint controlOrigin = NSMakePoint(kSectionHorizontalPadding, 0);
 
   NSTextField* label;
 
   CGFloat viewWidth = NSWidth([cookiesView_ frame]);
 
-  NSTextField* header = [self addText:sectionTitle
-                             withSize:[NSFont smallSystemFontSize]
-                                 bold:YES
-                               toView:cookiesView_
-                              atPoint:controlOrigin];
-  [header sizeToFit];
-
-  if (isRTL) {
-    controlOrigin.x = viewWidth - kFramePadding - NSWidth([header frame]);
-    [header setFrameOrigin:controlOrigin];
-  }
-  controlOrigin.y += NSHeight([header frame]) + kPermissionsHeadlineSpacing;
-  controlOrigin.y += kPermissionsTabSpacing;
-
   // Reset X for the cookie image.
   if (isRTL) {
     controlOrigin.x = viewWidth - kPermissionImageSize -
-                      kPermissionImageSpacing - kFramePadding;
+                      kPermissionImageSpacing - kSectionHorizontalPadding;
   }
 
   WebsiteSettingsUI::PermissionInfo info;
@@ -1000,11 +1036,29 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
   base::string16 comma = base::ASCIIToUTF16(", ");
   NSString* cookieButtonText = base::SysUTF16ToNSString(firstPartyLabelText);
 
+  NSButton* cookiesButton =
+      [self addLinkButtonWithText:cookieButtonText toView:cookiesView_];
+  [cookiesButton setTarget:self];
+  [cookiesButton setAction:@selector(showCookiesAndSiteData:)];
+
   if (isRTL) {
-    NSButton* cookiesButton =
-        [self addLinkButtonWithText:cookieButtonText toView:cookiesView_];
-    [cookiesButton setTarget:self];
-    [cookiesButton setAction:@selector(showCookiesAndSiteData:)];
+    controlOrigin.x -= kPermissionImageSpacing;
+    NSTextField* cookiesLabel =
+        [self addText:l10n_util::GetStringUTF16(IDS_PAGE_INFO_COOKIES)
+             withSize:[NSFont systemFontSize]
+                 bold:NO
+               toView:cookiesView_
+              atPoint:controlOrigin];
+    [cookiesLabel sizeToFit];
+
+    NSPoint cookiesLabelOrigin = [cookiesLabel frame].origin;
+    cookiesLabelOrigin.x -= NSWidth([cookiesLabel frame]);
+    [cookiesLabel setFrameOrigin:cookiesLabelOrigin];
+
+    // Align the icon with the text.
+    [self alignPermissionIcon:imageView withTextField:cookiesLabel];
+
+    controlOrigin.y += NSHeight([cookiesLabel frame]);
     controlOrigin.x -= NSWidth([cookiesButton frame]);
     [cookiesButton setFrameOrigin:controlOrigin];
 
@@ -1014,18 +1068,24 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
                    toView:cookiesView_
                   atPoint:controlOrigin];
     [label sizeToFit];
-    controlOrigin.x -= NSWidth([label frame]) - kTextLabelXPadding;
+    controlOrigin.x -= NSWidth([label frame]) - kCookieCountXAdjustment;
     [label setFrameOrigin:controlOrigin];
   } else {
     controlOrigin.x += kPermissionImageSize + kPermissionImageSpacing;
-
-    NSButton* cookiesButton =
-        [self addLinkButtonWithText:cookieButtonText toView:cookiesView_];
-    [cookiesButton setTarget:self];
-    [cookiesButton setAction:@selector(showCookiesAndSiteData:)];
+    NSTextField* cookiesLabel =
+        [self addText:l10n_util::GetStringUTF16(IDS_PAGE_INFO_COOKIES)
+             withSize:[NSFont systemFontSize]
+                 bold:NO
+               toView:cookiesView_
+              atPoint:controlOrigin];
+
+    controlOrigin.y += NSHeight([cookiesLabel frame]);
     [cookiesButton setFrameOrigin:controlOrigin];
 
-    controlOrigin.x += NSWidth([cookiesButton frame]) - kTextLabelXPadding;
+    // Align the icon with the text.
+    [self alignPermissionIcon:imageView withTextField:cookiesLabel];
+
+    controlOrigin.x += NSWidth([cookiesButton frame]) - kCookieCountXAdjustment;
 
     label = [self addText:comma + thirdPartyLabelText
                  withSize:[NSFont smallSystemFontSize]
@@ -1035,13 +1095,10 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
     [label sizeToFit];
   }
 
-  // Align the icon with the text.
-  [self alignPermissionIcon:imageView withTextField:label];
-
-  controlOrigin.y += NSHeight([label frame]) + kPermissionsTabSpacing;
+  controlOrigin.y += NSHeight([label frame]);
 
-  [cookiesView_ setFrameSize:
-      NSMakeSize(NSWidth([cookiesView_ frame]), controlOrigin.y)];
+  [cookiesView_
+      setFrameSize:NSMakeSize(NSWidth([cookiesView_ frame]), controlOrigin.y)];
 
   [self performLayout];
 }
@@ -1049,30 +1106,16 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
 - (void)setPermissionInfo:(const PermissionInfoList&)permissionInfoList
          andChosenObjects:(const ChosenObjectInfoList&)chosenObjectInfoList {
   [permissionsView_ setSubviews:[NSArray array]];
-  NSPoint controlOrigin = NSMakePoint(kFramePadding, 0);
+  NSPoint controlOrigin = NSMakePoint(kSectionHorizontalPadding, 0);
 
   permissionsPresent_ = YES;
 
   if (permissionInfoList.size() > 0 || chosenObjectInfoList.size() > 0) {
     base::string16 sectionTitle = l10n_util::GetStringUTF16(
         IDS_WEBSITE_SETTINGS_TITLE_SITE_PERMISSIONS);
-    bool isRTL = base::i18n::RIGHT_TO_LEFT ==
-                 base::i18n::GetStringDirection(sectionTitle);
-    NSTextField* header = [self addText:sectionTitle
-                               withSize:[NSFont smallSystemFontSize]
-                                   bold:YES
-                                 toView:permissionsView_
-                                atPoint:controlOrigin];
-    [header sizeToFit];
-    if (isRTL) {
-      controlOrigin.x = NSWidth([permissionsView_ frame]) - kFramePadding -
-                        NSWidth([header frame]);
-      [header setFrameOrigin:controlOrigin];
-    }
-    controlOrigin.y += NSHeight([header frame]) + kPermissionsHeadlineSpacing;
 
     for (const auto& permission : permissionInfoList) {
-      controlOrigin.y += kPermissionsTabSpacing;
+      controlOrigin.y += kPermissionsVerticalSpacing;
       NSPoint rowBottomRight = [self addPermission:permission
                                             toView:permissionsView_
                                            atPoint:controlOrigin];
@@ -1080,14 +1123,14 @@ NSPoint AnchorPointForWindow(NSWindow* parent) {
     }
 
     for (auto object : chosenObjectInfoList) {
-      controlOrigin.y += kPermissionsTabSpacing;
+      controlOrigin.y += kPermissionsVerticalSpacing;
       NSPoint rowBottomRight = [self addChosenObject:base::WrapUnique(object)
                                               toView:permissionsView_
                                              atPoint:controlOrigin];
       controlOrigin.y = rowBottomRight.y;
     }
 
-    controlOrigin.y += kFramePadding;
+    controlOrigin.y += kSectionHorizontalPadding;
   }
 
   [permissionsView_ setFrameSize: