188255 - element properties items misaligned

Status: RESOLVED FIXED

(SeaMonkey :: UI Design, defect)

Description

[piers]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20030108 Phoenix/0.5
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3a) Gecko/20030108 Phoenix/0.5

If you look closely at element properties, the label (e.g. "Address") is
slightly (1px) above the entry (e.g. "http://www.mozilla.org")

Reproducible: Always

Steps to Reproduce:
1. Right click a link;
2. Select properties.
Actual Results:  
Items are vertically misaligned

Expected Results:  
Align items.

Comment 1

[piers]

Attachment: Screenshot showing misaligned items

Comment 2

[Neil Marshall]

The items on the left are labels and the ones on the right are textboxes.  The
same css is used in Page Info, so that has the missalignment as well.

Comment 3

[Neil Marshall]

setting margin-top: 1px; (It is currently 2px) on the textbox fixes this.

Comment 4

[Neil Marshall]

Daniel, can you think of any reasons why the textbox in the element properties
window is 1px off when the page info textboxes are lines up perfectly?

I've compared the computerd styles of the labels, separators, textboxes, and
grid rows, but they seem to be the exact same.

Comment 5

[Daniel Brooks [:db48x]]

no, I can't. In fact, I remeber having that problem at one point, but now I can't think of anything I did to fix it. Are you sure page info doesn't show the same thing? I might have just given up an not told anyone about it, so that they wouldn't stop me from checking it in. My mozilla is broken, or I'd look myself. 

Comment 6

[Neil Marshall]

Attachment: Reduce the padding in the classic skin

This is weird.	The patch appears to be fixing both page info and element
properties now.  I'm going to need someone else to verify that it works though.

Comment 7

[Daniel Brooks [:db48x]]

is the offset not there in the modern skin? 

Comment 8

[Neil Marshall]

no.

Comment 9

[Daniel Brooks [:db48x]]

Comment on attachment 112623 [details] [diff] [review]
Reduce the padding in the classic skin

weird. probably why I never fixed it though.

r=me fwiw

Comment 10

[Daniel Brooks [:db48x]]

Comment on attachment 112623 [details] [diff] [review]
Reduce the padding in the classic skin

it's been called to my attention that the offset is indeed there in modern. go
ahead and make the patch affect both please.

Comment 11

[[e-mail]]

Why not just put <row align="center"> on each row? Fixes it for all themes.

Historical note: valign="center" used to be the default before align and pack.

Comment 12

[Daniel Brooks [:db48x]]

you can do that, or I'll just add it to my next patch, either one.

Comment 13

[Serge Gautherie (:sgautherie)]

Filter "spam" on "guifeatures-nobody-20080610".

Comment 14

[Philip Chee]

So in classic:
global.css has:

> label {
>   cursor: default;
>   margin-top: 1px;
>   margin-bottom: 2px;
>   -moz-margin-start: 6px;
>   -moz-margin-end: 5px;

and textbox.css has:

> textbox {
>   -moz-appearance: textfield;
>   cursor: text;
>   margin: 2px 4px;

This is the same in modern. Reducing the top margin for the textbox to 1px should work.

Comment 15

[Bablu Kumar]

i want to fix this bug.it will be great if this is assigned to me
thanks

Comment 16

[Philip Chee]

> i want to fix this bug.it will be great if this is assigned to me
Sure do! The first step is to build SeaMonkey successfully. If you haven't already done so please read:
https://developer.mozilla.org/en-US/docs/Simple_SeaMonkey_build
The best way to contact us is to use IRC: our server is moznet so irc://moznet/seamonkey will get you to the SeaMonkey channel. For help and questions on developing SeaMonkey (or other Mozilla based applications) please use the #introduction channel.

Comment 17

[Liz Henry (:lizzard) (relman/hg->git project)]

Hi Bablu, are you still intending to work on this bug? Were you able to build SeaMonkey?  Let us know in a comment.  Thanks!

Comment 18

[Bablu Kumar]

hii
assign this bug to someone else as i'm not able to devote enough time to this bug.

Comment 19

[lmcooper90]

I would like to work on this bug. I've used seamonkey previously and could build it again

I'm having a hard time getting into IRC though :(

Comment 20

[Philip Chee]

Hi lmcooper90!

You SeaMonkey comes with Chatzilla. Open the Chatzilla window and connect to to the mozdev server. Or click on this link: irc://moznet/SeaMonkey .

Also see:
http://chatzilla.rdmsoft.com/help/
http://chatzilla.hacksrus.com/faq/

Comment 21

[lmcooper90]

OK, I've built seamonkey and I'm connected to IRC.. what's the next step?

Comment 22

[Tony Mechelynck [:tonymec]]

(In reply to lmcooper90 from comment #21)
> OK, I've built seamonkey and I'm connected to IRC.. what's the next step?

Make sure you have an up-to-date comm-central clone. If you don't have one at all, I recommend the following:

0. Make sure Mercurial is installed
1. cd wherever (the parent of where your clone will be)
2. hg clone -U http://hg.mozilla.org/comm-central/
3. cd comm-central
3bis. Make sure you have the useful Mercurial extensions you will need, specified either in your user-level or repository-level hgrc (or, on Windows, Mercurial.ini). For bug fixing the mq extension is among the recommended ones. See "hg help extensions" for details.
4. hg up -r default
5. python client.py checkout

If you already have a comm-central clone but it is not up-to-date, then steps 0, 1, 3 and 5 above should be enough.

The reason I'm recommending steps 2 and 4 above as separate steps is that in my experience it reduces the risk of network timeouts.

After that, you may try building SeaMonkey (which, on your own machine, may be a lengthy process; in the past it has sometimes taken me a whole night; ese also comment #16 above), or you can start coding, e.g. as follows:

6. hg qqueue -c 188255
7. Make any necessary changes to the source
8. hg qnew -U -m 'Bug 188255: element properties misaligned' bug188255
9. Compile (lengthy) if desired.
10. hg qpop
11. Attach ./.hg/patches-188255/bug188255 as a "patch"-type attachment to the bug, request review, etc.

After step 10, your changes are safely tucked away and your repository looks again like the latest version at Mozilla. To make changes to your patch, you will need (after cd to the comm-central directory containing your clone)

12. python client.py checkout
13. hg qpush bug188255
14. Make any desired changes in the source
15. Compile (lengthy) if desired
16. hg qrefresh
17. hg qpop
18. Attach ./.hg/patches-188255/bug188255 to the bug as a new patch, ticking the older version as obsolete, request review again (or if you already had it, carry it forward), etc.

At step 13 your latest patch is applied again, updated at step 16 and removed (but saved) at step 17.

Once you have the required review+ (and superreview+ for a mailnews bug, ui-review+ for a UI bug) you may request checkin-needed by setting the keyword. Once the bug has been found to work on trunk it may be ported to aurora etc. but I'm not yet detailing that here.

Comment 23

[Tony Mechelynck [:tonymec]]

P.S. See also
https://developer.mozilla.org/en-US/docs/Developer_Guide/How_to_Submit_a_Patch?redirectlocale=en-US&redirectslug=Hacking_Mozilla
https://developer.mozilla.org/en-US/docs/Mercurial_FAQ#How_can_I_generate_a_patch_for_somebody_else_to_check-in_for_me.3F

Comment 24

[Tony Mechelynck [:tonymec]]

P.P.S. Comment #23 should be read while doing the customizations for step 3bis in comment #22. Happy coding! (but not slap-happy :-P )

Comment 25

[lmcooper90]

Problem: I had built seamonkey on ubuntu 12.10 when I originally posted, but now I'm using ubuntu studio 13.04 and maybe something changed and I'm missing something, because "sudo apt-get build-dep seamonkey" doesn't work (seamonkey not found; build-dep thunderbird works)...

I also cloned comm-central, but I can't find the seamonkey executable in objdir-sm-release/mozilla/dist/bin/, although it was there back when I had built it previously on ubuntu 12.10!

Is there something that I (or 13.04) am missing?

Comment 26

[Tony Mechelynck [:tonymec]]

In reply to comment #25:

Cloning comm-central followed by running "python client.py checkout" in your clone's top directory (the parent of .hg etc.) will give you the latest sources necessary to build SeaMonkey, it won't give you an executable. For that you need to configure and compile, and for _that_ you need to have all the necessary tools installed.

However, even without a self-compiled executable you can generate a patch. What you cannot do it test it on your machine. For Firefox or Thunderbird you could generate a "try build" but generating SeaMonkey try builds requires some hacking of the try server. It is not totally impossible but not everyone knows how to do it; in particular, I don't.

Now if you still want to compile SeaMonkey on your machine:

- If "sudo apt-get build-dep seamonkey" doesn't work, you can try the procedures listed at https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions/Linux_Prerequisites under any one of "All Distros", "Ubuntu" or "All other systems" (maybe even "Debian" but I'm less sure about that). They aren't equally easy to follow but at least one of them ought to work.

- Once you have the source and all the prerequisites, see https://developer.mozilla.org/en-US/docs/Simple_SeaMonkey_build starting at "Building SeaMonkey".

Comment 27

[Philip Chee]

FYI "sudo apt-get build-dep thunderbird" will get all the dependencies needed for SeaMonkey as well.

Comment 28

[lmcooper90]

OK, everyone, I have Linux Mint 15 now and now nothing seems to be working:

laura@drukqs ~ $ sudo apt-get build-dep seamonkey
[sudo] password for laura: 
Reading package lists... Done
Building dependency tree       
Reading state information... Done
E: Unable to find a source package for seamonkey
laura@drukqs ~ $ sudo apt-get build-dep thunderbird
Reading package lists... Done
Building dependency tree        
Reading state information... Done
E: Unable to find a source package for thunderbird

I think I'm going to try to move on to something else, because my computer clearly doesn't want seamonkey on it. So I definitely thank you for all your help, but someone else can have this one..

Comment 29

[Philip Chee]

Thanks for taking a look. Sorry it didn't work out.

Comment 30

[Anup Kumar [:reznord]]

Hi, I am interested in working on this bug. So, I request you to assigm it to me and guide me on how ti get started with because I am a newbie.

Thanks in advance,
A.Anup

Comment 31

[Philip Chee]

Hi!

This bug involves some CSS and a bit of XUL (our XML markup language similar to xhtml). If you feel comfortable working with these the first thing is to get SeaMonkey building.

I presume you have read:
https://developer.mozilla.org/en-US/docs/Developer_Guide/Build_Instructions
https://developer.mozilla.org/en-US/docs/Simple_SeaMonkey_build

If you have problems getting SeaMonkey (or Firefox) building a good place to ask is on IRC: Our server is moznet and the channel you want is #introduction. Here is a link you can click on irc://moznet/introduction

Once you've done that you can go to the #seamonkey channel (irc://moznet/SeaMonkey) and discuss the next step.

Comment 32

[Samiullah]

Can I be the assignee of this bug please to : [e-mail] please

Comment 33

[Philip Chee]

(In reply to Samiullah from comment #32)
> Can I be the assignee of this bug please to : [e-mail] please

Hi! You've been assigned on Bug 812050. Lets start with that first. After fixing that we'll look again at which bugs you want to work on.

Comment 34

[alexandre-cote]

Hello, 
I would like to be assigned to this bug, is it possible ?
There is already somebody working on it but it was decided last year. Did he fix it ?

Comment 35

[Philip Chee]

(In reply to Alex from comment #34)
> Hello, 
> I would like to be assigned to this bug, is it possible ?
Sure
> There is already somebody working on it but it was decided last year. Did he
> fix it ?
We never received any patch. So now it's up to you. Have you managed to build SeaMonkey from the comm-central repository?

Comment 36

[alexandre-cote]

Here again, I'm sorry we are a group of students and I asked for several bugs to know if they were available. 
One of them is "Shafick's" (he has an account). He will contact you.

Thank you.

Comment 37

[Shafick's]

Hello, 
I would like to be assigned this bug, is it possible ? 
It is assigned to Alex but it turned out that he will try to fix another bug while I try to fix this one.
He already posted a message to say that he is willing to let me fix it because we are computer science students and we are doing this as a group.

Thank you.

Comment 38

[Philip Chee]

Assigning to Shafick. Thanks!

Comment 39

[Shafick's]

Hello, 
I did all the necessary by building and installing the Mozilla and SeaMonkey sources. (On Ubuntu 12.04 LTS).
I'm now trying to understand the code architecture in order to write a report that explains the utility of each dirctory of Mozilla and SeaMonkey sources and to better understand what to do exactly to fix the bug that has been assigned to me.
It would be very helpful if you tell me where I can find a good documentation of the Mozilla and SeaMonkey sources.

Thank you.

Comment 40

[Philip Chee]

http://www.codefirefox.com/ has lots of helpful links.

(In reply to Shafick's from comment #39)
> I'm now trying to understand the code architecture in order to write a
> report that explains the utility of each dirctory of Mozilla and SeaMonkey
> sources and to better understand what to do exactly to fix the bug that has
> been assigned to me.
> It would be very helpful if you tell me where I can find a good
> documentation of the Mozilla and SeaMonkey sources.

That's a wide ranging question. I suggest that you install a IRC client and join the SeaMonkey channel on moznet (irc://moznet/SeaMonkey . Another useful channel on moznet is #introduction.

Hope this helps

Comment 41

[Rainer Bielefeld]

@Shafick's:
Hi, still on board?

Comment 42

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

hey I want to fix this bug and almost have done build the seamonkey with the help of lanN in irc 

I will fix the issue as soon as I can

Comment 43

[Philip Chee]

You should be looking at http://mxr.mozilla.org/comm-central/source/suite/browser/metadata.xul and also comment 14 up above ^^

The file you want is http://mxr.mozilla.org/comm-central/source/suite/browser/metadata.xul#8 I'd look at modifying pageInfo.css

http://mxr.mozilla.org/comm-central/find?string=/pageInfo.css&hint=navigator/suite/browser/metadata.xul
Specifically the three files in /suite/themes/.../pageInfo.css

Comment 44

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

I have edited the files in this manner https://pastebin.mozilla.org/8842529

and regarding the comment 14 here are the files that I get when I do a search https://pastebin.mozilla.org/8842530 

Am I in the right direction Philip ? or point me to the right one

Comment 45

[Philip Chee]

Do please use bugzilla attachments rather than pastebin (even if you set your pastebins to never expire)

> Am I in the right direction Philip ? or point me to the right one
Close. the pageInfo.css file is shared with the Page Info window and the Properties window.

Reading comment 4:

> Daniel, can you think of any reasons why the textbox in the element
> properties
> window is 1px off when the page info textboxes are lines up perfectly?

You need to fix the textboxes in metadata.xul without regressing the textboxes in pageInfo.xul
I suggest you give the textboxes in metadata.xul a class and then in pageInfo.css do something like:

textbox.properties {
  margin-top: 1px;
}

Comment 46

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

Attachment: Bug-188225.patch

I think I have not done perfectly. 

Once you review it I will make more accurate patch :)

Comment 47

[Philip Chee]

Comment on attachment 8649333 [details] [diff] [review]
Bug-188225.patch

Thank you for your patch. Apologies for the delay.

Things you need to do:
1. in metadata.xul you should go through each <textbox> and add a class.

http://mxr.mozilla.org/comm-central/source/suite/browser/metadata.xul?rev=e1868ba1d4dc#45

For example in line 45:
           <textbox readonly="true" id="link-url-text"/>
Change this to:
           <textbox readonly="true" id="link-url-text" class="meta-properties"/>
For each textbox.

Then in the two skin pageInfo.css add a new rule:
 textbox.meta-properties {
+  margin-top: 1px;

Comment 48

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

I will send a patch after looking at the comment that you have given me

Comment 49

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

Attachment: bug-188255-v2.patch

I think I have done what ever you have told in the comment

Comment 50

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

Also please do assign this bug to me :)

Comment 51

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

Comment on attachment 8670285 [details] [diff] [review]
bug-188255-v2.patch

I am sorry that I don't know that I need to keep review as ? for requesting review 

so I gave a + for the patch 

I will not repeat it again

Comment 52

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

Philip Chee can review the patch that I have attached

Comment 53

[Philip Chee]

Comment on attachment 8670285 [details] [diff] [review]
bug-188255-v2.patch

This patch is very good. Thank you for your hard work.

Comment 54

[Tummala Dhanvi [:c0mrad3][UTC+5.30]]

(In reply to Philip Chee from comment #53)
> Comment on attachment 8670285 [details] [diff] [review]
> bug-188255-v2.patch
> 
> This patch is very good. Thank you for your hard work.

cool one more bug fix to my name :)

Comment 55

[Philip Chee]

Pushed to comm-central
http://hg.mozilla.org/comm-central/rev/5fee48b7565a

Comment 56

[harshitjain23897]

I want to contribute to this bug!

Comment 57

[Josh Matthews [:jdm]]

This was fixed last year, so there's nothing more to do here.