infrastructure/mox
1
0
Fork 0
mirror of https://github.com/mjl-/mox.git synced 2025-07-10 09:54:40 +03:00
Code Issues Packages Projects Releases Wiki Activity

webmail: fix js error rerendering additional headers after updated keywords

Browse Source 
i've seen the error a few times:

	msgheaderElem.children[(msgheaderElem.children.length - 1)] is undefined

i've seen it happen after sending a reply (with the "answered" flag added).
the updateKeywords callback would render the message again, but the code for
rendering the "additional headers" table rows again was making invalid
assumptions.

the approach is now changed. the backend now just immediately sends the
additional headers to the frontend. before, the frontend would first render the
base message, then render again once the headers came in for the parsed
message. this also prevents a reflow for the (quite common) case that one of
the additional headers are present in the message.
This commit is contained in:
Mechiel Lukkien
2025-01-13 14:53:43 +01:00
parent f7193bd4c3
commit 1e15a10b66
11 changed files with 167 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
webmail/webmail.ts
View File

@ -1113,7 +1113,8 @@ const cmdSettings = async () => {
}
const remove = popup(
css('popupSettings', {padding: '1em 1em 2em 1em', minWidth: '30em'}),
css('popupSettings', {minWidth: '30em'}),
style({maxWidth: '50em'}),
dom.h1('Settings'),
dom.form(
async function submit(e: SubmitEvent) {
@ -1179,7 +1180,7 @@ const cmdSettings = async () => {
style({width: '100%'}),
attr.rows(''+Math.max(3, 1+(accountSettings.ShowHeaders || []).length)),
),
dom.div(style({fontStyle: 'italic'}), 'One header name per line, for example Delivered-To, X-Mox-Reason, User-Agent, ...'),
dom.div(style({fontStyle: 'italic'}), 'One header name per line, for example Delivered-To, X-Mox-Reason, User-Agent, ...; Refresh mailbox view for changes to take effect.'),
),
@ -3180,8 +3181,8 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
let urlType: string // text, html, htmlexternal; for opening in new tab/print
let msgbuttonElem: HTMLElement, msgheaderElem: HTMLElement, msgattachmentElem: HTMLElement, msgmodeElem: HTMLElement
let msgheaderdetailsElem: HTMLElement | null = null // When full headers are visible, or some headers are requested through settings.
let msgbuttonElem: HTMLElement, msgheaderElem: HTMLTableSectionElement, msgattachmentElem: HTMLElement, msgmodeElem: HTMLElement
let msgheaderFullElem: HTMLTableElement // Full headers, when enabled.
const msgmetaElem = dom.div(
css('msgmeta', {backgroundColor: styles.backgroundColorMild, borderBottom: '5px solid', borderBottomColor: ['white', 'black'], maxHeight: '90%', overflowY: 'auto'}),
@ -3189,7 +3190,11 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
msgbuttonElem=dom.div(),
dom.div(
attr.arialive('assertive'),
msgheaderElem=dom.table(styleClasses.msgHeaders),
dom.table(
styleClasses.msgHeaders,
msgheaderElem=dom.tbody(),
),
msgheaderFullElem=dom.table(),
msgattachmentElem=dom.div(),
msgmodeElem=dom.div(),
),
@ -3256,28 +3261,23 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
loadMsgheaderView(msgheaderElem, miv.messageitem, accountSettings.ShowHeaders || [], refineKeyword, false)
// Similar to lib.ts:/msgHeaderFieldStyle
const headerTextMildStyle = css('headerTextMild', {textAlign: 'right', color: styles.colorMild})
const loadHeaderDetails = (pm: api.ParsedMessage) => {
if (msgheaderdetailsElem) {
msgheaderdetailsElem.remove()
msgheaderdetailsElem = null
}
if (!settings.showAllHeaders) {
return
}
msgheaderdetailsElem = dom.table(
css('msgHeaderDetails', {marginBottom: '1ex', width: '100%'}),
Object.entries(pm.Headers || {}).sort().map(t =>
(t[1] || []).map(v =>
dom.tr(
dom.td(t[0]+':', headerTextMildStyle),
dom.td(v),
const table = dom.table(
css('msgHeaderDetails', {width: '100%'}),
!settings.showAllHeaders ? [] :
Object.entries(pm.Headers || {}).sort().map(t =>
(t[1] || []).map(v =>
dom.tr(
dom.td(t[0]+':', headerTextMildStyle),
dom.td(v),
)
)
)
)
)
msgattachmentElem.parentNode!.insertBefore(msgheaderdetailsElem, msgattachmentElem)
msgheaderFullElem.replaceWith(table)
msgheaderFullElem = table
}
const isText = (a: api.Attachment) => ['text', 'message'].includes(a.Part.MediaType.toLowerCase())
@ -3512,29 +3512,6 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
renderAttachments() // Rerender opaciy on inline images.
}
const loadMoreHeaders = (pm: api.ParsedMessage) => {
const hl = accountSettings.ShowHeaders || []
if (hl.length === 0) {
return
}
for (let i = 0; i < hl.length; i++) {
msgheaderElem.children[msgheaderElem.children.length-1].remove()
}
hl.forEach(k => {
const vl = pm.Headers?.[k]
if (!vl || vl.length === 0) {
return
}
vl.forEach(v => {
const e = dom.tr(
dom.td(k+':', headerTextMildStyle, style({whiteSpace: 'nowrap'})),
dom.td(v),
)
msgheaderElem.appendChild(e)
})
})
}
const mv: MsgView = {
root: root,
messageitem: mi,
@ -3544,7 +3521,6 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
mi.Message.ModSeq = modseq
mi.Message.Keywords = keywords
loadMsgheaderView(msgheaderElem, miv.messageitem, accountSettings.ShowHeaders || [], refineKeyword, false)
loadMoreHeaders(await parsedMessagePromise)
},
}
@ -3570,7 +3546,6 @@ const newMsgView = (miv: MsgitemView, msglistView: MsglistView, listMailboxes: l
loadButtons(pm)
loadHeaderDetails(pm)
loadMoreHeaders(pm)
const msgHeaderSeparatorStyle = css('msgHeaderSeparator', {borderTop: '1px solid', borderTopColor: styles.borderColor})
const msgModeWarningStyle = css('msgModeWarning', {backgroundColor: styles.warningBackgroundColor, padding: '0 .15em'})