ash: Visual fixes for in-session auth dialog

Make these changes according to UI review:
1. Have both shadow and rouned corner. This is done by using
   views::BubbleBorder so that it looks closer to other such widgets,
   e.g. sharesheet.
2. Change primary text color to GoogleGrey900, secondary text color to
   GoogleGrey700.
3. Adjust vertical spacing after title, origin name prompt and PIN input
   field to match start screen spec.

Bug: b:156258540, b:144861739
Change-Id: Ie84ed82d6fed17c63d7dec49a18fa75f42599e25
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2523520Reviewed-by: Xiyuan Xia <xiyuan@chromium.org>
Commit-Queue: Yicheng Li <yichengli@chromium.org>
Cr-Commit-Position: refs/heads/master@{#825132}

ash/in_session_auth/auth_dialog_contents_view.cc

@@ -26,6 +26,7 @@
 #include "ui/base/resource/resource_bundle.h"
 #include "ui/gfx/paint_vector_icon.h"
 #include "ui/views/background.h"
+#include "ui/views/bubble/bubble_border.h"
 #include "ui/views/controls/button/md_text_button.h"
 #include "ui/views/controls/label.h"
 #include "ui/views/layout/box_layout.h"
@@ -34,16 +35,20 @@
 namespace ash {
 namespace {
 
-const int kContainerPreferredWidth = 340;
-const int kSpacingAfterAvatar = 18;
-const int kSpacingAfterTitle = 16;
+constexpr int kContainerPreferredWidth = 340;
 
-const int kBorderTopDp = 24;
-const int kBorderLeftDp = 24;
-const int kBorderBottomDp = 20;
-const int kBorderRightDp = 24;
+constexpr int kBorderTopDp = 24;
+constexpr int kBorderLeftDp = 24;
+constexpr int kBorderBottomDp = 20;
+constexpr int kBorderRightDp = 24;
+constexpr int kCornerRadius = 12;
 
-const int kTitleFontSizeDeltaDp = 4;
+constexpr int kTitleFontSizeDeltaDp = 4;
+
+constexpr int kSpacingAfterAvatar = 18;
+constexpr int kSpacingAfterTitle = 8;
+constexpr int kSpacingAfterOriginName = 32;
+constexpr int kSpacingAfterInputField = 16;
 
 constexpr int kAvatarSizeDp = 36;
 constexpr int kFingerprintIconSizeDp = 28;
@@ -60,7 +65,10 @@ constexpr base::TimeDelta kFingerprintFailedAnimationDuration =
 
 // 38% opacity.
 constexpr SkColor kDisabledFingerprintIconColor =
-    SkColorSetA(SK_ColorDKGRAY, 97);
+    SkColorSetA(gfx::kGoogleGrey900, 97);
+constexpr SkColor kBackgroundColor = SK_ColorWHITE;
+constexpr SkColor kTextColorSecondary = gfx::kGoogleGrey700;
+constexpr SkColor kTextColorPrimary = gfx::kGoogleGrey900;
 
 constexpr int kSpacingBeforeButtons = 32;
 
@@ -107,7 +115,7 @@ class AuthDialogContentsView::FingerprintView : public views::View {
     label_ = AddChildView(std::make_unique<FingerprintLabel>());
     label_->SetSubpixelRenderingEnabled(false);
     label_->SetAutoColorReadabilityEnabled(false);
-    label_->SetEnabledColor(SK_ColorDKGRAY);
+    label_->SetEnabledColor(kTextColorPrimary);
     label_->SetMultiLine(true);
     label_->SetFocusBehavior(FocusBehavior::ACCESSIBLE_ONLY);
 
@@ -209,7 +217,7 @@ class AuthDialogContentsView::FingerprintView : public views::View {
     const SkColor color =
         (state == FingerprintState::AVAILABLE_DEFAULT ||
                  state == FingerprintState::AVAILABLE_WITH_TOUCH_SENSOR_WARNING
-             ? SK_ColorDKGRAY
+             ? kTextColorPrimary
              : kDisabledFingerprintIconColor);
     switch (state) {
       case FingerprintState::UNAVAILABLE:
@@ -282,7 +290,7 @@ class AuthDialogContentsView::TitleLabel : public views::Label {
     base::string16 title =
         l10n_util::GetStringUTF16(IDS_ASH_IN_SESSION_AUTH_TITLE);
     SetText(title);
-    SetEnabledColor(SK_ColorBLACK);
+    SetEnabledColor(kTextColorPrimary);
     is_showing_error_ = false;
     SetAccessibleName(title);
   }
@@ -324,8 +332,14 @@ AuthDialogContentsView::AuthDialogContentsView(
   DCHECK(auth_methods_ & kAuthPassword);
 
   SetLayoutManager(std::make_unique<views::FillLayout>());
+  auto border = std::make_unique<views::BubbleBorder>(
+      views::BubbleBorder::FLOAT, views::BubbleBorder::BIG_SHADOW,
+      kBackgroundColor);
+  border->SetCornerRadius(kCornerRadius);
+  SetBackground(std::make_unique<views::BubbleBackground>(border.get()));
+  SetBorder(std::move(border));
+
   container_ = AddChildView(std::make_unique<NonAccessibleView>());
-  container_->SetBackground(views::CreateSolidBackground(SK_ColorWHITE));
   container_->SetBorder(views::CreateEmptyBorder(
       kBorderTopDp, kBorderLeftDp, kBorderBottomDp, kBorderRightDp));
 
@@ -342,7 +356,7 @@ AuthDialogContentsView::AuthDialogContentsView(
   AddTitleView();
   AddVerticalSpacing(kSpacingAfterTitle);
   AddOriginNameView();
-  AddVerticalSpacing(kSpacingAfterTitle);
+  AddVerticalSpacing(kSpacingAfterOriginName);
   if (auth_methods_ & kAuthPin) {
     if (LoginPinInputView::IsAutosubmitSupported(
             auth_metadata_.autosubmit_pin_length)) {
@@ -352,6 +366,7 @@ AuthDialogContentsView::AuthDialogContentsView(
       pin_autosubmit_on_ = false;
       AddPinTextInputView();
     }
+    AddVerticalSpacing(kSpacingAfterInputField);
     // PIN pad is always visible regardless of PIN autosubmit status.
     AddPinPadView();
   }
@@ -394,7 +409,7 @@ void AuthDialogContentsView::AddTitleView() {
 void AuthDialogContentsView::AddOriginNameView() {
   origin_name_view_ =
       container_->AddChildView(std::make_unique<views::Label>());
-  origin_name_view_->SetEnabledColor(SK_ColorBLACK);
+  origin_name_view_->SetEnabledColor(kTextColorSecondary);
   origin_name_view_->SetSubpixelRenderingEnabled(false);
   origin_name_view_->SetAutoColorReadabilityEnabled(false);
   origin_name_view_->SetFocusBehavior(FocusBehavior::ACCESSIBLE_ONLY);
@@ -531,7 +546,7 @@ void AuthDialogContentsView::AddActionButtonsView() {
                               base::Unretained(this)),
           l10n_util::GetStringUTF16(IDS_ASH_IN_SESSION_AUTH_HELP),
           views::style::CONTEXT_BUTTON));
-  help_button_->SetEnabledTextColors(SK_ColorDKGRAY);
+  help_button_->SetEnabledTextColors(kTextColorPrimary);
   action_view_container_->SetPreferredSize(
       gfx::Size(kContainerPreferredWidth, help_button_->height()));
 }

ash/in_session_auth/in_session_auth_dialog.cc

@@ -4,7 +4,6 @@
 
 #include "ash/in_session_auth/in_session_auth_dialog.h"
 
-#include "ash/public/cpp/rounded_corner_decorator.h"
 #include "base/command_line.h"
 #include "ui/aura/window.h"
 #include "ui/display/display.h"
@@ -18,7 +17,6 @@ namespace {
 // The top inset value is set such that the dialog overlaps with the browser
 // address bar, for anti-spoofing.
 constexpr int kTopInsetDp = 36;
-constexpr int kCornerRadius = 12;
 
 std::unique_ptr<views::Widget> CreateAuthDialogWidget(
     std::unique_ptr<views::View> contents_view,
@@ -26,12 +24,11 @@ std::unique_ptr<views::Widget> CreateAuthDialogWidget(
   views::Widget::InitParams params(
       views::Widget::InitParams::TYPE_WINDOW_FRAMELESS);
   params.ownership = views::Widget::InitParams::WIDGET_OWNS_NATIVE_WIDGET;
+  params.opacity = views::Widget::InitParams::WindowOpacity::kTranslucent;
   params.delegate = new views::WidgetDelegate();
   params.show_state = ui::SHOW_STATE_NORMAL;
   params.parent = parent;
   params.name = "AuthDialogWidget";
-  params.shadow_type = views::Widget::InitParams::ShadowType::kDrop;
-  params.shadow_elevation = 3;
 
   params.delegate->SetInitiallyFocusedView(contents_view.get());
   params.delegate->SetModalType(ui::MODAL_TYPE_NONE);
@@ -65,10 +62,6 @@ InSessionAuthDialog::InSessionAuthDialog(
                bottom_inset_dp);
   widget_->SetBounds(bounds);
 
-  aura::Window* window = widget_->GetNativeWindow();
-  rounded_corner_decorator_ = std::make_unique<RoundedCornerDecorator>(
-      window, window, window->layer(), kCornerRadius);
-
   widget_->Show();
 }
 

ash/in_session_auth/in_session_auth_dialog.h

@@ -20,8 +20,6 @@ class Widget;
 
 namespace ash {
 
-class RoundedCornerDecorator;
-
 // InSessionAuthDialog gets instantiated on every request to show
 // an authentication dialog, and gets destroyed when the request is
 // completed.
@@ -51,7 +49,6 @@ class InSessionAuthDialog {
   // Pointer to the contents view. Used to query and update the set of available
   // auth methods.
   const uint32_t auth_methods_;
-  std::unique_ptr<RoundedCornerDecorator> rounded_corner_decorator_;
 };
 
 }  // namespace ash

ash/login/ui/login_palette.cc

@@ -37,14 +37,14 @@ LoginPalette CreateDefaultLoginPalette() {
 
 LoginPalette CreateInSessionAuthPalette() {
   return LoginPalette(
-      {.password_text_color = SK_ColorDKGRAY,
-       .password_placeholder_text_color = SK_ColorDKGRAY,
+      {.password_text_color = gfx::kGoogleGrey900,
+       .password_placeholder_text_color = gfx::kGoogleGrey900,
        .password_background_color = SK_ColorTRANSPARENT,
-       .button_enabled_color = SK_ColorDKGRAY,
-       .button_annotation_color = SK_ColorDKGRAY,
-       .pin_ink_drop_highlight_color = SkColorSetA(SK_ColorDKGRAY, 0x0A),
-       .pin_ink_drop_ripple_color = SkColorSetA(SK_ColorDKGRAY, 0x0F),
-       .pin_input_text_color = SK_ColorDKGRAY});
+       .button_enabled_color = gfx::kGoogleGrey900,
+       .button_annotation_color = gfx::kGoogleGrey700,
+       .pin_ink_drop_highlight_color = SkColorSetA(gfx::kGoogleGrey900, 0x0A),
+       .pin_ink_drop_ripple_color = SkColorSetA(gfx::kGoogleGrey900, 0x0F),
+       .pin_input_text_color = gfx::kGoogleGrey900});
 }
 
 }  // namespace ash