VrShell: implement insecure content warning display

chrome/browser/resources/vr_shell/vr_shell_ui.css

 /* Copyright 2016 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. */
 
+@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 {
   background: white;
   border-radius: 6px;
   overflow: hidden;
   position: absolute;
   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;
+}