HostTableEntry refactor

remoting/webapp/crd/js/host_list.js

 // Copyright (c) 2012 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.
 
 /**
  * @fileoverview
  * Class representing the host-list portion of the home screen UI.
  */
 
 'use strict';
@@ skipping 54 matching lines @@
    * @type {Array<remoting.Host>}
    * @private
    */
   this.hosts_ = [];
   /**
    * @type {string}
    * @private
    */
   this.lastError_ = '';
   /**
-   * @type {remoting.Host?}
+   * @type {remoting.LocalHostSection}
    * @private
    */
-  this.localHost_ = null;
-  /**
-   * @type {remoting.HostController.State}
-   * @private
-   */
-  this.localHostState_ = remoting.HostController.State.UNKNOWN;
+  this.localHostSection_ = new remoting.LocalHostSection(
+      document.getElementById('daemon-control'),
+      new remoting.LocalHostSection.Controller(this));

[Jamie, 2015/02/27 18:19:40]

These elements (or a suitable parent through which they can be accessed) should
be passed to the ctor like all the other DOM elements are. In fact, it might be
cleaner to make all the host-list DOM accessible via querySelector and just pass
in the root (that can be a follow-up, but I would prefer that we don't add calls
to getElementById to this class).

[kelvinp, 2015/03/03 21:57:52]

Acknowledged. I simply moved the line to query the daemon control by Id from
line 290 to here.  Currently, the daemon-control is not a child of the host list
element that is passed in the constructor.  I can do this in a follow-up change.

[Jamie, 2015/03/04 00:09:24]

"this" being what, in this context? Refactoring the DOM so that it is a child?

[kelvinp, 2015/03/04 02:02:28]

Correct, what I meant is that I can refactor the DOM so that the
|daemon-control| will be a child of the rootElement passed into
remoting.HostList.

 
   /**
    * @type {number}
    * @private
    */
   this.webappMajorVersion_ = parseInt(chrome.runtime.getManifest().version, 10);
 
   this.errorButton_.addEventListener('click',
                                      this.onErrorClick_.bind(this),
                                      false);
   var reloadButton = this.loadingIndicator_.firstElementChild;
   /** @type {remoting.HostList} */
   var that = this;
   /** @param {Event} event */
   function refresh(event) {
     event.preventDefault();
     that.refresh(that.display.bind(that));
-  };
+  }
   reloadButton.addEventListener('click', refresh, false);
 };
 
 /**
  * Load the host-list asynchronously from local storage.
  *
  * @param {function():void} onDone Completion callback.
  */
 remoting.HostList.prototype.load = function(onDone) {
   // Load the cache of the last host-list, if present.
@@ skipping 139 matching lines @@
                                   /*i18n-content*/'RETRY');
     }
   } else {
     for (var i = 0; i < this.hosts_.length; ++i) {
       /** @type {remoting.Host} */
       var host = this.hosts_[i];
       // Validate the entry to make sure it has all the fields we expect and is
       // not the local host (which is displayed separately). NB: if the host has
       // never sent a heartbeat, then there will be no jabberId.
       if (host.hostName && host.hostId && host.status && host.publicKey &&
-          (!this.localHost_ || host.hostId != this.localHost_.hostId)) {
+          (host.hostId != this.localHostSection_.getHostId())) {
         var hostTableEntry = new remoting.HostTableEntry(
-            host, this.webappMajorVersion_,
-            this.renameHost_.bind(this), this.deleteHost_.bind(this));
-        hostTableEntry.createDom();
+            this.webappMajorVersion_,
+            remoting.connectMe2Me,
+            this.renameHost.bind(this),
+            this.deleteHost_.bind(this));
+        hostTableEntry.setHost(host);
         this.hostTableEntries_[i] = hostTableEntry;
-        this.table_.appendChild(hostTableEntry.tableRow);
+        this.table_.appendChild(hostTableEntry.element());
       }
     }
   }
 
   this.errorMsg_.parentNode.hidden = (this.lastError_ == '');
-
-  // The local host cannot be stopped or started if the host controller is not
-  // implemented for this platform. Additionally, it cannot be started if there
-  // is an error (in many error states, the start operation will fail anyway,
-  // but even if it succeeds, the chance of a related but hard-to-diagnose
-  // future error is high).
-  var state = this.localHostState_;
-  var enabled = (state == remoting.HostController.State.STARTING) ||
-      (state == remoting.HostController.State.STARTED);
-  var canChangeLocalHostState =
-      (state != remoting.HostController.State.NOT_IMPLEMENTED) &&
-      (state != remoting.HostController.State.UNKNOWN) &&
-      (state != remoting.HostController.State.NOT_INSTALLED ||
-       remoting.isMe2MeInstallable()) &&
-      (enabled || this.lastError_ == '');
-
-  remoting.updateModalUi(enabled ? 'enabled' : 'disabled', 'data-daemon-state');
-  var element = document.getElementById('daemon-control');
-  element.hidden = !canChangeLocalHostState;
-
   if (noHostsRegistered) {
-    this.showHostListEmptyMessage_(canChangeLocalHostState);
+    this.showHostListEmptyMessage_(this.localHostSection_.canChangeState());
   }
 };
 
 /**
  * Displays a message to the user when the host list is empty.
  *
  * @param {boolean} hostingSupported
  * @return {void}
  * @private
  */
@@ skipping 25 matching lines @@
   );
 };
 
 /**
  * Remove a host from the list, and deregister it.
  * @param {remoting.HostTableEntry} hostTableEntry The host to be removed.
  * @return {void} Nothing.
  * @private
  */
 remoting.HostList.prototype.deleteHost_ = function(hostTableEntry) {
-  this.table_.removeChild(hostTableEntry.tableRow);
+  this.table_.removeChild(hostTableEntry.element());
   var index = this.hostTableEntries_.indexOf(hostTableEntry);
   if (index != -1) {
     this.hostTableEntries_.splice(index, 1);
   }
   remoting.HostList.unregisterHostById(hostTableEntry.host.hostId);
 };
 
 /**
  * Prepare a host for renaming by replacing its name with an edit box.
  * @param {remoting.HostTableEntry} hostTableEntry The host to be renamed.
  * @return {void} Nothing.
- * @private
  */
-remoting.HostList.prototype.renameHost_ = function(hostTableEntry) {
+remoting.HostList.prototype.renameHost = function(hostTableEntry) {
   for (var i = 0; i < this.hosts_.length; ++i) {
     if (this.hosts_[i].hostId == hostTableEntry.host.hostId) {
       this.hosts_[i].hostName = hostTableEntry.host.hostName;
       break;
     }
   }
   this.save_();
 
   remoting.hostListApi.put(hostTableEntry.host.hostId,
                            hostTableEntry.host.hostName,
                            hostTableEntry.host.publicKey,
                            function() {},
                            remoting.showErrorMessage);
 };
 
 /**
  * Unregister a host.
  * @param {string} hostId The id of the host to be removed.
  * @return {void} Nothing.
  */
 remoting.HostList.unregisterHostById = function(hostId) {
   remoting.hostListApi.remove(hostId, function() {}, remoting.showErrorMessage);
 };
 
 /**
- * Set tool-tips for the 'connect' action. We can't just set this on the
- * parent element because the button has no tool-tip, and therefore would
- * inherit connectStr.
- *
- * @return {void} Nothing.
- * @private
- */
-remoting.HostList.prototype.setTooltips_ = function() {
-  var connectStr = '';
-  if (this.localHost_) {
-    chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_CONNECT',
-                           this.localHost_.hostName);
-  }
-  document.getElementById('this-host-name').title = connectStr;
-  document.getElementById('this-host-icon').title = connectStr;
-};
-
-/**
  * Set the state of the local host and localHostId if any.
  *
  * @param {remoting.HostController.State} state State of the local host.
  * @param {string?} hostId ID of the local host, or null.
  * @return {void} Nothing.
  */
 remoting.HostList.prototype.setLocalHostStateAndId = function(state, hostId) {
-  this.localHostState_ = state;
-  this.setLocalHost_(hostId ? this.getHostForId(hostId) : null);
-}
-
-/**
- * Set the host object that corresponds to the local computer, if any.
- *
- * @param {remoting.Host?} host The host, or null if not registered.
- * @return {void} Nothing.
- * @private
- */
-remoting.HostList.prototype.setLocalHost_ = function(host) {
-  this.localHost_ = host;
-  this.setTooltips_();
-  /** @type {remoting.HostList} */
-  var that = this;
-  if (host) {
-    /** @param {remoting.HostTableEntry} host */
-    var renameHost = function(host) {
-      that.renameHost_(host);
-      that.setTooltips_();
-    };
-    if (!this.localHostTableEntry_) {
-      /** @type {remoting.HostTableEntry} @private */
-      this.localHostTableEntry_ = new remoting.HostTableEntry(
-          host, this.webappMajorVersion_, renameHost);
-      this.localHostTableEntry_.init(
-          document.getElementById('this-host-connect'),
-          document.getElementById('this-host-warning'),
-          document.getElementById('this-host-name'),
-          document.getElementById('this-host-rename'));
-    } else {
-      // TODO(jamiewalch): This is hack to prevent multiple click handlers being
-      // registered for the same DOM elements if this method is called more than
-      // once. A better solution would be to let HostTable create the daemon row
-      // like it creates the rows for non-local hosts.
-      this.localHostTableEntry_.host = host;
-    }
-  } else {
-    this.localHostTableEntry_ = null;
-  }
-}
+  var host = hostId ? this.getHostForId(hostId) : null;
+  this.localHostSection_.setModel(host, state, this.lastError_ !== '');
+};
 
 /**
  * Called by the HostControlled after the local host has been started.
  *
  * @param {string} hostName Host name.
  * @param {string} hostId ID of the local host.
  * @param {string} publicKey Public key.
  * @return {void} Nothing.
  */
 remoting.HostList.prototype.onLocalHostStarted = function(
     hostName, hostId, publicKey) {
   // Create a dummy remoting.Host instance to represent the local host.
   // Refreshing the list is no good in general, because the directory
   // information won't be in sync for several seconds. We don't know the
   // host JID, but it can be missing from the cache with no ill effects.
   // It will be refreshed if the user tries to connect to the local host,
   // and we hope that the directory will have been updated by that point.
   var localHost = new remoting.Host();
   localHost.hostName = hostName;
   // Provide a version number to avoid warning about this dummy host being
   // out-of-date.
   localHost.hostVersion = String(this.webappMajorVersion_) + ".x"
   localHost.hostId = hostId;
   localHost.publicKey = publicKey;
   localHost.status = 'ONLINE';
   this.hosts_.push(localHost);
   this.save_();
-  this.setLocalHost_(localHost);
+  this.localHostSection_.setModel(localHost,
+                                  remoting.HostController.State.STARTED,
+                                  this.lastError_ !== '');
 };
 
 /**
  * Called when the user clicks the button next to the error message. The action
  * depends on the error.
  *
  * @private
  */
 remoting.HostList.prototype.onErrorClick_ = function() {
   if (this.lastError_ == remoting.Error.AUTHENTICATION_FAILED) {
@@ skipping 15 matching lines @@
   }
 };
 
 /**
  * Key name under which Me2Me hosts are cached.
  */
 remoting.HostList.HOSTS_KEY = 'me2me-cached-hosts';
 
 /** @type {remoting.HostList} */
 remoting.hostList = null;