1205569 - [RTL] webconsole-filter-button icons have wrong side margin in RTL locales

Status: VERIFIED FIXED

(DevTools :: Console, defect, P3)

Description

[magicp]

Attachment: rtl-webconsole-filter-button.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20150916030203

Steps to reproduce:

1. Run any Firefox version in Arabic.
2. Open Web Console


Actual results:

webconsole-filter-button icons have wrong side margin in RTL locales.


Expected results:

webconsole-filter-button icons have correct side margin in RTL locales.

Comment 1

[Tanay Prabhu Desai]

Do I need to know Arabic to resolve this bug? If not, I'd like to work on this bug. P.S. I've never contributed to this bug before.

Comment 2

[Tanay Prabhu Desai]

(In reply to Tanay Prabhu Desai from comment #1)
> Do I need to know Arabic to resolve this bug? If not, I'd like to work on
> this bug. P.S. I've never contributed to this bug before.

Sorry, I meant I've never contributed to open source before.

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Tanay Prabhu Desai from comment #1)
> Do I need to know Arabic to resolve this bug?

No, you should be able to use the Force RTL addon to simulate a RTL locale: https://addons.mozilla.org/en-US/firefox/addon/force-rtl/

Comment 4

[Tanay Prabhu Desai]

I installed that addon on both freshly built Nightly and my regular Firefox. It did not switch from LTR to RTL.

Comment 5

[magicp]

(In reply to Tanay Prabhu Desai from comment #4)
> I installed that addon on both freshly built Nightly and my regular Firefox.
> It did not switch from LTR to RTL.

Did you switch from menu? (menubar > Tools > Force RTL Direction)

Comment 6

[Tanay Prabhu Desai]

Okay, I successfully reproduced the bug. I'd like to fix this bug.

Comment 7

[Tanay Prabhu Desai]

Can this bug be assigned to me? I can try to fix it since its a good first bug?

Comment 8

[Brian Grinstead [:bgrins]]

(In reply to Tanay Prabhu Desai from comment #7)
> Can this bug be assigned to me? I can try to fix it since its a good first
> bug?

Sure!

Comment 9

[Tanay Prabhu Desai]

Where to find the CSS file that I have to edit for the console? I'm searching in the directories in the central tree, could not find the file. Is it  this file mozilla-central/devtools/client/debugger/debugger.css?

Comment 10

[Brian Grinstead [:bgrins]]

(In reply to Tanay Prabhu Desai from comment #9)
> Where to find the CSS file that I have to edit for the console? I'm
> searching in the directories in the central tree, could not find the file.
> Is it  this file mozilla-central/devtools/client/debugger/debugger.css?

Here it is: https://dxr.mozilla.org/mozilla-central/source/devtools/client/themes/webconsole.css

Comment 11

[Tanay Prabhu Desai]

I don't think I'll get enough time to fix this bug. I'm too busy with my college. You can assign the bug to someone else, if someone else is interested in fixing this bug.

Comment 12

[Brian Grinstead [:bgrins]]

(In reply to Tanay Prabhu Desai from comment #11)
> I don't think I'll get enough time to fix this bug. I'm too busy with my
> college. You can assign the bug to someone else, if someone else is
> interested in fixing this bug.

Alright, no problem. Thanks for the heads up!

Comment 13

[jafar.hh]

I'd like to take this on, but before I submit a patch, I noticed simply adding the right pixel margins to the right of the icons fixed this without breaking ltr languages, that is without checking in css if the current direction is rtl (standard direction check didn't work, must be set up differently).

Is that simple margin addition an acceptable fix to submit if everything looks good?

Comment 14

[Brian Grinstead [:bgrins]]

Actually, these filter buttons might actually be going away soon-ish so I want to confirm before we spend any more time on it.  Helen, have you been working on new designs for the webconsole filters?  If so, are you thinking of changing the popup behavior we have now?

Comment 15

[Helen V. Holmes (:helenvholmes) (:✨)]

(In reply to Brian Grinstead [:bgrins] from comment #14)
> Actually, these filter buttons might actually be going away soon-ish so I
> want to confirm before we spend any more time on it.  Helen, have you been
> working on new designs for the webconsole filters?  If so, are you thinking
> of changing the popup behavior we have now?

I have been working on new designs for the webconsole filters. I think that it might be beneficial to hold off on this bug for now depending on the outcome of the meeting this afternoon on filtering.

Comment 16

[Ian Moody [:Kwan] (UTC+1)]

These are still around, and the fix is simple.

Comment 17

[Ian Moody [:Kwan] (UTC+1)]

Attachment: Bug 1205569 - Use margin-inline-start instead of margin-left for the webconsole filter icons so they look right on RTL locales.

Review commit: https://reviewboard.mozilla.org/r/61964/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/61964/

Comment 18

[Tim Nguyen :ntim]

Comment on attachment 8767488 [details]
Bug 1205569 - Use margin-inline-start instead of margin-left for the webconsole filter icons so they look right on RTL locales.

https://reviewboard.mozilla.org/r/61964/#review58700

Looks good to me! Thanks for picking this up.

Comment 19

[Ian Moody [:Kwan] (UTC+1)]

Thanks for the fast review Tim!

Sheriff, I'm more than happy to do a try run, but given that this changes a CSS rule to one that usually resolves to the original rule anyway I think it'd be a waste of resources. Let me know if you disagree.

Comment 20

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/54799c43ba43
Use margin-inline-start instead of margin-left for the webconsole filter icons so they look right on RTL locales. r=ntim

Comment 21

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/54799c43ba43

Comment 22

[Onek Jude]

 hello, 


works well for me. web console bug is fixed. good team work guys