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 87d7a7b90692b8d6a9734ae10da2af527f2f00df..02051f15fe3371ce40d2e507de552b9df05c7600 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui_api.js
@@ -119,6 +119,52 @@ 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.
@@ -140,13 +186,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.
@@ -245,6 +284,10 @@ api.UiElementUpdate = class {
   setOpacity(opacity) {
     this.properties['opacity'] = opacity;
   }
+
+  setFill(fill) {
+    Object.assign(this.properties, fill.properties);
+  }
 };
 
 /**
@@ -266,9 +309,7 @@ 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));
   }
 };