From cb6282e23f9a6ca7ac4fe89887fe704b969beadd Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 12 Dec 2023 22:09:45 +0800 Subject: [PATCH 1/4] fix --- web_src/js/features/common-global.js | 6 ++++-- web_src/js/features/common-issue-list.js | 4 ++-- web_src/js/features/repo-diff.js | 3 ++- web_src/js/utils/dom.js | 17 +++++++++++++++++ 4 files changed, 25 insertions(+), 5 deletions(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index c2e0111849b08..a2d73f19c924e 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -6,7 +6,7 @@ import {initCompColorPicker} from './comp/ColorPicker.js'; import {showGlobalErrorMessage} from '../bootstrap.js'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; import {svg} from '../svg.js'; -import {hideElem, showElem, toggleElem} from '../utils/dom.js'; +import {hideElem, showElem, toggleElem, initSubmitEventSubmitterPolyfill, submitEventSubmitterGet} from '../utils/dom.js'; import {htmlEscape} from 'escape-goat'; import {showTemporaryTooltip} from '../modules/tippy.js'; import {confirmModal} from './comp/ConfirmModal.js'; @@ -121,7 +121,8 @@ async function formFetchAction(e) { const formMethod = formEl.getAttribute('method') || 'get'; const formActionUrl = formEl.getAttribute('action'); const formData = new FormData(formEl); - const [submitterName, submitterValue] = [e.submitter?.getAttribute('name'), e.submitter?.getAttribute('value')]; + const formSubmitter = submitEventSubmitterGet(e); + const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')]; if (submitterName) { formData.append(submitterName, submitterValue || ''); } @@ -192,6 +193,7 @@ export function initGlobalCommon() { $('.tabular.menu .item').tab(); + initSubmitEventSubmitterPolyfill(); document.addEventListener('submit', formFetchAction); document.addEventListener('click', linkAction); } diff --git a/web_src/js/features/common-issue-list.js b/web_src/js/features/common-issue-list.js index 3a28cf900ca5c..3847ad7eb6499 100644 --- a/web_src/js/features/common-issue-list.js +++ b/web_src/js/features/common-issue-list.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import {isElemHidden, onInputDebounce, toggleElem} from '../utils/dom.js'; +import {isElemHidden, onInputDebounce, submitEventSubmitterGet, toggleElem} from '../utils/dom.js'; import {GET} from '../modules/fetch.js'; const {appSubUrl} = window.config; @@ -40,7 +40,7 @@ export function initCommonIssueListQuickGoto() { $form.on('submit', (e) => { // if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly let doQuickGoto = !isElemHidden($goto); - const submitter = e.originalEvent.submitter; + const submitter = submitEventSubmitterGet(e.originalEvent); if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false; if (!doQuickGoto) return; diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index e74db04d08ff3..a8027aa0d8614 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -7,6 +7,7 @@ import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js'; import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js'; import {initImageDiff} from './imagediff.js'; import {showErrorToast} from '../modules/toast.js'; +import {submitEventSubmitterGet} from '../utils/dom.js'; const {csrfToken, pageData, i18n} = window.config; @@ -57,7 +58,7 @@ function initRepoDiffConversationForm() { const formData = new FormData($form[0]); // if the form is submitted by a button, append the button's name and value to the form data - const submitter = e.originalEvent?.submitter; + const submitter = submitEventSubmitterGet(e.originalEvent); const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit'); if (isSubmittedByButton && submitter.name) { formData.append(submitter.name, submitter.value); diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 403933883ad23..79bb661167136 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -194,3 +194,20 @@ export function loadElem(el, src) { el.src = src; }); } + +// some browsers like PaleMoon don't have "SubmitEvent" support, so we need to polyfill it (a tricky method): use the last clicked button as submitter +const needSubmitEventSubmitterPolyfill = typeof SubmitEvent === 'undefined'; + +export function submitEventSubmitterGet(e) { + return needSubmitEventSubmitterPolyfill ? (e.target._submitter || null) : e.submitter; +} + +export function initSubmitEventSubmitterPolyfill() { + if (!needSubmitEventSubmitterPolyfill) return; + console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`); + document.addEventListener('mousedown', (e) => { + if (!e.target.form) return; + const isSubmitButton = ((e.target.nodeName === 'INPUT' || e.target.nodeName === 'BUTTON') && e.target.type === 'submit'); + e.target.form._submitter = isSubmitButton ? e.target : null; + }); +} From a25b885fe1370b4d0fdd838d36e131844fdcc3e2 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 12 Dec 2023 23:06:13 +0800 Subject: [PATCH 2/4] rename --- web_src/js/features/common-global.js | 6 +++--- web_src/js/features/common-issue-list.js | 4 ++-- web_src/js/features/repo-diff.js | 4 ++-- web_src/js/utils/dom.js | 10 +++++----- 4 files changed, 12 insertions(+), 12 deletions(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index a2d73f19c924e..0b00eb8e8ea74 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -6,7 +6,7 @@ import {initCompColorPicker} from './comp/ColorPicker.js'; import {showGlobalErrorMessage} from '../bootstrap.js'; import {handleGlobalEnterQuickSubmit} from './comp/QuickSubmit.js'; import {svg} from '../svg.js'; -import {hideElem, showElem, toggleElem, initSubmitEventSubmitterPolyfill, submitEventSubmitterGet} from '../utils/dom.js'; +import {hideElem, showElem, toggleElem, initSubmitEventPolyfill, submitEventSubmitter} from '../utils/dom.js'; import {htmlEscape} from 'escape-goat'; import {showTemporaryTooltip} from '../modules/tippy.js'; import {confirmModal} from './comp/ConfirmModal.js'; @@ -121,7 +121,7 @@ async function formFetchAction(e) { const formMethod = formEl.getAttribute('method') || 'get'; const formActionUrl = formEl.getAttribute('action'); const formData = new FormData(formEl); - const formSubmitter = submitEventSubmitterGet(e); + const formSubmitter = submitEventSubmitter(e); const [submitterName, submitterValue] = [formSubmitter?.getAttribute('name'), formSubmitter?.getAttribute('value')]; if (submitterName) { formData.append(submitterName, submitterValue || ''); @@ -193,7 +193,7 @@ export function initGlobalCommon() { $('.tabular.menu .item').tab(); - initSubmitEventSubmitterPolyfill(); + initSubmitEventPolyfill(); document.addEventListener('submit', formFetchAction); document.addEventListener('click', linkAction); } diff --git a/web_src/js/features/common-issue-list.js b/web_src/js/features/common-issue-list.js index 3847ad7eb6499..317c11219bd27 100644 --- a/web_src/js/features/common-issue-list.js +++ b/web_src/js/features/common-issue-list.js @@ -1,5 +1,5 @@ import $ from 'jquery'; -import {isElemHidden, onInputDebounce, submitEventSubmitterGet, toggleElem} from '../utils/dom.js'; +import {isElemHidden, onInputDebounce, submitEventSubmitter, toggleElem} from '../utils/dom.js'; import {GET} from '../modules/fetch.js'; const {appSubUrl} = window.config; @@ -40,7 +40,7 @@ export function initCommonIssueListQuickGoto() { $form.on('submit', (e) => { // if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly let doQuickGoto = !isElemHidden($goto); - const submitter = submitEventSubmitterGet(e.originalEvent); + const submitter = submitEventSubmitter(e.originalEvent); if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false; if (!doQuickGoto) return; diff --git a/web_src/js/features/repo-diff.js b/web_src/js/features/repo-diff.js index a8027aa0d8614..eeb80e91b2cc5 100644 --- a/web_src/js/features/repo-diff.js +++ b/web_src/js/features/repo-diff.js @@ -7,7 +7,7 @@ import {validateTextareaNonEmpty} from './comp/ComboMarkdownEditor.js'; import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js'; import {initImageDiff} from './imagediff.js'; import {showErrorToast} from '../modules/toast.js'; -import {submitEventSubmitterGet} from '../utils/dom.js'; +import {submitEventSubmitter} from '../utils/dom.js'; const {csrfToken, pageData, i18n} = window.config; @@ -58,7 +58,7 @@ function initRepoDiffConversationForm() { const formData = new FormData($form[0]); // if the form is submitted by a button, append the button's name and value to the form data - const submitter = submitEventSubmitterGet(e.originalEvent); + const submitter = submitEventSubmitter(e.originalEvent); const isSubmittedByButton = (submitter?.nodeName === 'BUTTON') || (submitter?.nodeName === 'INPUT' && submitter.type === 'submit'); if (isSubmittedByButton && submitter.name) { formData.append(submitter.name, submitter.value); diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 79bb661167136..79265f0992507 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -196,14 +196,14 @@ export function loadElem(el, src) { } // some browsers like PaleMoon don't have "SubmitEvent" support, so we need to polyfill it (a tricky method): use the last clicked button as submitter -const needSubmitEventSubmitterPolyfill = typeof SubmitEvent === 'undefined'; +const needSubmitEventPolyfill = typeof SubmitEvent === 'undefined'; -export function submitEventSubmitterGet(e) { - return needSubmitEventSubmitterPolyfill ? (e.target._submitter || null) : e.submitter; +export function submitEventSubmitter(e) { + return needSubmitEventPolyfill ? (e.target._submitter || null) : e.submitter; } -export function initSubmitEventSubmitterPolyfill() { - if (!needSubmitEventSubmitterPolyfill) return; +export function initSubmitEventPolyfill() { + if (!needSubmitEventPolyfill) return; console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`); document.addEventListener('mousedown', (e) => { if (!e.target.form) return; From 8d761adf7d3f996d7c0db4490fdfe09ffc29d713 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 12 Dec 2023 23:16:36 +0800 Subject: [PATCH 3/4] use click event --- web_src/js/utils/dom.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 79265f0992507..5523c5dcc7e3e 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -205,7 +205,7 @@ export function submitEventSubmitter(e) { export function initSubmitEventPolyfill() { if (!needSubmitEventPolyfill) return; console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`); - document.addEventListener('mousedown', (e) => { + document.addEventListener('click', (e) => { if (!e.target.form) return; const isSubmitButton = ((e.target.nodeName === 'INPUT' || e.target.nodeName === 'BUTTON') && e.target.type === 'submit'); e.target.form._submitter = isSubmitButton ? e.target : null; From 33a44f87450bd73b82a4ee7d6105989ebed3b953 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Wed, 13 Dec 2023 11:27:18 +0800 Subject: [PATCH 4/4] improve logic, explain why it can't use other polyfill patches --- web_src/js/modules/tippy.js | 2 +- web_src/js/utils/dom.js | 16 ++++++++++------ web_src/js/webcomponents/webcomponents.js | 2 +- 3 files changed, 12 insertions(+), 8 deletions(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index d27908962f53a..7f8423e3191cf 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -106,7 +106,7 @@ function switchTitleToTooltip(target) { /** * Creating tooltip tippy instance is expensive, so we only create it when the user hovers over the element * According to https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order , mouseover event is fired before mouseenter event - * Some old browsers like Pale Moon doesn't support "mouseenter(capture)" + * Some browsers like PaleMoon don't support "addEventListener('mouseenter', capture)" * The tippy by default uses "mouseenter" event to show, so we use "mouseover" event to switch to tippy * @param e {Event} */ diff --git a/web_src/js/utils/dom.js b/web_src/js/utils/dom.js index 5523c5dcc7e3e..64a6a5affc482 100644 --- a/web_src/js/utils/dom.js +++ b/web_src/js/utils/dom.js @@ -195,19 +195,23 @@ export function loadElem(el, src) { }); } -// some browsers like PaleMoon don't have "SubmitEvent" support, so we need to polyfill it (a tricky method): use the last clicked button as submitter +// some browsers like PaleMoon don't have "SubmitEvent" support, so polyfill it by a tricky method: use the last clicked button as submitter +// it can't use other transparent polyfill patches because PaleMoon also doesn't support "addEventListener(capture)" const needSubmitEventPolyfill = typeof SubmitEvent === 'undefined'; export function submitEventSubmitter(e) { return needSubmitEventPolyfill ? (e.target._submitter || null) : e.submitter; } +function submitEventPolyfillListener(e) { + const form = e.target.closest('form'); + if (!form) return; + form._submitter = e.target.closest('button:not([type]), button[type="submit"], input[type="submit"]'); +} + export function initSubmitEventPolyfill() { if (!needSubmitEventPolyfill) return; console.warn(`This browser doesn't have "SubmitEvent" support, use a tricky method to polyfill`); - document.addEventListener('click', (e) => { - if (!e.target.form) return; - const isSubmitButton = ((e.target.nodeName === 'INPUT' || e.target.nodeName === 'BUTTON') && e.target.type === 'submit'); - e.target.form._submitter = isSubmitButton ? e.target : null; - }); + document.body.addEventListener('click', submitEventPolyfillListener); + document.body.addEventListener('focus', submitEventPolyfillListener); } diff --git a/web_src/js/webcomponents/webcomponents.js b/web_src/js/webcomponents/webcomponents.js index b17a4a832f704..916a588db64bf 100644 --- a/web_src/js/webcomponents/webcomponents.js +++ b/web_src/js/webcomponents/webcomponents.js @@ -1,4 +1,4 @@ -import '@webcomponents/custom-elements'; // polyfill for some browsers like Pale Moon +import '@webcomponents/custom-elements'; // polyfill for some browsers like PaleMoon import './polyfill.js'; import '@github/relative-time-element';