Skip to content

Commit

Permalink
Merge pull request #1249 from brave/brave-actions-size
Browse files Browse the repository at this point in the history
Brave Actions sized at 18px and highlighted correctly
  • Loading branch information
bsclifton committed Jan 17, 2019
1 parent 170ff9f commit 130fc60
Show file tree
Hide file tree
Showing 23 changed files with 325 additions and 20 deletions.
2 changes: 1 addition & 1 deletion DEPS
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ deps = {
"vendor/tracking-protection": "https://github.com/brave/tracking-protection.git@e67738e656244f7ab6e0ed9815071ca744f5468f",
"vendor/hashset-cpp": "https://github.com/brave/hashset-cpp.git@4b55fe39bb25bb0d8b11a43d547d75f00c6c46fb",
"vendor/bloom-filter-cpp": "https://github.com/brave/bloom-filter-cpp.git@9be5c63b14e094156e00c8b28f205e7794f0b92c",
"vendor/brave-extension": "https://github.com/brave/brave-extension.git@038a43af5294150d48ce94a326290f70aa001cd0",
"vendor/brave-extension": "https://github.com/brave/brave-extension.git@70550a1619139459119f472c18a03dc12c3ed5f2",
"vendor/requests": "https://github.com/kennethreitz/requests@e4d59bedfd3c7f4f254f4f5d036587bcd8152458",
"vendor/boto": "https://github.com/boto/boto@f7574aa6cc2c819430c1f05e9a1a1a666ef8169b",
"vendor/python-patch": "https://github.com/svn2github/python-patch@a336a458016ced89aba90dfc3f4c8222ae3b1403",
Expand Down
8 changes: 6 additions & 2 deletions browser/resources/brave_extension.grd
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,12 @@
<include name="IDR_BRAVE_EXTENSON_ICON_64" file="brave_extension/img/icon-64.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_128" file="brave_extension/img/icon-128.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_256" file="brave_extension/img/icon-256.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_SVG" file="brave_extension/img/icon.svg" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_OFF_SVG" file="brave_extension/img/icon-off.svg" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_ON_1x" file="brave_extension/img/shields-on.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_ON_2x" file="brave_extension/img/shields-on@2x.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_ON_3x" file="brave_extension/img/shields-on@3x.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_OFF_1x" file="brave_extension/img/shields-off.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_OFF_2x" file="brave_extension/img/shields-off@2x.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_ICON_OFF_3x" file="brave_extension/img/shields-off@3x.png" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_BACKGROUND_HTML" file="brave_extension/background.html" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_EN_US_MESSAGES_JSON" file="brave_extension/_locales/en_US/messages.json" type="BINDATA" />
<include name="IDR_BRAVE_EXTENSON_BRAVE_SHIELDS_HTML" file="brave_extension/braveShieldsPanel.html" type="BINDATA" />
Expand Down
4 changes: 4 additions & 0 deletions browser/ui/BUILD.gn
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ source_set("ui") {
"toolbar/brave_toolbar_actions_model.h",
"views/brave_layout_provider.cc",
"views/brave_layout_provider.h",
"views/brave_actions/brave_action_view.cc",
"views/brave_actions/brave_action_view.h",
"views/brave_actions/brave_actions_container.cc",
"views/brave_actions/brave_actions_container.h",
"views/download/brave_download_item_view.cc",
Expand All @@ -49,6 +51,8 @@ source_set("ui") {
"views/profiles/brave_avatar_toolbar_button.h",
"views/profiles/brave_profile_chooser_view.cc",
"views/profiles/brave_profile_chooser_view.h",
"views/rounded_separator.cc",
"views/rounded_separator.h",
"views/tabs/brave_new_tab_button.cc",
"views/tabs/brave_new_tab_button.h",
"views/toolbar/bookmark_button.cc",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
#include "brave/browser/ui/brave_actions/brave_action_icon_with_badge_image_source.h"

#include "base/strings/utf_string_conversions.h"
#include "brave/browser/ui/brave_actions/constants.h"
#include "cc/paint/paint_flags.h"
#include "chrome/browser/extensions/extension_action.h"
#include "chrome/browser/ui/toolbar/toolbar_actions_bar.h"
Expand All @@ -19,6 +20,24 @@
#include "ui/gfx/image/image_skia_operations.h"
#include "ui/gfx/skia_paint_util.h"

using namespace brave_actions;

base::Optional<int> BraveActionIconWithBadgeImageSource::GetCustomGraphicSize() {
return kBraveActionGraphicSize;
}

base::Optional<int> BraveActionIconWithBadgeImageSource::GetCustomGraphicXOffset() {
return std::floor(
(size().width() - kBraveActionRightMargin - kBraveActionGraphicSize) / 2.0
);
}

base::Optional<int> BraveActionIconWithBadgeImageSource::GetCustomGraphicYOffset() {
return std::floor(
(size().height() - kBraveActionGraphicSize) / 2.0
);
}

void BraveActionIconWithBadgeImageSource::PaintBadge(gfx::Canvas* canvas) {
if (!badge_ || badge_->text.empty())
return;
Expand All @@ -35,6 +54,7 @@ void BraveActionIconWithBadgeImageSource::PaintBadge(gfx::Canvas* canvas) {
constexpr int kBadgeHeight = 12;
constexpr int kBadgeMaxWidth = 14;
constexpr int kVPadding = 1;
constexpr int kVMarginTop = 2;
const int kTextHeightTarget = kBadgeHeight - (kVPadding * 2);
int h_padding = 2;
int text_max_width = kBadgeMaxWidth - (h_padding * 2);
Expand Down Expand Up @@ -113,10 +133,9 @@ void BraveActionIconWithBadgeImageSource::PaintBadge(gfx::Canvas* canvas) {
if (icon_area.width() != 0 && (badge_width % 2 != icon_area.width() % 2))
badge_width += 1;

// Calculate the badge background rect. It is usually right-aligned, but it
// can also be center-aligned if it is large.
const int badge_offset_x = icon_area.width() - badge_width;
const int badge_offset_y = 0;
// Calculate the badge background rect. It is anchored to a specific position
const int badge_offset_x = icon_area.width() - kBadgeMaxWidth;
const int badge_offset_y = kVMarginTop;
gfx::Rect rect(icon_area.x() + badge_offset_x, icon_area.y() + badge_offset_y,
badge_width, kBadgeHeight);
cc::PaintFlags rect_flags;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ class BraveActionIconWithBadgeImageSource : public IconWithBadgeImageSource {
public:
using IconWithBadgeImageSource::IconWithBadgeImageSource;
private:
base::Optional<int> GetCustomGraphicSize() override;
base::Optional<int> GetCustomGraphicXOffset() override;
base::Optional<int> GetCustomGraphicYOffset() override;
void PaintBadge(gfx::Canvas* canvas) override;
gfx::Rect GetIconAreaRect() const override;
DISALLOW_COPY_AND_ASSIGN(BraveActionIconWithBadgeImageSource);
Expand Down
10 changes: 10 additions & 0 deletions browser/ui/brave_actions/constants.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* you can obtain one at http://mozilla.org/MPL/2.0/. */

namespace brave_actions {

const int kBraveActionGraphicSize = 18;
const int kBraveActionRightMargin = 2;

}
36 changes: 36 additions & 0 deletions browser/ui/views/brave_actions/brave_action_view.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* you can obtain one at http://mozilla.org/MPL/2.0/. */

#include "brave/browser/ui/views/brave_actions/brave_action_view.h"

#include "brave/browser/ui/brave_actions/constants.h"
#include "chrome/browser/themes/theme_properties.h"
#include "chrome/browser/ui/layout_constants.h"
#include "chrome/browser/ui/views/chrome_layout_provider.h"
#include "chrome/browser/ui/views/toolbar/toolbar_action_view.h"
#include "chrome/browser/ui/views/toolbar/toolbar_ink_drop_util.h"
#include "third_party/skia/include/core/SkPath.h"
#include "ui/gfx/geometry/insets.h"
#include "ui/gfx/geometry/rect.h"
#include "ui/gfx/geometry/size.h"
#include "ui/views/controls/button/menu_button.h"
#include "ui/views/view.h"
#include "ui/views/view_properties.h"

void BraveActionView::OnBoundsChanged(const gfx::Rect& previous_bounds) {
// Set the highlight path for the toolbar button,
// making it inset so that the badge can show outside it in the
// fake margin on the right that we are creating.
gfx::Insets highlight_insets(0, 0, 0, brave_actions::kBraveActionRightMargin);
gfx::Rect rect(size());
rect.Inset(highlight_insets);
const int radii = ChromeLayoutProvider::Get()->GetCornerRadiusMetric(
views::EMPHASIS_MAXIMUM, rect.size());

auto path = std::make_unique<SkPath>();
path->addRoundRect(gfx::RectToSkRect(rect), radii, radii);
SetProperty(views::kHighlightPathKey, path.release());

MenuButton::OnBoundsChanged(previous_bounds);
}
24 changes: 24 additions & 0 deletions browser/ui/views/brave_actions/brave_action_view.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* you can obtain one at http://mozilla.org/MPL/2.0/. */

#ifndef BRAVE_BROWSER_UI_VIEWS_BRAVE_ACTIONS_BRAVE_ACTION_VIEW_H_
#define BRAVE_BROWSER_UI_VIEWS_BRAVE_ACTIONS_BRAVE_ACTION_VIEW_H_

#include "chrome/browser/ui/views/toolbar/toolbar_action_view.h"

namespace gfx {
class Rect;
}

// Subclasses ToolbarActionViewc so that the notification badge can be painted
// outside the highlight bubble.
class BraveActionView : public ToolbarActionView {
public:
using ToolbarActionView::ToolbarActionView;
// views::MenuButton:
void OnBoundsChanged(const gfx::Rect& previous_bounds) override;
DISALLOW_COPY_AND_ASSIGN(BraveActionView);
};

#endif
25 changes: 18 additions & 7 deletions browser/ui/views/brave_actions/brave_actions_container.cc
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@
#include <memory>

#include "brave/browser/ui/brave_actions/brave_action_view_controller.h"
#include "brave/browser/ui/views/brave_actions/brave_action_view.h"
#include "brave/browser/ui/views/rounded_separator.h"
#include "brave/common/extensions/extension_constants.h"
#include "chrome/browser/extensions/extension_action_manager.h"
#include "chrome/browser/profiles/profile.h"
Expand All @@ -18,7 +20,6 @@
#include "extensions/browser/extension_registry_observer.h"
#include "extensions/browser/extension_system.h"
#include "extensions/common/one_shot_event.h"
#include "ui/views/controls/separator.h"
#include "ui/views/layout/box_layout.h"
#include "ui/views/layout/grid_layout.h"
#include "ui/views/view.h"
Expand Down Expand Up @@ -68,11 +69,21 @@ void BraveActionsContainer::Init() {
SetLayoutManager(std::move(vertical_container_layout));

// children
views::Separator* brave_button_separator_ = new views::Separator();
RoundedSeparator* brave_button_separator_ = new RoundedSeparator();
// TODO: theme color
brave_button_separator_->SetColor(SkColorSetRGB(0xb2, 0xb5, 0xb7));
brave_button_separator_->SetPreferredSize(gfx::Size(2,
GetLayoutConstant(LOCATION_BAR_ICON_SIZE)));
constexpr int kSeparatorRightMargin = 2;
constexpr int kSeparatorWidth = 1;
brave_button_separator_->SetPreferredSize(gfx::Size(
kSeparatorWidth + kSeparatorRightMargin,
GetLayoutConstant(LOCATION_BAR_ICON_SIZE)));
// separator right margin
brave_button_separator_->SetBorder(views::CreateEmptyBorder(
0,
0,
0,
kSeparatorRightMargin
));
// Just in case the extensions load before this function does (not likely!)
// make sure separator is at index 0
AddChildViewAt(brave_button_separator_, 0);
Expand All @@ -98,12 +109,12 @@ void BraveActionsContainer::AddAction(const extensions::Extension* extension,
// do not require that logic.
// If we do require notifications when popups are open or closed,
// then we should inherit and pass |this| through.
actions_[id].view_controller_ =
actions_[id].view_controller_ =
std::make_unique<BraveActionViewController>(
extension, browser_,
extension_action_manager_->GetExtensionAction(*extension), nullptr);
// The button view
actions_[id].view_ = std::make_unique<ToolbarActionView>(
actions_[id].view_ = std::make_unique<BraveActionView>(
actions_[id].view_controller_.get(), this);
// Add extension view after separator view
// `AddChildView` should be called first, so that changes that modify
Expand All @@ -118,7 +129,7 @@ void BraveActionsContainer::AddAction(const extensions::Extension* extension,
actions_[id].view_->set_owned_by_client();
// Sets overall size of button but not image graphic. We set a large width
// in order to give space for the bubble.
actions_[id].view_->SetPreferredSize(gfx::Size(32, 24));
actions_[id].view_->SetPreferredSize(gfx::Size(34, 24));
Update();
}
}
Expand Down
73 changes: 73 additions & 0 deletions browser/ui/views/rounded_separator.cc
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* you can obtain one at http://mozilla.org/MPL/2.0/. */

#include "brave/browser/ui/views/rounded_separator.h"

#include "ui/accessibility/ax_node_data.h"
#include "ui/gfx/canvas.h"
#include "ui/native_theme/native_theme.h"

// static
const char RoundedSeparator::kViewClassName[] = "RoundedSeparator";

// static
const int RoundedSeparator::kThickness = 1;

RoundedSeparator::RoundedSeparator() {}

RoundedSeparator::~RoundedSeparator() {}

void RoundedSeparator::SetColor(SkColor color) {
overridden_color_ = color;
SchedulePaint();
}

void RoundedSeparator::SetPreferredHeight(int height) {
preferred_height_ = height;
PreferredSizeChanged();
}

////////////////////////////////////////////////////////////////////////////////
// Separator, View overrides:

gfx::Size RoundedSeparator::CalculatePreferredSize() const {
gfx::Size size(kThickness, preferred_height_);
gfx::Insets insets = GetInsets();
size.Enlarge(insets.width(), insets.height());
return size;
}

void RoundedSeparator::GetAccessibleNodeData(ui::AXNodeData* node_data) {
node_data->role = ax::mojom::Role::kSplitter;
}

void RoundedSeparator::OnPaint(gfx::Canvas* canvas) {
SkColor color = overridden_color_
? *overridden_color_
: GetNativeTheme()->GetSystemColor(
ui::NativeTheme::kColorId_SeparatorColor);

float dsf = canvas->UndoDeviceScaleFactor();

// The separator fills its bounds, but avoid filling partial pixels.
gfx::Rect aligned = gfx::ScaleToEnclosedRect(GetContentsBounds(), dsf, dsf);


// At least 1 pixel should be drawn to make the separator visible.
aligned.set_width(std::max(1, aligned.width()));
aligned.set_height(std::max(1, aligned.height()));

const int separator_radius = aligned.width() / 2;

cc::PaintFlags flags;
flags.setAntiAlias(true);
flags.setColor(color);
canvas->DrawRoundRect(aligned, separator_radius, flags);

View::OnPaint(canvas);
}

const char* RoundedSeparator::GetClassName() const {
return kViewClassName;
}
44 changes: 44 additions & 0 deletions browser/ui/views/rounded_separator.h
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* you can obtain one at http://mozilla.org/MPL/2.0/. */

#ifndef BRAVE_BROWSER_UI_VIEWS_ROUNDED_SEPARATOR_H_
#define BRAVE_BROWSER_UI_VIEWS_ROUNDED_SEPARATOR_H_

#include <string>

#include "base/macros.h"
#include "base/optional.h"
#include "ui/views/view.h"

// The RoundedSeparator class is a view that shows a line used to visually separate
// other views.
class RoundedSeparator : public views::View {
public:
// The separator's class name.
static const char kViewClassName[];

// The separator's thickness in dip.
static const int kThickness;

RoundedSeparator();
~RoundedSeparator() override;

void SetColor(SkColor color);

void SetPreferredHeight(int height);

// Overridden from View:
gfx::Size CalculatePreferredSize() const override;
void GetAccessibleNodeData(ui::AXNodeData* node_data) override;
void OnPaint(gfx::Canvas* canvas) override;
const char* GetClassName() const override;

private:
int preferred_height_ = kThickness;
base::Optional<SkColor> overridden_color_;

DISALLOW_COPY_AND_ASSIGN(RoundedSeparator);
};

#endif
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
#include "../../../../../../chrome/browser/ui/extensions/icon_with_badge_image_source.cc"

// Implement default virtual methods
base::Optional<int> IconWithBadgeImageSource::GetCustomGraphicSize() {
return base::nullopt;
}

base::Optional<int> IconWithBadgeImageSource::GetCustomGraphicXOffset() {
return base::nullopt;
}

base::Optional<int> IconWithBadgeImageSource::GetCustomGraphicYOffset() {
return base::nullopt;
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,12 @@ transpile_web_ui("brave_rewards_panel") {
"components/app.tsx",
"components/panel.tsx",
"constants/rewards_panel_types.ts",
"img/rewards-off.png",
"img/rewards-off@2x.png",
"img/rewards-off@3x.png",
"img/rewards-on.png",
"img/rewards-on@2x.png",
"img/rewards-on@3x.png",
"utils.ts",
]

Expand Down
Loading

0 comments on commit 130fc60

Please sign in to comment.