Propagate connection state from networking layer to UI.

remoting/webapp/main.css

 /* 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.
  */
 
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
 dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td, button {
@@ skipping 544 matching lines @@
 #session-mode {
   position: absolute;
   -webkit-box-shadow: 0 0 8px 0 black;
   -webkit-user-select: none;
 }
 
 #session-client-plugin {
   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;
 }
 
 #top-secondary {
   margin-top: 10px
 }
 
 #webapp-description {
   margin-bottom: 10px;
 }
 
 #why-is-this-safe {
   display: inline-block;
   margin-top: 7px;
 }
 
 * {
   box-sizing: border-box;
 }
 
 /*
  * Setting hidden on elements that match some rule overriding 'display' doesn't
  * do what you would expect unless this is made explicit (and !important).
  */
 [hidden] {
   display: none !important;
 }