Closed Bug 1494711 Opened Last year Closed 9 months ago

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

Categories

(DevTools :: Console, defect, P3)

defect

Tracking

(firefox67 verified)

VERIFIED FIXED
Firefox 67
Tracking Status
firefox67 --- verified

People

(Reporter: itiel_yn8, Assigned: phoenixgyaan, Mentored)

References

(Blocks 1 open bug)

Details

(Keywords: good-first-bug, rtl, Whiteboard: good-first-bug)

Attachments

(4 files, 1 obsolete file)

Attached image RTL twisty
See attached, this is how it currently looks.
Thw twisty should appear as LTR.
Mentor: odvarko
Keywords: good-first-bug
Priority: -- → P3
Whiteboard: good-first-bug
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.
Flags: needinfo?(odvarko)
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.
Attached image Twisties highlighted
@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
Flags: needinfo?(odvarko)
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.
(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.
Should I assign this bug to you?
Do you want to work on it?

Honza
Flags: needinfo?(developerreshmad)
(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
Flags: needinfo?(developerreshmad)
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
Flags: needinfo?(odvarko)
Attachment #9016534 - Flags: feedback+
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
Component: DOM → Console
Flags: needinfo?(odvarko) → needinfo?(nchevobbe)
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.
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?
Flags: needinfo?(nchevobbe)
(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.
Flags: needinfo?(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
Flags: needinfo?(nchevobbe)

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! 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?

(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.

Assignee: nobody → phoenixgyaan

(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.

(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.

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

Ok, on it... :)

changing the css properties in webconsole.css

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

Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/b10430e35c4e
Don't RTL the twisties in the 'Show DOM properties' panel. r=nchevobbe
Status: NEW → RESOLVED
Closed: 9 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 67

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

Status: RESOLVED → VERIFIED
Attachment #9046300 - Attachment is obsolete: true
Duplicate of this bug: 1488492
You need to log in before you can comment on or make changes to this bug.