Bug 40086 – Easier to find line numbers to CSS declarations corresponding to source file

• Status: RESOLVED
• Resolution: INVALID
• Component: Web Inspector (Deprecated)

[Ron Hall]

I love the work you all are doing with the Web Inspector. I was going to request a feature to show the CSS line number of the CSS declaration, but then realized it is already there. At the end of the file path of the CSS file. 

/fileadmin/templates/skin_bn_2010/css/mainstyles.css:208

The problem is that line can be pretty long. I would like to see it handled more like it is in Firebug. Just the name of the css file and the line number. Path can be seen when hovering over the name.

Other than that it is great. I have not had to be in Firefox/Firebug in forever.

[Mikael Prag]

Created attachment 58280 [details]
Short the css file to only a short leafname.

[Mikael Prag]

Comment on attachment 58280 [details]
Short the css file to only a short leafname.

Something similar to what Firebug uses where the filename is shortened if too long and path stripped.

[Mikael Prag]

Created attachment 58285 [details]
Suggested patch for bug 40086

I also found this problem annoying and downloaded the source and gave it a go. I have done something similar to how Firebug has solved this by stripping the folder names (you can see them in the tooltip anyway) and shortening the file name if it's too long (longer than 15 chars). This is my very first go at submitting a patch so please go easy on me. I tried to follow all the rules I came by on webkit.org. Hope it helps someone.

[Alexander Pavlov (apavlov)]

Comment on attachment 58285 [details]
Suggested patch for bug 40086

Obviously, you have forgotten to request a review (r?) of the patch

[Alexander Pavlov (apavlov)]

Comment on attachment 58285 [details]
Suggested patch for bug 40086

View in context: https://bugs.webkit.org/attachment.cgi?id=58285&action=review

I'll leave it to reviewers to decide (I'm not a reviewer), but still, these comments are good to address. Thanks for the patch!

> WebCore/inspector/front-end/inspector.js:1713
> +        var linkText = linkText.split('\\').pop().split('/').pop();

Why both types of slash are used here? AFAIK, only '/'s are used in URLs.

On a side note, we use double-quotes (") rather than apostrophes (') in string literals.

> WebCore/inspector/front-end/inspector.js:1715
> +            linkText = linkText.substring(0, 4) + "..." + linkText.substring(linkText.length - 8, linkText.length);

The "linkText.length" parameter is not necessary as it defaults to the receiver string's length.

[Pavel Feldman]

Comment on attachment 58285 [details]
Suggested patch for bug 40086

Sounds like apavlov wants to say r-.

[Brian Burg]

Closing as invalid, as this bug pertains to the old inspector UI and/or its tests.
Please file a new bug (https://www.webkit.org/new-inspector-bug) if the bug/feature/issue is still relevant to WebKit trunk.