Closed Bug 1457440 Opened 2 years ago Closed 2 years ago

Stop translating margin, padding, border in the box-model diagram


(DevTools :: Inspector, defect, P3)



(firefox61 fixed)

Firefox 61
Tracking Status
firefox61 --- fixed


(Reporter: pbro, Assigned: gl, Mentored)



(Keywords: good-first-bug)


(2 files)

In Firefox in Italian (maybe other languages too, but not French as far as I can see), the words margin, padding and border are translated in the box-model widget.

See screenshot.

Translating DevTools is great, and it's a competitive advantage, so people feel more at home. Also translating complex technical stuff helps beginners. But going as far as translating property names, or other similar syntax keywords is a mistake.

There needs to be a limit after which you don’t translate anymore. And my point of view is that this limit needs to be the keywords of the syntax, or computed values.

Doing so can confuse people who know these words. And doesn't help beginners learn them.

So this bug is to hard code these 3 words in the box-model widget.
If someone is interested in picking up this bug, it's a very simple one.
Here's the doc to get started contributing to DevTools:
And here's the steps to take to solve the bug:

1) Remove the localized strings from /devtools/client/locales/en-US/
Here's a link to the code:

2) Find out where they are used in the code.
Probably only in /devtools/client/inspector/boxmodel/components/BoxModelMain.js

3) Replace them with the hard coded words: margin, padding, border
Assignee: nobody → gl
Comment on attachment 8971674 [details]
Bug 1457440 - Stop translating margin, padding, border in the box-model diagram.
Attachment #8971674 - Flags: review?(bgrinstead) → review+
Pushed by
Stop translating margin, padding, border in the box-model diagram. r=bgrins
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
It would have been nice to CC someone from localization to get a second opinion, since this is exactly an internationalization problem.

I agree that translating property names is in general an error, I'm not sure this is the case though. It's a diagram showing parts of the box model, so they look more like a string explaining a concept than a property name to me. 

If you look at Microsoft terminology, you'll notice that these concepts are translated in software like Visual Studio

padding: marge intérieure, remplissage
margin: marge
border: bordure

Side note: what about "position"? Is it a concept or the property name? It shows up only when position is set.
There's indeed going to have to be discussions on a case by case basis for these things.
For the box-model diagram, I don't necessarily agree that the labels in there are strings explaining the concept as opposed to property names. This diagram contains the computed property values for margin, border, padding and you can click on the values to edit them. The names are displayed there to indicate what those values come from.
MDN (in French here) also does not translate these words in a similar diagram:
But goes on to explain what each term means.
I think this highlights the fact that we can go much further in integrating MDN into DevTools. I believe the box-model diagram in DevTools should remain untranslated to be most effective, but then maybe we can find a way to link it to that MDN page, in the user's preferred language.

position should also be untranslated here I believe. I missed it when filing the bug.
Blocks: 1459377
(In reply to Francesco Lodolo [:flod] from comment #6)
> Side note: what about "position"? Is it a concept or the property name? It
> shows up only when position is set.
Thanks Gabriel for filing and fixing bug 1457440 for this.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.