789094 - Style editor: scripts with unicode in the name are URL-escaped

Status: RESOLVED FIXED

(DevTools :: Style Editor, defect)

Description

[Thaddee Tyl [:espadrine]]

Take a file named <☙.css>.

In the Style Editor, it is displayed as <%E2%98%99.js>.
It would be nicer to display it as the corresponding unicode character, as the awesome bar itself does.

Comment 1

[Rob Campbell [:rc] (:robcee)]

can we get a mentor for this?

Comment 2

[Mario Alvarado [:marioalv]]

Hi.
I would like to help solving this bug.
Could someone please give me a hint about where in the code is located the style editor files and what files would need to be changed?

Thanks.

Comment 3

[Andres Hernandez [:andreshm]]

Style editor code is in browser/devtools/styleeditor

Comment 4

[Mario Alvarado [:marioalv]]

Attachment: First patch to show the corresponding characters in the style editor

This is my first patch for this bug.
I copied the function losslessDecodeURI(aURI) from browser.js to emulate the behavior of the awesome bar.

I tested a HTML file with this stylesheet includes:

<link rel="stylesheet" type="text/css" href="☙.css">
<link rel="stylesheet" type="text/css" href="styles.css?стиль&somethingElse_☙_hello">
<link rel="stylesheet" type="text/css" href="стиль.css">

All the file names were properly displayed in the style editor.

The only strange behavior (which also happens in the awesome bar) is when you include the "%" character in an URL, along with non english characters, like this:
http://localhost/test/test.html?стиль_abc%def.css

In that case, the awesome bar will display the URL as: http://localhost/test/test.html?%D1%81%D1%82%D0%B8%D0%BB%D1%8C_abc%def.css

and the style editor will display the stylesheet include <link rel="stylesheet" type="text/css" href="стиль_abc%def.css"> as %D1%81%D1%82%D0%B8%D0%BB%D1%8C_abc%def.css .

Please let me know if something needs to be changed or done differently.

Thanks.

Comment 5

[Mario Alvarado [:marioalv]]

Attachment: Screenshot displaying the stye editor with corresponding non-english characters

Comment 6

[Mario Alvarado [:marioalv]]

Attachment: Screenshot displaying the stye editor having a filename with the character "%" along with non-english characters

Comment 7

[Dão Gottwald [:dao]]

Comment on attachment 666681 [details] [diff] [review]
First patch to show the corresponding characters in the style editor

Thanks for this patch. It seems to me that the displayed name can just be decoded lossy here, as it's only purpose is being displayed -- as opposed to the location bar, it can't be copied or edited here and won't be used to make further HTTP requests.

So I think all you want here is call decodeURI and be done with it.

Comment 8

[Mario Alvarado [:marioalv]]

Attachment: Second version of the patch to show the corresponding characters in the style editor

This patch uses the function decodeURI() to decode the characters from the stylesheet filename displayed in the Style Editor of the Web Developer tool.

Comment 9

[Dão Gottwald [:dao]]

Comment on attachment 667124 [details] [diff] [review]
Second version of the patch to show the corresponding characters in the style editor

decodeURI can throw, so you'll need to wrap this in try/catch.

Comment 10

[Mario Alvarado [:marioalv]]

Attachment: Third version of the patch to show the corresponding characters in the style editor

Added a try/catch for the decodeURI function call.

Comment 11

[Dão Gottwald [:dao]]

Comment on attachment 667600 [details] [diff] [review]
Third version of the patch to show the corresponding characters in the style editor

Thanks!

I suppose we have no tests for this that need to be updated.

Comment 12

[Mario Alvarado [:marioalv]]

Hi.
Thanks for the review.

Does this patch need to be executed in the try server?

Comment 13

[Matthew N. [:MattN]]

Pushed to try: https://tbpl.mozilla.org/?tree=Try&rev=9895d8cf22b2
I'll push to inbound later if it's green and a devtools reviewer gives r+.

Comment 14

[Matthew N. [:MattN]]

Pushed to inbound: https://hg.mozilla.org/integration/mozilla-inbound/rev/efbc7c741357

Comment 15

[Ed Morley [:emorley]]

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