Show connection state in the Chromoting client UI.

Now screen is desaturated when we get notification that
video channel is not working.

BUG=131411


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

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

4 files changed, 36 insertions, 2 deletions

diff --git a/remoting/webapp/client_plugin.js b/remoting/webapp/client_plugin.js
index c6b66ef..93d4d61 100644
--- a/remoting/webapp/client_plugin.js
+++ b/remoting/webapp/client_plugin.js
@@ -27,6 +27,8 @@ remoting.ClientPlugin.prototype.onOutgoingIqHandler;
 remoting.ClientPlugin.prototype.onDebugMessageHandler;
 /** @type {function(number, number): void} State change callback. */
 remoting.ClientPlugin.prototype.onConnectionStatusUpdateHandler;
+/** @type {function(boolean): void} Connection ready state callback. */
+remoting.ClientPlugin.prototype.onConnectionReadyHandler;
 /** @type {function(): void} Desktop size change callback. */
 remoting.ClientPlugin.prototype.onDesktopSizeUpdateHandler;
 
diff --git a/remoting/webapp/client_plugin_async.js b/remoting/webapp/client_plugin_async.js
index dd1b5cd..744d223 100644
--- a/remoting/webapp/client_plugin_async.js
+++ b/remoting/webapp/client_plugin_async.js
@@ -38,6 +38,8 @@ remoting.ClientPluginAsync = function(plugin) {
    * @param {number} error The error code, if any.
    */
   this.onConnectionStatusUpdateHandler = function(state, error) {};
+  /** @param {boolean} ready Connection ready state. */
+  this.onConnectionReadyHandler = function(ready) {};
   this.onDesktopSizeUpdateHandler = function () {};
 
   /** @type {number} */
@@ -196,6 +198,12 @@ remoting.ClientPluginAsync.prototype.handleMessage_ = function(messageStr) {
     if (remoting.clientSession) {
       remoting.clientSession.onFirstFrameReceived();
     }
+  } else if (message.method == 'onConnectionReady') {
+    if (typeof message.data['ready'] != 'boolean') {
+      console.error('Received incorrect onConnectionReady message.');
+      return;
+    }
+    this.onConnectionReadyHandler(message.data['ready']);
   }
 }
 
diff --git a/remoting/webapp/client_session.js b/remoting/webapp/client_session.js
index 24a5d23..da8051e 100644
--- a/remoting/webapp/client_session.js
+++ b/remoting/webapp/client_session.js
@@ -303,7 +303,9 @@ remoting.ClientSession.prototype.onPluginInitialized_ =
   };
 
   this.plugin.onConnectionStatusUpdateHandler =
-      this.connectionStatusUpdateCallback.bind(this);
+      this.onConnectionStatusUpdate_.bind(this);
+  this.plugin.onConnectionReadyHandler =
+      this.onConnectionReady_.bind(this);
   this.plugin.onDesktopSizeUpdateHandler =
       this.onDesktopSizeChanged_.bind(this);
 
@@ -479,10 +481,11 @@ remoting.ClientSession.prototype.connectPluginToWcs_ =
  * Callback that the plugin invokes to indicate that the connection
  * status has changed.
  *
+ * @private
  * @param {number} status The plugin's status.
  * @param {number} error The plugin's error state, if any.
  */
-remoting.ClientSession.prototype.connectionStatusUpdateCallback =
+remoting.ClientSession.prototype.onConnectionStatusUpdate_ =
     function(status, error) {
   if (status == remoting.ClientSession.State.CONNECTED) {
     this.onDesktopSizeChanged_();
@@ -493,6 +496,21 @@ remoting.ClientSession.prototype.connectionStatusUpdateCallback =
 };
 
 /**
+ * Callback that the plugin invokes to indicate when the connection is
+ * ready.
+ *
+ * @private
+ * @param {boolean} ready True if the connection is ready.
+ */
+remoting.ClientSession.prototype.onConnectionReady_ = function(ready) {
+  if (!ready) {
+    this.plugin.element().classList.add("session-client-inactive");
+  } else {
+    this.plugin.element().classList.remove("session-client-inactive");
+  }
+}
+
+/**
  * @private
  * @param {remoting.ClientSession.State} newState The new state for the session.
  * @return {void} Nothing.
@@ -707,6 +725,7 @@ remoting.ClientSession.prototype.scroll_ = function(dx, dy) {
 
 /**
  * Enable or disable bump-scrolling.
+ * @private
  * @param {boolean} enable True to enable bump-scrolling, false to disable it.
  */
 remoting.ClientSession.prototype.enableBumpScroll_ = function(enable) {
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index fb4d1dd..ed4de9f 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -562,6 +562,11 @@ button {
   display: block;
 }
 
+.session-client-inactive {
+  -webkit-filter: grayscale(70%);
+  -webkit-transition: -webkit-filter 0.218s;
+}
+
 #set-pin-table td {
   border-bottom: 6px solid transparent;
   text-align: right;