"Open In Tor" icon gets rounded border, margin, and vector icon

app/vector_icons/BUILD.gn

@@ -9,6 +9,7 @@ aggregate_vector_icons("brave_vector_icons") {
 
   icons = [
     "download_unlock.icon",
+    "open_in_tor.icon",
     "speedreader.icon",
     "speedreader_on_active.icon",
     "speedreader_on_inactive.icon",

app/vector_icons/open_in_tor.icon

@@ -0,0 +1,38 @@
+// 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/.
+
+CANVAS_DIMENSIONS, 12,
+MOVE_TO, 11.5f, 10,
+R_CUBIC_TO, -0.28f, 0, -0.5f, -0.22f, -0.5f, -0.5f,
+V_LINE_TO, 1,
+H_LINE_TO, 2.5f,
+CUBIC_TO, 2.22f, 1, 2, 0.78f, 2, 0.5f,
+R_CUBIC_TO, 0, -0.28f, 0.22f, -0.5f, 0.5f, -0.5f,
+H_LINE_TO, 11,
+R_CUBIC_TO, 0.55f, 0, 1, 0.45f, 1, 1,
+R_V_LINE_TO, 8.5f,
+R_CUBIC_TO, 0, 0.28f, -0.22f, 0.5f, -0.5f, 0.5f,
+CLOSE,
+MOVE_TO, 10, 3,
+R_V_LINE_TO, 8,
+R_CUBIC_TO, 0, 0.55f, -0.45f, 1, -1, 1,
+H_LINE_TO, 1,
+R_CUBIC_TO, -0.55f, 0, -1, -0.45f, -1, -1,
+V_LINE_TO, 3,
+R_CUBIC_TO, 0, -0.55f, 0.45f, -1, 1, -1,
+R_H_LINE_TO, 8,
+R_CUBIC_TO, 0.55f, 0, 1, 0.45f, 1, 1,
+CLOSE,
+R_MOVE_TO, -9, 8,
+R_H_LINE_TO, 8,
+R_LINE_TO, 0, -6,
+H_LINE_TO, 1,
+R_V_LINE_TO, 6,
+CLOSE,
+R_MOVE_TO, 0, -7,
+R_H_LINE_TO, 8,
+V_LINE_TO, 3,
+H_LINE_TO, 1,
+R_V_LINE_TO, 1,
+CLOSE

browser/ui/views/location_bar/brave_location_bar_view.cc

@@ -107,6 +107,11 @@ gfx::Size BraveLocationBarView::CalculatePreferredSize() const {
                               GetLayoutConstant(LOCATION_BAR_ELEMENT_PADDING);
     min_size.Enlarge(extra_width, 0);
   }
+  if (onion_location_view_ && onion_location_view_->GetVisible()) {
+    const int extra_width = GetLayoutConstant(LOCATION_BAR_ELEMENT_PADDING) +
+        onion_location_view_->GetMinimumSize().width();
+    min_size.Enlarge(extra_width, 0);
+  }
   return min_size;
 }
 

browser/ui/views/location_bar/onion_location_view.cc

@@ -5,24 +5,43 @@
 
 #include "brave/browser/ui/views/location_bar/onion_location_view.h"
 
+#include <memory>
+#include <utility>
+
 #include "base/strings/utf_string_conversions.h"
+#include "brave/app/vector_icons/vector_icons.h"
 #include "brave/browser/profiles/profile_util.h"
 #include "brave/browser/tor/onion_location_tab_helper.h"
 #include "brave/grit/brave_generated_resources.h"
 #include "chrome/browser/profiles/profile_window.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_finder.h"
+#include "chrome/browser/ui/layout_constants.h"
 #include "chrome/browser/ui/views/toolbar/toolbar_ink_drop_util.h"
 #include "components/grit/brave_components_resources.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/resource/resource_bundle.h"
-#include "ui/gfx/image/image.h"
+#include "ui/base/models/image_model.h"
+#include "ui/gfx/color_palette.h"
+#include "ui/gfx/geometry/size.h"
 #include "ui/gfx/image/image_skia.h"
+#include "ui/gfx/paint_vector_icon.h"
+#include "ui/gfx/text_constants.h"
+#include "ui/views/animation/ink_drop_impl.h"
 #include "ui/views/background.h"
+#include "ui/views/border.h"
+#include "ui/views/controls/button/label_button.h"
+#include "ui/views/controls/highlight_path_generator.h"
+#include "ui/views/layout/box_layout.h"
+#include "ui/views/painter.h"
+#include "ui/views/view.h"
 
 namespace {
 
 constexpr SkColor kOpenInTorBg = SkColorSetRGB(0x6a, 0x37, 0x85);
+constexpr SkColor kIconColor = SkColorSetRGB(0xf0, 0xf2, 0xff);
+constexpr SkColor kTextColor = SK_ColorWHITE;
+constexpr int kIconSize = 12;
 
 void OnTorProfileCreated(GURL onion_location,
                          Profile* profile,
@@ -38,27 +57,100 @@ void OnTorProfileCreated(GURL onion_location,
   browser->OpenURL(open_tor);
 }
 
+// Sets the focus and ink drop highlight path to match the background
+// along with it's corner radius.
+class HighlightPathGenerator
+    : public views::HighlightPathGenerator {
+ public:
+  HighlightPathGenerator() = default;
+
+  // views::HighlightPathGenerator:
+  SkPath GetHighlightPath(const views::View* view) override {
+    const gfx::Rect highlight_bounds = view->GetLocalBounds();
+    const SkRect rect = RectToSkRect(highlight_bounds);
+    const int corner_radius = view->height() / 2;
+    return SkPath().addRoundRect(rect, corner_radius, corner_radius);
+  }
+
+ private:
+  DISALLOW_COPY_AND_ASSIGN(HighlightPathGenerator);
+};
+
+class OnionLocationButtonView : public views::LabelButton,
+                              public views::ButtonListener {
+ public:
+  explicit OnionLocationButtonView(Profile* profile)
+      : LabelButton(this,
+              l10n_util::GetStringUTF16(IDS_LOCATION_BAR_OPEN_IN_TOR)) {
+    if (brave::IsTorProfile(profile))
+      SetText(l10n_util::GetStringUTF16(IDS_LOCATION_BAR_ONION_AVAILABLE));
+    // Render vector icon
+    const gfx::ImageSkia image = gfx::CreateVectorIcon(
+        kOpenInTorIcon, kIconSize, kIconColor);
+    SetImageModel(views::Button::STATE_NORMAL,
+        ui::ImageModel::FromImageSkia(image));
+    // Set style specifics
+    SetEnabledTextColors(kTextColor);
+    SetHorizontalAlignment(gfx::ALIGN_RIGHT);
+    SetImageLabelSpacing(6);
+    SetInkDropMode(InkDropMode::ON);
+    SetBorder(views::CreateEmptyBorder(
+        GetLayoutInsets(LOCATION_BAR_ICON_INTERIOR_PADDING)));
+    set_has_ink_drop_action_on_click(true);
+    set_ink_drop_visible_opacity(kToolbarInkDropVisibleOpacity);
+    UpdateBorder();
+    // Ensure focus ring follows border
+    views::HighlightPathGenerator::Install(
+        this, std::make_unique<HighlightPathGenerator>());
+  }
+
+  ~OnionLocationButtonView() override { }
+
+  // views::ButtonListener
+  void ButtonPressed(Button* sender, const ui::Event& event) override {
+    profiles::SwitchToTorProfile(
+        base::BindRepeating(&OnTorProfileCreated, GURL(onion_location_)));
+  }
+
+  void SetOnionLocation(GURL location) {
+    onion_location_ = location;
+  }
+
+ private:
+  // views::View
+  void Layout() override {
+    views::LabelButton::Layout();
+    UpdateBorder();
+  }
+
+  void UpdateBorder() {
+    SetBackground(
+      views::CreateRoundedRectBackground(kOpenInTorBg, height() / 2));
+  }
+
+  GURL onion_location_;
+
+  OnionLocationButtonView(const OnionLocationButtonView&) = delete;
+  OnionLocationButtonView& operator=(const OnionLocationButtonView&) = delete;
+};
+
 }  // namespace
 
-OnionLocationView::OnionLocationView(Profile* profile)
-    : LabelButton(this,
-                  l10n_util::GetStringUTF16(IDS_LOCATION_BAR_OPEN_IN_TOR)) {
-  if (brave::IsTorProfile(profile))
-    SetText(l10n_util::GetStringUTF16(IDS_LOCATION_BAR_ONION_AVAILABLE));
-  SetBackground(views::CreateSolidBackground(kOpenInTorBg));
-  ui::ResourceBundle& rb = ui::ResourceBundle::GetSharedInstance();
-  gfx::ImageSkia image;
-  const SkBitmap bitmap =
-      rb.GetImageNamed(IDR_BRAVE_OPEN_IN_TOR_WINDOW_IMG).AsBitmap();
-  image.AddRepresentation(gfx::ImageSkiaRep(bitmap, 1));
-  SetImage(views::Button::STATE_NORMAL, image);
-  SetImageLabelSpacing(6);
+OnionLocationView::OnionLocationView(Profile* profile) {
+  SetBorder(views::CreateEmptyBorder(gfx::Insets(3, 3)));
+      // GetLayoutInsets(LOCATION_BAR_ICON_INTERIOR_PADDING)));
   SetVisible(false);
+  // automatic layout
+  auto vertical_container_layout = std::make_unique<views::BoxLayout>(
+      views::BoxLayout::Orientation::kHorizontal);
+  vertical_container_layout->set_main_axis_alignment(
+      views::BoxLayout::MainAxisAlignment::kCenter);
+  vertical_container_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kCenter);
+  SetLayoutManager(std::move(vertical_container_layout));
 
-  SetInkDropMode(InkDropMode::ON);
-  set_has_ink_drop_action_on_click(true);
-  SetHorizontalAlignment(gfx::ALIGN_CENTER);
-  set_ink_drop_visible_opacity(kToolbarInkDropVisibleOpacity);
+  button_ = new OnionLocationButtonView(profile);
+  AddChildView(button_);
 }
 
 OnionLocationView::~OnionLocationView() {}
@@ -71,10 +163,6 @@ void OnionLocationView::Update(content::WebContents* web_contents) {
   if (!helper)
     return;
   SetVisible(helper->should_show_icon());
-  onion_location_ = helper->onion_location();
-}
-
-void OnionLocationView::ButtonPressed(Button* sender, const ui::Event& event) {
-  profiles::SwitchToTorProfile(
-      base::BindRepeating(&OnTorProfileCreated, GURL(onion_location_)));
+  reinterpret_cast<OnionLocationButtonView*>(button_)->SetOnionLocation(
+      helper->onion_location());
 }

browser/ui/views/location_bar/onion_location_view.h

@@ -7,26 +7,24 @@
 #define BRAVE_BROWSER_UI_VIEWS_LOCATION_BAR_ONION_LOCATION_VIEW_H_
 
 #include "ui/views/controls/button/label_button.h"
+#include "ui/views/controls/button/label_button_border.h"
+#include "ui/gfx/geometry/size.h"
 
 class Profile;
 
 namespace content {
 class WebContents;
 }  // namespace content
 
-class OnionLocationView : public views::LabelButton,
-                          public views::ButtonListener {
+class OnionLocationView : public views::View {
  public:
   explicit OnionLocationView(Profile* profile);
   ~OnionLocationView() override;
 
   void Update(content::WebContents* web_contents);
 
-  // views::ButtonListener
-  void ButtonPressed(Button* sender, const ui::Event& event) override;
-
  private:
-  GURL onion_location_;
+  View* button_ = nullptr;
 
   OnionLocationView(const OnionLocationView&) = delete;
   OnionLocationView& operator=(const OnionLocationView&) = delete;

components/resources/brave_components_resources.grd

@@ -57,9 +57,6 @@
       <include name="IDR_BRAVE_PRIVATE_TAB_IMG" file="../img/newtab/private-window.svg" type="BINDATA" />
       <include name="IDR_BRAVE_PRIVATE_TAB_TOR_IMG" file="../img/newtab/private-window-tor.svg" type="BINDATA" />
 
-      <!-- TODO: move to components/tor after it is refactored -->
-      <include name="IDR_BRAVE_OPEN_IN_TOR_WINDOW_IMG" file="../img/toolbar/open-in-tor-window.png" type="BINDATA" />
-
       <if expr="enable_brave_perf_predictor">
         <part file="../brave_perf_predictor/resources/brave_perf_predictor_resources.grdp" />
       </if>