[SF PROFILER] Use fetch instead of Sfjs.request and minor style adjus…

…ments to better match the new profiler layout (#500) * use fetch instead of Sfjs.request * adjust profiler styling to match new profiler theme
php-translation · Dec 15, 2023 · 722e616 · 722e616
1 parent f075bfb
commit 722e616
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 85 deletions.
diff --git a/Resources/public/js/symfonyProfiler.js b/Resources/public/js/symfonyProfiler.js
@@ -19,83 +19,76 @@ function syncMessage(key) {
     var el = document.getElementById(key).getElementsByClassName("translation");
     el[0].innerHTML = getLoaderHTML();
 
-    Sfjs.request(
-        translationSyncUrl,
-        function(xhr) {
-            // Success
-            el[0].innerHTML = xhr.responseText;
-
-            if (xhr.responseText !== "") {
-                clearState(key);
-            }
-        },
-        function(xhr) {
-            // Error
-            el[0].innerHTML = "<span style='color:red;'>Error - Syncing message " + key + "</span>";
-        },
-        serializeQueryString({message_id: key}),
-        { method: 'POST' }
-    );
+    fetch(translationSyncUrl, {
+        method: 'POST',
+        body: serializeQueryString({message_id: key}),
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'Content-Type': 'application/x-www-form-urlencoded',
+        }
+    }).then(res => res.text()).then((text) => {
+        el[0].innerHTML = text;
+
+        if (text !== "") {
+            clearState(key);
+        }
+    }).catch(() => {
+        el[0].innerHTML = "<span style='color:red;'>Error - Syncing message " + key + "</span>";
+    });
 }
 
 function syncAll() {
     var el = document.getElementById("top-result-area");
     el.innerHTML = getLoaderHTML();
 
-    Sfjs.request(
-        translationSyncAllUrl,
-        function(xhr) {
-            // Success
-            el.innerHTML = xhr.responseText;
-        },
-        function(xhr) {
-            // Error
-            el[0].innerHTML = "<span style='color:red;'>Error - Syncing all messages</span>";
+    fetch(translationSyncAllUrl, {
+        method: 'POST',
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'Content-Type': 'application/x-www-form-urlencoded',
         },
-        {},
-        { method: 'POST' }
-    );
+    }).then(res => res.text()).then(text => {
+        el.innerHTML = text;
+    }).catch(() => {
+        el[0].innerHTML = "<span style='color:red;'>Error - Syncing all messages</span>";
+    });
 }
 
 function getEditForm(key) {
     var el = document.getElementById(key).getElementsByClassName("translation");
     el[0].innerHTML = getLoaderHTML();
 
-    Sfjs.request(
-        translationEditUrl + "?" + serializeQueryString({message_id: key}),
-        function(xhr) {
-            // Success
-            el[0].innerHTML = xhr.responseText;
+    fetch(translationEditUrl + "?" + serializeQueryString({message_id: key}), {
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
         },
-        function(xhr) {
-            // Error
-            el[0].innerHTML = "<span style='color:red;'>Error - Getting edit form " + key + "</span>";
-        },
-        { method: 'GET' }
-    );
+    }).then(res => res.text()).then(text => {
+        el[0].innerHTML = text;
+    }).catch(() => {
+        el[0].innerHTML = "<span style='color:red;'>Error - Getting edit form " + key + "</span>";
+    });
 }
 
 function saveEditForm(key, translation) {
     var el = document.getElementById(key).getElementsByClassName("translation");
     el[0].innerHTML = getLoaderHTML();
 
-    Sfjs.request(
-        translationEditUrl,
-        function(xhr) {
-            // Success
-            el[0].innerHTML = xhr.responseText;
-
-            if (xhr.responseText !== "") {
-                clearState(key);
-            }
-        },
-        function(xhr) {
-            // Error
-            el[0].innerHTML = "<span style='color:red;'>Error - Saving edit form " + key + "</span>";
+    fetch(translationEditUrl, {
+        method: 'POST',
+        body: serializeQueryString({message_id: key, translation:translation}),
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'Content-Type': 'application/x-www-form-urlencoded',
         },
-        serializeQueryString({message_id: key, translation:translation}),
-        { method: 'POST' }
-    );
+    }).then(res => res.text()).then(text => {
+        el[0].innerHTML = text;
+
+        if (text !== "") {
+            clearState(key);
+        }
+    }).catch(() => {
+        el[0].innerHTML = "<span style='color:red;'>Error - Saving edit form " + key + "</span>";
+    })
 
     return false;
 }
@@ -130,17 +123,6 @@ var serializeQueryString = function(obj, prefix) {
     return str.join("&");
 };
 
-// We need to hack a bit Sfjs.request because it does not support POST requests
-// May not work for ActiveXObject('Microsoft.XMLHTTP'); :(
-(function(open) {
-    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
-        open.call(this, method, url, async, user, pass);
-        if (method.toLowerCase() === 'post') {
-            this.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
-        }
-    };
-})(XMLHttpRequest.prototype.open);
-
 var saveTranslations = function(form) {
     "use strict";
 
@@ -169,22 +151,22 @@ var saveTranslations = function(form) {
     el.classList.remove('status-error');
     el.classList.remove('status-success');
 
-    Sfjs.request(
-        form.action,
-        function(xhr) {
-            // Success
-            el.classList.add('label');
-            el.classList.add('status-success');
-            el.innerHTML = xhr.responseText;
+    fetch(form.action, {
+        method: 'POST',
+        body: serializeQueryString({selected: selected}),
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest',
+            'Content-Type': 'application/x-www-form-urlencoded',
         },
-        function(xhr) {
-            // Error
-            el.classList.add('label');
-            el.classList.add('status-error');
-            el.innerHTML = xhr.responseText;
-        },
-        serializeQueryString({selected: selected}),
-        { method: 'POST' }
-    );
+    }).then(res => res.text()).then(text => {
+        el.classList.add('label');
+        el.classList.add('status-success');
+        el.innerHTML = text;
+    }).catch(error => {
+        el.classList.add('label');
+        el.classList.add('status-error');
+        el.innerHTML = error;
+    })
+
     return false;
 };
diff --git a/Resources/views/SymfonyProfiler/edit.html.twig b/Resources/views/SymfonyProfiler/edit.html.twig
@@ -1,3 +1,3 @@
-<textarea style="width: 100%; background-color: var(--metric-value-background)" id="edit_{{ key }}">{{ message.translation }}</textarea>
+<textarea style="width: 100%; border: 1px solid var(--metric-border-color); padding: 4px; margin-bottom: 5px; border-radius: 6px; background-color: var(--metric-value-background); color: var(--color-text)" id="edit_{{ key }}">{{ message.translation }}</textarea>
 <input type="button" class="btn btn-sm" value="Save" onclick='saveEditForm("{{ key }}", document.getElementById("edit_{{ key }}").value)'>
 <input type="button" class="btn btn-sm" value="Cancel" onclick='cancelEditForm("{{ key }}", "{{ message.translation }}")'>
diff --git a/Resources/views/SymfonyProfiler/translation.html.twig b/Resources/views/SymfonyProfiler/translation.html.twig
@@ -110,7 +110,7 @@
                 <td class="translation">
                     {{ message.translation }}
                 </td>
-                <td width="155px">
+                <td style="white-space: nowrap">
                     {% apply spaceless %}
                     <a class="edit btn btn-sm" href="javascript:void(0);" onclick='getEditForm("{{ key }}")'>Edit</a>
                         |