Update easy unlock settings UI.

chrome/browser/resources/options/easy_unlock_turn_off_overlay.js

+// Copyright 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.
+
+cr.define('options', function() {
+  var Page = cr.ui.pageManager.Page;
+  var PageManager = cr.ui.pageManager.PageManager;
+
+  /**
+   * EasyUnlockTurnOffOverlay class
+   * Encapsulated handling of the Factory Reset confirmation overlay page.
+   * @class
+   */
+  function EasyUnlockTurnOffOverlay() {
+    Page.call(this, 'easyUnlockTurnOffOverlay',
+              loadTimeData.getString('easyUnlockTurnOffTitle'),
+              'easy-unlock-turn-off-overlay');
+  }
+
+  cr.addSingletonGetter(EasyUnlockTurnOffOverlay);
+
+  EasyUnlockTurnOffOverlay.prototype = {
+    // Inherit EasyUnlockTurnOffOverlay from Page.
+    __proto__: Page.prototype,
+
+    /** @override */
+    initializePage: function() {
+      Page.prototype.initializePage.call(this);
+
+      $('easy-unlock-turn-off-dismiss').onclick = function(event) {
+        EasyUnlockTurnOffOverlay.dismiss();
+      };
+      $('easy-unlock-turn-off-confirm').onclick = function(event) {
+        $('easy-unlock-turn-off-confirm').disabled = true;
+        this.setSpinnerVisible_(true);
+
+        // TODO(xiyuan): Wire this up.
+        // chrome.send('turnOffEasyUnlock');
+      }.bind(this);
+    },
+
+    /** @override */
+    didShowPage: function() {
+      if (navigator.onLine) {
+        this.setUpTurnOffUI_();
+      } else {
+        this.setUpOfflineUI_();
+      }
+    },
+
+    /**
+     * Returns the button strip element.
+     * @return {HTMLDivElement} The container div of action buttons.
+     */
+    get buttonStrip() {
+      return this.pageDiv.querySelector('.button-strip');
+    },
+
+    /**
+     * Set visibility of action buttons in button strip.
+     * @private
+     */
+    setActionButtonsVisible_: function(visible) {
+      var buttons = this.buttonStrip.querySelectorAll('button');
+      for (var i = 0; i < buttons.length; ++i) {
+        buttons[i].hidden = !visible;
+      }
+    },
+
+    /**
+     * Set visibility of spinner.
+     * @private
+     */
+    setSpinnerVisible_: function(visible) {
+      $('easy-unlock-turn-off-spinner').hidden = !visible;
+    },
+
+    /**
+     * Set up UI for showing offline message.
+     * @private
+     */
+    setUpOfflineUI_: function() {
+      $('easy-unlock-turn-off-title').textContent =
+          loadTimeData.getString('easyUnlockTurnOffOfflineTitle');
+      $('easy-unlock-turn-off-messagee').textContent =
+          loadTimeData.getString('easyUnlockTurnOffOfflineMessage');
+
+      this.setActionButtonsVisible_(false);
+      this.setSpinnerVisible_(false);
+    },
+
+    /**
+     * Set up UI for turning off Easy Unlock.
+     * @private
+     */
+    setUpTurnOffUI_: function() {
+      $('easy-unlock-turn-off-title').textContent =
+          loadTimeData.getString('easyUnlockTurnOffTitle');
+      $('easy-unlock-turn-off-messagee').textContent =
+          loadTimeData.getString('easyUnlockTurnOffDescription');
+      $('easy-unlock-turn-off-confirm').textContent =
+          loadTimeData.getString('easyUnlockTurnOffButton');
+
+      this.setActionButtonsVisible_(true);
+      this.setSpinnerVisible_(false);
+      $('easy-unlock-turn-off-confirm').disabled = false;
+      $('easy-unlock-turn-off-dismiss').hidden = false;
+    },
+
+    /**
+     * Set up UI for showing server error.
+     * @private
+     */
+    setUpServerErrorUI_: function() {
+      $('easy-unlock-turn-off-title').textContent =
+          loadTimeData.getString('easyUnlockTurnOffErrorTitle');
+      $('easy-unlock-turn-off-messagee').textContent =
+          loadTimeData.getString('easyUnlockTurnOffErrorMessage');
+      $('easy-unlock-turn-off-confirm').textContent =
+          loadTimeData.getString('easyUnlockTurnOffRetryButton');
+
+      this.setActionButtonsVisible_(true);
+      this.setSpinnerVisible_(false);
+      $('easy-unlock-turn-off-confirm').disabled = false;
+      $('easy-unlock-turn-off-dismiss').hidden = true;
+    },
+  };
+
+  EasyUnlockTurnOffOverlay.dismiss = function() {
+    PageManager.closeOverlay();
+  };
+
+  // Export
+  return {
+    EasyUnlockTurnOffOverlay: EasyUnlockTurnOffOverlay
+  };
+});