Skip to content

Commit 722e616

Browse files
n3o77n3o77
authored
[SF PROFILER] Use fetch instead of Sfjs.request and minor style adjusments to better match the new profiler layout (#500)
* use fetch instead of Sfjs.request * adjust profiler styling to match new profiler theme
1 parent f075bfb commit 722e616

File tree

3 files changed

+67
-85
lines changed

3 files changed

+67
-85
lines changed

‎Resources/public/js/symfonyProfiler.js

Lines changed: 65 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -19,83 +19,76 @@ function syncMessage(key) {
1919
var el = document.getElementById(key).getElementsByClassName("translation");
2020
el[0].innerHTML = getLoaderHTML();
2121

22-
Sfjs.request(
23-
translationSyncUrl,
24-
function(xhr) {
25-
// Success
26-
el[0].innerHTML = xhr.responseText;
27-
28-
if (xhr.responseText !== "") {
29-
clearState(key);
30-
}
31-
},
32-
function(xhr) {
33-
// Error
34-
el[0].innerHTML = "<span style='color:red;'>Error - Syncing message " + key + "</span>";
35-
},
36-
serializeQueryString({message_id: key}),
37-
{ method: 'POST' }
38-
);
22+
fetch(translationSyncUrl, {
23+
method: 'POST',
24+
body: serializeQueryString({message_id: key}),
25+
headers: {
26+
'X-Requested-With': 'XMLHttpRequest',
27+
'Content-Type': 'application/x-www-form-urlencoded',
28+
}
29+
}).then(res => res.text()).then((text) => {
30+
el[0].innerHTML = text;
31+
32+
if (text !== "") {
33+
clearState(key);
34+
}
35+
}).catch(() => {
36+
el[0].innerHTML = "<span style='color:red;'>Error - Syncing message " + key + "</span>";
37+
});
3938
}
4039

4140
function syncAll() {
4241
var el = document.getElementById("top-result-area");
4342
el.innerHTML = getLoaderHTML();
4443

45-
Sfjs.request(
46-
translationSyncAllUrl,
47-
function(xhr) {
48-
// Success
49-
el.innerHTML = xhr.responseText;
50-
},
51-
function(xhr) {
52-
// Error
53-
el[0].innerHTML = "<span style='color:red;'>Error - Syncing all messages</span>";
44+
fetch(translationSyncAllUrl, {
45+
method: 'POST',
46+
headers: {
47+
'X-Requested-With': 'XMLHttpRequest',
48+
'Content-Type': 'application/x-www-form-urlencoded',
5449
},
55-
{},
56-
{ method: 'POST' }
57-
);
50+
}).then(res => res.text()).then(text => {
51+
el.innerHTML = text;
52+
}).catch(() => {
53+
el[0].innerHTML = "<span style='color:red;'>Error - Syncing all messages</span>";
54+
});
5855
}
5956

6057
function getEditForm(key) {
6158
var el = document.getElementById(key).getElementsByClassName("translation");
6259
el[0].innerHTML = getLoaderHTML();
6360

64-
Sfjs.request(
65-
translationEditUrl + "?" + serializeQueryString({message_id: key}),
66-
function(xhr) {
67-
// Success
68-
el[0].innerHTML = xhr.responseText;
61+
fetch(translationEditUrl + "?" + serializeQueryString({message_id: key}), {
62+
headers: {
63+
'X-Requested-With': 'XMLHttpRequest',
6964
},
70-
function(xhr) {
71-
// Error
72-
el[0].innerHTML = "<span style='color:red;'>Error - Getting edit form " + key + "</span>";
73-
},
74-
{ method: 'GET' }
75-
);
65+
}).then(res => res.text()).then(text => {
66+
el[0].innerHTML = text;
67+
}).catch(() => {
68+
el[0].innerHTML = "<span style='color:red;'>Error - Getting edit form " + key + "</span>";
69+
});
7670
}
7771

7872
function saveEditForm(key, translation) {
7973
var el = document.getElementById(key).getElementsByClassName("translation");
8074
el[0].innerHTML = getLoaderHTML();
8175

82-
Sfjs.request(
83-
translationEditUrl,
84-
function(xhr) {
85-
// Success
86-
el[0].innerHTML = xhr.responseText;
87-
88-
if (xhr.responseText !== "") {
89-
clearState(key);
90-
}
91-
},
92-
function(xhr) {
93-
// Error
94-
el[0].innerHTML = "<span style='color:red;'>Error - Saving edit form " + key + "</span>";
76+
fetch(translationEditUrl, {
77+
method: 'POST',
78+
body: serializeQueryString({message_id: key, translation:translation}),
79+
headers: {
80+
'X-Requested-With': 'XMLHttpRequest',
81+
'Content-Type': 'application/x-www-form-urlencoded',
9582
},
96-
serializeQueryString({message_id: key, translation:translation}),
97-
{ method: 'POST' }
98-
);
83+
}).then(res => res.text()).then(text => {
84+
el[0].innerHTML = text;
85+
86+
if (text !== "") {
87+
clearState(key);
88+
}
89+
}).catch(() => {
90+
el[0].innerHTML = "<span style='color:red;'>Error - Saving edit form " + key + "</span>";
91+
})
9992

10093
return false;
10194
}
@@ -130,17 +123,6 @@ var serializeQueryString = function(obj, prefix) {
130123
return str.join("&");
131124
};
132125

133-
// We need to hack a bit Sfjs.request because it does not support POST requests
134-
// May not work for ActiveXObject('Microsoft.XMLHTTP'); :(
135-
(function(open) {
136-
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
137-
open.call(this, method, url, async, user, pass);
138-
if (method.toLowerCase() === 'post') {
139-
this.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
140-
}
141-
};
142-
})(XMLHttpRequest.prototype.open);
143-
144126
var saveTranslations = function(form) {
145127
"use strict";
146128

@@ -169,22 +151,22 @@ var saveTranslations = function(form) {
169151
el.classList.remove('status-error');
170152
el.classList.remove('status-success');
171153

172-
Sfjs.request(
173-
form.action,
174-
function(xhr) {
175-
// Success
176-
el.classList.add('label');
177-
el.classList.add('status-success');
178-
el.innerHTML = xhr.responseText;
154+
fetch(form.action, {
155+
method: 'POST',
156+
body: serializeQueryString({selected: selected}),
157+
headers: {
158+
'X-Requested-With': 'XMLHttpRequest',
159+
'Content-Type': 'application/x-www-form-urlencoded',
179160
},
180-
function(xhr) {
181-
// Error
182-
el.classList.add('label');
183-
el.classList.add('status-error');
184-
el.innerHTML = xhr.responseText;
185-
},
186-
serializeQueryString({selected: selected}),
187-
{ method: 'POST' }
188-
);
161+
}).then(res => res.text()).then(text => {
162+
el.classList.add('label');
163+
el.classList.add('status-success');
164+
el.innerHTML = text;
165+
}).catch(error => {
166+
el.classList.add('label');
167+
el.classList.add('status-error');
168+
el.innerHTML = error;
169+
})
170+
189171
return false;
190172
};

‎Resources/views/SymfonyProfiler/edit.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<textarea style="width: 100%; background-color: var(--metric-value-background)" id="edit_{{ key }}">{{ message.translation }}</textarea>
1+
<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>
22
<input type="button" class="btn btn-sm" value="Save" onclick='saveEditForm("{{ key }}", document.getElementById("edit_{{ key }}").value)'>
33
<input type="button" class="btn btn-sm" value="Cancel" onclick='cancelEditForm("{{ key }}", "{{ message.translation }}")'>

‎Resources/views/SymfonyProfiler/translation.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@
110110
<td class="translation">
111111
{{ message.translation }}
112112
</td>
113-
<td width="155px">
113+
<td style="white-space: nowrap">
114114
{% apply spaceless %}
115115
<a class="edit btn btn-sm" href="javascript:void(0);" onclick='getEditForm("{{ key }}")'>Edit</a>
116116
|

0 commit comments

Comments
 (0)