oobe-dialog: Add slot for back navigation.

Fixed: 1127303
Change-Id: I933f39e41be145aa85af41a632acf387c2be690f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2414174
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#824008}

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

@@ -115,11 +115,11 @@
           <p>[[i18nDynamic(locale, 'arcTermsOfServiceError')]]</p>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal">
+      <div slot="back-navigation">
         <oobe-back-button id="arcTosBackButton" hidden="[[!demoMode]]"
             on-click="onBack_"></oobe-back-button>
-        <div class="flex">
-        </div>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="arcTosRetryButton"
             inverse on-click="onRetry_"
             disabled="[[arcTosButtonsDisabled]]"

chrome/browser/resources/chromeos/login/components/oobe_dialog.css

@@ -128,10 +128,6 @@
   padding: unset;
 }
 
-#oobe-bottom ::slotted(*) {
-  width: 100%;
-}
-
 #oobe-icon-div ::slotted(hd-iron-icon),
 #oobe-icon-div ::slotted(iron-icon) {
   --iron-icon-height: 32px;

chrome/browser/resources/chromeos/login/components/oobe_dialog.html

@@ -107,7 +107,9 @@
         </div>
         <template is="dom-if" if="[[hasButtons]]">
           <div id="oobe-bottom" hideShadow$="[[hideShadow]]"
-              class="slot-container layout horizontal center">
+              class="slot-container layout horizontal">
+            <slot name="back-navigation"></slot>
+            <div class="flex"></div>
             <slot name="bottom-buttons"></slot>
           </div>
         </template>

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

@@ -51,8 +51,10 @@
           </oobe-i18n-dropdown>
         </div>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onBackClicked_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="nextButton" inverse on-click="onNextClicked_"
             text-key="demoPreferencesNextButtonLabel"></oobe-text-button>
       </div>

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

@@ -49,9 +49,11 @@
         <img srcset="images/alert-illustration_1x.svg 1x,
             images/alert-illustration_2x.svg 2x">
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button inverse on-click="onCloseClicked_"
             disabled="[[isPowerwashRequired_]]"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="retryButton" on-click="onRetryClicked_"
             text-key="demoSetupErrorScreenRetryButtonLabel"
             inverse hidden="[[isPowerwashRequired_]]">

chrome/browser/resources/chromeos/login/discover/modules/discover_module_pin_setup.html

@@ -109,11 +109,12 @@
             srcset="images/pin_illustration_1x.svg 1x,
                     images/pin_illustration_2x.svg 2x">
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
+      <div slot="back-navigation">
         <oobe-back-button
             hidden="[[isStepHidden_(step_, 'confirm')]]"
             on-click="onBackButton_"></oobe-back-button>
-        <div class="flex"></div>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="setupSkipButton" on-click="onSkipButton_"
             text-key="discoverPinSetupSkip"
             hidden="[[!isStepHidden_(step_, 'done')]]">

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

@@ -37,7 +37,7 @@
             </div>
             <webview id="authView" class="flex" name="authView"></webview>
           </div>
-          <div slot="bottom-buttons" class="layout horizontal start-justified">
+          <div slot="back-navigation">
             <oobe-back-button id="signinBackButton"
                 disabled="[[authenticatorDialogDisplayed_]]"
                 on-click="onBackButtonClicked_"></oobe-back-button>
@@ -92,16 +92,16 @@
                   'enrollmentErrorIllustrationTitle')]]"
               class="oobe-illustration">
         </div>
-        <div slot="bottom-buttons" class="layout horizontal end-justified">
+        <div slot="back-navigation">
+           <!-- BACK - Shown when the generic cancel button is hidden -->
+           <oobe-back-button id="errorCancelBackButton"
+              hidden$="[[isGenericCancel_(isAutoEnroll_, isForced_)]]"
+              on-click="cancel"></oobe-back-button>
+        </div>
+        <div slot="bottom-buttons">
           <!-- BOTTOM BUTTONS: GENERIC ERROR -->
           <div id="genericErrorBottomButtons"
               class="flex layout horizontal end-justified" for-step="error">
-
-            <!-- BACK - Shown when the generic cancel button is hidden -->
-            <oobe-back-button id="errorCancelBackButton"
-                hidden$="[[isGenericCancel_(isAutoEnroll_, isForced_)]]"
-                on-click="cancel" style="margin-right: auto"></oobe-back-button>
-
             <!-- GENERAL CANCEL BUTTON (SKIP / ENROLL MANUALLY) -->
             <oobe-text-button id="errorGenericCancelButton"
                 hidden$="[[!isGenericCancel_(isAutoEnroll_, isForced_)]]"

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

@@ -60,9 +60,11 @@
           </cr-lottie>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onBack_"
             id="gesture-home-back-button"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button on-click="onNext_" class="focus-on-show"
             id="gesture-home-next-button"></oobe-next-button>
       </div>
@@ -81,9 +83,11 @@
           </cr-lottie>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onBack_"
             id="gesture-overview-back-button"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button on-click="onNext_" class="focus-on-show"
             id="gesture-overview-next-button"></oobe-next-button>
       </div>
@@ -102,9 +106,11 @@
           </cr-lottie>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onBack_"
             id="gesture-back-back-button"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button on-click="onNext_" class="focus-on-show"
             id="gesture-back-next-button"></oobe-next-button>
       </div>

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

@@ -108,9 +108,11 @@
           </span>
         </oobe-a11y-option>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onToggleAccessibilityPage_"
             id="final-accessibility-back-button"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button on-click="onGetStarted_" class="focus-on-show"
             id="final-accessibility-next-button" inverse
             text-key="finalA11yPageDoneButtonTitle">

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

@@ -138,12 +138,13 @@
           </div>
         </div>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal" hidden="[[loading]]">
+      <div slot="back-navigation" hidden="[[loading]]">
         <oobe-back-button id="backToUnlockButton" on-click="onBackToUnlock_"
             disabled="[[disabled]]" hidden></oobe-back-button>
         <oobe-back-button id="backButton" on-click="onBackButton_"
             hidden="[[isDomainJoin]]"></oobe-back-button>
-        <div class="flex"></div>
+      </div>
+      <div slot="bottom-buttons" hidden="[[loading]]">
         <oobe-next-button id="nextButton" on-click="onSubmit_"
             disabled="[[disabled]]"></oobe-next-button>
       </div>

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

@@ -96,8 +96,10 @@
           </div>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onBackButtonClicked_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="next-button"
             on-click="onNextButtonClicked_"></oobe-next-button>
       </div>

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

@@ -67,11 +67,11 @@
           </div>
         </div>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal">
+      <div slot="back-navigation">
         <oobe-back-button
             on-click="onEulaBackButtonPressed_"></oobe-back-button>
-        <div class="flex">
-        </div>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="acceptButton" inverse on-click="eulaAccepted_"
             class="focus-on-show"
             disabled="[[acceptButtonDisabled]]"

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

@@ -26,8 +26,10 @@
             is-network-connected="{{isConnected_}}">
         </network-select-login>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button on-click="onBackClicked_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="nextButton" disabled="[[!isConnected_]]"
             on-click="onNextClicked_"></oobe-next-button>
       </div>

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

@@ -26,10 +26,12 @@
         hidden="[[!isInErrorState_(uiState)]]" has-buttons>
       <iron-icon icon="cr:warning" slot="oobe-icon" class="warning">
       </iron-icon>
-      <div slot="bottom-buttons" class="flex layout horizontal">
+      <div slot="back-navigation">
         <oobe-back-button id="errorBackButton"
             disabled="[[backButtonDisabled_]]"
             on-click="onTosBackButtonPressed_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="retryButton" inverse
             text-key="termsOfServiceRetryButton"
             disabled="[[retryButtonDisabled_]]"
@@ -67,9 +69,11 @@
             class="focus-on-show flex oobe-tos-webview">
         </webview>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal end-justified">
+      <div slot="back-navigation">
         <oobe-back-button id="backButton" disabled="[[backButtonDisabled_]]"
             on-click="onTosBackButtonPressed_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-text-button id="acceptButton" inverse
             text-key="termsOfServiceAcceptButton"
             disabled="[[acceptButtonDisabled_]]"

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

@@ -46,9 +46,11 @@
             srcset="images/1x/updating_1x.svg 1x,
                     images/2x/updating_2x.svg 2x">
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button id="cellular-permission-back" inverse
             on-click="onBackClicked_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="cellular-permission-next" inverse
             on-click="onNextClicked_"></oobe-next-button>
       </div>

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

@@ -125,7 +125,7 @@
           </a>
         </div>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal center">
+      <div slot="back-navigation">
         <oobe-welcome-secondary-button id="languageSelectionButton"
             icon1x="oobe-welcome-dialog-20:language"
             icon2x="oobe-welcome-dialog-40:language"
@@ -145,7 +145,8 @@
             icon2x="oobe-welcome-64:timezone"
             on-click="onTimezoneClicked_"
             hidden="[[!timezoneButtonVisible]]"></oobe-welcome-secondary-button>
-        <div class="flex"></div>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="welcomeNextButton"
             inverse on-click="onNextClicked_" text-key="welcomeNextButtonText">
         </oobe-text-button>

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

@@ -164,7 +164,7 @@
       </div>
       <div id="error-message-md-bottom-margin"></div>
     </div>
-    <div slot="bottom-buttons" class="flex layout horizontal">
+    <div slot="back-navigation">
       <oobe-back-button id="error-message-back-button"></oobe-back-button>
     </div>
   </oobe-dialog>

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

@@ -44,31 +44,28 @@
               name="signin-frame"></webview>
         </div>
       </div>
-      <div id="gaia-screen-navigation-buttons"
-          slot="bottom-buttons" class="relative flex layout horizontal">
-        <div id="buttons-container" class="flex layout horizontal center">
-          <oobe-back-button id="signin-back-button"
-              disabled="[[!navigationEnabled_]]"
-              on-click="onBackButtonClicked_">
-          </oobe-back-button>
-          <div class="flex">
-          </div>
-          <oobe-text-button id="secondary-action-button"
-              label-for-aria="[[secondaryActionButtonLabel_]]"
-              on-click="onSecondaryActionButtonClicked_"
-              hidden="[[!secondaryActionButtonLabel_]]"
-              disabled="[[!secondaryActionButtonEnabled_]]">
-            <div slot="text">[[secondaryActionButtonLabel_]]</div>
-          </oobe-text-button>
-          <oobe-text-button id="primary-action-button"
-              label-for-aria="[[primaryActionButtonLabel_]]"
-              on-click="onPrimaryActionButtonClicked_"
-              hidden="[[!primaryActionButtonLabel_]]"
-              disabled="[[!primaryActionButtonEnabled_]]"
-              inverse>
-              <div slot="text">[[primaryActionButtonLabel_]]</div>
-          </oobe-text-button>
-        </div>
+      <div slot="back-navigation">
+        <oobe-back-button id="signin-back-button"
+            disabled="[[!navigationEnabled_]]"
+            on-click="onBackButtonClicked_">
+        </oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
+        <oobe-text-button id="secondary-action-button"
+            label-for-aria="[[secondaryActionButtonLabel_]]"
+            on-click="onSecondaryActionButtonClicked_"
+            hidden="[[!secondaryActionButtonLabel_]]"
+            disabled="[[!secondaryActionButtonEnabled_]]">
+          <div slot="text">[[secondaryActionButtonLabel_]]</div>
+        </oobe-text-button>
+        <oobe-text-button id="primary-action-button"
+            label-for-aria="[[primaryActionButtonLabel_]]"
+            on-click="onPrimaryActionButtonClicked_"
+            hidden="[[!primaryActionButtonLabel_]]"
+            disabled="[[!primaryActionButtonEnabled_]]"
+            inverse>
+            <div slot="text">[[primaryActionButtonLabel_]]</div>
+        </oobe-text-button>
       </div>
     </oobe-dialog>
     <offline-gaia id="offline-gaia" class="gaia-dialog"
@@ -95,11 +92,11 @@
           </a>
         </p>
       </div>
-      <div slot="bottom-buttons" class="flex layout horizontal">
-        <oobe-back-button id="interstitial-back" on-click="onBackButtonClicked_">
-        </oobe-back-button>
-        <div class="flex">
-        </div>
+      <div slot="back-navigation">
+        <oobe-back-button id="interstitial-back"
+            on-click="onBackButtonClicked_"></oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button on-click="onSamlInterstitialNext_"
             id="interstitial-next" class="focus-on-show"></oobe-next-button>
       </div>

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

@@ -46,8 +46,11 @@
           </pin-keyboard>
         </div>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
-        <oobe-back-button id="back" on-click="onBackClicked_"></oobe-back-button>
+      <div slot="back-navigation">
+        <oobe-back-button id="back" on-click="onBackClicked_">
+        </oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="submit" on-click="onSubmit_"
             disabled="[[!canSubmit_]]"></oobe-next-button>
       </div>

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

@@ -105,11 +105,12 @@ found in the LICENSE file. -->
         </cr-radio-group>
         </div>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal">
+      <div slot="back-navigation">
         <oobe-back-button id="backButton" on-click="onBackClicked_"
             hidden="[[!isBackButtonVisible_]]">
         </oobe-back-button>
-        <div class="flex"></div>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="nextButton" class="focus-on-show"
             on-click="onNextClicked_">
         </oobe-next-button>
@@ -161,9 +162,11 @@ found in the LICENSE file. -->
           [[i18nDynamic(locale, 'childSignInParentNotificationText')]]
         </div>
       </div>
-      <div slot="bottom-buttons" class="layout horizontal justified">
+      <div slot="back-navigation">
         <oobe-back-button id="childBackButton" on-click="onBackClicked_">
         </oobe-back-button>
+      </div>
+      <div slot="bottom-buttons">
         <oobe-next-button id="childNextButton" on-click="onNextClicked_"
             disabled="[[!selectedSignInMethod]]">
         </oobe-next-button>