VrShell: implement insecure content warning display

chrome/browser/resources/vr_shell/vr_shell_ui.css

Index: chrome/browser/resources/vr_shell/vr_shell_ui.css
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.css b/chrome/browser/resources/vr_shell/vr_shell_ui.css
index 66774d091860eec3fe86b0e2e71ecba881c330a4..122d84d09e73fdfac8d580a326153dd5d8120db4 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.css
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.css
@@ -2,9 +2,10 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+@import url(chrome://resources/css/text_defaults_md.css);

[Dan Beam, 2016/10/03 20:30:59]

sorry, i gave you bad advice

<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

is what I meant.

what you're doing works but it blocks this stylesheet from loading whereas
turning this @import into a <link> lets things load in parallel

[klausw, 2016/10/03 21:28:19]

Done.

+
 html {
   background-color: rgba(255, 255, 255, 0.2);
-  font-size: 20px;
 }
 
 .ui-button {
@@ -15,3 +16,69 @@ html {
   text-align: center;
   vertical-align: middle;
 }
+
+.webvr-message-box {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: absolute;
+}
+
+#webvr-not-secure-permanent {
+  height: 128px;
+  left: 0;
+  top: 0;
+  width: 512px;
+}
+
+#webvr-not-secure-permanent .webvr-not-secure-icon {
+  display: inline-block;
+  margin: 20px 0;
+  vertical-align: middle;
+}
+
+#webvr-not-secure-permanent .webvr-string {
+  display: inline-block;
+  margin: 20px 10.5px;
+  vertical-align: middle;
+}
+
+#webvr-not-secure-permanent .webvr-box {
+  background-color: white;
+  border-radius: 6px;
+  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+  box-sizing: border-box;
+  color: #444;
+  font-size: 26px;
+  height: 78px;
+  max-width: 472px;
+  min-width: 226px;
+  overflow: hidden;
+  padding: 0 20px;
+  white-space: nowrap;

[Dan Beam, 2016/10/03 20:30:59]

do these widths work well for German?  how does this elide?

[klausw, 2016/10/03 21:28:19]

We don't have the translated strings yet. I tested manually, there's room for
"Das ist sehr unsicher, Vorsicht bitte!" which would be a lot longer than the
English "Not secure" message. (It'll probably be something like "Nicht sicher",
the string info included a request to translators to keep it short.)

In the unlikely case of too-long text, it currently simply truncates, but it'll
be fairly obvious visually that the message is incomplete since it'll mash up
right against the border of the element with no white padding.

+}
+
+#webvr-not-secure-transient {
+  height: 256px;
+  left: 0;
+  top: 128px;
+  width: 512px;
+}
+
+#webvr-not-secure-transient > div {
+  background-color: rgba(26, 26, 26, 0.8);
+  border-radius: 6px;
+  box-sizing: border-box;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  font-size: 26px;
+  justify-content: center;
+  line-height: 1.4;
+  max-height: 210px;
+  min-height: 160px;
+  padding: 20px;
+  text-align: center;
+  width: 512px;
+}