remoting/webapp/crd/js/host_list.js

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 /**
   6  * @fileoverview
   7  * Class representing the host-list portion of the home screen UI.
   8  */
   9
  10 'use strict';
  11
  12 /** @suppress {duplicate} */
  13 var remoting = remoting || {};
  14
  15 /**
  16  * Create a host list consisting of the specified HTML elements, which should
  17  * have a common parent that contains only host-list UI as it will be hidden
  18  * if the host-list is empty.
  19  *
  20  * @constructor
  21  * @param {Element} table The HTML <div> to contain host-list.
  22  * @param {Element} noHosts The HTML <div> containing the "no hosts" message.
  23  * @param {Element} errorMsg The HTML <div> to display error messages.
  24  * @param {Element} errorButton The HTML <button> to display the error
  25  *     resolution action.
  26  * @param {HTMLElement} loadingIndicator The HTML <span> to update while the
  27  *     host list is being loaded. The first element of this span should be
  28  *     the reload button.
  29  */
  30 remoting.HostList = function(table, noHosts, errorMsg, errorButton,
  31                              loadingIndicator) {
  32   /**
  33    * @type {Element}
  34    * @private
  35    */
  36   this.table_ = table;
  37   /**
  38    * @type {Element}
  39    * @private
  40    * TODO(jamiewalch): This should be doable using CSS's sibling selector,
  41    * but it doesn't work right now (crbug.com/135050).
  42    */
  43   this.noHosts_ = noHosts;
  44   /**
  45    * @type {Element}
  46    * @private
  47    */
  48   this.errorMsg_ = errorMsg;
  49   /**
  50    * @type {Element}
  51    * @private
  52    */
  53   this.errorButton_ = errorButton;
  54   /**
  55    * @type {HTMLElement}
  56    * @private
  57    */
  58   this.loadingIndicator_ = loadingIndicator;
  59   /**
  60    * @type {Array<remoting.HostTableEntry>}
  61    * @private
  62    */
  63   this.hostTableEntries_ = [];
  64   /**
  65    * @type {Array<remoting.Host>}
  66    * @private
  67    */
  68   this.hosts_ = [];
  69   /**
  70    * @type {string}
  71    * @private
  72    */
  73   this.lastError_ = '';
  74   /**
  75    * @type {remoting.Host?}
  76    * @private
  77    */
  78   this.localHost_ = null;
  79   /**
  80    * @type {remoting.HostController.State}
  81    * @private
  82    */
  83   this.localHostState_ = remoting.HostController.State.UNKNOWN;
  84
  85   /**
  86    * @type {number}
  87    * @private
  88    */
  89   this.webappMajorVersion_ = parseInt(chrome.runtime.getManifest().version, 10);
  90
  91   this.errorButton_.addEventListener('click',
  92                                      this.onErrorClick_.bind(this),
  93                                      false);
  94   var reloadButton = this.loadingIndicator_.firstElementChild;
  95   /** @type {remoting.HostList} */
  96   var that = this;
  97   /** @param {Event} event */
  98   function refresh(event) {
  99     event.preventDefault();
 100     that.refresh(that.display.bind(that));
 101   };
 102   reloadButton.addEventListener('click', refresh, false);
 103 };
 104
 105 /**
 106  * Load the host-list asynchronously from local storage.
 107  *
 108  * @param {function():void} onDone Completion callback.
 109  */
 110 remoting.HostList.prototype.load = function(onDone) {
 111   // Load the cache of the last host-list, if present.
 112   /** @type {remoting.HostList} */
 113   var that = this;
 114   /** @param {Object<string>} items */
 115   var storeHostList = function(items) {
 116     if (items[remoting.HostList.HOSTS_KEY]) {
 117       var cached = base.jsonParseSafe(items[remoting.HostList.HOSTS_KEY]);
 118       if (cached) {
 119         that.hosts_ = /** @type {Array<remoting.Host>} */ (cached);
 120       } else {
 121         console.error('Invalid value for ' + remoting.HostList.HOSTS_KEY);
 122       }
 123     }
 124     onDone();
 125   };
 126   chrome.storage.local.get(remoting.HostList.HOSTS_KEY, storeHostList);
 127 };
 128
 129 /**
 130  * Search the host list for a host with the specified id.
 131  *
 132  * @param {string} hostId The unique id of the host.
 133  * @return {remoting.Host?} The host, if any.
 134  */
 135 remoting.HostList.prototype.getHostForId = function(hostId) {
 136   for (var i = 0; i < this.hosts_.length; ++i) {
 137     if (this.hosts_[i].hostId == hostId) {
 138       return this.hosts_[i];
 139     }
 140   }
 141   return null;
 142 };
 143
 144 /**
 145  * Get the host id corresponding to the specified host name.
 146  *
 147  * @param {string} hostName The name of the host.
 148  * @return {string?} The host id, if a host with the given name exists.
 149  */
 150 remoting.HostList.prototype.getHostIdForName = function(hostName) {
 151   for (var i = 0; i < this.hosts_.length; ++i) {
 152     if (this.hosts_[i].hostName == hostName) {
 153       return this.hosts_[i].hostId;
 154     }
 155   }
 156   return null;
 157 };
 158
 159 /**
 160  * Query the Remoting Directory for the user's list of hosts.
 161  *
 162  * @param {function(boolean):void} onDone Callback invoked with true on success
 163  *     or false on failure.
 164  * @return {void} Nothing.
 165  */
 166 remoting.HostList.prototype.refresh = function(onDone) {
 167   this.loadingIndicator_.classList.add('loading');
 168   /** @type {remoting.HostList} */
 169   var that = this;
 170   /** @param {remoting.Error} error */
 171   var onError = function(error) {
 172     that.lastError_ = error;
 173     onDone(false);
 174   };
 175   remoting.hostListApi.get(this.onHostListResponse_.bind(this, onDone),
 176                            onError);
 177 };
 178
 179 /**
 180  * Handle the results of the host list request.  A success response will
 181  * include a JSON-encoded list of host descriptions, which we display if we're
 182  * able to successfully parse it.
 183  *
 184  * @param {function(boolean):void} onDone The callback passed to |refresh|.
 185  * @param {Array<remoting.Host>} hosts The list of hosts for the user.
 186  * @return {void} Nothing.
 187  * @private
 188  */
 189 remoting.HostList.prototype.onHostListResponse_ = function(onDone, hosts) {
 190   this.lastError_ = '';
 191   this.hosts_ = hosts;
 192   this.sortHosts_();
 193   this.save_();
 194   this.loadingIndicator_.classList.remove('loading');
 195   onDone(this.lastError_ == '');
 196 };
 197
 198 /**
 199  * Sort the internal list of hosts.
 200  *
 201  * @suppress {reportUnknownTypes}
 202  * @return {void} Nothing.
 203  */
 204 remoting.HostList.prototype.sortHosts_ = function() {
 205   /**
 206    * Sort hosts, first by ONLINE/OFFLINE status and then by host-name.
 207    *
 208    * @param {remoting.Host} a
 209    * @param {remoting.Host} b
 210    * @return {number}
 211    */
 212   var cmp = function(a, b) {
 213     if (a.status < b.status) {
 214       return 1;
 215     } else if (b.status < a.status) {
 216       return -1;
 217     } else if (a.hostName.toLocaleLowerCase() <
 218                b.hostName.toLocaleLowerCase()) {
 219       return -1;
 220     } else if (a.hostName.toLocaleLowerCase() >
 221                b.hostName.toLocaleLowerCase()) {
 222       return 1;
 223     }
 224     return 0;
 225   };
 226
 227   this.hosts_ = this.hosts_.sort(cmp);
 228 };
 229
 230 /**
 231  * Display the list of hosts or error condition.
 232  *
 233  * @return {void} Nothing.
 234  */
 235 remoting.HostList.prototype.display = function() {
 236   this.table_.innerText = '';
 237   this.errorMsg_.innerText = '';
 238   this.hostTableEntries_ = [];
 239
 240   var noHostsRegistered = (this.hosts_.length == 0);
 241   this.table_.hidden = noHostsRegistered;
 242   this.noHosts_.hidden = !noHostsRegistered;
 243
 244   if (this.lastError_ != '') {
 245     l10n.localizeElementFromTag(this.errorMsg_, this.lastError_);
 246     if (this.lastError_ == remoting.Error.AUTHENTICATION_FAILED) {
 247       l10n.localizeElementFromTag(this.errorButton_,
 248                                   /*i18n-content*/'SIGN_IN_BUTTON');
 249     } else {
 250       l10n.localizeElementFromTag(this.errorButton_,
 251                                   /*i18n-content*/'RETRY');
 252     }
 253   } else {
 254     for (var i = 0; i < this.hosts_.length; ++i) {
 255       /** @type {remoting.Host} */
 256       var host = this.hosts_[i];
 257       // Validate the entry to make sure it has all the fields we expect and is
 258       // not the local host (which is displayed separately). NB: if the host has
 259       // never sent a heartbeat, then there will be no jabberId.
 260       if (host.hostName && host.hostId && host.status && host.publicKey &&
 261           (!this.localHost_ || host.hostId != this.localHost_.hostId)) {
 262         var hostTableEntry = new remoting.HostTableEntry(
 263             host, this.webappMajorVersion_,
 264             this.renameHost_.bind(this), this.deleteHost_.bind(this));
 265         hostTableEntry.createDom();
 266         this.hostTableEntries_[i] = hostTableEntry;
 267         this.table_.appendChild(hostTableEntry.tableRow);
 268       }
 269     }
 270   }
 271
 272   this.errorMsg_.parentNode.hidden = (this.lastError_ == '');
 273
 274   // The local host cannot be stopped or started if the host controller is not
 275   // implemented for this platform. Additionally, it cannot be started if there
 276   // is an error (in many error states, the start operation will fail anyway,
 277   // but even if it succeeds, the chance of a related but hard-to-diagnose
 278   // future error is high).
 279   var state = this.localHostState_;
 280   var enabled = (state == remoting.HostController.State.STARTING) ||
 281       (state == remoting.HostController.State.STARTED);
 282   var canChangeLocalHostState =
 283       (state != remoting.HostController.State.NOT_IMPLEMENTED) &&
 284       (state != remoting.HostController.State.UNKNOWN) &&
 285       (state != remoting.HostController.State.NOT_INSTALLED ||
 286        remoting.isMe2MeInstallable()) &&
 287       (enabled || this.lastError_ == '');
 288
 289   remoting.updateModalUi(enabled ? 'enabled' : 'disabled', 'data-daemon-state');
 290   var element = document.getElementById('daemon-control');
 291   element.hidden = !canChangeLocalHostState;
 292
 293   if (noHostsRegistered) {
 294     this.showHostListEmptyMessage_(canChangeLocalHostState);
 295   }
 296 };
 297
 298 /**
 299  * Displays a message to the user when the host list is empty.
 300  *
 301  * @param {boolean} hostingSupported
 302  * @return {void}
 303  * @private
 304  */
 305 remoting.HostList.prototype.showHostListEmptyMessage_ = function(
 306     hostingSupported) {
 307   var that = this;
 308   remoting.AppsV2Migration.hasHostsInV1App().then(
 309     /**
 310      * @param {remoting.MigrationSettings} previousIdentity
 311      * @this {remoting.HostList}
 312      */
 313     function(previousIdentity) {
 314       that.noHosts_.innerHTML = remoting.AppsV2Migration.buildMigrationTips(
 315           previousIdentity.email, previousIdentity.fullName);
 316     },
 317     function() {
 318       var buttonLabel = l10n.getTranslationOrError(
 319           /*i18n-content*/'HOME_DAEMON_START_BUTTON');
 320       if (hostingSupported) {
 321         that.noHosts_.innerText = l10n.getTranslationOrError(
 322             /*i18n-content*/'HOST_LIST_EMPTY_HOSTING_SUPPORTED',
 323             [buttonLabel]);
 324       } else {
 325         that.noHosts_.innerText = l10n.getTranslationOrError(
 326             /*i18n-content*/'HOST_LIST_EMPTY_HOSTING_UNSUPPORTED',
 327             [buttonLabel]);
 328       }
 329     }
 330   );
 331 };
 332
 333 /**
 334  * Remove a host from the list, and deregister it.
 335  * @param {remoting.HostTableEntry} hostTableEntry The host to be removed.
 336  * @return {void} Nothing.
 337  * @private
 338  */
 339 remoting.HostList.prototype.deleteHost_ = function(hostTableEntry) {
 340   this.table_.removeChild(hostTableEntry.tableRow);
 341   var index = this.hostTableEntries_.indexOf(hostTableEntry);
 342   if (index != -1) {
 343     this.hostTableEntries_.splice(index, 1);
 344   }
 345   remoting.HostList.unregisterHostById(hostTableEntry.host.hostId);
 346 };
 347
 348 /**
 349  * Prepare a host for renaming by replacing its name with an edit box.
 350  * @param {remoting.HostTableEntry} hostTableEntry The host to be renamed.
 351  * @return {void} Nothing.
 352  * @private
 353  */
 354 remoting.HostList.prototype.renameHost_ = function(hostTableEntry) {
 355   for (var i = 0; i < this.hosts_.length; ++i) {
 356     if (this.hosts_[i].hostId == hostTableEntry.host.hostId) {
 357       this.hosts_[i].hostName = hostTableEntry.host.hostName;
 358       break;
 359     }
 360   }
 361   this.save_();
 362
 363   remoting.hostListApi.put(hostTableEntry.host.hostId,
 364                            hostTableEntry.host.hostName,
 365                            hostTableEntry.host.publicKey,
 366                            function() {},
 367                            remoting.showErrorMessage);
 368 };
 369
 370 /**
 371  * Unregister a host.
 372  * @param {string} hostId The id of the host to be removed.
 373  * @return {void} Nothing.
 374  */
 375 remoting.HostList.unregisterHostById = function(hostId) {
 376   remoting.hostListApi.remove(hostId, function() {}, remoting.showErrorMessage);
 377 };
 378
 379 /**
 380  * Set tool-tips for the 'connect' action. We can't just set this on the
 381  * parent element because the button has no tool-tip, and therefore would
 382  * inherit connectStr.
 383  *
 384  * @return {void} Nothing.
 385  * @private
 386  */
 387 remoting.HostList.prototype.setTooltips_ = function() {
 388   var connectStr = '';
 389   if (this.localHost_) {
 390     chrome.i18n.getMessage(/*i18n-content*/'TOOLTIP_CONNECT',
 391                            this.localHost_.hostName);
 392   }
 393   document.getElementById('this-host-name').title = connectStr;
 394   document.getElementById('this-host-icon').title = connectStr;
 395 };
 396
 397 /**
 398  * Set the state of the local host and localHostId if any.
 399  *
 400  * @param {remoting.HostController.State} state State of the local host.
 401  * @param {string?} hostId ID of the local host, or null.
 402  * @return {void} Nothing.
 403  */
 404 remoting.HostList.prototype.setLocalHostStateAndId = function(state, hostId) {
 405   this.localHostState_ = state;
 406   this.setLocalHost_(hostId ? this.getHostForId(hostId) : null);
 407 }
 408
 409 /**
 410  * Set the host object that corresponds to the local computer, if any.
 411  *
 412  * @param {remoting.Host?} host The host, or null if not registered.
 413  * @return {void} Nothing.
 414  * @private
 415  */
 416 remoting.HostList.prototype.setLocalHost_ = function(host) {
 417   this.localHost_ = host;
 418   this.setTooltips_();
 419   /** @type {remoting.HostList} */
 420   var that = this;
 421   if (host) {
 422     /** @param {remoting.HostTableEntry} host */
 423     var renameHost = function(host) {
 424       that.renameHost_(host);
 425       that.setTooltips_();
 426     };
 427     if (!this.localHostTableEntry_) {
 428       /** @type {remoting.HostTableEntry} @private */
 429       this.localHostTableEntry_ = new remoting.HostTableEntry(
 430           host, this.webappMajorVersion_, renameHost);
 431       this.localHostTableEntry_.init(
 432           document.getElementById('this-host-connect'),
 433           document.getElementById('this-host-warning'),
 434           document.getElementById('this-host-name'),
 435           document.getElementById('this-host-rename'));
 436     } else {
 437       // TODO(jamiewalch): This is hack to prevent multiple click handlers being
 438       // registered for the same DOM elements if this method is called more than
 439       // once. A better solution would be to let HostTable create the daemon row
 440       // like it creates the rows for non-local hosts.
 441       this.localHostTableEntry_.host = host;
 442     }
 443   } else {
 444     this.localHostTableEntry_ = null;
 445   }
 446 }
 447
 448 /**
 449  * Called by the HostControlled after the local host has been started.
 450  *
 451  * @param {string} hostName Host name.
 452  * @param {string} hostId ID of the local host.
 453  * @param {string} publicKey Public key.
 454  * @return {void} Nothing.
 455  */
 456 remoting.HostList.prototype.onLocalHostStarted = function(
 457     hostName, hostId, publicKey) {
 458   // Create a dummy remoting.Host instance to represent the local host.
 459   // Refreshing the list is no good in general, because the directory
 460   // information won't be in sync for several seconds. We don't know the
 461   // host JID, but it can be missing from the cache with no ill effects.
 462   // It will be refreshed if the user tries to connect to the local host,
 463   // and we hope that the directory will have been updated by that point.
 464   var localHost = new remoting.Host();
 465   localHost.hostName = hostName;
 466   // Provide a version number to avoid warning about this dummy host being
 467   // out-of-date.
 468   localHost.hostVersion = String(this.webappMajorVersion_) + ".x"
 469   localHost.hostId = hostId;
 470   localHost.publicKey = publicKey;
 471   localHost.status = 'ONLINE';
 472   this.hosts_.push(localHost);
 473   this.save_();
 474   this.setLocalHost_(localHost);
 475 };
 476
 477 /**
 478  * Called when the user clicks the button next to the error message. The action
 479  * depends on the error.
 480  *
 481  * @private
 482  */
 483 remoting.HostList.prototype.onErrorClick_ = function() {
 484   if (this.lastError_ == remoting.Error.AUTHENTICATION_FAILED) {
 485     remoting.handleAuthFailureAndRelaunch();
 486   } else {
 487     this.refresh(remoting.updateLocalHostState);
 488   }
 489 };
 490
 491 /**
 492  * Save the host list to local storage.
 493  */
 494 remoting.HostList.prototype.save_ = function() {
 495   var items = {};
 496   items[remoting.HostList.HOSTS_KEY] = JSON.stringify(this.hosts_);
 497   chrome.storage.local.set(items);
 498   if (this.hosts_.length !== 0) {
 499     remoting.AppsV2Migration.saveUserInfo();
 500   }
 501 };
 502
 503 /**
 504  * Key name under which Me2Me hosts are cached.
 505  */
 506 remoting.HostList.HOSTS_KEY = 'me2me-cached-hosts';
 507
 508 /** @type {remoting.HostList} */
 509 remoting.hostList = null;