How to embed (and show) meta info in the HTML

[Domizio Demichelis]

A quite common use of HTML comments is embedding meta/debugging data
into the HTML: I am wondering whether there is already some kind of
support for showing that info in some nice way.

A tipical case is a web app that uses templates, and eventually embeds
HTML comments about the path of the (partial) templates that generates
the output, along with other data like benchmark time etc...

A case that I am facing now (but is not the only one) is the DRYML the
template system used by the Rails/Hobo project. DRYML is very "magic"
and may generate a lot of HTML code with very short and declarative
templates. For that reason, debugging/customizing it requires a lot of
metadata to attach to each fragment that it produces, so you know what
is doing what. The only problem is the overelming quantity of comments
in the HTML.

I would like to find the way to selectively show the meta-info for any
given html-node. I mean something triggered by a contextual menu, or a
mouseover, or anything that could just show what the developer is
interested in.

We can eventually change the way DRYML embeds its meta-info by
changing the comments for some custom tag attribute or anything else
that might simplify that task to Firebug, although a sort of meta-
commenting could be extendable to any other context (not just DRYML).

Is there any canonical/suggested way to do that? What would you
recommend? Is there any extension that could give me any hint about
how to implement it?

Thank you in advance

[John J Barton]

On Apr 14, 8:39 am, Domizio Demichelis <dd.ne...@gmail.com> wrote:
> A quite common use of HTML comments is embedding meta/debugging data
> into the HTML: I am wondering whether there is already some kind of
> support for showing that info in some nice way.
>
> A tipical case is a web app that uses templates, and eventually embeds
> HTML comments about the path of the (partial) templates that generates
> the output, along with other data like benchmark time etc...
>
> A case that I am facing now (but is not the only one) is the DRYML the
> template system used by the Rails/Hobo project. DRYML is very "magic"
> and may generate a lot of HTML code with very short and declarative
> templates. For that reason, debugging/customizing it requires a lot of
> metadata to attach to each fragment that it produces, so you know what
> is doing what. The only problem is the overelming quantity of comments
> in the HTML.

So you want to have a tool that operates with Show Comments false in
the HTML panel?

>
> I would like to find the way to selectively show the meta-info for any
> given html-node. I mean something triggered by a contextual menu, or a
> mouseover, or anything that could just show what the developer is
> interested in.

One solution is another HTML side panel, one that listens for event
onObjectBoxSelected(objectBox)
onObjectBoxUnselected(objectBox)

From the object box you can get the element and find comments around
it by some rule you create, parse the comment and display it in the
side panel.

>
> We can eventually change the way DRYML embeds its meta-info by
> changing the comments for some custom tag attribute or anything else
> that might simplify that task to Firebug, although a sort of meta-
> commenting could be extendable to any other context (not just DRYML).
>
> Is there any canonical/suggested way to do that? What would you
> recommend? Is there any extension that could give me any hint about
> how to implement it?

Any of the current side panels are synced to the selection so you can
use the same solution; I think they may use panel events instead of
the one I mentioned above.

As for the structure of the extension, they are all pretty similar,
and Honza has some great tutorial info
http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/

jjb


>
> Thank you in advance

[Domizio Demichelis]

John,

thank you for your answer and for the pointer.

So you want to have a tool that operates with Show Comments false in
the HTML panel?

Yes... if I will use the embed-in-comments way to go. Anyway, that's not a requirement, it's just the simplest way I thought about embedding, but it might not be the simplest way to fully implement it (see below). Is there any other way to go that you whould explore?
 

>
> I would like to find the way to selectively show the meta-info for any
> given html-node. I mean something triggered by a contextual menu, or a
> mouseover, or anything that could just show what the developer is
> interested in.

One solution is another HTML side panel, one that listens for event
onObjectBoxSelected(objectBox)
onObjectBoxUnselected(objectBox)

From the object box you can get the element and find comments around
it by some rule you create, parse the comment and display it in the
side panel.

That's a very clean solution, and it seems also quite straightforward to implement! Thank you.

A more advanced implementation that I might need is that the meta-info embedded into the comments might also be sort of hierarchical, so I will have to navigate through many comments in order to build a tree of meta-info extracted from the comments. Do you see any problem in that sort of implementation? Should I use some other way to embed the meta-info?
 

>
> We can eventually change the way DRYML embeds its meta-info by
> changing the comments for some custom tag attribute or anything else
> that might simplify that task to Firebug, although a sort of meta-
> commenting could be extendable to any other context (not just DRYML).
>
> Is there any canonical/suggested way to do that? What would you
> recommend? Is there any extension that could give me any hint about
> how to implement it?

Any of the current side panels are synced to the selection so you can
use the same solution; I think they may use panel events instead of
the one I mentioned above.

At this moment, the difference between "listen for event" (onObjectBoxSelected(objectBox)) that you mentioned before and "panel event" is not clear to me, anyway I suppose it will become evident when I will dive into it. :-)

As for the structure of the extension, they are all pretty similar,
and Honza has some great tutorial info
http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/

Great! Thank you!
dd

[Křištof Želechovski]

Dnia czwartek, 14 kwietnia 2011 o 17:39:04 Domizio Demichelis napisał(a):
> We can eventually change the way DRYML embeds its meta-info by
> changing the comments for some custom tag attribute or anything else
> that might simplify that task to Firebug, although a sort of meta-
> commenting could be extendable to any other context (not just DRYML).
>
> Is there any canonical/suggested way to do that? What would you
> recommend? Is there any extension that could give me any hint about
> how to implement it?
>

SCRIPT TYPE="APPLICATION/VND.ACME-HTML-TEMPLATE" RUNAT=SERVER

[Domizio Demichelis]

SCRIPT TYPE="APPLICATION/VND.ACME-HTML-TEMPLATE"  RUNAT=SERVER

Thank you for the answer, but I need some more info in order to understand what you mean.
Please, could you tell me something more?

thank you
dd

[Křištof Želechovski]

Use SCRIPT instead of COMMENT. TYPE is registered for your application’s microsyntax, or application/xml, but then you should provide a reference to the XSD. RUNAT tells the browser that this script is interpreted on server; skip this if your server strips RUNAT scripts automatically, but then you need to make sure that your TYPE is not recognized by the target browser as an executable script. Note that TYPE="TEXT/XML" will load your script into MSXML3 in Microsoft Internet Explorer which is probably not what you want because MSXML3 is badly broken.

Chris