[Bug 37697] New: CSS from HTML customizations previews bleeds through to rest of page
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Bug ID: 37697 Summary: CSS from HTML customizations previews bleeds through to rest of page Change sponsored?: --- Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Architecture, internals, and plumbing Assignee: koha-bugs@lists.koha-community.org Reporter: dcook@prosentient.com.au QA Contact: testopia@bugs.koha-community.org 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... -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |gmcharlt@gmail.com Component|Architecture, internals, |Staff interface |and plumbing | -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- Severity|enhancement |normal -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |dcook@prosentient.com.au |ity.org | -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #1 from David Cook <dcook@prosentient.com.au> --- Created attachment 170519 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170519&action=edit 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 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #2 from David Cook <dcook@prosentient.com.au> --- 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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #3 from David Cook <dcook@prosentient.com.au> --- 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... -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #4 from David Cook <dcook@prosentient.com.au> --- 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... -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 David Nind <david@davidnind.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170519|0 |1 is obsolete| | --- Comment #5 from David Nind <david@davidnind.com> --- Created attachment 170738 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170738&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #6 from Lucas Gass <lucas@bywatersolutions.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! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #170738|0 |1 is obsolete| | --- Comment #7 from Lucas Gass <lucas@bywatersolutions.com> --- Created attachment 170780 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=170780&action=edit 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> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Lucas Gass <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |lucas@bywatersolutions.com |y.org | Patch complexity|--- |Trivial patch -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #8 from David Cook <dcook@prosentient.com.au> --- (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. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Katrin Fischer <katrin.fischer@bsz-bw.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to main Version(s)| |24.11.00 released in| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #9 from Katrin Fischer <katrin.fischer@bsz-bw.de> --- Pushed for 24.11! Well done everyone, thank you! -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Pushed to main |RESOLVED Resolution|--- |FIXED -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=37697 --- Comment #10 from David Cook <dcook@prosentient.com.au> --- I just backported this one to an older version, because the preview had managed to actually break the display of the DataTable. -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org