Update shelf for jelly
* Updates shelf nudge text color and typography
* Updates home button to use "toggled" icon button colors when
app list is shown
* Updates home button nudge text and background colors
* Updates app activity indicator colors for "inactive" indicator
to match spec
* Updates shelf button ink drop base color
* Updates animating shelf background (and drag handle) to match
in-app shelf colors
BUG=b:282832879
Change-Id: I7af5ead97e5f9f4f83298ad344fe4f2a5df21cb7
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4534896
Reviewed-by: Xiaoqian Dai <xdai@chromium.org>
Reviewed-by: Yulun Wu <yulunwu@chromium.org>
Commit-Queue: Toni Barzic <tbarzic@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1149937}
diff --git a/ash/controls/contextual_nudge.cc b/ash/controls/contextual_nudge.cc
index 81f085a..c808fca 100644
--- a/ash/controls/contextual_nudge.cc
+++ b/ash/controls/contextual_nudge.cc
@@ -7,10 +7,14 @@
#include "ash/public/cpp/shelf_types.h"
#include "ash/public/cpp/shell_window_ids.h"
#include "ash/shelf/shelf.h"
+#include "ash/style/ash_color_id.h"
#include "ash/style/ash_color_provider.h"
+#include "ash/style/typography.h"
#include "ash/system/tray/tray_constants.h"
#include "ash/wm/collision_detection/collision_detection_utils.h"
+#include "chromeos/constants/chromeos_features.h"
#include "ui/aura/window.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
#include "ui/compositor/layer.h"
#include "ui/compositor/scoped_layer_animation_settings.h"
#include "ui/gfx/color_palette.h"
@@ -70,6 +74,13 @@
label_->SetHorizontalAlignment(gfx::ALIGN_CENTER);
label_->SetBackgroundColor(SK_ColorTRANSPARENT);
label_->SetBorder(views::CreateEmptyBorder(margins));
+ if (chromeos::features::IsJellyEnabled()) {
+ label_->SetEnabledColorId(cros_tokens::kCrosSysSecondary);
+ TypographyProvider::Get()->StyleLabel(TypographyToken::kCrosAnnotation1,
+ *label_);
+ } else {
+ label_->SetEnabledColorId(kColorAshTextColorPrimary);
+ }
views::BubbleDialogDelegateView::CreateBubble(this);
@@ -116,10 +127,4 @@
views::BubbleDialogDelegateView::OnGestureEvent(event);
}
-void ContextualNudge::OnThemeChanged() {
- views::BubbleDialogDelegateView::OnThemeChanged();
- label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
- AshColorProvider::ContentLayerType::kTextColorPrimary));
-}
-
} // namespace ash
diff --git a/ash/controls/contextual_nudge.h b/ash/controls/contextual_nudge.h
index 31f610e..392e8391 100644
--- a/ash/controls/contextual_nudge.h
+++ b/ash/controls/contextual_nudge.h
@@ -53,7 +53,6 @@
// BubbleDialogDelegateView:
ui::LayerType GetLayerType() const override;
void OnGestureEvent(ui::GestureEvent* event) override;
- void OnThemeChanged() override;
private:
base::RepeatingClosure tap_callback_;
diff --git a/ash/shelf/drag_handle.cc b/ash/shelf/drag_handle.cc
index 50a7d0e..953e250 100644
--- a/ash/shelf/drag_handle.cc
+++ b/ash/shelf/drag_handle.cc
@@ -24,9 +24,11 @@
#include "base/functional/bind.h"
#include "base/memory/raw_ptr.h"
#include "base/timer/timer.h"
+#include "chromeos/constants/chromeos_features.h"
#include "third_party/abseil-cpp/absl/types/optional.h"
#include "ui/accessibility/ax_node_data.h"
#include "ui/base/l10n/l10n_util.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
#include "ui/compositor/layer.h"
#include "ui/compositor/scoped_layer_animation_settings.h"
#include "ui/views/accessibility/view_accessibility.h"
@@ -240,7 +242,12 @@
}
void DragHandle::UpdateColor() {
- layer()->SetColor(GetColorProvider()->GetColor(kColorAshShelfHandleColor));
+ if (chromeos::features::IsJellyEnabled()) {
+ layer()->SetColor(
+ GetColorProvider()->GetColor(cros_tokens::kCrosSysOnSurface));
+ } else {
+ layer()->SetColor(GetColorProvider()->GetColor(kColorAshShelfHandleColor));
+ }
}
void DragHandle::OnGestureEvent(ui::GestureEvent* event) {
diff --git a/ash/shelf/home_button.cc b/ash/shelf/home_button.cc
index 3ae7c5721..c1f87279 100644
--- a/ash/shelf/home_button.cc
+++ b/ash/shelf/home_button.cc
@@ -25,6 +25,7 @@
#include "ash/strings/grit/ash_strings.h"
#include "ash/style/ash_color_id.h"
#include "ash/style/ash_color_provider.h"
+#include "ash/style/typography.h"
#include "ash/user_education/user_education_class_properties.h"
#include "ash/user_education/user_education_constants.h"
#include "ash/wm/tablet_mode/tablet_mode_controller.h"
@@ -37,6 +38,7 @@
#include "chromeos/strings/grit/chromeos_strings.h"
#include "ui/aura/window.h"
#include "ui/base/l10n/l10n_util.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
#include "ui/display/display.h"
#include "ui/display/screen.h"
#include "ui/gfx/canvas.h"
@@ -147,10 +149,7 @@
cc::PaintFlags fg_flags;
fg_flags.setAntiAlias(true);
fg_flags.setStyle(cc::PaintFlags::kStroke_Style);
- fg_flags.setColor(GetColorProvider()->GetColor(
- chromeos::features::IsJellyEnabled()
- ? static_cast<ui::ColorId>(cros_tokens::kCrosSysOnSurface)
- : kColorAshButtonIconColor));
+ fg_flags.setColor(GetColorProvider()->GetColor(GetIconColorId()));
if (is_assistant_available) {
// active: 100% alpha, inactive: 54% alpha
@@ -191,6 +190,16 @@
UpdateBackground();
}
+ void SetToggled(bool toggled) {
+ if (toggled_ == toggled) {
+ return;
+ }
+
+ toggled_ = toggled;
+ UpdateBackground();
+ SchedulePaint();
+ }
+
private:
// Updates the view background to match the current shelf config.
void UpdateBackground() {
@@ -210,11 +219,8 @@
shelf_config->control_border_radius()));
}
} else {
- const ui::ColorId color_id = shelf_config->in_tablet_mode()
- ? cros_tokens::kCrosSysSystemBaseElevated
- : cros_tokens::kCrosSysSystemOnBase;
SetBackground(views::CreateThemedRoundedRectBackground(
- color_id, shelf_config->control_border_radius()));
+ GetBackgroundColorId(), shelf_config->control_border_radius()));
}
if (shelf_config->in_tablet_mode() && !shelf_config->is_in_app()) {
@@ -228,7 +234,28 @@
}
}
+ ui::ColorId GetIconColorId() {
+ if (!chromeos::features::IsJellyEnabled()) {
+ return kColorAshButtonIconColor;
+ }
+
+ return toggled_ && !ShelfConfig::Get()->in_tablet_mode()
+ ? cros_tokens::kCrosSysSystemOnPrimaryContainer
+ : cros_tokens::kCrosSysOnSurface;
+ }
+
+ ui::ColorId GetBackgroundColorId() {
+ if (ShelfConfig::Get()->in_tablet_mode()) {
+ return cros_tokens::kCrosSysSystemBaseElevated;
+ }
+
+ return toggled_ ? cros_tokens::kCrosSysSystemPrimaryContainer
+ : cros_tokens::kCrosSysSystemOnBase;
+ }
+
HomeButtonController* const button_controller_;
+
+ bool toggled_ = false;
};
// static
@@ -253,7 +280,10 @@
// HomeButton::ScopedNoClipRect ------------------------------------------------
HomeButton::HomeButton(Shelf* shelf)
- : ShelfControlButton(shelf, this), shelf_(shelf), controller_(this) {
+ : ShelfControlButton(shelf, this),
+ jelly_enabled_(chromeos::features::IsJellyEnabled()),
+ shelf_(shelf),
+ controller_(this) {
SetAccessibleName(
l10n_util::GetStringUTF16(IDS_ASH_SHELF_APP_LIST_LAUNCHER_TITLE));
button_controller()->set_notify_action(
@@ -553,6 +583,10 @@
AnimateNudgeRipple(builder);
}
+void HomeButton::SetToggled(bool toggled) {
+ button_image_view_->SetToggled(toggled);
+}
+
void HomeButton::AddNudgeAnimationObserverForTest(
NudgeAnimationObserver* observer) {
observers_.AddObserver(observer);
@@ -564,20 +598,18 @@
void HomeButton::OnThemeChanged() {
ShelfControlButton::OnThemeChanged();
+
if (ripple_layer_delegate_) {
- ripple_layer_delegate_->set_color(
- GetColorProvider()->GetColor(kColorAshInkDropOpaqueColor));
+ ripple_layer_delegate_->set_color(GetColorProvider()->GetColor(
+ jelly_enabled_ ? static_cast<ui::ColorId>(
+ cros_tokens::kCrosSysRippleNeutralOnSubtle)
+ : kColorAshInkDropOpaqueColor));
}
if (expandable_container_) {
- expandable_container_->layer()->SetColor(
- AshColorProvider::Get()->GetControlsLayerColor(
- AshColorProvider::ControlsLayerType::
- kControlBackgroundColorInactive));
- if (nudge_label_) {
- nudge_label_->SetEnabledColor(
- AshColorProvider::Get()->GetContentLayerColor(
- AshColorProvider::ContentLayerType::kTextColorPrimary));
- }
+ expandable_container_->layer()->SetColor(GetColorProvider()->GetColor(
+ jelly_enabled_
+ ? static_cast<ui::ColorId>(cros_tokens::kCrosSysSystemOnBase)
+ : kColorAshControlBackgroundColorInactive));
}
}
@@ -592,10 +624,12 @@
std::make_unique<views::FillLayout>());
expandable_container_->SetPaintToLayer(ui::LAYER_SOLID_COLOR);
expandable_container_->layer()->SetMasksToBounds(true);
- expandable_container_->layer()->SetColor(
- AshColorProvider::Get()->GetControlsLayerColor(
- AshColorProvider::ControlsLayerType::
- kControlBackgroundColorInactive));
+ if (GetColorProvider()) {
+ expandable_container_->layer()->SetColor(GetColorProvider()->GetColor(
+ jelly_enabled_
+ ? static_cast<ui::ColorId>(cros_tokens::kCrosSysSystemOnBase)
+ : kColorAshControlBackgroundColorInactive));
+ }
expandable_container_->layer()->SetRoundedCornerRadius(
gfx::RoundedCornersF(home_button_width / 2.f));
expandable_container_->layer()->SetName("NudgeLabelContainer");
@@ -626,9 +660,13 @@
nudge_label_->layer()->SetFillsBoundsOpaquely(false);
nudge_label_->SetTextContext(CONTEXT_LAUNCHER_NUDGE_LABEL);
nudge_label_->SetTextStyle(views::style::STYLE_EMPHASIZED);
- nudge_label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
- AshColorProvider::ContentLayerType::kTextColorPrimary));
-
+ nudge_label_->SetEnabledColorId(
+ jelly_enabled_ ? static_cast<ui::ColorId>(cros_tokens::kCrosSysOnSurface)
+ : kColorAshTextColorPrimary);
+ if (jelly_enabled_) {
+ TypographyProvider::Get()->StyleLabel(TypographyToken::kCrosButton2,
+ *nudge_label_);
+ }
expandable_container_->SetVisible(false);
Layout();
}
diff --git a/ash/shelf/home_button.h b/ash/shelf/home_button.h
index a672c4e..ec39393 100644
--- a/ash/shelf/home_button.h
+++ b/ash/shelf/home_button.h
@@ -141,6 +141,10 @@
// Starts the launcher nudge animation.
void StartNudgeAnimation();
+ // Sets the button's "toggled" state - the button is toggled when the bubble
+ // launcher is shown.
+ void SetToggled(bool toggled);
+
void AddNudgeAnimationObserverForTest(NudgeAnimationObserver* observer);
void RemoveNudgeAnimationObserverForTest(NudgeAnimationObserver* observer);
@@ -226,6 +230,8 @@
// bounds of the home button.
gfx::Rect GetExpandableContainerClipRectToHomeButton();
+ const bool jelly_enabled_;
+
base::ScopedObservation<QuickAppAccessModel, QuickAppAccessModel::Observer>
quick_app_model_observation_{this};
diff --git a/ash/shelf/home_button_controller.cc b/ash/shelf/home_button_controller.cc
index 5573159..a3976251 100644
--- a/ash/shelf/home_button_controller.cc
+++ b/ash/shelf/home_button_controller.cc
@@ -18,6 +18,7 @@
#include "base/metrics/histogram_macros.h"
#include "base/metrics/user_metrics.h"
#include "base/metrics/user_metrics_action.h"
+#include "chromeos/constants/chromeos_features.h"
#include "components/account_id/account_id.h"
#include "ui/display/screen.h"
#include "ui/views/animation/ink_drop.h"
@@ -176,23 +177,31 @@
}
void HomeButtonController::OnAppListShown() {
- // Do not show a highlight in tablet mode, since the home screen view is
- // always open in the background.
+ // Do not show the button as toggled in tablet mode, since the home screen
+ // view is always open in the background.
if (!Shell::Get()->IsInTabletMode()) {
- views::InkDrop::Get(button_)->AnimateToState(views::InkDropState::ACTIVATED,
- nullptr);
+ button_->SetToggled(true);
+ if (!chromeos::features::IsJellyEnabled()) {
+ views::InkDrop::Get(button_)->AnimateToState(
+ views::InkDropState::ACTIVATED, nullptr);
+ }
}
}
void HomeButtonController::OnAppListDismissed() {
- // If ink drop is not hidden already, snap it to active state, so animation to
- // DEACTIVATED state starts immediately (the animation would otherwise wait
- // for the current animation to finish).
- views::InkDrop* const ink_drop = views::InkDrop::Get(button_)->GetInkDrop();
- if (ink_drop->GetTargetInkDropState() != views::InkDropState::HIDDEN)
- ink_drop->SnapToActivated();
- views::InkDrop::Get(button_)->AnimateToState(views::InkDropState::DEACTIVATED,
- nullptr);
+ button_->SetToggled(false);
+
+ if (!chromeos::features::IsJellyEnabled()) {
+ // If ink drop is not hidden already, snap it to active state, so animation
+ // to DEACTIVATED state starts immediately (the animation would otherwise
+ // wait for the current animation to finish).
+ views::InkDrop* const ink_drop = views::InkDrop::Get(button_)->GetInkDrop();
+ if (ink_drop->GetTargetInkDropState() != views::InkDropState::HIDDEN) {
+ ink_drop->SnapToActivated();
+ }
+ views::InkDrop::Get(button_)->AnimateToState(
+ views::InkDropState::DEACTIVATED, nullptr);
+ }
}
void HomeButtonController::InitializeAssistantOverlay() {
diff --git a/ash/shelf/shelf_app_button.cc b/ash/shelf/shelf_app_button.cc
index 7f167a9..27d0603 100644
--- a/ash/shelf/shelf_app_button.cc
+++ b/ash/shelf/shelf_app_button.cc
@@ -16,6 +16,7 @@
#include "ash/strings/grit/ash_strings.h"
#include "ash/style/ash_color_id.h"
#include "ash/style/dot_indicator.h"
+#include "ash/style/style_util.h"
#include "ash/wm/desks/desks_controller.h"
#include "ash/wm/tablet_mode/tablet_mode_controller.h"
#include "base/functional/bind.h"
@@ -164,7 +165,8 @@
public:
METADATA_HEADER(AppStatusIndicatorView);
- AppStatusIndicatorView() {
+ AppStatusIndicatorView()
+ : jelly_enabled_(chromeos::features::IsJellyEnabled()) {
// Make sure the events reach the parent view for handling.
SetCanProcessEventsWithinSubtree(false);
status_change_animation_ = std::make_unique<gfx::SlideAnimation>(this);
@@ -186,17 +188,25 @@
}
void OnPaint(gfx::Canvas* canvas) override {
+ if (!GetColorProvider()) {
+ return;
+ }
+
gfx::ScopedCanvas scoped(canvas);
- canvas->SaveLayerAlpha(GetAlpha());
+ if (!jelly_enabled_) {
+ canvas->SaveLayerAlpha(GetAlpha());
+ }
const float dsf = canvas->UndoDeviceScaleFactor();
gfx::PointF center = gfx::RectF(GetLocalBounds()).CenterPoint();
cc::PaintFlags flags;
+ if (jelly_enabled_) {
+ flags.setColor(GetJellyColor());
+ } else {
+ flags.setColor(
+ GetColorProvider()->GetColor(kColorAshAppStateIndicatorColor));
+ }
// Active and running indicators look a little different in the new UI.
- flags.setColor(GetColorProvider()->GetColor(
- chromeos::features::IsJellyEnabled()
- ? static_cast<ui::ColorId>(cros_tokens::kCrosSysOnSurface)
- : kColorAshAppStateIndicatorColor));
flags.setAntiAlias(true);
flags.setStrokeCap(cc::PaintFlags::Cap::kRound_Cap);
flags.setStrokeJoin(cc::PaintFlags::Join::kRound_Join);
@@ -238,6 +248,27 @@
: status_indicator_running_size;
}
+ SkColor GetJellyColor() {
+ const SkColor active_color =
+ GetColorProvider()->GetColor(cros_tokens::kCrosSysOnSurface);
+ const SkColor inactive_color =
+ GetColorProvider()->GetColor(cros_tokens::kCrosSysSecondary);
+ if (show_attention_) {
+ if (!ShelfAppButtonAnimation::GetInstance()->HasObserver(this)) {
+ return active_color;
+ }
+ return SkColorSetA(active_color,
+ ShelfAppButtonAnimation::GetInstance()->GetAlpha());
+ }
+
+ if (status_change_animation_->is_animating()) {
+ return gfx::Tween::ColorValueBetween(
+ status_change_animation_->GetCurrentValue(), inactive_color,
+ active_color);
+ }
+ return active_ ? active_color : inactive_color;
+ }
+
SkAlpha GetAlpha() {
if (show_attention_) {
return ShelfAppButtonAnimation::GetInstance()->HasObserver(this)
@@ -306,6 +337,7 @@
ShelfAppButtonAnimation::GetInstance()->RemoveObserver(this);
}
+ const bool jelly_enabled_;
bool show_attention_ = false;
bool active_ = false;
bool horizontal_shelf_ = true;
@@ -391,7 +423,11 @@
views::InstallEmptyHighlightPathGenerator(this);
SetFocusBehavior(FocusBehavior::ALWAYS);
SetInstallFocusRingOnFocus(true);
- views::FocusRing::Get(this)->SetColorId(ui::kColorAshFocusRing);
+ if (chromeos::features::IsJellyEnabled()) {
+ views::FocusRing::Get(this)->SetColorId(cros_tokens::kCrosSysFocusRing);
+ } else {
+ views::FocusRing::Get(this)->SetColorId(ui::kColorAshFocusRing);
+ }
// The focus ring should have an inset of half the focus border thickness, so
// the parent view won't clip it.
views::FocusRing::Get(this)->SetPathGenerator(
diff --git a/ash/shelf/shelf_button.cc b/ash/shelf/shelf_button.cc
index 860b65e..5670aca 100644
--- a/ash/shelf/shelf_button.cc
+++ b/ash/shelf/shelf_button.cc
@@ -8,8 +8,10 @@
#include "ash/shelf/shelf.h"
#include "ash/shelf/shelf_button_delegate.h"
#include "ash/style/style_util.h"
+#include "chromeos/constants/chromeos_features.h"
#include "ui/accessibility/ax_enums.mojom.h"
#include "ui/accessibility/ax_node_data.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
#include "ui/views/animation/ink_drop.h"
#include "ui/views/controls/highlight_path_generator.h"
@@ -41,8 +43,14 @@
void ShelfButton::OnThemeChanged() {
views::Button::OnThemeChanged();
- StyleUtil::ConfigureInkDropAttributes(
- this, StyleUtil::kBaseColor | StyleUtil::kInkDropOpacity);
+ if (chromeos::features::IsJellyEnabled()) {
+ auto* ink_drop = views::InkDrop::Get(this);
+ ink_drop->SetBaseColorId(cros_tokens::kCrosSysRippleNeutralOnSubtle);
+ ink_drop->SetVisibleOpacity(1.0f);
+ } else {
+ StyleUtil::ConfigureInkDropAttributes(
+ this, StyleUtil::kBaseColor | StyleUtil::kInkDropOpacity);
+ }
}
const char* ShelfButton::GetClassName() const {
diff --git a/ash/shelf/shelf_control_button.cc b/ash/shelf/shelf_control_button.cc
index 0b9a5219..8ab697d 100644
--- a/ash/shelf/shelf_control_button.cc
+++ b/ash/shelf/shelf_control_button.cc
@@ -8,9 +8,10 @@
#include "ash/resources/vector_icons/vector_icons.h"
#include "ash/shelf/shelf_button_delegate.h"
#include "ash/shell.h"
-#include "ash/style/ash_color_provider.h"
#include "ash/wm/tablet_mode/tablet_mode_controller.h"
+#include "chromeos/constants/chromeos_features.h"
#include "ui/accessibility/ax_node_data.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
#include "ui/color/color_id.h"
#include "ui/gfx/canvas.h"
#include "ui/gfx/paint_vector_icon.h"
@@ -58,7 +59,10 @@
: ShelfButton(shelf, shelf_button_delegate) {
SetHasInkDropActionOnClick(true);
SetInstallFocusRingOnFocus(true);
- views::FocusRing::Get(this)->SetColorId(ui::kColorAshFocusRing);
+ views::FocusRing::Get(this)->SetColorId(
+ chromeos::features::IsJellyEnabled()
+ ? static_cast<ui::ColorId>(cros_tokens::kCrosSysFocusRing)
+ : ui::kColorAshFocusRing);
views::HighlightPathGenerator::Install(
this, std::make_unique<ShelfControlButtonHighlightPathGenerator>());
SetPaintToLayer();
diff --git a/ash/shelf/shelf_widget.cc b/ash/shelf/shelf_widget.cc
index fcf5c9f..2596323e 100644
--- a/ash/shelf/shelf_widget.cc
+++ b/ash/shelf/shelf_widget.cc
@@ -40,6 +40,7 @@
#include "base/functional/bind.h"
#include "base/memory/raw_ptr.h"
#include "chromeos/constants/chromeos_features.h"
+#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
#include "ui/compositor/layer.h"
#include "ui/compositor/layer_delegate.h"
#include "ui/compositor/layer_owner.h"
@@ -458,13 +459,20 @@
void ShelfWidget::DelegateView::OnThemeChanged() {
views::AccessiblePaneView::OnThemeChanged();
- animating_background_.SetColor(
- ShelfConfig::Get()->GetMaximizedShelfColor(GetWidget()));
shelf_widget_->background_animator_.PaintBackground(
shelf_widget_->shelf_layout_manager()->GetShelfBackgroundType(),
AnimationChangeType::IMMEDIATE);
- animating_drag_handle_.SetColor(
- GetColorProvider()->GetColor(kColorAshShelfHandleColor));
+ if (chromeos::features::IsJellyEnabled()) {
+ animating_background_.SetColor(
+ GetColorProvider()->GetColor(cros_tokens::kCrosSysSystemBase));
+ animating_drag_handle_.SetColor(
+ GetColorProvider()->GetColor(cros_tokens::kCrosSysOnSurface));
+ } else {
+ animating_background_.SetColor(
+ ShelfConfig::Get()->GetMaximizedShelfColor(GetWidget()));
+ animating_drag_handle_.SetColor(
+ GetColorProvider()->GetColor(kColorAshShelfHandleColor));
+ }
}
bool ShelfWidget::DelegateView::CanActivate() const {