Add due date details text support for tasks glanceable.

This CL also refactors due date and time formatting into a separate
utility class.

Bug: b:277268122
Change-Id: I2923f924ab827bc970af8c182a8226fabcc2ce60
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4655783
Commit-Queue: Yulun Wu <yulunwu@chromium.org>
Reviewed-by: Artsiom Mitrokhin <amitrokhin@chromium.org>
Reviewed-by: Yulun Wu <yulunwu@chromium.org>
Reviewed-by: Evan Stade <estade@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1166699}

ash/ash_strings.grd

@@ -6711,6 +6711,9 @@ New install
       </message>
 
       <!-- Glanceables -->
+      <message name="IDS_GLANCEABLES_DUE_TODAY" desc="Classroom glanceable displays upcoming/missed/completed assignments from Google Classroom. Tasks glanceable displays upcoming/missed assignments from Google Tasks. This text is displayed for tasks and assignments that are due today. In other cases date formatter is used and no translation is needed.">
+        Today
+      </message>
       <message name="IDS_GLANCEABLES_WELCOME_LABEL" desc="Personalized greeting / welcome message shown on glanceables surfaces (welcome screen and overview mode).">
         Welcome back, <ph name="GIVEN_NAME">$1<ex>John</ex></ph>
       </message>
@@ -6720,9 +6723,6 @@ New install
       <message name="IDS_GLANCEABLES_LIST_FOOTER_ACTION_BUTTON_LABEL" desc="The glanceable displays classroom or tasks items fetched from Google Classroom or Google Tasks API. Glanceables UI renders only limited number of items, the rest of them can be seen by clicking this button, which will open a corresponding website.">
         See all
       </message>
-      <message name="IDS_GLANCEABLES_CLASSROOM_ASSIGNMENT_DUE_TODAY" desc="Classroom glanceable displays upcoming/missed/completed assignments from Google Classroom. This text is displayed for assignments that are due today. In other cases date formatter is used and no translation is needed.">
-        Today
-      </message>
 
       <!-- Do not disturb notification -->
       <message name="IDS_ASH_DO_NOT_DISTURB_NOTIFICATION_TITLE" desc="Label used for the notification that shows up when the 'Do not disturb' feature is enabled.">

ash/glanceables/classroom/glanceables_classroom_item_view.cc

@@ -63,8 +63,7 @@ std::u16string GetFormattedDueDate(const base::Time& due) {
   const auto midnight_tomorrow = midnight_today + base::Days(1);
 
   if (midnight_today <= due && due < midnight_tomorrow) {
-    return l10n_util::GetStringUTF16(
-        IDS_GLANCEABLES_CLASSROOM_ASSIGNMENT_DUE_TODAY);
+    return l10n_util::GetStringUTF16(IDS_GLANCEABLES_DUE_TODAY);
   }
 
   const auto midnight_in_7_days_from_today = midnight_today + base::Days(7);

ash/glanceables/tasks/glanceables_task_view.cc

@@ -8,7 +8,12 @@
 #include "ash/glanceables/tasks/glanceables_tasks_client.h"
 #include "ash/resources/vector_icons/vector_icons.h"
 #include "ash/shell.h"
+#include "ash/strings/grit/ash_strings.h"
 #include "ash/style/ash_color_id.h"
+#include "ash/style/typography.h"
+#include "ash/system/time/date_helper.h"
+#include "chromeos/constants/chromeos_features.h"
+#include "ui/base/l10n/l10n_util.h"
 #include "ui/base/metadata/metadata_impl_macros.h"
 #include "ui/color/color_provider.h"
 #include "ui/gfx/paint_vector_icon.h"
@@ -23,6 +28,7 @@ namespace {
 constexpr int kIconSize = 20;
 constexpr int kTaskHeight = 48;
 constexpr int kTaskWidth = 332;
+constexpr char kFormatterPattern[] = "EEE, MMM d";  // "Wed, Feb 28"
 
 views::Label* SetupLabel(views::FlexLayoutView* parent) {
   views::Label* label = parent->AddChildView(std::make_unique<views::Label>());
@@ -35,6 +41,21 @@ views::Label* SetupLabel(views::FlexLayoutView* parent) {
   return label;
 }
 
+std::u16string GetFormattedDueDate(const base::Time& due) {
+  const auto midnight_today = base::Time::Now().LocalMidnight();
+  const auto midnight_tomorrow = midnight_today + base::Days(1);
+
+  if (midnight_today <= due && due < midnight_tomorrow) {
+    return l10n_util::GetStringUTF16(IDS_GLANCEABLES_DUE_TODAY);
+  }
+
+  auto* const date_helper = ash::DateHelper::GetInstance();
+  CHECK(date_helper);
+  const auto formatter =
+      date_helper->CreateSimpleDateFormatter(kFormatterPattern);
+  return date_helper->GetFormattedTime(&formatter, due);
+}
+
 }  // namespace
 
 namespace ash {
@@ -49,27 +70,49 @@ GlanceablesTaskView::GlanceablesTaskView(const std::string& task_list_id,
       views::Button::STATE_NORMAL,
       ui::ImageModel::FromVectorIcon(kHollowCircleIcon,
                                      cros_tokens::kFocusRingColor, kIconSize));
-  // TODO(b:277268122): set accessible name once spec is available. Also update
-  // button icon and styling.
+  // TODO(b:277268122): set accessible name once spec is available.
   button_->SetAccessibleName(u"Glanceables Task View Button");
 
   contents_view_ = AddChildView(std::make_unique<views::FlexLayoutView>());
-  contents_view_->SetCrossAxisAlignment(views::LayoutAlignment::kCenter);
+  contents_view_->SetCrossAxisAlignment(views::LayoutAlignment::kStart);
   contents_view_->SetOrientation(views::LayoutOrientation::kVertical);
 
   tasks_title_view_ =
       contents_view_->AddChildView(std::make_unique<views::FlexLayoutView>());
+
   views::Label* tasks_label = SetupLabel(tasks_title_view_);
   tasks_label->SetText(base::UTF8ToUTF16(task->title));
-  // TODO(b:277268122): Setup label text styling once spec is available.
+  tasks_label->SetFontList(TypographyProvider::Get()->ResolveTypographyToken(
+      TypographyToken::kCrosButton2));
+  if (chromeos::features::IsJellyEnabled()) {
+    tasks_label->SetEnabledColorId(cros_tokens::kCrosSysOnSurface);
+  } else {
+    tasks_label->SetEnabledColorId(kColorAshTextColorPrimary);
+  }
 
   if (task->due.has_value()) {
     tasks_due_date_view_ =
         contents_view_->AddChildView(std::make_unique<views::FlexLayoutView>());
-    views::Label* due_date_label = SetupLabel(tasks_title_view_);
-    // TODO(b:277268122): set 'due_date_text' based on due.value()
-    const std::u16string due_date_text = u"due_date_text";
-    due_date_label->SetText(due_date_text);
+    views::ImageView* time_icon_view = tasks_due_date_view_->AddChildView(
+        std::make_unique<views::ImageView>());
+
+    views::Label* due_date_label = SetupLabel(tasks_due_date_view_);
+    due_date_label->SetText(GetFormattedDueDate(task->due.value()));
+    due_date_label->SetFontList(
+        TypographyProvider::Get()->ResolveTypographyToken(
+            TypographyToken::kCrosAnnotation1));
+
+    if (chromeos::features::IsJellyEnabled()) {
+      time_icon_view->SetImage(ui::ImageModel::FromVectorIcon(
+          kGlanceablesTasksDueDateIcon, cros_tokens::kCrosSysOnSurfaceVariant,
+          kIconSize));
+      due_date_label->SetEnabledColorId(cros_tokens::kCrosSysOnSurfaceVariant);
+    } else {
+      time_icon_view->SetImage(ui::ImageModel::FromVectorIcon(
+          kGlanceablesTasksDueDateIcon, kColorAshTextColorSecondary,
+          kIconSize));
+      due_date_label->SetEnabledColorId(kColorAshTextColorSecondary);
+    }
   }
 
   // TODO(b:277268122): Implement accessibility behavior.

ash/resources/vector_icons/BUILD.gn

@@ -117,6 +117,7 @@ aggregate_vector_icons("ash_vector_icons") {
     "gif.icon",
     "glanceables_classroom.icon",
     "glanceables_classroom_assignment.icon",
+    "glanceables_tasks_due_date.icon",
     "global_media_controls.icon",
     "hide_closed_caption.icon",
     "holding_space.icon",

ash/resources/vector_icons/glanceables_tasks_due_date.icon

@@ -0,0 +1,25 @@
+// Copyright 2023 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+CANVAS_DIMENSIONS, 20,
+MOVE_TO, 9.99f, 2,
+CUBIC_TO, 5.58f, 2, 2, 5.58f, 2, 10,
+CUBIC_TO, 2, 14.42f, 5.58f, 18, 9.99f, 18,
+CUBIC_TO, 14.42f, 18, 18, 14.42f, 18, 10,
+CUBIC_TO, 18, 5.58f, 14.42f, 2, 9.99f, 2,
+CLOSE,
+MOVE_TO, 10, 16,
+CUBIC_TO, 6.69f, 16, 4, 13.32f, 4, 10,
+CUBIC_TO, 4, 6.69f, 6.69f, 4, 10, 4,
+CUBIC_TO, 13.32f, 4, 16, 6.69f, 16, 10,
+CUBIC_TO, 16, 13.32f, 13.32f, 16, 10, 16,
+CLOSE,
+MOVE_TO, 13.5f, 12.5f,
+LINE_TO, 12.09f, 13.91f,
+LINE_TO, 9.03f, 10.92f,
+LINE_TO, 9, 6,
+H_LINE_TO, 10.95f,
+V_LINE_TO, 10,
+LINE_TO, 13.5f, 12.5f,
+CLOSE