ChromeOS: Powerwash UI update

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

Index: chrome/browser/resources/chromeos/login/oobe_reset.html
diff --git a/chrome/browser/resources/chromeos/login/oobe_reset.html b/chrome/browser/resources/chromeos/login/oobe_reset.html
new file mode 100644
index 0000000000000000000000000000000000000000..ac49ff915135fda3558fc6d5c56c5873122b30b1
--- /dev/null
+++ b/chrome/browser/resources/chromeos/login/oobe_reset.html
@@ -0,0 +1,66 @@
+<!-- Copyright 2017 The Chromium Authors. All rights reserved.
+     Use of this source code is governed by a BSD-style license that can be
+     found in the LICENSE file. -->
+
+<dom-module id="oobe-reset-md">
+  <template>
+    <link rel="stylesheet" href="oobe_reset.css">
+    <link rel="stylesheet" href="oobe_dialog_parameters.css">
+    <link rel="stylesheet" href="chrome://resources/css/throbber.css">
+    <oobe-dialog id="resetDialog" role="dialog"

[Alexander Alekseev, 2017/04/08 10:36:18]

The dialog size should be 768x640 px.
This one is so large that it does not fit the screen.

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

It's changed to 768x640 px now.

+        i18n-values="aria-label:resetScreenAccessibleTitle" has-buttons>
+      <div class="header">
+        <img src="chrome://theme/IDR_RESET_ALERT"

[Alexander Alekseev, 2017/04/08 10:36:18]

If you place the icon here, the header will occupy too much space.
The icon should be passed to oobe-dialog element as oobe-icon.

[Alexander Alekseev, 2017/04/08 10:36:18]

OOBE/signin code is traditionally using embedded images.
I don't think we really need embedded images for this screen (probably your
approach is better because this screen is rarely used), but just FYI.

[Alexander Alekseev, 2017/04/08 10:36:18]

Please replace this icon with polymer icon icons:info .

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

Done. The info icon is black so it's different from the mock. Is it okay? If so
I'll delete the image in the assets directory.

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

Done.

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

Originally I used iron-icon, but by using <iron-icon src="..."> I couldn't make
it automatically show two resolutions, like <img src="..."> does.

[Wenzhao (Colin) Zang, 2017/04/11 20:42:53]

Now the icon is blue. And the illustration is embedded image now.

+            i18n-values="alt:resetScreenIconTitle">
+        <h1 class="title" i18n-content="resetWarningTitle"></h1>

[Alexander Alekseev, 2017/04/08 10:36:18]

We do not have precise specks for reset screen, but we usually use  13px Roboto
(see specks in go/cros-oobe).

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

Done.

+      </div>
+      <div class="footer">
+        <div hidden="[[isPowerwashHidden_(uiState_)]]"

[Alexander Alekseev, 2017/04/11 04:19:26]

We can (probably) make this more readable if we embed states to HTML.
You can actually put constants to polymer expressions:

hidden="[[!isState(uiState_,'powerwash-proposal-view')]]"

Then, you can define isState() as:

isState: function(actualState, state) {
  return state == actualState;
}

It looks like the only specific method left here would be isHelpLinkHidden_().

[Wenzhao (Colin) Zang, 2017/04/11 20:42:54]

Done.

+            i18n-content="resetPowerwashWarningDetails"></div>
+        <div hidden="[[isRollbackHidden_(uiState_)]]"
+            i18n-content="resetPowerwashRollbackWarningDetails"></div>
+        <div hidden="[[isDataWarningHidden_(uiState_)]]"
+            i18n-content="resetWarningDataDetails"></div>
+        <div hidden="[[isRestartHidden_(uiState_)]]"
+            i18n-content="resetRestartMessage"></div>
+        <a id="powerwash-help-link-md" href="#"

[Alexander Alekseev, 2017/04/08 10:36:18]

Are you sure that this link must be always displayed? (i.e. it is not a part of
some div about)

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

I mimicked the original oobe_screen_reset.html structure and the link is not
part of a div. The hidden state of the link is controlled by the
'is-official-build' flag sent from reset_screen.cc. The flag value is actually
never changed so the link is always hidden. 

+            hidden="[[isHelpLinkHidden_(uiState_, isOfficial_)]]"
+            on-tap="onLearnMoreTap_" i18n-content="learnMore"></a>
+        <div id="revert-promise-md" hidden="[[isRevertHidden_(uiState_)]]">
+          <div i18n-content="resetRevertPromise"></div>
+          <div id="reset-revert-spinner-md" class="throbber"></div>
+          <div id="reset-revert-spinner-message-md"
+              i18n-content="resetRevertSpinnerMessage">
+          </div>
+        </div>
+        <img id="reset-illustration"
+            src="chrome://theme/IDR_RESET_ILLUSTRATION"
+            i18n-values="alt:resetScreenIllustrationTitle">
+      </div>
+      <div class="bottom-buttons flex layout horizontal">
+        <div class="flex"></div>
+        <oobe-text-button hidden="[[isCancelHidden_(uiState_)]]" border
+            on-tap="onCancelTap_">
+          <div i18n-content="cancelButton"></div>
+        </oobe-text-button>
+        <div class="vertical-margin"

[Alexander Alekseev, 2017/04/08 10:36:18]

Is it just a spacer? Could margin CSS attribute be used (for button)?

[Wenzhao (Colin) Zang, 2017/04/10 20:37:35]

Done. Sorry I ignored this much simpler method.

+            hidden="[[isCancelHidden_(uiState_)]]"></div>
+        <oobe-text-button hidden="[[isRestartHidden_(uiState_)]]" inverse
+            on-tap="onRestartTap_">

[Alexander Alekseev, 2017/04/11 04:19:26]

I believe you can also replace all the on.*Tap_() functions with
userActed('action');

[Wenzhao (Colin) Zang, 2017/04/11 20:42:54]

I tried something like 
<oobe-text-button on-tap="userActed" action="cancel-reset">

but it doesn't work, it seems that oobe-text-button does not have 'action' field
as paper-button does.

[Alexander Alekseev, 2017/04/13 00:01:53]

You're right, my comment was incorrect. Just ignore it.

+          <div i18n-content="resetButtonRestart"></div>
+        </oobe-text-button>
+        <div class="vertical-margin"
+            hidden="[[isRestartHidden_(uiState_)]]"></div>
+        <oobe-text-button hidden="[[isDataWarningHidden_(uiState_)]]" inverse

[Alexander Alekseev, 2017/04/11 04:19:26]

Could you split this into two buttons?
I see that they share the same action, but they look different to user, so let's
make them separate.

[Wenzhao (Colin) Zang, 2017/04/11 20:42:54]

Done.

+            on-tap="onPowerwashTap_">
+          <div i18n-content="resetButtonPowerwashAndRollback"
+              hidden="[[isRollbackHidden_(uiState_)]]"></div>
+          <div i18n-content="resetButtonPowerwash"
+              hidden="[[isPowerwashHidden_(uiState_)]]"></div>
+        </oobe-text-button>
+        <div class="vertical-margin"
+            hidden="[[isWarningDataHidden_(uiState_)]]"></div>
+      </div>
+    </oobe-dialog>
+  </template>
+</dom-module>