use once in addEventListener, available since Chrome 55

content/install-hook-userstyles.js

@@ -320,15 +320,9 @@
 
 
   function onDOMready() {
-    if (document.readyState !== 'loading') {
-      return Promise.resolve();
-    }
-    return new Promise(resolve => {
-      document.addEventListener('DOMContentLoaded', function _() {
-        document.removeEventListener('DOMContentLoaded', _);
-        resolve();
-      });
-    });
+    return document.readyState !== 'loading'
+      ? Promise.resolve()
+      : new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve, {once: true}));
   }
 
 
@@ -394,13 +388,12 @@ document.documentElement.appendChild(document.createElement('script')).text = '(
     // USO bug workaround: use the actual style settings in API response
     let settings;
     const originalResponseJson = Response.prototype.json;
-    document.addEventListener('stylusFixBuggyUSOsettings', function _({detail}) {
-      document.removeEventListener('stylusFixBuggyUSOsettings', _);
+    document.addEventListener('stylusFixBuggyUSOsettings', ({detail}) => {
       settings = /\?/.test(detail) && new URL(detail).searchParams;
       if (!settings) {
         Response.prototype.json = originalResponseJson;
       }
-    });
+    }, {once: true});
     Response.prototype.json = function (...args) {
       return originalResponseJson.call(this, ...args).then(json => {
         if (!settings || typeof ((json || {}).style_settings || {}).every !== 'function') {
@@ -467,8 +460,7 @@ document.documentElement.appendChild(document.createElement('script')).text = '(
 
 // TODO: remove the following statement when USO pagination is fixed
 if (location.search.includes('category=')) {
-  document.addEventListener('DOMContentLoaded', function _() {
-    document.removeEventListener('DOMContentLoaded', _);
+  document.addEventListener('DOMContentLoaded', () => {
     new MutationObserver((_, observer) => {
       if (!document.getElementById('pagination')) {
         return;
@@ -480,7 +472,7 @@ if (location.search.includes('category=')) {
         links[i].href += category;
       }
     }).observe(document, {childList: true, subtree: true});
-  });
+  }, {once: true});
 }
 
 if (/^https?:\/\/userstyles\.org\/styles\/\d{3,}/.test(location.href)) {

edit/edit.js

@@ -478,13 +478,12 @@ function showCodeMirrorPopup(title, html, options) {
   };
   window.addEventListener('keydown', onKeyDown, true);
 
-  window.addEventListener('closeHelp', function _() {
-    window.removeEventListener('closeHelp', _);
+  window.addEventListener('closeHelp', () => {
     window.removeEventListener('keydown', onKeyDown, true);
     document.documentElement.style.removeProperty('pointer-events');
     rerouteHotkeys(true);
     cm = popup.codebox = null;
-  });
+  }, {once: true});
 
   return popup;
 }

edit/linter-config-dialog.js

@@ -53,11 +53,10 @@
     cm.on('changes', updateButtonState);
 
     rerouteHotkeys(false);
-    window.addEventListener('closeHelp', function _() {
-      window.removeEventListener('closeHelp', _);
+    window.addEventListener('closeHelp', () => {
       rerouteHotkeys(true);
       cm = null;
-    });
+    }, {once: true});
 
     loadScript([
       '/vendor/codemirror/mode/javascript/javascript.js',

js/dom.js

@@ -112,15 +112,9 @@ document.addEventListener('wheel', event => {
 });
 
 function onDOMready() {
-  if (document.readyState !== 'loading') {
-    return Promise.resolve();
-  }
-  return new Promise(resolve => {
-    document.addEventListener('DOMContentLoaded', function _() {
-      document.removeEventListener('DOMContentLoaded', _);
-      resolve();
-    });
-  });
+  return document.readyState !== 'loading'
+    ? Promise.resolve()
+    : new Promise(resolve => document.addEventListener('DOMContentLoaded', resolve, {once: true}));
 }
 
 
@@ -144,8 +138,7 @@ function animateElement(
     onComplete,
   } = {}) {
   return element && new Promise(resolve => {
-    element.addEventListener('animationend', function _() {
-      element.removeEventListener('animationend', _);
+    element.addEventListener('animationend', () => {
       element.classList.remove(
         className,
         // In Firefox, `resolve()` might be called one frame later.
@@ -157,7 +150,7 @@ function animateElement(
         onComplete.call(element);
       }
       resolve();
-    });
+    }, {once: true});
     element.classList.add(className);
   });
 }

js/script-loader.js

@@ -82,7 +82,7 @@ const loadScript = (() => {
     for (const {addedNodes} of mutations) {
       for (const n of addedNodes) {
         if (n.src && getSubscribersForSrc(n.src)) {
-          n.addEventListener('load', notifySubscribers);
+          n.addEventListener('load', notifySubscribers, {once: true});
         }
       }
     }
@@ -97,7 +97,6 @@ const loadScript = (() => {
   }
 
   function notifySubscribers(event) {
-    this.removeEventListener('load', notifySubscribers);
     for (let data; (data = getSubscribersForSrc(this.src));) {
       data.listeners.forEach(fn => fn(event));
       if (emptyAfterCleanup(data.suffix)) {

popup/hotkeys.js

@@ -9,14 +9,13 @@ const hotkeys = (() => {
   let enabled = false;
   let ready = false;
 
-  window.addEventListener('showStyles:done', function _() {
-    window.removeEventListener('showStyles:done', _);
+  window.addEventListener('showStyles:done', () => {
     togglablesShown = true;
     togglables = getTogglables();
     ready = true;
     setState(true);
     initHotkeyInfo();
-  });
+  }, {once: true});
 
   window.addEventListener('resize', adjustInfoPosition);