PROTOTYPE: Generic custom CSS property parsing

PROTOTYPE: Generic custom CSS property parsing

BUG=None
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

[cjgrant, 2017-02-15 16:19:31]

Description was changed from

==========
PROTOTYPE: Generic custom CSS property parsing

BUG=None
==========

to

==========
PROTOTYPE: Generic custom CSS property parsing

BUG=None
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[cjgrant, 2017-02-15 16:34:26]

cjgrant@chromium.org changed reviewers:
+ joshcarpenter@chromium.org, mthiesse@chromium.org, tiborg@chromium.org

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

Folks, here's the CSS custom property parsing prototype.

- I think it covers very basic cases cleanly.
- I worry about the performance penalty of the style change parsing, but I don't
have evidence.
- I think it makes specific movements/animations harder to do.  A prime example
is buttons, where the button uses a parent/child to offset its Z position on
hover.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/android/vr_s...
File chrome/browser/android/vr_shell/ui_scene.cc (right):

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/android/vr_s...
chrome/browser/android/vr_shell/ui_scene.cc:459: ParseNumber(dict, "sizeX",
&element->size.x);
Independent of CSS custom properties, I'd like to clean up and submit this
change separately. I think it makes sense to allow tweaking of individual
properties.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
File chrome/browser/resources/vr_shell/vr_shell_ui.css (right):

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.css:24: #content-quad-element {
The content quad isn't on the sprite sheet, so we have to add a dummy element.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.css:36: --tranX: 0;
This specifies a different quad position if we're in menu mode.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.css:109: .round-button
.button:hover {
LOL, disregard the cats and dogs. :)

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
File chrome/browser/resources/vr_shell/vr_shell_ui.js (right):

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:45: this.uiElement = new
DomUiElement('#content-quad-element');
This is where we tie the content quad to its dummy DOM element.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:83: // Set style according to
mode.
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.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:113: // Attach a mutation
observer to catch our custom scene style changes.
Every UI element will have an observer.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:129: //attributeFilter:
['style']  // TODO: Better filtering?
The mutation observer tells us about a lot of stuff.  Maybe we can filter.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:143: // Grab initial custom
scene styling.
Here's the initial extraction of element properties.  Future changes are picked
up by the mutation observers.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:157: '--tranX': 'translationX',
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.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:249: 
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.

[tiborg, 2017-02-15 18:36:12]

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/android/vr_s...
File chrome/browser/android/vr_shell/ui_scene.cc (right):

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/android/vr_s...
chrome/browser/android/vr_shell/ui_scene.cc:459: ParseNumber(dict, "sizeX",
&element->size.x);
On 2017/02/15 16:34:27, cjgrant wrote:
> Independent of CSS custom properties, I'd like to clean up and submit this
> change separately. I think it makes sense to allow tweaking of individual
> properties.

+1, this is a good idea.

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
File chrome/browser/resources/vr_shell/vr_shell_ui.js (right):

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/resources/vr...
chrome/browser/resources/vr_shell/vr_shell_ui.js:128: subtree: true,
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.

[cjgrant, 2017-03-03 15:03:24]

Description was changed from

==========
PROTOTYPE: Generic custom CSS property parsing

BUG=None
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

to

==========
PROTOTYPE: Generic custom CSS property parsing

BUG=None
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation
==========

[cjgrant, 2017-03-03 15:03:24]

cjgrant@chromium.org changed reviewers:
+ rezaali@google.com

[cjgrant, 2017-03-03 15:11:07]

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/android/vr_s...
File chrome/browser/android/vr_shell/ui_scene.cc (right):

https://codereview.chromium.org/2698033002/diff/1/chrome/browser/android/vr_s...
chrome/browser/android/vr_shell/ui_scene.cc:459: ParseNumber(dict, "sizeX",
&element->size.x);
On 2017/02/15 18:36:11, tiborg wrote:
> On 2017/02/15 16:34:27, cjgrant wrote:
> > Independent of CSS custom properties, I'd like to clean up and submit this
> > change separately. I think it makes sense to allow tweaking of individual
> > properties.
> 
> +1, this is a good idea.

For the record, this change landed in ToT, and is rebased out of  this CL.