[AppRemoting] Implement ConnectionDroppedDialog.

remoting/webapp/app_remoting/html/ar_dialog.css

Index: remoting/webapp/app_remoting/html/ar_dialog.css
diff --git a/remoting/webapp/app_remoting/html/ar_dialog.css b/remoting/webapp/app_remoting/html/ar_dialog.css
index 9258578ed1500eb84661b5157f0ffd11baad95c0..e32d2862497129fe909707a065947d8b18243a3e 100644
--- a/remoting/webapp/app_remoting/html/ar_dialog.css
+++ b/remoting/webapp/app_remoting/html/ar_dialog.css
@@ -9,6 +9,7 @@
   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 {
   /*
@@ -17,3 +18,8 @@
    */
   border: 1px solid gray;
 }
+
+#connection-dropped-dialog {
+  margin: 0px;
+  position: absolute;
+}