ambient: move glanceable info views to avoid screen burn

* Moved `GlanceableInfoView` to `AmbientBackgroundImageView` together
  with the photo attribution so they can be moved together.
* Move glanceable info views in small steps on each refresh with in
  a fixed bounds.
* Fixed the spaceing to account for shadows.
* Fixed typo in metadata setup.
* Fixed dismiss event handling to include touch events.

Bug: b:162596816
Test: run existing unit tests and manual test.
Change-Id: If96d83b1541cc301c881e07ce987ef7eb78794ef
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2410532Reviewed-by: Meilin Wang <meilinw@chromium.org>
Reviewed-by: Tao Wu <wutao@chromium.org>
Commit-Queue: Xiaohui Chen <xiaohuic@chromium.org>
Cr-Commit-Position: refs/heads/master@{#806884}

ash/ambient/ui/ambient_background_image_view.cc

@@ -6,8 +6,10 @@
 
 #include <memory>
 
+#include "ash/ambient/ui/glanceable_info_view.h"
 #include "ash/ambient/util/ambient_util.h"
 #include "ash/assistant/ui/assistant_view_ids.h"
+#include "base/rand_util.h"
 #include "ui/events/event.h"
 #include "ui/gfx/geometry/insets.h"
 #include "ui/views/controls/image_view.h"
@@ -21,14 +23,22 @@ namespace ash {
 namespace {
 
 // Appearance.
-constexpr int kHorizontalMarginDip = 16;
-constexpr int kVerticalMarginDip = 43;
+constexpr int kMarginDip = 16;
+constexpr int kSpacingDip = 8;
 
 // Typography.
 constexpr SkColor kTextColor = SK_ColorWHITE;
 constexpr int kDefaultFontSizeDip = 64;
 constexpr int kDetailsFontSizeDip = 13;
 
+// The dicretion to translate glanceable info views in the x/y coordinates.  `1`
+// means positive translate, `-1` negative.
+int translate_x_direction = 1;
+int translate_y_direction = -1;
+// The current x/y translation of glanceable info views in Dip.
+int current_x_translation = 0;
+int current_y_translation = 0;
+
 }  // namespace
 
 AmbientBackgroundImageView::AmbientBackgroundImageView(
@@ -57,6 +67,8 @@ void AmbientBackgroundImageView::OnGestureEvent(ui::GestureEvent* event) {
 
 void AmbientBackgroundImageView::UpdateImage(const gfx::ImageSkia& img) {
   image_view_->SetImage(img);
+
+  UpdateGlanceableInfoPosition();
 }
 
 void AmbientBackgroundImageView::UpdateImageDetails(
@@ -78,16 +90,29 @@ void AmbientBackgroundImageView::InitLayout() {
   // Inits the image view. This view should have the same size of the screen.
   image_view_ = AddChildView(std::make_unique<views::ImageView>());
 
+  gfx::Insets shadow_insets =
+      gfx::ShadowValue::GetMargin(ambient::util::GetTextShadowValues());
+
   // Inits the attribution view. It also has a full-screen size and is
   // responsible for layout the details label at its bottom left corner.
   views::View* attribution_view = AddChildView(std::make_unique<views::View>());
   views::BoxLayout* attribution_layout =
       attribution_view->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::Orientation::kHorizontal));
+          views::BoxLayout::Orientation::kVertical));
   attribution_layout->set_main_axis_alignment(
-      views::BoxLayout::MainAxisAlignment::kStart);
+      views::BoxLayout::MainAxisAlignment::kEnd);
+  attribution_layout->set_cross_axis_alignment(
+      views::BoxLayout::CrossAxisAlignment::kStart);
   attribution_layout->set_inside_border_insets(
-      gfx::Insets(0, kHorizontalMarginDip, kVerticalMarginDip, 0));
+      gfx::Insets(0, kMarginDip + shadow_insets.left(),
+                  kMarginDip + shadow_insets.bottom(), 0));
+
+  attribution_layout->set_between_child_spacing(
+      kSpacingDip + shadow_insets.top() + shadow_insets.bottom());
+
+  glanceable_info_view_ = attribution_view->AddChildView(
+      std::make_unique<GlanceableInfoView>(delegate_));
+  glanceable_info_view_->SetPaintToLayer();
 
   // Inits the details label.
   details_label_ =
@@ -98,11 +123,45 @@ void AmbientBackgroundImageView::InitLayout() {
       ambient::util::GetDefaultFontlist().DeriveWithSizeDelta(
           kDetailsFontSizeDip - kDefaultFontSizeDip));
   details_label_->SetShadows(ambient::util::GetTextShadowValues());
-  details_label_->SetHorizontalAlignment(gfx::HorizontalAlignment::ALIGN_LEFT);
-  details_label_->SetVerticalAlignment(gfx::VerticalAlignment::ALIGN_BOTTOM);
+  details_label_->SetPaintToLayer();
+  details_label_->layer()->SetFillsBoundsOpaquely(false);
+}
+
+void AmbientBackgroundImageView::UpdateGlanceableInfoPosition() {
+  constexpr int kStepDP = 5;
+  constexpr int kMaxTranslationDip = 20;
+
+  // Move the translation point randomly one step on each x/y direction.
+  int x_increment = kStepDP * base::RandInt(0, 1);
+  int y_increment = x_increment == 0 ? kStepDP : kStepDP * base::RandInt(0, 1);
+  current_x_translation += translate_x_direction * x_increment;
+  current_y_translation += translate_y_direction * y_increment;
+
+  // If the translation point is out of bounds, reset it within bounds and
+  // reverse the direction.
+  if (current_x_translation < 0) {
+    translate_x_direction = 1;
+    current_x_translation = 0;
+  } else if (current_x_translation > kMaxTranslationDip) {
+    translate_x_direction = -1;
+    current_x_translation = kMaxTranslationDip;
+  }
+
+  if (current_y_translation > 0) {
+    translate_y_direction = -1;
+    current_y_translation = 0;
+  } else if (current_y_translation < -kMaxTranslationDip) {
+    translate_y_direction = 1;
+    current_y_translation = -kMaxTranslationDip;
+  }
+
+  gfx::Transform transform;
+  transform.Translate(current_x_translation, current_y_translation);
+  glanceable_info_view_->layer()->SetTransform(transform);
+  details_label_->layer()->SetTransform(transform);
 }
 
-BEGIN_METADATA(AmbientBackgroundImageView, views::ImageView)
+BEGIN_METADATA(AmbientBackgroundImageView, views::View)
 END_METADATA
 
 }  // namespace ash

ash/ambient/ui/ambient_background_image_view.h

@@ -19,6 +19,8 @@ class Label;
 
 namespace ash {
 
+class GlanceableInfoView;
+
 // AmbientBackgroundImageView--------------------------------------------------
 // A custom ImageView to display photo image and details information on ambient.
 // It also handles specific mouse/gesture events to dismiss ambient when user
@@ -49,12 +51,16 @@ class ASH_EXPORT AmbientBackgroundImageView : public views::View {
  private:
   void InitLayout();
 
+  void UpdateGlanceableInfoPosition();
+
   // Owned by |AmbientController| and should always outlive |this|.
   AmbientViewDelegate* delegate_ = nullptr;
 
   // View to display the current image on ambient. Owned by the view hierarchy.
   views::ImageView* image_view_ = nullptr;
 
+  GlanceableInfoView* glanceable_info_view_ = nullptr;
+
   // Label to show details text, i.e. attribution, to be displayed for the
   // current image. Owned by the view hierarchy.
   views::Label* details_label_ = nullptr;

ash/ambient/ui/ambient_container_view.cc

@@ -9,7 +9,6 @@
 
 #include "ash/ambient/ui/ambient_assistant_container_view.h"
 #include "ash/ambient/ui/ambient_view_delegate.h"
-#include "ash/ambient/ui/glanceable_info_view.h"
 #include "ash/ambient/ui/media_string_view.h"
 #include "ash/ambient/ui/photo_view.h"
 #include "ash/ambient/util/ambient_util.h"
@@ -39,7 +38,6 @@ using chromeos::assistant::features::IsAmbientAssistantEnabled;
 
 // Appearance.
 constexpr int kHorizontalMarginDip = 16;
-constexpr int kVerticalMarginDip = 64;
 constexpr int kAssistantPreferredHeightDip = 128;
 constexpr int kMediaStringTopMarginDip = 25;
 
@@ -60,7 +58,8 @@ class AmbientContainerView::HostWidgetEventObserver : public ui::EventObserver {
     DCHECK(container_);
     event_monitor_ = views::EventMonitor::CreateWindowMonitor(
         this, container_->GetWidget()->GetNativeWindow()->GetRootWindow(),
-        {ui::ET_KEY_PRESSED, ui::ET_MOUSE_ENTERED, ui::ET_MOUSE_MOVED});
+        {ui::ET_KEY_PRESSED, ui::ET_MOUSE_ENTERED, ui::ET_MOUSE_MOVED,
+         ui::ET_TOUCH_PRESSED, ui::ET_TOUCH_MOVED});
   }
 
   ~HostWidgetEventObserver() override = default;
@@ -75,6 +74,10 @@ class AmbientContainerView::HostWidgetEventObserver : public ui::EventObserver {
         DCHECK(event.IsKeyEvent());
         container_->HandleEvent();
         break;
+      case ui::ET_TOUCH_PRESSED:
+      case ui::ET_TOUCH_MOVED:
+        container_->HandleEvent();
+        break;
       case ui::ET_MOUSE_ENTERED:
         DCHECK(event.IsMouseEvent());
         // Updates the mouse enter location.
@@ -133,7 +136,6 @@ gfx::Size AmbientContainerView::CalculatePreferredSize() const {
 void AmbientContainerView::Layout() {
   // Layout child views first to have proper bounds set for children.
   LayoutPhotoView();
-  LayoutGlanceableInfoView();
   LayoutMediaStringView();
   // The assistant view may not exist if |kAmbientAssistant| feature is
   // disabled.
@@ -155,9 +157,6 @@ void AmbientContainerView::Init() {
 
   photo_view_ = AddChildView(std::make_unique<PhotoView>(delegate_));
 
-  glanceable_info_view_ =
-      AddChildView(std::make_unique<GlanceableInfoView>(delegate_));
-
   media_string_view_ = AddChildView(std::make_unique<MediaStringView>());
   media_string_view_->SetVisible(false);
 
@@ -173,19 +172,6 @@ void AmbientContainerView::LayoutPhotoView() {
   photo_view_->SetBoundsRect(GetLocalBounds());
 }
 
-void AmbientContainerView::LayoutGlanceableInfoView() {
-  const gfx::Size container_size = GetLocalBounds().size();
-  const gfx::Size preferred_size = glanceable_info_view_->GetPreferredSize();
-
-  // The clock and weather view is positioned on the left-bottom corner of the
-  // container.
-  int x = kHorizontalMarginDip;
-  int y =
-      container_size.height() - kVerticalMarginDip - preferred_size.height();
-  glanceable_info_view_->SetBoundsRect(
-      gfx::Rect(x, y, preferred_size.width(), preferred_size.height()));
-}
-
 void AmbientContainerView::LayoutAssistantView() {
   int preferred_width = GetPreferredSize().width();
   int preferred_height = kAssistantPreferredHeightDip;

ash/ambient/ui/ambient_container_view.h

@@ -15,7 +15,6 @@ namespace ash {
 
 class AmbientAssistantContainerView;
 class AmbientViewDelegate;
-class GlanceableInfoView;
 class PhotoView;
 class MediaStringView;
 
@@ -42,7 +41,6 @@ class ASH_EXPORT AmbientContainerView : public views::View {
   // TODO(meilinw): Use LayoutManagers to lay out children instead of overriding
   // Layout(). See b/163170162.
   void LayoutPhotoView();
-  void LayoutGlanceableInfoView();
   void LayoutAssistantView();
   void LayoutMediaStringView();
 
@@ -54,7 +52,6 @@ class ASH_EXPORT AmbientContainerView : public views::View {
   // Owned by view hierarchy.
   PhotoView* photo_view_ = nullptr;
   AmbientAssistantContainerView* ambient_assistant_container_view_ = nullptr;
-  GlanceableInfoView* glanceable_info_view_ = nullptr;
   MediaStringView* media_string_view_ = nullptr;
 
   // Observes events from its host widget.

ash/ambient/ui/glanceable_info_view.cc

@@ -16,6 +16,7 @@
 #include "ash/system/model/clock_model.h"
 #include "ash/system/model/system_tray_model.h"
 #include "ash/system/time/time_view.h"
+#include "ash/system/tray/tray_constants.h"
 #include "base/i18n/number_formatting.h"
 #include "base/strings/utf_string_conversions.h"
 #include "third_party/skia/include/core/SkColor.h"
@@ -57,15 +58,13 @@ gfx::FontList GetWeatherTemperatureFontList() {
       temperature_font_size_delta);
 }
 
-// Returns the border insets for |weather_info_| to be aligned to the time text
-// baseline.
-gfx::Insets GetWeatherInfoInsets() {
-  int time_font_descent =
-      GetTimeFontList().GetHeight() - GetTimeFontList().GetBaseline();
-  int temperature_font_descent = GetWeatherTemperatureFontList().GetHeight() -
-                                 GetWeatherTemperatureFontList().GetBaseline();
-  return gfx::Insets(
-      0, 0, /*bottom=*/time_font_descent - temperature_font_descent, 0);
+int GetTimeFontDescent() {
+  return GetTimeFontList().GetHeight() - GetTimeFontList().GetBaseline();
+}
+
+int GetTemperatureFontDescent() {
+  return GetWeatherTemperatureFontList().GetHeight() -
+         GetWeatherTemperatureFontList().GetBaseline();
 }
 
 }  // namespace
@@ -128,9 +127,11 @@ void GlanceableInfoView::InitLayout() {
   views::BoxLayout* layout =
       SetLayoutManager(std::make_unique<views::BoxLayout>(
           views::BoxLayout::Orientation::kHorizontal));
-  layout->set_main_axis_alignment(views::BoxLayout::MainAxisAlignment::kCenter);
+  layout->set_main_axis_alignment(views::BoxLayout::MainAxisAlignment::kStart);
   layout->set_cross_axis_alignment(views::BoxLayout::CrossAxisAlignment::kEnd);
-  layout->set_between_child_spacing(kSpacingBetweenTimeAndWeatherDip);
+
+  gfx::ShadowValues text_shadow_values = ambient::util::GetTextShadowValues();
+  gfx::Insets shadow_insets = gfx::ShadowValue::GetMargin(text_shadow_values);
 
   // Inits the time view.
   time_view_ = AddChildView(std::make_unique<tray::TimeView>(
@@ -139,35 +140,31 @@ void GlanceableInfoView::InitLayout() {
   time_view_->SetTextFont(GetTimeFontList());
   time_view_->SetTextColor(kTextColor,
                            /*auto_color_readability_enabled=*/false);
-  time_view_->SetTextShadowValues(ambient::util::GetTextShadowValues());
-
-  // Inits and layouts the weather info.
-  weather_info_ = AddChildView(std::make_unique<views::View>());
-  views::BoxLayout* weather_info_layout =
-      weather_info_->SetLayoutManager(std::make_unique<views::BoxLayout>(
-          views::BoxLayout::Orientation::kHorizontal));
-  // Aligns its child views to the center point.
-  weather_info_layout->set_cross_axis_alignment(
-      views::BoxLayout::CrossAxisAlignment::kCenter);
-  weather_info_layout->set_between_child_spacing(
-      kSpacingBetweenWeatherIconAndTempDip);
-
-  // This view should be baseline-aligned to the time view.
-  weather_info_layout->set_inside_border_insets(GetWeatherInfoInsets());
+  time_view_->SetTextShadowValues(text_shadow_values);
+  // Remove the internal spacing in `time_view_` and adjust spacing for shadows.
+  time_view_->SetBorder(views::CreateEmptyBorder(
+      -kUnifiedTrayTextTopPadding, -kUnifiedTrayTimeLeftPadding, 0,
+      kSpacingBetweenTimeAndWeatherDip + shadow_insets.right()));
 
   // Inits the icon view.
-  weather_condition_icon_ =
-      weather_info_->AddChildView(std::make_unique<views::ImageView>());
+  weather_condition_icon_ = AddChildView(std::make_unique<views::ImageView>());
   const gfx::Size size = gfx::Size(kWeatherIconSizeDip, kWeatherIconSizeDip);
   weather_condition_icon_->SetSize(size);
   weather_condition_icon_->SetImageSize(size);
+  constexpr int kIconInternalPaddingDip = 4;
+  weather_condition_icon_->SetBorder(views::CreateEmptyBorder(
+      0, 0,
+      GetTimeFontDescent() - shadow_insets.bottom() - kIconInternalPaddingDip,
+      kSpacingBetweenWeatherIconAndTempDip + shadow_insets.left()));
 
   // Inits the temp view.
-  temperature_ = weather_info_->AddChildView(std::make_unique<views::Label>());
+  temperature_ = AddChildView(std::make_unique<views::Label>());
   temperature_->SetAutoColorReadabilityEnabled(false);
   temperature_->SetEnabledColor(kTextColor);
   temperature_->SetFontList(GetWeatherTemperatureFontList());
-  temperature_->SetShadows(ambient::util::GetTextShadowValues());
+  temperature_->SetShadows(text_shadow_values);
+  temperature_->SetBorder(views::CreateEmptyBorder(
+      0, 0, GetTimeFontDescent() - GetTemperatureFontDescent(), 0));
 }
 
 }  // namespace ash

ash/ambient/ui/glanceable_info_view.h

@@ -47,11 +47,7 @@ class GlanceableInfoView : public views::View,
   // View for the time info. Owned by the view hierarchy.
   ash::tray::TimeView* time_view_ = nullptr;
 
-  // Container holding weather-related views. Owned by the view hierarchy.
-  views::View* weather_info_ = nullptr;
-
   // Views for weather icon and temperature.
-  // Child views of |weather_info_| and owned by the view hierarchy.
   views::ImageView* weather_condition_icon_ = nullptr;
   views::Label* temperature_ = nullptr;