VrShell background implemented in JS.

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 bc1709cd4bd3ff9a34600aa25d5b4e42db934e23..4e4f9e2dc6269be6d7a14825220c28281d3a94c1 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
@@ -105,6 +105,51 @@ 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, tileNumber) {
+    super(api.FillType.GRID_GRADIENT);
+    this.properties.edgeColor = edgeColor;
+    this.properties.centerColor = centerColor;
+    this.properties.tileNumber = tileNumber;
+  }
+}
+
+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.
@@ -126,13 +171,6 @@ api.UiElementUpdate = class {
   }
 
   /**
-  * 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.
@@ -231,6 +269,10 @@ api.UiElementUpdate = class {
   setOpacity(opacity) {
     this.properties['opacity'] = opacity;
   }
+  
+  setFill(fill) {
+    Object.assign(this.properties, fill.properties);
+  }
 };
 
 /**
@@ -251,10 +293,8 @@ api.UiElement = class extends api.UiElementUpdate {
    */
   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));
   }
 };