Create extensions menu header + settings button

Adds a header area to the top of the Extensions menu. This is not done
as a bubble title since the area needs to have non-standard buttons in
the captions area + transitions will be made between different pages.

Bug: chromium:943702
Change-Id: Ie9c62e0f1d9ea5cf5e53b94a18c5810ca83112af
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1548244
Commit-Queue: Peter Boström <pbos@chromium.org>
Reviewed-by: Taylor Bergquist <tbergquist@chromium.org>
Cr-Commit-Position: refs/heads/master@{#646619}

chrome/app/generated_resources.grd

@@ -4231,6 +4231,9 @@ Keep your key file in a safe place. You will need it to create new versions of y
       <message name="IDS_EXTENSIONS_MENU_TITLE" desc="Title of the Extensions Menu">
         Extensions
       </message>
+      <message name="IDS_EXTENSIONS_MENU_SETTINGS_TOOLTIP" desc="Tooltip for the 'manage extensions' button inside the Extensions Menu">
+        Manage extensions
+      </message>
 
       <!-- Settings API bubble -->
       <message name="IDS_EXTENSIONS_SETTINGS_API_TITLE_HOME_PAGE_BUBBLE" desc="Title of a bubble warning users that an extension has overridden their home page setting">

chrome/browser/ui/views/extensions/extensions_menu_view.cc

@@ -4,17 +4,52 @@
 
 #include "chrome/browser/ui/views/extensions/extensions_menu_view.h"
 
+#include "base/memory/ptr_util.h"
+#include "chrome/app/vector_icons/vector_icons.h"
 #include "chrome/browser/profiles/profile.h"
 #include "chrome/browser/ui/browser.h"
+#include "chrome/browser/ui/chrome_pages.h"
 #include "chrome/browser/ui/toolbar/toolbar_action_view_controller.h"
 #include "chrome/browser/ui/views/chrome_layout_provider.h"
 #include "chrome/browser/ui/views/extensions/extensions_menu_button.h"
 #include "chrome/grit/generated_resources.h"
+#include "third_party/skia/include/core/SkPath.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/views/controls/button/image_button.h"
+#include "ui/views/controls/button/image_button_factory.h"
 #include "ui/views/layout/box_layout.h"
+#include "ui/views/layout/flex_layout.h"
+#include "ui/views/view_class_properties.h"
 
 namespace {
 ExtensionsMenuView* g_extensions_dialog = nullptr;
+
+constexpr int EXTENSIONS_SETTINGS_ID = 42;
+
+std::unique_ptr<views::View> CreateHeaderView(const base::string16& title) {
+  auto container = std::make_unique<views::View>();
+
+  auto* layout_manager =
+      container->SetLayoutManager(std::make_unique<views::FlexLayout>());
+  layout_manager->SetOrientation(views::LayoutOrientation::kHorizontal)
+      .SetCrossAxisAlignment(views::LayoutAlignment::kCenter);
+
+  gfx::Insets header_insets =
+      ChromeLayoutProvider::Get()->GetInsetsMetric(views::INSETS_DIALOG);
+  container->SetProperty(views::kMarginsKey, new gfx::Insets(header_insets));
+
+  views::Label* title_label =
+      new views::Label(title, views::style::CONTEXT_DIALOG_TITLE);
+  title_label->SetHorizontalAlignment(gfx::ALIGN_LEFT);
+  title_label->SetFocusBehavior(views::View::FocusBehavior::ACCESSIBLE_ONLY);
+
+  container->AddChildView(title_label);
+  layout_manager->SetFlexForView(title_label,
+                                 views::FlexSpecification::ForSizeRule(
+                                     views::MinimumFlexSizeRule::kPreferred,
+                                     views::MaximumFlexSizeRule::kUnbounded));
+  return container;
+}
 }  // namespace
 
 ExtensionsMenuView::ExtensionsMenuView(views::View* anchor_view,
@@ -40,6 +75,13 @@ ExtensionsMenuView::~ExtensionsMenuView() {
   g_extensions_dialog = nullptr;
 }
 
+void ExtensionsMenuView::ButtonPressed(views::Button* sender,
+                                       const ui::Event& event) {
+  if (sender->id() != EXTENSIONS_SETTINGS_ID)
+    return;
+  chrome::ShowExtensions(browser_, std::string());
+}
+
 base::string16 ExtensionsMenuView::GetAccessibleWindowTitle() const {
   // TODO(pbos): Revisit this when subpanes exist so that the title read by a11y
   // tools are in sync with the current visuals.
@@ -66,10 +108,15 @@ bool ExtensionsMenuView::ShouldSnapFrameWidth() const {
 }
 
 void ExtensionsMenuView::Repopulate() {
-  // TODO(pbos): Add a header that displays the menu title. This cannot use
-  // ::GetWindowTitle() as we need it to belong to the displayed panel and not
-  // the BubbleFrameView.
   RemoveAllChildViews(true);
+
+  auto header =
+      CreateHeaderView(l10n_util::GetStringUTF16(IDS_EXTENSIONS_MENU_TITLE));
+  header->AddChildView(CreateImageButtonForHeader(
+      kSettingsIcon, EXTENSIONS_SETTINGS_ID,
+      l10n_util::GetStringUTF16(IDS_EXTENSIONS_MENU_SETTINGS_TOOLTIP)));
+  AddChildView(std::move(header));
+
   for (auto action_id : model_->action_ids()) {
     AddChildView(std::make_unique<ExtensionsMenuButton>(
         browser_, model_->CreateActionForId(browser_, nullptr, action_id)));
@@ -137,3 +184,25 @@ void ExtensionsMenuView::Hide() {
 ExtensionsMenuView* ExtensionsMenuView::GetExtensionsMenuViewForTesting() {
   return g_extensions_dialog;
 }
+
+std::unique_ptr<views::ImageButton>
+ExtensionsMenuView::CreateImageButtonForHeader(const gfx::VectorIcon& icon,
+                                               int id,
+                                               const base::string16& tooltip) {
+  views::ImageButton* image_button = views::CreateVectorImageButton(this);
+  views::SetImageFromVectorIconWithColor(
+      image_button, icon,
+      GetNativeTheme()->SystemDarkModeEnabled()
+          ? SkColorSetA(SK_ColorWHITE, 0xDD)
+          : gfx::kGoogleGrey700);
+  image_button->set_id(id);
+  image_button->SetTooltipText(tooltip);
+  image_button->SizeToPreferredSize();
+
+  // Let the settings button use a circular inkdrop shape.
+  auto highlight_path = std::make_unique<SkPath>();
+  highlight_path->addOval(gfx::RectToSkRect(gfx::Rect(image_button->size())));
+  image_button->SetProperty(views::kHighlightPathKey, highlight_path.release());
+
+  return base::WrapUnique<views::ImageButton>(image_button);
+}

chrome/browser/ui/views/extensions/extensions_menu_view.h

@@ -5,17 +5,25 @@
 #ifndef CHROME_BROWSER_UI_VIEWS_EXTENSIONS_EXTENSIONS_MENU_VIEW_H_
 #define CHROME_BROWSER_UI_VIEWS_EXTENSIONS_EXTENSIONS_MENU_VIEW_H_
 
+#include <memory>
+
 #include "chrome/browser/ui/toolbar/toolbar_actions_model.h"
 #include "ui/views/bubble/bubble_dialog_delegate_view.h"
+#include "ui/views/controls/button/button.h"
+
+namespace gfx {
+struct VectorIcon;
+}  // namespace gfx
 
 namespace views {
-class View;
+class ImageButton;
 }  // namespace views
 
 // This bubble view displays a list of user extensions.
 // TODO(pbos): Once there's more functionality in here (getting to
 // chrome://extensions, pinning, extension settings), update this comment.
-class ExtensionsMenuView : public views::BubbleDialogDelegateView,
+class ExtensionsMenuView : public views::ButtonListener,
+                           public views::BubbleDialogDelegateView,
                            public ToolbarActionsModel::Observer {
  public:
   ExtensionsMenuView(views::View* anchor_view, Browser* browser);
@@ -26,6 +34,9 @@ class ExtensionsMenuView : public views::BubbleDialogDelegateView,
   static void Hide();
   static ExtensionsMenuView* GetExtensionsMenuViewForTesting();
 
+  // views::ButtonListener:
+  void ButtonPressed(views::Button* sender, const ui::Event& event) override;
+
   // views::BubbleDialogDelegateView:
   base::string16 GetAccessibleWindowTitle() const override;
   bool AcceleratorPressed(const ui::Accelerator& accelerator) override;
@@ -49,6 +60,11 @@ class ExtensionsMenuView : public views::BubbleDialogDelegateView,
  private:
   void Repopulate();
 
+  std::unique_ptr<views::ImageButton> CreateImageButtonForHeader(
+      const gfx::VectorIcon& icon,
+      int id,
+      const base::string16& tooltip);
+
   Browser* const browser_;
   ToolbarActionsModel* const model_;
   ScopedObserver<ToolbarActionsModel, ToolbarActionsModel::Observer>