First cut of JS closure compiler use for VR HTML UI.

Also, run clang-format to fix up styling.

BUG=
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2592143002
Cr-Commit-Position: refs/heads/master@{#441437}

chrome/browser/resources/vr_shell/compiled_resources2.gyp

+# 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.
+{
+  'targets': [
+    {
+      'target_name': 'vr_shell_ui_api',
+      'dependencies': [
+        '<(EXTERNS_GYP):chrome_send',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'vr_shell_ui_scene',
+      'dependencies': [
+        'vr_shell_ui_api',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'vr_shell_ui',
+      'dependencies': [
+        'vr_shell_ui_api',
+        'vr_shell_ui_scene',
+      ],
+      'includes': ['../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+  ],
+}

chrome/browser/resources/vr_shell/vr_shell_ui.js

@@ -77,8 +77,7 @@ var vrShellUi = (function() {
       // Pull additional custom properties from CSS.
       let style = window.getComputedStyle(domElement);
       element.setTranslation(
-          getStyleFloat(style, '--tranX'),
-          getStyleFloat(style, '--tranY'),
+          getStyleFloat(style, '--tranX'), getStyleFloat(style, '--tranY'),
           getStyleFloat(style, '--tranZ'));
 
       this.uiElementId = scene.addElement(element);
@@ -122,17 +121,29 @@ var vrShellUi = (function() {
 
   class Controls {
     constructor(contentQuadId) {
+      this.enabled = false;
+      this.reloadUiEnabled = false;
+
       this.buttons = [];
       let descriptors = [
-          ['#back', function() {
+        [
+          '#back',
+          function() {
             api.doAction(api.Action.HISTORY_BACK);
-          }],
-          ['#reload', function() {
+          }
+        ],
+        [
+          '#reload',
+          function() {
             api.doAction(api.Action.RELOAD);
-          }],
-          ['#forward', function() {
+          }
+        ],
+        [
+          '#forward',
+          function() {
             api.doAction(api.Action.HISTORY_FORWARD);
-          }],
+          }
+        ],
       ];
 
       /** @const */ var BUTTON_SPACING = 0.136;
@@ -198,13 +209,17 @@ var vrShellUi = (function() {
       /** @const */ var DISTANCE = 0.7;
       /** @const */ var ANGLE_UP = 16.3 * Math.PI / 180.0;
 
+      this.enabled = false;
+      this.secure = false;
+      this.secureOriginTimer = null;
+
       // Permanent WebVR security warning. This warning is shown near the top of
       // the field of view.
       this.webVrSecureWarning = new DomUiElement('#webvr-not-secure-permanent');
       let update = new api.UiElementUpdate();
       update.setScale(DISTANCE, DISTANCE, 1);
-      update.setTranslation(0, DISTANCE * Math.sin(ANGLE_UP),
-          -DISTANCE * Math.cos(ANGLE_UP));
+      update.setTranslation(
+          0, DISTANCE * Math.sin(ANGLE_UP), -DISTANCE * Math.cos(ANGLE_UP));
       update.setRotation(1.0, 0.0, 0.0, ANGLE_UP);
       update.setHitTestable(false);
       update.setVisible(false);
@@ -213,8 +228,7 @@ var vrShellUi = (function() {
 
       // Temporary WebVR security warning. This warning is shown in the center
       // of the field of view, for a limited period of time.
-      this.transientWarning = new DomUiElement(
-          '#webvr-not-secure-transient');
+      this.transientWarning = new DomUiElement('#webvr-not-secure-transient');
       update = new api.UiElementUpdate();
       update.setScale(DISTANCE, DISTANCE, 1);
       update.setTranslation(0, 0, -DISTANCE);
@@ -243,8 +257,8 @@ var vrShellUi = (function() {
         this.secureOriginTimer = null;
       }
       if (visible) {
-        this.secureOriginTimer = setTimeout(
-            this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS);
+        this.secureOriginTimer =
+            setTimeout(this.onTransientTimer.bind(this), TRANSIENT_TIMEOUT_MS);
       }
       this.showOrHideWarnings(visible);
     }
@@ -271,9 +285,11 @@ var vrShellUi = (function() {
     constructor(contentQuadId) {
       this.domUiElement = new DomUiElement('#omni-container');
       this.enabled = false;
+      this.loading = false;
       this.level = 0;
       this.visibilityTimeout = 0;
       this.visibilityTimer = null;
+      this.visibleAfterTransition = false;
       this.nativeState = {};
 
       // Initially invisible.
@@ -284,8 +300,8 @@ var vrShellUi = (function() {
 
       // Listen to the end of transitions, so that the box can be natively
       // hidden after it finishes hiding itself.
-      document.querySelector('#omni').addEventListener('transitionend',
-          this.onAnimationDone.bind(this));
+      document.querySelector('#omni').addEventListener(
+          'transitionend', this.onAnimationDone.bind(this));
     }
 
     getSecurityIconElementId(level) {
@@ -426,11 +442,12 @@ var vrShellUi = (function() {
       // TODO(amp): Don't show controls in CINEMA mode once MENU mode lands.
       this.omnibox.setVisibilityTimeout(
           mode == api.Mode.STANDARD && !menuMode ?
-          0 : OMNIBOX_VISIBILITY_TIMEOUT_MS);
+              0 :
+              OMNIBOX_VISIBILITY_TIMEOUT_MS);
       this.secureOriginWarnings.setEnabled(mode == api.Mode.WEB_VR);
 
-      api.setUiCssSize(uiRootElement.clientWidth, uiRootElement.clientHeight,
-          UI_DPR);
+      api.setUiCssSize(
+          uiRootElement.clientWidth, uiRootElement.clientHeight, UI_DPR);
     }
 
     setSecurityLevel(level) {

chrome/browser/resources/vr_shell/vr_shell_ui_scene.js

@@ -2,10 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var ui = (function() {
-  'use strict';
+var ui = new Object();
 
-  /**
+/**
  * The scene class assists in managing element and animations in the scene.
  * It allows scene update commands to be queued in batches, and manages
  * allocation of element and animation IDs.
@@ -19,7 +18,7 @@ var ui = (function() {
  * el.setSize(buttonWidth, buttonHeight);
  *
  * // Anchor it to the bottom of the content quad.
-   * el.setParentId(api.getContentElementId());
+ * el.setParentId(contentQuadId);
  * el.setAnchoring(api.XAnchoring.XNONE, api.YAnchoring.YBOTTOM);
  *
  * // Place it just below the content quad edge.
@@ -40,14 +39,19 @@ var ui = (function() {
  * resize.setSize(buttonWidth, buttonHeight);
  * scene.addAnimation(resize);
  * scene.flush();
+ *
+ * @struct
  */
-  class Scene {
-
+ui.Scene = class {
   constructor() {
-      this.idIndex = api.getContentElementId() + 1;
+    /** @private {number} */
+    this.idIndex = 1;
+    /** @private {Array<Object>} */
     this.commands = [];
+    /** @private {!Set<number>} */
     this.elements = new Set();
-      this.animations = {};
+    /** @private {!Object} */
+    this.animations = [];
   }
 
   /**
@@ -60,63 +64,61 @@ var ui = (function() {
 
   /**
    * Add a new UiElement to the scene, returning the ID assigned.
+   * @param {api.UiElement} element
    */
   addElement(element) {
     var id = this.idIndex++;
-      element.id = id;
-      this.commands.push({
-        'type': api.Command.ADD_ELEMENT,
-        'data': element
-      });
+    element.setId(id);
+    this.commands.push(
+        {'type': api.Command.ADD_ELEMENT, 'data': element.properties});
     this.elements.add(id);
     return id;
   }
 
   /**
    * Update an existing element, according to a UiElementUpdate object.
+   * @param {number} id
+   * @param {api.UiElementUpdate} update
    */
   updateElement(id, update) {
     // To-do:  Make sure ID exists.
-      update.id = id;
-      this.commands.push({
-        'type': api.Command.UPDATE_ELEMENT,
-        'data': update
-      });
+    update.setId(id);
+    this.commands.push(
+        {'type': api.Command.UPDATE_ELEMENT, 'data': update.properties});
   }
 
-    /*
+  /**
    * Remove an element from the scene.
+   * @param {number} id
    */
   removeElement(id) {
     // To-do: Make sure ID exists.
-      this.commands.push({
-        'type': api.Command.REMOVE_ELEMENT,
-        'data': {'id': id}
-      });
+    this.commands.push(
+        {'type': api.Command.REMOVE_ELEMENT, 'data': {'id': id}});
     this.elements.delete(id);
   }
 
   /**
    * Add a new Animation to the scene, returning the ID assigned.
+   * @param {api.Animation} animation
    */
   addAnimation(animation) {
     var id = this.idIndex++;
-      animation.id = id;
-      this.commands.push({
-        'type': api.Command.ADD_ANIMATION,
-        'data': animation
-      });
+    animation.setId(id);
+    this.commands.push({'type': api.Command.ADD_ANIMATION, 'data': animation});
     this.animations[id] = animation.meshId;
     return id;
   }
 
-    /*
+  /**
    * Remove an animation from the scene.
    *
    * Note that animations are flushed when they complete and are not required
    * to be removed. Also new animations of the same type will effectively
    * override the original so there is no need to remove in that scenario
    * either.
+   *
+   * @param {number} id
    */
   removeAnimation(id) {
     // To-do: Make sure ID exists.
@@ -127,13 +129,13 @@ var ui = (function() {
     delete this.animations[id];
   }
 
-    /*
+  /**
    * Purge all elements in the scene.
    */
   purge() {
     var ids = Object.keys(this.animations);
     for (let id_key of ids) {
-        var id = parseInt(id_key);
+      var id = parseInt(id_key, 10);
       this.removeAnimation(id);
     }
     var ids = this.elements.values();
@@ -142,9 +144,4 @@ var ui = (function() {
     }
     this.flush();
   }
-  };
-
-  return {
-    Scene: Scene,
-  };
-})();
+};