[AppRemoting] Implement ConnectionDroppedDialog.

remoting/webapp/base/js/modal_dialogs.js

Index: remoting/webapp/base/js/modal_dialogs.js
diff --git a/remoting/webapp/base/js/modal_dialogs.js b/remoting/webapp/base/js/modal_dialogs.js
index 9c489b3154178259fa55558be95ec3c5525a1b30..bd7132eaed6711030844ee41869157b37db1c152 100644
--- a/remoting/webapp/base/js/modal_dialogs.js
+++ b/remoting/webapp/base/js/modal_dialogs.js
@@ -158,6 +158,89 @@ remoting.MessageDialog.prototype.onClicked_ = function(result) {
   this.dispose();
 };
 
+
+
+/**
+ * A promise-based dialog implementation using HTML Dialog element.

[Jamie, 2015/05/20 02:20:37]

s/Dialog/<dialog>/

[kelvinp, 2015/05/20 18:13:00]

Done.

+ *
+ * @param {HTMLDialogElement} dialog
+ * @param {HTMLElement} primaryButton
+ * @param {HTMLElement=} opt_secondaryButton
+ * @constructor
+ *
+ * @implements {remoting.WindowShape.ClientUI}
+ * @implements {base.Disposable}
+ */
+remoting.Html5ModalDialog = function(dialog, primaryButton,
+                                     opt_secondaryButton) {
+  /** @private */
+  this.dialog_ = dialog;
+  /** @private {base.Disposables} */
+  this.eventHooks_ = new base.Disposables(
+      new base.DomEventHook(dialog, 'cancel', this.onCancel_.bind(this), false),

[kelvinp, 2015/05/20 01:27:31]

This is called when the user press Escape.

+      new base.DomEventHook(
+          primaryButton, 'click',
+          this.onClicked_.bind(this, remoting.MessageDialog.Result.PRIMARY),
+          false)
+  );
+
+  if (opt_secondaryButton) {
+    this.eventHooks_.add(new base.DomEventHook(
+        opt_secondaryButton, 'click',
+        this.onClicked_.bind(this, remoting.MessageDialog.Result.SECONDARY),
+        false));
+  }
+
+  /** @private {base.Deferred} */
+  this.deferred_ = null;
+  remoting.windowShape.registerClientUI(this);
+};
+
+remoting.Html5ModalDialog.prototype.dispose = function() {
+  base.dispose(this.eventHooks_);
+  remoting.windowShape.unregisterClientUI(this);
+};
+
+/**
+ * @return {Promise<remoting.MessageDialog.Result>}  Promise that resolves with
+ * the button clicked.
+ */
+remoting.Html5ModalDialog.prototype.show = function() {
+  base.debug.assert(this.deferred_ === null);
+  this.deferred_ = new base.Deferred();
+  this.dialog_.showModal();
+
+  remoting.windowShape.centerToDesktop(this.dialog_);
+  return this.deferred_.promise();
+};
+
+/** @param {Event} e */
+remoting.Html5ModalDialog.prototype.onCancel_ = function(e) {
+  e.preventDefault();

[Jamie, 2015/05/20 02:20:37]

I'm not sure that a generic Html5ModalDialog class should prevent the default
behaviour of the Escape key. In the specific case of the connection-dropped
dialog, it probably makes sense, because the user didn't take any explicit
action to pop up the dialog, but I think we want to start using this class for
all our dialogs, at which point it does make sense to handle Escape in a
standard way. Maybe make it configurable, either with a ctor parameter, or via a
setter method.

[kelvinp, 2015/05/20 18:13:00]

Done.

+};
+
+/**
+ * @param {remoting.MessageDialog.Result} result
+ * @private
+ */
+remoting.Html5ModalDialog.prototype.onClicked_ = function(result) {
+  this.dialog_.close();
+  this.deferred_.resolve(result);
+  this.deferred_ = null;
+  this.dispose();
+};
+
+remoting.Html5ModalDialog.prototype.addToRegion = function(rects) {
+  var rect = /** @type {ClientRect} */(this.dialog_.getBoundingClientRect());
+  rects.push({
+    left: rect.left,
+    top: rect.top,
+    width: rect.width,
+    height: rect.height
+  });
+};
+
+
 /**
  * @param {Function} cancelCallback The callback to invoke when the user clicks
  *     on the cancel button.