Currently, code in the "Preview" for "HTML customizations" can impact the "/cgi-bin/koha/tools/additional-contents.pl?category=html_customizations" page which is... not good. One suggestion is to use Shadow DOM to encapsulate the previews. I've used this elsewhere in Koha for maximum goodness. We could also try iframes. One way or another, something needs to be done...
Created attachment 170519 [details] [review] Bug 37697: use shadow DOM for additional contents preview This change uses the declarative HTML style of Shadow DOM to encapsulate the additional contents preview so that they don't affect the main Koha page. Test plan: 0. Create opacheader with following content: <style>* { background-color: red }</style> <p>This is awesome</p> 1. Note that most background-color in /cgi-bin/koha/tools/additional-contents.pl is now red 2. Click "Preview content" for "opacheader" 3. Note that the background-color of the "p" in "opacheader" is red 4. Apply the patch 5. Refresh the page at /cgi-bin/koha/tools/additional-contents.pl 6. Note that the background-color is normal again 7. Click "Preview content for "opacheader" 8. Note that the background-color of the "p" in "opacheader" is red
If we really wanted to take this further, we could actually create OPAC and Staff Interface Template::Toolkit WRAPPER includes which more closely simulate an exact preview. NOTE: Shadow DOM cannot include "html" or "body" elements, so any CSS/Javascript that relies on "body" elements won't work as expected.
Custom font-faces also don't work brilliantly with shadow DOM, but I know how to get around that, if you really care about that...
Martin pointed me at koha-tmpl/intranet-tmpl/prog/en/modules/members/notices.tt#L69 and that's an angle I was thinking about as well. Haven't had a chance to try out srcdoc yet...
Created attachment 170738 [details] [review] Bug 37697: use shadow DOM for additional contents preview This change uses the declarative HTML style of Shadow DOM to encapsulate the additional contents preview so that they don't affect the main Koha page. Test plan: 0. Create opacheader with following content: <style>* { background-color: red }</style> <p>This is awesome</p> 1. Note that most background-color in /cgi-bin/koha/tools/additional-contents.pl is now red 2. Click "Preview content" for "opacheader" 3. Note that the background-color of the "p" in "opacheader" is red 4. Apply the patch 5. Refresh the page at /cgi-bin/koha/tools/additional-contents.pl 6. Note that the background-color is normal again 7. Click "Preview content for "opacheader" 8. Note that the background-color of the "p" in "opacheader" is red Signed-off-by: David Nind <david@davidnind.com>
I used something like this to test: <style> body, h1 { background: red!important } </style> <h1>TEST</h1> <script> console.log('HELLO WORLD!'); </script> -It stops the CSS from rendering on additional-contents.tt! -I still get a HELLO WORLD in the console. Probably a separate bug? -HTML validator gives me this: Error: Attribute shadowrootmode not allowed on element template at this point. But I don't think that is a blocker, browsers seem to support this now: https://caniuse.com/?search=shadowrootmode This is a nice improvement as the additional-contents.tt page can look quite insane when it renders that CSS!
Created attachment 170780 [details] [review] Bug 37697: use shadow DOM for additional contents preview This change uses the declarative HTML style of Shadow DOM to encapsulate the additional contents preview so that they don't affect the main Koha page. Test plan: 0. Create opacheader with following content: <style>* { background-color: red }</style> <p>This is awesome</p> 1. Note that most background-color in /cgi-bin/koha/tools/additional-contents.pl is now red 2. Click "Preview content" for "opacheader" 3. Note that the background-color of the "p" in "opacheader" is red 4. Apply the patch 5. Refresh the page at /cgi-bin/koha/tools/additional-contents.pl 6. Note that the background-color is normal again 7. Click "Preview content for "opacheader" 8. Note that the background-color of the "p" in "opacheader" is red Signed-off-by: David Nind <david@davidnind.com> Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
(In reply to Lucas Gass from comment #6) > -It stops the CSS from rendering on additional-contents.tt! > -I still get a HELLO WORLD in the console. Probably a separate bug? Javascript isn't encapsulated quite to the same degree as CSS. The Javascript still has access to globals like "console", events (like mouse clicks) still bubble up, and I think there are some other ways Javascript can still interact/conflict. An iframe-based solution would be better than this one, although I think using shadow DOM here is certainly an improvement in any case. Perhaps a stepping stone to a more complicated iframe-based solution.
Pushed for 24.11! Well done everyone, thank you!