1327692 - CSS - animations tab has toolbar of different height

Status: RESOLVED FIXED

(DevTools :: Inspector: Animations, defect, P3)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
1. Open devtools -> inspector
2. Open "computed" tab
3. Open "animations" tab

AR:  Toolbars in said tab have different height
ER:  Same height

Toolbars in "computed" and "rules" tabs were implemented in bug 1120616

Comment 1

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 2

[Ankita Tanwar]

Hi,

I would like to work on this bug but is it possible to provide some information on where to start, as this is my first bug.

Thanks,
Ankita

Comment 3

[Patrick Brosset <:pbro>]

Thank you for wanting to work on this. I think this is a good bug to get started.

First of all, you will need to get comfortable with the development environment, there's some doc for it here: https://developer.mozilla.org/en-US/docs/Tools/Contributing

Next, you will need to look at the CSS code in devtools\client\themes\animationinspector.css
There is even a CSS variable in this file that defines how tall the toolbar is I think.
Try to change this until it matches the toolbars in the other panels.

You might also be interested in using the Browser Toolbox: https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
It's basically devtools for devtools! So you can inspect the UI of devtools and change CSS live to see how things look, instead of having to do changes blindly in a code editor, then building, then starting Firefox again.

I also realized that toolbars in other panels use the class devtools-toolbar, but the toolbar in the animation panel does not. So, probably the right fix here would be to use the devtools-toolbar class and remove the toolbar-related styles from animationinspector.css, since we would not be using a common shared class.

I hope this is enough to get you started. Feel free to ask for more information.

Comment 4

[Ankita Tanwar]

Attachment: 1327692_1.patch

23px height of toolbar on animations tab fixes the problem

Comment 5

[Patrick Brosset <:pbro>]

Hi Ankita. I think there was a problem when you generated this patch. It contains a ton of unrelated changes. Not sure what happened, but you will need to re-upload a new patch.
Please let me know what tools/commands you used to generate this file, so that I can help you troubleshoot this problem.

Comment 6

[Ankita Tanwar]

Hello Patrick. 

Before creating the patch I pull the changes in mozilla-central repository using SourceTree. Once the pull was complete I executed the following command:

hg export . > PatchName.patch;

And this created a .patch file in .hg folder. Guide me if I am doing it wrong.

Comment 7

[Patrick Brosset <:pbro>]

(In reply to Ankita Tanwar from comment #6)
> Before creating the patch I pull the changes in mozilla-central repository
> using SourceTree. Once the pull was complete I executed the following
> command:
> 
> hg export . > PatchName.patch;
> 
> And this created a .patch file in .hg folder. Guide me if I am doing it
> wrong.
I have never been using SourceTree myself so I'm not really sure what happened there, but it looks like your patch is a commit of all the changes you pulled.

I usually do this:

- I make sure I have no local changes first.

- Then I pull from the mozilla-central repository
> hg pull -u central

- Then I do my changes

- Then I commit them:
> hg commit -m "Bug XXXXXX - Description of the change"

- Finally, to export this commit as a file:
> hg export -r . > /path/to/patchFile.patch

So, I guess you forgot to commit your changes before exporting them, so you ended up exporting the current commit, which might have been a giant merge commit, which is why your patch is very big and only contains unrelated changes.

Comment 8

[Florens Verschelde :fvsch]

I can't reproduce this visual bug anymore.
Probably fixed with recent changes on the Animations tab?

Comment 9

[Daisuke Akatsuka (:daisuke)]

Thanks Florens!

Yeah, actually we have released new animation inspector in bug 1464042.
I close this bug since this was of previous animation inspector.