Visual improvements to text filtering in Ash overview mode

ash/wm/overview/window_selector.cc

 // Copyright 2013 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 "ash/wm/overview/window_selector.h"
 
 #include <algorithm>
 
 #include "ash/accessibility_delegate.h"
 #include "ash/ash_switches.h"
 #include "ash/metrics/user_metrics_recorder.h"
 #include "ash/root_window_controller.h"
 #include "ash/shell.h"
 #include "ash/shell_window_ids.h"
 #include "ash/switchable_windows.h"
 #include "ash/wm/overview/scoped_transform_overview_window.h"
 #include "ash/wm/overview/window_grid.h"
 #include "ash/wm/overview/window_selector_delegate.h"
 #include "ash/wm/overview/window_selector_item.h"
 #include "ash/wm/window_state.h"
 #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"
 
 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
     : public std::unary_function<WindowGrid*, bool> {
   explicit RootWindowGridComparator(const aura::Window* root_window)
       : root_window_(root_window) {
   }
 
   bool operator()(WindowGrid* grid) const {
     return (grid->root_window() == root_window_);
@@ skipping 23 matching lines @@
       : root_window(root) {
   }
 
   bool operator()(WindowSelectorItem* item) const {
     return item->GetRootWindow() == root_window;
   }
 
   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)
+      : background_(background) {
+    for (int i = 0; i < 4; ++i)
+      corner_radius_[i] = corner_radius;

[flackr, 2014/08/08 17:43:59]

nit: As long as these are all the same, we should just have a single int
corner_radius_;. It will be easy to change if we want to have different corners
later.

[tdanderson, 2014/08/08 19:25:44]

Done.

+  }
+
+  virtual ~RoundedContainerView() {}
+
+  virtual void OnPaint(gfx::Canvas* canvas) OVERRIDE {
+    views::View::OnPaint(canvas);
+
+    const SkScalar kRadius[8] = {
+        SkIntToScalar(corner_radius_[0]), SkIntToScalar(corner_radius_[0]),
+        SkIntToScalar(corner_radius_[1]), SkIntToScalar(corner_radius_[1]),
+        SkIntToScalar(corner_radius_[2]), SkIntToScalar(corner_radius_[2]),
+        SkIntToScalar(corner_radius_[3]), SkIntToScalar(corner_radius_[3])};
+
+    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_[4];
+  SkColor background_;
+
+  DISALLOW_COPY_AND_ASSIGN(RoundedContainerView);
+};
+
 // Triggers a shelf visibility update on all root window controllers.
 void UpdateShelfVisibility() {
   Shell::RootWindowControllerList root_window_controllers =
       Shell::GetInstance()->GetAllRootWindowControllers();
   for (Shell::RootWindowControllerList::iterator iter =
           root_window_controllers.begin();
        iter != root_window_controllers.end(); ++iter) {
     (*iter)->UpdateShelfVisibility();
   }
 }
 
 // Initializes the text filter on the top of the main root window and requests
 // focus on its textfield.
 views::Widget* CreateTextFilter(views::TextfieldController* controller,
                                 aura::Window* root_window) {
   views::Widget* widget = new views::Widget;
   views::Widget::InitParams params;
   params.type = views::Widget::InitParams::TYPE_WINDOW_FRAMELESS;
   params.ownership = views::Widget::InitParams::WIDGET_OWNS_NATIVE_WIDGET;
   params.opacity = views::Widget::InitParams::TRANSLUCENT_WINDOW;
   params.parent =
       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();
 
   return widget;
 }
 
 }  // namespace
 
+const int WindowSelector::kTextFilterBottomEdge =
+    kTextFilterDistanceFromTop + kTextFilterHeight;
+
 WindowSelector::WindowSelector(const WindowList& windows,
                                WindowSelectorDelegate* delegate)
     : delegate_(delegate),
       restore_focus_window_(aura::client::GetFocusClient(
           Shell::GetPrimaryRootWindow())->GetFocusedWindow()),
       ignore_activations_(false),
       selected_grid_index_(0),
       overview_start_time_(base::Time::Now()),
       num_key_presses_(0),
       num_items_(0),
@@ skipping 257 matching lines @@
   bool should_show_selection_widget = !new_contents.empty();
   if (showing_selection_widget_ != should_show_selection_widget) {
     ui::ScopedLayerAnimationSettings animation_settings(
         text_filter_widget_->GetNativeWindow()->layer()->GetAnimator());
     animation_settings.SetPreemptionStrategy(
         ui::LayerAnimator::IMMEDIATELY_ANIMATE_TO_NEW_TARGET);
     animation_settings.SetTweenType(showing_selection_widget_ ?
         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;
   }
   for (ScopedVector<WindowGrid>::iterator iter = grid_list_.begin();
        iter != grid_list_.end(); iter++) {
     (*iter)->FilterItems(new_contents);
   }
 
   // If the selection widget is not active, execute a Move() command so that it
@@ skipping 71 matching lines @@
   for (size_t i = 0;
       i <= grid_list_.size() &&
       grid_list_[selected_grid_index_]->Move(direction, animate); i++) {
     // TODO(flackr): If there are more than two monitors, move between grids
     // in the requested direction.
     selected_grid_index_ = (selected_grid_index_ + 1) % grid_list_.size();
   }
 }
 
 }  // namespace ash