File Manager: Assorted fixes and polish

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;
 
@@ skipping 13 matching lines @@
    *
    * Clients should override these with localized labels.
    */
   BaseDialog.OK_LABEL = 'Ok';
   BaseDialog.CANCEL_LABEL = 'Cancel';
 
   /**
    * Number of miliseconds animation is expected to take, plus some margin for
    * error.
    */
-  BaseDialog.ANIMATION_STABLE_DURATION = 500;
+  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';
@@ skipping 71 matching lines @@
     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.container_.style.opacity = '1';
+      self.initialFocusElement_.focus();
       setTimeout(function() {
-        self.initialFocusElement_.focus();
         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_);
-      self.frame_.style.webkitTransitionProperty = '';
       if (onHide)
         onHide();
     }, BaseDialog.ANIMATE_STABLE_DURATION);
   };
 
   /**
    * AlertDialog contains just a message and an ok button.
    */
   function AlertDialog(parentNode) {
     BaseDialog.apply(this, [parentNode]);
@@ skipping 51 matching lines @@
       this.onOk_(this.getValue());
   };
 
   return {
     BaseDialog: BaseDialog,
     AlertDialog: AlertDialog,
     ConfirmDialog: ConfirmDialog,
     PromptDialog: PromptDialog
   };
 });