oobe new layout: demo-preferences-element

Bug: 1159889
Change-Id: I54ea83b1599f6a732e910f2034c67ccfd038c426
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2616350Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Aleksandrov <raleksandrov@google.com>
Commit-Queue: Danila Kuzmin <dkuzmin@google.com>
Cr-Commit-Position: refs/heads/master@{#844863}

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

@@ -284,8 +284,8 @@ class DemoSetupTestBase : public OobeBaseTest {
                                    const std::string& button_selector,
                                    JSExecution execution) {
     const std::string query = base::StrCat(
-        {ScreenToContentQuery(screen), ".$$('oobe-dialog').querySelector('",
-         button_selector, "').click();"});
+        {ScreenToContentQuery(screen), ScreenToOobeDialogType(screen),
+         ".querySelector('", button_selector, "').click();"});
     switch (execution) {
       case JSExecution::kAsync:
         test::ExecuteOobeJSAsync(query);
@@ -298,6 +298,16 @@ class DemoSetupTestBase : public OobeBaseTest {
     }
   }
 
+  // During transition to new layout in OOBE we use oobe-adaptive-dialog instead
+  // of oobe-dialog. This is a helper function for this transition.
+  std::string ScreenToOobeDialogType(OobeScreenId screen) {
+    if (screen == DemoPreferencesScreenView::kScreenId) {
+      return ".$$('oobe-adaptive-dialog')";
+    } else {
+      return ".$$('oobe-dialog')";
+    }
+  }
+
   // Simulates `button` click on a `dialog` of the specified OOBE `screen`.
   // Can be used for screens that consists of multiple oobe-dialog elements.
   void ClickScreenDialogButton(OobeScreenId screen,
@@ -659,17 +669,17 @@ IN_PROC_BROWSER_TEST_F(DemoSetupArcSupportedTest,
     ASSERT_NE(kCountryCodeToNameMap.end(), it);
     const std::string query = base::StrCat(
         {ScreenToContentQuery(DemoPreferencesScreenView::kScreenId),
-         ".$$('oobe-dialog').querySelector('#countrySelect').$$('option[value="
-         "\"",
-         country_code, "\"]').innerHTML"});
+         ScreenToOobeDialogType(DemoPreferencesScreenView::kScreenId),
+         ".querySelector('#countrySelect').$$('option[value=\"", country_code,
+         "\"]').innerHTML"});
     EXPECT_EQ(it->second, test::OobeJS().GetString(query));
   }
 
   // Select France as the Demo Mode country.
   const std::string select_country = base::StrCat(
       {ScreenToContentQuery(DemoPreferencesScreenView::kScreenId),
-       ".$$('oobe-dialog').querySelector('#countrySelect').onSelected_('fr')"
-       ";"});
+       ScreenToOobeDialogType(DemoPreferencesScreenView::kScreenId),
+       ".querySelector('#countrySelect').onSelected_('fr');"});
   test::ExecuteOobeJSAsync(select_country);
 
   ClickOobeButton(DemoPreferencesScreenView::kScreenId, OobeButton::kText,

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

@@ -4,7 +4,7 @@
 
 <link rel="import" href="/components/common_styles.html">
 <link rel="import" href="/components/hd_iron_icon.html">
-<link rel="import" href="/components/oobe_dialog.html">
+<link rel="import" href="/components/oobe_adaptive_dialog.html">
 <link rel="import" href="/components/oobe_i18n_behavior.html">
 
 <dom-module id="demo-preferences-element">
@@ -26,13 +26,15 @@
         font-size: 13px;
       }
     </style>
-    <oobe-dialog id="demoPreferencesDialog" role="dialog" has-buttons
-        aria-label$="[[i18nDynamic(locale, 'demoPreferencesScreenTitle')]]"
-        title-key="demoPreferencesScreenTitle">
-      <hd-iron-icon slot="oobe-icon"
+    <oobe-adaptive-dialog id="demoPreferencesDialog" role="dialog"
+        aria-label$="[[i18nDynamic(locale, 'demoPreferencesScreenTitle')]]">
+      <hd-iron-icon slot="icon"
           icon1x="oobe-32:gear" icon2x="oobe-64:gear">
       </hd-iron-icon>
-      <div slot="footer" class="layout vertical">
+      <h1 slot="title">
+        [[i18nDynamic(locale, 'demoPreferencesScreenTitle')]]
+      </h1>
+      <div slot="content" class="layout vertical">
         <div id="languageDropdownContainer" class="flex layout center horizontal
             justified language-selection-entry">
           <div class="language-selection-title layout vertical
@@ -74,6 +76,6 @@
         <oobe-text-button id="nextButton" inverse on-click="onNextClicked_"
             text-key="demoPreferencesNextButtonLabel"></oobe-text-button>
       </div>
-    </oobe-dialog>
+    </oobe-adaptive-dialog>
   </template>
 </dom-module>