Visual improvements to text filtering in Ash overview mode

The following visual improvements are made by this CL:

* The textfield is given a black background with an
  alpha of 70% and rounded corners.
* The length of the textfield takes up 25% of the
  available length instead of 50%.
* Padding surrounds the text within the textfield.
* Sufficient space is reserved at the top of the screen
  to guarantee that the textfield will never overlap
  anything (i.e., selection widget in the top row
  of items).
* The textfield fades in/out in addition to sliding
  up/down.
* There is now space between the top of the screen
  and the textfield.

BUG=394871
TEST=WindowSelectorTest.BasicArrowKeyNavigation modified

Review URL: https://codereview.chromium.org/403493006

Cr-Commit-Position: refs/heads/master@{#288546}
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@288546 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 127 insertions, 31 deletions

diff --git a/ash/wm/overview/window_grid.cc b/ash/wm/overview/window_grid.cc
index d9f136f..e8751b8 100644
--- a/ash/wm/overview/window_grid.cc
+++ b/ash/wm/overview/window_grid.cc
@@ -4,6 +4,7 @@
 
 #include "ash/wm/overview/window_grid.h"
 
+#include "ash/ash_switches.h"
 #include "ash/screen_util.h"
 #include "ash/shell.h"
 #include "ash/shell_window_ids.h"
@@ -13,6 +14,7 @@
 #include "ash/wm/overview/window_selector_panels.h"
 #include "ash/wm/overview/window_selector_window.h"
 #include "ash/wm/window_state.h"
+#include "base/command_line.h"
 #include "base/i18n/string_search.h"
 #include "base/memory/scoped_vector.h"
 #include "third_party/skia/include/core/SkColor.h"
@@ -102,6 +104,10 @@ const int kOverviewSelectorTransitionMilliseconds = 100;
 const SkColor kWindowOverviewSelectionColor = SK_ColorBLACK;
 const unsigned char kWindowOverviewSelectorOpacity = 128;
 
+// The minimum amount of spacing between the bottom of the text filtering
+// text field and the top of the selection widget on the first row of items.
+const int kTextFilterBottomMargin = 5;
+
 // Returns the vector for the fade in animation.
 gfx::Vector2d GetSlideVectorForFadeIn(WindowSelector::Direction direction,
                                       const gfx::Rect& bounds) {
@@ -178,6 +184,17 @@ void WindowGrid::PositionWindows(bool animate) {
       ScreenUtil::GetDisplayWorkAreaBoundsInParent(
           Shell::GetContainer(root_window_, kShellWindowId_DefaultContainer)));
 
+  // If the text filtering feature is enabled, reserve space at the top for the
+  // text filtering textbox to appear.
+  if (!CommandLine::ForCurrentProcess()->HasSwitch(
+          switches::kAshDisableTextFilteringInOverviewMode)) {
+    total_bounds.Inset(
+        0,
+        WindowSelector::kTextFilterBottomEdge + kTextFilterBottomMargin,
+        0,
+        0);
+  }
+
   // Find the minimum number of windows per row that will fit all of the
   // windows on screen.
   num_columns_ = std::max(
diff --git a/ash/wm/overview/window_selector.cc b/ash/wm/overview/window_selector.cc
index ca6923f..d1aba53 100644
--- a/ash/wm/overview/window_selector.cc
+++ b/ash/wm/overview/window_selector.cc
@@ -21,15 +21,21 @@
 #include "base/auto_reset.h"
 #include "base/command_line.h"
 #include "base/metrics/histogram.h"
+#include "third_party/skia/include/core/SkPaint.h"
+#include "third_party/skia/include/core/SkPath.h"
 #include "ui/aura/client/focus_client.h"
 #include "ui/aura/window.h"
 #include "ui/aura/window_event_dispatcher.h"
 #include "ui/aura/window_observer.h"
+#include "ui/base/resource/resource_bundle.h"
 #include "ui/compositor/scoped_layer_animation_settings.h"
 #include "ui/events/event.h"
+#include "ui/gfx/canvas.h"
 #include "ui/gfx/screen.h"
+#include "ui/gfx/skia_util.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/textfield/textfield.h"
+#include "ui/views/layout/box_layout.h"
 #include "ui/wm/core/window_util.h"
 #include "ui/wm/public/activation_client.h"
 
@@ -38,19 +44,27 @@ namespace ash {
 namespace {
 
 // The proportion of screen width that the text filter takes.
-const float kTextFilterScreenProportion = 0.5;
+const float kTextFilterScreenProportion = 0.25;
 
-// The height of the text filter.
-const int kTextFilterHeight = 50;
+// The amount of padding surrounding the text in the text filtering textbox.
+const int kTextFilterHorizontalPadding = 8;
 
-// Solid shadow length from the text filter.
-const int kVerticalShadowOffset = 1;
+// The distance between the top of the screen and the top edge of the
+// text filtering textbox.
+const int kTextFilterDistanceFromTop = 32;
 
-// Amount of blur applied to the text filter shadow.
-const int kShadowBlur = 10;
+// The height of the text filtering textbox.
+const int kTextFilterHeight = 32;
 
-// Text filter shadow color.
-const SkColor kTextFilterShadow = 0xB0000000;
+// The font style used for text filtering.
+static const ::ui::ResourceBundle::FontStyle kTextFilterFontStyle =
+    ::ui::ResourceBundle::FontStyle::MediumFont;
+
+// The alpha value for the background of the text filtering textbox.
+const unsigned char kTextFilterOpacity = 180;
+
+// The radius used for the rounded corners on the text filtering textbox.
+const int kTextFilterCornerRadius = 1;
 
 // A comparator for locating a grid with a given root window.
 struct RootWindowGridComparator
@@ -94,6 +108,42 @@ struct WindowSelectorItemForRoot
   const aura::Window* root_window;
 };
 
+// A View having rounded corners and a specified background color which is
+// only painted within the bounds defined by the rounded corners.
+// TODO(tdanderson): This duplicates code from RoundedImageView. Refactor these
+//                   classes and move into ui/views.
+class RoundedContainerView : public views::View {
+ public:
+  RoundedContainerView(int corner_radius, SkColor background)
+      : corner_radius_(corner_radius),
+        background_(background) {
+  }
+
+  virtual ~RoundedContainerView() {}
+
+  virtual void OnPaint(gfx::Canvas* canvas) OVERRIDE {
+    views::View::OnPaint(canvas);
+
+    SkScalar radius = SkIntToScalar(corner_radius_);
+    const SkScalar kRadius[8] = {radius, radius, radius, radius,
+                                 radius, radius, radius, radius};
+    SkPath path;
+    gfx::Rect bounds(size());
+    path.addRoundRect(gfx::RectToSkRect(bounds), kRadius);
+
+    SkPaint paint;
+    paint.setAntiAlias(true);
+    canvas->ClipPath(path, true);
+    canvas->DrawColor(background_);
+  }
+
+ private:
+  int corner_radius_;
+  SkColor background_;
+
+  DISALLOW_COPY_AND_ASSIGN(RoundedContainerView);
+};
+
 // Triggers a shelf visibility update on all root window controllers.
 void UpdateShelfVisibility() {
   Shell::RootWindowControllerList root_window_controllers =
@@ -118,22 +168,39 @@ views::Widget* CreateTextFilter(views::TextfieldController* controller,
       Shell::GetContainer(root_window, ash::kShellWindowId_OverlayContainer);
   params.accept_events = true;
   params.bounds = gfx::Rect(
-      root_window->bounds().width() / 2 * (1 - kTextFilterScreenProportion), 0,
+      root_window->bounds().width() / 2 * (1 - kTextFilterScreenProportion),
+      kTextFilterDistanceFromTop,
       root_window->bounds().width() * kTextFilterScreenProportion,
       kTextFilterHeight);
   widget->Init(params);
 
+  // Use |container| to specify the padding surrounding the text and to give
+  // the textfield rounded corners.
+  views::View* container = new RoundedContainerView(
+      kTextFilterCornerRadius, SkColorSetARGB(kTextFilterOpacity, 0, 0, 0));
+  ui::ResourceBundle& bundle = ui::ResourceBundle::GetSharedInstance();
+  int text_height = bundle.GetFontList(kTextFilterFontStyle).GetHeight();
+  DCHECK(text_height);
+  int vertical_padding = (kTextFilterHeight - text_height) / 2;
+  container->SetLayoutManager(new views::BoxLayout(views::BoxLayout::kVertical,
+                                                   kTextFilterHorizontalPadding,
+                                                   vertical_padding,
+                                                   0));
+
   views::Textfield* textfield = new views::Textfield;
   textfield->set_controller(controller);
   textfield->SetBackgroundColor(SK_ColorTRANSPARENT);
   textfield->SetBorder(views::Border::NullBorder());
   textfield->SetTextColor(SK_ColorWHITE);
-  textfield->SetShadows(gfx::ShadowValues(1, gfx::ShadowValue(
-      gfx::Point(0, kVerticalShadowOffset), kShadowBlur, kTextFilterShadow)));
-  widget->SetContentsView(textfield);
+  textfield->SetFontList(bundle.GetFontList(kTextFilterFontStyle));
+
+  container->AddChildView(textfield);
+  widget->SetContentsView(container);
 
+  // The textfield initially contains no text, so shift its position to be
+  // outside the visible bounds of the screen.
   gfx::Transform transform;
-  transform.Translate(0, -kTextFilterHeight);
+  transform.Translate(0, -WindowSelector::kTextFilterBottomEdge);
   widget->GetNativeWindow()->SetTransform(transform);
   widget->Show();
   textfield->RequestFocus();
@@ -143,6 +210,9 @@ views::Widget* CreateTextFilter(views::TextfieldController* controller,
 
 }  // namespace
 
+const int WindowSelector::kTextFilterBottomEdge =
+    kTextFilterDistanceFromTop + kTextFilterHeight;
+
 WindowSelector::WindowSelector(const WindowList& windows,
                                WindowSelectorDelegate* delegate)
     : delegate_(delegate),
@@ -420,10 +490,13 @@ void WindowSelector::ContentsChanged(views::Textfield* sender,
         gfx::Tween::FAST_OUT_LINEAR_IN : gfx::Tween::LINEAR_OUT_SLOW_IN);
 
     gfx::Transform transform;
-    if (should_show_selection_widget)
+    if (should_show_selection_widget) {
       transform.Translate(0, 0);
-    else
-      transform.Translate(0, -kTextFilterHeight);
+      text_filter_widget_->GetNativeWindow()->layer()->SetOpacity(1);
+    } else {
+      transform.Translate(0, -kTextFilterBottomEdge);
+      text_filter_widget_->GetNativeWindow()->layer()->SetOpacity(0);
+    }
 
     text_filter_widget_->GetNativeWindow()->SetTransform(transform);
     showing_selection_widget_ = should_show_selection_widget;
diff --git a/ash/wm/overview/window_selector.h b/ash/wm/overview/window_selector.h
index 8eae7e0..678313c 100644
--- a/ash/wm/overview/window_selector.h
+++ b/ash/wm/overview/window_selector.h
@@ -52,6 +52,10 @@ class ASH_EXPORT WindowSelector
       public aura::client::ActivationChangeObserver,
       public views::TextfieldController {
  public:
+  // The distance between the top edge of the screen and the bottom edge of
+  // the text filtering textfield.
+  static const int kTextFilterBottomEdge;
+
   enum Direction {
     LEFT,
     UP,
diff --git a/ash/wm/overview/window_selector_unittest.cc b/ash/wm/overview/window_selector_unittest.cc
index 93dba4d..057c1a0 100644
--- a/ash/wm/overview/window_selector_unittest.cc
+++ b/ash/wm/overview/window_selector_unittest.cc
@@ -885,8 +885,8 @@ TEST_F(WindowSelectorTest, BasicTabKeyNavigation) {
 TEST_F(WindowSelectorTest, BasicArrowKeyNavigation) {
   if (!SupportsHostWindowResize())
     return;
-  const size_t test_windows = 7;
-  UpdateDisplay("400x300");
+  const size_t test_windows = 9;
+  UpdateDisplay("800x600");
   ScopedVector<aura::Window> windows;
   for (size_t i = test_windows; i > 0; i--)
     windows.push_back(CreateWindowWithId(gfx::Rect(0, 0, 100, 100), i));
@@ -897,22 +897,24 @@ TEST_F(WindowSelectorTest, BasicArrowKeyNavigation) {
       ui::VKEY_LEFT,
       ui::VKEY_UP
   };
-  // Expected window layout:
-  // +-------+  +-------+  +-------+
-  // |   1   |  |   2   |  |   3   |
-  // +-------+  +-------+  +-------+
-  // +-------+  +-------+  +-------+
-  // |   4   |  |   5   |  |   6   |
-  // +-------+  +-------+  +-------+
+  // Expected window layout, assuming that the text filtering feature is
+  // enabled by default (i.e., --ash-disable-text-filtering-in-overview-mode
+  // is not being used).
+  // +-------+  +-------+  +-------+  +-------+
+  // |   1   |  |   2   |  |   3   |  |   4   |
+  // +-------+  +-------+  +-------+  +-------+
+  // +-------+  +-------+  +-------+  +-------+
+  // |   5   |  |   6   |  |   7   |  |   8   |
+  // +-------+  +-------+  +-------+  +-------+
   // +-------+
-  // |   7   |
+  // |   9   |
   // +-------+
   // Index for each window during a full loop plus wrapping around.
   int index_path_for_direction[][test_windows + 1] = {
-      {1, 2, 3, 4, 5, 6, 7, 1},  // Right
-      {1, 4, 7, 2, 5, 3, 6, 1},  // Down
-      {7, 6, 5, 4, 3, 2, 1, 7},  // Left
-      {6, 3, 5, 2, 7, 4, 1, 6}   // Up
+      {1, 2, 3, 4, 5, 6, 7, 8, 9, 1},  // Right
+      {1, 5, 9, 2, 6, 3, 7, 4, 8, 1},  // Down
+      {9, 8, 7, 6, 5, 4, 3, 2, 1, 9},  // Left
+      {8, 4, 7, 3, 6, 2, 9, 5, 1, 8}   // Up
   };
 
   for (size_t key_index = 0; key_index < arraysize(arrow_keys); key_index++) {