Closed Bug 1559964 Opened 1 year ago Closed 1 year ago

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

Categories

(Thunderbird :: General, defect)

defect
Not set
normal

Tracking

(thunderbird68 fixed, thunderbird69 fixed)

RESOLVED FIXED
Thunderbird 69.0
Tracking Status
thunderbird68 --- fixed
thunderbird69 --- fixed

People

(Reporter: TbSync, Assigned: Paenglab)

Details

Attachments

(3 files)

Attached image 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

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

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.

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;
}
Flags: needinfo?(richard.marti)

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.

Assignee: nobody → richard.marti
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true
Flags: needinfo?(richard.marti)
Attachment #9073444 - Flags: review?(jorgk)
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.
Attachment #9073444 - Flags: review?(jorgk) → review+
Keywords: checkin-needed

For beta.

Attachment #9073457 - Flags: approval-comm-beta?
Comment on attachment 9073457 [details] [diff] [review]
1559964-make-caption-more-native-beta.patch

Thanks.
Attachment #9073457 - Flags: approval-comm-beta? → approval-comm-beta+

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

Target Milestone: --- → Thunderbird 69.0

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

Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Keywords: checkin-needed
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.