715891 - In the Style Editor, in the URLs, the "file name" should highlighted

Status: RESOLVED INVALID

(DevTools :: Style Editor, enhancement, P3)

Description

[Paul Rouget [:paul]]

For example, in bugzilla.mozilla.org, we see:

js/yui/assets/skins/sam/autocomplete.css?42424242

We should use different colors to highlight the file name:

<grey>js/yui/assets/skins/sam/</grey> <white>autocomplete.css</white> <grey>?42424242</grey>

Comment 2

[Sergiu Dumitriu]

Attachment: Patch (first version, with issues)

Here's a first attempt at this.

Originally, the whole name was stored in the "value" attribute of xul:label element. This doesn't allow highlighting just one part of the value, so I created an HTML fragment that I place as content inside the label.

For the moment, I highlighted the filename with an "<em>" styled as bold, I could also alter the colors in a future version of the patch.

The problem is that in the original version, long paths that didn't fit in the available width were cropped at the start, so that the actual filename is visible instead of the long path leading to it, and this was done using the "crop" attribute on the label. But this attribute doesn't have any effect when the label value comes from inner content instead of the "value" attribute, so the start-crop is lost. I managed to write some CSS rules to at least add an ellipsis at the end, but I'd like to find a solution so that the old behavior of cropping at the start is preserved. I'm out of ideas, so any help is appreciated.


As an additional change, I changed the way the name of stylesheets from the filesystem (saved or imported) is displayed: instead of just the filename, I display the whole path, highlighting the actual filename.

Comment 3

[Sergiu Dumitriu]

Attachment: UI before patch

Comment 4

[Sergiu Dumitriu]

Attachment: UI after patch

Comment 5

[Mihai Sucan [:msucan]]

Sergiu, thank you for your work. Please let us know when the patch is ready for review.

Comment 6

[Sergiu Dumitriu]

Attachment: Patch (first version, with issues)

Comment 7

[Paul Rouget [:paul]]

Comment on attachment 697921 [details] [diff] [review]
Patch (first version, with issues)

(In reply to Sergiu Dumitriu from comment #2)
> The problem is that in the original version, long paths that didn't fit in
> the available width were cropped at the start, so that the actual filename
> is visible instead of the long path leading to it, and this was done using
> the "crop" attribute on the label. But this attribute doesn't have any
> effect when the label value comes from inner content instead of the "value"
> attribute, so the start-crop is lost. I managed to write some CSS rules to
> at least add an ellipsis at the end, but I'd like to find a solution so that
> the old behavior of cropping at the start is preserved. I'm out of ideas, so
> any help is appreciated.

That's a very annoying problem. I ran into the same thing with the inspector infobar and the inspector breadcrumbs. The solutions were to: no crop at all (just hide, like in the breadcrumbs) or use HTML instead of XUL.

Just hiding is a valid option here I think.

Also, I don't think we should spend too much time on this. We are planning to refactor this code in the coming weeks (get rid of splitview).

Comment 8

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 9

[Patrick Brosset <:pbro>]

Inspector bug triage (filter on CLIMBING SHOES).

Comment 10

[Ariel Burone]

The style editor is not showing the paths anymore (moved to a popup)

Comment 11

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

Obsolete bug report, closing.

Honza