overview: Tweak look of overivew selection widget.

Increase font and change icon and paddings. Also change dimmed overview windows
opacity.

Test: manual
Bug: 782320
Change-Id: I1cbb78e06389a7f7335bf9cff86fde0b7b7eacc8
Reviewed-on: https://chromium-review.googlesource.com/892087
Commit-Queue: Sammie Quon <sammiequon@chromium.org>
Reviewed-by: Mitsuru Oshima <oshima@chromium.org>
Cr-Commit-Position: refs/heads/master@{#534710}

ash/resources/vector_icons/BUILD.gn

@@ -96,6 +96,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "notification_stylus_battery_warning.icon",
     "notification_supervised.icon",
     "notification_timer.icon",
+    "overview_text_filter_search.icon",
     "overview_window_close.icon",
     "palette_action_capture_region.1x.icon",
     "palette_action_capture_region.icon",

ash/resources/vector_icons/overview_text_filter_search.icon

+// Copyright 2018 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, 20,
+MOVE_TO, 13.01f, 11.81f,
+R_H_LINE_TO, -0.63f,
+R_LINE_TO, -0.22f, -0.22f,
+R_ARC_TO, 5.18f, 5.18f, 0, 0, 0, 1.26f, -3.39f,
+R_ARC_TO, 5.2f, 5.2f, 0, 1, 0, -5.2f, 5.2f,
+R_ARC_TO, 5.18f, 5.18f, 0, 0, 0, 3.39f, -1.26f,
+R_LINE_TO, 0.22f, 0.22f,
+R_V_LINE_TO, 0.63f,
+LINE_TO, 15.81f, 17,
+LINE_TO, 17, 15.81f,
+R_LINE_TO, -3.99f, -4,
+CLOSE,
+R_MOVE_TO, -4.8f, 0,
+R_ARC_TO, 3.6f, 3.6f, 0, 0, 1, -3.6f, -3.6f,
+R_ARC_TO, 3.6f, 3.6f, 0, 0, 1, 3.6f, -3.6f,
+R_ARC_TO, 3.6f, 3.6f, 0, 0, 1, 3.6f, 3.6f,
+R_ARC_TO, 3.6f, 3.6f, 0, 0, 1, -3.6f, 3.6f,
+CLOSE,
+END

ash/wm/overview/window_selector.cc

@@ -14,6 +14,7 @@
 #include "ash/accessibility/accessibility_controller.h"
 #include "ash/metrics/user_metrics_recorder.h"
 #include "ash/public/cpp/shell_window_ids.h"
+#include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/screen_util.h"
 #include "ash/shelf/shelf.h"
 #include "ash/shell.h"
@@ -36,14 +37,12 @@
 #include "base/metrics/user_metrics.h"
 #include "base/threading/thread_task_runner_handle.h"
 #include "components/vector_icons/vector_icons.h"
-#include "third_party/skia/include/core/SkPath.h"
-#include "ui/base/resource/resource_bundle.h"
 #include "ui/compositor/layer.h"
 #include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/display/screen.h"
 #include "ui/events/event.h"
-#include "ui/gfx/canvas.h"
 #include "ui/gfx/geometry/insets.h"
+#include "ui/gfx/image/image_skia.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/gfx/skia_util.h"
 #include "ui/views/border.h"
@@ -59,39 +58,45 @@ namespace ash {
 namespace {
 
 // The amount of padding surrounding the text in the text filtering textbox.
-const int kTextFilterHorizontalPadding = 10;
+constexpr int kTextFilterHorizontalPadding = 6;
 
 // The height of the text filtering textbox.
-const int kTextFilterHeight = 40;
+constexpr int kTextFilterHeight = 32;
 
 // The margin at the bottom to make sure the text filter layer is hidden.
 // This is needed because positioning the text filter directly touching the top
 // edge of the screen still allows the shadow to peek through.
-const int kTextFieldBottomMargin = 2;
+constexpr int kTextFieldBottomMargin = 2;
 
 // Distance from top of overview to the top of text filtering textbox as a
 // proportion of the total overview area.
-const float kTextFilterTopScreenProportion = 0.02f;
+constexpr float kTextFilterTopScreenProportion = 0.02f;
 
 // Width of the text filter area.
-const int kTextFilterWidth = 280;
+constexpr int kTextFilterWidth = 280;
 
-// The font style used for text filtering textbox.
-static const ui::ResourceBundle::FontStyle kTextFilterFontStyle =
-    ui::ResourceBundle::FontStyle::BaseFont;
+// The font delta used for text filtering textbox.
+constexpr int kTextFilterFontDelta = 1;
 
 // The color of the text and its background in the text filtering textbox.
-const SkColor kTextFilterTextColor = SkColorSetARGB(222, 0, 0, 0);
-const SkColor kTextFilterBackgroundColor = SK_ColorWHITE;
+constexpr SkColor kTextFilterTextColor = SkColorSetARGB(0xFF, 0x3C, 0x40, 0x43);
+constexpr SkColor kTextFilterBackgroundColor = SK_ColorWHITE;
 
 // The color or search icon.
-const SkColor kTextFilterIconColor = SkColorSetARGB(138, 0, 0, 0);
+constexpr SkColor kTextFilterIconColor = SkColorSetARGB(138, 0, 0, 0);
 
 // The size of search icon.
-const int kTextFilterIconSize = 20;
+constexpr int kTextFilterIconSize = 20;
 
 // The radius used for the rounded corners on the text filtering textbox.
-const int kTextFilterCornerRadius = 2;
+constexpr int kTextFilterCornerRadius = 16;
+
+// Values for the old overview ui.
+// TODO(crbug.com/782320): Delete these values when the old ui becomes obsolete.
+constexpr int kOldTextFilterHorizontalPadding = 6;
+constexpr int kOldTextFilterHeight = 40;
+constexpr SkColor kOldTextFilterTextColor = SkColorSetARGB(222, 0, 0, 0);
+constexpr int kOldTextFilterCornerRadius = 2;
 
 // A comparator for locating a selector item for a given root.
 struct WindowSelectorItemForRoot {
@@ -137,7 +142,8 @@ gfx::Rect GetTextFilterPosition(aura::Window* root_window) {
           0.5 * (total_bounds.width() -
                  std::min(kTextFilterWidth, total_bounds.width())),
       total_bounds.y() + total_bounds.height() * kTextFilterTopScreenProportion,
-      std::min(kTextFilterWidth, total_bounds.width()), kTextFilterHeight);
+      std::min(kTextFilterWidth, total_bounds.width()),
+      IsNewOverviewUi() ? kTextFilterHeight : kOldTextFilterHeight);
 }
 
 // Initializes the text filter on the top of the main root window and requests
@@ -161,28 +167,38 @@ views::Widget* CreateTextFilter(views::TextfieldController* controller,
 
   // Use |container| to specify the padding surrounding the text and to give
   // the textfield rounded corners.
-  views::View* container =
-      new RoundedRectView(kTextFilterCornerRadius, kTextFilterBackgroundColor);
-  ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
-  const int text_height =
-      std::max(kTextFilterIconSize,
-               bundle.GetFontList(kTextFilterFontStyle).GetHeight());
+  views::View* container = new RoundedRectView(
+      IsNewOverviewUi() ? kTextFilterCornerRadius : kOldTextFilterCornerRadius,
+      kTextFilterBackgroundColor);
+  const gfx::FontList& font_list =
+      views::Textfield::GetDefaultFontList().Derive(
+          kTextFilterFontDelta, gfx::Font::FontStyle::NORMAL,
+          gfx::Font::Weight::NORMAL);
+  const int text_height = std::max(kTextFilterIconSize, font_list.GetHeight());
   DCHECK(text_height);
   const int vertical_padding = (params.bounds.height() - text_height) / 2;
   auto* layout = container->SetLayoutManager(std::make_unique<views::BoxLayout>(
       views::BoxLayout::kHorizontal,
-      gfx::Insets(vertical_padding, kTextFilterHorizontalPadding),
+      gfx::Insets(vertical_padding,
+                  IsNewOverviewUi() ? kTextFilterHorizontalPadding
+                                    : kOldTextFilterHorizontalPadding,
+                  vertical_padding,
+                  IsNewOverviewUi() ? kTextFilterCornerRadius
+                                    : kOldTextFilterHorizontalPadding),
       kTextFilterHorizontalPadding));
 
-  views::Textfield* textfield = new views::Textfield;
+  views::Textfield* textfield = new views::Textfield();
   textfield->set_controller(controller);
   textfield->SetBorder(views::NullBorder());
   textfield->SetBackgroundColor(kTextFilterBackgroundColor);
-  textfield->SetTextColor(kTextFilterTextColor);
-  views::ImageView* image_view = new views::ImageView;
+  textfield->SetTextColor(IsNewOverviewUi() ? kTextFilterTextColor
+                                            : kOldTextFilterTextColor);
+  textfield->SetFontList(font_list);
+
+  views::ImageView* image_view = new views::ImageView();
   image_view->SetImage(image);
+
   container->AddChildView(image_view);
-  textfield->SetFontList(bundle.GetFontList(kTextFilterFontStyle));
   container->AddChildView(textfield);
   layout->SetFlexForView(textfield, 1);
   widget->SetContentsView(container);
@@ -210,16 +226,7 @@ bool WindowSelector::IsSelectable(aura::Window* window) {
 WindowSelector::WindowSelector(WindowSelectorDelegate* delegate)
     : delegate_(delegate),
       restore_focus_window_(wm::GetFocusedWindow()),
-      ignore_activations_(false),
-      selected_grid_index_(0),
-      overview_start_time_(base::Time::Now()),
-      num_key_presses_(0),
-      num_items_(0),
-      showing_text_filter_(false),
-      text_filter_string_length_(0),
-      num_times_textfield_cleared_(0),
-      restoring_minimized_windows_(false),
-      text_filter_bottom_(0) {
+      overview_start_time_(base::Time::Now()) {
   DCHECK(delegate_);
 }
 
@@ -299,10 +306,14 @@ void WindowSelector::Init(const WindowList& windows,
       window_grid->PositionWindows(/*animate=*/true);
     }
 
-    search_image_ = gfx::CreateVectorIcon(
-        vector_icons::kSearchIcon, kTextFilterIconSize, kTextFilterIconColor);
+    // Image used for text filter textfield.
+    gfx::ImageSkia search_image =
+        gfx::CreateVectorIcon(IsNewOverviewUi() ? kOverviewTextFilterSearchIcon
+                                                : vector_icons::kSearchIcon,
+                              kTextFilterIconSize, kTextFilterIconColor);
+
     aura::Window* root_window = Shell::GetPrimaryRootWindow();
-    text_filter_widget_.reset(CreateTextFilter(this, root_window, search_image_,
+    text_filter_widget_.reset(CreateTextFilter(this, root_window, search_image,
                                                &text_filter_bottom_));
   }
 

ash/wm/overview/window_selector.h

@@ -19,7 +19,6 @@
 #include "base/time/time.h"
 #include "ui/aura/window_observer.h"
 #include "ui/display/display_observer.h"
-#include "ui/gfx/image/image_skia.h"
 #include "ui/views/controls/textfield/textfield_controller.h"
 #include "ui/wm/public/activation_change_observer.h"
 
@@ -31,7 +30,7 @@ class Rect;
 namespace views {
 class Textfield;
 class Widget;
-}
+}  // namespace views
 
 namespace ash {
 class OverviewWindowDragController;
@@ -210,7 +209,7 @@ class ASH_EXPORT WindowSelector : public display::DisplayObserver,
 
   // True when performing operations that may cause window activations. This is
   // used to prevent handling the resulting expected activation.
-  bool ignore_activations_;
+  bool ignore_activations_ = false;
 
   // List of all the window overview grids, one for each root window.
   std::vector<std::unique_ptr<WindowGrid>> grid_list_;
@@ -220,7 +219,7 @@ class ASH_EXPORT WindowSelector : public display::DisplayObserver,
   std::unique_ptr<SplitViewOverviewOverlay> split_view_overview_overlay_;
 
   // Tracks the index of the root window the selection widget is in.
-  size_t selected_grid_index_;
+  size_t selected_grid_index_ = 0;
 
   // The following variables are used for metric collection purposes. All of
   // them refer to this particular overview session and are not cumulative:
@@ -228,36 +227,33 @@ class ASH_EXPORT WindowSelector : public display::DisplayObserver,
   base::Time overview_start_time_;
 
   // The number of arrow key presses.
-  size_t num_key_presses_;
+  size_t num_key_presses_ = 0;
 
   // The number of items in the overview.
-  size_t num_items_;
+  size_t num_items_ = 0;
 
   // Indicates if the text filter is shown on screen (rather than above it).
-  bool showing_text_filter_;
+  bool showing_text_filter_ = false;
 
   // Window text filter widget. As the user writes on it, we filter the items
   // in the overview. It is also responsible for handling overview key events,
   // such as enter key to select.
   std::unique_ptr<views::Widget> text_filter_widget_;
 
-  // Image used for text filter textfield.
-  gfx::ImageSkia search_image_;
-
   // The current length of the string entered into the text filtering textfield.
-  size_t text_filter_string_length_;
+  size_t text_filter_string_length_ = 0;
 
   // The number of times the text filtering textfield has been cleared of text
   // during this overview mode session.
-  size_t num_times_textfield_cleared_;
+  size_t num_times_textfield_cleared_ = 0;
 
   // Tracks whether minimized windows are currently being restored for overview
   // mode.
-  bool restoring_minimized_windows_;
+  bool restoring_minimized_windows_ = false;
 
   // The distance between the top edge of the screen and the bottom edge of
   // the text filtering textfield.
-  int text_filter_bottom_;
+  int text_filter_bottom_ = 0;
 
   bool is_shut_down_ = false;
 

ash/wm/overview/window_selector_item.cc

@@ -87,7 +87,7 @@ constexpr int kHorizontalLabelPaddingDp = 12;
 constexpr int kHeaderHeightDp = 40;
 
 // Opacity for dimmed items.
-constexpr float kDimmedItemOpacity = 0.5f;
+constexpr float kDimmedItemOpacity = 0.3f;
 
 // Opacity for fading out during closing a window.
 constexpr float kClosingItemOpacity = 0.8f;