[Chromoting] Break up JS event handler registration into related groups.

BUG=

Review URL: https://codereview.chromium.org/158113002

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

2 files changed, 71 insertions, 43 deletions

diff --git a/remoting/webapp/event_handlers.js b/remoting/webapp/event_handlers.js
index 208c91c..82babee 100644
--- a/remoting/webapp/event_handlers.js
+++ b/remoting/webapp/event_handlers.js
@@ -52,63 +52,52 @@ function onLoad() {
     remoting.setMode(remoting.AppMode.HOME);
     document.getElementById('access-code-entry').value = '';
   };
-  var newWindow = function() {
-    chrome.app.window.create('main.html', { 'width': 800, 'height': 600 });
-  };
   /** @type {Array.<{event: string, id: string, fn: function(Event):void}>} */
-  var actions = [
-      { event: 'click', id: 'sign-out', fn: remoting.signOut },
-      { event: 'click', id: 'toolbar-disconnect', fn: remoting.disconnect },
-      { event: 'click', id: 'send-ctrl-alt-del',
-        fn: remoting.sendCtrlAltDel },
-      { event: 'click', id: 'send-print-screen',
-        fn: remoting.sendPrintScreen },
-      { event: 'click', id: 'auth-button', fn: doAuthRedirect },
-      { event: 'click', id: 'share-button', fn: remoting.tryShare },
+  var it2me_actions = [
       { event: 'click', id: 'access-mode-button', fn: goEnterAccessCode },
+      { event: 'submit', id: 'access-code-form', fn: sendAccessCode },
+      { event: 'click', id: 'cancel-access-code-button', fn: cancelAccessCode},
       { event: 'click', id: 'cancel-share-button', fn: remoting.cancelShare },
-      { event: 'click', id: 'stop-sharing-button', fn: remoting.cancelShare },
-      { event: 'click', id: 'host-finished-button', fn: goHome },
       { event: 'click', id: 'client-finished-it2me-button', fn: goHome },
-      { event: 'click', id: 'client-finished-me2me-button', fn: goHome },
-      { event: 'click', id: 'client-reconnect-button', fn: reconnect },
-      { event: 'click', id: 'cancel-access-code-button', fn: cancelAccessCode},
-      { event: 'click', id: 'cancel-connect-button', fn: goHome },
-      { event: 'click', id: 'toolbar-stub',
-        fn: function() { remoting.toolbar.toggle(); } },
-      { event: 'click', id: 'start-daemon',
-        fn: function() { remoting.hostSetupDialog.showForStart(); } },
-      { event: 'click', id: 'change-daemon-pin',
-        fn: function() { remoting.hostSetupDialog.showForPin(); } },
-      { event: 'click', id: 'stop-daemon', fn: stopDaemon },
-      { event: 'submit', id: 'access-code-form', fn: sendAccessCode },
       { event: 'click', id: 'get-started-it2me',
         fn: remoting.showIT2MeUiAndSave },
+      { event: 'click', id: 'host-finished-button', fn: goHome },
+      { event: 'click', id: 'share-button', fn: remoting.tryShare }
+  ];
+  /** @type {Array.<{event: string, id: string, fn: function(Event):void}>} */
+  var me2me_actions = [
+      { event: 'click', id: 'change-daemon-pin',
+        fn: function() { remoting.hostSetupDialog.showForPin(); } },
+      { event: 'click', id: 'client-finished-me2me-button', fn: goHome },
+      { event: 'click', id: 'client-reconnect-button', fn: reconnect },
+      { event: 'click', id: 'daemon-pin-cancel', fn: goHome },
       { event: 'click', id: 'get-started-me2me',
         fn: remoting.showMe2MeUiAndSave },
-      { event: 'click', id: 'daemon-pin-cancel', fn: goHome },
+      { event: 'click', id: 'start-daemon',
+        fn: function() { remoting.hostSetupDialog.showForStart(); } },
+      { event: 'click', id: 'stop-daemon', fn: stopDaemon }
+  ];
+  /** @type {Array.<{event: string, id: string, fn: function(Event):void}>} */
+  var host_actions = [
+      { event: 'click', id: 'close-paired-client-manager-dialog', fn: goHome },
       { event: 'click', id: 'host-config-done-dismiss', fn: goHome },
       { event: 'click', id: 'host-config-error-dismiss', fn: goHome },
-      { event: 'click', id: 'token-refresh-error-ok', fn: goHome },
-      { event: 'click', id: 'token-refresh-error-sign-in', fn: doAuthRedirect },
       { event: 'click', id: 'open-paired-client-manager-dialog',
         fn: remoting.setMode.bind(null,
                                   remoting.AppMode.HOME_MANAGE_PAIRINGS) },
-      { event: 'click', id: 'close-paired-client-manager-dialog', fn: goHome },
-      { event: 'click', id: 'new-connection', fn: newWindow }
+      { event: 'click', id: 'stop-sharing-button', fn: remoting.cancelShare }
   ];
-
-  for (var i = 0; i < actions.length; ++i) {
-    var action = actions[i];
-    var element = document.getElementById(action.id);
-    if (element) {
-      element.addEventListener(action.event, action.fn, false);
-    } else {
-      console.error('Could not set ' + action.event +
-                    ' event handler on element ' + action.id +
-                    ': element not found.');
-    }
-  }
+  /** @type {Array.<{event: string, id: string, fn: function(Event):void}>} */
+  var auth_actions = [
+      { event: 'click', id: 'auth-button', fn: doAuthRedirect },
+      { event: 'click', id: 'cancel-connect-button', fn: goHome },
+      { event: 'click', id: 'token-refresh-error-ok', fn: goHome },
+      { event: 'click', id: 'token-refresh-error-sign-in', fn: doAuthRedirect }
+  ];
+  registerEventListeners(it2me_actions);
+  registerEventListeners(me2me_actions);
+  registerEventListeners(host_actions);
+  registerEventListeners(auth_actions);
   remoting.init();
 
   window.addEventListener('resize', remoting.onResize, false);
@@ -118,4 +107,32 @@ function onLoad() {
   }
 }
 
+/**
+ * @param {Array.<{event: string, id: string,
+ *     fn: function(Event):void}>} actions Array of actions to register.
+ */
+function registerEventListeners(actions) {
+  for (var i = 0; i < actions.length; ++i) {
+    var action = actions[i];
+    registerEventListener(action.id, action.event, action.fn);
+  }
+}
+
+/**
+ * Add an event listener to the specified element.
+ * @param {string} id Id of element.
+ * @param {string} eventname Event name.
+ * @param {function(Event):void} fn Event handler.
+ */
+function registerEventListener(id, eventname, fn) {
+  var element = document.getElementById(id);
+  if (element) {
+    element.addEventListener(eventname, fn, false);
+  } else {
+    console.error('Could not set ' + eventname +
+        ' event handler on element ' + id +
+        ': element not found.');
+  }
+}
+
 window.addEventListener('load', onLoad, false);
diff --git a/remoting/webapp/toolbar.js b/remoting/webapp/toolbar.js
index 31a5f70..f71bc3d 100644
--- a/remoting/webapp/toolbar.js
+++ b/remoting/webapp/toolbar.js
@@ -46,6 +46,17 @@ remoting.Toolbar = function(toolbar) {
   window.addEventListener('mousemove', remoting.Toolbar.onMouseMove, false);
   window.addEventListener('resize', this.center.bind(this), false);
 
+  registerEventListener('new-connection', 'click',
+      function() {
+        chrome.app.window.create('main.html', { 'width': 800, 'height': 600 });
+      });
+  registerEventListener('send-ctrl-alt-del', 'click', remoting.sendCtrlAltDel);
+  registerEventListener('send-print-screen', 'click', remoting.sendPrintScreen);
+  registerEventListener('sign-out', 'click', remoting.signOut);
+  registerEventListener('toolbar-disconnect', 'click', remoting.disconnect);
+  registerEventListener('toolbar-stub', 'click',
+      function() { remoting.toolbar.toggle(); });
+
   // Prevent the preview canceling if the user is interacting with the tool-bar.
   /** @type {remoting.Toolbar} */
   var that = this;