InheritanceDiagram: cleanup code; avoid iframe hack; use single parameter

[Elchi3]

The inheritanceDiagram macro was written for the MDN Wiki and therefore includes a variety of hacks that are no longer needed.

It amazingly (ab)used the "live sample" system to render SVGs because in the wiki you couldn't write SVGs directly. This means it generated svg code in a pre element which was then picked up for rendering by the live sample system and showed up on MDN in an iframe. We should avoid this hack now that we're out of the wiki. This PR renders the SVG directly and so iframes on roughly 250 MDN pages can be avoided(!).

The iframe hack also made it difficult to properly size the SVG viewbox. Without the iframe, the macro call parameters to define the width, height and offset are no longer needed. I'm opening an mdn/content PR to remove macro calls that contain these parameters. We can then cleanly call this macro without a parameter or with a parameter that defines a different interfaces (as needed on the new event pages).

I've also removed the logic for RTL locales given MDN has retired these locales.

This PR also cleans up the code to use more modern JS. It could probably be enhanced further, but this is a big step forward.

A follow-up to this PR should be to get inheritance data from the webref package. This would avoid that we have to maintain our own file: https://github.com/mdn/content/blob/main/files/jsondata/InterfaceData.json

[meyerweb]

AWESOME! This is great, Florian. Loving it.

[Elchi3]

Should be merged together with mdn/content#11117, so marking as draft to avoid uncoordinated merges. Code is ready to review, though.

[schalkneethling]

Should be merged together with mdn/content#11117, so marking as draft to avoid uncoordinated merges. Code is ready to review, though.

Let me know when this is ready to be merged. Thanks, @Elchi3

[Elchi3]

Thanks @schalkneethling! Basically if we are fine with this change on the yari side, then we just need someone to merge both PRs at the same time.

[wbamberg]

This is obviously much much better than what we had! I've tried it out alongside mdn/content#11117 and looks great in all cases I could see.

I did have a few suggestions which you might want to consider but they're not blockers.

I'm also going to take a look at mdn/content#11117 - I guess you'll want to wait for that so you can merge both at the same time?

[Elchi3]

Thanks for the review, Will! I pushed an update that removes more weirdnesses that you nicely spotted!

I'm also going to take a look at mdn/content#11117 - I guess you'll want to wait for that so you can merge both at the same time?

Yes, I think merging at the same time would be great.

[wbamberg]

This looks good to me.

Approving but not merging so we can sync with mdn/content#11117.

Also, do you think we might want to display nothing if there is no parent interface? Pages like https://developer.mozilla.org/en-US/docs/Web/API/EventTarget look strange.

[Elchi3]

Thanks Will!

Also, do you think we might want to display nothing if there is no parent interface? Pages like https://developer.mozilla.org/en-US/docs/Web/API/EventTarget look strange.

I think this could be a great follow-up. I think usually page authors refrain from using the macro when there is no inheritance but we could probably force this by not displaying anything.

[wbamberg]

This sometimes slices off the start of the last box when there are two rows of boxes, like:

...this isn't really a regression as it already did that:

...but I wonder if it's easy to fix this now it isn't in an iframe?

Apart from that this looks fine.

[Elchi3]

Thanks Will!

I'm now tweaking the offset properly to react on negative x positions in the second row. (line 108 decreases this and at some point it is of course negative). The offset now takes this into account and shifts it back into the viewport.

Also, I now also added a commit to not display anything if there is no inheritance.

[wbamberg]

Thanks for the updates Florian! This looks and AFAICT works great.