Add ID and CLASS folders to Code Explorer

[garethjmsaunders]

I've tried to search for this suggestion and can't seem to find it, so apologies if someone has already suggested this.

I've just started using the Code Explorer panel more in WeBuilder 2007 and besides Images, Hyperlinks, Style Sheets and Scripts, I'd find it really useful if there were 'folders' for #ids and .classes.

This would offer a really quick way of navigating around the document.

Thanks

Gareth

[Gatis]

If you choose CSS for the language at the bottom of Code Explorer window, you should be able to see Categorization for CSS items. You must enable also the "Categorize by type" for this to work (under Options in Code Explorer)

[garethjmsaunders]

Yes, but that only works for navigating through CSS code; which I grant is really helpful.

What I meant, however, was viewing an XHTML file, for example, and being able to view a list of all the IDs in that document so that I could easily jump to the #header or #footer from the list, just as I can for images, hyperlinks, style sheets and scripts.

Does that make sense?

[Gatis]

I think I do understand what do you mean.
However, the CSS code explorer works also with XHTML file and does show all IDs, Classes in your current document.
I think we won't integrate these CSS items also in HTML tree, because that would slow up things besides it would double functionality that exists already.

[garethjmsaunders]

I think I do understand what do you mean.
However, the CSS code explorer works also with XHTML file and does show all IDs, Classes in your current document.
I think we won't integrate these CSS items also in HTML tree, because that would slow up things besides it would double functionality that exists already.

That's a shame, but I don't think it's doubling the functionality.

I tried as you suggested with the CSS Code Explorer with an XHTML document but it only works if there is CSS defined within a <style> block on the page. It certainly doesn't recognise all the DIV, UL and other XHTML elements that have an ID or class.

What I was saying was that if I had an XHTML document that had, say, six DIVs, like this:

<div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>

and all the CSS was being either linked or @imported, what I was hoping for was the ability to navigate quickly through the document using the Code Explorer in the HTML mode. I was hoping that it would list all the defined IDs and classes within the XHTML markup so that I could both audit these and use it to quickly navigate to a particular IDed element, e.g. jump straight to #nav from anywhere in the document.

It seems to me that the Code Explorer in WeBuilder, certainly in the HTML mode is very much like the Files > Assets tab in Dreamweaver 8.

If this functionality can't be included then it would certainly be helpful if when viewing an HTML document and clicking the CSS mode on Code Explorer it loaded in the @imported or linked CSS selectors for either that document or the particular part of the document you are currently exploring. Similar to Dreamweaver 8's CSS Styles (Shift + F11) tab, or what FireBug does in the browser.

Even just an option that can search through the current document in realtime and list all the IDs and classes would be really useful. The ability to audit which IDs and classes for me would be more important than navigating directly to them.

Anyway, that's a more full explanation of what I was trying to describe. Personally, I'd find that a really useful set of features but I can fully understand that it wouldn't necessarily be a priority or show-stopper feature.

As I've said before I think WeBuilder is great, and having checked out WeBuilder 2008 Beta 1 it's just getting better and better, and I use it about 99.9% of the time, over DW8.

Thanks for listening.

Gareth

[Gatis]

Thank you for your in-depth explanation. I will show this to Karlis, so he can think about it. At first I actually misunderstood what you meant.
There have been also suggestions to include references to used php blocks and similar "code items". Well, we will see.

[garethjmsaunders]

I was reading in Paul Boag's review of the Mac OS X Web editor Coda that this feature appears to be a feature of that editor. Rather than "Code Explorer" it's called "Symbols".

Symbols
Talking of jumping to a specific place in the code there is also a great tool called symbols. Not the most descriptive name but incredibly useful. Symbols is an interface element that lists all the headings, divs with ids and comments in the current HTML page. You can then click on anyone of these to jump to the specific place in the code.
(http://boagworld.com/reviews/coda/)

Here's what's said about it on the Coda Developer website:

A symbolic gesture
The first thing I recommend doing is turning on the symbols pane. This is done by clicking the icon at the bottom of the file browser that looks like a pair of curly brackets.

This will show you all the "symbols" in the current editor document, as determined by the current syntax mode, and allow you to jump to any of them by simply clicking.

Symbols include things like H1-H6 headers in HTML mode, function and class declarations in PHP mode, CSS elements, and more.

(http://www.panic.com/coda/developer/learning/editor.php)

I just thought you'd be interested. So far it's the only editor that I've seen that features this functionality.

Blessings,

Gareth