Developer tools should display the beginning of css file name, not the end

RESOLVED FIXED in Firefox 42

Status

defect
RESOLVED FIXED
4 years ago
Last year

People

(Reporter: mibus32, Assigned: llkats, Mentored)

Tracking

38 Branch
Firefox 42

Firefox Tracking Flags

(firefox42 fixed)

Details

(Whiteboard: [good first bug][lang=html][bugday-20150805])

Attachments

(4 attachments)

Reporter

Description

4 years ago
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:38.0) Gecko/20100101 Firefox/38.0
Build ID: 20150525141253

Steps to reproduce:

Ruby on Rails, as well as some other web development frameworks appends the footprint to the end of asset files for proper browser caching. This usually avoided in the development environment, but we're not always there. And because of the dev tools displaying only the end of the filename, it is impossible to pick a file that you want to see without using search tool. I think that because of this, and also some common sense, style editor and debugger should show the beginning or the beginning..end.css of the file.

Comment 1

4 years ago
I will bet you money that there will be other web dev frameworks that modify the start of the filename, or have many files where the start of the filename is similar (the "wp-" prefix in wordpress comes to mind, though I don't know if they use that for JS files as well).

Ultimately it seems like the code should be cleverer still, and somehow determine which bit of the filename is meaningful/distinguishable. I don't know what techniques would work universally there short of having actual language vs. random noise detection (which would be error-prone in case the hashes contain deadbeef or other random bits of hex that look like English).

Maybe we need something like source maps but for CSS?

Brian, can you redirect this to the appropriate person?
Status: UNCONFIRMED → NEW
Component: Untriaged → Developer Tools: Style Editor
Ever confirmed: true
Flags: needinfo?(bgrinstead)
I think what the rule view does works well.  Here is a screenshot of what it looks like with plenty of space
And here is what it looks like without the space (it collapses to begin..end.css)
All we need to do here is change crop="start" to crop="center" for the label: https://dxr.mozilla.org/mozilla-central/source/browser/devtools/styleeditor/styleeditor.xul#137.
Mentor: bgrinstead
Flags: needinfo?(bgrinstead)
Whiteboard: [good first bug][lang=html]
(In reply to :Gijs Kruitbosch from comment #1)
> Ultimately it seems like the code should be cleverer still, and somehow
> determine which bit of the filename is meaningful/distinguishable. I don't
> know what techniques would work universally there short of having actual
> language vs. random noise detection (which would be error-prone in case the
> hashes contain deadbeef or other random bits of hex that look like English).
> 
> Maybe we need something like source maps but for CSS?

I realized I didn't really address this part of the request.  Yes, it'd be great if we had a utility that could be smarter about what part of the CSS file to show given a limited amount of space - cc'ing :pbrosset and :gl.

I think to fix this bug, just cropping in the center is 'good enough' but if we came up with something smarter it could be helpful for Rule View / Computed View also.
This is partially related to bug 971191, which I tried to fix way back. Linking this for reference for now. Will look into it later.
Assignee: nobody → llkats
Assignee

Comment 7

4 years ago
:D
Reporter

Comment 8

4 years ago
(In reply to Lydia from comment #7)
> Created attachment 8639645 [details] [diff] [review]
> Bug1178120.patch
> 
> :D

Looks terrific! Is there a way to apply it locally? :)
Comment on attachment 8639645 [details] [diff] [review]
Bug1178120.patch

Review of attachment 8639645 [details] [diff] [review]:
-----------------------------------------------------------------

Nice!
Attachment #8639645 - Flags: review+
Status: NEW → ASSIGNED
(In reply to mibus32 from comment #8)
> (In reply to Lydia from comment #7)
> > Created attachment 8639645 [details] [diff] [review]
> > Bug1178120.patch
> > 
> > :D
> 
> Looks terrific! Is there a way to apply it locally? :)

You can download the patch and apply it to a local build: `hg qimport https://bugzilla.mozilla.org/attachment.cgi?id=8639645; hg qpush`.  Or just wait for it to get checked in (which will be soon)
https://hg.mozilla.org/mozilla-central/rev/d149368338aa
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 42
Successfully reproduce in Nightly 41.0a1 (2015-06-28) (Build ID: 20150628030215) on Windows 10 64 Bit.

This Bug is now verified as fixed on Latest Nightly 42.0a1 (2015-08-05) 

Build ID: 20150805030208
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:42.0) Gecko/20100101 Firefox/42.0
QA Whiteboard: [bugday-20150805]
Whiteboard: [good first bug][lang=html] → [good first bug][lang=html][bugday-20150805]

Updated

Last year
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.