Propagate connection state from networking layer to UI.

remoting/webapp/main.css

Index: remoting/webapp/main.css
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index fb4d1ddffd56cd42bcd362427118efbd847d6d9d..a039f871ab5d506beb4dac6193f980c490393576 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%) blur(1px);

[Jamie, 2012/07/12 01:46:42]

Nit: indentation.

[Sergey Ulanov, 2012/07/13 20:42:50]

Done.

+    -webkit-transition: -webkit-filter 0.5s;

[Jamie, 2012/07/12 01:46:42]

I think the transition property needs to be set regardless of whether or not the
session-client-inactive class is applied, otherwise it will fade in but not out
(or vice versa, I forget which).

Also, we've used "0.15s ease" for the tool-bar; 0.5s seems a bit long. Maybe run
it by Ken to get his opinion?

[Sergey Ulanov, 2012/07/13 20:42:50]

That was intentional. It will fade with transition, but returns back instantly
when the connection returns.
I saw 0.218s without ease for button color transition. Not sure if it makes to
use the same transition mode in different places, mainly because they are
different transition. IMHO linear transitions work better than ease when for
colors (vs position/size). Anyway, changed it to 0.2s here.

+}
+
 #set-pin-table td {
   border-bottom: 6px solid transparent;
   text-align: right;