Modifies layout of the zoom bubble

Makes ZoomBubbleView follow the layout from the mock in the bug.
Fixes the vector icons (+ / -) to have sharp edges rather than using a
rounded stroke.

Bug: 651641
Test: Visual (compare to mock)
Change-Id: I23bd9633037cf529e69f5b72ae9810ca5124da96
Reviewed-on: https://chromium-review.googlesource.com/673486Reviewed-by: Evan Stade <estade@chromium.org>
Commit-Queue: Valery Arkhangorodsky <varkha@chromium.org>
Cr-Commit-Position: refs/heads/master@{#503578}

chrome/app/vector_icons/BUILD.gn

@@ -13,7 +13,6 @@ aggregate_vector_icons("chrome_vector_icons") {
     "account_child.icon",
     "account_child_circle.icon",
     "account_circle.icon",
-    "add.1x.icon",
     "add.icon",
     "apps.icon",
     "blocked_badge.icon",
@@ -74,7 +73,6 @@ aggregate_vector_icons("chrome_vector_icons") {
     "paintbrush.icon",
     "photo_camera.icon",
     "profile_switcher_outline.icon",
-    "remove.1x.icon",
     "remove.icon",
     "remove_box.icon",
     "sad_tab.icon",

chrome/app/vector_icons/add.1x.icon

-// Copyright 2017 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.
-
-CANVAS_DIMENSIONS, 16,
-STROKE, 1.85f,
-MOVE_TO, 4, 8,
-R_H_LINE_TO, 8,
-MOVE_TO, 8, 4,
-R_V_LINE_TO, 8,
-END

chrome/app/vector_icons/add.icon

@@ -2,10 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-CANVAS_DIMENSIONS, 32,
-STROKE, 3.5f,
-MOVE_TO, 8.75f, 16.f,
-R_H_LINE_TO, 14.5f,
-MOVE_TO, 16.f, 8.75f,
-R_V_LINE_TO, 14.5f,
+CANVAS_DIMENSIONS, 16,
+STROKE, 2.f,
+CAP_SQUARE,
+MOVE_TO, 2, 8,
+R_H_LINE_TO, 12,
+MOVE_TO, 8, 2,
+R_V_LINE_TO, 12,
 END

chrome/app/vector_icons/remove.1x.icon

-// Copyright 2017 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.
-
-CANVAS_DIMENSIONS, 16,
-STROKE, 1.85f,
-MOVE_TO, 4, 8,
-R_H_LINE_TO, 8,
-END

chrome/app/vector_icons/remove.icon

@@ -2,8 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-CANVAS_DIMENSIONS, 32,
-STROKE, 3.5f,
-MOVE_TO, 8.75f, 16.f,
-R_H_LINE_TO, 14.5f,
+CANVAS_DIMENSIONS, 16,
+STROKE, 2.f,
+CAP_SQUARE,
+MOVE_TO, 2, 8,
+R_H_LINE_TO, 12,
 END

chrome/browser/ui/views/location_bar/zoom_bubble_view.cc

@@ -45,6 +45,7 @@
 #include "ui/views/controls/separator.h"
 #include "ui/views/layout/box_layout.h"
 #include "ui/views/layout/fill_layout.h"
+#include "ui/views/view_properties.h"
 #include "ui/views/widget/widget.h"
 
 namespace {
@@ -78,7 +79,9 @@ class ZoomValue : public views::Label {
       : Label(base::string16(),
               views::style::CONTEXT_LABEL,
               views::style::STYLE_PRIMARY),
-        max_width_(GetLabelMaxWidth(web_contents)) {}
+        max_width_(GetLabelMaxWidth(web_contents)) {
+    SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  }
   ~ZoomValue() override {}
 
   // views::Label:
@@ -88,7 +91,7 @@ class ZoomValue : public views::Label {
 
  private:
   int GetLabelMaxWidth(const content::WebContents* web_contents) const {
-    int border_width = border() ? border()->GetInsets().width() : 0;
+    const int border_width = border() ? border()->GetInsets().width() : 0;
     int max_w = 0;
     auto* zoom_controller = zoom::ZoomController::FromWebContents(web_contents);
     DCHECK(zoom_controller);
@@ -268,18 +271,35 @@ void ZoomBubbleView::OnMouseExited(const ui::MouseEvent& event) {
 
 void ZoomBubbleView::Init() {
   // Set up the layout of the zoom bubble.
-  ChromeLayoutProvider* provider = ChromeLayoutProvider::Get();
-  const int margin =
-      provider->GetDistanceMetric(views::DISTANCE_RELATED_BUTTON_HORIZONTAL);
+  const ChromeLayoutProvider* provider = ChromeLayoutProvider::Get();
+  const int spacing =
+      provider->GetDistanceMetric(DISTANCE_UNRELATED_CONTROL_HORIZONTAL);
   views::BoxLayout* box_layout = new views::BoxLayout(
-      views::BoxLayout::kHorizontal, gfx::Insets(0, margin), margin);
-
+      views::BoxLayout::kHorizontal,
+      provider->GetInsetsMetric(INSETS_TOAST) - margins(), spacing);
   box_layout->set_main_axis_alignment(
       views::BoxLayout::MAIN_AXIS_ALIGNMENT_CENTER);
   box_layout->set_cross_axis_alignment(
       views::BoxLayout::CROSS_AXIS_ALIGNMENT_CENTER);
   SetLayoutManager(box_layout);
 
+  // Calculate child views margins in |this| client view.
+  const int label_vertical_spacing =
+      provider->GetDistanceMetric(DISTANCE_TOAST_LABEL_VERTICAL);
+  const gfx::Insets label_vertical_margin(
+      label_vertical_spacing - margins().top(), 0,
+      label_vertical_spacing - margins().bottom(), 0);
+
+  // Account for the apparent margins that vector buttons have around icons.
+  const int control_vertical_spacing =
+      provider->GetDistanceMetric(DISTANCE_TOAST_CONTROL_VERTICAL);
+  const gfx::Insets control_vertical_margin(
+      control_vertical_spacing - margins().top(), 0,
+      control_vertical_spacing - margins().bottom(), 0);
+  const gfx::Insets vector_button_margin(
+      control_vertical_margin -
+      provider->GetInsetsMetric(views::INSETS_VECTOR_IMAGE_BUTTON));
+
   // If this zoom change was initiated by an extension, that extension will be
   // attributed by showing its icon in the zoom bubble.
   if (extension_info_.icon_image) {
@@ -292,21 +312,34 @@ void ZoomBubbleView::Init() {
     AddChildView(image_button_);
   }
 
+  // Add zoom label with the new zoom percent.
+  label_ = new ZoomValue(web_contents_);
+  UpdateZoomPercent();
+  label_->SetProperty(views::kMarginsKey,
+                      new gfx::Insets(label_vertical_margin));
+  AddChildView(label_);
+
+  // Add extra padding between the zoom percent label and the buttons.
+  constexpr int kPercentLabelPadding = 64;
+  auto* label_padding_view = new views::View();
+  label_padding_view->SetPreferredSize(gfx::Size(
+      kPercentLabelPadding - spacing * 2, label_->GetPreferredSize().height()));
+  AddChildView(label_padding_view);
+
   // Add Zoom Out ("-") button.
   std::unique_ptr<views::Button> zoom_out_button =
       CreateZoomButton(this, kRemoveIcon, IDS_ACCNAME_ZOOM_MINUS2);
   zoom_out_button_ = zoom_out_button.get();
+  zoom_out_button_->SetProperty(views::kMarginsKey,
+                                new gfx::Insets(vector_button_margin));
   AddChildView(zoom_out_button.release());
 
-  // Add zoom label with the new zoom percent.
-  label_ = new ZoomValue(web_contents_);
-  UpdateZoomPercent();
-  AddChildView(label_);
-
   // Add Zoom In ("+") button.
   std::unique_ptr<views::Button> zoom_in_button =
       CreateZoomButton(this, kAddIcon, IDS_ACCNAME_ZOOM_PLUS2);
   zoom_in_button_ = zoom_in_button.get();
+  zoom_in_button_->SetProperty(views::kMarginsKey,
+                               new gfx::Insets(vector_button_margin));
   AddChildView(zoom_in_button.release());
 
   // Add "Reset" button.