1559964 - Caption looks now broken and can be fixed by an additional hbox

Status: RESOLVED FIXED

(Thunderbird :: General, defect)

Description

[John Bieling (:TbSync)]

Attachment: tempsnip.png

After bug 1501360 has landed, the caption (at least on windows) looks broken. The caption field extends all the way to the right and overlays the groupbox border.

I think Richard moved the caption below the border because of that, but he has not moved it low enough.

I played around with it, and learned that a simple hbox around the caption fixes the problem.

<groupbox>
  <hbox><caption>LABEL</caption></hbox>
  ...
</groupbox>

I therefore would like to propose to restore the original alignment of the groupbox border (with top padding) and the alignment of the caption (50% moved upwards) and add the additional hbox.

Attached you find an image to show, how it looks on my system.

1. How it looks in TB60
2. How it looks in TB68 now
3. How it looks in Tb68 with added hbox
4. How it looks in TB68 with added hbox and manipulated CSS

Comment 1

[John Bieling (:TbSync)]

Bugzilla "corrected" the numbering of the list in my last comment. This is the correct list:

1: How it looks in TB60
4: How it looks in TB68 now
3: How it looks in Tb68 with added hbox
2: How it looks in TB68 with added hbox and manipulated CSS

Comment 2

[John Bieling (:TbSync)]

Just for reference, this is the CSS manipulation I used to re-align the border and caption:

<groupbox style="margin-top:1em">
  <hbox style="margin-top:-1em; margin-bottom:-5px">
    <caption style="padding:3px">&quicktext.settings.label;</caption>
  </hbox>
  ...
</groupbox>

I assume there are better ways to do it, but this worked for me. But as outlined in the IRC chat, it would be great, if these or similar CSS manipulations could make it into messenger.css, so add-on authors only have to put the hbox around the caption and it automatically looks good on all systems.

Comment 3

[John Bieling (:TbSync)]

The CSS rules for messenger.css (at least for windows), could look like this:

groupbox {
  margin-top: 1em;
}

groupbox > hbox:first-child {
  margin-top: -1em;
  margin-bottom: -5px;
}

caption {
  padding: 3px;
  font-weight: normal;
}

Comment 4

[Richard Marti (:Paenglab)]

Attachment: 1559964-make-caption-more native.patch

This patch makes the look of the groupboxes like on TB 60.
I also found some remnant <caption> (and one newly introduced by an OTR bug). In imAccountWizard where was also a no more working collapsing of the groupboxes which I removed here. The captions where also not showed, which is fixed now.

John, <caption> is removed in bug 1493844 and we changed <caption> to <label class="header"> in bug 1512215. And with this bug here you need to use this structure:

<groupbox>
  <hbox class="groupbox-title">
    <label class="header">YOUR LABEL</label>
  </hbox>
  groupbox body content
</groupbox>

Beta needs a slightly different patch. I'll create one when this patch is reviewed.

Comment 5

[Jorg K (CEST = GMT+2)]

Comment on attachment 9073444 [details] [diff] [review]
1559964-make-caption-more native.patch

Thanks, big job on a Sunday. I didn't check all the dialogues, just some spot checks, but code-wise it's all the same. Strange that there were still some <caption>s left and even new defunct ones added. Looking forward to the beta patch.

Comment 6

[Richard Marti (:Paenglab)]

Attachment: 1559964-make-caption-more-native-beta.patch

For beta.

Comment 7

[Jorg K (CEST = GMT+2)]

Comment on attachment 9073457 [details] [diff] [review]
1559964-make-caption-more-native-beta.patch

Thanks.

Comment 8

[John Bieling (:TbSync)]

Thanks for your work! I updated the doc.

https://developer.thunderbird.net/add-ons/tb68/changes#less-than-groupbox-greater-than-and-less-than-caption-greater-than

Comment 9

[Jorg K (CEST = GMT+2)]

Will be fixed in beta 3, beta 2 is already "out the door".

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/comm-central/rev/3d905e57ebe0
Make the caption look more native. r=jorgk

Comment 11

[Jorg K (CEST = GMT+2)]

TB 68 beta 3:
https://hg.mozilla.org/releases/comm-beta/rev/facbdadc0033af95c83b71d1b9a1224e4cdb7f64