Implements drawing of focus ring for toolbar buttons and bookmark buttons.

Here's how the change set makes it look like:
A glow on the bookmarks has also been added per suggestion of sail@.

http://i.imgur.com/oJ5Mv.png
http://i.imgur.com/1Y2XA.png
http://i.imgur.com/NtXeA.png
http://i.imgur.com/AMeFi.png
http://i.imgur.com/YOYnb.png

BUG=168858
TBR=thakis@chromium.org


Review URL: https://chromiumcodereview.appspot.com/11916004

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@178983 0039d316-1c4b-4281-b951-d872f2087c98

11 files changed, 188 insertions, 84 deletions

diff --git a/chrome/browser/ui/cocoa/find_bar/find_bar_text_field_cell.mm b/chrome/browser/ui/cocoa/find_bar/find_bar_text_field_cell.mm
index cf29031..c2c4c7e 100644
--- a/chrome/browser/ui/cocoa/find_bar/find_bar_text_field_cell.mm
+++ b/chrome/browser/ui/cocoa/find_bar/find_bar_text_field_cell.mm
@@ -48,8 +48,8 @@ CGFloat WidthForResults(NSAttributedString* resultsString) {
   return 4.0;
 }
 
-- (StyledTextFieldCellRoundedFlags)roundedFlags {
-  return StyledTextFieldCellRoundedLeft;
+- (rect_path_utils::RoundedCornerFlags)roundedCornerFlags {
+  return rect_path_utils::RoundedCornerLeft;
 }
 
 // @synthesize doesn't seem to compile for this transition.
diff --git a/chrome/browser/ui/cocoa/gradient_button_cell.mm b/chrome/browser/ui/cocoa/gradient_button_cell.mm
index 8fb2bdb..78dd2d8 100644
--- a/chrome/browser/ui/cocoa/gradient_button_cell.mm
+++ b/chrome/browser/ui/cocoa/gradient_button_cell.mm
@@ -11,6 +11,7 @@
 #import "chrome/browser/themes/theme_service.h"
 #import "chrome/browser/ui/cocoa/nsview_additions.h"
 #import "chrome/browser/ui/cocoa/themed_window.h"
+#import "chrome/browser/ui/cocoa/rect_path_utils.h"
 #include "grit/theme_resources.h"
 #import "third_party/GTM/AppKit/GTMNSColor+Luminance.h"
 #include "ui/gfx/scoped_ns_graphics_context_save_gstate_mac.h"
@@ -536,17 +537,12 @@ static const NSTimeInterval kAnimationContinuousCycleDuration = 0.4;
     BOOL showClickedGradient = pressed ||
         (pulseState_ == gradient_button_cell::kPulsingContinuous);
 
-    // When first responder, turn the hover alpha all the way up.
-    CGFloat hoverAlpha = [self hoverAlpha];
-    if ([self showsFirstResponder])
-      hoverAlpha = 1.0;
-
     [self drawBorderAndFillForTheme:themeProvider
                         controlView:controlView
                           innerPath:innerPath
                 showClickedGradient:showClickedGradient
               showHighlightGradient:[self isHighlighted]
-                         hoverAlpha:hoverAlpha
+                         hoverAlpha:[self hoverAlpha]
                              active:active
                           cellFrame:cellFrame
                     defaultGradient:nil];
@@ -568,6 +564,23 @@ static const NSTimeInterval kAnimationContinuousCycleDuration = 0.4;
                              NSCompositeSourceOver);
   }
   [self drawInteriorWithFrame:innerFrame inView:controlView];
+
+  // Draws the blue focus ring.
+  if ([self showsFirstResponder]) {
+    gfx::ScopedNSGraphicsContextSaveGState scoped_state;
+    const CGFloat lineWidth = [controlView cr_lineWidth];
+    // insetX = 1.0 is used for the drawing of blue highlight so that this
+    // highlight won't be too near the bookmark toolbar itself, in case we
+    // draw bookmark buttons in bookmark toolbar.
+    rect_path_utils::FrameRectWithInset(rect_path_utils::RoundedCornerAll,
+                                        NSInsetRect(cellFrame, 0, lineWidth),
+                                        1.0,            // insetX
+                                        0.0,            // insetY
+                                        3.0,            // outerRadius
+                                        lineWidth * 2,  // lineWidth
+                                        [controlView
+                                            cr_keyboardFocusIndicatorColor]);
+  }
 }
 
 - (void)drawInteriorWithFrame:(NSRect)cellFrame inView:(NSView*)controlView {
diff --git a/chrome/browser/ui/cocoa/gradient_button_cell_unittest.mm b/chrome/browser/ui/cocoa/gradient_button_cell_unittest.mm
index 9860341..c174ae6 100644
--- a/chrome/browser/ui/cocoa/gradient_button_cell_unittest.mm
+++ b/chrome/browser/ui/cocoa/gradient_button_cell_unittest.mm
@@ -109,4 +109,11 @@ TEST_F(GradientButtonCellTest, PulseState) {
               ([cell pulseState] == gradient_button_cell::kPulsedOff));
 }
 
+// Test drawing when first responder, mostly to ensure nothing leaks or
+// crashes.
+TEST_F(GradientButtonCellTest, FirstResponder) {
+  [test_window() makePretendKeyWindowAndSetFirstResponder:view_];
+  [view_ display];
+}
+
 }  // namespace
diff --git a/chrome/browser/ui/cocoa/image_button_cell.mm b/chrome/browser/ui/cocoa/image_button_cell.mm
index 4a532be..93e646a 100644
--- a/chrome/browser/ui/cocoa/image_button_cell.mm
+++ b/chrome/browser/ui/cocoa/image_button_cell.mm
@@ -6,9 +6,12 @@
 
 #include "base/logging.h"
 #import "chrome/browser/themes/theme_service.h"
+#import "chrome/browser/ui/cocoa/nsview_additions.h"
+#import "chrome/browser/ui/cocoa/rect_path_utils.h"
 #import "chrome/browser/ui/cocoa/themed_window.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/image/image.h"
+#include "ui/gfx/scoped_ns_graphics_context_save_gstate_mac.h"
 
 // Adjust the overlay position relative to the top right of the button image.
 const CGFloat kOverlayOffsetX = -3;
@@ -116,6 +119,20 @@ const CGFloat kImageNoFocusAlpha = 0.65;
               respectFlipped:YES
                        hints:nil];
   }
+
+  // Draws the blue focus ring.
+  if ([self showsFirstResponder]) {
+    gfx::ScopedNSGraphicsContextSaveGState scoped_state;
+    const CGFloat lineWidth = [controlView cr_lineWidth];
+    rect_path_utils::FrameRectWithInset(rect_path_utils::RoundedCornerAll,
+                                        NSInsetRect(cellFrame, 0, lineWidth),
+                                        0.0,            // insetX
+                                        0.0,            // insetY
+                                        3.0,            // outerRadius
+                                        lineWidth * 2,  // lineWidth
+                                        [controlView
+                                            cr_keyboardFocusIndicatorColor]);
+  }
 }
 
 - (void)setImageID:(NSInteger)imageID
diff --git a/chrome/browser/ui/cocoa/nsview_additions.h b/chrome/browser/ui/cocoa/nsview_additions.h
index 5bd7533..ac52646 100644
--- a/chrome/browser/ui/cocoa/nsview_additions.h
+++ b/chrome/browser/ui/cocoa/nsview_additions.h
@@ -26,6 +26,9 @@
             isPositioned:(NSWindowOrderingMode)place
               relativeTo:(NSView *)otherView;
 
+// Return best color for keyboard focus ring.
+- (NSColor*)cr_keyboardFocusIndicatorColor;
+
 @end
 
 #endif  // CHROME_BROWSER_UI_COCOA_NSVIEW_ADDITIONS_H_
diff --git a/chrome/browser/ui/cocoa/nsview_additions.mm b/chrome/browser/ui/cocoa/nsview_additions.mm
index 6352f08f9..507f77b 100644
--- a/chrome/browser/ui/cocoa/nsview_additions.mm
+++ b/chrome/browser/ui/cocoa/nsview_additions.mm
@@ -62,4 +62,9 @@
         relativeTo:otherView];
 }
 
+- (NSColor*)cr_keyboardFocusIndicatorColor {
+  return [[NSColor keyboardFocusIndicatorColor]
+      colorWithAlphaComponent:0.5 / [self cr_lineWidth]];
+}
+
 @end
diff --git a/chrome/browser/ui/cocoa/rect_path_utils.h b/chrome/browser/ui/cocoa/rect_path_utils.h
new file mode 100644
index 0000000..cb91fc1
--- /dev/null
+++ b/chrome/browser/ui/cocoa/rect_path_utils.h
@@ -0,0 +1,40 @@
+// Copyright (c) 2013 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.
+
+#ifndef CHROME_BROWSER_UI_COCOA_RECT_PATH_UTILS_H_
+#define CHROME_BROWSER_UI_COCOA_RECT_PATH_UTILS_H_
+
+#import <Cocoa/Cocoa.h>
+
+namespace rect_path_utils {
+
+enum RoundedCornerFlags {
+  RoundedCornerAll = 0,
+  RoundedCornerLeft = 1
+};
+
+NSBezierPath *RectPathWithInset(RoundedCornerFlags roundedCornerFlags,
+                                const NSRect frame,
+                                const CGFloat insetX,
+                                const CGFloat insetY,
+                                const CGFloat outerRadius);
+
+void FillRectWithInset(RoundedCornerFlags roundedCornerFlags,
+                       const NSRect frame,
+                       const CGFloat insetX,
+                       const CGFloat insetY,
+                       const CGFloat outerRadius,
+                       NSColor *color);
+
+void FrameRectWithInset(RoundedCornerFlags roundedCornerFlags,
+                        const NSRect frame,
+                        const CGFloat insetX,
+                        const CGFloat insetY,
+                        const CGFloat outerRadius,
+                        const CGFloat lineWidth,
+                        NSColor *color);
+
+} // namespace rect_path_utils
+
+#endif  // CHROME_BROWSER_UI_COCOA_RECT_PATH_UTILS_H_
diff --git a/chrome/browser/ui/cocoa/rect_path_utils.mm b/chrome/browser/ui/cocoa/rect_path_utils.mm
new file mode 100644
index 0000000..b1ee730
--- /dev/null
+++ b/chrome/browser/ui/cocoa/rect_path_utils.mm
@@ -0,0 +1,69 @@
+// Copyright (c) 2013 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/rect_path_utils.h"
+
+#import "third_party/GTM/AppKit/GTMNSBezierPath+RoundRect.h"
+
+namespace rect_path_utils {
+
+NSBezierPath* RectPathWithInset(RoundedCornerFlags roundedCornerFlags,
+                                const NSRect frame,
+                                const CGFloat insetX,
+                                const CGFloat insetY,
+                                const CGFloat outerRadius) {
+  NSRect insetFrame = NSInsetRect(frame, insetX, insetY);
+
+  if (outerRadius > 0.0) {
+    CGFloat leftRadius = outerRadius - insetX;
+    CGFloat rightRadius =
+        (roundedCornerFlags == RoundedCornerLeft) ? 0 : leftRadius;
+
+    return [NSBezierPath gtm_bezierPathWithRoundRect:insetFrame
+                                 topLeftCornerRadius:leftRadius
+                                topRightCornerRadius:rightRadius
+                              bottomLeftCornerRadius:leftRadius
+                             bottomRightCornerRadius:rightRadius];
+  } else {
+    return [NSBezierPath bezierPathWithRect:insetFrame];
+  }
+}
+
+// Similar to |NSRectFill()|, additionally sets |color| as the fill
+// color.  |outerRadius| greater than 0.0 uses rounded corners, with
+// inset backed out of the radius.
+void FillRectWithInset(RoundedCornerFlags roundedCornerFlags,
+                       const NSRect frame,
+                       const CGFloat insetX,
+                       const CGFloat insetY,
+                       const CGFloat outerRadius,
+                       NSColor* color) {
+  NSBezierPath* path =
+      RectPathWithInset(roundedCornerFlags, frame, insetX, insetY, outerRadius);
+  [color setFill];
+  [path fill];
+}
+
+// Similar to |NSFrameRectWithWidth()|, additionally sets |color| as
+// the stroke color (as opposed to the fill color).  |outerRadius|
+// greater than 0.0 uses rounded corners, with inset backed out of the
+// radius.
+void FrameRectWithInset(RoundedCornerFlags roundedCornerFlags,
+                        const NSRect frame,
+                        const CGFloat insetX,
+                        const CGFloat insetY,
+                        const CGFloat outerRadius,
+                        const CGFloat lineWidth,
+                        NSColor* color) {
+  const CGFloat finalInsetX = insetX + (lineWidth / 2.0);
+  const CGFloat finalInsetY = insetY + (lineWidth / 2.0);
+  NSBezierPath* path =
+      RectPathWithInset(roundedCornerFlags, frame, finalInsetX, finalInsetY,
+                        outerRadius);
+  [color setStroke];
+  [path setLineWidth:lineWidth];
+  [path stroke];
+}
+
+}  // namespace rect_path_utils
diff --git a/chrome/browser/ui/cocoa/styled_text_field_cell.h b/chrome/browser/ui/cocoa/styled_text_field_cell.h
index 913a9e4..0310d29 100644
--- a/chrome/browser/ui/cocoa/styled_text_field_cell.h
+++ b/chrome/browser/ui/cocoa/styled_text_field_cell.h
@@ -7,10 +7,9 @@
 
 #import <Cocoa/Cocoa.h>
 
-typedef enum {
-  StyledTextFieldCellRoundedAll = 0,
-  StyledTextFieldCellRoundedLeft = 1
-} StyledTextFieldCellRoundedFlags;
+#import "chrome/browser/ui/cocoa/rect_path_utils.h"
+
+enum rect_path_utils::RoundedCornerFlags;
 
 // StyledTextFieldCell customizes the look of the standard Cocoa text field.
 // The border and focus ring are modified, as is the font baseline.  Subclasses
@@ -46,7 +45,7 @@ typedef enum {
 - (CGFloat)cornerRadius;
 
 // Which corners of the field to round.  Defaults to RoundedAll.
-- (StyledTextFieldCellRoundedFlags)roundedFlags;
+- (rect_path_utils::RoundedCornerFlags)roundedFlags;
 
 // Returns YES if a light themed bezel should be drawn under the text field.
 // Default implementation returns NO.
diff --git a/chrome/browser/ui/cocoa/styled_text_field_cell.mm b/chrome/browser/ui/cocoa/styled_text_field_cell.mm
index c92bad1..024be77 100644
--- a/chrome/browser/ui/cocoa/styled_text_field_cell.mm
+++ b/chrome/browser/ui/cocoa/styled_text_field_cell.mm
@@ -9,68 +9,10 @@
 #import "chrome/browser/ui/cocoa/nsview_additions.h"
 #import "chrome/browser/ui/cocoa/themed_window.h"
 #include "grit/theme_resources.h"
-#import "third_party/GTM/AppKit/GTMNSBezierPath+RoundRect.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/font.h"
 #include "ui/gfx/scoped_ns_graphics_context_save_gstate_mac.h"
 
-namespace {
-
-NSBezierPath* RectPathWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
-                                const NSRect frame,
-                                const CGFloat inset,
-                                const CGFloat outerRadius) {
-  NSRect insetFrame = NSInsetRect(frame, inset, inset);
-
-  if (outerRadius > 0.0) {
-    CGFloat leftRadius = outerRadius - inset;
-    CGFloat rightRadius =
-        (roundedFlags == StyledTextFieldCellRoundedLeft) ? 0 : leftRadius;
-
-    return [NSBezierPath gtm_bezierPathWithRoundRect:insetFrame
-                                 topLeftCornerRadius:leftRadius
-                                topRightCornerRadius:rightRadius
-                              bottomLeftCornerRadius:leftRadius
-                             bottomRightCornerRadius:rightRadius];
-  } else {
-    return [NSBezierPath bezierPathWithRect:insetFrame];
-  }
-}
-
-// Similar to |NSRectFill()|, additionally sets |color| as the fill
-// color.  |outerRadius| greater than 0.0 uses rounded corners, with
-// inset backed out of the radius.
-void FillRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
-                       const NSRect frame,
-                       const CGFloat inset,
-                       const CGFloat outerRadius,
-                       NSColor* color) {
-  NSBezierPath* path =
-      RectPathWithInset(roundedFlags, frame, inset, outerRadius);
-  [color setFill];
-  [path fill];
-}
-
-// Similar to |NSFrameRectWithWidth()|, additionally sets |color| as
-// the stroke color (as opposed to the fill color).  |outerRadius|
-// greater than 0.0 uses rounded corners, with inset backed out of the
-// radius.
-void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
-                        const NSRect frame,
-                        const CGFloat inset,
-                        const CGFloat outerRadius,
-                        const CGFloat lineWidth,
-                        NSColor* color) {
-  const CGFloat finalInset = inset + (lineWidth / 2.0);
-  NSBezierPath* path =
-      RectPathWithInset(roundedFlags, frame, finalInset, outerRadius);
-  [color setStroke];
-  [path setLineWidth:lineWidth];
-  [path stroke];
-}
-
-}  // namespace
-
 @implementation StyledTextFieldCell
 
 - (CGFloat)baselineAdjust {
@@ -81,8 +23,8 @@ void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
   return 0.0;
 }
 
-- (StyledTextFieldCellRoundedFlags)roundedFlags {
-  return StyledTextFieldCellRoundedAll;
+- (rect_path_utils::RoundedCornerFlags)roundedCornerFlags {
+  return rect_path_utils::RoundedCornerAll;
 }
 
 - (BOOL)shouldDrawBezel {
@@ -124,7 +66,8 @@ void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
   const CGFloat halfLineWidth = lineWidth / 2.0;
 
   DCHECK([controlView isFlipped]);
-  StyledTextFieldCellRoundedFlags roundedFlags = [self roundedFlags];
+  rect_path_utils::RoundedCornerFlags roundedCornerFlags =
+      [self roundedCornerFlags];
 
   // TODO(shess): This inset is also reflected by |kFieldVisualInset|
   // in omnibox_popup_view_mac.mm.
@@ -147,8 +90,9 @@ void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
       // NOTE(shess): This seems like it should be using a 0.0 inset,
       // but AFAICT using a halfLineWidth inset is important in mixing the
       // toolbar background and the omnibox background.
-      FillRectWithInset(roundedFlags, frame, halfLineWidth, radius,
-                        backgroundImageColor);
+      rect_path_utils::FillRectWithInset(roundedCornerFlags, frame,
+                                         halfLineWidth, halfLineWidth, radius,
+                                         backgroundImageColor);
     }
 
     // Draw the outer stroke (over the background).
@@ -157,13 +101,14 @@ void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
         active ? ThemeService::COLOR_TOOLBAR_BUTTON_STROKE :
                  ThemeService::COLOR_TOOLBAR_BUTTON_STROKE_INACTIVE,
         true);
-    FrameRectWithInset(roundedFlags, frame, 0.0, radius, lineWidth,
-                       strokeColor);
+    rect_path_utils::FrameRectWithInset(roundedCornerFlags, frame, 0.0, 0.0,
+                                        radius, lineWidth, strokeColor);
   }
 
   // Fill interior with background color.
-  FillRectWithInset(roundedFlags, frame, lineWidth, radius,
-                    [self backgroundColor]);
+  rect_path_utils::FillRectWithInset(roundedCornerFlags, frame, lineWidth,
+                                     lineWidth, radius,
+                                     [self backgroundColor]);
 
   // Draw the shadow.  For the rounded-rect case, the shadow needs to
   // slightly turn in at the corners.  |shadowFrame| is at the same
@@ -172,13 +117,16 @@ void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
   // will clip the bottom and right edges (and corner).
   {
     gfx::ScopedNSGraphicsContextSaveGState state;
-    [RectPathWithInset(roundedFlags, frame, lineWidth, radius) addClip];
+    [rect_path_utils::RectPathWithInset(roundedCornerFlags, frame, lineWidth,
+                                        lineWidth, radius) addClip];
     const NSRect shadowFrame =
         NSOffsetRect(frame, halfLineWidth, halfLineWidth);
     NSColor* shadowShade = [NSColor colorWithCalibratedWhite:0.0
                                                        alpha:0.05 / lineWidth];
-    FrameRectWithInset(roundedFlags, shadowFrame, halfLineWidth,
-                       radius - halfLineWidth, lineWidth, shadowShade);
+    rect_path_utils::FrameRectWithInset(roundedCornerFlags, shadowFrame,
+                                        halfLineWidth, halfLineWidth,
+                                        radius - halfLineWidth, lineWidth,
+                                        shadowShade);
   }
 
   // Draw optional bezel below bottom stroke.
@@ -203,7 +151,8 @@ void FrameRectWithInset(StyledTextFieldCellRoundedFlags roundedFlags,
   if ([self showsFirstResponder]) {
     NSColor* color = [[NSColor keyboardFocusIndicatorColor]
         colorWithAlphaComponent:0.5 / lineWidth];
-    FrameRectWithInset(roundedFlags, frame, 0.0, radius, lineWidth * 2, color);
+    rect_path_utils::FrameRectWithInset(roundedCornerFlags, frame, 0.0, 0.0,
+                                        radius, lineWidth * 2, color);
   }
 }
 
diff --git a/chrome/chrome_browser_ui.gypi b/chrome/chrome_browser_ui.gypi
index af60419..1f22e91 100644
--- a/chrome/chrome_browser_ui.gypi
+++ b/chrome/chrome_browser_ui.gypi
@@ -698,6 +698,8 @@
         'browser/ui/cocoa/profile_menu_controller.mm',
         'browser/ui/cocoa/ratings_view.h',
         'browser/ui/cocoa/ratings_view.mm',
+        'browser/ui/cocoa/rect_path_utils.h',
+        'browser/ui/cocoa/rect_path_utils.mm',
         'browser/ui/cocoa/restart_browser.h',
         'browser/ui/cocoa/restart_browser.mm',
         'browser/ui/cocoa/simple_message_box_mac.mm',