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 1968d1ecb64a3189e851d3fd0c660e8d6e84e1da..afe39281fea110625d5f6dbf41c8b0b3dd799b96 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
@@ -40,6 +40,7 @@
 #include "extensions/common/constants.h"
 #include "grit/components_chromium_strings.h"
 #include "grit/components_strings.h"
+#include "skia/ext/skia_utils_mac.h"
 #import "third_party/google_toolbox_for_mac/src/AppKit/GTMUILocalizerAndLayoutTweaker.h"
 #include "ui/base/cocoa/cocoa_base_utils.h"
 #import "ui/base/cocoa/controls/hyperlink_button_cell.h"
@@ -58,61 +59,62 @@ 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;
+// Links are buttons with invisible padding, so we need to move them back to
+// align with other text.
+const CGFloat kLinkButtonXAdjustment = 1;
 
-// 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;
-
-// Spacing between the image and text for internal pages.
-const CGFloat kInternalPageImageSpacing = 10;
+/**************** Site Settings Section ****************/
 
 // 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 permissions.
+const CGFloat kPermissionsVerticalSpacing = 16;
 
-// The spacing between individual items in the Permissions tab.
-const CGFloat kPermissionsTabSpacing = 12;
+// Amount to lower each permission icon to align the icon baseline with the
+// label text.
+const CGFloat kPermissionIconYAdjustment = 1;
 
-// 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
@@ -292,8 +294,8 @@ bool IsInternalURL(const GURL& url) {
 
   // 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];
 }
@@ -316,23 +318,24 @@ bool IsInternalURL(const GURL& url) {
 
   // 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);
@@ -368,8 +371,10 @@ bool IsInternalURL(const GURL& url) {
   // performLayout.
   NSString* siteSettingsButtonText =
       l10n_util::GetNSString(IDS_PAGE_INFO_SITE_SETTINGS_LINK);
-  siteSettingsButton_ = [self addLinkButtonWithText:siteSettingsButtonText
-                                             toView:siteSettingsSectionView];
+  siteSettingsButton_ = [self addButtonWithText:siteSettingsButtonText
+                                         toView:siteSettingsSectionView];
+  [GTMUILocalizerAndLayoutTweaker sizeToFitView:siteSettingsButton_];
+
   [siteSettingsButton_ setTarget:self];
   [siteSettingsButton_ setAction:@selector(showSiteSettingsData:)];
 
@@ -429,6 +434,18 @@ bool IsInternalURL(const GURL& url) {
   [self close];
 }
 
+- (CGFloat)layoutViewAtRTLStart:(NSView*)view withYPosition:(CGFloat)yPos {
+  CGFloat xPos;
+  if (base::i18n::IsRTL()) {
+    xPos =
+        kDefaultWindowWidth - kSectionHorizontalPadding - NSWidth([view frame]);
+  } else {
+    xPos = kSectionHorizontalPadding;
+  }
+  [view setFrameOrigin:NSMakePoint(xPos, yPos)];
+  return yPos + NSHeight([view frame]);
+}
+
 // Set the Y position of |view| to the given position, and return the position
 // of its bottom edge.
 - (CGFloat)setYPositionOfView:(NSView*)view to:(CGFloat)position {
@@ -462,17 +479,17 @@ bool IsInternalURL(const GURL& url) {
   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];
 }
@@ -481,12 +498,14 @@ bool IsInternalURL(const GURL& url) {
   // 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.
@@ -494,12 +513,22 @@ bool IsInternalURL(const GURL& url) {
   } else {
     // -addSubview is idempotent.
     [securitySectionView_ addSubview:securityDetailsButton_];
-    yPos = [self setYPositionOfView:securityDetailsButton_ to:yPos];
+    [securityDetailsButton_
+        setFrameOrigin:NSMakePoint(
+                           kSectionHorizontalPadding - kLinkButtonXAdjustment,
+                           yPos)];
+    yPos = NSMaxY([securityDetailsButton_ frame]);
   }
 
   if (resetDecisionsButton_) {
-    yPos = [self setYPositionOfView:resetDecisionsButton_
-                                 to:yPos + kSpacingBeforeResetDecisionsButton];
+    DCHECK(resetDecisionsField_);
+    yPos = [self setYPositionOfView:resetDecisionsField_
+                                 to:yPos + kSecurityParagraphSpacing];
+    [resetDecisionsButton_
+        setFrameOrigin:NSMakePoint(NSMinX([resetDecisionsButton_ frame]) -
+                                       kLinkButtonXAdjustment,
+                                   yPos)];
+    yPos = NSMaxY([resetDecisionsButton_ frame]);
   }
 
   // Resize the height based on contents.
@@ -514,16 +543,10 @@ bool IsInternalURL(const GURL& url) {
 
   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)];
-  yPos = NSMaxY([siteSettingsButton_ frame]);
+  yPos = [self layoutViewAtRTLStart:siteSettingsButton_ withYPosition:yPos];
 
   // Resize the height based on contents.
   [self setHeightOfView:siteSettingsSectionView_ to:yPos];
@@ -577,7 +600,7 @@ bool IsInternalURL(const GURL& url) {
                 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]);
@@ -617,7 +640,7 @@ bool IsInternalURL(const GURL& url) {
 // 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(
@@ -637,7 +660,7 @@ bool IsInternalURL(const GURL& url) {
 - (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]);
 
@@ -645,7 +668,8 @@ bool IsInternalURL(const GURL& url) {
   // 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]);
@@ -667,18 +691,39 @@ bool IsInternalURL(const GURL& url) {
 
 // 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)];
+
+  if (security_description->summary_style & WebsiteSettingsUI::STYLE_COLOR) {
+    NSColor* color =
+        skia::SkColorToSRGBNSColor(security_description->summary_color);
+    [securitySummaryField_ setTextColor:color];
+  }
+
+  [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:)];
   }
@@ -702,6 +747,7 @@ bool IsInternalURL(const GURL& url) {
       [[PermissionSelectorButton alloc] initWithPermissionInfo:permissionInfo
                                                         forURL:url
                                                   withCallback:callback]);
+
   // Determine the largest possible size for this button.
   CGFloat maxTitleWidth = [button
       maxTitleWidthForContentSettingsType:permissionInfo.type
@@ -710,8 +756,9 @@ bool IsInternalURL(const GURL& url) {
   // 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();
@@ -735,8 +782,8 @@ bool IsInternalURL(const GURL& url) {
   // 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();
@@ -763,10 +810,8 @@ bool IsInternalURL(const GURL& url) {
                   toView:(NSView*)view
                  atPoint:(NSPoint)point {
   base::string16 labelText =
-      WebsiteSettingsUI::PermissionTypeToUIString(permissionInfo.type) +
-      base::ASCIIToUTF16(":");
-  bool isRTL =
-      base::i18n::RIGHT_TO_LEFT == base::i18n::GetStringDirection(labelText);
+      WebsiteSettingsUI::PermissionTypeToUIString(permissionInfo.type);
+  bool isRTL = base::i18n::IsRTL();
   base::scoped_nsobject<NSImage> image(
       [WebsiteSettingsUI::GetPermissionIcon(permissionInfo).ToNSImage()
           retain]);
@@ -780,13 +825,13 @@ bool IsInternalURL(const GURL& url) {
 
   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];
@@ -794,7 +839,8 @@ bool IsInternalURL(const GURL& url) {
     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];
@@ -806,13 +852,15 @@ bool IsInternalURL(const GURL& url) {
     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];
@@ -826,9 +874,10 @@ bool IsInternalURL(const GURL& url) {
   // 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];
@@ -870,7 +919,7 @@ bool IsInternalURL(const GURL& url) {
 
   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;
@@ -916,9 +965,7 @@ bool IsInternalURL(const GURL& url) {
   // 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

[Avi (use Gerrit), 2016/08/24 04:02:41]

:( Can you not commit commented-out code?

[lgarron, 2016/08/26 23:27:04]

I most certainly can! I mean, uh, can not. Am able not to.

(This is probably an accidental outcome of a refactor. I've removed it.)

   }
   position.y -= titleRect.origin.y;
   [button setFrameOrigin:position];
@@ -934,15 +981,9 @@ bool IsInternalURL(const GURL& url) {
 // the cap height of the first line of text.
 - (void)alignPermissionIcon:(NSImageView*)imageView
               withTextField:(NSTextField*)textField {
-  NSFont* font = [textField font];
-
-  // Calculate the offset from the top of the text field.
-  CGFloat capHeight = [font capHeight];
-  CGFloat offset = (kPermissionImageSize - capHeight) / 2 -
-      ([font ascender] - capHeight) - kPermissionImageYAdjust;
 
   NSRect frame = [imageView frame];
-  frame.origin.y -= offset;
+  frame.origin.y += kPermissionIconYAdjustment;
   [imageView setFrame:frame];
 }
 
@@ -954,48 +995,27 @@ bool IsInternalURL(const GURL& url) {
   // |cookieInfoList| should only ever have 2 items: first- and third-party
   // cookies.
   DCHECK_EQ(cookieInfoList.size(), 2u);
-  base::string16 firstPartyLabelText;
-  base::string16 thirdPartyLabelText;
+
+  int totalAllowed = 0;
   for (const auto& i : cookieInfoList) {
-    if (i.is_first_party) {
-      firstPartyLabelText = l10n_util::GetPluralStringFUTF16(
-          IDS_WEBSITE_SETTINGS_FIRST_PARTY_SITE_DATA, i.allowed);
-    } else {
-      thirdPartyLabelText = l10n_util::GetPluralStringFUTF16(
-          IDS_WEBSITE_SETTINGS_THIRD_PARTY_SITE_DATA, i.allowed);
-    }
+    totalAllowed += i.allowed;
   }
+  base::string16 label_text = l10n_util::GetPluralStringFUTF16(
+      IDS_WEBSITE_SETTINGS_NUM_COOKIES, totalAllowed);
 
   base::string16 sectionTitle =
       l10n_util::GetStringUTF16(IDS_WEBSITE_SETTINGS_TITLE_SITE_DATA);
-  bool isRTL = base::i18n::RIGHT_TO_LEFT ==
-               base::i18n::GetStringDirection(firstPartyLabelText);
+  bool isRTL = base::i18n::IsRTL();
 
   [cookiesView_ setSubviews:[NSArray array]];
-  NSPoint controlOrigin = NSMakePoint(kFramePadding, 0);
-
-  NSTextField* label;
+  NSPoint controlOrigin = NSMakePoint(kSectionHorizontalPadding, 0);
 
   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;
@@ -1009,51 +1029,53 @@ bool IsInternalURL(const GURL& url) {
                                           atPoint:controlOrigin];
   [imageView setImage:image];
 
-  base::string16 comma = base::ASCIIToUTF16(", ");
-  NSString* cookieButtonText = base::SysUTF16ToNSString(firstPartyLabelText);
+  NSButton* cookiesButton =
+      [self addLinkButtonWithText:base::SysUTF16ToNSString(label_text)
+                           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 -= NSWidth([cookiesButton frame]);
+    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]) - kLinkButtonXAdjustment;
     [cookiesButton setFrameOrigin:controlOrigin];
-
-    label = [self addText:comma + thirdPartyLabelText
-                 withSize:[NSFont smallSystemFontSize]
-                     bold:NO
-                   toView:cookiesView_
-                  atPoint:controlOrigin];
-    [label sizeToFit];
-    controlOrigin.x -= NSWidth([label frame]) - kTextLabelXPadding;
-    [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];
+    [cookiesLabel sizeToFit];
+
+    controlOrigin.y += NSHeight([cookiesLabel frame]);
+    controlOrigin.x -= kLinkButtonXAdjustment;
     [cookiesButton setFrameOrigin:controlOrigin];
 
-    controlOrigin.x += NSWidth([cookiesButton frame]) - kTextLabelXPadding;
-
-    label = [self addText:comma + thirdPartyLabelText
-                 withSize:[NSFont smallSystemFontSize]
-                     bold:NO
-                   toView:cookiesView_
-                  atPoint:controlOrigin];
-    [label sizeToFit];
+    // Align the icon with the text.
+    [self alignPermissionIcon:imageView withTextField:cookiesLabel];
   }
 
-  // Align the icon with the text.
-  [self alignPermissionIcon:imageView withTextField:label];
-
-  controlOrigin.y += NSHeight([label frame]) + kPermissionsTabSpacing;
-
-  [cookiesView_ setFrameSize:
-      NSMakeSize(NSWidth([cookiesView_ frame]), controlOrigin.y)];
+  controlOrigin.y += NSHeight([cookiesButton frame]);
+  [cookiesView_
+      setFrameSize:NSMakeSize(NSWidth([cookiesView_ frame]), controlOrigin.y)];
 
   [self performLayout];
 }
@@ -1061,30 +1083,16 @@ bool IsInternalURL(const GURL& url) {
 - (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];
@@ -1092,14 +1100,14 @@ bool IsInternalURL(const GURL& url) {
     }
 
     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: