CSS - animations tab has toolbar of different height

NEW
Unassigned

Status

()

Firefox
Developer Tools: Animation Inspector
P3
normal
a year ago
10 months ago

People

(Reporter: arni2033, Unassigned)

Tracking

Trunk
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

a year ago
>>>   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
(Reporter)

Updated

a year ago
No longer blocks: 1277113
(Reporter)

Updated

a year ago
Component: Untriaged → Developer Tools: Animation Inspector

Comment 1

11 months ago
Inspector bug triage (filter on CLIMBING SHOES).
Priority: -- → P3

Comment 2

10 months ago
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

10 months ago
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

10 months ago
Created attachment 8838908 [details] [diff] [review]
1327692_1.patch

23px height of toolbar on animations tab fixes the problem
Attachment #8838908 - Flags: review?(pbrosset)

Comment 5

10 months ago
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.

Updated

10 months ago
Attachment #8838908 - Flags: review?(pbrosset)

Comment 6

10 months ago
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

10 months ago
(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.
You need to log in before you can comment on or make changes to this bug.