Added UI to enable debugging features on CrOS

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

+// Copyright (c) 2014 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.
+
+/**
+ * @fileoverview Enable developer features screen implementation.
+ */
+
+login.createScreen('EnableDebuggingScreen', 'debugging', function() {
+  return {
+
+    /* Possible UI states of the reset screen. */
+    UI_STATE: {
+      ERROR: -1,
+      REMOVE_PROTECTION: 1,
+      SETUP: 2,
+      WAIT: 3,
+      DONE: 4
+    },
+
+    EXTERNAL_API: [
+      'updateState'
+    ],
+
+    /** @override */
+    decorate: function() {
+      $('enable-debugging-help-link').addEventListener('click',
+        function(event) {
+          chrome.send('enableDebuggingOnLearnMore');
+      });
+
+      var password = $('enable-debugging-password');
+      var password2 = $('enable-debugging-password2');
+      $('enable-debugging-password').addEventListener(
+          'keyup', this.onPasswordChanged_.bind(this));

[xiyuan, 2014/10/30 03:52:08]

nit: There is a 'input' event for <input> and <textarea> that we can use. It is
fired after the value of the element is changed.

[zel, 2014/10/31 01:22:26]

Done.

+      $('enable-debugging-password2').addEventListener(
+          'keyup', this.onPasswordChanged_.bind(this));
+    },
+
+    /**
+     * Header text of the screen.
+     * @type {string}
+     */
+    get header() {
+      return loadTimeData.getString('enableDebuggingScreenTitle');
+    },
+
+    /**
+     * 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;
+    },
+
+    /**
+     * Returns a control which should receive an initial focus.
+     */
+    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)
+        return $('debugging-ok-button');
+
+      return $('debugging-cancel-button');
+    },
+
+    /**
+     * Cancels the reset and drops the user back to the login screen.
+     */
+    cancel: function() {
+      chrome.send('enableDebuggingOnCancel');
+    },
+
+    /**
+     * Event handler that is invoked just before the screen in shown.
+     * @param {Object} data Screen init payload.
+     */
+    onBeforeShow: function(data) {
+      if (data === undefined)
+        return;
+
+      if ('needsRootfsRemoval' in data && data['needsRootfsRemoval']) {
+        this.setDialogView_(this.UI_STATE.REMOVE_PROTECTION);
+      } else {
+        this.setDialogView_(this.UI_STATE.SETUP);
+      }
+
+      if (!('isOfficialBuild' in data && data['isOfficialBuild']))
+        $('enable-debugging-help-link').setAttribute('hidden', true);

[xiyuan, 2014/10/30 03:52:08]

nit: we can just do 
$('enable-debugging-help-link').hidden = true;

[zel, 2014/10/31 01:22:26]

Done.

+    },
+
+    onPasswordChanged_: function() {
+      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));
+    },
+
+    /**
+      * Sets css style for corresponding state of the screen.
+      * @param {string} state.

[xiyuan, 2014/10/30 03:52:08]

nit: |state| seems to be an number.

[zel, 2014/10/31 01:22:26]

Done.

+      * @private
+      */
+    setDialogView_: function(state) {
+      this.state_ = state;
+      this.classList.remove('remove-protection-view');
+      this.classList.remove('setup-view');
+      this.classList.remove('wait-view');
+      this.classList.remove('done-view');
+      if (state == this.UI_STATE.REMOVE_PROTECTION) {
+        this.classList.add('remove-protection-view');
+      } else if (state == this.UI_STATE.SETUP) {
+        this.classList.add('setup-view');
+      } else if (state == this.UI_STATE.DONE) {
+        this.classList.add('done-view');
+      } else if (state == this.UI_STATE.WAIT) {
+        this.classList.add('wait-view');
+      } else { // error
+        console.error('State ' + state + ' is not supported by setDialogView.');
+      }

[xiyuan, 2014/10/30 03:52:08]

nit: we could use classList.toggle to simplify a bit.

setDialogView_: function(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);
}

[zel, 2014/10/31 01:22:26]

neat. done.

+    },
+
+    updateState: function(state) {
+      this.setDialogView_(state);
+    }
+  };
+});