Updates Zoom bubble layout and adds +/- buttons

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

 // Copyright (c) 2012 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.
 
 #include "chrome/browser/ui/views/location_bar/zoom_bubble_view.h"
 
+#include "base/auto_reset.h"
 #include "base/i18n/number_formatting.h"
 #include "base/i18n/rtl.h"
 #include "base/strings/stringprintf.h"
+#include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/browser/chrome_notification_types.h"
 #include "chrome/browser/platform_util.h"
 #include "chrome/browser/ui/browser.h"
 #include "chrome/browser/ui/browser_finder.h"
 #include "chrome/browser/ui/browser_tabstrip.h"
 #include "chrome/browser/ui/browser_window.h"
 #include "chrome/browser/ui/views/frame/browser_view.h"
 #include "chrome/browser/ui/views/location_bar/location_bar_view.h"
 #include "chrome/browser/ui/views/location_bar/zoom_view.h"
 #include "chrome/common/extensions/api/extension_action/action_info.h"
 #include "chrome/grit/generated_resources.h"
 #include "chrome/grit/theme_resources.h"
 #include "components/zoom/page_zoom.h"
 #include "components/zoom/zoom_controller.h"
 #include "content/public/browser/notification_source.h"
 #include "extensions/browser/extension_zoom_request_client.h"
 #include "extensions/common/manifest_handlers/icons_handler.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/base/material_design/material_design_controller.h"
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/base/ui_features.h"
 #include "ui/gfx/favicon_size.h"
+#include "ui/gfx/vector_icon_types.h"
+#include "ui/native_theme/native_theme.h"
 #include "ui/views/controls/button/image_button.h"
+#include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/controls/separator.h"
 #include "ui/views/layout/grid_layout.h"
 #include "ui/views/layout/layout_constants.h"
 #include "ui/views/widget/widget.h"
 
 // static
 ZoomBubbleView* ZoomBubbleView::zoom_bubble_ = nullptr;
 
 // static
@@ skipping 80 matching lines @@
   if (zoom_bubble_)
     zoom_bubble_->CloseBubble();
 }
 
 // static
 ZoomBubbleView* ZoomBubbleView::GetZoomBubble() {
   return zoom_bubble_;
 }
 
 void ZoomBubbleView::Refresh() {
-  zoom::ZoomController* zoom_controller =
-      zoom::ZoomController::FromWebContents(web_contents_);
-  int zoom_percent = zoom_controller->GetZoomPercent();
-  label_->SetText(l10n_util::GetStringFUTF16(
-      IDS_TOOLTIP_ZOOM, base::FormatPercent(zoom_percent)));
+  UpdateZoomPercent();
   StartTimerIfNecessary();
 }
 
 ZoomBubbleView::ZoomBubbleView(
     views::View* anchor_view,
     const gfx::Point& anchor_point,
     content::WebContents* web_contents,
     DisplayReason reason,
     ImmersiveModeController* immersive_mode_controller)
     : LocationBarBubbleDelegateView(anchor_view, anchor_point, web_contents),
       image_button_(nullptr),
       label_(nullptr),
+      zoom_out_button_(nullptr),
+      zoom_in_button_(nullptr),
+      reset_button_(nullptr),
       web_contents_(web_contents),
       auto_close_(reason == AUTOMATIC),
+      ignore_close_bubble_(false),
       immersive_mode_controller_(immersive_mode_controller) {
   set_notify_enter_exit_on_child(true);
   if (immersive_mode_controller_)
     immersive_mode_controller_->AddObserver(this);
   UseCompactMargins();
 }
 
 ZoomBubbleView::~ZoomBubbleView() {
   if (immersive_mode_controller_)
     immersive_mode_controller_->RemoveObserver(this);
@@ skipping 24 matching lines @@
   views::GridLayout* grid_layout = new views::GridLayout(this);
   SetLayoutManager(grid_layout);
   views::ColumnSet* columns = grid_layout->AddColumnSet(0);
   // First row.
   if (extension_info_.icon_image) {
     columns->AddColumn(views::GridLayout::CENTER, views::GridLayout::CENTER, 2,
                        views::GridLayout::USE_PREF, 0, 0);
   }
   columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
                      views::GridLayout::USE_PREF, 0, 0);
+  const bool material = ui::MaterialDesignController::IsSecondaryUiMaterial();

[Peter Kasting, 2017/04/28 05:58:48]

Do we have to key this off secondary-ui-material?  I thought this was a UI we'd
wanted for several years now.  I'd like to avoid the conditionals and just
change this.

This would hopefully also let us switch to a box layout.

[varkha, 2017/04/28 06:21:19]

Yes, I'll do that if this is not blocked on Harmony launch.

[varkha, 2017/05/01 10:12:00]

Done.

+  if (material) {
+    const int kResetButtonPadding = 10;

[Peter Kasting, 2017/04/28 05:58:48]

This should be using a constant from the layout provider, presumably the
unrelated control horizontal spacing.

[varkha, 2017/04/28 06:21:19]

Acknowledged.

[varkha, 2017/05/01 10:12:00]

Done.

+    const gfx::Insets kBubbleContentsInsets(2, 0, 2, 10);

[Peter Kasting, 2017/04/28 05:58:48]

These numbers are very magic (and I don't recognize them).

It seems like these should be using the toast insets from the harmony spec (
https://folio.googleplex.com/chrome-ux-specs-and-sources/Chrome%20browser%20(...
).  I would think the best way to do this would be to provide a new InsetsMetric
in the layout provider for this.

[varkha, 2017/04/28 06:21:19]

Acknowledged.

[varkha, 2017/05/01 10:11:59]

Done.

+
+    columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
+                       views::GridLayout::USE_PREF, 0, 0);
+    columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
+                       views::GridLayout::USE_PREF, 0, 0);
+    columns->AddPaddingColumn(0, kResetButtonPadding);
+    columns->AddColumn(views::GridLayout::TRAILING, views::GridLayout::FILL, 0,
+                       views::GridLayout::USE_PREF, 0, 0);
+    grid_layout->SetInsets(kBubbleContentsInsets);
+  }
   grid_layout->StartRow(0, 0);
 
   // 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) {
     image_button_ = new views::ImageButton(this);
     image_button_->SetTooltipText(
         l10n_util::GetStringFUTF16(IDS_TOOLTIP_ZOOM_EXTENSION_ICON,
                                    base::UTF8ToUTF16(extension_info_.name)));
     image_button_->SetImage(views::Button::STATE_NORMAL,
                             &extension_info_.icon_image->image_skia());
     grid_layout->AddView(image_button_);
   }
 
   // Add zoom label with the new zoom percent.
-  zoom::ZoomController* zoom_controller =
-      zoom::ZoomController::FromWebContents(web_contents_);
-  int zoom_percent = zoom_controller->GetZoomPercent();
-  label_ = new views::Label(l10n_util::GetStringFUTF16(
-      IDS_TOOLTIP_ZOOM, base::FormatPercent(zoom_percent)));
-  label_->SetFontList(GetTitleFontList());
+  label_ = new views::Label();
+  UpdateZoomPercent();
+  if (material) {
+    zoom_out_button_ = CreateZoomButton(kRemoveIcon, IDS_ACCNAME_ZOOM_MINUS2);
+    grid_layout->AddView(zoom_out_button_);
+
+    label_->SetEnabledColor(GetNativeTheme()->GetSystemColor(
+        ui::NativeTheme::kColorId_ButtonEnabledColor));

[Peter Kasting, 2017/04/28 05:58:48]

The latest Harmony mock I see shows this in normal text color, which is what I'd
expect.  Using a button color for a label is surprising.

[varkha, 2017/04/28 06:21:19]

Acknowledged. On Mac the labels are all muted gray so I was trying to preserve
that
I guess.

[Peter Kasting, 2017/04/28 06:47:26]

What do you mean by "on Mac the labels are all muted gray"?  Are you referring
to the screenshot in the bug?  That is from an outdated mock and should
basically be ignored at this point.

[varkha, 2017/05/01 10:12:00]

Done.

+  } else {
+    label_->SetFontList(GetTitleFontList());
+  }
   grid_layout->AddView(label_);
 
-  // Second row.
-  grid_layout->AddPaddingRow(0, 8);
-  columns = grid_layout->AddColumnSet(1);
-  columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
-                     views::GridLayout::USE_PREF, 0, 0);
-  grid_layout->StartRow(0, 1);
+  if (material) {
+    zoom_in_button_ = CreateZoomButton(kAddIcon, IDS_ACCNAME_ZOOM_PLUS2);
+    grid_layout->AddView(zoom_in_button_);
+  } else {
+    // Second row.
+    grid_layout->AddPaddingRow(0, 8);
+    columns = grid_layout->AddColumnSet(1);
+    columns->AddColumn(views::GridLayout::FILL, views::GridLayout::FILL, 1,
+                       views::GridLayout::USE_PREF, 0, 0);
+    grid_layout->StartRow(0, 1);
+  }
 
   // Add "Reset to Default" button.
-  grid_layout->AddView(
-      views::MdTextButton::CreateSecondaryUiButton(
-          this, l10n_util::GetStringUTF16(IDS_ZOOM_SET_DEFAULT)));
+  reset_button_ = views::MdTextButton::CreateSecondaryUiButton(
+      this, l10n_util::GetStringUTF16(material ? IDS_ZOOM_SET_DEFAULT_SHORT
+                                               : IDS_ZOOM_SET_DEFAULT));
+  if (material) {
+    // TODO(varkha): When cleaning up pre-material code path and
+    // IDS_ZOOM_SET_DEFAULT is not used as the button text anymore, rename the
+    // IDS and change the string to a more explanatory version, e.g. "Reset to
+    // default zoom level".
+    reset_button_->SetTooltipText(
+        l10n_util::GetStringUTF16(IDS_ZOOM_SET_DEFAULT));
+  }
+  grid_layout->AddView(reset_button_);
 
   StartTimerIfNecessary();
 }
 
 void ZoomBubbleView::WindowClosing() {
   // |zoom_bubble_| can be a new bubble by this point (as Close(); doesn't
   // call this right away). Only set to nullptr when it's this bubble.
   if (zoom_bubble_ == this)
     zoom_bubble_ = nullptr;
 }
 
 void ZoomBubbleView::CloseBubble() {
+  if (ignore_close_bubble_)
+    return;
+
   // Widget's Close() is async, but we don't want to use zoom_bubble_ after
   // this. Additionally web_contents_ may have been destroyed.
   zoom_bubble_ = nullptr;
   web_contents_ = nullptr;
   LocationBarBubbleDelegateView::CloseBubble();
 }
 
 void ZoomBubbleView::ButtonPressed(views::Button* sender,
                                    const ui::Event& event) {
+  base::AutoReset<bool> auto_ignore_close_bubble(&ignore_close_bubble_, true);

[Peter Kasting, 2017/04/28 05:58:48]

Is this so if the timer is already running, it won't do anything?  If so, why
not just cancel the timer here instead of adding this variable?

[varkha, 2017/04/28 06:21:19]

No, this is to skip over 100% without closing the dialog. I think any button
interaction here should never result in the bubble getting closed so I've
added this here rather than plumbing do_not_close_me variable up and
down.

[Peter Kasting, 2017/04/28 06:47:26]

My brain hurts trying to understand how closing works because we now seem to
have multiple levels of callbacks, guarding each other's functionality using
auto-resetting boolean members.  Can you find a more direct way of plumbing
things?  I'm sorry, it's too late at night for me to have concrete suggestions
on precisely how to do this.

[varkha, 2017/05/01 10:11:59]

I've added a comment explaining the reasoning. I will look some more if it is
possible to make something that doesn't complicate things too much but this
actually seemed to me more understandable than passing an additional UI-related
parameter via multiple levels of stack.
e.g. Browser::OnZoomChanged would need an additional field (on top of existing
data.can_show_bubble) to mark when zoom is changing via the bubble buttons.
The chain of invocations currently leading to this is quite wide so this could
mushroom in something much larger. Certainly seems like at least a separate
task.

+  auto_close_ = false;

[Peter Kasting, 2017/04/28 05:58:48]

Won't this mean once you click a button the bubble never auto-hides?  Seems like
clicking a button should just reset the timer (to a longer value like 5
seconds).

[varkha, 2017/04/28 06:21:19]

Yes. This is similar to ET_GESTURE_TAP handling that also blocks auto_close. I
wasn't expecting a dialog to close on me after interacting with it, especially
with the
buttons that invite repetition like +/- where repetition may be rare for some
people
and any auto-close timer might come when a user is about to press or tap +/-
again.

[Peter Kasting, 2017/04/28 06:47:26]

Stopping auto-close permanently is potentially annoying.  If you think the timer
reset idea I have (using a longer timeout) is not the right way to go, I would
bring this up with hwi.

[varkha, 2017/05/01 10:12:00]

I've played a bit more with it and I find that 5 seconds is long enough to still
be
comfortable for repeated presses. Done.

+  StopTimer();
   if (sender == image_button_) {
     DCHECK(extension_info_.icon_image) << "Invalid button press.";
     Browser* browser = chrome::FindBrowserWithWebContents(web_contents_);
     chrome::AddSelectedTabWithURL(
         browser, GURL(base::StringPrintf("chrome://extensions?id=%s",
                                          extension_info_.id.c_str())),
         ui::PAGE_TRANSITION_FROM_API);
+  } else if (sender == zoom_out_button_) {
+    zoom::PageZoom::Zoom(web_contents_, content::PAGE_ZOOM_OUT);
+  } else if (sender == zoom_in_button_) {
+    zoom::PageZoom::Zoom(web_contents_, content::PAGE_ZOOM_IN);
+  } else if (sender == reset_button_) {
+    zoom::PageZoom::Zoom(web_contents_, content::PAGE_ZOOM_RESET);
   } else {
-    zoom::PageZoom::Zoom(web_contents_, content::PAGE_ZOOM_RESET);
+    NOTREACHED();
   }
 }
 
 void ZoomBubbleView::OnImmersiveRevealStarted() {
   CloseBubble();
 }
 
 void ZoomBubbleView::OnImmersiveModeControllerDestroyed() {
   immersive_mode_controller_ = nullptr;
 }
@@ skipping 42 matching lines @@
   icon_size = browser_action->default_icon.map().begin()->first;
   extension_info_.icon_image.reset(
       new extensions::IconImage(web_contents_->GetBrowserContext(),
                                 extension,
                                 browser_action->default_icon,
                                 icon_size,
                                 default_extension_icon_image,
                                 this));
 }
 
+views::Button* ZoomBubbleView::CreateZoomButton(const gfx::VectorIcon& icon,

[Peter Kasting, 2017/04/28 05:58:48]

Nit: It would be nice if this returned a unique_ptr to make it clear it was
transferring ownership back.

[varkha, 2017/04/28 06:21:19]

Acknowledged.

[varkha, 2017/05/01 10:12:00]

Done.

+                                                int tooltip_id) {
+  views::ImageButton* button = views::CreateVectorImageButton(this);
+  views::SetImageFromVectorIcon(button, icon);
+  button->SetFocusForPlatform();
+  button->SetTooltipText(l10n_util::GetStringUTF16(tooltip_id));
+  return button;
+}
+
+void ZoomBubbleView::UpdateZoomPercent() {
+  zoom::ZoomController* zoom_controller =
+      zoom::ZoomController::FromWebContents(web_contents_);
+  const int zoom_percent = zoom_controller->GetZoomPercent();
+  const base::string16 label_text =
+      ui::MaterialDesignController::IsSecondaryUiMaterial()
+          ? base::FormatPercent(zoom_percent)
+          : l10n_util::GetStringFUTF16(IDS_TOOLTIP_ZOOM,
+                                       base::FormatPercent(zoom_percent));
+  label_->SetText(label_text);
+}
+
 void ZoomBubbleView::StartTimerIfNecessary() {
   if (!auto_close_)
     return;
 
   if (timer_.IsRunning()) {
     timer_.Reset();
   } else {
     // The number of milliseconds the bubble should stay on the screen if it
     // will close automatically.
     const int kBubbleCloseDelay = 1500;
     timer_.Start(FROM_HERE,
                  base::TimeDelta::FromMilliseconds(kBubbleCloseDelay), this,
                  &ZoomBubbleView::CloseBubble);
   }
 }
 
 void ZoomBubbleView::StopTimer() {
   timer_.Stop();
 }
 
 ZoomBubbleView::ZoomBubbleExtensionInfo::ZoomBubbleExtensionInfo() {}
 
 ZoomBubbleView::ZoomBubbleExtensionInfo::~ZoomBubbleExtensionInfo() {}