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 87 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
+};
+
+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, tileNumber) {
+    super(api.FillType.GRID_GRADIENT);
+    this.properties.edgeColor = edgeColor;
+    this.properties.centerColor = centerColor;
+    this.properties.tileNumber = tileNumber;
+  }
+}
+
 /**
  * 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};
@@ skipping 106 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;
   }
 };