[AppRemoting] Implement ConnectionDroppedDialog.

remoting/webapp/app_remoting/html/ar_dialog.css

 /* Copyright 2014 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.
  */
 
 #idle-dialog {
   position: absolute;
   top: 100px;
   width: 100%;
 }
 
+#connection-dropped-dialog.kd-modaldialog,

[Jamie, 2015/05/20 02:20:36]

Is the lack of a space in this selector deliberate? It looks like an error since
it's followed immediately by two similar-looking rules that do have a space.
Maybe add a comment on this line, along the lines of:

   /* no space */

[kelvinp, 2015/05/20 18:12:59]

Yes, it is deliberate.  #foo.bar selects the element with both the id foo and
the class bar, while #foo .bar selects the element with class bar which is a
descendant of foo.
The class name .kd-modaldialog, is not necessary in the selector.  I include
here to show that we are overriding styles. 

[Jamie, 2015/05/20 19:55:09]

Yes, I'm aware of the difference :) My point was just that at first glace it
looks like a typo. After all, why would we have different DOM structures for
three very similar dialogs? (AIUI, it's because the new one uses <dialog>,
right?) A comment explaining that the lack of space is deliberate would be
useful in the same way that a comment is useful if there's a delibrate missing
break statement in a switch. It doesn't need to go into detail about why it's
not needed, just to indicate that it's not a typo.

 #idle-dialog .kd-modaldialog,
 #auth-dialog .kd-modaldialog {
   /*
    * kd-modaldialog uses outline, which doesn't affect the bounding box, and so
    * doesn't work well when adjusting the window shape.
    */
   border: 1px solid gray;
 }
+
+#connection-dropped-dialog {
+  margin: 0px;
+  position: absolute;
+}