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

chrome/browser/resources/vr_shell/vr_shell_ui.js

 // 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.
 
 cr.define('chrome.vrShellUi', function() {
   'use strict';
 
   var scene = new ui.Scene();
   var state;
 
@@ skipping 43 matching lines @@
 
     onMouseEnter() {
       this.configure(1, 1, 0.015);
     }
 
     onMouseLeave() {
       this.configure(0.8, 0, 0);
     }
   };
 
   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();
     }
 
     createMenuButtons() {
       this.menuButtons = [];
       var buttons = [
           ['#back', function() {
             api.doAction(api.Action.HISTORY_BACK);
           }],
@@ skipping 34 matching lines @@
     showMenuButtons(visible) {
       for (var i = 0; i < this.menuButtons.length; i++) {
         var update = new api.UiElementUpdate();
         update.setVisible(visible);
         scene.updateElement(this.menuButtons[i].uiElementId, update);
       }
       scene.flush();
     }
 
     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();
     }
   };
 
   function initialize() {
 
     // Change the body background so that the transparency applies.
     window.setTimeout(function() {
       document.body.parentNode.style.backgroundColor = 'rgba(255,255,255,0)';
     }, 100);
 
     state = new UiState();
 
     api.domLoaded();
   }
 
   function command(dict) {
     if ('mode' in dict) {
       state.setMode(dict['mode']);
     }
+    if ('secureOrigin' in dict) {
+      state.setSecureOrigin(dict['secureOrigin']);
+    }
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 });
 
 document.addEventListener('DOMContentLoaded', chrome.vrShellUi.initialize);