Debug mode causes partials in head to be wrapped in spans, which browser forces into body #49
Description
Given application.html.erb like this:
<!DOCTYPE html>
<html>
<head>
<title><%= content_for(:title) || "Reactionview Examples" %></title>
<%= render partial: "/layouts/head" %>
<%= javascript_importmap_tags %>
</head>
<body>
<%= content_tag(:main) do %>
<%= yield %>
<% end %>
</body>
</html>And /layouts/_head.html.erb:
<%= tag(:meta, id: "bug-marker") %>
...then the HTML on the wire (as shown in Chrome dev-tools' Network tab) is:
<!DOCTYPE html>
<html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb" data-herb-debug-file-relative-path="app/views/layouts/application.html.erb" data-herb-debug-file-full-path="/Users/chrishowlett/mine/reactionview-examples/app/views/layouts/application.html.erb">
<head>
<title>Reactionview Examples</title>
<span data-herb-debug-outline-type="erb-output partial" data-herb-debug-erb="<%= tag(:meta) %>" data-herb-debug-file-name="_head.html.erb" data-herb-debug-file-relative-path="app/views/layouts/_head.html.erb" data-herb-debug-file-full-path="/Users/chrishowlett/mine/reactionview-examples/app/views/layouts/_head.html.erb" data-herb-debug-inserted="true" data-herb-debug-line="1" data-herb-debug-column="1" style="display: contents;">
<meta id="bug-marker"/>
</span>
<script type="importmap" data-turbo-track="reload">
{
"imports": {
"application": "/assets/application-bfcdf840.js",
"@hotwired/turbo-rails": "/assets/turbo.min-3a2e143f.js",
"@hotwired/stimulus": "/assets/stimulus.min-4b1e420e.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
"controllers/application": "/assets/controllers/application-3affb389.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-708796bd.js",
"controllers": "/assets/controllers/index-ee64e1f1.js"
}
}</script>
<link rel="modulepreload" href="/assets/application-bfcdf840.js">
<link rel="modulepreload" href="/assets/turbo.min-3a2e143f.js">
<link rel="modulepreload" href="/assets/stimulus.min-4b1e420e.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc53fe7.js">
<link rel="modulepreload" href="/assets/controllers/application-3affb389.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-708796bd.js">
<link rel="modulepreload" href="/assets/controllers/index-ee64e1f1.js">
<script type="module">
import "application"
</script>
<meta name="herb-debug-mode" content="true">
<meta name="herb-rails-root" content="/Users/chrishowlett/mine/reactionview-examples">
<script src="/assets/reactionview-dev-tools.umd-a9007fc2.js" defer="defer"></script>
</head>
<body>
<main>
</main>
</body>
</html>Notice the span in the head - that's not a legal place for a span to appear, so Chrome renders the page (as shown in the dev-tools Elements tab) as:
<html data-herb-debug-outline-type="view" data-herb-debug-file-name="application.html.erb"
data-herb-debug-file-relative-path="app/views/layouts/application.html.erb"
data-herb-debug-file-full-path="/Users/chrishowlett/mine/reactionview-examples/app/views/layouts/application.html.erb"
style="outline: none; outline-offset: 0px;">
<head>
<style type="text/css">
/* TurboLink progress */
</style>
<title>Reactionview Examples</title>
<style type="text/css">
/* Herb overlay */
</style>
</head>
<body>
<span data-herb-debug-outline-type="erb-output partial" data-herb-debug-erb="<%= tag(:meta) %>"
data-herb-debug-file-name="_head.html.erb" data-herb-debug-file-relative-path="app/views/layouts/_head.html.erb"
data-herb-debug-file-full-path="/Users/chrishowlett/mine/reactionview-examples/app/views/layouts/_head.html.erb"
data-herb-debug-inserted="true" data-herb-debug-line="1" data-herb-debug-column="1"
style="display: contents; outline: none; outline-offset: 0px; background: transparent; color: inherit;">
<meta id="bug-marker" style="outline: none; outline-offset: 0px;">
</span>
<script type="importmap" data-turbo-track="reload"> {
"imports": {
"application": "/assets/application-bfcdf840.js",
"@hotwired/turbo-rails": "/assets/turbo.min-3a2e143f.js",
"@hotwired/stimulus": "/assets/stimulus.min-4b1e420e.js",
"@hotwired/stimulus-loading": "/assets/stimulus-loading-1fc53fe7.js",
"controllers/application": "/assets/controllers/application-3affb389.js",
"controllers/hello_controller": "/assets/controllers/hello_controller-708796bd.js",
"controllers": "/assets/controllers/index-ee64e1f1.js"
}
}
</script>
<link rel="modulepreload" href="/assets/application-bfcdf840.js">
<link rel="modulepreload" href="/assets/turbo.min-3a2e143f.js">
<link rel="modulepreload" href="/assets/stimulus.min-4b1e420e.js">
<link rel="modulepreload" href="/assets/stimulus-loading-1fc53fe7.js">
<link rel="modulepreload" href="/assets/controllers/application-3affb389.js">
<link rel="modulepreload" href="/assets/controllers/hello_controller-708796bd.js">
<link rel="modulepreload" href="/assets/controllers/index-ee64e1f1.js">
<script type="module">import "application"</script>
<meta name="herb-debug-mode" content="true">
<meta name="herb-rails-root" content="/Users/chrishowlett/mine/reactionview-examples">
<script src="/assets/reactionview-dev-tools.umd-a9007fc2.js" defer="defer"></script>
<main></main>
<!-- Herb debug menu -->
</body>
</html>...Note that the #bug-marker meta tag is rendered at the top of the body, and all the subsequent script etc. tags are also moved into the body.
(This has an entertaining knock-on effect if, after the #bug-marker, the head contains <noscript><meta http-equiv="refresh" content="0;URL=/"></noscript>. In that case, following a turbo-link causes the meta refresh to fire, presumably because Turbo does some fun stuff with merging the body contents and doesn't treat the noscript or meta correctly outside the head)