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

   1 // Copyright (c) 2014 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview Enable developer features screen implementation.
   7  */
   8
   9 login.createScreen('EnableDebuggingScreen', 'debugging', function() {
  10   return {
  11
  12     /* Possible UI states of the enable debugging screen. */
  13     UI_STATE: {
  14       ERROR: -1,
  15       NONE: 0,
  16       REMOVE_PROTECTION: 1,
  17       SETUP: 2,
  18       WAIT: 3,
  19       DONE: 4
  20     },
  21
  22     EXTERNAL_API: [
  23       'updateState'
  24     ],
  25
  26     /** @override */
  27     decorate: function() {
  28       $('enable-debugging-help-link').addEventListener('click',
  29         function(event) {
  30           chrome.send('enableDebuggingOnLearnMore');
  31       });
  32
  33       var password = $('enable-debugging-password');
  34       var password2 = $('enable-debugging-password2');
  35       password.addEventListener('input', this.onPasswordChanged_.bind(this));
  36       password2.addEventListener('input', this.onPasswordChanged_.bind(this));
  37       password.placeholder =
  38           loadTimeData.getString('enableDebuggingPasswordLabel');
  39       password2.placeholder =
  40           loadTimeData.getString('enableDebuggingConfirmPasswordLabel');
  41     },
  42
  43     /**
  44      * Header text of the screen.
  45      * @type {string}
  46      */
  47     get header() {
  48       return loadTimeData.getString('enableDebuggingScreenTitle');
  49     },
  50
  51     /**
  52      * Buttons in oobe wizard's button strip.
  53      * @type {array} Array of Buttons.
  54      */
  55     get buttons() {
  56       var buttons = [];
  57       var rootfsRemoveButton = this.ownerDocument.createElement('button');
  58       rootfsRemoveButton.id = 'debugging-remove-protection-button';
  59       rootfsRemoveButton.textContent =
  60           loadTimeData.getString('enableDebuggingRemoveButton');
  61       rootfsRemoveButton.addEventListener('click', function(e) {
  62         chrome.send('enableDebuggingOnRemoveRootFSProtection');
  63         e.stopPropagation();
  64       });
  65       buttons.push(rootfsRemoveButton);
  66
  67       var enableButton = this.ownerDocument.createElement('button');
  68       enableButton.id = 'debugging-enable-button';
  69       enableButton.textContent =
  70           loadTimeData.getString('enableDebuggingEnableButton');
  71       enableButton.addEventListener('click', function(e) {
  72         chrome.send('enableDebuggingOnSetup',
  73                     [$('enable-debugging-password').value]);
  74         e.stopPropagation();
  75       });
  76       buttons.push(enableButton);
  77
  78       var cancelButton = this.ownerDocument.createElement('button');
  79       cancelButton.id = 'debugging-cancel-button';
  80       cancelButton.textContent =
  81           loadTimeData.getString('enableDebuggingCancelButton');
  82       cancelButton.addEventListener('click', function(e) {
  83         chrome.send('enableDebuggingOnCancel');
  84         e.stopPropagation();
  85       });
  86       buttons.push(cancelButton);
  87
  88       var okButton = this.ownerDocument.createElement('button');
  89       okButton.id = 'debugging-ok-button';
  90       okButton.textContent =
  91           loadTimeData.getString('enableDebuggingOKButton');
  92       okButton.addEventListener('click', function(e) {
  93         chrome.send('enableDebuggingOnDone');
  94         e.stopPropagation();
  95       });
  96       buttons.push(okButton);
  97
  98       return buttons;
  99     },
 100
 101     /**
 102      * Returns a control which should receive an initial focus.
 103      */
 104     get defaultControl() {
 105       if (this.state_ == this.UI_STATE.REMOVE_PROTECTION)
 106         return $('debugging-remove-protection-button');
 107       else if (this.state_ == this.UI_STATE.SETUP)
 108         return $('enable-debugging-password');
 109       else if (this.state_ == this.UI_STATE.DONE ||
 110                this.state_ == this.UI_STATE.ERROR) {
 111         return $('debugging-ok-button');
 112       }
 113
 114       return $('debugging-cancel-button');
 115     },
 116
 117     /**
 118      * Cancels the enable debugging screen and drops the user back to the
 119      * network settings.
 120      */
 121     cancel: function() {
 122       chrome.send('enableDebuggingOnCancel');
 123     },
 124
 125     /**
 126      * Event handler that is invoked just before the screen in shown.
 127      * @param {Object} data Screen init payload.
 128      */
 129     onBeforeShow: function(data) {
 130       this.setDialogView_(this.UI_STATE.NONE);
 131     },
 132
 133     onPasswordChanged_: function() {
 134       var enableButton = $('debugging-enable-button');
 135       var password = $('enable-debugging-password');
 136       var password2 = $('enable-debugging-password2');
 137       var pwd = password.value;
 138       var pwd2 = password2.value;
 139       enableButton.disabled = !((pwd.length == 0 && pwd2.length == 0) ||
 140           (pwd == pwd2 && pwd.length >= 4));
 141     },
 142
 143     /**
 144       * Sets css style for corresponding state of the screen.
 145       * @param {number} state.
 146       * @private
 147       */
 148     setDialogView_: function(state) {
 149       this.state_ = state;
 150       this.classList.toggle('remove-protection-view',
 151           state == this.UI_STATE.REMOVE_PROTECTION);
 152       this.classList.toggle('setup-view', state == this.UI_STATE.SETUP);
 153       this.classList.toggle('wait-view', state == this.UI_STATE.WAIT);
 154       this.classList.toggle('done-view', state == this.UI_STATE.DONE);
 155       this.classList.toggle('error-view', state == this.UI_STATE.ERROR);
 156       this.defaultControl.focus();
 157
 158       if (Oobe.getInstance().currentScreen === this)
 159         Oobe.getInstance().updateScreenSize(this);
 160     },
 161
 162     updateState: function(state) {
 163       this.setDialogView_(state);
 164     }
 165   };
 166 });