Open Bug 1323041 Opened 3 years ago Updated 2 years ago

Adjust the Animations panel for RTL

Categories

(DevTools :: Inspector: Animations, defect, P3)

defect

Tracking

(Not tracked)

People

(Reporter: itiel_yn8, Assigned: tomer)

References

(Blocks 1 open bug, )

Details

(Keywords: rtl)

Attachments

(3 files, 1 obsolete file)

The Animations panel in current Nightly builds is not RTL'd at all, on RTL environment.

Things to consider when RTLing this panel:
1. The panel's bar should also be RTL
2. The message saying that no animation are found should support RTL
3. When the animation's running, the node text should appear as LTR (so that strings like "div#sfdiv.sbibod." won't appear as ".div#sfdiv.sbibod"

Screenshots attached with the current look of the non-RTL'd Animations panel.
Attached image Non RTL (obsolete) —
Attachment #8818071 - Attachment is obsolete: true
Component: Developer Tools: Inspector → Developer Tools: Animation Inspector
Priority: -- → P3
Comment on attachment 8819425 [details]
Bug 1323041 Adjust the Animations panel for RTL

https://reviewboard.mozilla.org/r/99206/#review99504

::: devtools/client/animationinspector/animation-inspector.xhtml:6
(Diff revision 1)
> -<html xmlns="http://www.w3.org/1999/xhtml">
> +<!DOCTYPE html [
> +<!ENTITY % htmlDTD PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> %htmlDTD;
> +<!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd"> %globalDTD;
> +]>
> +
> +<html xmlns="http://www.w3.org/1999/xhtml" dir="&locale.dir;">

This should be enough to fix the direction issues (items one and two) when there is no animation node selected. I'm not sure how to easily inspect the DevTools chrome from within Firefox, so I was unable to verify the changes I've introduced and fix the remaining issues. I'd very appriciate an assistance on how to continue 

chrome://devtools/content/animationinspector/animation-inspector.xhtml
Comment on attachment 8819425 [details]
Bug 1323041 Adjust the Animations panel for RTL

Redirecting this to Julian who might know more about how we should be doing RTL
Attachment #8819425 - Flags: review?(gl) → review?(jdescottes)
Comment on attachment 8819425 [details]
Bug 1323041 Adjust the Animations panel for RTL

https://reviewboard.mozilla.org/r/99206/#review99582

Thanks for the patch! 

We are removing XUL and chrome:// dependencies from our frontend code, so in the long run I would like to avoid the global.dtd here.
For documents loaded by the toolbox directly (e.g. the inspector document) we just add an empty dir attribute [1]. 
The animation-inspector iframe is loaded by toolsidebar.js so it's a bit more complicated. I will open another bug to tackle this properly.

For now you can proceed with the global.dtd from your patch, and focus on fixing the styles in RTL mode.
To inspect the devtools markup, use the browser toolbox : https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox
To test RTL in your local build, use the forceRTL add-on : https://addons.mozilla.org/en-us/firefox/addon/force-rtl/

Let me know if you have any issue getting started! 

[1] https://wiki.mozilla.org/DevTools/CSSTips#RTL_support_for_html_modules
Attachment #8819425 - Flags: review?(jdescottes)
Blocks: dt-rtl
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.