Bug 30062 – Inspector should syntax highlight JS/CSS in elements view

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

[Brian Weinstein]

Created attachment 40599 [details]
Screen Shot

Inspector should syntax highlight JS/CSS in elements view.

[Brian Weinstein]

Created attachment 40600 [details]
Fix Take 2

[Timothy Hatcher]

Nice! We should preserve line breaks and whitespcae too.

[Brian Weinstein]

(In reply to comment #2)
> Nice! We should preserve line breaks and whitespcae too.

Do I have a step in the code get rid of that? I'm not sure where I would be destroying whitespace. Do I manually have to add code to get it to preserve whitespace (via string replacements)?

[Timothy Hatcher]

Comment on attachment 40600 [details]
Fix Take 2

I worry adding inspector.css to the iframe will cause subtle issues, since we have many generic selectors in that file.

I think duplicating the style rules is fine. Or move all the shareable rules from styleText into a new CSS file and make inspector.html and the iframe include that.

I am also surprised the syntax highligher objects work when passed null.

[Timothy Hatcher]

Comment on attachment 40600 [details]
Fix Take 2

> +                    info.title ="\"<span>" + newNode.innerHTML + "</span>\"";
> +                    info.title ="\"<span>" + newNode.innerHTML + "</span>\"";

You should put class=\"webkit-html-text-node\" on these spans too. Missing a space after the "=".

> +                } else if (this.parentNode && this.parentNode.nodeName.toLowerCase().escapeHTML() == "style") {

No need for .escapeHTML(), since it will never have HTML characters.

Try adding "white-space: pre" to the webkit-html-text-node class, and see if that preserves line breaks. It might break things, but worth a try.

[Brian Weinstein]

Created attachment 40603 [details]
Screen Shot + Whitespace

[Brian Weinstein]

Created attachment 40604 [details]
Fix actually take 2

[Timothy Hatcher]

Comment on attachment 40604 [details]
Fix actually take 2

This looks good! But I think we want to trim starting newlines and ending whitespace to make it look less odd.

Also remove the quotes?

[Joseph Pecoraro]

Yah, this looks great (I applied it locally and it works great)!

> Add syntax higlighting of CSS and Javascript tags to the elements panel.

A few typos in the ChangeLog that you might want to fix. "highlighting" and "JavaScript".

(In reply to comment #8)
> (From update of attachment 40604 [details])
> This looks good! But I think we want to trim starting newlines and ending
> whitespace to make it look less odd.
> 
> Also remove the quotes?

+1

[Brian Weinstein]

Created attachment 40605 [details]
No quotes or leading/trailing whitespace

[Timothy Hatcher]

Comment on attachment 40605 [details]
No quotes or leading/trailing whitespace

You only want to remove newlines from the beginning, so that indented text matches up with other lines.

So:

/^[\n\r]*/

[Brian Weinstein]

Created attachment 40607 [details]
Leading newlines + Trailing whitespace

[Brian Weinstein]

Committed in http://trac.webkit.org/changeset/49081.