1322158 - Slide info panel onscreen during initial job selection

Status: RESOLVED FIXED

(Tree Management :: Treeherder, enhancement, P3)

Description

[Jonathan French (:jfrench)]

I've thought about this for some time, but I pose we could improve the UI of the info panel with a reveal animation during initial job selection, which:

o reduces the current jarring UX where it just appears
o provides more clarity it sits atop the job tables
o provides an additional visual cue it's movable and can be adjusted

I think this another case where an animation isn't gimmicky but is instead a nice improvement. I've already done it locally, so I'll put up a PR for folks to try out.

Comment 1

[GitHub Autolander Bot]

Attachment: [treeherder] tojon:info-panel-anim > mozilla:master

Comment 2

[Jonathan French (:jfrench)]

Comment on attachment 8816917 [details] [review]
[treeherder] tojon:info-panel-anim > mozilla:master

For review and testing at your leisure :)

Comment 3

[Jonathan French (:jfrench)]

Also available now on my GitHub pages
https://tojon.github.io/treeherder/ui

Comment 4

[William Lachance (:wlach)]

Comment on attachment 8816917 [details] [review]
[treeherder] tojon:info-panel-anim > mozilla:master

I feel somewhat unqualified to review this, but on the surface this seems nice. I would be inclined to reduce the speed of the animation somewhat.

Pinging :davidwalsh (who is interested in front end stuff and doing more with treeherder these days) for an additional opinion.

Comment 5

[Jonathan French (:jfrench)]

Ya, I experimented with different speeds from 1s to 0.3s but chose something crisp at 0.4 which would not be perceived as a slowdown, particularly by heavy users. But whatever you guys like :)

Comment 6

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

One thing I see on the github page is that the background in the space that will be covered by the panel gets whited out long before the panel actually slides up into that space. Might just be slower graphics on my travel laptop, but is there any way to leave the push info in view until the panel takes up that space?

Comment 7

[Jonathan French (:jfrench)]

Interesting. I see that also, if I look really closely on my own laptop (3yr old MBP, GeForce GT750M). But it's so fast/fleeting I didn't notice it until you mentioned it.

I had tried various approaches earlier to optimize the slide so it's smooth; I needed to keep the 35% height property on the main div#infopanel css iirc. I could poke around some more.

Comment 8

[Jonathan French (:jfrench)]

Out of interest I tried using angular to apply the animation css instead of jquery, the background job table area still 'blanks' briefly at the beginning of the animation. Still looking.

Comment 9

[Jonathan French (:jfrench)]

I had a look on S.O. but there wasn't anything that stuck out. The closest I could find was this very old one regarding a flicker issue mostly on other browsers. Setting it on the container or the parent container in our case did not make any difference on any browser.
http://stackoverflow.com/questions/3461441/prevent-flicker-on-webkit-transition-of-webkit-transform

I've also been digging around to see if there are any angular or flexbox specific causes.

Comment 10

[Jonathan French (:jfrench)]

I haven't found any techniques in S.O. or elsewhere stopping the brief lower blank page area when the animation gets triggered. I ping'd camd in channel and he said he'd have a look at it also. You can find my working gh-pages in comment#3 to see the behavior, and/or run my branch. Thanks!

Comment 11

[Cameron Dawson [:camd]]

This looks good to me.  It seems the right balance of speed and beauty.  :)  I wouldn't worry about the brief blank area at the bottom.  I don't think it detracts (IMO).  Nice work!

Comment 12

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

Yeah, I think you've spent enough time trying to get rid of the blanking. I wouldn't worry about it if it's that difficult to eliminate.

Comment 13

[Treeherder GitHub Bugbot]

Commit pushed to master at https://github.com/mozilla/treeherder

https://github.com/mozilla/treeherder/commit/bebcaf94a3ced40088179f9d032ff628a6cc37c4
Bug 1322158 - Slide info panel onscreen during job selection (#2020)

Comment 14

[Jonathan French (:jfrench)]

Marking fixed per above merge.