Implement (but do not enable) HTML UI-driven WebVR security warnings.

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index 37e73eb7ef99b75e4dc50e5ab7b40429bbf6dc0c..3695058d88d1dcb76255651c15c4a054a5d6f681 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -64,6 +64,33 @@ cr.define('chrome.vrShellUi', function() {
   class UiState {

[mthiesse, 2016/10/19 20:11:56]

No preference for where or when you do this, but we should call this class
Scene, or SceneManger to be less confusing.

[cjgrant, 2016/10/21 17:40:48]

Done.

     constructor() {
       this.mode = -1;
+      this.secureOrigin = true;
+
+      // Permanent WebVR security warning.
+      this.webVrSecureWarning = new DomUiElement('#webvr-not-secure-permanent');
+      var distance = 0.7;
+      var angleUp = 16.3 * Math.PI / 180.0;

[bshe, 2016/10/20 18:01:53]

Should the above two variables be a const? Similar to this style:
/** @const */ var DISTANCE = 0.7;

[cjgrant, 2016/10/21 17:40:48]

Done (with additional refactoring).

+      var update = new api.UiElementUpdate();
+      update.setScale(distance, distance, 1);
+      update.setTranslation(0, Math.sin(angleUp),
+          -distance * Math.cos(angleUp));
+      update.setRotation(1.0, 0.0, 0.0, angleUp);
+      update.setPassive(true);
+      update.setVisible(false);
+      update.setLockToFieldOfView(true);
+      scene.updateElement(this.webVrSecureWarning.uiElementId, update);
+
+      // Temporary WebVR security warning.
+      this.webVrTransientSecureWarning = new DomUiElement(
+          '#webvr-not-secure-transient');
+      update = new api.UiElementUpdate();
+      update.setScale(distance, distance, 1);
+      update.setTranslation(0, 0, -distance);
+      update.setPassive(true);
+      update.setVisible(false);
+      update.setLockToFieldOfView(true);
+      scene.updateElement(this.webVrTransientSecureWarning.uiElementId, update);
+
       this.createMenuButtons();
       scene.flush();
     }
@@ -118,7 +145,41 @@ cr.define('chrome.vrShellUi', function() {
     }
 
     setMode(mode) {
+      this.mode = mode;

[bshe, 2016/10/20 18:01:53]

This got me wonder which will be called first from native side? setMode or
setSecureOrigin? Should we consider wait until we know the state of origin and
mode before try to update?

[cjgrant, 2016/10/21 17:40:48]

In 2D mode, we don't get a call to VrShell to set mode.  Presumably we only get
a call when switching to WebVR or back.  In the WebVR case, fortunately, we get
the webVR mode change before the HTML UI is ready, so our default of 2D mode is
overridden for WebVR before the UI starts up.

[bshe, 2016/10/21 18:10:47]

This can be in a separate CL if it make sense. But would it make sense to update
|mode| and |secure| in one
call to javascript? This way we don't need to worry about order.

       this.showMenuButtons(mode == api.Mode.STANDARD);
+      this.updateSecureOriginWarnings();
+    }
+
+    setSecureOrigin(secure) {
+      if (!secure) {
+        this.secureOriginTimer = setTimeout(

[bshe, 2016/10/20 18:01:53]

Do you need to clear the previous timer if not fired? It is probably fine right
now. But once we support exiting webvr fullscreen in vr shell. The timer for
previous content might fire if the user navigate to a new insecure site.

[cjgrant, 2016/10/21 17:40:49]

Done.  Good catch.

+            this.onSecureOriginTimer.bind(this), 30000);
+      } else {
+        if (this.secureOriginTimer) {
+          clearInterval(this.secureOriginTimer);
+          this.secureOriginTimer = null;
+        }
+      }
+      this.secureOrigin = secure;

[mthiesse, 2016/10/19 20:11:56]

nit: isSecureOrigin

[cjgrant, 2016/10/21 17:40:49]

Done.

+      this.updateSecureOriginWarnings();
+    }
+
+    onSecureOriginTimer() {
+      this.secureOriginTimer = null;
+      this.updateSecureOriginWarnings();
+    }
+
+    updateSecureOriginWarnings() {
+      var visible = (this.mode == 1 && !this.secureOrigin);

[bshe, 2016/10/20 18:01:53]

nit: prefer to use an enum instead of 1.

[cjgrant, 2016/10/21 17:40:48]

Done.

+      var transientVisible = (visible && this.secureOriginTimer);
+
+      var update = new api.UiElementUpdate();
+      update.setVisible(visible);
+      scene.updateElement(this.webVrSecureWarning.uiElementId, update);
+      update = new api.UiElementUpdate();
+      update.setVisible(transientVisible);
+      scene.updateElement(this.webVrTransientSecureWarning.uiElementId, update);
+      scene.flush();
     }
   };
 
@@ -138,6 +199,9 @@ cr.define('chrome.vrShellUi', function() {
     if ('mode' in dict) {
       state.setMode(dict['mode']);
     }
+    if ('secureOrigin' in dict) {
+      state.setSecureOrigin(dict['secureOrigin']);
+    }
   }
 
   return {