Add a reload button to host list.

remoting/webapp/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';
 
 /** @suppress {duplicate} */
 var remoting = remoting || {};
 
 /**
  * Create a host list consisting of the specified HTML elements, which should
  * have a common parent that contains only host-list UI as it will be hidden
  * if the host-list is empty.
  *
  * @constructor
  * @param {Element} table The HTML <div> to contain host-list.
  * @param {Element} noHosts The HTML <div> containing the "no hosts" message.
  * @param {Element} errorMsg The HTML <div> to display error messages.
  * @param {Element} errorButton The HTML <button> to display the error
  *     resolution action.
+ * @param {HTMLElement} loadingIndicator The HTML <span> to update while the
+ *     host list is being loaded. The first element of this span should be
+ *     the reload button.
  */
-remoting.HostList = function(table, noHosts, errorMsg, errorButton) {
+remoting.HostList = function(table, noHosts, errorMsg, errorButton,
+                             loadingIndicator) {
   /**
    * @type {Element}
    * @private
    */
   this.table_ = table;
   /**
    * @type {Element}
    * @private
    * TODO(jamiewalch): This should be doable using CSS's sibling selector,
    * but it doesn't work right now (crbug.com/135050).
    */
   this.noHosts_ = noHosts;
   /**
    * @type {Element}
    * @private
    */
   this.errorMsg_ = errorMsg;
   /**
    * @type {Element}
    * @private
    */
   this.errorButton_ = errorButton;
   /**
+   * @type {HTMLElement}
+   * @private
+   */
+  this.loadingIndicator_ = loadingIndicator;
+  /**
    * @type {Array.<remoting.HostTableEntry>}
    * @private
    */
   this.hostTableEntries_ = [];
   /**
    * @type {Array.<remoting.Host>}
    * @private
    */
   this.hosts_ = [];
   /**
@@ skipping 13 matching lines @@
   this.localHostState_ = remoting.HostController.State.NOT_IMPLEMENTED;
   /**
    * @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.
   /** @type {remoting.HostList} */
@@ skipping 29 matching lines @@
 };
 
 /**
  * Query the Remoting Directory for the user's list of hosts.
  *
  * @param {function(boolean):void} onDone Callback invoked with true on success
  *     or false on failure.
  * @return {void} Nothing.
  */
 remoting.HostList.prototype.refresh = function(onDone) {
+  this.loadingIndicator_.classList.add('loading');
   /** @param {XMLHttpRequest} xhr The response from the server. */
   var parseHostListResponse = this.parseHostListResponse_.bind(this, onDone);
   /** @type {remoting.HostList} */
   var that = this;
   /** @param {string} token The OAuth2 token. */
   var getHosts = function(token) {
     var headers = { 'Authorization': 'OAuth ' + token };
     remoting.xhr.get(
         remoting.settings.DIRECTORY_API_BASE_URL + '/@me/hosts',
         parseHostListResponse, '', headers);
@@ skipping 57 matching lines @@
       } else {
         this.lastError_ = remoting.Error.UNEXPECTED;
       }
     }
   } catch (er) {
     var typed_er = /** @type {Object} */ (er);
     console.error('Error processing response: ', xhr, typed_er);
     this.lastError_ = remoting.Error.UNEXPECTED;
   }
   this.save_();
+  this.loadingIndicator_.classList.remove('loading');
   onDone(this.lastError_ == '');
 };
 
 /**
  * Display the list of hosts or error condition.
  *
  * @return {void} Nothing.
  */
 remoting.HostList.prototype.display = function() {
   this.table_.innerText = '';
@@ skipping 247 matching lines @@
   chrome.storage.local.set(items);
 };
 
 /**
  * Key name under which Me2Me hosts are cached.
  */
 remoting.HostList.HOSTS_KEY = 'me2me-cached-hosts';
 
 /** @type {remoting.HostList} */
 remoting.hostList = null;