Improve HRD first run experience

remoting/webapp/crd/html/dialog_hangout_consent.css

Index: remoting/webapp/crd/html/dialog_hangout_consent.css
diff --git a/remoting/webapp/crd/html/dialog_hangout_consent.css b/remoting/webapp/crd/html/dialog_hangout_consent.css
new file mode 100644
index 0000000000000000000000000000000000000000..b8e9f8b839e8bffa6680b70f0ee12a9e2ef68830
--- /dev/null
+++ b/remoting/webapp/crd/html/dialog_hangout_consent.css
@@ -0,0 +1,105 @@
+/* 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.
+ */
+
+html, div, span, body, ul, li {
+  border: 0;
+  margin: 0;
+  padding: 0;
+  font-family: "Arial", "Helvetica", sans-serif;
+  font-weight: normal;
+  /* Allows the user to move the window by dragging its content. */
+  -webkit-app-region: drag;
+}
+
+.header {
+  height: 46px;
+  background: #1c91c0;
+  padding: 15px;
+}
+
+.header .title {
+  color: white;
+  float: left;
+  font-size: 24px;
+  line-height: 46px;
+  padding-left: 15px;
+}
+
+.header .logo {
+  float: left;
+  height: 46px;
+  width: 46px;
+  background: url('icon_hangout.webp');
+}
+
+.content {
+  text-align: center;
+  margin: auto;
+  width: 70%;
+}

[Jamie, 2015/02/02 19:07:40]

Blank line here, please.

[kelvinp, 2015/02/03 01:15:32]

Done.

+.content .message {
+  padding: 30px;
+  font-size: 20px;
+}
+
+.content ul {
+  list-style: none;
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: #f0f0f0;
+}
+
+.content li {
+  border-width: 1px 0px 0px 0px;
+  border-style: solid;
+  border-color: #f0f0f0;
+  padding: 15px;
+  text-align: left;
+  font-size: 14px;
+}
+
+.button {
+  padding: 0px 20px;
+  border: 1px solid #f0f0f0;
+  border-radius: 5px;
+  font-size: 14px;
+  font-weight: bold;
+  line-height: 36px;
+  color: #737373;
+  -webkit-app-region: no-drag;
+}
+
+.footer {
+  padding-top: 30px;
+  padding-bottom: 30px;
+  /* Clear the float of its children. */
+  overflow: auto;
+  width: 100%
+}

[Jamie, 2015/02/02 19:07:40]

And here.

[kelvinp, 2015/02/03 01:15:32]

Done.

+.button.default {
+  background: #427fed;
+  color: white;
+}
+
+.button:hover {
+ border-color: #cecece;
+}
+
+.button.default:active {
+  background: #2c56b1;
+}
+
+.ok-button {
+  float: right;
+  margin-left: 10px;
+}
+
+.cancel-button {
+  float: right;
+}
+
+[hidden] {
+  display: none !important;

[Jamie, 2015/02/02 19:07:39]

Do you need this? I don't see any other rules that affect display in this CSS
file, and if this is needed as a result of a rule in some other CSS file, then I
think it belongs there.

[kelvinp, 2015/02/03 01:15:32]

This is how the CRD app hides elements using JavaScript.
In JavaScript, we set element.hidden = true, this css rule picks up the
attribute change and set display:none on the element.

[Jamie, 2015/02/03 18:22:44]

Isn't that the default though? IIRC, we need this in main.css because there are
other, more specific, rules that also control the "display" attribute, but
that's not the case here.

[kelvinp, 2015/02/03 19:31:45]

I see.  I think using element.hidden is a chrome specific behavior that is not
documented anywhere. Ok, I will remove the style.  If I bring up the developer
console, I noticed that the hidden rule is marked as user agent style sheet.

+}