cros: Make desk rename consistent with other renaming patterns.

Desk renaming is inconsistent with other renaming patterns. This CL aims
to make it consistent and improve it as well. It makes the following
changes:

- Change background color on hover.
- Give desk_name_view a minimum width.
- Add border when textfield is focused.
- Make desk_name_view variable length so it changes size with respect to
  the current desk name.

Test: Manual
Bug: 1127498
Change-Id: I602a43146692eecb1b8dd1a0b624fd3f4f1cee65
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2406282Reviewed-by: Ahmed Fakhry <afakhry@chromium.org>
Commit-Queue: Jeremy Chinsen <chinsenj@chromium.org>
Cr-Commit-Position: refs/heads/master@{#808529}

ash/wm/desks/desk_mini_view.cc

@@ -22,6 +22,7 @@
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/aura/window.h"
 #include "ui/base/l10n/l10n_util.h"
+#include "ui/gfx/canvas.h"
 #include "ui/gfx/color_palette.h"
 #include "ui/views/widget/widget.h"
 #include "ui/wm/core/coordinate_conversion.h"
@@ -30,10 +31,12 @@ namespace ash {
 
 namespace {
 
-constexpr int kLabelPreviewSpacing = 4;
+constexpr int kLabelPreviewSpacing = 8;
 
 constexpr int kCloseButtonMargin = 8;
 
+constexpr int kMinDeskNameViewWidth = 20;
+
 constexpr SkColor kDarkModeActiveColor = SK_ColorWHITE;
 constexpr SkColor kLightModeActiveColor = SK_ColorBLACK;
 constexpr SkColor kInactiveColor = SK_ColorTRANSPARENT;
@@ -71,6 +74,7 @@ DeskMiniView::DeskMiniView(DesksBarView* owner_bar,
   auto desk_name_view = std::make_unique<DeskNameView>();
   desk_name_view->AddObserver(this);
   desk_name_view->set_controller(this);
+  desk_name_view->SetText(desk_->name());
 
   SetPaintToLayer();
   layer()->SetFillsBoundsOpaquely(false);
@@ -158,19 +162,8 @@ void DeskMiniView::Layout() {
 
   desk_name_view_->SetVisible(!compact);
 
-  if (!compact) {
-    const int previous_width = desk_name_view_->width();
-    const gfx::Size desk_name_view_size = desk_name_view_->GetPreferredSize();
-    const gfx::Rect desk_name_view_bounds{
-        preview_bounds.x(), preview_bounds.bottom() + kLabelPreviewSpacing,
-        preview_bounds.width(), desk_name_view_size.height()};
-    desk_name_view_->SetBoundsRect(desk_name_view_bounds);
-
-    // A change in the DeskNameView's width might mean the need to elide the
-    // text differently.
-    if (previous_width != desk_name_view_bounds.width())
-      OnDeskNameChanged(desk_->name());
-  }
+  if (!compact)
+    LayoutDeskNameView(preview_bounds);
 
   close_desk_button_->SetBounds(
       preview_bounds.right() - CloseDeskButton::kCloseButtonSize -
@@ -188,7 +181,7 @@ gfx::Size DeskMiniView::CalculatePreferredSize() const {
   // The preferred size takes into account only the width of the preview
   // view.
   return gfx::Size{preview_bounds.width(),
-                   preview_bounds.height() + kLabelPreviewSpacing +
+                   preview_bounds.height() + 2 * kLabelPreviewSpacing +
                        desk_name_view_->GetPreferredSize().height()};
 }
 
@@ -258,6 +251,8 @@ void DeskMiniView::OnDeskNameChanged(const base::string16& new_name) {
 
   desk_name_view_->SetTextAndElideIfNeeded(new_name);
   desk_preview_->SetAccessibleName(new_name);
+
+  Layout();
 }
 
 views::View* DeskMiniView::GetView() {
@@ -306,6 +301,8 @@ void DeskMiniView::ContentsChanged(views::Textfield* sender,
       base::CollapseWhitespace(*new_text,
                                /*trim_sequences_with_line_breaks=*/false),
       /*set_by_user=*/true);
+
+  Layout();
 }
 
 bool DeskMiniView::HandleKeyEvent(views::Textfield* sender,
@@ -368,6 +365,7 @@ bool DeskMiniView::HandleMouseEvent(views::Textfield* sender,
 void DeskMiniView::OnViewFocused(views::View* observed_view) {
   DCHECK_EQ(observed_view, desk_name_view_);
   is_desk_name_being_modified_ = true;
+  desk_name_view_->UpdateViewAppearance();
 
   // Set the unelided desk name so that the full name shows up for the user to
   // be able to change it.
@@ -381,6 +379,7 @@ void DeskMiniView::OnViewBlurred(views::View* observed_view) {
   DCHECK_EQ(observed_view, desk_name_view_);
   is_desk_name_being_modified_ = false;
   defer_select_all_ = false;
+  desk_name_view_->UpdateViewAppearance();
 
   // When committing the name, do not allow an empty desk name. Revert back to
   // the default name.
@@ -436,4 +435,25 @@ void DeskMiniView::OnDeskPreviewPressed() {
                                        DesksSwitchSource::kMiniViewButton);
 }
 
+void DeskMiniView::LayoutDeskNameView(const gfx::Rect& preview_bounds) {
+  const int previous_width = desk_name_view_->width();
+  const gfx::Size desk_name_view_size = desk_name_view_->GetPreferredSize();
+
+  const int text_width =
+      base::ClampToRange(desk_name_view_size.width(), kMinDeskNameViewWidth,
+                         preview_bounds.width());
+
+  const int desk_name_view_x =
+      preview_bounds.x() + (preview_bounds.width() - text_width) / 2;
+  gfx::Rect desk_name_view_bounds{
+      desk_name_view_x, preview_bounds.bottom() + kLabelPreviewSpacing,
+      text_width, desk_name_view_size.height()};
+  desk_name_view_->SetBoundsRect(desk_name_view_bounds);
+
+  // A change in the DeskNameView's width might mean the need
+  // to elide the text differently.
+  if (previous_width != desk_name_view_bounds.width())
+    OnDeskNameChanged(desk_->name());
+}
+
 }  // namespace ash

ash/wm/desks/desk_mini_view.h

@@ -120,6 +120,9 @@ class ASH_EXPORT DeskMiniView
 
   void OnDeskPreviewPressed();
 
+  // Layout |desk_name_view_| given the current bounds of the desk preview.
+  void LayoutDeskNameView(const gfx::Rect& preview_bounds);
+
   DesksBarView* const owner_bar_;
 
   // The root window on which this mini_view is created.

ash/wm/desks/desk_name_view.cc

@@ -15,11 +15,14 @@
 #include "ui/gfx/canvas.h"
 #include "ui/gfx/text_constants.h"
 #include "ui/gfx/text_elider.h"
+#include "ui/views/background.h"
 #include "ui/views/focus/focus_manager.h"
 #include "ui/views/widget/widget.h"
 
 namespace ash {
 
+constexpr int kDeskNameViewBorderRadius = 4;
+
 namespace {
 
 bool IsDesksBarWidget(const views::Widget* widget) {
@@ -46,9 +49,16 @@ DeskNameView::DeskNameView() {
   border_ptr_ = border.get();
   SetBorder(std::move(border));
 
-  SetBackgroundColor(SK_ColorTRANSPARENT);
-  SetTextColor(AshColorProvider::Get()->GetContentLayerColor(
-      AshColorProvider::ContentLayerType::kTextColorPrimary));
+  const SkColor text_color = AshColorProvider::Get()->GetContentLayerColor(
+      AshColorProvider::ContentLayerType::kTextColorPrimary);
+  SetTextColor(text_color);
+  SetSelectionTextColor(text_color);
+
+  const SkColor selection_color =
+      AshColorProvider::Get()->GetControlsLayerColor(
+          AshColorProvider::ControlsLayerType::kFocusRingColor);
+  SetSelectionBackgroundColor(selection_color);
+
   SetCursorEnabled(true);
   SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_CENTER);
 }
@@ -70,11 +80,17 @@ void DeskNameView::CommitChanges(views::Widget* widget) {
 }
 
 void DeskNameView::SetTextAndElideIfNeeded(const base::string16& text) {
-  SetText(gfx::ElideText(text, GetFontList(), GetContentsBounds().width(),
+  SetText(gfx::ElideText(text, GetFontList(),
+                         parent()->GetPreferredSize().width(),
                          gfx::ELIDE_TAIL));
   full_text_ = text;
 }
 
+void DeskNameView::UpdateViewAppearance() {
+  background()->SetNativeControlColor(GetBackgroundColor());
+  UpdateBorderState();
+}
+
 const char* DeskNameView::GetClassName() const {
   return "DeskNameView";
 }
@@ -107,6 +123,20 @@ void DeskNameView::GetAccessibleNodeData(ui::AXNodeData* node_data) {
   node_data->SetName(full_text_);
 }
 
+void DeskNameView::OnMouseEntered(const ui::MouseEvent& event) {
+  UpdateViewAppearance();
+}
+
+void DeskNameView::OnMouseExited(const ui::MouseEvent& event) {
+  UpdateViewAppearance();
+}
+
+void DeskNameView::OnThemeChanged() {
+  Textfield::OnThemeChanged();
+  SetBackground(views::CreateRoundedRectBackground(GetBackgroundColor(),
+                                                   kDeskNameViewBorderRadius));
+}
+
 views::View* DeskNameView::GetView() {
   return this;
 }
@@ -126,8 +156,16 @@ void DeskNameView::OnViewUnhighlighted() {
 }
 
 void DeskNameView::UpdateBorderState() {
-  border_ptr_->SetFocused(IsViewHighlighted());
+  border_ptr_->SetFocused(IsViewHighlighted() || HasFocus());
   SchedulePaint();
 }
 
+SkColor DeskNameView::GetBackgroundColor() const {
+  return HasFocus() || IsMouseHovered()
+             ? AshColorProvider::Get()->GetControlsLayerColor(
+                   AshColorProvider::ControlsLayerType::
+                       kControlBackgroundColorInactive)
+             : SK_ColorTRANSPARENT;
+}
+
 }  // namespace ash

ash/wm/desks/desk_name_view.h

@@ -34,11 +34,19 @@ class ASH_EXPORT DeskNameView
 
   void SetTextAndElideIfNeeded(const base::string16& text);
 
+  // If this view has focus, make the view's border visible and change
+  // background to its active color. If it doesn't have focus, hide the view's
+  // border and change background to its default color.
+  void UpdateViewAppearance();
+
   // views::View:
   const char* GetClassName() const override;
   gfx::Size CalculatePreferredSize() const override;
   bool SkipDefaultKeyEventProcessing(const ui::KeyEvent& event) override;
   void GetAccessibleNodeData(ui::AXNodeData* node_data) override;
+  void OnMouseEntered(const ui::MouseEvent& event) override;
+  void OnMouseExited(const ui::MouseEvent& event) override;
+  void OnThemeChanged() override;
 
   // OverviewHighlightController::OverviewHighlightableView:
   views::View* GetView() override;
@@ -50,6 +58,10 @@ class ASH_EXPORT DeskNameView
  private:
   void UpdateBorderState();
 
+  // Returns the background color for this view based on whether it has focus
+  // and if the mouse is entering/exiting the view.
+  SkColor GetBackgroundColor() const;
+
   // Owned by this View via `View::border_`. This is just a convenient pointer
   // to it.
   WmHighlightItemBorder* border_ptr_;

ash/wm/desks/desks_bar_view.cc

@@ -42,7 +42,7 @@ constexpr int kUseCompactLayoutWidthThreshold = 600;
 
 // In the non-compact layout, this is the height allocated for elements other
 // than the desk preview (e.g. the DeskNameView, and the vertical paddings).
-constexpr int kNonPreviewAllocatedHeight = 47;
+constexpr int kNonPreviewAllocatedHeight = 55;
 
 // The local Y coordinate of the mini views in both non-compact and compact
 // layouts respectively.