From 6632d1497c9fc644c696e9a1239cd62baa5dc29e Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Fri, 15 Dec 2023 07:26:36 +0800
Subject: [PATCH] Polyfill SubmitEvent for PaleMoon (#28441)
---
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/modules/tippy.js | 2 +-
web_src/js/utils/dom.js | 21 +++++++++++++++++++++
web_src/js/webcomponents/webcomponents.js | 2 +-
6 files changed, 31 insertions(+), 7 deletions(-)
diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js
index c2e0111849..0b00eb8e8e 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, 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,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 = submitEventSubmitter(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();
+ 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 3a28cf900c..317c11219b 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, 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 = e.originalEvent.submitter;
+ 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 e74db04d08..eeb80e91b2 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 {submitEventSubmitter} 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 = 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/modules/tippy.js b/web_src/js/modules/tippy.js
index d27908962f..7f8423e319 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 403933883a..64a6a5affc 100644
--- a/web_src/js/utils/dom.js
+++ b/web_src/js/utils/dom.js
@@ -194,3 +194,24 @@ export function loadElem(el, src) {
el.src = src;
});
}
+
+// 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.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 b17a4a832f..916a588db6 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';