Persist debugbar content after turbo page load

[nithinbekal]

Fixes #9 based on this suggestion by @hss-mateus.

Problem

When turbo-rails gem and Turbo 8 is added to a Rails app, the debugbar doesn't always appear after navigating to a page.

Why this is happening

Turbo fetches the page in the background as soon as we hover over a link, so that it can replace the page quickly on click, and make the interaction seem faster. However, debugbar broadcasts the debug information as soon as the request is processed.

If the click and the page replacement after before the debug information is broadcast, debugbar would have already replaced the content of <div id="__debugbar"> with the new metrics, which will then be replaced by the empty div from the preloaded response.

Proposed solution

I added the data-turbo-permanent attribute (docs) to the __debugbar div, which tells Turbo to keep the contents of the div when replacing the DOM.

[julienbourdeau]

Thank you for the PR! I'll try it asap. I have played with data-turbo-permanent but haven't managed to make it work.

[julienbourdeau]

So data-turbo-permanent definitely help but I still get an error in the console, I think it's because the js file is being reloaded after each refresh.

I'll merge as-is and refactor after.

Quick note, I'd recommend changing the minimum code when contributing. The html was split so I can easily comment a section when testing/developing. 🙏

[nithinbekal]

I'd recommend changing the minimum code when contributing.

Ah, sorry about that! I'd originally added a wrapper with data-turbo-permanent, and consolidated them so we don't miss the closing div. Should have reverted that when I added that to the __debugbar div instead.

Now that I think about it, adding the wrapper div like this might have solved the JS reload problem:

    <div id="__debugbar-wrapper" data-turbo-permanent></div>
      <div id="__debugbar"></div>
      <script type="text/javascript">
        window._debugbarConfigOptions = #{opt.to_json}
      </script>
      <script defer src="#{Debugbar.config.prefix}/assets/script"></script>
    </div>

But I see that you've split up the head and body to separate helpers, so that should work much better. Thanks for accepting the patch! 🎉