1444309 - Make DevTools tab bar hover tab animation match the main Firefox tab bar

Status: VERIFIED FIXED

(DevTools :: General, defect, P3)

Description

[Brian Birtles (:birtles, Feb 26~ parental leave)]

There's a subtle animation where the selection line animates from the center out when using the Firefox tab bar that might be nice to use in the DevTools tab bar.

Comment 1

[Gabriel Luong [:gl] (ΦωΦ)]

Victoria did consider this during the Photon Design for the DevTools tab bar and agreed that we wanted a more simpler tab bar compare to Firefox tab bar. I would mark this as a WONTFIX unless Victoria has changed her mind.

Comment 2

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Let me try to make up a demo in the next few days so we can assess if it is helpful or not.

Comment 3

[Hiroyuki Ikezoe (:hiro)]

From bug 1355390 comment 3.

(In reply to Dão Gottwald [::dao] from comment #3)
> (In reply to Hiroyuki Ikezoe (:hiro) from comment #2)
> > We are trying to match devtools tab bar to browser one (bug 1444309).
> > 
> > I am wondering whether hover transition on inactive tab is intentional or
> > not.  The hover transition is hard to notice since the duration is short and
> > the tab-line is narrow.
> 
> It's subtle but intentional.

Comment 4

[Mantaroh Yoshinaga[:mantaroh]]

Attachment: demonstration.mp4

(In reply to Brian Birtles (:birtles) from comment #2)
> Let me try to make up a demo in the next few days so we can assess if it is
> helpful or not.

This is a demo of this bug. I added a transition of transform and opacity to the devtools-tab. (this transition is same to firefox tab bar.)

brian, victoria,
What do you think about this changed behavior?

Comment 5

[Brian Birtles (:birtles, Feb 26~ parental leave)]

Thanks for making up this demo.

It looks good to me, but it's up to Victoria to decide if this enhances or detracts from the experience.

Comment 6

[Mantaroh Yoshinaga[:mantaroh]]

We discussed with Victoria, we decided that this hover animation might be OK.

Comment 7

[Mantaroh Yoshinaga[:mantaroh]]

Attachment: Bug 1444309 - Add a transition effect to the devtools tab.

This patch will apply a transition to devtools tab, this transition same to
browser tab transition.

Review commit: https://reviewboard.mozilla.org/r/234326/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/234326/

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8965530 [details]
Bug 1444309 - Add a transition effect to the devtools tab.

https://reviewboard.mozilla.org/r/234326/#review239946

Comment 9

[Mantaroh Yoshinaga[:mantaroh]]

Thanks, Gabriel!

Try result is green. So I'll land it.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/e6ecac1e4884
Add a transition effect to the devtools tab. r=gl

Comment 11

[Noemi Erli[:noemi_erli]]

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

Comment 12

[Timea Zsoldos [:zstimi/tzsoldos], Desktop QA]

I have reproduced this issue using Firefox  60.0a1 (2018.03.08) on Ubuntu 14.04 x64.
I can confirm this issue is fixed, I verified using Firefox 61.0b9 on Win 10 x64, Mac OS X 10.13 and Ubuntu 14.04 x64.