Moved mobile activation into its own modal dialog

chrome/browser/resources/file_manager/js/dialogs.js

-// Copyright (c) 2011 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('cr.ui.dialogs', function() {
-
-  function BaseDialog(parentNode) {
-    this.parentNode_ = parentNode;
-    this.document_ = parentNode.ownerDocument;
-
-    // The DOM element from the dialog which should receive focus when the
-    // dialog is first displayed.
-    this.initialFocusElement_ = null;
-
-    // The DOM element from the parent which had focus before we were displayed,
-    // so we can restore it when we're hidden.
-    this.previousActiveElement_ = null;
-
-    this.initDom_();
-  }
-
-  /**
-   * Default text for Ok and Cancel buttons.
-   *
-   * Clients should override these with localized labels.

[rginda, 2011/10/15 16:53:46]

You're going to have to localize these labels from mobile_setup.js.

It probably makes sense to change the default labels to something like
"[LOCALIZE ME] Ok" and "[LOCALIZE ME] Cancel" to help others avoid missing this
in the future.

[zel, 2011/10/18 23:43:12]

Done - fixed file manager as well (wasn't localizing these properly).

-   */
-  BaseDialog.OK_LABEL = 'Ok';
-  BaseDialog.CANCEL_LABEL = 'Cancel';
-
-  /**
-   * Number of miliseconds animation is expected to take, plus some margin for
-   * error.
-   */
-  BaseDialog.ANIMATE_STABLE_DURATION = 500;
-
-  BaseDialog.prototype.initDom_ = function() {
-    var doc = this.document_;
-    this.container_ = doc.createElement('div');
-    this.container_.className = 'cr-dialog-container';
-    this.container_.addEventListener('keydown',
-                                     this.onContainerKeyDown_.bind(this));
-
-    this.frame_ = doc.createElement('div');
-    this.frame_.className = 'cr-dialog-frame';
-    this.container_.appendChild(this.frame_);
-
-    this.text_ = doc.createElement('div');
-    this.text_.className = 'cr-dialog-text';
-    this.frame_.appendChild(this.text_);
-
-    var buttons = doc.createElement('div');
-    buttons.className = 'cr-dialog-buttons';
-    this.frame_.appendChild(buttons);
-
-    this.cancelButton_ = doc.createElement('button');
-    this.cancelButton_.className = 'cr-dialog-cancel';
-    this.cancelButton_.textContent = BaseDialog.CANCEL_LABEL;
-    this.cancelButton_.addEventListener('click',
-                                        this.onCancelClick_.bind(this));
-    buttons.appendChild(this.cancelButton_);
-
-    this.okButton_ = doc.createElement('button');
-    this.okButton_.className = 'cr-dialog-ok';
-    this.okButton_.textContent = BaseDialog.OK_LABEL;
-    this.okButton_.addEventListener('click', this.onOkClick_.bind(this));
-    buttons.appendChild(this.okButton_);
-
-    this.initialFocusElement_ = this.okButton_;
-  };
-
-  BaseDialog.prototype.onOk_ = null;
-  BaseDialog.prototype.onCancel_ = null;
-
-  BaseDialog.prototype.onContainerKeyDown_ = function(event) {
-    switch (event.keyCode) {
-      case 13:  // Enter
-        if (!this.okButton_.disabled) {
-          this.onOkClick_(event);
-          event.preventDefault();
-        }
-        return;
-
-      case 27:  // Escape
-        if (!this.cancelButton_.disabled) {
-          this.onCancelClick_(event);
-          event.preventDefault();
-        }
-        return;
-    }
-  };
-
-  BaseDialog.prototype.onOkClick_ = function(event) {
-    this.hide();
-    if (this.onOk_)
-      this.onOk_();
-  };
-
-  BaseDialog.prototype.onCancelClick_ = function(event) {
-    this.hide();
-    if (this.onCancel_)
-      this.onCancel_();
-  };
-
-  BaseDialog.prototype.setOkLabel = function(label) {
-    this.okButton_.textContent = label;
-  };
-
-  BaseDialog.prototype.setCancelLabel = function(label) {
-    this.cancelButton_.textContent = label;
-  };
-
-  BaseDialog.prototype.show = function(message, onOk, onCancel, onShow) {
-    this.previousActiveElement_ = this.document_.activeElement;
-    this.parentNode_.appendChild(this.container_);
-
-    this.onOk_ = onOk;
-    this.onCancel_ = onCancel;
-
-    this.text_.textContent = message;
-
-    var top = (this.document_.body.clientHeight -
-               this.frame_.clientHeight) / 2;
-    var left = (this.document_.body.clientWidth -
-                this.frame_.clientWidth) / 2;
-
-    // Disable transitions so that we can set the initial position of the
-    // dialog right away.
-    this.frame_.style.webkitTransitionProperty = '';
-    this.frame_.style.top = (top - 50) + 'px';
-    this.frame_.style.left = (left + 10) + 'px';
-
-    var self = this;
-    setTimeout(function () {
-      // Note that we control the opacity of the *container*, but the top/left
-      // of the *frame*.
-      self.container_.style.opacity = '1';
-      self.frame_.style.top = top + 'px';
-      self.frame_.style.left = left + 'px';
-      self.frame_.style.webkitTransitionProperty = 'left, top';
-      self.initialFocusElement_.focus();
-      setTimeout(function() {
-        if (onShow)
-          onShow();
-      }, BaseDialog.ANIMATE_STABLE_DURATION);
-    }, 0);
-  };
-
-  BaseDialog.prototype.hide = function(onHide) {
-    // Note that we control the opacity of the *container*, but the top/left
-    // of the *frame*.
-    this.container_.style.opacity = '0';
-    this.frame_.style.top = (parseInt(this.frame_.style.top) + 50) + 'px';
-    this.frame_.style.left = (parseInt(this.frame_.style.left) - 10) + 'px';
-
-    if (this.previousActiveElement_) {
-      this.previousActiveElement_.focus();
-    } else {
-      this.document_.body.focus();
-    }
-
-    var self = this;
-    setTimeout(function() {
-      // Wait until the transition is done before removing the dialog.
-      self.parentNode_.removeChild(self.container_);
-      if (onHide)
-        onHide();
-    }, BaseDialog.ANIMATE_STABLE_DURATION);
-  };
-
-  /**
-   * AlertDialog contains just a message and an ok button.
-   */
-  function AlertDialog(parentNode) {
-    BaseDialog.apply(this, [parentNode]);
-    this.cancelButton_.style.display = 'none';
-  }
-
-  AlertDialog.prototype = {__proto__: BaseDialog.prototype};
-
-  AlertDialog.prototype.show = function(message, onOk, onShow) {
-    return BaseDialog.prototype.show.apply(this, [message, onOk, onOk, onShow]);
-  };
-
-  /**
-   * ConfirmDialog contains a message, an ok button, and a cancel button.
-   */
-  function ConfirmDialog(parentNode) {
-    BaseDialog.apply(this, [parentNode]);
-  }
-
-  ConfirmDialog.prototype = {__proto__: BaseDialog.prototype};
-
-  /**
-   * PromptDialog contains a message, a text input, an ok button, and a
-   * cancel button.
-   */
-  function PromptDialog(parentNode) {
-    BaseDialog.apply(this, [parentNode]);
-    this.input_ = this.document_.createElement('input');
-    this.input_.setAttribute('type', 'text');
-    this.input_.addEventListener('focus', this.onInputFocus.bind(this));
-    this.initialFocusElement_ = this.input_;
-    this.frame_.insertBefore(this.input_, this.text_.nextSibling);
-  }
-
-  PromptDialog.prototype = {__proto__: BaseDialog.prototype};
-
-  PromptDialog.prototype.onInputFocus = function(event) {
-    this.input_.select();
-  };
-
-  PromptDialog.prototype.show = function(message, defaultValue, onOk, onCancel,
-                                        onShow) {
-    this.input_.value = defaultValue || '';
-    return BaseDialog.prototype.show.apply(this, [message, onOk, onCancel,
-                                                  onShow]);
-  };
-
-  PromptDialog.prototype.getValue = function() {
-    return this.input_.value;
-  };
-
-  PromptDialog.prototype.onOkClick_ = function(event) {
-    this.hide();
-    if (this.onOk_)
-      this.onOk_(this.getValue());
-  };
-
-  return {
-    BaseDialog: BaseDialog,
-    AlertDialog: AlertDialog,
-    ConfirmDialog: ConfirmDialog,
-    PromptDialog: PromptDialog
-  };
-});