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

chrome/browser/resources/vr_shell/vr_shell_ui_api.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui_api.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui_api.js b/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
index 8f64ed4b0d7fdc07e95808fb2849cac0851b8367..877a8ea54e649cf6c6a4b41042c73fb607a654c9 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
@@ -2,317 +2,361 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-var api = (function() {
-  'use strict';
+var api = new Object();
+
+/**
+ * Enumeration of scene update commands.
+ * @enum {number}
+ * @const
+ */
+api.Command = {
+  'ADD_ELEMENT': 0,
+  'UPDATE_ELEMENT': 1,
+  'REMOVE_ELEMENT': 2,
+  'ADD_ANIMATION': 3,
+  'REMOVE_ANIMATION': 4
+};
+
+/**
+ * Sends one or more commands to native scene management. Commands are used
+ * to add, modify or remove elements and animations. For examples of how to
+ * format command parameters, refer to examples in scene.js.
+ * @param {Array<Object>} commands
+ */
+api.sendCommands = function(commands) {
+  chrome.send('updateScene', commands);
+};
+
+/**
+ * Enumeration of valid Anchroing for X axis.
+ * An element can either be anchored to the left, right, or center of the main
+ * content rect (or it can be absolutely positioned using NONE). Any
+ * translations applied will be relative to this anchoring.
+ * @enum {number}
+ * @const
+ */
+api.XAnchoring = {
+  'XNONE': 0,
+  'XLEFT': 1,
+  'XRIGHT': 2
+};
+
+/**
+ * Enumeration of valid Anchroing for Y axis.
+ * @enum {number}
+ * @const
+ */
+api.YAnchoring = {
+  'YNONE': 0,
+  'YTOP': 1,
+  'YBOTTOM': 2
+};
+
+/**
+ * Enumeration of actions that can be triggered by the HTML UI.
+ * @enum {number}
+ * @const
+ */
+api.Action = {
+  'HISTORY_BACK': 0,
+  'HISTORY_FORWARD': 1,
+  'RELOAD': 2,
+  'ZOOM_OUT': 3,
+  'ZOOM_IN': 4,
+  'RELOAD_UI': 5,
+};
+
+/**
+ * Enumeration of modes that can be specified by the native side.
+ * @enum {number}
+ * @const
+ */
+api.Mode = {
+  'UNKNOWN': -1,
+  'STANDARD': 0,
+  'WEB_VR': 1,
+};
+
+/**
+ * Triggers an Action.
+ * @param {api.Action} action
+ */
+api.doAction = function(action) {
+  chrome.send('doAction', [action]);
+};
+
+/**
+ * Notify native scene management that DOM loading has completed, at the
+ * specified page size.
+ */
+api.domLoaded = function() {
+  chrome.send('domLoaded');
+};
+
+/**
+ * Sets the CSS size for this page.
+ * @param {number} width
+ * @param {number} height
+ * @param {number} dpr
+ */
+api.setUiCssSize = function(width, height, dpr) {
+  chrome.send('setUiCssSize', [width, height, dpr]);
+};
+
+/**
+ * Represents updates to UI element properties. Any properties set on this
+ * object are relayed to an underlying native element via scene command.
+ * Properties that are not set on this object are left unchanged.
+ * @struct
+ */
+api.UiElementUpdate = class {
+  constructor() {
+    /** @private {!Object} */
+    this.properties = {'id': -1};
+  }
 
   /**
-   * Enumeration of scene update commands.
-   * @enum {number}
-   * @const
+   * Set the id of the element to update.
+   * @param {number} id
    */
-  var Command = Object.freeze({
-    'ADD_ELEMENT': 0,
-    'UPDATE_ELEMENT': 1,
-    'REMOVE_ELEMENT': 2,
-    'ADD_ANIMATION': 3,
-    'REMOVE_ANIMATION': 4
-  });
+  setId(id) {
+    this.properties['id'] = id;
+  }
+
+  /**
+  * Operates on an instance of MyClass and returns something.
+  */
+  setIsContentQuad() {
+    this.properties['contentQuad'] = true;
+  }
 
   /**
-   * Sends one or more commands to native scene management. Commands are used
-   * to add, modify or remove elements and animations. For examples of how to
-   * format command parameters, refer to examples in scene.js.
+   * Specify a parent for this element. If set, this element is positioned
+   * relative to its parent element, rather than absolutely. This allows
+   * elements to automatically move with a parent.
+   * @param {number} id
    */
-  function sendCommands(commands) {
-    chrome.send('updateScene', commands);
+  setParentId(id) {
+    this.properties['parentId'] = id;
   }
 
   /**
-   * Returns the element ID of the browser content quad, allowing the content to
-   * be manimulated in the scene.
+   * Specify the width and height (in meters) of an element.
+   * @param {number} x
+   * @param {number} y
    */
-  function getContentElementId() {
-    return 0;
+  setSize(x, y) {
+    this.properties['size'] = {x: x, y: y};
   }
 
   /**
-   * Enumeration of valid Anchroing for X axis.
-   * An element can either be anchored to the left, right, or center of the main
-   * content rect (or it can be absolutely positioned using NONE). Any
-   * translations applied will be relative to this anchoring.
-   * @enum {number}
-   * @const
+   * Specify optional scaling of the element, and any children.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
    */
-  var XAnchoring = Object.freeze({
-    'XNONE': 0,
-    'XLEFT': 1,
-    'XRIGHT': 2
-  });
+  setScale(x, y, z) {
+    this.properties['scale'] = {x: x, y: y, z: z};
+  }
 
   /**
-   * Enumeration of valid Anchroing for Y axis.
-   * @enum {number}
-   * @const
+   * Specify rotation for the element. The rotation is specified in axis-angle
+   * representation (rotate around unit vector [x, y, z] by 'a' radians).
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @param {number} a
    */
-  var YAnchoring = Object.freeze({
-    'YNONE': 0,
-    'YTOP': 1,
-    'YBOTTOM': 2
-  });
+  setRotation(x, y, z, a) {
+    this.properties['rotation'] = {x: x, y: y, z: z, a: a};
+  }
 
   /**
-   * Enumeration of actions that can be triggered by the HTML UI.
-   * @enum {number}
-   * @const
+   * Specify the translation of the element. If anchoring is specified, the
+   * offset is applied to the anchoring position rather than the origin.
+   * Translation is applied after scaling and rotation.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
    */
-  var Action = Object.freeze({
-    'HISTORY_BACK': 0,
-    'HISTORY_FORWARD': 1,
-    'RELOAD': 2,
-    'ZOOM_OUT': 3,
-    'ZOOM_IN': 4,
-    'RELOAD_UI': 5,
-  });
+  setTranslation(x, y, z) {
+    this.properties['translation'] = {x: x, y: y, z: z};
+  }
 
   /**
-   * Enumeration of modes that can be specified by the native side.
-   * @enum {number}
-   * @const
+   * Anchoring allows a rectangle to be positioned relative to the edge of
+   * its parent, without being concerned about the size of the parent.
+   * Values should be XAnchoring and YAnchoring elements.
+   * Example: element.setAnchoring(XAnchoring.XNONE, YAnchoring.YBOTTOM);
+   * @param {number} x
+   * @param {number} y
    */
-  var Mode = Object.freeze({
-    'UNKNOWN': -1,
-    'STANDARD': 0,
-    'WEB_VR': 1,
-  });
+  setAnchoring(x, y) {
+    this.properties['xAnchoring'] = x;
+    this.properties['yAnchoring'] = y;
+  }
 
   /**
-   * Triggers an Action.
+   * Visibility controls whether the element is rendered.
+   * @param {boolean} visible
    */
-  function doAction(action) {
-    chrome.send('doAction', [action]);
+  setVisible(visible) {
+    this.properties['visible'] = !!visible;
   }
 
   /**
-   * Notify native scene management that DOM loading has completed, at the
-   * specified page size.
+   * Hit-testable implies that the reticle will hit the element, if visible.
+   * @param {boolean} testable
    */
-  function domLoaded() {
-    chrome.send('domLoaded');
+  setHitTestable(testable) {
+    this.properties['hitTestable'] = !!testable;
   }
 
   /**
-   * Sets the CSS size for this page.
+   * Causes an element to be rendered relative to the field of view, rather
+   * than the scene.  Elements locked in this way should not have a parent.
+   * @param {boolean} locked
    */
-  function setUiCssSize(width, height, dpr) {
-    chrome.send('setUiCssSize', [width, height, dpr]);
+  setLockToFieldOfView(locked) {
+    this.properties['lockToFov'] = !!locked;
+  }
+};
+
+/**
+ * Represents a new UI element. This object builds on UiElementUpdate,
+ * forcing the underlying texture coordinates to be specified.
+ * @struct
+ */
+api.UiElement = class extends api.UiElementUpdate {
+  /**
+   * Constructor of UiElement.
+   * pixelX and pixelY values indicate the left upper corner; pixelWidth and
+   * pixelHeight is width and height of the texture to be copied from the web
+   * contents.
+   * @param {number} pixelX
+   * @param {number} pixelY
+   * @param {number} pixelWidth
+   * @param {number} pixelHeight
+   */
+  constructor(pixelX, pixelY, pixelWidth, pixelHeight) {
+    super();
+
+    /** @private {Object} */
+    this.properties['copyRect'] =
+        {x: pixelX, y: pixelY, width: pixelWidth, height: pixelHeight};
+  }
+};
+
+/**
+ * Enumeration of animatable properties.
+ * @enum {number}
+ * @const
+ */
+api.Property = {
+  'COPYRECT': 0,
+  'SIZE': 1,
+  'TRANSLATION': 2,
+  'SCALE': 3,
+  'ROTATION': 4
+};
+
+/**
+ * Enumeration of easing type.
+ * @enum {number}
+ * @const
+ */
+api.Easing = {
+  'LINEAR': 0,
+  'CUBICBEZIER': 1,
+  'EASEIN': 2,
+  'EASEOUT': 3
+};
+
+/**
+ * Base animation class. An animation can vary only one object property.
+ * @struct
+ */
+api.Animation = class {
+  constructor(elementId, durationMs) {
+    /** @private {number} */
+    this.id = -1;
+    /** @private {number} */
+    this.meshId = elementId;
+    /** @private {number} */
+    this.property = -1;
+    /** @private {Object} */
+    this.to = {};
+    /** @private {Object} */
+    this.easing = {};
+
+    // How many milliseconds in the future to start the animation.
+    /** @private {number} */
+    this.startInMillis = 0.0;
+
+    // Duration of the animation (milliseconds).
+    /** @private {number} */
+    this.durationMillis = durationMs;
+
+    this.easing.type = api.Easing.LINEAR;
   }
 
   /**
-   * Represents updates to UI element properties. Any properties set on this
-   * object are relayed to an underlying native element via scene command.
-   * Properties that are not set on this object are left unchanged.
+   * Set the id of the animation.
+   * @param {number} id
    */
-  class UiElementUpdate {
-
-    setIsContentQuad() {
-      this.contentQuad = true;
-    }
-
-    /**
-     * Specify a parent for this element. If set, this element is positioned
-     * relative to its parent element, rather than absolutely. This allows
-     * elements to automatically move with a parent.
-     */
-    setParentId(id) {
-      this.parentId = id;
-    }
-
-    /**
-     * Specify the width and height (in meters) of an element.
-     */
-    setSize(x, y) {
-      this.size = { x: x, y: y };
-    }
-
-    /**
-     * Specify optional scaling of the element, and any children.
-     */
-    setScale(x, y, z) {
-      this.scale = { x: x, y: y, z: z };
-    }
-
-    /**
-     * Specify rotation for the element. The rotation is specified in axis-angle
-     * representation (rotate around unit vector [x, y, z] by 'a' radians).
-     */
-    setRotation(x, y, z, a) {
-      this.rotation = { x: x, y: y, z: z, a: a };
-    }
-
-    /**
-     * Specify the translation of the element. If anchoring is specified, the
-     * offset is applied to the anchoring position rather than the origin.
-     * Translation is applied after scaling and rotation.
-     */
-    setTranslation(x, y, z) {
-      this.translation = { x: x, y: y, z: z };
-    }
-
-    /**
-     * Anchoring allows a rectangle to be positioned relative to the edge of
-     * its parent, without being concerned about the size of the parent.
-     * Values should be XAnchoring and YAnchoring elements.
-     * Example: element.setAnchoring(XAnchoring.XNONE, YAnchoring.YBOTTOM);
-     */
-    setAnchoring(x, y) {
-      this.xAnchoring = x;
-      this.yAnchoring = y;
-    }
-
-    /**
-     * Visibility controls whether the element is rendered.
-     */
-    setVisible(visible) {
-      this.visible = !!visible;
-    }
-
-    /**
-     * Hit-testable implies that the reticle will hit the element, if visible.
-     */
-    setHitTestable(testable) {
-      this.hitTestable = !!testable;
-    }
-
-    /**
-     * Causes an element to be rendered relative to the field of view, rather
-     * than the scene.  Elements locked in this way should not have a parent.
-     */
-    setLockToFieldOfView(locked) {
-      this.lockToFov = !!locked;
-    }
-  };
+  setId(id) {
+    this.id = id;
+  }
 
   /**
-   * Represents a new UI element. This object builds on UiElementUpdate,
-   * forcing the underlying texture coordinates to be specified.
+   * Set the animation's final element size.
+   * @param {number} width
+   * @param {number} height
    */
-  class UiElement extends UiElementUpdate {
-    /**
-     * Constructor of UiElement.
-     * pixelX and pixelY values indicate the left upper corner; pixelWidth and
-     * pixelHeight is width and height of the texture to be copied from the web
-     * contents.
-     */
-    constructor(pixelX, pixelY, pixelWidth, pixelHeight) {
-      super();
-
-      this.copyRect = {
-          x: pixelX,
-          y: pixelY,
-          width: pixelWidth,
-          height: pixelHeight
-      };
-    }
-  };
+  setSize(width, height) {
+    this.property = api.Property.SIZE;
+    this.to.x = width;
+    this.to.y = height;
+  }
 
   /**
-   * Enumeration of animatable properties.
-   * @enum {number}
-   * @const
+   * Set the animation's final element scale.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
    */
-  var Property = Object.freeze({
-    'COPYRECT': 0,
-    'SIZE': 1,
-    'TRANSLATION': 2,
-    'ORIENTATION': 3,
-    'ROTATION': 4
-  });
+  setScale(x, y, z) {
+    this.property = api.Property.SCALE;
+    this.to.x = x;
+    this.to.y = y;
+    this.to.z = z;
+  }
 
   /**
-   * Enumeration of easing type.
-   * @enum {number}
-   * @const
+   * Set the animation's final element rotation.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
+   * @param {number} a
    */
-  var Easing = Object.freeze({
-    'LINEAR': 0,
-    'CUBICBEZIER': 1,
-    'EASEIN': 2,
-    'EASEOUT': 3
-  });
+  setRotation(x, y, z, a) {
+    this.property = api.Property.ROTATION;
+    this.to.x = x;
+    this.to.y = y;
+    this.to.z = z;
+    this.to.a = a;
+  }
 
   /**
-   * Base animation class. An animation can vary only one object property.
+   * Set the animation's final element translation.
+   * @param {number} x
+   * @param {number} y
+   * @param {number} z
    */
-  class Animation {
-    constructor(elementId, durationMs) {
-      this.meshId = elementId;
-      this.to = {};
-      this.easing = {};
-      this.easing.type = api.Easing.LINEAR;
-
-      // How many milliseconds in the future to start the animation.
-      this.startInMillis = 0.0;
-
-      // Duration of the animation (milliseconds).
-      this.durationMillis = durationMs;
-    }
-
-    /**
-     * Set the animation's final element size.
-     */
-    setSize(width, height) {
-      this.property = api.Property.SIZE;
-      this.to.x = width;
-      this.to.y = height;
-    }
-
-    /**
-     * Set the animation's final element scale.
-     */
-    setScale(x, y, z) {
-      this.property = api.Property.SCALE;
-      this.to.x = x;
-      this.to.y = y;
-      this.to.z = z;
-    }
-
-    /**
-     * Set the animation's final element rotation.
-     */
-    setRotation(x, y, z, a) {
-      this.property = api.Property.ROTATION;
-      this.to.x = x;
-      this.to.y = y;
-      this.to.z = z;
-      this.to.a = a;
-    }
-
-    /**
-     * Set the animation's final element translation.
-     */
-    setTranslation(x, y, z) {
-      this.property = api.Property.TRANSLATION;
-      this.to.x = x;
-      this.to.y = y;
-      this.to.z = z;
-    }
-  };
-
-  return {
-    sendCommands: sendCommands,
-    XAnchoring: XAnchoring,
-    YAnchoring: YAnchoring,
-    Property: Property,
-    Easing: Easing,
-    Command: Command,
-    Action: Action,
-    Mode: Mode,
-    getContentElementId: getContentElementId,
-    UiElement: UiElement,
-    UiElementUpdate: UiElementUpdate,
-    Animation: Animation,
-    doAction: doAction,
-    domLoaded: domLoaded,
-    setUiCssSize: setUiCssSize,
-  };
-})();
+  setTranslation(x, y, z) {
+    this.property = api.Property.TRANSLATION;
+    this.to.x = x;
+    this.to.y = y;
+    this.to.z = z;
+  }
+};