1494711 - Don't RTL the twisties in the "Show DOM properties" panel

Status: VERIFIED FIXED

(DevTools :: Console, defect, P3)

Description

[Itiel]

Attachment: RTL twisty

See attached, this is how it currently looks.
Thw twisty should appear as LTR.

Comment 1

[Reshma]

Hello Mentor,

I am an Outreachy applicant and I'd like to work on this one. Can you give me some pointers, please?
I don't understand what does does twisties means.I just figured out RTL means Right-to-left.
I am a beginner in Javascript & DOM having done 1 project based on DOM manipulation using Firefox Developer edition.
I would first like to understand what the issue means.

Thanks,
Reshma.

Comment 2

[Itiel]

The twisties are the little arrow buttons that allow you to expand/collapse a sector. See attached.
In RTL locales, the twisties (when not expanded) should point to the right, just like in LTR locales. They're currently pointing to the left.

Comment 3

[Itiel]

Attachment: Twisties highlighted

Comment 4

[Jan Honza Odvarko [:Honza] (always need-info? me)]

@Reshma: thanks for the help!

1) Switching between RTL and LTR can be done through about:config
intl.uidirection => -1 LRT
intl.uidirection => 1 LTR

2) User Browser Toolbox to inspect the UI (the twisty icon) to figure out what CSS style are applied and where and what new CSS styles should be created to fix the problem.
https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox

Does that make sense?

Some more links:

* How to contribute to Firefox Developer Tools
https://developer.mozilla.org/en-US/docs/Tools/Contributing

* The Outreachy project is related to the Network monitor tool. Here is a page explaining its purpose & features
https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor

* List of good-first-bugs. You should start picking bugs from this list. It’s all related to the Network monitor tool. I am regularly adding new bugs in it, so there should be more soon.
https://bugs.firefox-dev.tools/?easy&tool=network

Honza

Comment 5

[Reshma]

Thank you for the concise explanation.
The links provided are really helpful as I was so confused when looking for the bugs related to the project.

Comment 6

[Reshma]

(In reply to Itiel from comment #2)
> The twisties are the little arrow buttons that allow you to expand/collapse
> a sector. See attached.
> In RTL locales, the twisties (when not expanded) should point to the right,
> just like in LTR locales. They're currently pointing to the left.

Thank you for taking the time to explain to me.
Learned something new and interesting.

Comment 7

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Should I assign this bug to you?
Do you want to work on it?

Honza

Comment 8

[Reshma]

(In reply to Jan Honza Odvarko [:Honza] from comment #7)
> Should I assign this bug to you?
> Do you want to work on it?
> 
> Honza

I am reading through all the links you have provided, and I am working on both bug 1494711 as well as 1496440.
You have already assigned me to bug 1496440. If it's okay, then I would like to be assigned to this as well.
thanks.

Right now, I am still figuring out the browser toolbox and inspecting the twisty in DOM panel and will get reach out if I need more guidance.

Reshma

Comment 9

[Reshma]

Attachment: Possible Solution to Bug 1494711

So, in the DOM properties panel, the arrow class containing twisty , has transform:rotate(90deg)
which points the twisty arrow in left direction in the tree node (RTL mode)

After changing it to transform:rotate(-90deg), they point to the correct right direction.

I am in the right direction here?
I would like your feedback as I figure out the next steps.

thanks,

Reshma

Comment 10

[Jan Honza Odvarko [:Honza] (always need-info? me)]

I just realized the this is related to Object Inspector (not DOM Panel), so I am moving the bug into the Console component.

The problem might be here:
https://searchfox.org/mozilla-central/rev/1ce4e8a5601da8e744ca6eda69e782318afab54d/devtools/client/shared/components/reps/reps.css#353

Should we use 270 deg?

Nicolas?


Honza

Comment 11

[Itiel]

Disabling the html[dir="rtl"] .tree-node img.arrow rule seems to work for me as it looks like it falls back to the normal .tree-node img.arrow where the -90deg is already used.

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

Mh, I just tested in the console and the arrow are now displayed fine.
It was probably fixed at some point.
Should we resolve this bug?

Comment 13

[Itiel]

(In reply to Nicolas Chevobbe from comment #12)
> Mh, I just tested in the console and the arrow are now displayed fine.
> It was probably fixed at some point.
> Should we resolve this bug?

That's still an issue.

STR:
1. Change intl.uidirection to 1 and restart
2. Open the inspector, right click any code and click "Show DOM properties"

The result will be the same as the attached screenshot.

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

My bad, I did not restart when I tried. I can reproduce the issue now.
This is due to https://searchfox.org/mozilla-central/rev/2e5e28f518524f8af5b158ddb605022b6a2d68cf/devtools/client/shared/components/reps/reps.css#374-376, which we may want to override from webconsole.css (because other consumer of reps might still want to have the arrow in the ltr way, like the debugger).

The following change: 

```
.webconsole-output-wrapper .object-inspector .tree-node .arrow {
  transform:rotate(-90deg);
}
```

in webconsole.css seems to fix the issue

Comment 15

[PhoenixAbhishek]

Hi, I am an Outreachy applicant for the current round.
I would like to have this bug assigned to me if it is still possible to do so.

Comment 16

[Helena Moreno (aka helenatxu)]

Hello! I am applying for this Outreachy round and I am looking for bugs/issues I could help with to learn as much as possible. Can I take this one?

Comment 17

[Nicolas Chevobbe [:nchevobbe]]

(In reply to PhoenixAbhishek from comment #15)

Hi, I am an Outreachy applicant for the current round.
I would like to have this bug assigned to me if it is still possible to do so.

Hello PhoenixAbhishek, thanks for wanting to help us. I'm going to assign the bug to you.
You can have a look at http://docs.firefox-dev.tools/getting-started/ to setup the work environment (make sure to use artifact builds as it's much faster).
Feel free to ask any question, either here or on our Slack.

Comment 18

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Helenatxu from comment #16)

Hello! I am applying for this Outreachy round and I am looking for bugs/issues I could help with to learn as much as possible. Can I take this one?

Hello Helenatxu, I'm glad you want to help us :) PhoenixAbhishek asked first so I assigned it to them, but I'm going to try to find you a nice first bug to work on, and ping you from there.

Comment 19

[PhoenixAbhishek]

(In reply to Nicolas Chevobbe from comment #17)

(In reply to PhoenixAbhishek from comment #15)

Hi, I am an Outreachy applicant for the current round.
I would like to have this bug assigned to me if it is still possible to do so.

Hello PhoenixAbhishek, thanks for wanting to help us. I'm going to assign the bug to you.
You can have a look at http://docs.firefox-dev.tools/getting-started/ to setup the work environment (make sure to use artifact builds as it's much faster).
Feel free to ask any question, either here or on our Slack.

Thank you for assigning the issue.
I have made the necessary changes in \mozilla-central\devtools\client\themes\webconsole.css file.
How do I proceed with making a pull request for this fix.

Comment 20

[Nicolas Chevobbe [:nchevobbe]]

Rad!
We use Phabricator for code reviews, you can read how to submit a patch in https://docs.firefox-dev.tools/contributing/making-prs.html

Comment 21

[PhoenixAbhishek]

Ok, on it... :)

Comment 22

[PhoenixAbhishek]

Attachment: Bug 1494711 - Don't RTL the twisties in the 'Show DOM properties' panel

changing the css properties in webconsole.css

Comment 23

[PhoenixAbhishek]

Attachment: Bug 1494711 - Don't RTL the twisties in the 'Show DOM properties' panel. r=nchevobbe

Don't RTL the twisties in the 'Show DOM properties' panel

Comment 24

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/b10430e35c4e
Don't RTL the twisties in the 'Show DOM properties' panel. r=nchevobbe

Comment 25

[Andrei Ciure[:aciure]]

https://hg.mozilla.org/mozilla-central/rev/b10430e35c4e

Comment 26

[Itiel]

Looks like this is fixed now in latest Nightly. Thanks!