RFR: JDK-8305958: Use links instead of buttons for auto-generated header links [v3]

[Hannes Wallnöfer]

On Mon, 8 May 2023 13:50:30 GMT, Hannes Wallnöfer <hannesw at openjdk.org> wrote:

>> src/jdk.javadoc/share/classes/jdk/javadoc/internal/doclets/formats/html/resources/search.js.template line 417:
>> 
>>> 415:             hdr.append(" <a href='#" + id + "' class='anchor-link' aria-label='" + messages.linkToSection
>>> 416:                 + "'><img src='" + pathtoroot + "link.svg' alt='" + messages.linkIcon +"' tabindex='0'"
>>> 417:                 + " style='width: 0.9em; height: 0.9em; vertical-align: baseline;'></a>");
>> 
>> Should this be in a CSS class, not an inline `style` ?
>
> I used inline style to make sure the styles are always available, as the default size of the SVG image is so large that it blows up the layout of the page. My initial choice was to use the `height` and `width` attributes in the HTML `img` element, but after some research came to the conclusion that that was not the proper use of these attributes. (I'm not 100% sure this is the correct conclusion but that's another problem.)
> 
> This is how I ended up with the inline styles. It could probably be moved to the stylesheet, at the risk of blowing up the layout when the page is loaded without stylesheet for some reason (such as network problems).

I think I found a good solution for this. I moved the CSS rules from inline to the stylesheet and added `width` and `height` attributes to the `img` element as fallback / safety net. Both HTML attributes and CSS rules result in the same computed values, but the CSS rules override the HTML attributes. The `vertical-align: baseline` was not needed as that is the default value for that property.

-------------

PR Review Comment: https://git.openjdk.org/jdk/pull/13831#discussion_r1187526576