Various UI tweaks

The largest is that all 3 dialogs are now modal -
this gives them a black background and makes it hard to mess
with things behind it (although ChromeOS doesn't seem to be
perfect at modal dialogs).

And, 2 of the dialogs no longer have a title bar / x button.
These 2 are the urgent password expiry notification,
and the confirm password change dialog.

Both of these dialogs are also changed in line with the latest
UI spec.

The other dialog, the hosted password change dialog,
still needs more work.

The screenshots of these changes are visible internally here:
http://go/insessionpwchange-screenshots

Bug: 930109
Change-Id: I1712e93a1fa924e7729cd837606398662c2067ff
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1715344
Commit-Queue: A Olsen <olsen@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#680378}

chrome/browser/resources/chromeos/password_change/confirm_password_change.html

@@ -22,15 +22,31 @@
     <template>
       <style>
         ::part(dialog) {
-          /* We don't show the dialogs border using CSS since we show this
-          dialog inside a system dialog - we don't want two borders. */
-          border-radius: 0;
+          /* The HTML dialog should fill the entire system dialog. */
           height: 100%;
           width: 100%;
         }
 
         [slot='title'] {
-          padding-top: 0;
+          color: black;
+          font-family: Roboto, sans-serif;
+          font-size: 15px;
+          padding: 24px 24px 16px;
+        }
+
+        [slot='body'] {
+          color: rgb(20, 21, 24);
+          font-family: Roboto, sans-serif;
+          font-size: 13px;
+          padding: 0 48px 0 24px;
+        }
+
+        [slot='button-container'] {
+          bottom: 16px;
+          box-sizing: border-box;
+          padding: 0 16px;
+          position: fixed;
+          width: 100%;
         }
 
         .label {

chrome/browser/resources/chromeos/password_change/urgent_password_expiry_notification.html

@@ -21,33 +21,37 @@
     <template>
       <style>
         ::part(dialog) {
-          /* We don't show the dialogs border using CSS since we show this
-          dialog inside a system dialog - we don't want two borders. */
-          border-radius: 0;
+          /* The HTML dialog should fill the entire system dialog. */
           height: 100%;
           width: 100%;
         }
 
         [slot='title'] {
-          color: var(--google-grey-800);
-          font-size: 24px;
-          padding: 16px 48px;
+          color: rgb(20, 21, 25);
+          font-family: Google Sans, sans-serif;
+          font-size: 28px;
+          padding: 64px 64px 8px;
         }
 
         #title-icon {
-          --iron-icon-fill-color: var(--google-grey-800);
+          --iron-icon-fill-color: rgb(20, 21, 25);
+          height: 32px;
           padding-bottom: 24px;
+          width: 32px;
         }
 
         [slot='body'] {
-          padding: 0 48px;
+          color: rgb(21, 21, 21);
+          font-family: Roboto, sans-serif;
+          font-size: 13px;
+          padding: 0 64px;
         }
 
         [slot='button-container'] {
-          bottom: 0;
+          bottom: 32px;
           box-sizing: border-box;
-          padding: 32px 48px;
-          position: absolute;
+          padding: 0 32px;
+          position: fixed;
           width: 100%;
         }
       </style>

chrome/browser/ui/webui/chromeos/in_session_password_change/password_change_ui.cc

@@ -79,7 +79,7 @@ constexpr int kMaxPasswordChangeDialogHeight = 640;
 // TODO(https://crbug.com/930109): Change these numbers depending on what is
 // shown in the dialog.
 constexpr int kMaxConfirmPasswordChangeDialogWidth = 520;
-constexpr int kMaxConfirmPasswordChangeDialogHeight = 390;
+constexpr int kMaxConfirmPasswordChangeDialogHeight = 380;
 
 constexpr int kMaxNotificationDialogWidth = 768;
 constexpr int kMaxNotificationDialogHeight = 640;
@@ -119,6 +119,10 @@ void PasswordChangeDialog::GetDialogSize(gfx::Size* size) const {
                            kMaxPasswordChangeDialogHeight);
 }
 
+ui::ModalType PasswordChangeDialog::GetDialogModalType() const {
+  return ui::ModalType::MODAL_TYPE_SYSTEM;
+}
+
 // static
 void PasswordChangeDialog::Show(Profile* profile) {
   DCHECK_CURRENTLY_ON(content::BrowserThread::UI);
@@ -213,6 +217,15 @@ std::string ConfirmPasswordChangeDialog::GetDialogArgs() const {
   return data;
 }
 
+void ConfirmPasswordChangeDialog::AdjustWidgetInitParams(
+    views::Widget::InitParams* params) {
+  params->type = views::Widget::InitParams::TYPE_WINDOW_FRAMELESS;
+}
+
+ui::ModalType ConfirmPasswordChangeDialog::GetDialogModalType() const {
+  return ui::ModalType::MODAL_TYPE_SYSTEM;
+}
+
 ConfirmPasswordChangeUI::ConfirmPasswordChangeUI(content::WebUI* web_ui)
     : ui::WebDialogUI(web_ui) {
   Profile* profile = Profile::FromWebUI(web_ui);
@@ -267,6 +280,16 @@ void UrgentPasswordExpiryNotificationDialog::GetDialogSize(
                            kMaxNotificationDialogHeight);
 }
 
+void UrgentPasswordExpiryNotificationDialog::AdjustWidgetInitParams(
+    views::Widget::InitParams* params) {
+  params->type = views::Widget::InitParams::TYPE_WINDOW_FRAMELESS;
+}
+
+ui::ModalType UrgentPasswordExpiryNotificationDialog::GetDialogModalType()
+    const {
+  return ui::ModalType::MODAL_TYPE_SYSTEM;
+}
+
 // static
 void UrgentPasswordExpiryNotificationDialog::Show() {
   DCHECK_CURRENTLY_ON(content::BrowserThread::UI);

chrome/browser/ui/webui/chromeos/in_session_password_change/password_change_ui.h

@@ -26,6 +26,7 @@ class PasswordChangeDialog : public SystemWebDialogDelegate {
 
   // ui::WebDialogDelegate:
   void GetDialogSize(gfx::Size* size) const override;
+  ui::ModalType GetDialogModalType() const override;
 
  private:
   DISALLOW_COPY_AND_ASSIGN(PasswordChangeDialog);
@@ -58,6 +59,8 @@ class ConfirmPasswordChangeDialog : public SystemWebDialogDelegate {
   // ui::WebDialogDelegate:
   void GetDialogSize(gfx::Size* size) const override;
   std::string GetDialogArgs() const override;
+  void AdjustWidgetInitParams(views::Widget::InitParams* params) override;
+  ui::ModalType GetDialogModalType() const override;
 
  private:
   std::string scraped_old_password_;
@@ -89,6 +92,8 @@ class UrgentPasswordExpiryNotificationDialog : public SystemWebDialogDelegate {
 
   // ui::WebDialogDelegate:
   void GetDialogSize(gfx::Size* size) const override;
+  void AdjustWidgetInitParams(views::Widget::InitParams* params) override;
+  ui::ModalType GetDialogModalType() const override;
 
  private:
   DISALLOW_COPY_AND_ASSIGN(UrgentPasswordExpiryNotificationDialog);