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..ac008e08e2473d3802fdffc4f0ffe90567e559e7 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.css
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.css
@@ -4,7 +4,7 @@
 
 html {
   background-color: rgba(255, 255, 255, 0.2);
-  font-size: 20px;
+  font-family: 'Roboto', sans-serif;

[Dan Beam, 2016/10/03 18:12:48]

can you use text_defaults.css or text_defaults_md.css?  this will not match the
rest of chrome in many cases.

the Roboto font often does not exist as a font on users' platforms, and it takes
a little bit of magic to load Chrome's copy and get different correct rendering
in different weights, and also CJK support in Roboto is bad and the fallback
font used by Chrome different per-platform.

tl;dr - if you slap a

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

into vr_shell_ui.html like I mentioned earlier on, it should just work

[klausw, 2016/10/03 19:47:30]

Done, and thank you. I got this working with a bit of extra plumbing. Does this
look right in vr_shell_ui_ui.cc?

  const std::string& app_locale = g_browser_process->GetApplicationLocale();
  webui::SetLoadTimeDataDefaults(app_locale, &localized_strings);

 }
 
 .ui-button {

[Dan Beam, 2016/10/03 18:12:48]

this is a reallly generic name, so it's hard to understand where this is used or
if it's duplicative with all the other code you're adding

[klausw, 2016/10/03 19:47:30]

This CSS is for the pre-existing preliminary navigation buttons as used by
VrShell (2D browsing in VR), the .js file can create buttons dynamically. The
WebVR code doesn't use it.

@@ -15,3 +15,71 @@ html {
   text-align: center;
   vertical-align: middle;
 }
+
+.webvr-message-box {
+  align-items: center;
+  background: transparent;

[Dan Beam, 2016/10/03 18:12:48]

why do you need this background: rule?

[klausw, 2016/10/03 19:47:31]

Removed.

+  display: flex;
+  flex-direction: column;
+  font-weight: 400;

[Dan Beam, 2016/10/03 18:12:48]

which font-weight are you overriding?  note, 400 = normal

[klausw, 2016/10/03 19:47:31]

Removed. This used to set font-weight: 300 in an earlier version, I didn't
realize that the new value was the same as the default.

+  justify-content: center;
+  position: absolute;
+}
+
+#webvr-not-secure-permanent {
+  height: 128px;

[Dan Beam, 2016/10/03 18:12:48]

what's the natural size of the svg?

[klausw, 2016/10/03 19:47:31]

The SVG is 36px x 36px and is used at that size. The dimensions here are for the
overall message box which is an absolutely positioned DIV. The UI code uses
fixed-sized pixel rectangles from the UI HTML page as textures for GL rendering,
so it needs to know where they are placed and how big they are.

+  left: 0;

[Dan Beam, 2016/10/03 18:12:48]

i noticed you mentioned RTL earlier: are you sure using left: but not right:
works in RTL?  is this taking up the entire width of its parent?

[klausw, 2016/10/03 19:47:31]

This is intentionally text direction independent. It's an absolutely positioned
fixed-size rectangle, only the content of the div needs to be RTL-compatible.

+  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;

[Dan Beam, 2016/10/03 18:12:48]

why .5px?

[klausw, 2016/10/03 19:47:30]

I was trying to exactly replicate the UI review approved message image, both
10px and 11px didn't quite match.

+  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);

[Dan Beam, 2016/10/03 18:12:48]

spaces after commas (i.e. rgba(0, 0, 0, 0.5);)

[klausw, 2016/10/03 19:47:31]

Done.

+  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;
+}
+
+#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);

[Dan Beam, 2016/10/03 18:19:19]

also note that this UI looks very much like a material design tooltip

https://material.google.com/components/tooltips.html

in which case you should be using 90% opacity and "grey 700" which can be
accessed via var(--google-grey-700) if you import
chrome://resources/polymer/v1_0/components-chromium/paper-styles/color.html or
duplicate the equivalent of #616161 (or rgb(97, 97, 97)).

https://material.google.com/style/color.html

note that this is not the same as rgba(97, 97, 97, .9) as the text is rendered
in different opacity

[klausw, 2016/10/03 19:47:31]

I'll take this up with the UI designer, I'm reluctant to change it unilaterally
due to the previous UI review. One possible concern is that the material design
tooltip may have insufficient contrast since it's a lighter grey.

+  border-radius: 6px;
+  box-sizing: border-box;

[Dan Beam, 2016/10/03 18:12:49]

why do you need to change the box-sizing?

[klausw, 2016/10/03 19:47:31]

AFAIK the goal here was to ensure that the rounded corners remain visible within
the allotted width. This seemed less fragile than manually subtracting the
padding from the width.

+  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;

[Dan Beam, 2016/10/03 18:12:48]

i don't understand where any of these widths come from.

also, with such a small max/min width compared to a larger width, it seems like
some of these styles are duplicative

[klausw, 2016/10/03 19:47:31]

The width: 512px matches the absolutely positioned div which is used as the
source of the GL texture for rendering the message. The min and max height/width
are intended to provide some flexibility for translated messages with varying
text lengths. The overall space available is inflexible, but we want to make
sure the message boxes are sufficiently large to be clearly visible even for
short text while not being larger than necessary.

+}