Show information for ambient (part 2).

Bug: b/153497938
Test: manually.
Change-Id: I2d43a900068204325da004f37df1877b980af918
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2174794
Commit-Queue: Meilin Wang <meilinw@chromium.org>
Reviewed-by: Tim Song <tengs@chromium.org>
Reviewed-by: Xiaohui Chen <xiaohuic@chromium.org>
Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#772922}

ash/BUILD.gn

@@ -188,6 +188,8 @@ component("ash") {
     "ambient/ui/ambient_view_delegate.h",
     "ambient/ui/assistant_response_container_view.cc",
     "ambient/ui/assistant_response_container_view.h",
+    "ambient/ui/glanceable_info_view.cc",
+    "ambient/ui/glanceable_info_view.h",
     "ambient/ui/photo_view.cc",
     "ambient/ui/photo_view.h",
     "ambient/util/ambient_util.cc",

ash/ambient/ui/ambient_container_view.cc

@@ -9,6 +9,7 @@
 
 #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/photo_view.h"
 #include "ash/ambient/util/ambient_util.h"
 #include "ash/assistant/util/animation_util.h"
@@ -16,6 +17,7 @@
 #include "ash/public/cpp/shell_window_ids.h"
 #include "ash/shell.h"
 #include "ui/aura/window.h"
+#include "ui/gfx/geometry/rect.h"
 #include "ui/views/background.h"
 #include "ui/views/view.h"
 #include "ui/views/widget/widget.h"
@@ -24,8 +26,10 @@ namespace ash {
 
 namespace {
 
-// Ambient Assistant container view appearance.
-constexpr int kAmbientAssistantContainerViewPreferredHeightDip = 128;
+// Appearance.
+constexpr int kHorizontalMarginDip = 16;
+constexpr int kVerticalMarginDip = 16;
+constexpr int kAssistantContainerViewPreferredHeightDip = 128;
 
 // TODO(meilinw): temporary values for dev purpose, need to be updated with the
 // final spec.
@@ -73,13 +77,16 @@ gfx::Size AmbientContainerView::CalculatePreferredSize() const {
 }
 
 void AmbientContainerView::Layout() {
-  if (!ambient_assistant_container_view_)
-    return;
-
-  // Set bounds for the ambient Assistant container view.
-  ambient_assistant_container_view_->SetBoundsRect(
-      gfx::Rect(0, 0, GetWidget()->GetRootView()->size().width(),
-                kAmbientAssistantContainerViewPreferredHeightDip));
+  if (ambient_assistant_container_view_) {
+    // The view has the same width as the container view and the widget.
+    int width = GetLocalBounds().width();
+    ambient_assistant_container_view_->SetBounds(
+        0, 0, width, kAssistantContainerViewPreferredHeightDip);
+  }
+
+  if (glanceable_info_view_) {
+    LayoutGlanceableInfoView();
+  }
 }
 
 void AmbientContainerView::FadeOutPhotoView() {
@@ -102,6 +109,22 @@ void AmbientContainerView::Init() {
   ambient_assistant_container_view_ =
       AddChildView(std::make_unique<AmbientAssistantContainerView>());
   ambient_assistant_container_view_->SetVisible(false);
+
+  glanceable_info_view_ =
+      AddChildView(std::make_unique<GlanceableInfoView>(delegate_));
+}
+
+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()));
 }
 
 }  // namespace ash

ash/ambient/ui/ambient_container_view.h

@@ -13,6 +13,7 @@ namespace ash {
 
 class AmbientAssistantContainerView;
 class AmbientViewDelegate;
+class GlanceableInfoView;
 class PhotoView;
 
 // Container view for ambient mode.
@@ -32,11 +33,14 @@ class ASH_EXPORT AmbientContainerView : public views::WidgetDelegateView {
  private:
   void Init();
 
+  void LayoutGlanceableInfoView();
+
   AmbientViewDelegate* delegate_ = nullptr;
 
   // Owned by view hierarchy.
   PhotoView* photo_view_ = nullptr;
   AmbientAssistantContainerView* ambient_assistant_container_view_ = nullptr;
+  GlanceableInfoView* glanceable_info_view_ = nullptr;
 
   DISALLOW_COPY_AND_ASSIGN(AmbientContainerView);
 };

ash/ambient/ui/glanceable_info_view.cc

+// Copyright 2020 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/ambient/ui/glanceable_info_view.h"
+
+#include <memory>
+#include <string>
+
+#include "ash/ambient/model/ambient_backend_model.h"
+#include "ash/ambient/ui/ambient_view_delegate.h"
+#include "ash/ambient/util/ambient_util.h"
+#include "ash/public/cpp/ambient/ambient_mode_state.h"
+#include "ash/shell.h"
+#include "ash/strings/grit/ash_strings.h"
+#include "ash/system/model/clock_model.h"
+#include "ash/system/model/system_tray_model.h"
+#include "ash/system/time/time_view.h"
+#include "base/i18n/number_formatting.h"
+#include "base/strings/utf_string_conversions.h"
+#include "third_party/skia/include/core/SkColor.h"
+#include "ui/base/l10n/l10n_util.h"
+#include "ui/gfx/font_list.h"
+#include "ui/gfx/geometry/insets.h"
+#include "ui/gfx/geometry/rect.h"
+#include "ui/views/background.h"
+#include "ui/views/border.h"
+#include "ui/views/controls/image_view.h"
+#include "ui/views/controls/label.h"
+#include "ui/views/layout/box_layout.h"
+#include "ui/views/view.h"
+
+namespace ash {
+
+namespace {
+
+// Appearance.
+constexpr int kWeatherIconSizeDip = 32;
+constexpr int kWeatherIconLeftPaddingDip = 24;
+constexpr int kWeatherIconRightPaddingDip = 8;
+
+// Typography.
+constexpr SkColor kTextColor = SK_ColorWHITE;
+constexpr int kDefaultFontSizeDip = 64;
+constexpr int kWeatherTemperatureFontSizeDip = 32;
+
+// Returns the fontlist used for the time text.
+const gfx::FontList& GetTimeFontList() {
+  return ambient::util::GetDefaultFontlist();
+}
+
+// Returns the fontlist used for the temperature text.
+gfx::FontList GetWeatherTemperatureFontList() {
+  int temperature_font_size_delta =
+      kWeatherTemperatureFontSizeDip - kDefaultFontSizeDip;
+  return ambient::util::GetDefaultFontlist().DeriveWithSizeDelta(
+      temperature_font_size_delta);
+}
+
+// The condition icon should be baseline-aligned to the time text.
+int CalculateIconBottomPadding() {
+  return GetTimeFontList().GetHeight() - GetTimeFontList().GetBaseline();
+}
+
+// The temperature text should be baseline-aligned to the time text.
+int CalculateTemperatureTextBottomPadding() {
+  int time_font_descent =
+      GetTimeFontList().GetHeight() - GetTimeFontList().GetBaseline();
+  int temperature_font_descent = GetWeatherTemperatureFontList().GetHeight() -
+                                 GetWeatherTemperatureFontList().GetBaseline();
+  return time_font_descent - temperature_font_descent;
+}
+
+}  // namespace
+
+GlanceableInfoView::GlanceableInfoView(AmbientViewDelegate* delegate)
+    : delegate_(delegate) {
+  DCHECK(delegate);
+  delegate_->GetAmbientBackendModel()->AddObserver(this);
+
+  InitLayout();
+}
+
+GlanceableInfoView::~GlanceableInfoView() {
+  delegate_->GetAmbientBackendModel()->RemoveObserver(this);
+}
+
+const char* GlanceableInfoView::GetClassName() const {
+  return "GlanceableInfoView";
+}
+
+void GlanceableInfoView::OnWeatherInfoUpdated() {
+  Show();
+}
+
+void GlanceableInfoView::Show() {
+  weather_condition_icon_->SetImage(
+      delegate_->GetAmbientBackendModel()->weather_condition_icon());
+
+  float temperature = delegate_->GetAmbientBackendModel()->temperature();
+  // TODO(b/154046129): handle Celsius format.
+  temperature_->SetText(l10n_util::GetStringFUTF16(
+      IDS_ASH_AMBIENT_MODE_WEATHER_TEMPERATURE_IN_FAHRENHEIT,
+      base::FormatNumber(static_cast<int>(temperature))));
+}
+
+void GlanceableInfoView::InitLayout() {
+  // The children of |GlanceableInfoView| will be drawn on their own
+  // layer instead of the layer of |PhotoView| with a solid black background.
+  SetPaintToLayer();
+  layer()->SetFillsBoundsOpaquely(false);
+
+  views::BoxLayout* layout =
+      SetLayoutManager(std::make_unique<views::BoxLayout>(
+          views::BoxLayout::Orientation::kHorizontal));
+  layout->set_cross_axis_alignment(views::BoxLayout::CrossAxisAlignment::kEnd);
+
+  // Init and layout time view.
+  time_view_ = AddChildView(std::make_unique<tray::TimeView>(
+      ash::tray::TimeView::ClockLayout::HORIZONTAL_CLOCK,
+      Shell::Get()->system_tray_model()->clock()));
+  time_view_->SetTextFont(GetTimeFontList());
+  time_view_->SetTextColor(kTextColor,
+                           /*auto_color_readability_enabled=*/false);
+
+  // Init and layout condition icon. It is baseline-aligned to the time view.
+  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);
+  weather_condition_icon_->SetBorder(views::CreateEmptyBorder(
+      0, kWeatherIconLeftPaddingDip, CalculateIconBottomPadding(),
+      kWeatherIconRightPaddingDip));
+
+  // Init and layout temperature view. It is baseline-aligned to the time view.
+  temperature_ = AddChildView(std::make_unique<views::Label>());
+  temperature_->SetAutoColorReadabilityEnabled(false);
+  temperature_->SetEnabledColor(kTextColor);
+  temperature_->SetFontList(GetWeatherTemperatureFontList());
+  temperature_->SetBorder(views::CreateEmptyBorder(
+      0, 0, CalculateTemperatureTextBottomPadding(), 0));
+}
+
+}  // namespace ash

ash/ambient/ui/glanceable_info_view.h

+// Copyright 2020 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.
+
+#ifndef ASH_AMBIENT_UI_GLANCEABLE_INFO_VIEW_H_
+#define ASH_AMBIENT_UI_GLANCEABLE_INFO_VIEW_H_
+
+#include "ash/ambient/model/ambient_backend_model_observer.h"
+#include "ui/views/view.h"
+
+namespace views {
+class ImageView;
+class Label;
+}  // namespace views
+
+namespace ash {
+
+namespace tray {
+class TimeView;
+}
+
+class AmbientViewDelegate;
+
+// Container for displaying a glanceable clock and weather info.
+class GlanceableInfoView : public views::View,
+                           public AmbientBackendModelObserver {
+ public:
+  explicit GlanceableInfoView(AmbientViewDelegate* delegate);
+  GlanceableInfoView(const GlanceableInfoView&) = delete;
+  GlanceableInfoView& operator=(const GlanceableInfoView&) = delete;
+  ~GlanceableInfoView() override;
+
+  // views::View:
+  const char* GetClassName() const override;
+
+  // AmbientBackendModelObserver:
+  void OnWeatherInfoUpdated() override;
+  void OnImagesChanged() override {}
+
+  void Show();
+
+ private:
+  void InitLayout();
+
+  // Weather-related views. Owned by the view hierarchy.
+  views::ImageView* weather_condition_icon_ = nullptr;
+  views::Label* temperature_ = nullptr;
+
+  // Owned by the view hierarchy.
+  ash::tray::TimeView* time_view_ = nullptr;
+
+  // Owned by |AmbientController|.
+  AmbientViewDelegate* const delegate_ = nullptr;
+};
+
+}  // namespace ash
+
+#endif  // ASH_AMBIENT_UI_GLANCEABLE_INFO_VIEW_H_

ash/ambient/ui/photo_view.h

@@ -51,9 +51,8 @@ class ASH_EXPORT PhotoView : public views::View,
   bool NeedToAnimateTransition() const;
 
   // Note that we should be careful when using |delegate_|, as there is no
-  // strong guarantee on the life cycle, especially given that the widget |this|
-  // lived in is destroyed asynchronously.
-  AmbientViewDelegate* delegate_ = nullptr;
+  // strong guarantee on the life cycle.
+  AmbientViewDelegate* const delegate_ = nullptr;
 
   std::unique_ptr<ui::AnimationMetricsReporter> metrics_reporter_;
 

ash/ambient/util/ambient_util.cc

@@ -4,6 +4,8 @@
 
 #include "ash/ambient/util/ambient_util.h"
 
+#include "base/no_destructor.h"
+
 namespace ash {
 namespace ambient {
 namespace util {
@@ -12,6 +14,11 @@ bool IsShowing(LockScreen::ScreenType type) {
   return LockScreen::HasInstance() && LockScreen::Get()->screen_type() == type;
 }
 
+const gfx::FontList& GetDefaultFontlist() {
+  static const base::NoDestructor<gfx::FontList> font_list("Google Sans, 64px");
+  return *font_list;
+}
+
 }  // namespace util
 }  // namespace ambient
 }  // namespace ash

ash/ambient/util/ambient_util.h

@@ -7,6 +7,7 @@
 
 #include "ash/ash_export.h"
 #include "ash/login/ui/lock_screen.h"
+#include "ui/gfx/font_list.h"
 
 namespace ash {
 
@@ -16,6 +17,9 @@ namespace util {
 // Returns true if Ash is showing lock screen.
 ASH_EXPORT bool IsShowing(LockScreen::ScreenType type);
 
+// Returns the default fontlist for Ambient Mode.
+ASH_EXPORT const gfx::FontList& GetDefaultFontlist();
+
 }  // namespace util
 }  // namespace ambient
 }  // namespace ash

ash/ash_strings.grd

@@ -2483,6 +2483,11 @@ This file contains the strings for ash.
       <message name="IDS_ASH_BACK_GESTURE_CONTEXTUAL_NUDGE_RTL" desc="Information shown in the suggestion label for the contextual nudge of the back gesture in tablet mode in RTL language">
         Swipe from the right to go back
       </message>
+
+      <!-- Ambient Mode-->
+      <message name="IDS_ASH_AMBIENT_MODE_WEATHER_TEMPERATURE_IN_FAHRENHEIT" desc="Text of the weather temperature in Fahrenheit.">
+        <ph name="TEMPERATURE_F">$1<ex>81</ex></ph>° F
+      </message>
     </messages>
   </release>
 </grit>

ash/system/time/time_tray_item_view.cc

@@ -9,6 +9,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_utils.h"
 
 namespace ash {
 
@@ -35,7 +36,7 @@ void TimeTrayItemView::UpdateAlignmentForShelf(Shelf* shelf) {
 
 void TimeTrayItemView::OnSessionStateChanged(
     session_manager::SessionState state) {
-  time_view_->SetTextColorBasedOnSession(state);
+  time_view_->SetTextColor(TrayIconColor(state));
 }
 
 const char* TimeTrayItemView::GetClassName() const {

ash/system/time/time_view.cc

@@ -26,6 +26,7 @@
 #include "ui/accessibility/ax_node_data.h"
 #include "ui/base/l10n/l10n_util.h"
 #include "ui/gfx/geometry/insets.h"
+#include "ui/gfx/text_constants.h"
 #include "ui/views/border.h"
 #include "ui/views/controls/button/button.h"
 #include "ui/views/controls/label.h"
@@ -86,10 +87,11 @@ void TimeView::UpdateClockLayout(ClockLayout clock_layout) {
   Layout();
 }
 
-void TimeView::SetTextColorBasedOnSession(
-    session_manager::SessionState session_state) {
+void TimeView::SetTextColor(SkColor color,
+                            bool auto_color_readability_enabled) {
   auto set_color = [&](views::Label* label) {
-    label->SetEnabledColor(TrayIconColor(session_state));
+    label->SetEnabledColor(color);
+    label->SetAutoColorReadabilityEnabled(auto_color_readability_enabled);
   };
 
   set_color(horizontal_label_);
@@ -97,6 +99,13 @@ void TimeView::SetTextColorBasedOnSession(
   set_color(vertical_label_minutes_);
 }
 
+void TimeView::SetTextFont(const gfx::FontList& font_list) {
+  horizontal_label_->SetFontList(font_list);
+
+  vertical_label_hours_->SetFontList(font_list);
+  vertical_label_minutes_->SetFontList(font_list);
+}
+
 void TimeView::OnDateFormatChanged() {
   UpdateTimeFormat();
 }

ash/system/time/time_view.h

@@ -14,6 +14,8 @@
 #include "base/macros.h"
 #include "base/timer/timer.h"
 #include "components/session_manager/session_manager_types.h"
+#include "third_party/skia/include/core/SkColor.h"
+#include "ui/gfx/font_list.h"
 #include "ui/views/view.h"
 
 namespace base {
@@ -45,8 +47,11 @@ class ASH_EXPORT TimeView : public ActionableView, public ClockObserver {
   // Updates clock layout.
   void UpdateClockLayout(ClockLayout clock_layout);
 
-  // Updates the time color based on the current session state.
-  void SetTextColorBasedOnSession(session_manager::SessionState session_state);
+  // Updates the time text color.
+  void SetTextColor(SkColor color, bool auto_color_readability_enabled = true);
+
+  // Updates the time text fontlist.
+  void SetTextFont(const gfx::FontList& font_list);
 
   // ClockObserver:
   void OnDateFormatChanged() override;