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 283434ce81bb13e6ccda3378b6c023d0dad0d6f9..1bc726b1119d61c6bc0567f6d7533462a3f940c1 100644
--- a/chrome/browser/resources/vr_shell/vr_shell_ui.js
+++ b/chrome/browser/resources/vr_shell/vr_shell_ui.js
@@ -42,13 +42,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');

[cjgrant, 2017/02/15 16:34:28]

This is where we tie the content quad to its dummy DOM element.

+      this.elementId = this.uiElement.uiElementId;
+
+      let update = new api.UiElementUpdate();
+      update.setFill(new api.Content());
+      update.setVisible(false);
+      ui.updateElement(this.elementId, update);
     }
 
     setEnabled(enabled) {
@@ -79,27 +79,23 @@ var vrShellUi = (function() {
     }
 
     updateState() {
-      // Defaults content quad parameters.
-      let y = 0;
-      let z = -this.BROWSING_SCREEN_DISTANCE;
-      let height = this.SCREEN_HEIGHT;
 
-      // Mode-specific overrides.
+      // Set style according to mode.

[cjgrant, 2017/02/15 16:34:28]

Here, we're taking the app button presses, and pushing style changes to the DOM.
 I removed animation, and just edit the position for now, but note that there is
no explicit UI element update called here.

+      this.uiElement.domElement.classList.remove('menu');
+      this.uiElement.domElement.classList.remove('fullscreen');
       if (this.menuMode) {
-        y = this.MENU_MODE_SCREEN_ELEVATION;
-        z = -this.MENU_MODE_SCREEN_DISTANCE;
-        height = this.MENU_MODE_SCREEN_HEIGHT;
+        this.uiElement.domElement.classList.add('menu');
       } else if (this.fullscreen) {
-        z = -this.FULLSCREEN_DISTANCE;
+        this.uiElement.domElement.classList.add('fullscreen');
       }
 
-      let anim;
-      anim = new api.Animation(this.elementId, ANIM_DURATION);
-      anim.setTranslation(0, y, z);
-      ui.addAnimation(anim);
-      anim = new api.Animation(this.elementId, ANIM_DURATION);
-      anim.setSize(height * this.SCREEN_RATIO, height);
-      ui.addAnimation(anim);
+      // let anim;
+      // anim = new api.Animation(this.elementId, ANIM_DURATION);
+      // anim.setTranslation(0, y, z);
+      // ui.addAnimation(anim);
+      // anim = new api.Animation(this.elementId, ANIM_DURATION);
+      // anim.setSize(height * this.SCREEN_RATIO, height);
+      // ui.addAnimation(anim);
     }
 
     // TODO(crbug/643815): Add a method setting aspect ratio (and possible
@@ -114,6 +110,26 @@ var vrShellUi = (function() {
     constructor(domId) {
       let domElement = document.querySelector(domId);
 
+      // Attach a mutation observer to catch our custom scene style changes.

[cjgrant, 2017/02/15 16:34:28]

Every UI element will have an observer.

+      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,

[tiborg, 2017/02/15 18:36:11]

As discussed offline, listening to the sub tree is a workaround to make things
like 3D translation changes on hover work. E.g. our buttons consist of a button
and a caption part. The button part applies a z translation on hover. Since it
cannot independently move from the caption in 3D space the z translation is
applied to the parent. However, this is not in line with the CSS style and may
be misleading. Just food for thought.

+        //attributeFilter: ['style']  // TODO: Better filtering?

[cjgrant, 2017/02/15 16:34:27]

The mutation observer tells us about a lot of stuff.  Maybe we can filter.

+      };
+      this.observer.observe(domElement, config);
+
       // Pull copy rectangle from the position of the element.
       let rect = domElement.getBoundingClientRect();
       let pixelX = Math.floor(rect.left);
@@ -124,18 +140,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.

[cjgrant, 2017/02/15 16:34:28]

Here's the initial extraction of element properties.  Future changes are picked
up by the mutation observers.

+      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',

[cjgrant, 2017/02/15 16:34:28]

This list is all custom properties that can enact native element updates
directly.  We're using custom properties for other element-specific things, but
to make good use of those, we'd need to use element-specific handling.  In that
case, just sticking to pure JS seems much easier. 

+        '--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 {
@@ -491,16 +541,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();
@@ -786,7 +826,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();