Update TPM error message to use OOBE dialog

Bug: 1007873
Change-Id: I60e4c7972d5e261b666f745017747d1ad8eda043
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1834221
Commit-Queue: Thomas Tellier <tellier@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#712805}

chrome/browser/chromeos/login/existing_user_controller_browsertest.cc

@@ -1147,8 +1147,9 @@ IN_PROC_BROWSER_TEST_F(ExistingUserControllerAuthFailureTest, TpmError) {
   EXPECT_EQ(0, FakePowerManagerClient::Get()->num_request_restart_calls());
 
   test::OobeJS().ExpectVisiblePath({"tpm-error-message"});
-  test::OobeJS().ExpectVisiblePath({"reboot-button"});
-  test::OobeJS().Evaluate("document.getElementById('reboot-button').click()");
+  test::OobeJS().ExpectVisiblePath({"tpm-restart-button"});
+  test::OobeJS().Evaluate(
+      "document.getElementById('tpm-restart-button').click()");
 
   EXPECT_EQ(1, FakePowerManagerClient::Get()->num_request_restart_calls());
 }

chrome/browser/resources/chromeos/login/screen_tpm_error.css

@@ -2,15 +2,6 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
-#tpm-error-message {
-  min-width: 650px;
+oobe-dialog > iron-icon.warning {
+  --iron-icon-fill-color: rgb(219, 68, 55);
 }
-
-#oobe.tpm-error-message #step-logo {
-  z-index: 1;
-}
-
-#tpm-error-message-controls {
-  text-align: end;
-}
-

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

 <div id="tpm-error-message" class="step faded hidden" hidden>
-  <div class="step-contents">
-    <div class="error-header">
-      <img alt class="error-icon" src="chrome://theme/IDR_FATAL_ERROR">
-      <div id="tpm-error-title" class="error-title"
-          i18n-content="errorTpmFailureTitle"></div>
+  <oobe-dialog id="tpm-error-dialog" role="dialog" has-buttons>
+    <iron-icon slot="oobe-icon" icon="cr:warning" class="warning">
+    </iron-icon>
+    <h1 slot="title" i18n-content="errorTpmFailureTitle"></h1>
+    <div slot="subtitle" i18n-content="errorTpmFailureReboot"></div>
+    <div slot="bottom-buttons" class="layout horizontal end-justified">
+      <oobe-text-button id="tpm-restart-button" inverse>
+        <div id="tmp-error-reboot-text"
+            i18n-content="errorTpmFailureRebootButton"></div>
+      </oobe-text-button>
     </div>
-    <div class="error-body">
-      <div id="tmp-error-reboot-text" class="error-message-paragraph"
-          i18n-content="errorTpmFailureReboot"></div>
-      <div id="tpm-error-message-controls"
-          class="error-message-paragraph"></div>
-    </div>
-  </div>
+  </oobe-dialog>
 </div>

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

@@ -10,19 +10,11 @@ login.createScreen('TPMErrorMessageScreen', 'tpm-error-message', function() {
   return {
     EXTERNAL_API: ['show'],
 
-    /**
-     * Buttons in oobe wizard's button strip.
-     * @type {array} Array of Buttons.
-     */
-    get buttons() {
-      var rebootButton = this.ownerDocument.createElement('button');
-      rebootButton.id = 'reboot-button';
-      rebootButton.textContent =
-          loadTimeData.getString('errorTpmFailureRebootButton');
-      rebootButton.addEventListener('click', function() {
+    /** @override */
+    decorate: function() {
+      $('tpm-restart-button').addEventListener('click', function(e) {
         chrome.send('rebootSystem');
       });
-      return [rebootButton];
     },
 
     /**