Frank Yan (:fryn) Reporter
	Description • 12 years ago

When pressing a tile on a non-autocomplete/search view, the tile should appear to be pushed away from the user via a short animation and 3D transformation.
The angle, amplitude, and origin of the transformation/rotation should depend upon the location of the event (click or touch) relative to the tile.

	Sam Foster [:sfoster] (he/him) Assignee
	Comment 1 • 11 years ago

This is probably about ready for review, but I need to finalize bug 858388 before this is meaningful.

	Sam Foster [:sfoster] (he/him) Assignee
	Comment 2 • 11 years ago

Attempting to use event delegation from the grid itself was getting complicated (we need the capture phase for mousedown/touchstart) so the handlers are on the item and applying/removing the transform shared on the grid.

	Frank Yan (:fryn) Reporter
	Comment 3 • 11 years ago

Comment on attachment 768476 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items

Review of attachment 768476 [details] [diff] [review]:
-----------------------------------------------------------------

Everything looks good, except the following:

::: browser/metro/base/content/bindings/grid.xml
@@ +906,5 @@
> +      <handler event="mousedown" button="0" phase="capturing" action="this.control.bendItem(this, event)"/>
> +      <handler event="touchstart" phase="capturing" action="this.control.bendItem(this, event.touches[0])"/>
> +      <handler event="mouseup" button="0" action="this.control.unbendItem(this)"/>
> +      <handler event="mouseout" button="0" action="this.control.unbendItem(this)"/>
> +      <handler event="touchend" phase="capturing" action="this.control.unbendItem(this)"/>

This isn't quite the condition we want for unbending the item when using touch. Tiles should unbend immediately when a cross-slide begins. They should also unbend immediately when a scroll begins once we fix bug 886584.

	Sam Foster [:sfoster] (he/him) Assignee
	Comment 4 • 11 years ago

* touch/mouse event handlers moved to the richgrid binding. 
* added calls to unbendItem when a cross-slide gesture begins, and when it cancels (which should cover the pan/scroll case). 
* added an attribute flag for "bending" state

Applies over the patch on bug 886584 (on inbound but not m-c yet).

	Frank Yan (:fryn) Reporter
	Comment 5 • 11 years ago

Comment on attachment 770292 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items

Review of attachment 770292 [details] [diff] [review]:
-----------------------------------------------------------------

On the Surface Pro, when trying to pan the start screen horizontally with a touch that begins on a tile, the pan and unbend do not occur until the touch ends.

	Frank Yan (:fryn) Reporter
	Comment 6 • 11 years ago

Comment on attachment 770292 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items

Review of attachment 770292 [details] [diff] [review]:
-----------------------------------------------------------------

Almost there! Thanks for working on this! :)

	Sam Foster [:sfoster] (he/him) Assignee
	Comment 7 • 11 years ago

This update reworks the mouse/touchmove logic to only consume the event when we're truly committed to the gesture.

	Jonathan Wilde [:jwilde]
	Comment 8 • 11 years ago

Comment on attachment 771078 [details] [diff] [review]
Add bendItem transition implementation to richgrid and event handling for items

Review of attachment 771078 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/metro/base/content/bindings/grid.xml
@@ +656,5 @@
> +          let x = (event.clientX - rect.left) / rect.width;
> +          let y = (event.clientY - rect.top) / rect.height;
> +
> +          if (Math.abs(x - .5) < .1 && Math.abs(y - .5) < .1) {
> +            bendNode.style.transform = "perspective(450px) translateZ(-10px)";

Is there any reason why we're applying the perspective property inline, rather than in a CSS richgrid[bending=true] style?

Similar situation for translateZ (though, I guess we'd have to add a separate class or attribute on top of [bending=true] to denote center presses, which is some added complexity). At the very least, it would be good to get these sorts of values moved into constants.

	Sam Foster [:sfoster] (he/him) Assignee
	Comment 9 • 11 years ago

Yeah I tried breaking out the bend function into CSS rules, but there are too many variables and it got unwieldy fast. But I'll have a go at extracting those parts out that are static into stylesheet rules. I think the center press can be the default state for [bending] and inline properties can override where necessary.

	Sam Foster [:sfoster] (he/him) Assignee
	Comment 10 • 11 years ago

I ended up refactoring the bendItem method a little to move some of the magic and/or duplicated values into variables. I did moved the center/middle case into CSS, but was unable to move out the transform parts into the stylesheet in any way without breaking the effect. 

Carrying r+, landed on inbound: https://hg.mozilla.org/integration/mozilla-inbound/rev/d65cb3cb55f5

	Ryan VanderMeulen [:RyanVM]
	Comment 11 • 11 years ago

https://hg.mozilla.org/mozilla-central/rev/d65cb3cb55f5