VrShell background implemented in JS.

chrome/browser/resources/vr_shell/vr_shell_ui_api.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.
 
 var api = {};
 
 /**
  * Enumeration of scene update commands.
  * @enum {number}
  * @const
@@ skipping 101 matching lines @@
 /**
  * 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]);
 };
 
+api.FillType = {
+  'NONE': 0,
+  'SPRITE': 1,
+  'OPAQUE_GRADIENT': 2,
+  'GRID_GRADIENT': 3,
+  'CONTENT': 4
+};
+
+api.Fill = class {
+  constructor(type) {
+    this.properties = {};
+    this.properties['fillType'] = type;
+  }
+}
+
+api.Sprite = class extends api.Fill {
+  constructor(pixelX, pixelY, pixelWidth, pixelHeight) {
+    super(api.FillType.SPRITE);
+    this.properties.copyRect =
+        {x: pixelX, y: pixelY, width: pixelWidth, height: pixelHeight};
+  }
+}
+
+api.OpaqueGradient = class extends api.Fill {
+  constructor(edgeColor, centerColor) {
+    super(api.FillType.OPAQUE_GRADIENT);
+    this.properties.edgeColor = edgeColor;
+    this.properties.centerColor = centerColor;
+  }
+}
+
+api.GridGradient = class extends api.Fill {
+  constructor(edgeColor, centerColor, gridlineCount) {
+    super(api.FillType.GRID_GRADIENT);
+    this.properties.edgeColor = edgeColor;
+    this.properties.centerColor = centerColor;
+    this.properties.gridlineCount = gridlineCount;
+  }
+}
+
+api.Content = class extends api.Fill {
+  constructor() {
+    super(api.FillType.CONTENT);
+  }
+}
+
 /**
  * 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};
   }
 
   /**
    * Set the id of the element to update.
    * @param {number} id
    */
   setId(id) {
     this.properties['id'] = id;
   }
 
   /**
-  * Operates on an instance of MyClass and returns something.
-  */
-  setIsContentQuad() {
-    this.properties['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.
    * @param {number} id
    */
   setParentId(id) {
     this.properties['parentId'] = id;
   }
 
   /**
@@ skipping 78 matching lines @@
   }
 
   /**
    * Causes an element to be rendered with a specified opacity, between 0.0 and
    * 1.0. Opacity is inherited by children.
    * @param {number} opacity
    */
   setOpacity(opacity) {
     this.properties['opacity'] = opacity;
   }
+
+  setFill(fill) {
+    Object.assign(this.properties, fill.properties);
+  }
 };
 
 /**
  * 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};
+    this.setFill(new api.Sprite(pixelX, pixelY, pixelWidth, pixelHeight));
   }
 };
 
 /**
  * Enumeration of animatable properties.
  * @enum {number}
  * @const
  */
 api.Property = {
   'COPYRECT': 0,
@@ skipping 106 matching lines @@
 
   /**
    * Set the animation's final element opacity.
    * @param {number} opacity
    */
   setOpacity(opacity) {
     this.property = api.Property.OPACITY;
     this.to.x = opacity;
   }
 };