Wire styleguide.css and ajax.js into root.mako globally

- Load styleguide.css before style.css so new design tokens are
  available app-wide and new styles take precedence
- Load ajax.js after scripts.min.js — provides qs(), onReady(),
  onDelegate(), setCookie(), getCookie(), and other vanilla utilities
- Keep jQuery's $ intact via qs() alias to avoid breaking existing code
- Add no-js class to <html> for capability-driven presentation
- Update error_document.mako with same CSS/JS stack

rhodecode/public/js/ajax.js

@@ -8,10 +8,13 @@
        DOM UTILITIES
        ===================================================================== */
 
-    /** Query single element */
+    /** Query single element — only override $ if jQuery is not loaded */
-    window.$ = function(selector, context) {
+    window.qs = function(selector, context) {
         return (context || document).querySelector(selector);
     };
+    if (!window.jQuery) {
+        window.$ = window.qs;
+    }
 
     /** Query all elements */
     window.$$ = function(selector, context) {
@@ -89,17 +92,17 @@
        ===================================================================== */
 
     window.show = function(el) {
-        if (typeof el === 'string') el = $(el);
+        if (typeof el === 'string') el = qs(el);
         if (el) el.style.display = '';
     };
 
     window.hide = function(el) {
-        if (typeof el === 'string') el = $(el);
+        if (typeof el === 'string') el = qs(el);
         if (el) el.style.display = 'none';
     };
 
     window.toggle = function(el) {
-        if (typeof el === 'string') el = $(el);
+        if (typeof el === 'string') el = qs(el);
         if (!el) return;
         el.style.display = (el.style.display === 'none') ? '' : 'none';
     };
@@ -128,14 +131,14 @@
        ===================================================================== */
 
     window.openDialog = function(selector) {
-        var dialog = typeof selector === 'string' ? $(selector) : selector;
+        var dialog = typeof selector === 'string' ? qs(selector) : selector;
         if (dialog && dialog.showModal) {
             dialog.showModal();
         }
     };
 
     window.closeDialog = function(selector) {
-        var dialog = typeof selector === 'string' ? $(selector) : selector;
+        var dialog = typeof selector === 'string' ? qs(selector) : selector;
         if (dialog && dialog.close) {
             dialog.close();
         }
@@ -166,7 +169,7 @@
        ===================================================================== */
 
     window.tooltip = function(el, text) {
-        if (typeof el === 'string') el = $(el);
+        if (typeof el === 'string') el = qs(el);
         if (!el) return;
         el.setAttribute('title', text);
     };
@@ -184,7 +187,7 @@
        ===================================================================== */
 
     window.dismissAlert = function(el) {
-        if (typeof el === 'string') el = $(el);
+        if (typeof el === 'string') el = qs(el);
         if (!el) return;
         el.style.transition = 'opacity 0.2s';
         el.style.opacity = '0';
@@ -196,7 +199,7 @@
        ===================================================================== */
 
     window.scrollToElement = function(selector) {
-        var el = typeof selector === 'string' ? $(selector) : selector;
+        var el = typeof selector === 'string' ? qs(selector) : selector;
         if (el) {
             el.scrollIntoView({ behavior: 'smooth', block: 'start' });
         }

rhodecode/templates/base/root.mako

@@ -40,7 +40,7 @@ c.template_context['attachment_store'] = {
 }
 
 %>
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" class="no-js">
     <head>
         <title>${self.title()}</title>
         <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
@@ -62,6 +62,7 @@ c.template_context['attachment_store'] = {
 
         ## CSS definitions
         <%def name="css()">
+            <link rel="stylesheet" type="text/css" href="${h.asset('css/styleguide.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <link rel="stylesheet" type="text/css" href="${h.asset('css/filepond.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             <link rel="stylesheet" type="text/css" href="${h.asset('css/style.css', ver=c.rhodecode_version_hash)}" media="screen"/>
             ## EXTRA FOR CSS
@@ -144,6 +145,7 @@ c.template_context['attachment_store'] = {
             <script> var alertMessagePayloads = ${h.flash.json_alerts(request=request)|n}; </script>
             ## avoide escaping the %N
             <script language="javascript" type="text/javascript" src="${h.asset('js/scripts.min.js', ver=c.rhodecode_version_hash)}"></script>
+            <script src="${h.asset('js/ajax.js', ver=c.rhodecode_version_hash)}"></script>
 
             ## JAVASCRIPT EXTRA - optionally inject some extra JS for specificed templates
             ${self.js_extra()}