Add class attributes to html for css styling

[ypujante]

I used to maintain the kiwidoc website (which was rendering javadoc) and is now an open source project. One thing that was useful was the ability to quickly glance and see (via little icons) what was what. See the attached screenshot.

In the side-nav/nav-tree section, it would be very helpful if each entry had classes that could be added so that they can be styled with css differently.

For example in my current documentation I see this:

<a class="classpongasoft_1_1_v_s_t_1_1_audio_buffers.html:a56c1fd026e951496b1377d7d1da1116c" href="classpongasoft_1_1_v_s_t_1_1_audio_buffers.html#a56c1fd026e951496b1377d7d1da1116c">fBuffer</a>

which is a private field vs

<a class="classpongasoft_1_1_v_s_t_1_1_audio_buffers.html:a1412c438c54f7d12a2bf8009753327f5" href="javascript:void(0)">getLeftChannel</a>

which is a public method

It would be great of there was class attributes for everything describing what it is:

Example:

<a class="classpongasoft_1_1_v_s_t_1_1_audio_buffers.html:a1412c438c54f7d12a2bf8009753327f5 dox_method dox_public dox_inline" href="javascript:void(0)">getLeftChannel</a>

Example of classes: dox_namespace, dox_inline, dox_static, dox_virtual, dox_override, dox_class, dox_struct... etc... you get the idea...

Yan

[albert-github]

So when I understand it correctly you would like to have one or more small icons in the generated treeview on the left of the HTML page, with icons like they are shown in e.g. the class list page and / or based on the protection / visibility ... of variables / functions ... .

[ypujante]

The end result yes, but I am not asking that doxygen generates/include those icons. What I am asking is for doxygen to add css classes to every element (since doxygen knows already all the information about each element, I don't think it should be a big deal to add those classes) then anybody can style them the way they want or not style them at all (which is what it is right now). It is just a matter of providing the right css. If you want to provide a "default" optional styling then it is certainly possible but I don't think it is required (although having a consistent look across all documentation would certainly be a plus).

[albert-github]

Just doing some small investigations (mainly to get a feeling for the possibilities) The possibility to solve the problem, as I see it at the moment, would be to use the :before selector, but a major problem I see is the fact that a member can have multiple classes and it is not possible to have multiple entries for the :before selectors. (see:

• https://stackoverflow.com/questions/14111751/what-happens-if-multiple-classes-of-the-same-element-define-a-before-pseudo-ele
• https://stackoverflow.com/questions/11998593/can-i-have-multiple-before-pseudo-elements-for-the-same-element

) I.e. when one has e.g:

class="classA.html dox_inherited dox_class"

it is not sufficient to have in the CSS:

#nav-tree a.dox_inherited::before {
  color: red;
  content: "I ";
}

#nav-tree a.dox_class::before {
  color: blue;
  content: "C ";
}

but one needs also:

#nav-tree a.dox_class.dox_inherited::before {
  color: red;
  content: "I C ";
}

(#nav-tree a.dox_inherited.dox_class is fortunately not necessary).

How would you solve this problem / how did you solve it in kiwidoc?

[ypujante]

I needed to refresh my memory and this is the css stylesheet that I was using this css for icons and this one for methods

for html like this

<li class="method A-icon api-p"><div class="T-icon MP"><div class="I-icon T-icon MI"><a href="/java/l/x/java/j2se/1.7/p/java.lang/c/Boolean#equals%28Ljava%2Flang%2FObject%3B%29" title="public boolean equals(Object obj)">equals(Object):boolean</a></div></div></li>

So I guess it is true that I was not using purely css with multiple classes but I was using multiple div statements (It has been a long time since I wrote that code).

I suppose, using javascript you could generate extra div statements based on class.

I think the tree view is right now hard to navigate because there is no way to know by looking at it whether an entry in the tree is a namespace, a class, a method, a field... It would already be very useful if you could add at least a css class with the "type" of the entry which could then be rendered with an icon thus making it very easy to quickly glance at the tree and see what is what.

PS: I can give you access to a private instance of a fully running kiwidoc if you want to take a look (contact me at yan at pongasoft dot com).

[albert-github]

I've done some tests and in principle it is possible to add some extra tags during the processing of the navigation tree (navtree.js) by means of a number of <span> tags withe each time one, relevant, class attribute. Some observations:

• when one wants to insert a text in front of the function name one has to use the :before construct (in right to left languages maybe :after (but the later can also be done in the navtree.css).
• when one doen't want to insert a text but a picture a "normal" entry is sufficient.

A problem that I have is the width of the field in front of the function name, with a different number of extra tags, as one want to align the function names and only the extra tags are written.

How did you solve this problem as in the second screenshot of your question all functions are nicely aligned although e.g. the first and second Constructor have a different number of extra items in front of their name.

[ypujante]

I am attaching the entire html/css for generating this single page. You should be able to view it all by opening kiwidoc/kiwidoc_String.html (after unzipping)

kiwidoc.zip

The relevant section starts at line 3516 (look for sidebar-methods).

If my memory is good there was 3 entries (for methods at least), <li> which has a class whether the method is part of the public api (api-p) or not (api-x) for the little lock icon. Then the first <div> has a class for the type (MP for a public method), then a 2nd <div> for the inheritance arrow (like for method charAt).

The api-p vs api-x concept does not really apply with doxygen: in kiwidoc, you can dynamically select if you want to see what is part of the public api only (what the javadoc provides, vs what the actual code implement) For example if you look at the actual javadoc for String, then the method hash32 does not exist yet when you parse the actual String.java code there is such a method.

The definition of the icons is implemented here

The first letter, M stands for method, the second letter stands for its visibility (for java): P is public, X is private, O is protected and D is package

The alignment is due to the fact that no matter what there was always 3 html tags.

Yan

[ypujante]

As a follow up I also wanted to add a screenshot of how CLion represents the data (icons) which is what I had in mind for the doxygen navigation tree...

[h-2]

Bumping this, as I would really like to see it, as well!

I currently have a hacky solution that adds icons for folders (groups), structs/classes and namespaces; but I have no way to differentiate members, free functions or variables :(

[h-2]

a major problem I see is the fact that a member can have multiple classes and it is not possible to have multiple entries for the :before selectors.

A single class attribute would be absolutely sufficient for me. I would like to differentiate

• [x] namespace
• [x] class / struct ( / enum) [only namespace scope currently works]
• [ ] function
• [ ] variable / constant

A bonus would be C++ concepts and having a different attribute for enums. I don't need any other information in the tree (parameter types or return types).

I've done some tests and in principle it is possible to add some extra tags during the processing of the navigation tree (navtree.js) by means of a number of tags withe each time one, relevant, class attribute.

Do you still have the code floating around that you implemented back then? I could have a look at the alignment problem.