Open Bug 1705182 Opened 4 years ago Updated 1 year ago

Text is not aligned to the right in JS modals within RTL builds

Categories

(Toolkit :: Content Prompts, defect)

defect

Tracking

()

Tracking Status
firefox87 --- disabled
firefox88 --- unaffected
firefox89 --- affected

People

(Reporter: clara.guerrero, Unassigned)

Details

Attachments

(6 files)

Attached image Screen Shot 2021-04-14 at 16.20.24.png (deleted) —

Affected platforms:
Platforms: Mac OS11

Preconditions
Start an RTL Firefox builds (i.e. ar)
Set the following prefs in about:config

  • browser.proton.enabled = true
  • prompts.windowPromptSubDialog = true
  • prompts.contentPromptSubDialog = true
  • browser.proton.modals.enabled = true

Steps to reproduce

  1. Launch the Firefox browser in RTL build
  2. Trigger an Alert() , Confirm() , Prompt() modals to check they are displayed according to the new Proton Design

Expected result
The text within modal should be aligned to the right, and the buttons to the left.

Actual result
The text is aligned to the left.

Severity: -- → S3
Has Regression Range: --- → no
Has STR: --- → yes
Attached image Screen Shot 2021-04-14 at 15.39.21.png (deleted) —

Notice that when checkbox is triggered, it is correctly aligned to the right.

This was done way back in Bug 652550. I think adding a simple text-align: match-parent should fix this.

(In reply to Itiel from comment #5)

This was done way back in Bug 652550. I think adding a simple text-align: match-parent should fix this.

Just to clarify, is the alignment like this in the "old" alert/prompt/confirm dialogs as well?

Before seeing this report, I would have expected the text alignment to depend on the directionality of the text, rather than of the build, but perhaps that's not what RTL users expect - can you clarify?

Flags: needinfo?(itiel_yn8)

AFAIR yes, this has been this way also on the old dialogs.
tbh I'm on the fence on this myself, but seeing some elements right aligned and others left aligned seems jarring to my RTL eyes (especially on cases like in comment 3), so adding text-align: match-parent is somewhat the middleground- if the text is RTL, it'll appear on the right (literally) side; if the text is LTR, punctuation marks would at least appear on the right (again, literally) side.

Flags: needinfo?(itiel_yn8)

Right, if you turn off prompts.contentPromptSubDialog (to get the old dialogs that we have on release), the same thing happens.

I'm basically going to defer to RTL users/experts as to what is the right thing here. Mixed content is always going to be confusing, but RTL text is correctly aligned to the right, even in LTR builds, which I also wouldn't want to break.

Either way it probably shouldn't block proton if it's not a change from the status quo.

No longer blocks: proton-modals, 1694132

This issue also happens for the "Unable to Update" notification panel on RTL Beta 89.0b13 version. I'll attach evidence and change flags accordingly.

(In reply to Marcela from comment #9)

This issue also happens for the "Unable to Update" notification panel on RTL Beta 89.0b13 version. I'll attach evidence and change flags accordingly.

This implementation is completely separate, so can you file a separate bug for that? Thanks.

Flags: needinfo?(marcela.calderon)

(In reply to :Gijs (he/him) from comment #11)

(In reply to Marcela from comment #9)

This issue also happens for the "Unable to Update" notification panel on RTL Beta 89.0b13 version. I'll attach evidence and change flags accordingly.

This implementation is completely separate, so can you file a separate bug for that? Thanks.

yes, sure

Flags: needinfo?(marcela.calderon)

(In reply to Marcela from comment #12)

(In reply to :Gijs (he/him) from comment #11)

(In reply to Marcela from comment #9)

This issue also happens for the "Unable to Update" notification panel on RTL Beta 89.0b13 version. I'll attach evidence and change flags accordingly.

This implementation is completely separate, so can you file a separate bug for that? Thanks.

yes, sure

The Text on the Panel notification in English is "Your operating system isn’t compatible with the latest version of {Brand name}." and I thought that the text is not displayed on the right side, but it is displayed properly on the panel notification, the Arabic text was a little confusing.

Component: Notifications and Alerts → Content Prompts
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: