10000 Redesigned the Symfony Profiler by javiereguiluz · Pull Request #15523 · symfony/symfony · GitHub
[go: up one dir, main page]
Skip to content

Redesigned the Symfony Profiler #15523

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 42 commits into from
Closed

Redesigned the Symfony Profiler #15523

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
b267347
Redesigned most of the Symfony Profiler panels
javiereguiluz Aug 12, 2015
4e66c45
Added some missing SVG icons
javiereguiluz Aug 12, 2015
b7f604c
Highlight the line of code which caused the exception
javiereguiluz Aug 12, 2015
3cdf546
CSS tweaks to fix some reported issues
javiereguiluz Aug 12, 2015
0a58431
A new round of tweaks and fixes
javiereguiluz Aug 13, 2015
9dc561c
Redesigned the "debug/dump" panel and other minor tweaks
javiereguiluz Aug 13, 2015
10f1fbb
Replaced the CSS-based tabs by proper JavaScript-based tabs
javiereguiluz Aug 14, 2015
a5f367c
First version of the redesigned Form panel
javiereguiluz Aug 17, 2015
6ca6b2f
Added the new icons, made the sidebar narrower, added badges in the
javiereguiluz Aug 19, 2015
22841fc
More design tweaks
javiereguiluz Aug 21, 2015
7cbced0
Refactored the "summary" section and redesigned all the profiler erro…
javiereguiluz Aug 21, 2015
50a60d5
Refactored the JavaScript code that creates the tabs
javiereguiluz Aug 21, 2015
656739e
Added a "toggle" utility
javiereguiluz Aug 21, 2015
b3aa953
Refactored the JavaScript code, used toggles in the Dump panel and
javiereguiluz Aug 23, 2015
376f1be
Finished the redesign of the Symfony Profiler
javiereguiluz Aug 24, 2015
3f6f747
Tweaks as per Stof's review and comments
javiereguiluz Aug 25, 2015
ab133e1
Minor tweaks for the Form panel
javiereguiluz Aug 25, 2015
904c618
Allow a toggle to define if its related content is displayed by default
javiereguiluz Aug 25, 2015
8a2a7cd
Replaced a randomly-generated ID by the real log index
javiereguiluz Aug 25, 2015
4e81feb
Lots of minor tweaks
javiereguiluz Aug 25, 2015
688e3f7
Minor JavaScript changes
javiereguiluz Aug 25, 2015
e47339b
Fixed the title of all panels and fixed some JavaScript issues
javiereguiluz Aug 26, 2015
3ac9100
Refactored some JavaScript code
javiereguiluz Aug 26, 2015
edb5e5e
Improved the vertical spacing of tabbed navigation
javiereguiluz Aug 26, 2015
4139c6b
Minor JavaScript change
javiereguiluz Aug 26, 2015
14b7cf5
More CSS tweaks to polish profiler panels
javiereguiluz Aug 26, 2015
a1d2e24
Redesigned the search results page
javiereguiluz Aug 27, 2015
489fbd6
Improved the timeline graphics and allowed panels to define their pag…
javiereguiluz Aug 27, 2015
437a67b
Simplified the management of the profiler panel titles
javiereguiluz Aug 28, 2015
72a64e3
Added some metrics about sub-requests in the performance panel
javiereguiluz Aug 28, 2015
f79894f
Fixed some CSS issues in Firefox
javiereguiluz Sep 1, 2015
2b55b9b
Allow to disable tabs, tweaked tables layout and other minor tweaks
javiereguiluz Sep 1, 2015
79f7297
Display the listener priority in the events panel
javiereguiluz Sep 3, 2015
50d5f59
Add a check to avoid errors for special pages (exceptions for example)
javiereguiluz Sep 3, 2015
14e725f
Fixed some test for the TraceableEventDispatcher changes
javiereguiluz Sep 3, 2015
b254b69
Sort uncalled events by priority
javiereguiluz Sep 3, 2015
67ef234
Grouped listeners by event in the events panel
javiereguiluz Sep 3, 2015
f971509
Fixed an HTML markup issue for the new events panel
javiereguiluz Sep 3, 2015
ac6f79a
Adjusted the logger panel after the grouping of related deprecations
javiereguiluz Sep 7, 2015
ac63334
Tweaked the logger panel stack trace contents
javiereguiluz Sep 7, 2015
a808fa5
Tweaked the toolbar for Silex 2
javiereguiluz Sep 7, 2015
73809a8
Removed the app.request... call to make it compatible with Silex
javiereguiluz Sep 7, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactored the JavaScript code that creates the tabs
  • Loading branch information
@javiereguiluz
javiereguiluz committed Sep 7, 2015
commit 50a60d5827328bcc1715c9cdae124b270f907624
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/events.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
{% endblock %}

{% block panelContent %}
<div class="tabs">
<div class="sf-tabs">
<div class="tab">
<h3 class="tab-title">Called listeners <span class="badge">{{ collector.calledlisteners|length }}</span></h3>

Expand Down
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/logger.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
{% endif %}
{% endfor %}

<div class="tabs">
<div class="sf-tabs">
<div class="tab">
<h3 class="tab-title">Info. & Errors <span class="badge">{{ info_and_error_logs|length }}</span></h3>

Expand Down
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
{% endblock %}

{% block panel %}
<div class="tabs">
<div class="sf-tabs">
<div class="tab">
<h3 class="tab-title">Request</h3>

Expand Down
2 changes: 1 addition & 1 deletion src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/translation.html.twig
10000
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@
{% endif %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we add a new state in the future, this would just drop it into nowhere, making it hard to debug why they don't appear (and maybe not making it clear that something is missing btw)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right again :) But if we add a new state, I'm afraid that it's not going to be displayed in any way. Sorting messages is only part of the solution. The other part is actually displaying those messages and this is not ready for other states. But we can easily deal with this when the time comes.

{% endfor %}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

adding methods doing this grouping in the DataCollector would allow to make it better than in Twig (which is not well suited for manipulating data to group it)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are right, but I'd prefer to optimize this in the future.


<div class="tabs">
<div class="sf-tabs">
<div class="tab">
<h3 class="tab-title">Defined <span class="badge">{{ collector.countdefines }}</span></h3>

Expand Down
125 changes: 66 additions & 59 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,69 @@

requestStack = [],

createTabs = function () {
var tabGroups = document.querySelectorAll('.sf-tabs');

// create the tab navigation for each group of tabs
for (var i = 0; i < tabGroups.length; i++) {
var tabs = tabGroups[i].querySelectorAll('.tab');
var tabNavigation = document.createElement('ul');
tabNavigation.setAttribute('class', 'tab-navigation');

for (var j = 0; j < tabs.length; j++) {
var tabId = 'tab-' + i + '-' + j;
var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;

var tabNavigationItem = document.createElement('li');
tabNavigationItem.setAttribute('data-tab-id', tabId);
tabNavigationItem.setAttribute('class', j == 0 ? 'active' : '');
tabNavigationItem.innerHTML = tabTitle;
tabNavigation.appendChild(tabNavigationItem);

var tabContent = tabs[j].querySelector('.tab-content');
tabContent.parentElement.setAttribute('id', tabId);
}

tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
}

// display the active tab and add the 'click' event listeners
for (var i = 0; i < tabGroups.length; i++) {
var tabNavigation = tabGroups[i].querySelectorAll('.tab-navigation li');

for (var j = 0; j < tabNavigation.length; j++) {
var tabId = tabNavigation[j].getAttribute('data-tab-id');
document.getElementById(tabId).querySelector('.tab-title').style.display = 'none';

if (tabNavigation[j].classList.contains('active')) {
document.getElementById(tabId).style.display = 'block';
} else {
document.getElementById(tabId).style.display = 'none';
}

tabNavigation[j].addEventListener('click', function(e) {
var activeTab = e.target || e.srcElement;

// needed because when the tab contains HTML contents, user can click
// on any of those elements instead of their parent '<li>' element
while (activeTab.tagName.toLowerCase() != 'li') {
activeTab = activeTab.parentNode;
}

for (var k = 0; k < tabNavigation.length; k++) {
var tabId = tabNavigation[k].getAttribute('data-tab-id');
document.getElementById(tabId).style.display = 'none';
tabNavigation[k].classList.remove('active');
}

activeTab.classList.add('active');
var activeTabId = activeTab.getAttribute('data-tab-id');
document.getElementById(activeTabId).style.display = 'block';
});
}
}
},

renderAjaxRequests = function() {
var requestCounter = document.querySelectorAll('.sf-toolbar-ajax-requests');
if (!requestCounter.length) {
Expand Down Expand Up @@ -263,6 +326,8 @@

request: request,

createTabs: createTabs,

renderAjaxRequests: renderAjaxRequests,

load: function(selector, url, onSuccess, onError, options) {
Expand Down Expand Up @@ -302,65 +367,7 @@
}
})();

// create the tabs
window.addEventListener("load", function() {
var tabGroups = document.querySelectorAll('.tabs');

// create the tab navigation for each group of tabs
for (var i = 0; i < tabGroups.length; i++) {
var tabs = tabGroups[i].querySelectorAll('.tab');
var tabNavigation = document.createElement('ul');
tabNavigation.setAttribute('class', 'tab-navigation');

for (var j = 0; j < tabs.length; j++) {
var tabId = 'tab-' + i + '-' + j;
var tabTitle = tabs[j].querySelector('.tab-title').innerHTML;

var tabNavigationItem = document.createElement('li');
tabNavigationItem.setAttribute('data-tab-id', tabId);
tabNavigationItem.setAttribute('class', j == 0 ? 'active' : '');
tabNavigationItem.innerHTML = tabTitle;
tabNavigation.appendChild(tabNavigationItem);

var tabContent = tabs[j].querySelector('.tab-content');
tabContent.parentElement.setAttribute('id', tabId);
}

tabGroups[i].insertBefore(tabNavigation, tabGroups[i].firstChild);
}

// display the active tab and add the 'click' event listeners
for (var i = 0; i < tabGroups.length; i++) {
var tabNavigation = tabGroups[i].querySelectorAll('.tab-navigation li');

for (var j = 0; j < tabNavigation.length; j++) {
var tabId = tabNavigation[j].getAttribute('data-tab-id');
document.getElementById(tabId).querySelector('.tab-title').style.display = 'none';

if (tabNavigation[j].classList.contains('active')) {
document.getElementById(tabId).style.display = 'block';
}

tabNavigation[j].addEventListener('click', function(e) {
var activeTab = e.target || e.srcElement;

// needed because when the tab contains HTML contents, user can click
// on any of those elements instead of their parent '<li>' element
while (activeTab.tagName.toLowerCase() != 'li') {
activeTab = activeTab.parentNode;
}

for (k = 0; k < tabNavigation.length; k++) {
var tabId = tabNavigation[k].getAttribute('data-tab-id');
document.getElementById(tabId).style.display = 'none';
tabNavigation[k].classList.remove('active');
}

activeTab.classList.add('active');
var activeTabId = activeTab.getAttribute('data-tab-id');
document.getElementById(activeTabId).style.display = 'block';
});
}
}
Sfjs.createTabs();
});
/*]]>*/</script>
3 changes: 0 additions & 3 deletions src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -620,9 +620,6 @@ body#search h3 {

{# Navigation
========================================================================= #}
.tabs .tab {
display: none;
}
.tab-navigation {
margin: 0;
padding: 0;
Expand Down
0