Options panel layout doesn't work well with translated text

RESOLVED FIXED in Firefox 34

Status

RESOLVED FIXED
4 years ago
4 months ago

People

(Reporter: bgrins, Assigned: bgrins)

Tracking

Trunk
Firefox 34
Dependency tree / graph
Bug Flags:
qe-verify -

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(2 attachments, 3 obsolete attachments)

(Assignee)

Description

4 years ago
Created attachment 8470131 [details]
devtoolsprefs.png

We have some issues with the options panel UI, especially when the labels are translated - see screenshot.

Comment from the mailing list - https://groups.google.com/forum/#!topic/mozilla.dev.developer-tools/6YA1cEQN7WQ: 

I must say that it's been really hard to make a good translation to Spanish
for the preferences in devtools*. We're having problems with "labels", as
they are only one line height, and are causing "overflow" with other
contents even though we've shortened the words to the maximum extent.
Here you have the following screenshot** for more details.

I've also noticed that the distribution is weird for low resolution, as the
preferences are distributed in three floating block, when a browser has a
small width and the first block is higher than the second one.
| 1 | 2 |
-----| 3 |
(Assignee)

Comment 1

4 years ago
In order to wrap, looks like we will need to switch from a value attribute to text node on the <label>s: https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/label#Wrapping

Comment 2

4 years ago
(In reply to Brian Grinstead [:bgrins] from comment #1)
> In order to wrap, looks like we will need to switch from a value attribute
> to text node on the <label>s:
> https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/label#Wrapping

If you want to wrap, use a <description>, if you want to crop, use <label value="">.
(Assignee)

Comment 3

4 years ago
Created attachment 8470146 [details] [diff] [review]
options-panel-ui-WIP.patch

Fernando, are you able to apply this patch and check to see if it improves things?
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Attachment #8470146 - Flags: feedback?(striptm)
The change of <label value="foo" /> by <label>foo</label> is fantastic, our long label now appear in 2 lines.

Now we would have to solve the defaultColorUnitMenuList, is also very wide and overflows (I add screenshot)
[english]
Default color unit | Color Names
[es-ES]
Unidad de color por defecto | Nombres de colores
[fr]
Unité par défaut pour les couleurs | noms de couleurs
Created attachment 8470392 [details]
devtoolsprefs2.png
Comment on attachment 8470392 [details]
devtoolsprefs2.png

Applied options-panel-ui-WIP.patch
Attachment #8470146 - Flags: feedback?(striptm) → feedback+
(Assignee)

Comment 7

4 years ago
(In reply to Paul Rouget [:paul] (slow to respond. Ping me on IRC) from comment #2)
> (In reply to Brian Grinstead [:bgrins] from comment #1)
> > In order to wrap, looks like we will need to switch from a value attribute
> > to text node on the <label>s:
> > https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/label#Wrapping
> 
> If you want to wrap, use a <description>, if you want to crop, use <label
> value="">.

It looks like we can still use <label>foo</label> instead of <description>foo</description> and get the same effect.

Comparing https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/label#Wrapping and https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/description it seems like they have the same properties with wrapping (don't wrap with value="", do wrap with text content).
(Assignee)

Comment 8

4 years ago
Created attachment 8470822 [details] [diff] [review]
options-panel-ui.patch

Can you give this a try?  I switched the <hbox> wrapper for the three menulist options to a <description>, which allows wrapping
Attachment #8470146 - Attachment is obsolete: true
Attachment #8470822 - Flags: feedback?(striptm)
Created attachment 8471149 [details]
devtoolsprefs3.png
Attachment #8470131 - Attachment is obsolete: true
Attachment #8470392 - Attachment is obsolete: true
Great, the new patch has definitely solved the problem.
Attachment #8470822 - Flags: feedback?(striptm) → feedback+
(Assignee)

Updated

4 years ago
Attachment #8470822 - Flags: review?(mratcliffe)
Attachment #8470822 - Flags: review?(mratcliffe) → review+
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/f0f57896a851
Status: ASSIGNED → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 34
Flags: qe-verify-

Updated

4 years ago
Depends on: 1098431

Updated

4 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.