Oobe: create Polymer object and migrate to LoginScreenBehavior for EnableDebuggingScreen

Bug: 1145539
Change-Id: I27926823cbda91fcbec67ccd9828dd440c4d43d8
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2517529
Commit-Queue: Yunke Zhou <yunkez@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: Denis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#826154}

chrome/browser/chromeos/login/screens/welcome_screen_browsertest.cc

@@ -22,6 +22,7 @@
 #include "chrome/browser/chromeos/login/test/test_predicate_waiter.h"
 #include "chrome/browser/chromeos/login/ui/login_display_host.h"
 #include "chrome/browser/chromeos/login/wizard_controller.h"
+#include "chrome/browser/ui/webui/chromeos/login/enable_debugging_screen_handler.h"
 #include "chrome/browser/ui/webui/chromeos/login/oobe_ui.h"
 #include "chrome/browser/ui/webui/chromeos/login/welcome_screen_handler.h"
 #include "chrome/common/pref_names.h"
@@ -418,10 +419,15 @@ IN_PROC_BROWSER_TEST_F(WelcomeScreenSystemDevModeBrowserTest,
   test::OobeJS().ClickOnPath(
       {"connect", "welcomeScreen", "enableDebuggingLink"});
 
-  test::OobeJS().ExpectVisiblePath({"debugging-remove-protection-button"});
-  test::OobeJS().ExpectVisiblePath({"debugging-cancel-button"});
-  test::OobeJS().ExpectVisiblePath({"enable-debugging-help-link"});
-  test::OobeJS().ClickOnPath({"debugging-cancel-button"});
+  test::OobeJS()
+      .CreateVisibilityWaiter(true, {"debugging", "removeProtectionDialog"})
+      ->Wait();
+  test::OobeJS().ExpectVisiblePath(
+      {"debugging", "removeProtectionProceedButton"});
+  test::OobeJS().ExpectVisiblePath(
+      {"debugging", "removeProtectionCancelButton"});
+  test::OobeJS().ExpectVisiblePath({"debugging", "help-link"});
+  test::OobeJS().ClickOnPath({"debugging", "removeProtectionCancelButton"});
 }
 
 class WelcomeScreenTimezone : public WelcomeScreenBrowserTest {

chrome/browser/resources/chromeos/login/BUILD.gn

@@ -42,6 +42,7 @@ js_type_check("closure_compile_local") {
     ":oobe_network",
     ":oobe_reset",
     ":oobe_screen_assistant_optin_flow",
+    ":oobe_screen_enable_debugging",
     ":oobe_select",
     ":oobe_supervision_transition",
     ":oobe_update",
@@ -266,6 +267,14 @@ js_library("oobe_screen_assistant_optin_flow") {
   ]
 }
 
+js_library("oobe_screen_enable_debugging") {
+  deps = [
+    "components:login_screen_behavior",
+    "components:multi_step_behavior",
+    "components/oobe_i18n_behavior:oobe_i18n_behavior",
+  ]
+}
+
 js_library("oobe_supervision_transition") {
   deps = [
     "components:login_screen_behavior",

chrome/browser/resources/chromeos/login/components/multi_step_behavior.js

@@ -105,13 +105,13 @@ var MultiStepBehavior = {
     if (this.uiStep) {
       if (this.uiStep == step)
         return;
-      for (let element of this.stepElements_[this.uiStep]) {
+      for (let element of this.stepElements_[this.uiStep] || []) {
         cr.ui.login.invokePolymerMethod(element, 'onBeforeHide');
         element.hidden = true;
       }
     }
     this.uiStep = step;
-    for (let element of this.stepElements_[this.uiStep]) {
+    for (let element of this.stepElements_[this.uiStep] || []) {
       cr.ui.login.invokePolymerMethod(element, 'onBeforeShow');
       element.hidden = false;
       // Trigger show() if element is an oobe-dialog

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

@@ -181,38 +181,6 @@ cr.define('cr.ui.login.debug', function() {
     {
       id: 'debugging',
       kind: ScreenKind.OTHER,
-      states: [
-        {
-          id: 'remove-protection',
-          trigger: (screen) => {
-            screen.updateState(1);
-          },
-        },
-        {
-          id: 'setup',
-          trigger: (screen) => {
-            screen.updateState(2);
-          },
-        },
-        {
-          id: 'wait',
-          trigger: (screen) => {
-            screen.updateState(3);
-          },
-        },
-        {
-          id: 'done',
-          trigger: (screen) => {
-            screen.updateState(4);
-          },
-        },
-        {
-          id: 'error',
-          trigger: (screen) => {
-            screen.updateState(-1);
-          },
-        },
-      ],
     },
     {
       id: 'demo-preferences',

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

@@ -52,7 +52,6 @@
 <script src="chrome://oobe/debug.js"></script>
 <script src="chrome://oobe/strings.js"></script>
 <link rel="stylesheet" href="api_keys_notice.css">
-<link rel="stylesheet" href="oobe_screen_enable_debugging.css">
 <link rel="stylesheet" href="oobe_screen_autolaunch.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
 <link rel="stylesheet" href="screen_app_launch_splash.css">

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

@@ -57,7 +57,6 @@
 <script src="chrome://oobe/strings.js"></script>
 <link rel="stylesheet" href="api_keys_notice.css">
 
-<link rel="stylesheet" href="oobe_screen_enable_debugging.css">
 <link rel="stylesheet" href="oobe_screen_autolaunch.css">
 <link rel="stylesheet" href="oobe_screen_auto_enrollment_check.css">
 

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

@@ -31,7 +31,6 @@
 
 // <include src="../../gaia_auth_host/authenticator.js">
 // <include src="oobe_screen_auto_enrollment_check.js">
-// <include src="oobe_screen_enable_debugging.js">
 // <include src="multi_tap_detector.js">
 // <include src="web_view_helper.js">
 
@@ -44,7 +43,6 @@ cr.define('cr.ui.Oobe', function() {
     initialize() {
       cr.ui.login.DisplayManager.initialize();
       login.AutoEnrollmentCheckScreen.register();
-      login.EnableDebuggingScreen.register();
       login.AutolaunchScreen.register();
       login.AccountPickerScreen.register();
       login.ErrorMessageScreen.register();

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

-/* Copyright 2013 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. */
-
-#debugging {
-  display: flex;
-  flex-flow: column;
-  font-size: 16px;
-  min-height: 423px;
-  text-align: center;
-  width: 722px;
-}
-
-#debugging .step-contents {
-  margin: 80px 100px;
-}
-
-#debugging.setup-view .step-contents {
-  margin-bottom: 40px;
-  margin-top: 40px;
-}
-
-#debugging.done-view .step-contents,
-#debugging.error-view .step-contents {
-  margin: 80px;
-}
-
-#debugging #debugging-controls {
-  height: auto;
-  justify-content: center;
-  margin-top: auto;
-  padding-bottom: 80px;
-  padding-right: 0;
-  position: static;
-}
-
-#debugging.setup-view #debugging-controls {
-  padding-bottom: 40px;
-}
-
-#debugging-controls button {
-  margin: 0 10px;
-}
-
-#enable-debugging-icon {
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 100%;
-}
-
-.remove-protection-view #enable-debugging-icon,
-.setup-view #enable-debugging-icon,
-.wait-view #enable-debugging-icon {
-  background-image: url(chrome://theme/IDR_RESET_WARNING);
-  background-size: 39px 72px;
-  height: 72px;
-}
-
-.done-view #enable-debugging-icon {
-  background-image: url(chrome://theme/IDR_ENABLE_DEBUGGING_SUCCESS);
-  background-size: 86px 66px;
-  height: 66px;
-}
-
-.error-view #enable-debugging-icon {
-  background-image: url(chrome://theme/IDR_ENABLE_DEBUGGING_FAILURE);
-  background-size: 66px;
-  height: 66px;
-}
-
-/** Preload icons */
-#enable-debugging-icon::after {
-  content:
-    url(chrome://theme/IDR_RESET_WARNING)
-    url(chrome://theme/IDR_ENABLE_DEBUGGING_SUCCESS)
-    url(chrome://theme/IDR_ENABLE_DEBUGGING_FAILURE);
-  display: none;
-}
-
-.enable-debugging-title {
-  color: #464646;
-  font-size: 24px;
-  font-weight: bold;
-  padding: 30px 45px;
-}
-
-.enable-debugging-text {
-  color: #606060;
-}
-
-#debugging #debugging-warning-details,
-#debugging #debugging-done-msg {
-  padding: 20px 40px 0;
-}
-
-#debugging #enable-debugging-wait-msg {
-  display: inline-block;
-  padding: 25px 0;
-  vertical-align: middle;
-}
-
-#enable-debugging-passwords {
-  font-style: italic;
-  margin-bottom: 10px;
-  margin-top: 20px;
-}
-
-#enable-debugging-password-note {
-  color: #c6c6c6;
-  font-size: 12px;
-}
-
-.enable-debugging-password-input {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  margin: 10px 0;
-  min-height: 0;
-}
-
-.enable-debugging-password-input input[type=password] {
-  margin: 5px 0;
-  width: 300px;
-}
-
-.enable-debugging-password-input
-    input[type=password]::-webkit-input-placeholder {
-  font-size: 14px;
-  font-style: normal;
-}
-
-.done-specific,
-.error-specific,
-.remove-protection-specific,
-.setup-specific,
-.wait-specific {
-  display: none;
-}
-
-.error-view .error-specific,
-.done-view .done-specific,
-.remove-protection-view .remove-protection-specific,
-.setup-view .setup-specific,
-.wait-view .wait-specific {
-  display: block;
-}
-
-#debugging-remove-protection-button,
-#debugging-enable-button,
-#debugging-cancel-button,
-#debugging-ok-button {
-  display: none;
-}
-
-.remove-protection-view #debugging-remove-protection-button,
-.remove-protection-view #debugging-cancel-button,
-.setup-view #debugging-enable-button,
-.setup-view #debugging-cancel-button,
-.done-view #debugging-ok-button,
-.error-view #debugging-ok-button {
-  display: inline-block;
-}
-

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

@@ -6,146 +6,128 @@
  * @fileoverview Enable developer features screen implementation.
  */
 
-login.createScreen('EnableDebuggingScreen', 'debugging', function() {
-  return {
-
-    /* Possible UI states of the enable debugging screen. */
-    UI_STATE:
-        {ERROR: -1, NONE: 0, REMOVE_PROTECTION: 1, SETUP: 2, WAIT: 3, DONE: 4},
-
-    EXTERNAL_API: ['updateState'],
-
-    /** @override */
-    decorate() {
-      $('enable-debugging-help-link')
-          .addEventListener('click', function(event) {
-            chrome.send('enableDebuggingOnLearnMore');
-          });
-
-      var password = $('enable-debugging-password');
-      var password2 = $('enable-debugging-password2');
-      password.addEventListener('input', this.onPasswordChanged_.bind(this));
-      password2.addEventListener('input', this.onPasswordChanged_.bind(this));
-      password.placeholder =
-          loadTimeData.getString('enableDebuggingPasswordLabel');
-      password2.placeholder =
-          loadTimeData.getString('enableDebuggingConfirmPasswordLabel');
-    },
+'use strict';
 
-    /**
-     * Buttons in oobe wizard's button strip.
-     * @type {array} Array of Buttons.
-     */
-    get buttons() {
-      var buttons = [];
-      var rootfsRemoveButton = this.ownerDocument.createElement('button');
-      rootfsRemoveButton.id = 'debugging-remove-protection-button';
-      rootfsRemoveButton.textContent =
-          loadTimeData.getString('enableDebuggingRemoveButton');
-      rootfsRemoveButton.addEventListener('click', function(e) {
-        chrome.send('enableDebuggingOnRemoveRootFSProtection');
-        e.stopPropagation();
-      });
-      buttons.push(rootfsRemoveButton);
-
-      var enableButton = this.ownerDocument.createElement('button');
-      enableButton.id = 'debugging-enable-button';
-      enableButton.textContent =
-          loadTimeData.getString('enableDebuggingEnableButton');
-      enableButton.addEventListener('click', function(e) {
-        chrome.send(
-            'enableDebuggingOnSetup', [$('enable-debugging-password').value]);
-        e.stopPropagation();
-      });
-      buttons.push(enableButton);
-
-      var cancelButton = this.ownerDocument.createElement('button');
-      cancelButton.id = 'debugging-cancel-button';
-      cancelButton.textContent =
-          loadTimeData.getString('enableDebuggingCancelButton');
-      cancelButton.addEventListener('click', function(e) {
-        chrome.send('enableDebuggingOnCancel');
-        e.stopPropagation();
-      });
-      buttons.push(cancelButton);
-
-      var okButton = this.ownerDocument.createElement('button');
-      okButton.id = 'debugging-ok-button';
-      okButton.textContent = loadTimeData.getString('enableDebuggingOKButton');
-      okButton.addEventListener('click', function(e) {
-        chrome.send('enableDebuggingOnDone');
-        e.stopPropagation();
-      });
-      buttons.push(okButton);
-
-      return buttons;
-    },
+(function() {
 
+/**
+ * Possible UI states of the enable debugging screen.
+ * These values must be kept in sync with EnableDebuggingScreenHandler::UIState
+ * in C++ code and the order of the enum must be the same.
+ * @enum {string}
+ */
+const UI_STATE = {
+  ERROR: 'error',
+  NONE: 'none',
+  REMOVE_PROTECTION: 'remove-protection',
+  SETUP: 'setup',
+  WAIT: 'wait',
+  DONE: 'done',
+};
+
+Polymer({
+  is: 'oobe-debugging',
+
+  behaviors: [
+    OobeI18nBehavior,
+    LoginScreenBehavior,
+    MultiStepBehavior,
+  ],
+
+  EXTERNAL_API: ['updateState'],
+
+  properties: {
     /**
-     * Returns a control which should receive an initial focus.
+     * Current value of password input field.
      */
-    get defaultControl() {
-      if (this.state_ == this.UI_STATE.REMOVE_PROTECTION)
-        return $('debugging-remove-protection-button');
-      else if (this.state_ == this.UI_STATE.SETUP)
-        return $('enable-debugging-password');
-      else if (
-          this.state_ == this.UI_STATE.DONE ||
-          this.state_ == this.UI_STATE.ERROR) {
-        return $('debugging-ok-button');
-      }
-
-      return $('debugging-cancel-button');
-    },
+    password_: {type: String, value: ''},
 
     /**
-     * Cancels the enable debugging screen and drops the user back to the
-     * network settings.
+     * Current value of repeat password input field.
      */
-    cancel() {
-      chrome.send('enableDebuggingOnCancel');
-    },
+    passwordRepeat_: {type: String, value: ''},
 
     /**
-     * Event handler that is invoked just before the screen in shown.
-     * @param {Object} data Screen init payload.
+     * Whether password input fields are matching.
      */
-    onBeforeShow(data) {
-      this.setDialogView_(this.UI_STATE.NONE);
+    passwordsMatch_: {
+      type: Boolean,
+      computed: 'computePasswordsMatch_(password_, passwordRepeat_)',
     },
+  },
+
+  ready() {
+    this.initializeLoginScreen('EnableDebuggingScreen', {
+      resetAllowed: false,
+    });
+  },
+
+  defaultUIStep() {
+    return UI_STATE.NONE;
+  },
+
+  UI_STEPS: UI_STATE,
+
+  /**
+   * Returns a control which should receive an initial focus.
+   */
+  get defaultControl() {
+    if (this.uiStep == UI_STATE.REMOVE_PROTECTION)
+      return this.$.removeProtectionProceedButton;
+    else if (this.uiStep == UI_STATE.SETUP)
+      return this.$.password;
+    else if (this.uiStep == UI_STATE.DONE)
+      return this.$.okButton;
+    else if (this.uiStep == UI_STATE.ERROR)
+      return this.$.errorOkButton;
+  },
+
+  /**
+   * Cancels the enable debugging screen and drops the user back to the
+   * network settings.
+   */
+  cancel() {
+    chrome.send('enableDebuggingOnCancel');
+  },
+
+  /**
+   * Update UI for corresponding state of the screen.
+   * @param {number} state
+   * @suppress {missingProperties}
+   */
+  updateState(state) {
+    // Use `state + 1` as index to locate the corresponding UI_STATE
+    this.setUIStep(Object.values(UI_STATE)[state + 1]);
+
+    if (this.defaultControl)
+      this.defaultControl.focus();
 
-    onPasswordChanged_() {
-      var enableButton = $('debugging-enable-button');
-      var password = $('enable-debugging-password');
-      var password2 = $('enable-debugging-password2');
-      var pwd = password.value;
-      var pwd2 = password2.value;
-      enableButton.disabled =
-          !((pwd.length == 0 && pwd2.length == 0) ||
-            (pwd == pwd2 && pwd.length >= 4));
-    },
+    if (Oobe.getInstance().currentScreen === this)
+      Oobe.getInstance().updateScreenSize(this);
+  },
 
-    /**
-     * Sets css style for corresponding state of the screen.
-     * @param {number} state.
-     * @private
-     */
-    setDialogView_(state) {
-      this.state_ = state;
-      this.classList.toggle(
-          'remove-protection-view', state == this.UI_STATE.REMOVE_PROTECTION);
-      this.classList.toggle('setup-view', state == this.UI_STATE.SETUP);
-      this.classList.toggle('wait-view', state == this.UI_STATE.WAIT);
-      this.classList.toggle('done-view', state == this.UI_STATE.DONE);
-      this.classList.toggle('error-view', state == this.UI_STATE.ERROR);
-      this.defaultControl.focus();
+  computePasswordsMatch_(password, password2) {
+    return (password.length == 0 && password2.length == 0) ||
+        (password == password2 && password.length >= 4);
+  },
 
-      if (Oobe.getInstance().currentScreen === this)
-        Oobe.getInstance().updateScreenSize(this);
-    },
+  onHelpLinkClicked_() {
+    chrome.send('enableDebuggingOnLearnMore');
+  },
+
+  onRemoveButtonClicked_() {
+    chrome.send('enableDebuggingOnRemoveRootFSProtection');
+  },
+
+  onEnableButtonClicked_() {
+    chrome.send('enableDebuggingOnSetup', [this.password_]);
+    this.password_ = '';
+    this.passwordRepeat_ = '';
+  },
+
+  onOKButtonClicked_() {
+    chrome.send('enableDebuggingOnDone');
+  },
 
-    updateState(state) {
-      this.setDialogView_(state);
-    }
-  };
 });
+})();

chrome/browser/resources/chromeos/login/structure/components_oobe.html

@@ -6,6 +6,7 @@
 
 <include src="../oobe_hid_detection.html">
 <include src="../oobe_i18n_dropdown.html">
+<include src="../oobe_screen_enable_debugging.html">
 <include src="../oobe_welcome_dialog.html">
 <include src="../oobe_welcome.html">
 <include src="../oobe_network.html">

chrome/browser/resources/chromeos/login/structure/components_oobe.js

@@ -4,6 +4,7 @@
 
 // <include src="../oobe_hid_detection.js">
 // <include src="../oobe_i18n_dropdown.js">
+// <include src="../oobe_screen_enable_debugging.js">
 // <include src="../oobe_welcome_dialog.js">
 // <include src="../oobe_welcome.js">
 // <include src="../oobe_network.js">

chrome/browser/resources/chromeos/login/structure/screens_oobe.html

@@ -9,7 +9,7 @@
 </oobe-welcome-element>
 <hid-detection-element id="hid-detection" class="step hidden">
 </hid-detection-element>
-<include src="../oobe_screen_enable_debugging.html">
+<oobe-debugging id="debugging" class="step hidden" hidden></oobe-debugging>
 <demo-setup-element id="demo-setup" class="step hidden" hidden>
 </demo-setup-element>
 <oobe-network-element id="network-selection" class="step hidden" hidden>