PROTOTYPE: Generic custom CSS property parsing

chrome/browser/resources/vr_shell/vr_shell_ui.js

Index: chrome/browser/resources/vr_shell/vr_shell_ui.js
diff --git a/chrome/browser/resources/vr_shell/vr_shell_ui.js b/chrome/browser/resources/vr_shell/vr_shell_ui.js
index 12c5f8cbc26a46dcdc07e8ec3bdcea767e87dd64..cd59de2ba7cbbfd21759e7c099c6bd177a4cdfdf 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -43,13 +43,13 @@ var vrShellUi = (function() {
       this.menuMode = false;
       this.fullscreen = false;
 
-      let element = new api.UiElement(0, 0, 0, 0);
-      element.setFill(new api.Content());
-      element.setVisible(false);
-      element.setSize(
-          this.SCREEN_HEIGHT * this.SCREEN_RATIO, this.SCREEN_HEIGHT);
-      element.setTranslation(0, 0, -this.BROWSING_SCREEN_DISTANCE);
-      this.elementId = ui.addElement(element);
+      this.uiElement = new DomUiElement('#content-quad-element');
+      this.elementId = this.uiElement.uiElementId;
+
+      let update = new api.UiElementUpdate();
+      update.setFill(new api.Content());
+      update.setVisible(false);
+      ui.updateElement(this.elementId, update);
 
       // Place an invisible but hittable plane behind the content quad, to keep
       // the reticle roughly planar with the content if near content.
@@ -92,29 +92,16 @@ var vrShellUi = (function() {
     }
 
     updateState() {
-      // Defaults content quad parameters.
-      let y = 0;
-      let distance = this.BROWSING_SCREEN_DISTANCE;
-      let height = this.SCREEN_HEIGHT;
-
-      // Mode-specific overrides.
+      // Set style according to mode.
+      this.uiElement.domElement.classList.remove('menu');
+      this.uiElement.domElement.classList.remove('fullscreen');
       if (this.menuMode) {
-        y = this.MENU_MODE_SCREEN_ELEVATION;
-        distance = this.MENU_MODE_SCREEN_DISTANCE;
-        height = this.MENU_MODE_SCREEN_HEIGHT;
+        this.uiElement.domElement.classList.add('menu');
       } else if (this.fullscreen) {
-        distance = this.FULLSCREEN_DISTANCE;
+        this.uiElement.domElement.classList.add('fullscreen');
       }
 
-      let anim;
-      anim = new api.Animation(this.elementId, ANIM_DURATION);
-      anim.setTranslation(0, y, -distance);
-      ui.addAnimation(anim);
-      anim = new api.Animation(this.elementId, ANIM_DURATION);
-      anim.setSize(height * this.SCREEN_RATIO, height);
-      ui.addAnimation(anim);
-
-      ui.setBackgroundDistance(distance * this.BACKGROUND_DISTANCE_MULTIPLIER);
+      //ui.setBackgroundDistance(distance * this.BACKGROUND_DISTANCE_MULTIPLIER);
     }
 
     // TODO(crbug/643815): Add a method setting aspect ratio (and possible
@@ -129,6 +116,26 @@ var vrShellUi = (function() {
     constructor(domId) {
       let domElement = document.querySelector(domId);
 
+      // Attach a mutation observer to catch our custom scene style changes.
+      this.observer = new MutationObserver(function(mutations) {
+        let update = new api.UiElementUpdate();
+        let modifications = false;
+
+        mutations.forEach(function(update, mutation) {
+          modifications = modifications || this.parseCustomStyle(mutation.target, update);
+        }.bind(this, update));
+
+        if (modifications) {
+          ui.updateElement(this.uiElementId, update);
+        }
+      }.bind(this));
+      var config = {
+        attributes: true,
+        subtree: true,
+        //attributeFilter: ['style']  // TODO: Better filtering?
+      };
+      this.observer.observe(domElement, config);
+
       // Pull copy rectangle from the position of the element.
       let rect = domElement.getBoundingClientRect();
       let pixelX = Math.floor(rect.left);
@@ -139,18 +146,52 @@ var vrShellUi = (function() {
       let element = new api.UiElement(pixelX, pixelY, pixelWidth, pixelHeight);
       element.setSize(pixelWidth / 1000, pixelHeight / 1000);
 
-      // Pull additional custom properties from CSS.
-      let style = window.getComputedStyle(domElement);
-      this.translationX = getStyleFloat(style, '--tranX');
-      this.translationY = getStyleFloat(style, '--tranY');
-      this.translationZ = getStyleFloat(style, '--tranZ');
-      element.setTranslation(
-          this.translationX, this.translationY, this.translationZ);
+      // Grab initial custom scene styling.
+      this.parseCustomStyle(domElement, element);
+      var items = domElement.getElementsByTagName("*");
+      for (var i = 0; i < items.length; i++) {
+        this.parseCustomStyle(items[i], element);
+      }
 
       this.uiElementId = ui.addElement(element);
       this.uiAnimationId = -1;
       this.domElement = domElement;
     }
+
+    parseCustomStyle(element, update) {
+      let propertyMap = {
+        '--tranX': 'translationX',
+        '--tranY': 'translationY',
+        '--tranZ': 'translationZ',
+        '--sizeX': 'sizeX',
+        '--sizeY': 'sizeY',
+        '--scaleX': 'scaleX',
+        '--scaleY': 'scaleY',
+        '--scaleZ': 'scaleZ',
+        '--rotationX': 'rotationX',
+        '--rotationY': 'rotationY',
+        '--rotationZ': 'rotationZ',
+        '--rotationAngle': 'rotationAngle',
+        '--opacity': 'opacity',
+      };
+
+      // For each custom property we recognize, apply its value to the
+      // corresponding UI element property.
+      let cs = window.getComputedStyle(element);
+      let keys = Object.keys(propertyMap);
+      let len = keys.length;
+      let modifications = false;
+      for (var i = 0; i < len; i++) {
+        let item = keys[i];
+
+        let value = parseFloat(cs.getPropertyValue(item));
+        if (isNaN(value))
+          continue;
+        update.properties[propertyMap[item]] = value;
+        modifications = true;
+      }
+      return modifications;
+    }
   };
 
   class RoundButton extends DomUiElement {
@@ -506,16 +547,6 @@ var vrShellUi = (function() {
             new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
         opacityAnimation.setOpacity(this.hidden ? 0.0 : this.opacity);
         ui.addAnimation(opacityAnimation);
-
-        // Drop the position as it fades, or raise the position if appearing.
-        let yOffset = this.hidden ? this.fadeYOffset : 0;
-        let positionAnimation =
-            new api.Animation(this.domUiElement.uiElementId, this.fadeTimeMs);
-        positionAnimation.setTranslation(
-            this.domUiElement.translationX,
-            this.domUiElement.translationY + yOffset,
-            this.domUiElement.translationZ);
-        ui.addAnimation(positionAnimation);
       }
 
       ui.flush();
@@ -803,7 +834,8 @@ var vrShellUi = (function() {
   class UiManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
-      this.menuMode = false;
+      // this.menuMode = false;
+      this.menuMode = true;
       this.fullscreen = false;
 
       this.background = new Background();