Modifications to enable mobile functionality.

Modifications to enable mobile functionality.

Disabled native user pinch to zoom to lock viewport.
Reduced minimum viewport size for SVG for horizontal 7" mobile
  devices
Added touchstart events to service elements because they do
  not appear to bubble from svg events in Chrome for Android

https://code.launchpad.net/~hatch/juju-gui/lock-zoom/+merge/155263

(do not edit description out of merge proposal)

[jeff.pihach, 2013-03-25 15:44:33]

Please take a look.

[bcsaller, 2013-03-25 15:59:22]

Thanks for this. I'm not ready to land this with the issues mentioned below but
after those changes I'll be happy to review it again.

https://codereview.appspot.com/7815047/diff/1/app/index.html
File app/index.html (right):

https://codereview.appspot.com/7815047/diff/1/app/index.html#newcode19
app/index.html:19: <meta name="viewport"
content="width=device-width,initial-scale=1.0 maximum-scale=1.0,
user-scalable=no">
We want this on the canvas, I'm not sure we want it on the detail pages. I'm
fine with user-scalable=no as a global now, but our detail pages will load with
this index and will not work so well on a small screen.

https://codereview.appspot.com/7815047/diff/1/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7815047/diff/1/app/views/topology/service.js#n...
app/views/topology/service.js:102: event attached until it is reloaded
This know issue is too important to ignore. 
D3 code progresses in three phases, enter, update, exit.

We have a method for entering new nodes, it makes sense to factor the internals
into a standalone callback and applying it on the enter path (createServiceNode
iirc).

Additionally we should add a card to track the propagation of touch events such
that we can one day use the scene: {'touchstart': ...}

format.

https://codereview.appspot.com/7815047/diff/1/lib/views/stylesheet.less
File lib/views/stylesheet.less (right):

https://codereview.appspot.com/7815047/diff/1/lib/views/stylesheet.less#newco...
lib/views/stylesheet.less:79: width: 100%;
right on

[jeff.pihach, 2013-03-25 16:10:39]

Thanks for the review - I'll work on that fix right now.

https://codereview.appspot.com/7815047/diff/1/app/index.html
File app/index.html (right):

https://codereview.appspot.com/7815047/diff/1/app/index.html#newcode19
app/index.html:19: <meta name="viewport"
content="width=device-width,initial-scale=1.0 maximum-scale=1.0,
user-scalable=no">
On 2013/03/25 15:59:22, bcsaller wrote:
> We want this on the canvas, I'm not sure we want it on the detail pages. I'm
> fine with user-scalable=no as a global now, but our detail pages will load
with
> this index and will not work so well on a small screen. 

At first I was thinking the same, however if it's not set globally the drag
events will sometimes move the browser view and sometimes move the element. Also
if the user zooms in on the header/footer while the environment is open the
events sometimes stop working all together.

https://codereview.appspot.com/7815047/diff/1/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7815047/diff/1/app/views/topology/service.js#n...
app/views/topology/service.js:102: event attached until it is reloaded
On 2013/03/25 15:59:22, bcsaller wrote:
> This know issue is too important to ignore. 
> D3 code progresses in three phases, enter, update, exit.
> 
> We have a method for entering new nodes, it makes sense to factor the
internals
> into a standalone callback and applying it on the enter path
(createServiceNode
> iirc).
> 
> Additionally we should add a card to track the propagation of touch events
such
> that we can one day use the scene: {'touchstart': ...}
> 
> format.  

Sure, I can resolve this issue now and I'll create that ticket.

[jeff.pihach, 2013-03-25 18:27:19]

Please take a look.

[bcsaller, 2013-03-25 18:39:11]

Some notes on dealing with d3 selections

https://codereview.appspot.com/7815047/diff/8001/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7815047/diff/8001/app/views/topology/service.j...
app/views/topology/service.js:102: for (i = 0; i < elements[0].length; i += 1) {
See my notes below on how to properly call into a d3 selection. This function
will become much simpler.

https://codereview.appspot.com/7815047/diff/8001/app/views/topology/service.j...
app/views/topology/service.js:606: self.attachTouchstartEvents(node);
node.each(this.attachTouchStartEvents) where that method would then take (data,
[index]) and will be called once for each element in the node selection (which
is this case is the enter() selection for new data).

https://codereview.appspot.com/7815047/diff/8001/app/views/topology/service.j...
app/views/topology/service.js:606: self.attachTouchstartEvents(node);
node.each(function(data, [index]) {
    do the attach
}
That would be called once for each element with this == DOMNode. That would
simplify the attach function and remove the whole for loop in there. 

see 
https://github.com/mbostock/d3/wiki/Selections#wiki-each

[jeff.pihach, 2013-03-25 20:47:44]

Please take a look.

[bcsaller, 2013-03-25 20:50:21]

LGTM, thanks for working this through. Hopefully you'll agree this version is
simpler than where you started.

[rharding, 2013-03-26 15:13:04]

lgtm from code review standpoint with a couple of notes. Will QA and reply again
after I get it running locally.

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service....
app/views/topology/service.js:84: Android 4.2.2.
Did you find a bug to reference for this? Did we file one? Can a reference be
noted in the comment for future maintenance?

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service....
app/views/topology/service.js:90: attachTouchstartEvents: function(data, node) {
is this a public API method on the class? else _attachTouch...

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service....
app/views/topology/service.js:116: // Specifying the eventt ype to avoid
d3.mouse() error
typo

[jeff.pihach, 2013-03-26 16:02:05]

Thanks for the reviews! I'll merge trunk then we can QA again Rick.

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service.js
File app/views/topology/service.js (right):

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service....
app/views/topology/service.js:84: Android 4.2.2.
On 2013/03/26 15:13:04, rharding wrote:
> Did you find a bug to reference for this? Did we file one? Can a reference be
> noted in the comment for future maintenance? 
There are a number potentially related Chrome bugs but I haven't spent enough
time to develop a repro to really narrow down the exact cause.

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service....
app/views/topology/service.js:90: attachTouchstartEvents: function(data, node) {
On 2013/03/26 15:13:04, rharding wrote:
> is this a public API method on the class? else _attachTouch...
It's really just a utility method so I didn't see any reason why it shouldn't be
public so I left it as is.

https://codereview.appspot.com/7815047/diff/13001/app/views/topology/service....
app/views/topology/service.js:116: // Specifying the eventt ype to avoid
d3.mouse() error
On 2013/03/26 15:13:04, rharding wrote:
> typo
fixed

[jeff.pihach, 2013-03-26 16:11:23]

Please take a look.

[jeff.pihach, 2013-03-26 16:37:21]

*** Submitted:

Modifications to enable mobile functionality.

Disabled native user pinch to zoom to lock viewport.
Reduced minimum viewport size for SVG for horizontal 7" mobile
  devices
Added touchstart events to service elements because they do
  not appear to bubble from svg events in Chrome for Android

R=bcsaller, rharding
CC=
https://codereview.appspot.com/7815047