Skip to content

Commit

Permalink
Update shelf for jelly
Browse files Browse the repository at this point in the history 
*  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}
  • Loading branch information
Toni Barzic authored and Chromium LUCI CQ committed May 26, 2023
1 parent f7c2df7 commit 2e55473
Show file tree
Hide file tree
Showing 10 changed files with 182 additions and 62 deletions.
17 changes: 11 additions & 6 deletions ash/controls/contextual_nudge.cc
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -70,6 +74,13 @@ ContextualNudge::ContextualNudge(views::View* anchor,
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);

Expand Down Expand Up @@ -116,10 +127,4 @@ void ContextualNudge::OnGestureEvent(ui::GestureEvent* event) {
views::BubbleDialogDelegateView::OnGestureEvent(event);
}

void ContextualNudge::OnThemeChanged() {
views::BubbleDialogDelegateView::OnThemeChanged();
label_->SetEnabledColor(AshColorProvider::Get()->GetContentLayerColor(
AshColorProvider::ContentLayerType::kTextColorPrimary));
}

} // namespace ash
1 change: 0 additions & 1 deletion ash/controls/contextual_nudge.h
View file
Expand Up @@ -53,7 +53,6 @@ class ASH_EXPORT ContextualNudge : public views::BubbleDialogDelegateView {
// BubbleDialogDelegateView:
ui::LayerType GetLayerType() const override;
void OnGestureEvent(ui::GestureEvent* event) override;
void OnThemeChanged() override;

private:
base::RepeatingClosure tap_callback_;
Expand Down
9 changes: 8 additions & 1 deletion ash/shelf/drag_handle.cc
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -240,7 +242,12 @@ void DragHandle::SetWindowDragFromShelfInProgress(bool gesture_in_progress) {
}

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) {
Expand Down
92 changes: 65 additions & 27 deletions ash/shelf/home_button.cc
View file
Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -147,10 +149,7 @@ class HomeButton::ButtonImageView : public views::View {
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
Expand Down Expand Up @@ -191,6 +190,16 @@ class HomeButton::ButtonImageView : public views::View {
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() {
Expand All @@ -210,11 +219,8 @@ class HomeButton::ButtonImageView : public views::View {
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()) {
Expand All @@ -228,7 +234,28 @@ class HomeButton::ButtonImageView : public views::View {
}
}

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
Expand All @@ -253,7 +280,10 @@ HomeButton::ScopedNoClipRect::~ScopedNoClipRect() {
// 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(
Expand Down Expand Up @@ -553,6 +583,10 @@ void HomeButton::StartNudgeAnimation() {
AnimateNudgeRipple(builder);
}

void HomeButton::SetToggled(bool toggled) {
button_image_view_->SetToggled(toggled);
}

void HomeButton::AddNudgeAnimationObserverForTest(
NudgeAnimationObserver* observer) {
observers_.AddObserver(observer);
Expand All @@ -564,20 +598,18 @@ void HomeButton::RemoveNudgeAnimationObserverForTest(

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));
}
}

Expand All @@ -592,10 +624,12 @@ void HomeButton::CreateExpandableContainer() {
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");
Expand Down Expand Up @@ -626,9 +660,13 @@ void HomeButton::CreateNudgeLabel() {
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();
}
Expand Down
6 changes: 6 additions & 0 deletions ash/shelf/home_button.h
View file
Expand Up @@ -141,6 +141,10 @@ class ASH_EXPORT HomeButton : public ShelfControlButton,
// 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);

Expand Down Expand Up @@ -226,6 +230,8 @@ class ASH_EXPORT HomeButton : public ShelfControlButton,
// bounds of the home button.
gfx::Rect GetExpandableContainerClipRectToHomeButton();

const bool jelly_enabled_;

base::ScopedObservation<QuickAppAccessModel, QuickAppAccessModel::Observer>
quick_app_model_observation_{this};

Expand Down
33 changes: 21 additions & 12 deletions ash/shelf/home_button_controller.cc
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -176,23 +177,31 @@ void HomeButtonController::StartAssistantAnimation() {
}

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() {
Expand Down

0 comments on commit 2e55473

Please sign in to comment.