PROTOTYPE: Generic custom CSS property parsing

chrome/browser/resources/vr_shell/vr_shell_ui.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 vrShellUi = (function() {
   'use strict';
 
   let ui = new scene.Scene();
   let uiManager;
   let nativeCommandHandler;
@@ skipping 24 matching lines @@
       /** @const */ this.CSS_WIDTH_PIXELS = 960.0;
       /** @const */ this.CSS_HEIGHT_PIXELS = 640.0;
       /** @const */ this.DPR = 1.2;
       /** @const */ this.MENU_MODE_SCREEN_DISTANCE = 1.2;
       /** @const */ this.MENU_MODE_SCREEN_HEIGHT = 0.5;
       /** @const */ this.MENU_MODE_SCREEN_ELEVATION = 0.1;
 
       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) {
       let update = new api.UiElementUpdate();
       update.setVisible(enabled);
       ui.updateElement(this.elementId, update);
       if (enabled) {
         api.setContentCssSize(
             this.CSS_WIDTH_PIXELS, this.CSS_HEIGHT_PIXELS, this.DPR);
       } else {
@@ skipping 10 matching lines @@
     }
 
     setFullscreen(enabled) {
       if (this.fullscreen == enabled)
         return;
       this.fullscreen = enabled;
       this.updateState()
     }
 
     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
     // animation of changing it).
 
     getElementId() {
       return this.elementId;
     }
   };
 
   class DomUiElement {
     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);
       let pixelY = Math.floor(rect.top);
       let pixelWidth = Math.ceil(rect.right) - pixelX;
       let pixelHeight = Math.ceil(rect.bottom) - pixelY;
 
       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 {
     constructor(domId, callback) {
       super(domId);
 
       let button = this.domElement.querySelector('.button');
       button.addEventListener('mouseenter', this.onMouseEnter.bind(this));
       button.addEventListener('mouseleave', this.onMouseLeave.bind(this));
       button.addEventListener('click', callback);
@@ skipping 40 matching lines @@
             api.doAction(api.Action.RELOAD, {});
           }
         ],
         [
           '#forward',
           function() {
             api.doAction(api.Action.HISTORY_FORWARD, {});
           }
         ],
       ];
 

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

This kind of stuff is hard to put in CSS.  It describes how to lay out several
buttons.  Further down, it also powers button-specific Z movement on hover.  If
we were hard-coding each buttons location in CSS, we could use a class to
specify button-specifc Z offsets.  But keeping this in JS seems easier.

       /** @const */ var BUTTON_Y = -0.27;
       /** @const */ var BUTTON_Z = -1;
       /** @const */ var BUTTON_SPACING = 0.11;
 
       let startPosition = -BUTTON_SPACING * (descriptors.length / 2.0 - 0.5);
       for (let i = 0; i < descriptors.length; i++) {
         // Use an invisible parent to simplify Z-axis movement on hover.
         let position = new api.UiElement(0, 0, 0, 0);
         position.setVisible(false);
         position.setTranslation(
@@ skipping 274 matching lines @@
           !this.loading && this.visibilityTimeout > 0 && !this.visibilityTimer;
       if (shouldBeHidden != this.hidden) {
         // Make the box fade away if it's disappearing.
         this.hidden = shouldBeHidden;
 
         // Fade-out or fade-in the box.
         let opacityAnimation =
             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();
     }
 
     setNativeVisibility(visible) {
       if (visible == this.nativeState.visible) {
         return;
       }
       this.nativeState.visible = visible;
@@ skipping 265 matching lines @@
     setEnabled(enabled) {
       let visibilityUpdate = new api.UiElementUpdate();
       visibilityUpdate.setVisible(enabled);
       ui.updateElement(this.tabContainerElement.uiElementId, visibilityUpdate);
     }
   };
 
   class UiManager {
     constructor() {
       this.mode = api.Mode.UNKNOWN;
-      this.menuMode = false;
+      // this.menuMode = false;
+      this.menuMode = true;
       this.fullscreen = false;
 
       this.background = new Background();
       this.contentQuad = new ContentQuad();
       let contentId = this.contentQuad.getElementId();
 
       this.controls = new Controls(contentId);
       this.secureOriginWarnings = new SecureOriginWarnings();
       this.urlIndicator = new UrlIndicator();
       this.omnibox = new Omnibox();
@@ skipping 149 matching lines @@
     nativeCommandHandler.handleCommand(dict);
   }
 
   return {
     initialize: initialize,
     command: command,
   };
 })();
 
 window.addEventListener('load', vrShellUi.initialize);