Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(796)

Side by Side Diff: chrome/browser/ui/extensions/icon_with_badge_image_source.cc

Issue 1472863004: [MD] re-skin extension browser action badges (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: less interleaving Created 5 years ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. 1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
2 // Use of this source code is governed by a BSD-style license that can be 2 // Use of this source code is governed by a BSD-style license that can be
3 // found in the LICENSE file. 3 // found in the LICENSE file.
4 4
5 #include "chrome/common/badge_util.h" 5 #include "chrome/browser/ui/extensions/icon_with_badge_image_source.h"
6 6
7 #include <algorithm>
7 #include <cmath> 8 #include <cmath>
8 9
9 #include "base/logging.h" 10 #include "base/logging.h"
10 #include "base/strings/utf_string_conversions.h" 11 #include "base/strings/utf_string_conversions.h"
11 #include "third_party/skia/include/core/SkPaint.h" 12 #include "third_party/skia/include/core/SkPaint.h"
12 #include "third_party/skia/include/core/SkTypeface.h" 13 #include "third_party/skia/include/core/SkTypeface.h"
14 #include "ui/base/resource/material_design/material_design_controller.h"
13 #include "ui/base/resource/resource_bundle.h" 15 #include "ui/base/resource/resource_bundle.h"
14 #include "ui/gfx/canvas.h" 16 #include "ui/gfx/canvas.h"
17 #include "ui/gfx/color_palette.h"
15 #include "ui/gfx/font.h" 18 #include "ui/gfx/font.h"
16 #include "ui/gfx/geometry/rect.h" 19 #include "ui/gfx/geometry/rect.h"
17 #include "ui/gfx/geometry/size.h" 20 #include "ui/gfx/geometry/size.h"
21 #include "ui/gfx/image/image_skia_operations.h"
18 #include "ui/resources/grit/ui_resources.h" 22 #include "ui/resources/grit/ui_resources.h"
19 23
20 namespace { 24 namespace {
21 25
22 // Different platforms need slightly different constants to look good. 26 // Different platforms need slightly different constants to look good.
23 // TODO(devlin): Comb through these and see if they are all still needed/ 27 // TODO(devlin): Comb through these and see if they are all still needed/
24 // appropriate. 28 // appropriate.
25 #if defined(OS_WIN) 29 #if defined(OS_WIN)
26 const float kTextSize = 10; 30 const float kTextSize = 10;
27 // The padding between the top of the badge and the top of the text. 31 // The padding between the top of the badge and the top of the text.
28 const int kTopTextPadding = -1; 32 const int kTopTextPadding = -1;
29 #elif defined(OS_MACOSX) 33 #elif defined(OS_MACOSX)
30 const float kTextSize = 9.0; 34 const float kTextSize = 9.0;
31 const int kTopTextPadding = 0; 35 const int kTopTextPadding = 0;
32 #elif defined(OS_CHROMEOS) 36 #elif defined(OS_CHROMEOS)
33 const float kTextSize = 8.0; 37 const float kTextSize = 8.0;
34 const int kTopTextPadding = 1; 38 const int kTopTextPadding = 1;
35 #elif defined(OS_POSIX) 39 #elif defined(OS_POSIX)
36 const float kTextSize = 9.0; 40 const float kTextSize = 9.0;
37 const int kTopTextPadding = 0; 41 const int kTopTextPadding = 0;
38 #endif 42 #endif
39 43
40 const int kPadding = 2; 44 const int kPadding = 2;
41 const int kBadgeHeight = 11; 45 const int kBadgeHeight = 11;
42 const int kMaxTextWidth = 23; 46 const int kMaxTextWidth = 23;
43 47
44 // The minimum width for center-aligning the badge. 48 // The minimum width for center-aligning the badge.
45 const int kCenterAlignThreshold = 20; 49 const int kCenterAlignThreshold = 20;
46 50
47 } // namespace 51 // Helper routine that returns a singleton SkPaint object configured for
48 52 // rendering badge overlay text (correct font, typeface, etc).
49 namespace badge_util {
50
51 SkPaint* GetBadgeTextPaintSingleton() { 53 SkPaint* GetBadgeTextPaintSingleton() {
52 #if defined(OS_MACOSX) 54 #if defined(OS_MACOSX)
53 const char kPreferredTypeface[] = "Helvetica Bold"; 55 const char kPreferredTypeface[] = "Helvetica Bold";
54 #else 56 #else
55 const char kPreferredTypeface[] = "Arial"; 57 const char kPreferredTypeface[] = "Arial";
56 #endif 58 #endif
57 59
58 static SkPaint* text_paint = NULL; 60 static SkPaint* text_paint = NULL;
59 if (!text_paint) { 61 if (!text_paint) {
60 text_paint = new SkPaint; 62 text_paint = new SkPaint;
(...skipping 17 matching lines...) Expand all
78 base_font.GetFontName().c_str(), SkTypeface::kNormal)); 80 base_font.GetFontName().c_str(), SkTypeface::kNormal));
79 DCHECK(typeface); 81 DCHECK(typeface);
80 } 82 }
81 83
82 text_paint->setTypeface(typeface.get()); 84 text_paint->setTypeface(typeface.get());
83 // |text_paint| adds its own ref. Release the ref from CreateFontName. 85 // |text_paint| adds its own ref. Release the ref from CreateFontName.
84 } 86 }
85 return text_paint; 87 return text_paint;
86 } 88 }
87 89
88 void PaintBadge(gfx::Canvas* canvas, 90 } // namespace
89 const gfx::Rect& bounds, 91
90 const std::string& text, 92 IconWithBadgeImageSource::Badge::Badge(const std::string& text,
91 const SkColor& text_color_in, 93 SkColor text_color,
92 const SkColor& background_color_in, 94 SkColor background_color)
93 int icon_width) { 95 : text(text), text_color(text_color), background_color(background_color) {}
94 if (text.empty()) 96
97 IconWithBadgeImageSource::Badge::~Badge() {}
98
99 IconWithBadgeImageSource::IconWithBadgeImageSource(const gfx::Size& size)
100 : gfx::CanvasImageSource(size, false),
101 grayscale_(false),
102 paint_decoration_(false) {}
103
104 IconWithBadgeImageSource::~IconWithBadgeImageSource() {}
105
106 void IconWithBadgeImageSource::SetIcon(const gfx::Image& icon) {
107 icon_ = icon;
108 }
109
110 void IconWithBadgeImageSource::SetBadge(scoped_ptr<Badge> badge) {
111 badge_ = badge.Pass();
112 }
113
114 void IconWithBadgeImageSource::Draw(gfx::Canvas* canvas) {
115 if (icon_.IsEmpty())
95 return; 116 return;
96 117
97 SkColor text_color = text_color_in; 118 int x_offset = std::floor((size().width() - icon_.Width()) / 2.0);
98 if (SkColorGetA(text_color_in) == 0x00) 119 int y_offset = std::floor((size().height() - icon_.Height()) / 2.0);
99 text_color = SK_ColorWHITE; 120 gfx::ImageSkia skia = icon_.AsImageSkia();
121 if (grayscale_)
122 skia = gfx::ImageSkiaOperations::CreateHSLShiftedImage(skia, {-1, 0, 0.6});
123 canvas->DrawImageInt(skia, x_offset, y_offset);
100 124
101 SkColor background_color = background_color_in; 125 // Draw a badge on the provided browser action icon's canvas.
102 if (SkColorGetA(background_color_in) == 0x00) 126 PaintBadge(canvas);
103 background_color = SkColorSetARGB(255, 218, 0, 24); 127
128 if (paint_decoration_)
129 PaintDecoration(canvas);
130 }
131
132 // Paints badge with specified parameters to |canvas|.
133 void IconWithBadgeImageSource::PaintBadge(gfx::Canvas* canvas) {
134 if (!badge_ || badge_->text.empty())
135 return;
136
137 SkColor text_color = SkColorGetA(badge_->text_color) == SK_AlphaTRANSPARENT
138 ? SK_ColorWHITE
139 : badge_->text_color;
140
141 SkColor background_color = ui::MaterialDesignController::IsModeMaterial()
142 ? gfx::kGoogleBlue500
143 : SkColorSetARGB(255, 218, 0, 24);
144 if (SkColorGetA(badge_->background_color) != SK_AlphaTRANSPARENT)
145 background_color = badge_->background_color;
104 146
105 canvas->Save(); 147 canvas->Save();
106 148
107 SkPaint* text_paint = badge_util::GetBadgeTextPaintSingleton(); 149 SkPaint* text_paint = nullptr;
108 text_paint->setColor(text_color); 150 int text_width = 0;
109 float scale = canvas->image_scale(); 151 ResourceBundle* rb = &ResourceBundle::GetSharedInstance();
152 gfx::FontList base_font = rb->GetFontList(ResourceBundle::BaseFont)
153 .DeriveWithHeightUpperBound(kBadgeHeight);
154 base::string16 utf16_text = base::UTF8ToUTF16(badge_->text);
155 if (ui::MaterialDesignController::IsModeMaterial()) {
156 text_width =
157 std::min(kMaxTextWidth, canvas->GetStringWidth(utf16_text, base_font));
158 } else {
159 text_paint = GetBadgeTextPaintSingleton();
160 text_paint->setColor(text_color);
161 float scale = canvas->image_scale();
110 162
111 // Calculate text width. Font width may not be linear with respect to the 163 // Calculate text width. Font width may not be linear with respect to the
112 // scale factor (e.g. when hinting is applied), so we need to use the font 164 // scale factor (e.g. when hinting is applied), so we need to use the font
113 // size that canvas actually uses when drawing a text. 165 // size that canvas actually uses when drawing a text.
114 text_paint->setTextSize(SkFloatToScalar(kTextSize) * scale); 166 text_paint->setTextSize(SkFloatToScalar(kTextSize) * scale);
115 SkScalar sk_text_width_in_pixel = 167 SkScalar sk_text_width_in_pixel =
116 text_paint->measureText(text.c_str(), text.size()); 168 text_paint->measureText(badge_->text.c_str(), badge_->text.size());
117 text_paint->setTextSize(SkFloatToScalar(kTextSize)); 169 text_paint->setTextSize(SkFloatToScalar(kTextSize));
118 170
119 // We clamp the width to a max size. SkPaint::measureText returns the width in 171 // We clamp the width to a max size. SkPaint::measureText returns the width
120 // pixel (as a result of scale multiplier), so convert sk_text_width_in_pixel 172 // in pixel (as a result of scale multiplier), so convert
121 // back to DIP (density independent pixel) first. 173 // sk_text_width_in_pixel back to DIP (density independent pixel) first.
122 int text_width = 174 text_width = std::min(
123 std::min(kMaxTextWidth, 175 kMaxTextWidth, static_cast<int>(std::ceil(
124 static_cast<int>( 176 SkScalarToFloat(sk_text_width_in_pixel) / scale)));
125 std::ceil(SkScalarToFloat(sk_text_width_in_pixel) / scale))); 177 }
126 178
127 // Calculate badge size. It is clamped to a min width just because it looks 179 // Calculate badge size. It is clamped to a min width just because it looks
128 // silly if it is too skinny. 180 // silly if it is too skinny.
129 int badge_width = text_width + kPadding * 2; 181 int badge_width = text_width + kPadding * 2;
130 // Force the pixel width of badge to be either odd (if the icon width is odd) 182 // Force the pixel width of badge to be either odd (if the icon width is odd)
131 // or even otherwise. If there is a mismatch you get http://crbug.com/26400. 183 // or even otherwise. If there is a mismatch you get http://crbug.com/26400.
132 if (icon_width != 0 && (badge_width % 2 != icon_width % 2)) 184 if (size().width() != 0 && (badge_width % 2 != size().width() % 2))
133 badge_width += 1; 185 badge_width += 1;
134 badge_width = std::max(kBadgeHeight, badge_width); 186 badge_width = std::max(kBadgeHeight, badge_width);
135 187
136 // Paint the badge background color in the right location. It is usually 188 // Calculate the badge background rect. It is usually right-aligned, but it
137 // right-aligned, but it can also be center-aligned if it is large. 189 // can also be center-aligned if it is large.
138 int rect_height = kBadgeHeight; 190 gfx::Rect rect(badge_width >= kCenterAlignThreshold
Devlin 2015/11/24 23:54:32 Alternatively, instead of making two functions, we
139 int rect_y = bounds.bottom() - kBadgeHeight; 191 ? (size().width() - badge_width) / 2
140 int rect_width = badge_width; 192 : size().width() - badge_width,
141 int rect_x = (badge_width >= kCenterAlignThreshold) ? 193 size().height() - kBadgeHeight, badge_width, kBadgeHeight);
142 bounds.x() + (bounds.width() - badge_width) / 2 :
143 bounds.right() - badge_width;
144 gfx::Rect rect(rect_x, rect_y, rect_width, rect_height);
145
146 SkPaint rect_paint; 194 SkPaint rect_paint;
147 rect_paint.setStyle(SkPaint::kFill_Style); 195 rect_paint.setStyle(SkPaint::kFill_Style);
148 rect_paint.setAntiAlias(true); 196 rect_paint.setAntiAlias(true);
149 rect_paint.setColor(background_color); 197 rect_paint.setColor(background_color);
150 canvas->DrawRoundRect(rect, 2, rect_paint);
151 198
152 // Overlay the gradient. It is stretchy, so we do this in three parts. 199 if (ui::MaterialDesignController::IsModeMaterial()) {
153 ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance(); 200 // Clear part of the background icon.
154 gfx::ImageSkia* gradient_left = rb.GetImageSkiaNamed( 201 gfx::Rect cutout_rect(rect);
155 IDR_BROWSER_ACTION_BADGE_LEFT); 202 cutout_rect.Inset(-1, -1);
156 gfx::ImageSkia* gradient_right = rb.GetImageSkiaNamed( 203 SkPaint cutout_paint = rect_paint;
157 IDR_BROWSER_ACTION_BADGE_RIGHT); 204 cutout_paint.setXfermodeMode(SkXfermode::kClear_Mode);
158 gfx::ImageSkia* gradient_center = rb.GetImageSkiaNamed( 205 canvas->DrawRoundRect(cutout_rect, 2, cutout_paint);
159 IDR_BROWSER_ACTION_BADGE_CENTER);
160 206
161 canvas->DrawImageInt(*gradient_left, rect.x(), rect.y()); 207 // Paint the backdrop.
162 canvas->TileImageInt(*gradient_center, 208 canvas->DrawRoundRect(rect, 1, rect_paint);
163 rect.x() + gradient_left->width(),
164 rect.y(),
165 rect.width() - gradient_left->width() - gradient_right->width(),
166 rect.height());
167 canvas->DrawImageInt(*gradient_right,
168 rect.right() - gradient_right->width(), rect.y());
169 209
170 // Finally, draw the text centered within the badge. We set a clip in case the 210 // Paint the text.
171 // text was too large. 211 rect.Inset(std::max(kPadding, (rect.width() - text_width) / 2),
172 rect.Inset(kPadding, 0); 212 kBadgeHeight - base_font.GetHeight(), kPadding, 0);
173 canvas->ClipRect(rect); 213 canvas->DrawStringRect(utf16_text, base_font, text_color, rect);
174 canvas->sk_canvas()->drawText( 214 } else {
175 text.c_str(), text.size(), 215 canvas->DrawRoundRect(2, rect_paint);
176 SkFloatToScalar(rect.x() + 216
177 static_cast<float>(rect.width() - text_width) / 2), 217 // Overlay the gradient. It is stretchy, so we do this in three parts.
178 SkFloatToScalar(rect.y() + kTextSize + kTopTextPadding), 218 ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
179 *text_paint); 219 gfx::ImageSkia* gradient_left =
220 rb.GetImageSkiaNamed(IDR_BROWSER_ACTION_BADGE_LEFT);
221 gfx::ImageSkia* gradient_right =
222 rb.GetImageSkiaNamed(IDR_BROWSER_ACTION_BADGE_RIGHT);
223 gfx::ImageSkia* gradient_center =
224 rb.GetImageSkiaNamed(IDR_BROWSER_ACTION_BADGE_CENTER);
225
226 canvas->DrawImageInt(*gradient_left, rect.x(), rect.y());
227 canvas->TileImageInt(
228 *gradient_center, rect.x() + gradient_left->width(), rect.y(),
229 rect.width() - gradient_left->width() - gradient_right->width(),
230 rect.height());
231 canvas->DrawImageInt(*gradient_right,
232 rect.right() - gradient_right->width(), rect.y());
233
234 // Finally, draw the text centered within the badge. We set a clip in case
235 // the text was too large.
236 rect.Inset(kPadding, 0);
237 canvas->ClipRect(rect);
238 canvas->sk_canvas()->drawText(
239 badge_->text.c_str(), badge_->text.size(),
240 SkFloatToScalar(rect.x() +
241 static_cast<float>(rect.width() - text_width) / 2),
242 SkFloatToScalar(rect.y() + kTextSize + kTopTextPadding), *text_paint);
243 }
180 canvas->Restore(); 244 canvas->Restore();
181 } 245 }
182 246
183 } // namespace badge_util 247 void IconWithBadgeImageSource::PaintDecoration(gfx::Canvas* canvas) {
248 static const SkColor decoration_color = SkColorSetARGB(255, 70, 142, 226);
249
250 int major_radius = std::ceil(size().width() / 5.0);
251 int minor_radius = std::ceil(major_radius / 2.0);
252 gfx::Point center_point(major_radius + 1, size().height() - (major_radius)-1);
253 SkPaint paint;
254 paint.setAntiAlias(true);
255 paint.setStyle(SkPaint::kFill_Style);
256 paint.setColor(SK_ColorTRANSPARENT);
257 paint.setXfermodeMode(SkXfermode::kSrc_Mode);
258 canvas->DrawCircle(center_point, major_radius, paint);
259 paint.setColor(decoration_color);
260 canvas->DrawCircle(center_point, minor_radius, paint);
261 }
OLDNEW
« no previous file with comments | « chrome/browser/ui/extensions/icon_with_badge_image_source.h ('k') | chrome/browser/ui/toolbar/toolbar_actions_bar.cc » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698