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 25 matching lines @@
       /** @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;
       /** @const */ this.BACKGROUND_DISTANCE_MULTIPLIER = 1.414;
 
       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.
       let backPlane = new api.UiElement(0, 0, 0, 0);
       backPlane.setVisible(false);
       backPlane.setHitTestable(true);
       backPlane.setSize(1000, 1000);
       backPlane.setTranslation(0, 0, -0.01);
       backPlane.setParentId(this.elementId);
       ui.addElement(backPlane);
@@ skipping 22 matching lines @@
     }
 
     setFullscreen(enabled) {
       if (this.fullscreen == enabled)
         return;
       this.fullscreen = enabled;
       this.updateState()
     }
 
     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
     // 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.
+      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);
       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.
+      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 {
     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 335 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 267 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);