Show confirmation prompt when the user deletes a host.

BUG=111078
TEST=Manual

Review URL: https://chromiumcodereview.appspot.com/9623020

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@125483 0039d316-1c4b-4281-b951-d872f2087c98

4 files changed, 114 insertions, 5 deletions

diff --git a/remoting/webapp/_locales/en/messages.json b/remoting/webapp/_locales/en/messages.json
index d6e875f..836a345 100644
--- a/remoting/webapp/_locales/en/messages.json
+++ b/remoting/webapp/_locales/en/messages.json
@@ -49,6 +49,17 @@
     "message": "Connect",
     "description": "Label for the connect button. Clicking this button will start the Chromoting session if the access code is correct."
   },
+  "CONFIRM_HOST_DELETE": {
+    "message": "You are about to disable remote connections to $hostname$. If you change your mind, you will need to visit that computer to re-enable this feature. Are you sure you want to disable remote connections?",
+    "description": "Confirmation prompt shown when a user attempts to delete a Me2Me host from their host list.",
+    "placeholders": {
+      "hostname": {
+        "content": "$1",
+        "example": "My Linux desktop"
+      }
+    }
+
+  },
   "CONNECTION_FROM_HEADER": {
     "message": "From",
     "description": "Column header in the connection history table showing the email address of the client end of the connection (the initiator) which may be this or another computer."
@@ -253,6 +264,10 @@
     "message": "My Computers",
     "description": "Sub-title for the remote access section of the UI, which contains a list of currently-shared hosts and a button to enable this computer for long-term sharing."
   },
+  "NO": {
+    "message": "No",
+    "description": "Label for general-purpose 'No' buttons."
+  },
   "OK": {
     "message": "OK",
     "description": "Label for general-purpose OK buttons."
@@ -334,5 +349,9 @@
   "WARNING_NAT_DISABLED": {
     "message": "NOTE: Policy settings permit connections only between computers within your network.",
     "description": "Message displayed at the bottom of the host screen if local policy dictates that NAT traversal is disabled, meaning that connections outside the local network will not work."
+  },
+  "YES": {
+    "message": "Yes",
+    "description": "Label for general-purpose 'Yes' buttons."
   }
 }
diff --git a/remoting/webapp/host_table_entry.js b/remoting/webapp/host_table_entry.js
index 27b722e..5756fd2 100644
--- a/remoting/webapp/host_table_entry.js
+++ b/remoting/webapp/host_table_entry.js
@@ -44,8 +44,15 @@ remoting.HostTableEntry = function() {
   this.hostNameCell_ = null;
   /** @type {function(remoting.HostTableEntry):void} @private */
   this.onRename_ = function(hostId) {};
+  /** @type {function(remoting.HostTableEntry):void} @private */
+  this.onDelete_ = function(hostId) {};
+  // References to event handlers so that they can be removed.
   /** @type {function():void} @private */
   this.onBlurReference_ = function() {};
+  /** @type {function():void} @private */
+  this.onConfirmDeleteReference_ = function() {};
+  /** @type {function():void} @private */
+  this.onCancelDeleteReference_ = function() {};
 };
 
 /**
@@ -59,6 +66,7 @@ remoting.HostTableEntry = function() {
 remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
   this.host = host;
   this.onRename_ = onRename;
+  this.onDelete_ = onDelete;
 
   /** @type {remoting.HostTableEntry} */
   var that = this;
@@ -106,7 +114,9 @@ remoting.HostTableEntry.prototype.init = function(host, onRename, onDelete) {
 
   // Create the host delete cell.
   var deleteButton = /** @type {HTMLElement} */ document.createElement('div');
-  deleteButton.addEventListener('click', function() { onDelete(that); }, false);
+  deleteButton.addEventListener('click',
+                                function() { that.showDeleteConfirmation_(); },
+                                false);
   deleteButton.classList.add('clickable');
   deleteButton.classList.add('host-list-edit');
   var crossImage = /** @type {HTMLElement} */ document.createElement('img');
@@ -132,7 +142,6 @@ remoting.HostTableEntry.prototype.beginRename_ = function() {
 
   /** @type {remoting.HostTableEntry} */
   var that = this;
-  // Keep a reference to the blur event handler so that we can remove it later.
   this.onBlurReference_ = function() { that.commitRename_(); };
   editBox.addEventListener('blur', this.onBlurReference_, false);
 
@@ -158,6 +167,61 @@ remoting.HostTableEntry.prototype.commitRename_ = function() {
 };
 
 /**
+ * Prompt the user to confirm or cancel deletion of a host.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.HostTableEntry.prototype.showDeleteConfirmation_ = function() {
+  var message = document.getElementById('confirm-host-delete-message');
+  l10n.localizeElement(message, this.host.hostName);
+  /** @type {remoting.HostTableEntry} */
+  var that = this;
+  var confirm = document.getElementById('confirm-host-delete');
+  var cancel = document.getElementById('cancel-host-delete');
+  this.onConfirmDeleteReference_ = function() { that.confirmDelete_(); };
+  this.onCancelDeleteReference_ = function() { that.cancelDelete_(); };
+  confirm.addEventListener('click', this.onConfirmDeleteReference_, false);
+  cancel.addEventListener('click', this.onCancelDeleteReference_, false);
+  remoting.setMode(remoting.AppMode.CONFIRM_HOST_DELETE);
+};
+
+/**
+ * Confirm deletion of a host.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.HostTableEntry.prototype.confirmDelete_ = function() {
+  this.onDelete_(this);
+  this.cleanUpConfirmationEventListeners_();
+  remoting.setMode(remoting.AppMode.HOME);
+};
+
+/**
+ * Cancel deletion of a host.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.HostTableEntry.prototype.cancelDelete_ = function() {
+  this.cleanUpConfirmationEventListeners_();
+  remoting.setMode(remoting.AppMode.HOME);
+};
+
+/**
+ * Remove the confirm and cancel event handlers, which refer to this object.
+ * @return {void} Nothing.
+ * @private
+ */
+remoting.HostTableEntry.prototype.cleanUpConfirmationEventListeners_ =
+    function() {
+  var confirm = document.getElementById('confirm-host-delete');
+  var cancel = document.getElementById('cancel-host-delete');
+  confirm.removeEventListener('click', this.onConfirmDeleteReference_, false);
+  cancel.removeEventListener('click', this.onCancelDeleteReference_, false);
+  this.onCancelDeleteReference_ = function() {};
+  this.onConfirmDeleteReference_ = function() {};
+};
+
+/**
  * Remove the edit box corresponding to the specified host, and reset its name.
  * @return {void} Nothing.
  * @private
@@ -172,6 +236,11 @@ remoting.HostTableEntry.prototype.removeEditBox_ = function() {
   this.setHostName_();
 };
 
+/**
+ * Create the DOM nodes for the hostname part of the table entry.
+ * @return {void} Nothing.
+ * @private
+ */
 remoting.HostTableEntry.prototype.setHostName_ = function() {
   var hostNameNode = /** @type {HTMLElement} */ document.createElement('span');
   if (this.host.status == 'ONLINE') {
diff --git a/remoting/webapp/main.html b/remoting/webapp/main.html
index d05bfdb..4520dc3 100644
--- a/remoting/webapp/main.html
+++ b/remoting/webapp/main.html
@@ -157,11 +157,11 @@ found in the LICENSE file.
     </div> <!-- home -->
 
     <div id="dialog-screen"
-         data-ui-mode="home.host home.client home.auth home.history"
+         data-ui-mode="home.host home.client home.auth home.history home.confirm-host-delete"
          hidden></div>
 
     <div id="dialog-container"
-         data-ui-mode="home.host home.client home.auth home.history"
+         data-ui-mode="home.host home.client home.auth home.history home.confirm-host-delete"
          hidden>
 
       <div class="box-spacer"></div>
@@ -387,6 +387,26 @@ found in the LICENSE file.
         </div>
       </div> <!-- connection-history-dialog -->
 
+      <div id="confirm-host-delete-dialog"
+           class="kd-modaldialog"
+           data-ui-mode="home.confirm-host-delete"
+           hidden>
+        <p id="confirm-host-delete-message"
+           i18n-content="CONFIRM_HOST_DELETE"
+           class="message">
+        </p>
+        <div class="centered-button">
+          <button id="confirm-host-delete"
+                  i18n-content="YES"
+                  type="button">
+          </button>
+          <button id="cancel-host-delete"
+                  i18n-content="NO"
+                  type="button">
+          </button>
+        </div>
+      </div> <!-- home.confirm-host-delete -->
+
       <div class="box-spacer"></div>
 
     </div> <!-- dialog-container -->
diff --git a/remoting/webapp/ui_mode.js b/remoting/webapp/ui_mode.js
index 14ab646..0b7be45 100644
--- a/remoting/webapp/ui_mode.js
+++ b/remoting/webapp/ui_mode.js
@@ -37,6 +37,7 @@ remoting.AppMode = {
       CLIENT_SESSION_FINISHED_IT2ME: 'home.client.session-finished.it2me',
       CLIENT_SESSION_FINISHED_ME2ME: 'home.client.session-finished.me2me',
     HISTORY: 'home.history',
+    CONFIRM_HOST_DELETE: 'home.confirm-host-delete',
   IN_SESSION: 'in-session'
 };
 
@@ -49,7 +50,7 @@ remoting.AppMode = {
 remoting.hasModeAttribute = function(element, attr, mode) {
   return element.getAttribute(attr).match(
       new RegExp('(\\s|^)' + mode + '(\\s|$)')) != null;
-}
+};
 
 /**
  * Update the DOM by showing or hiding elements based on whether or not they