Remove Prototype.js / Scriptaculous, replace with vanilla JS + compatibility shim

.github/spellcheck-wordlist.txt

@@ -1,6 +1,7 @@
 ACL
 ActionScript
 analytics
+APIs
 bool
 boolean
 backorders
@@ -12,18 +13,23 @@ Cloudflare
 CMS
 Cron
 CVE
+Centinel
 CodeQL
+compat
 config
 DevOps
 DDEV
 DNS
 DocBlock
+DOM
 EAV
 Emmet
+ExtJS
 FireGento
 FPC
 frontend
 Gitpod
+globals
 HiPay
 Homebrew
 HMAC
@@ -32,8 +38,10 @@ HTTPS
 ImageMagick
 IntelliSense
 jQuery
+js
 JS
 JSON
+lifecycle
 LTS
 macOS
 Magento
@@ -43,29 +51,36 @@ mkcert
 MkDocs
 Matomo
 MTF
+namespace
 nginx
 npm
 OAuth
+OOP
 OpenMage
 OpenNode
 PageSpeed
+param
 PHPCompatibility
 PHPCS
 PHPMD
 phpMyAdmin
 PHPStan
 PhpStorm
+phtml
 PHPUnit
 PLAINTEXT
 programmatically
 RCE
 reCaptcha
 Redis
+repo
 RPC
 RSS
 RWD
 runtime
 SCSS
+scriptaculous
+Scriptaculous
 SHA
 sku
 SKU
@@ -74,8 +89,14 @@ SMTP
 SSL
 TinyMCE
 toc
+UI
 URI
 un
+unminified
+uploader
+validator
+validators
+varien
 Varien
 VMware
 WAMP

.github/workflows/cypress.yml

@@ -16,7 +16,7 @@ jobs:
     steps:
       - uses: actions/checkout@v7
       - name: Setup DDEV
-        uses: ddev/github-action-setup-ddev@v1
+        uses: ddev/github-action-setup-ddev@fdf2f5c97943bae638f31df6df86f1defa6210c0 # v1.12.1
         with:
           autostart: false
 
@@ -44,3 +44,46 @@ jobs:
         with:
           name: cypress-screenshots
           path: cypress/screenshots
+
+  # Same suite, but with dev/js/prototype_mode overridden so the vanilla-JS
+  # rewrites run against the compatibility shim ("shim") and with no Prototype
+  # layer at all ("none"). The default job above covers "full".
+  test-prototype-mode:
+    name: Cypress (prototype_mode ${{ matrix.prototype_mode }})
+    runs-on: [ubuntu-latest]
+    strategy:
+      fail-fast: false
+      matrix:
+        prototype_mode: ['shim', 'none']
+
+    steps:
+      - uses: actions/checkout@v7
+      - name: Setup DDEV
+        uses: ddev/github-action-setup-ddev@fdf2f5c97943bae638f31df6df86f1defa6210c0 # v1.12.1
+        with:
+          autostart: false
+
+      # install DDEV configuration
+      - run: ddev config --project-type=magento --php-version=8.3 --webserver-type=nginx-fpm --web-environment="MAGE_IS_DEVELOPER_MODE=1,OPENMAGE_CONFIG_OVERRIDE_ALLOWED=1,OPENMAGE_CONFIG__DEFAULT__DEV__JS__PROTOTYPE_MODE=${{ matrix.prototype_mode }},OPENMAGE_CONFIG__DEFAULT__GENERAL__STORE_INFORMATION__NAME=ENV name default,OPENMAGE_CONFIG__WEBSITES__BASE__GENERAL__STORE_INFORMATION__PHONE=ENV phone website,OPENMAGE_CONFIG__STORES__GERMAN__GENERAL__STORE_INFORMATION__ADDRESS=ENV address store"
+
+      # install composer dependencies
+      - run: ddev composer install
+
+      # install openmage
+      - run: ddev openmage-install -q
+
+      # install cypress-addon
+      - run: ddev add-on get tyler36/ddev-cypress
+
+      # start ddev
+      - run: ddev start
+
+        # run cypress
+      - run: ddev cypress-run --config-file .cypress.config.js
+
+      - name: Upload screenshots
+        uses: actions/upload-artifact@v7
+        if: ${{ !success() }}
+        with:
+          name: cypress-screenshots-${{ matrix.prototype_mode }}
+          path: cypress/screenshots

app/code/core/Mage/Adminhtml/Block/Catalog/Category/Helper/Pricestep.php

@@ -23,7 +23,7 @@ public function getToggleCode()
     {
         $htmlId = 'use_config_' . $this->getHtmlId();
         return 'toggleValueElements(this, this.parentNode.parentNode);'
-            . "if (!this.checked) toggleValueElements($('{$htmlId}'), $('{$htmlId}').parentNode);";
+            . "if (!this.checked) toggleValueElements(document.getElementById('{$htmlId}'), document.getElementById('{$htmlId}').parentNode);";
     }
 
     /**
@@ -57,7 +57,7 @@ public function getElementHtml()
         $html .= ' <label for="' . $htmlId . '" class="normal">'
             . Mage::helper('adminhtml')->__('Use Config Settings') . '</label>';
 
-        return $html . ('<script type="text/javascript">toggleValueElements($(\'' . $htmlId . '\'), $(\'' . $htmlId
+        return $html . ('<script type="text/javascript">toggleValueElements(document.getElementById(\'' . $htmlId . "'), document.getElementById('" . $htmlId
             . "').parentNode);" . '</script>');
     }
 }

app/code/core/Mage/Adminhtml/Block/Catalog/Category/Helper/Sortby/Available.php

@@ -23,7 +23,7 @@ public function getToggleCode()
     {
         $htmlId = 'use_config_' . $this->getHtmlId();
         return 'toggleValueElements(this, this.parentNode.parentNode);'
-            . "if (!this.checked) toggleValueElements($('{$htmlId}'), $('{$htmlId}').parentNode);";
+            . "if (!this.checked) toggleValueElements(document.getElementById('{$htmlId}'), document.getElementById('{$htmlId}').parentNode);";
     }
 
     /**
@@ -55,7 +55,7 @@ public function getElementHtml()
         $html .= ' <label for="' . $htmlId . '" class="normal">'
             . Mage::helper('adminhtml')->__('Use All Available Attributes') . '</label>';
 
-        return $html . ('<script type="text/javascript">toggleValueElements($(\'' . $htmlId . '\'), $(\'' . $htmlId
+        return $html . ('<script type="text/javascript">toggleValueElements(document.getElementById(\'' . $htmlId . "'), document.getElementById('" . $htmlId
             . "').parentNode);</script>");
     }
 }

app/code/core/Mage/Adminhtml/Block/Catalog/Category/Helper/Sortby/Default.php

@@ -23,7 +23,7 @@ public function getToggleCode()
     {
         $htmlId = 'use_config_' . $this->getHtmlId();
         return 'toggleValueElements(this, this.parentNode.parentNode);'
-            . "if (!this.checked) toggleValueElements($('{$htmlId}'), $('{$htmlId}').parentNode);";
+            . "if (!this.checked) toggleValueElements(document.getElementById('{$htmlId}'), document.getElementById('{$htmlId}').parentNode);";
     }
 
     /**
@@ -56,7 +56,7 @@ public function getElementHtml()
         $html .= ' <label for="' . $htmlId . '" class="normal">'
             . Mage::helper('adminhtml')->__('Use Config Settings') . '</label>';
 
-        return $html . ('<script type="text/javascript">toggleValueElements($(\'' . $htmlId . '\'), $(\'' . $htmlId
+        return $html . ('<script type="text/javascript">toggleValueElements(document.getElementById(\'' . $htmlId . "'), document.getElementById('" . $htmlId
             . "').parentNode);</script>");
     }
 }

app/code/core/Mage/Adminhtml/Block/Catalog/Category/Tree.php

@@ -196,8 +196,8 @@ public function getBreadcrumbsJavascript($path, $javascriptVarName)
             '<script type="text/javascript">'
             . $javascriptVarName . ' = ' . Mage::helper('core')->jsonEncode($categories) . ';'
             . ($this->canAddSubCategory()
-                ? '$("add_subcategory_button").show();'
-                : '$("add_subcategory_button").hide();')
+                ? 'document.getElementById("add_subcategory_button").style.display = "";'
+                : 'document.getElementById("add_subcategory_button").style.display = "none";')
             . '</script>';
     }
 

app/code/core/Mage/Adminhtml/Block/Catalog/Product/Helper/Form/Config.php

@@ -37,7 +37,7 @@ public function getElementHtml()
         $html .= ' onclick="toggleValueElements(this, this.parentNode);" class="checkbox" type="checkbox" />';
         $html .= ' <label for="' . $htmlId . '">' . Mage::helper('adminhtml')->__('Use Config Settings') . '</label>';
 
-        return $html . ('<script type="text/javascript">toggleValueElements($(\'' . $htmlId . '\'), $(\'' . $htmlId . "').parentNode);</script>");
+        return $html . ('<script type="text/javascript">toggleValueElements(document.getElementById(\'' . $htmlId . "'), document.getElementById('" . $htmlId . "').parentNode);</script>");
     }
 
     /**

app/code/core/Mage/Adminhtml/Block/Catalog/Product/Widget/Chooser.php

@@ -101,7 +101,9 @@ public function getCheckboxCheckCallback()
     {
         if ($this->getUseMassaction()) {
             return "function (grid, element) {
-                $(grid.containerId).fire('product:changed', {element: element});
+                var ev = new CustomEvent('product:changed', {bubbles: true, cancelable: true});
+                ev.memo = {element: element};
+                document.getElementById(grid.containerId).dispatchEvent(ev);
             }";
         }
 
@@ -119,9 +121,10 @@ public function getRowClickCallback()
             $chooserJsObject = $this->getId();
             return '
                 function (grid, event) {
-                    var trElement = Event.findElement(event, "tr");
-                    var productId = trElement.down("td").innerHTML;
-                    var productName = trElement.down("td").next().next().innerHTML;
+                    var trElement = event.target.closest("tr");
+                    var cells = trElement.querySelectorAll("td");
+                    var productId = cells[0].innerHTML;
+                    var productName = cells[2].innerHTML;
                     var optionLabel = productName;
                     var optionValue = "product/" + productId.replace(/^\s+|\s+$/g,"");
                     if (grid.categoryId) {

app/code/core/Mage/Adminhtml/Block/Cms/Block/Edit.php

@@ -48,7 +48,7 @@ function toggleEditor() {
             }
 
             function saveAndContinueEdit(){
-                editForm.submit($('edit_form').action+'back/edit/');
+                editForm.submit(document.getElementById('edit_form').action+'back/edit/');
             }
         ";
 

app/code/core/Mage/Adminhtml/Block/Cms/Block/Widget/Chooser.php

@@ -73,9 +73,10 @@ public function getRowClickCallback()
         $chooserJsObject = $this->getId();
         return '
             function (grid, event) {
-                var trElement = Event.findElement(event, "tr");
-                var blockId = trElement.down("td").innerHTML.replace(/^\s+|\s+$/g,"");
-                var blockTitle = trElement.down("td").next().innerHTML;
+                var trElement = event.target.closest("tr");
+                var cells = trElement.querySelectorAll("td");
+                var blockId = cells[0].innerHTML.replace(/^\s+|\s+$/g,"");
+                var blockTitle = cells[1].innerHTML;
                 ' . $chooserJsObject . '.setElementValue(blockId);
                 ' . $chooserJsObject . '.setElementLabel(blockTitle);
                 ' . $chooserJsObject . '.close();

app/code/core/Mage/Adminhtml/Block/Cms/Page/Edit.php

@@ -107,8 +107,9 @@ function saveAndContinueEdit(urlTemplate) {
                 if (tabsIdValue.startsWith(tabsBlockPrefix)) {
                     tabsIdValue = tabsIdValue.substr(tabsBlockPrefix.length)
                 }
-                var template = new Template(urlTemplate, /(^|.|\\r|\\n)({{(\w+)}})/);
-                var url = template.evaluate({tab_id:tabsIdValue});
+                var url = urlTemplate.replace(/{{(\\w+)}}/g, function(match, key) {
+                    return key === 'tab_id' ? tabsIdValue : match;
+                });
                 editForm.submit(url);
             }
         ";

app/code/core/Mage/Adminhtml/Block/Cms/Page/Widget/Chooser.php

@@ -64,9 +64,10 @@ public function getRowClickCallback()
         $chooserJsObject = $this->getId();
         return '
             function (grid, event) {
-                var trElement = Event.findElement(event, "tr");
-                var pageTitle = trElement.down("td").next().innerHTML;
-                var pageId = trElement.down("td").innerHTML.replace(/^\s+|\s+$/g,"");
+                var trElement = event.target.closest("tr");
+                var cells = trElement.querySelectorAll("td");
+                var pageTitle = cells[1].innerHTML;
+                var pageId = cells[0].innerHTML.replace(/^\s+|\s+$/g,"");
                 ' . $chooserJsObject . '.setElementValue(pageId);
                 ' . $chooserJsObject . '.setElementLabel(pageTitle);
                 ' . $chooserJsObject . '.close();

app/code/core/Mage/Adminhtml/Block/Customer/Edit/Renderer/Adminpass.php

@@ -39,38 +39,54 @@ protected function _getScriptHtml(Varien_Data_Form_Element_Abstract $element)
         return <<<SCRIPT
 <script type="text/javascript">
 //<![CDATA[
-    $$('#_accountnew_password,#account-send-pass').each(function(elem) {
-        $(elem).on('change', function() {
-            if ($('_accountnew_password').getValue() || $('account-send-pass').checked) {
-                $('{$element->getHtmlId()}_container').show();
-                $('{$element->getHtmlId()}').enable();
-            } else {
-                $('{$element->getHtmlId()}_container').hide();
-                $('{$element->getHtmlId()}').disable();
-            }
-            if ($('email-passowrd-warning')) {
-                if (!$('_accountnew_password').getValue() || $('account-send-pass').checked) {
-                    $('email-passowrd-warning').hide();
-                } else if ($('_accountnew_password').getValue()) {
-                    $('email-passowrd-warning').show();
-                }
-            }
-        });
-        $(elem).on('focus', function() {
-            $('{$element->getHtmlId()}_container').show();
-            $('{$element->getHtmlId()}').enable();
-        });
-        $(elem).on('blur', function() {
-            if (!$('_accountnew_password').getValue() && !$('account-send-pass').checked) {
-                $('{$element->getHtmlId()}_container').hide();
-                $('{$element->getHtmlId()}').disable();
-            }
-        });
-        document.observe("dom:loaded", function() {
-            $('{$element->getHtmlId()}_container').hide();
-            $('{$element->getHtmlId()}').disable();
-        });
+(function() {
+    var newPassEl  = document.getElementById('_accountnew_password');
+    var sendPassEl = document.getElementById('account-send-pass');
+
+    function getContainer() { return document.getElementById('{$element->getHtmlId()}_container'); }
+    function getInput()     { return document.getElementById('{$element->getHtmlId()}'); }
+
+    function showAdminPass() {
+        var c = getContainer(), i = getInput();
+        if (c) { c.style.display = ''; }
+        if (i) { i.disabled = false; }
+    }
+
+    function hideAdminPass() {
+        var c = getContainer(), i = getInput();
+        if (c) { c.style.display = 'none'; }
+        if (i) { i.disabled = true; }
+    }
+
+    function onChange() {
+        var hasNewPass = newPassEl && newPassEl.value;
+        var sendPass   = sendPassEl && sendPassEl.checked;
+        if (hasNewPass || sendPass) {
+            showAdminPass();
+        } else {
+            hideAdminPass();
+        }
+        var warning = document.getElementById('email-passowrd-warning');
+        if (warning) {
+            warning.style.display = (!hasNewPass || sendPass) ? 'none' : '';
+        }
+    }
+
+    function onBlur() {
+        if ((!newPassEl || !newPassEl.value) && (!sendPassEl || !sendPassEl.checked)) {
+            hideAdminPass();
+        }
+    }
+
+    [newPassEl, sendPassEl].forEach(function(elem) {
+        if (!elem) { return; }
+        elem.addEventListener('change', onChange);
+        elem.addEventListener('focus', showAdminPass);
+        elem.addEventListener('blur', onBlur);
     });
+
+    document.addEventListener('DOMContentLoaded', hideAdminPass);
+})();
 //]]></script>
 SCRIPT;
     }

app/code/core/Mage/Adminhtml/Block/Customer/Edit/Renderer/Region.php

@@ -55,7 +55,7 @@ public function render(Varien_Data_Form_Element_Abstract $element)
         $html .= '</select>';
 
         $html .= '<script type="text/javascript">' . "\n";
-        $html .= '$("' . $selectId . '").setAttribute("defaultValue", "' . $regionId . '");' . "\n";
+        $html .= 'document.getElementById("' . $selectId . '").setAttribute("defaultValue", "' . $regionId . '");' . "\n";
         $html .= 'new regionUpdater("' . $country->getHtmlId() . '", "' . $element->getHtmlId() . '", "'
             . $selectId . '", ' . Mage::helper('directory')->getRegionJsonByStore($quoteStoreId) . ');' . "\n";
         $html .= '</script>' . "\n";