Update the demo mode setup confirmation dialog to modern look & feel

Reuse Polymer tags used in other parts of the OOBE for consistency.

Bug: b:172390062
Change-Id: I8e9e4d522104890fc29536e07989a728d8835bdb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2534290
Commit-Queue: Silin Liu <silinliu@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Yves Arrouye <drcrash@chromium.org>
Cr-Commit-Position: refs/heads/master@{#830970}

chrome/browser/chromeos/login/demo_mode/demo_setup_browsertest.cc

@@ -67,10 +67,6 @@ namespace chromeos {
 
 namespace {
 
-constexpr char kIsConfirmationDialogHiddenQuery[] =
-    "!document.querySelector('.cr-dialog-container') || "
-    "!!document.querySelector('.cr-dialog-container').hidden";
-
 constexpr char kDefaultNetworkServicePath[] = "/service/eth1";
 constexpr char kDefaultNetworkName[] = "eth1";
 
@@ -164,8 +160,14 @@ class DemoSetupTestBase : public OobeBaseTest {
     return test::OobeJS().GetBool(query);
   }
 
-  bool IsConfirmationDialogShown() {
-    return !test::OobeJS().GetBool(kIsConfirmationDialogHiddenQuery);
+  void IsConfirmationDialogShown() {
+    test::OobeJS().ExpectHasAttribute(
+      "open", {"connect", "demoModeConfirmationDialog", "helpDialog"});
+  }
+
+  void IsConfirmationDialogHidden() {
+    test::OobeJS().ExpectHasNoAttribute(
+      "open", {"connect", "demoModeConfirmationDialog", "helpDialog"});
   }
 
   // TODO(michaelpg): Replace this with IsScreenDialogElementVisible, which is
@@ -258,11 +260,11 @@ class DemoSetupTestBase : public OobeBaseTest {
   }
 
   void ClickOkOnConfirmationDialog() {
-    test::ExecuteOobeJS("document.querySelector('.cr-dialog-ok').click();");
+    test::OobeJS().TapOnPath({"connect", "okButton"});
   }
 
   void ClickCancelOnConfirmationDialog() {
-    test::ExecuteOobeJS("document.querySelector('.cr-dialog-cancel').click();");
+    test::OobeJS().TapOnPath({"connect", "cancelButton"});
   }
 
   // Simulates `button` click on a specified OOBE `screen`. Can be used for
@@ -482,14 +484,13 @@ class DemoSetupArcSupportedTest : public DemoSetupTestBase {
 
 IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
                        ShowConfirmationDialogAndProceed) {
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   InvokeDemoModeWithAccelerator();
-  EXPECT_TRUE(IsConfirmationDialogShown());
+  IsConfirmationDialogShown();
 
   ClickOkOnConfirmationDialog();
 
-  WaitForJsCondition(kIsConfirmationDialogHiddenQuery);
   EXPECT_TRUE(IsScreenShown(DemoPreferencesScreenView::kScreenId));
 }
 
@@ -502,14 +503,14 @@ IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
 #endif
 IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
                        MAYBE_ShowConfirmationDialogAndCancel) {
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   InvokeDemoModeWithAccelerator();
-  EXPECT_TRUE(IsConfirmationDialogShown());
+  IsConfirmationDialogShown();
 
   ClickCancelOnConfirmationDialog();
+  IsConfirmationDialogHidden();
 
-  WaitForJsCondition(kIsConfirmationDialogHiddenQuery);
   EXPECT_FALSE(IsScreenShown(DemoPreferencesScreenView::kScreenId));
 }
 
@@ -522,10 +523,10 @@ IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
 IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest, MAYBE_InvokeWithTaps) {
   // Use fake time to avoid flakiness.
   SetFakeTimeForMultiTapDetector(base::Time::UnixEpoch());
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   MultiTapOobeContainer(10);
-  EXPECT_TRUE(IsConfirmationDialogShown());
+  IsConfirmationDialogShown();
 }
 
 // TODO(crbug.com/1150349): Flaky on ChromeOS ASAN.
@@ -541,10 +542,10 @@ IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
   // Use fake time to avoid flakiness.
   const base::Time kFakeTime = base::Time::UnixEpoch();
   SetFakeTimeForMultiTapDetector(kFakeTime);
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   MultiTapOobeContainer(5);
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   // Advance time to make interval in between taps longer than expected by
   // multi-tap gesture detector.
@@ -552,7 +553,7 @@ IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
                                  base::TimeDelta::FromMilliseconds(500));
 
   MultiTapOobeContainer(5);
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 }
 
 // TODO(crbug.com/1150349): Flaky on ChromeOS ASAN.
@@ -1341,19 +1342,19 @@ class DemoSetupArcUnsupportedTest : public DemoSetupTestBase {
 };
 
 IN_PROC_BROWSER_TEST_F(DemoSetupArcUnsupportedTest, DoNotStartWithAccelerator) {
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   InvokeDemoModeWithAccelerator();
 
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 }
 
 IN_PROC_BROWSER_TEST_F(DemoSetupArcUnsupportedTest, DoNotInvokeWithTaps) {
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 
   InvokeDemoModeWithTaps();
 
-  EXPECT_FALSE(IsConfirmationDialogShown());
+  IsConfirmationDialogHidden();
 }
 
 // Demo setup tests related to Force Re-Enrollment.

chrome/browser/resources/chromeos/login/oobe_welcome.html

@@ -290,5 +290,22 @@
             on-click="closeAdvancedOptionsSection_"></oobe-text-button>
       </div>
     </oobe-dialog>
+    <!-- Demo Mode confirmation dialog -->
+    <oobe-help-dialog id="demoModeConfirmationDialog">
+      <div slot="title">
+        [[i18nDynamic(locale, 'enableDemoModeDialogTitle')]]
+      </div>
+      <div slot="content">
+        [[i18nDynamic(locale, 'enableDemoModeDialogText')]]
+      </div>
+      <div slot="buttons">
+        <oobe-text-button id="cancelButton" border
+            on-click="onDemoModeDialogCancelTap_"
+            text-key="enableDemoModeDialogCancel"></oobe-text-button>
+        <oobe-text-button inverse on-click="onDemoModeDialogConfirmTap_"
+            id="okButton"
+            text-key="enableDemoModeDialogConfirm"></oobe-text-button>
+      </div>
+    </oobe-help-dialog>
   </template>
 </dom-module>

chrome/browser/resources/chromeos/login/oobe_welcome.js

@@ -408,23 +408,28 @@ Polymer({
     this.a11yStatus = data;
   },
 
+  /**
+   * On-tap event handler for demo mode confirmation dialog cancel button.
+   * @private
+   */
+  onDemoModeDialogCancelTap_() {
+    this.$.demoModeConfirmationDialog.hideDialog();
+  },
+
+  /**
+   * On-tap event handler for demo mode confirmation dialog confirm button.
+   * @private
+   */
+  onDemoModeDialogConfirmTap_() {
+    this.userActed('setupDemoMode');
+    this.$.demoModeConfirmationDialog.hideDialog();
+  },
+
   /**
    * Shows confirmation dialog for starting Demo mode
    */
   showDemoModeConfirmationDialog() {
-    if (!this.enableDemoModeDialog_) {
-      this.enableDemoModeDialog_ =
-          new cr.ui.dialogs.ConfirmDialog(document.body);
-      this.enableDemoModeDialog_.setOkLabel(
-          loadTimeData.getString('enableDemoModeDialogConfirm'));
-      this.enableDemoModeDialog_.setCancelLabel(
-          loadTimeData.getString('enableDemoModeDialogCancel'));
-    }
-    this.enableDemoModeDialog_.showWithTitle(
-        loadTimeData.getString('enableDemoModeDialogTitle'),
-        loadTimeData.getString('enableDemoModeDialogText'), () => {
-          this.userActed('setupDemoMode');
-        });
+    this.$.demoModeConfirmationDialog.showDialog();
   },
 
   onSetupDemoModeGesture() {