chromeos: Update end-of-life button to QsRevamp spec
- Fix the stroke width to match other quick settings header buttons (see http://crrev.com/c/4557285) - Fix icon spacing - Add a shorter string label in case the "Managed" button is also showing. (This should be incredibly rare. We don't show the EOL notice for managed devices. It's very hard to tell from the code if we will ever show both buttons at the same time, but it's easy to support.) Before: https://screenshot.googleplex.com/AYwa5u55segZvXR After: https://screenshot.googleplex.com/Butvv73J89qsQRA Two-column: https://screenshot.googleplex.com/5P9hj6xC3e4fnpu Bug: b:281723490 Test: added to ash_pixeltests Change-Id: I62213295d0446f3fc59c8d5561a5b2d9ec970994 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4581949 Commit-Queue: James Cook <jamescook@chromium.org> Reviewed-by: Toni Barzic <tbarzic@chromium.org> Cr-Commit-Position: refs/heads/main@{#1152599}
This commit is contained in:

committed by
Chromium LUCI CQ

parent
422cf07d64
commit
d7fe82dc69
ash
@ -3851,6 +3851,7 @@ test("ash_pixeltests") {
|
||||
"system/time/calendar_up_next_pixeltest.cc",
|
||||
"system/unified/feature_tile_pixeltest.cc",
|
||||
"system/unified/power_button_pixeltest.cc",
|
||||
"system/update/eol_notice_quick_settings_view_pixeltest.cc",
|
||||
"test/pixel/demo_ash_pixel_diff_test.cc",
|
||||
"user_education/views/help_bubble_view_ash_pixeltest.cc",
|
||||
"wm/wm_pixel_diff_test.cc",
|
||||
|
@ -335,7 +335,10 @@ Style notes:
|
||||
</message>
|
||||
<message name="IDS_ASH_QUICK_SETTINGS_BUBBLE_EOL_NOTICE" desc="Message shown to the user in the quick settings bubble when their device reaches end of life, and stops receiveing software updates.">
|
||||
Security updates ended. Upgrade your device.
|
||||
</message>
|
||||
</message>
|
||||
<message name="IDS_ASH_QUICK_SETTINGS_BUBBLE_EOL_NOTICE_SHORT" desc="A short message shown to the user in the quick settings bubble when their device reaches end of life, and stops receiving software updates.">
|
||||
Updates ended
|
||||
</message>
|
||||
<message name="IDS_ASH_STATUS_TRAY_AUTOZOOM_BUTTON_LABEL" desc="The shorter label used for the button in the status tray to toggle the Autozoom feature (which controls if camera auto zoom to faces) on or off. [CHAR_LIMIT=14]">
|
||||
Camera framing
|
||||
</message>
|
||||
|
@ -0,0 +1 @@
|
||||
6b74a53ca0322e915487d726c5ce523f86192671
|
@ -113,7 +113,7 @@ TEST_P(ChannelIndicatorQuickSettingsViewPixelTest, FeedbackButtonVisible) {
|
||||
// `ChannelIndicatorQuickSettingsView`.
|
||||
EXPECT_TRUE(GetPixelDiffer()->CompareUiComponentsOnPrimaryScreen(
|
||||
"feedback_button_visible",
|
||||
/*revision_number=*/3, view()));
|
||||
/*revision_number=*/4, view()));
|
||||
}
|
||||
|
||||
} // namespace ash
|
||||
|
@ -35,7 +35,7 @@ constexpr int kButtonSpacing = 8;
|
||||
constexpr gfx::Size kNarrowButtonSize(180, 32);
|
||||
|
||||
// Header button size when the button is wide (e.g. one column layout).
|
||||
constexpr gfx::Size kWideButtonSize(468, 32);
|
||||
constexpr gfx::Size kWideButtonSize(408, 32);
|
||||
|
||||
} // namespace
|
||||
|
||||
@ -109,8 +109,12 @@ void QuickSettingsHeader::UpdateVisibilityAndLayout() {
|
||||
|
||||
// Use custom narrow layouts when two columns are showing.
|
||||
enterprise_managed_view_->SetNarrowLayout(two_columns);
|
||||
if (channel_view_)
|
||||
if (channel_view_) {
|
||||
channel_view_->SetNarrowLayout(two_columns);
|
||||
}
|
||||
if (eol_notice_) {
|
||||
eol_notice_->SetNarrowLayout(two_columns);
|
||||
}
|
||||
}
|
||||
|
||||
BEGIN_METADATA(QuickSettingsHeader, views::View)
|
||||
|
@ -13,6 +13,7 @@ namespace ash {
|
||||
|
||||
class ChannelIndicatorQuickSettingsView;
|
||||
class EnterpriseManagedView;
|
||||
class EolNoticeQuickSettingsView;
|
||||
class SupervisedUserView;
|
||||
class UnifiedSystemTrayController;
|
||||
|
||||
@ -36,7 +37,7 @@ class ASH_EXPORT QuickSettingsHeader : public views::View {
|
||||
return channel_view_;
|
||||
}
|
||||
|
||||
views::View* eol_notice_for_test() { return eol_notice_; }
|
||||
EolNoticeQuickSettingsView* eol_notice_for_test() { return eol_notice_; }
|
||||
|
||||
private:
|
||||
// Updates visibility for this view. When it has no children it sets itself
|
||||
@ -50,7 +51,7 @@ class ASH_EXPORT QuickSettingsHeader : public views::View {
|
||||
raw_ptr<SupervisedUserView, ExperimentalAsh> supervised_view_ = nullptr;
|
||||
raw_ptr<ChannelIndicatorQuickSettingsView, ExperimentalAsh> channel_view_ =
|
||||
nullptr;
|
||||
raw_ptr<views::View, ExperimentalAsh> eol_notice_ = nullptr;
|
||||
raw_ptr<EolNoticeQuickSettingsView, ExperimentalAsh> eol_notice_ = nullptr;
|
||||
};
|
||||
|
||||
} // namespace ash
|
||||
|
@ -16,6 +16,7 @@
|
||||
#include "ash/system/unified/buttons.h"
|
||||
#include "ash/system/unified/unified_system_tray_controller.h"
|
||||
#include "ash/system/unified/unified_system_tray_model.h"
|
||||
#include "ash/system/update/eol_notice_quick_settings_view.h"
|
||||
#include "ash/test/ash_test_base.h"
|
||||
#include "ash/test_shell_delegate.h"
|
||||
#include "base/check.h"
|
||||
@ -255,10 +256,13 @@ TEST_F(QuickSettingsHeaderTest, BothEolNoticeAndEnterpriseVisible) {
|
||||
EXPECT_EQ(GetManagedButtonLabel()->GetText(), u"Managed");
|
||||
EXPECT_EQ(GetManagedButton()->GetTooltipText({}), u"Managed by example.com");
|
||||
EXPECT_TRUE(header_->GetVisible());
|
||||
ASSERT_TRUE(header_->eol_notice_for_test());
|
||||
EXPECT_TRUE(header_->eol_notice_for_test()->GetVisible());
|
||||
EolNoticeQuickSettingsView* eol_notice = header_->eol_notice_for_test();
|
||||
ASSERT_TRUE(eol_notice);
|
||||
EXPECT_TRUE(eol_notice->GetVisible());
|
||||
// The label is shorter due to the two-column layout.
|
||||
EXPECT_EQ(eol_notice->GetText(), u"Updates ended");
|
||||
|
||||
LeftClickOn(header_->eol_notice_for_test());
|
||||
LeftClickOn(eol_notice);
|
||||
EXPECT_EQ(1, GetSystemTrayClient()->show_eol_info_count());
|
||||
}
|
||||
|
||||
|
@ -34,6 +34,8 @@ namespace ash {
|
||||
|
||||
namespace {
|
||||
|
||||
constexpr float kButtonStrokeWidth = 1.0f;
|
||||
|
||||
SkColor GetBackgroundColor() {
|
||||
DCHECK(!features::IsQsRevampEnabled());
|
||||
return DarkLightModeController::Get()->IsDarkModeEnabled()
|
||||
@ -66,14 +68,15 @@ EolNoticeQuickSettingsView::EolNoticeQuickSettingsView()
|
||||
|
||||
Shell::Get()->system_tray_model()->client()->ShowEolInfoPage();
|
||||
}),
|
||||
l10n_util::GetStringUTF16(IDS_ASH_QUICK_SETTINGS_BUBBLE_EOL_NOTICE)) {
|
||||
l10n_util::GetStringUTF16(IDS_ASH_QUICK_SETTINGS_BUBBLE_EOL_NOTICE)),
|
||||
is_qs_revamp_enabled_(features::IsQsRevampEnabled()) {
|
||||
SetID(VIEW_ID_QS_EOL_NOTICE_BUTTON);
|
||||
SetMinSize(gfx::Size(0, GetButtonHeight()));
|
||||
SetImageLabelSpacing(2);
|
||||
SetImageLabelSpacing(is_qs_revamp_enabled_ ? 8 : 2);
|
||||
|
||||
views::InkDrop::Get(this)->SetMode(views::InkDropHost::InkDropMode::ON);
|
||||
|
||||
if (features::IsQsRevampEnabled()) {
|
||||
if (is_qs_revamp_enabled_) {
|
||||
views::InkDrop::Get(this)->SetBaseColorId(kColorAshInkDropOpaqueColor);
|
||||
SetImageModel(views::Button::STATE_NORMAL,
|
||||
ui::ImageModel::FromVectorIcon(
|
||||
@ -94,7 +97,7 @@ EolNoticeQuickSettingsView::EolNoticeQuickSettingsView()
|
||||
|
||||
SetInstallFocusRingOnFocus(true);
|
||||
views::FocusRing::Get(this)->SetColorId(
|
||||
features::IsQsRevampEnabled()
|
||||
is_qs_revamp_enabled_
|
||||
? static_cast<ui::ColorId>(cros_tokens::kCrosSysFocusRing)
|
||||
: ui::kColorAshFocusRing);
|
||||
|
||||
@ -103,10 +106,16 @@ EolNoticeQuickSettingsView::EolNoticeQuickSettingsView()
|
||||
|
||||
EolNoticeQuickSettingsView::~EolNoticeQuickSettingsView() = default;
|
||||
|
||||
void EolNoticeQuickSettingsView::SetNarrowLayout(bool narrow) {
|
||||
label()->SetText(l10n_util::GetStringUTF16(
|
||||
narrow ? IDS_ASH_QUICK_SETTINGS_BUBBLE_EOL_NOTICE_SHORT
|
||||
: IDS_ASH_QUICK_SETTINGS_BUBBLE_EOL_NOTICE));
|
||||
}
|
||||
|
||||
void EolNoticeQuickSettingsView::OnThemeChanged() {
|
||||
views::LabelButton::OnThemeChanged();
|
||||
|
||||
if (!features::IsQsRevampEnabled()) {
|
||||
if (!is_qs_revamp_enabled_) {
|
||||
const SkColor bg_color = GetBackgroundColor();
|
||||
views::InkDrop::Get(this)->SetBaseColor(bg_color);
|
||||
|
||||
@ -120,18 +129,20 @@ void EolNoticeQuickSettingsView::OnThemeChanged() {
|
||||
|
||||
void EolNoticeQuickSettingsView::PaintButtonContents(gfx::Canvas* canvas) {
|
||||
cc::PaintFlags flags;
|
||||
if (features::IsQsRevampEnabled()) {
|
||||
gfx::RectF bounds(GetLocalBounds());
|
||||
if (is_qs_revamp_enabled_) {
|
||||
flags.setColor(
|
||||
GetColorProvider()->GetColor(cros_tokens::kCrosSysSeparator));
|
||||
flags.setStyle(cc::PaintFlags::kStroke_Style);
|
||||
flags.setStrokeWidth(kButtonStrokeWidth);
|
||||
bounds.Inset(kButtonStrokeWidth / 2.0f);
|
||||
} else {
|
||||
flags.setColor(GetBackgroundColor());
|
||||
flags.setStyle(cc::PaintFlags::kFill_Style);
|
||||
}
|
||||
flags.setAntiAlias(true);
|
||||
canvas->DrawPath(
|
||||
SkPath().addRoundRect(gfx::RectToSkRect(GetLocalBounds()), 16, 16),
|
||||
flags);
|
||||
canvas->DrawPath(SkPath().addRoundRect(gfx::RectFToSkRect(bounds), 16, 16),
|
||||
flags);
|
||||
}
|
||||
|
||||
} // namespace ash
|
||||
|
@ -5,6 +5,7 @@
|
||||
#ifndef ASH_SYSTEM_UPDATE_EOL_NOTICE_QUICK_SETTINGS_VIEW_H_
|
||||
#define ASH_SYSTEM_UPDATE_EOL_NOTICE_QUICK_SETTINGS_VIEW_H_
|
||||
|
||||
#include "ash/ash_export.h"
|
||||
#include "ui/views/controls/button/label_button.h"
|
||||
|
||||
namespace ash {
|
||||
@ -12,7 +13,7 @@ namespace ash {
|
||||
// Label button shown in the quick settings when the device has reached end of
|
||||
// life. Clicking the label will request a page with more info about device end
|
||||
// of life to be opened.
|
||||
class EolNoticeQuickSettingsView : public views::LabelButton {
|
||||
class ASH_EXPORT EolNoticeQuickSettingsView : public views::LabelButton {
|
||||
public:
|
||||
EolNoticeQuickSettingsView();
|
||||
~EolNoticeQuickSettingsView() override;
|
||||
@ -21,9 +22,15 @@ class EolNoticeQuickSettingsView : public views::LabelButton {
|
||||
EolNoticeQuickSettingsView& operator=(const EolNoticeQuickSettingsView&) =
|
||||
delete;
|
||||
|
||||
// Sets a special "narrow" layout which uses a shorter string label.
|
||||
void SetNarrowLayout(bool narrow);
|
||||
|
||||
// views::LabelButton:
|
||||
void PaintButtonContents(gfx::Canvas* canvas) override;
|
||||
void OnThemeChanged() override;
|
||||
|
||||
private:
|
||||
const bool is_qs_revamp_enabled_;
|
||||
};
|
||||
|
||||
} // namespace ash
|
||||
|
@ -0,0 +1,77 @@
|
||||
// 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.
|
||||
|
||||
#include <memory>
|
||||
|
||||
#include "ash/constants/ash_features.h"
|
||||
#include "ash/system/update/eol_notice_quick_settings_view.h"
|
||||
#include "ash/test/ash_test_base.h"
|
||||
#include "ash/test/pixel/ash_pixel_differ.h"
|
||||
#include "ash/test/pixel/ash_pixel_test_init_params.h"
|
||||
#include "base/test/scoped_feature_list.h"
|
||||
#include "chromeos/constants/chromeos_features.h"
|
||||
#include "ui/chromeos/styles/cros_tokens_color_mappings.h"
|
||||
#include "ui/gfx/geometry/size.h"
|
||||
#include "ui/views/background.h"
|
||||
#include "ui/views/layout/box_layout.h"
|
||||
#include "ui/views/layout/box_layout_view.h"
|
||||
#include "ui/views/view.h"
|
||||
#include "ui/views/widget/widget.h"
|
||||
|
||||
namespace ash {
|
||||
namespace {
|
||||
|
||||
// Pixel tests for the EOL quick settings view.
|
||||
class EolNoticeQuickSettingsViewPixelTest : public AshTestBase {
|
||||
public:
|
||||
EolNoticeQuickSettingsViewPixelTest() {
|
||||
feature_list_.InitWithFeatures(
|
||||
{features::kQsRevamp, chromeos::features::kJelly}, {});
|
||||
}
|
||||
|
||||
void SetUp() override {
|
||||
AshTestBase::SetUp();
|
||||
|
||||
widget_ = CreateFramelessTestWidget();
|
||||
widget_->SetFullscreen(true);
|
||||
auto* contents =
|
||||
widget_->SetContentsView(std::make_unique<views::BoxLayoutView>());
|
||||
contents->SetMainAxisAlignment(
|
||||
views::BoxLayout::MainAxisAlignment::kCenter);
|
||||
contents->SetCrossAxisAlignment(
|
||||
views::BoxLayout::CrossAxisAlignment::kCenter);
|
||||
// The stroke color has transparency, so set a background color so it
|
||||
// renders like in production.
|
||||
contents->SetBackground(views::CreateThemedSolidBackground(
|
||||
cros_tokens::kCrosSysSystemBaseElevated));
|
||||
}
|
||||
|
||||
void TearDown() override {
|
||||
widget_.reset();
|
||||
AshTestBase::TearDown();
|
||||
}
|
||||
|
||||
// AshTestBase:
|
||||
absl::optional<pixel_test::InitParams> CreatePixelTestInitParams()
|
||||
const override {
|
||||
return pixel_test::InitParams();
|
||||
}
|
||||
|
||||
base::test::ScopedFeatureList feature_list_;
|
||||
std::unique_ptr<views::Widget> widget_;
|
||||
};
|
||||
|
||||
TEST_F(EolNoticeQuickSettingsViewPixelTest, Basics) {
|
||||
auto* view = widget_->GetContentsView()->AddChildView(
|
||||
std::make_unique<EolNoticeQuickSettingsView>());
|
||||
// Use the default size from go/cros-quick-settings-spec
|
||||
view->SetPreferredSize(gfx::Size(408, 32));
|
||||
|
||||
EXPECT_TRUE(GetPixelDiffer()->CompareUiComponentsOnPrimaryScreen(
|
||||
"check_view",
|
||||
/*revision_number=*/0, widget_.get()));
|
||||
}
|
||||
|
||||
} // namespace
|
||||
} // namespace ash
|
Reference in New Issue
Block a user