JavaScript loader in collapsed admonition + details

[userdocs]

I am using this plugin https://github.com/onixpro/mkdocs-drawio-file/ and have a problem where it refuses to load in a collapsed admonition, only in Firefox.

I really had no idea where the issue was/is so opened issues on the plugin and material theme (but it's nothing to do with material)

onixpro/mkdocs-drawio-file#3
squidfunk/mkdocs-material#4866

Then I came across this thread for mermaid

fralau/mkdocs-mermaid2-plugin#8

and, clutching at straws, I am just wondering if there is a possibility my issue is somehow related?

It's just Firefox and collapsed admonitions

site_name: My Docs

plugins:
  - drawio_file

markdown_extensions:
  - admonition
  - pymdownx.details

If you have any insight I'd appreciate it.

[facelessuser]

This has nothing to do with how admonitions or details are generated. There is no bug in either of the plugins related to the problems you are having..

It appears that the drawio plugin expects the diagrams to be specified with links, neither admonitions or details will prevent the links from getting generated in the containers. So that leaves only one possibility, the loader that the drawio plugin links to has difficulty finding and rendering the diagrams in the closed containers. This is the loader: https://github.com/onixpro/mkdocs-drawio-file/blob/main/mkdocs_drawio_file/plugin.py#L67.

Most likely this is an issue with the loader script, and that is probably upstream even from the MkDcos drawio plugin.

Just an FYI, fralau/mkdocs-mermaid2-plugin#8 is not really relevant to what you are dealing with. There were issues related to how the Mermaid diagrams were stored, in divs. They were stored as raw text wrapped in a div and HTML minimizes could mess those up (or at least the popular one for MkDocs. I personally wrap mine in a code block and have my own personal loader to handle it, but drawio is using links making this approach irrelevant.

Now, I'm not sure the exact reason the loader has trouble with details as I am not familiar with the approach they use, but I am certain if I can Mermaid working properly in details then the people maintaining the drawio loader script can probably get theirs working as well.

[userdocs]

To clarify one thing. It does work, in chrome based browsers. It only fails to load in the collapsed admonition in Firefox and there are no errors.

In Firefox it will load in a expanded admonition, but not a collapsed one, with no errors in the inspector.

This is the main reason I have no idea why it's happening or where to look for the cause.

[facelessuser]

I understand, but there is nothing non-standard about how we generate details (what you are calling collapsed admonitions).

They require us to generate:

<details class="note">
<summary>Details</summary>
<p>content</p>
</details>

This is by the books details generation.

Now, at no time have you provided me the actual HTML that has been generated by your documents, but we don't generate it differently for one browser vs the other browser, and the fact that it works in Chrome suggests that the link did actually get generated in the details, so it is one of two issues:

1. A firefox bug.
2. A problem with the loader script. The fact that it only works in Chrome doesn't mean there isn't some special firefox only awareness the script needs. Browsers can implement things very differently, and what works on one browser can not work on another due to quirks in the implementation. Maybe this quirk is also a bug though (see probability number 1).

As long as we are generating the HTML by the books, there is no issue here.

[userdocs]

I opened a discussion as I did not think the issue was here specifically but the linked search results above were about as close as I could get to a matching issue and I do need the details expansion to make it work at all. Past that I really have no idea what's going on here or why Firefox would have such a specific, singular issue.

So I appreciate all or any put you are able to provide and I'm not expecting anything from you in that sense. I just am really stumped as to what I am trying to get fixed or where to go.

As for example HTML, the issue URL I provided had them, I just did not highlight it. But they do exist.

The bug in action on a live URL

https://userdocs.github.io/Guides/Flowcharts/

And the demo zip I needed to make for material

https://github.com/squidfunk/mkdocs-material/files/10424483/example.zip

[facelessuser]

Again, here is the source, and the only thing I really care about (as far as this project is concerned). Unless there is an issue in the generated text below, and only if one of my plugins is responsible for said issue, there is nothing else I can really say.

<details class="abstract">
<summary>Which Quality Profile should you choose - [CLICK TO EXPAND]</summary>
<p><div class="mxgraph" data-mxgraph='{"highlight":"#0000ff","nav":true,"resize":true,"toolbar":"zoom layers tags lightbox","edit":"_blank","xml":"&lt;mxfile host=\"Electron\" modified=\"2023-01-13T23:43:38.082Z\" agent=\"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/20.7.4 Chrome/106.0.5249.199 Electron/21.3.3 Safari/537.36\" etag=\"ugBCjSx1HlAMFnODfHuN\" version=\"20.7.4\" type=\"device\"&gt;&lt;diagram id=\"HEqevNfVyVK-saUNPkYZ\" name=\"Page-1\"&gt;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&lt;/diagram&gt;&lt;/mxfile&gt;"}' style="max-width:100%;border:1px solid transparent;"></div></p>
<p>If you're unsure or have questions do not hesitate to ask for help on Discord</p>
<p><a href="https://trash-guides.info/discord" rel="noopener noreferrer" target="_blank"><img alt="Discord chat" class="off-glb" src="https://img.shields.io/discord/492590071455940612?style=for-the-badge&amp;color=4051B5&amp;logo=discord"/></a></p>
</details>

Sadly, I can't spend any more time on this either as it doesn't directly seem to be relevant to anything I am doing. I do not maintain any loader scripts related to drawio, I'm generating the details HTML as expected, it works fine in other browsers but not firefox indicating it is most likely a quirk with Firefox.

This falls on either the drawio MkDocs plugin as they support this feature and would have to debug any Firefox-specific quirks they need to work around, the maintainer of the drawio JS loader script if they need to provide a workaround for Firefox, or Firefox themselves if they have a quirk making it difficult for people to target things in a closed details. I don't know what else to say.

[userdocs]

Thanks for your time and input.