From cccf44496a056d15d5d86d9fbd74633f21e852bb Mon Sep 17 00:00:00 2001 From: Bobby <30593201+luciferreeves@users.noreply.github.com> Date: Fri, 26 Dec 2025 11:09:08 +0530 Subject: style: Remove excessive comments and refine default shadow DOM wrapper styles. --- static/js/mail.js | 5 ----- static/js/shadow.js | 18 +----------------- 2 files changed, 1 insertion(+), 22 deletions(-) (limited to 'static') diff --git a/static/js/mail.js b/static/js/mail.js index 1622b37..fd02120 100644 --- a/static/js/mail.js +++ b/static/js/mail.js @@ -258,15 +258,10 @@ document.addEventListener('DOMContentLoaded', function () { function createBody(email) { const body = document.createElement('div'); body.className = 'email-body'; - - // Respect DisplayHTML preference const displayHTML = prefs.DisplayHTML; if (displayHTML && email.Body) { - // Use ShadowRenderer library to encapsulate styles const shadow = ShadowRenderer.render(body, email.Body); - - // Handle remote content based on LoadRemoteContent preference handleRemoteContent(shadow); } else { const pre = document.createElement('pre'); diff --git a/static/js/shadow.js b/static/js/shadow.js index 8439639..03d23cf 100644 --- a/static/js/shadow.js +++ b/static/js/shadow.js @@ -1,28 +1,21 @@ -/* ShadowRenderer.js - A tiny library to render safely encapsulated HTML */ const ShadowRenderer = { render: function (hostElement, htmlContent, options = {}) { - // 1. Attach Shadow Root (if not exists) let shadow = hostElement.shadowRoot; if (!shadow) { shadow = hostElement.attachShadow({ mode: 'open' }); } - // 2. Parse HTML const parser = new DOMParser(); const doc = parser.parseFromString(htmlContent, 'text/html'); - // 3. Rewrite Styles (Body -> Wrapper) const styles = doc.querySelectorAll('style'); styles.forEach(style => { - // Replace 'body' selector with '.mail-body-content' style.textContent = style.textContent.replace(/(^|[\}\s,;])body(?=[\s,\.\{])/gi, '$1.mail-body-content'); }); - // 4. Create Wrapper const wrapper = document.createElement('div'); wrapper.className = 'mail-body-content'; - // Copy attributes & move children if (doc.body) { Array.from(doc.body.attributes).forEach(attr => { if (attr.name === 'class') { @@ -31,28 +24,19 @@ const ShadowRenderer = { wrapper.setAttribute(attr.name, attr.value); } }); - // Handle legacy bgcolor if present if (doc.body.bgColor) wrapper.style.backgroundColor = doc.body.bgColor; while (doc.body.firstChild) wrapper.appendChild(doc.body.firstChild); } + shadow.innerHTML = ''; - // 5. Build Shadow Content - shadow.innerHTML = ''; // Clear previous - - // Append Head Content (Styles) if (doc.head) { while (doc.head.firstChild) shadow.appendChild(doc.head.firstChild); } - - // Append Body Wrapper shadow.appendChild(wrapper); - - // 6. Apply Default Styles const defaultStyle = document.createElement('style'); defaultStyle.textContent = ` :host { display: block; overflow: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } - .mail-body-content { margin: 0; padding: 16px; min-height: 100%; } img { max-width: 100%; height: auto; } a { color: #1a73e8; } `; -- cgit v1.2.3