8000 merged branch dlsniper/wpb-improvements (PR #5518) · markross/symfony@2c4ed86 · GitHub
[go: up one dir, main page]
Skip to content

Commit 2c4ed86

Browse files
fabpotfabpot
committed
merged branch dlsniper/wpb-improvements (PR symfony#5518)
This PR was squashed before being merged into the master branch (closes symfony#5518). Commits ------- 3303ca2 WPB and WDT improvements be194cb Changed icons to be a bit more consistent 08241b8 Added minimize option to Web Profiler panels Discussion ---------- [2.2][WebProfilerBundle] Added minimize option to Web Profiler panels Bug fix: no Feature addition: yes Backwards compatibility break: no Symfony2 tests pass: yes Fixes the following tickets: ~ Todo: ~ License of the code: MIT Documentation PR: ~ I've added a minimize option to the profiler bundle so that you can have more space to work with on the panels. You can view it in action here:http://sf2demo.rodb.ro/app_dev.php/ Feedback is welcomed! Thanks! --------------------------------------------------------------------------- by dlsniper at 2012-09-15T13:36:51Z I could add a remember option via a cookie if you think this would help, I know I'd want one, but I'm not sure about the general opinion about this. Let me know if I should do it. --------------------------------------------------------------------------- by stof at 2012-09-15T17:05:58Z The profiler is totally broken when minimizing the menu in your demo. --------------------------------------------------------------------------- by lennerd at 2012-09-15T17:10:54Z I would not make it disappear completely. So I think a combination of Cookie and a small visual for open it again would be great to have. --------------------------------------------------------------------------- by dlsniper at 2012-09-15T17:15:06Z @stof I've only enabled a few panels to work in the demo, rest defaults to DB panel. If this is what you mean then it's not broken, it's designed to do so. I've tested the thing on Opera, FF and Chrome (on Linux) before uploading the demo/PR so I'm not sure what's broken. Can you please provide a screenshot? @lennerd I could be doing something like only display it in the upper left corner and appear on mouse over as an overlay. Would that be better? --------------------------------------------------------------------------- by stof at 2012-09-15T17:21:22Z @dlsniper what I mean is that the text of the menu does not disappear. It simply goes over the panel itself as the menu becomes smaller. And this appears for all panels I tried. --------------------------------------------------------------------------- by stof at 2012-09-15T17:22:32Z hmm, sorry. It is a browser cache issue. It seems like your server was sending cache headers for the assets, and as I already looked at the demo previously (for your DoctrineBundle PR), it kept the old CSS --------------------------------------------------------------------------- by dlsniper at 2012-09-15T17:25:09Z @stof no problem, the server is configured a bit more on caching side in order to speed it up and save bandwidth ;) --------------------------------------------------------------------------- by lennerd at 2012-09-15T17:38:41Z @dlsniper I would use the close button changing to maybe an arrow in the bottom right. So it's more intuitive and you can simply show and hide it if you only want to take a quick look at a small detail behind it. --------------------------------------------------------------------------- by henrikbjorn at 2012-09-15T18:08:02Z What about making this the default, the icons are self explanatory already. The title would then be the "link" text instead. --------------------------------------------------------------------------- by dlsniper at 2012-09-15T20:30:51Z @henrikbjorn I wouldn't make this by default as new people might find it a bit confusing. Hence the suggestion to use the cookie to remember the preference. --- Also I'm trying not to break the current format of the menu too much as hiding all that stuff by hand is pain but if I'm allowed to break the current way of displaying the left menu then this is going to be easy. What I didn't understood so far is why is the toolbar displayed on the top as well since we have it on the left side already so I've remove it from my current changes (will be up soonish). --------------------------------------------------------------------------- by dlsniper at 2012-09-15T21:10:03Z @lennerd what exactly do you mean by 'I would use the close button' there's no close button on the profiler page, only on the toolbar. --------------------------------------------------------------------------- by lennerd at 2012-09-15T21:21:20Z That was the button I was talking about. So that there is a little close button at the bottom right for toggling the toolbar. --------------------------------------------------------------------------- by dlsniper at 2012-09-15T23:14:06Z I've changed the way the menu minimizes now, it hides in the top left corner and it maintains its state on refresh. I'll do something similar for the toolbar tomorrow. You can view it on the same URL. Please do leave feedback. Thanks! --------------------------------------------------------------------------- by lennerd at 2012-09-16T01:02:27Z Sorry. I misunderstand your PR. --------------------------------------------------------------------------- by stof at 2012-09-16T03:01:06Z @dlsniper The toolbar is displayed at the top because it gives a quick overview without having to go in each panel. So removing it is a bad idea IMO. And hiding everything is a bad idea IMO. It means navigating is impossible, making it usable when minimizing it (and btw, this would make the cookie a non-sense as it would hide the menu for subsequent pages) --------------------------------------------------------------------------- by fabpot at 2012-09-16T06:38:08Z -1 for removing the toolbar at the top I prefer the first version where you only hide the menu text but leave the icons. Keeping the state in a cookie is also a must (that cookie might be used to store some other states in the profiler too). --------------------------------------------------------------------------- by Partugal at 2012-09-16T08:14:11Z i'm not see first version but show icons without text is more useful. imho minimize trigger should be always placed on top as it showns in minized state --------------------------------------------------------------------------- by Partugal at 2012-09-16T08:24:49Z http://s14.postimage.org/qkdcr8d4h/image.png --------------------------------------------------------------------------- by dlsniper at 2012-09-16T09:06:50Z @fabpot I've just had a look on how the timeline stores the selected value and it's using the local storage capabilities. Should I drop the cookie and use the local storage as well to have some sort of uniformity? Also is there any reason why no generic JS library is used? I'm thinking now about jQuery mostly but any other should do just fine I think. I'm not saying that we should use a library when displaying the WDT as it might bump into issues with the frontend but for the rest of the profiler I guess it wouldn't be a problem to use a library, no? --------------------------------------------------------------------------- by fabpot at 2012-09-16T09:15:37Z Let's use the local storage for better consistency. I don't want to embed a JS library as we only need basic JS scripts. --------------------------------------------------------------------------- by lennerd at 2012-09-16T10:29:20Z @dlsniper Do we need the up and down arrows any longer? --------------------------------------------------------------------------- by dlsniper at 2012-09-16T14:24:27Z I've added a minimize mode to the toolbar but the 'design' isn't the best all around, I'll try to improve it in the future. It also remembers the state of the toolbar so that you don't need to hide it every time. @lennerd we don't need the up/down arrows for now, I've removed on the last commit. Thank you for the new icons ;) L.E. I've made some sort of rounded corner/gradient background in for the minimized toolbar --------------------------------------------------------------------------- by dlsniper at 2012-09-18T22:02:35Z @pborreli thanks for the idea regarding to auto-minimize on window resize, I'll implement it soon, I don't really have time right now to add the event handling part to Sfjs. L. E. I'm not going to implement the auto-resize as it proved not to be that useful given the fixed width of the panel. If it proves to be a requested thing then I'll improve it if no one else does it before me :) --------------------------------------------------------------------------- by dlsniper at 2012-09-19T20:52:43Z If there's nothing else left to be changed/improved/added, I'll lift the WIP tag of this PR so that it can be merged if you consider it. @fabpot, if this gets its way to the repository, should I rebase this before merging so that it catches the next Symfony 2.1 release as it doesn't break anything? I don't mean the very next release which I've read that it would be done when Doctrine will release their new version but the version after that. --------------------------------------------------------------------------- by fabpot at 2012-09-19T20:56:45Z This is a new feature, so it can only be included in the master branch. --------------------------------------------------------------------------- by dlsniper at 2012-09-23T12:27:41Z As soon as this feature goes in master I'll start working on adding AJAX requests to the toolbar to make it even more useful. Let me know if this change is good to merge or needs more work. Thanks @stof for all the input and @lennerd for the icons. --------------------------------------------------------------------------- by stof at 2012-09-23T13:40:38Z Adding which ajax requests to the toolbar ? --------------------------------------------------------------------------- by dlsniper at 2012-09-23T13:49:43Z 'Userland' AJAX requests, so that one could access the information from an AJAX request more straight forward
2 parents 926dd1d + 310c2f9 commit 2c4ed86

File tree

13 files changed

+243
-25
lines changed

13 files changed

+243
-25
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/Controller/ProfilerController.php

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ public function toolbarAction(Request $request, $token, $position = null)
186186
'profile' => $profile,
187187
'templates' => $this->getTemplateManager()->getTemplates($profile),
188188
'profiler_url' => $url,
189+
'token' => $token,
189190
));
190191
}
191192

‎src/Symfony/Bundle/WebProfilerBundle/Resources/public/css/profiler.css

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,13 +104,14 @@ abbr {
104104

105105
#content {
106106
padding: 0 50px;
107-
margin: 0 auto;
107+
margin: 0 auto 20px;
108108
font-family: Arial, Helvetica, sans-serif;
109109
min-width: 970px;
110+
110111
}
111112

112113
#header {
113-
padding: 30px 30px 20px;
114+
padding: 20px 30px 20px;
114115
}
115116

116117
#header h1 {
@@ -131,6 +132,7 @@ abbr {
131132
padding-bottom: 0;
132133
display: block;
133134
background-color: #f6f6f6;
135+
z-index: 10000;
134136
}
135137

136138
#menu_profiler li a {
@@ -144,9 +146,9 @@ abbr {
144146

145147
#menu_profiler li a span.label {
146148
display: block;
147-
padding: 20px 20px 16px 65px;
148-
min-height: 24px;
149-
_height: 24px;
149+
padding: 20px 0px 16px 65px;
150+
min-height: 16px;
151+
overflow: hidden;
150152
}
151153

152154
#menu_profiler li a span.icon {
@@ -186,7 +188,7 @@ abbr {
186188

187189
#collector_content {
188190
margin-left: 250px;
189-
padding: 40px 50px;
191+
padding: 30px 40px 40px;
190192
}
191193

192194
#navigation {
@@ -235,8 +237,9 @@ li {
235237
#resume {
236238
background-color: #f6f6f6;
237239
border-bottom: 1px solid #dfdfdf;
238-
padding: 10px 50px;
239-
margin-left: 210px;
240+
padding: 18px 10px 0px;
241+
margin-left: 250px;
242+
height: 34px;
240243
color: #313131;
241244
font-size: 12px;
242245
-moz-border-radius-topright: 16px;
@@ -284,7 +287,9 @@ table th.value {
284287
}
285288

286289
.sf-exceptionreset .block_exception_detected .text_exception {
287-
width: 520px;
290+
left: 10px;
291+
right: 10px;
292+
width: 95%;
288293
}
289294

290295
.sf-exceptionreset .block_exception_detected .illustration_exception {
@@ -488,3 +493,20 @@ td.main, td.menu {
488493
border: 1px solid #999;
489494
border-width: 1px 0;
490495
}
496+
497+
.collapsed-menu-parents #resume,
498+
.collapsed-menu-parents #collector_content {
499+
margin-left: 60px !important;
500+
}
501+
502+
.collapsed-menu {
503+
width: 60px !important;
504+
}
505+
506+
.collapsed-menu span :not(.icon) {
507+
display: none !important;
508+
}
509+
510+
.collapsed-menu span.icon img {
511+
display: inline !important;
512+
}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/left-arrow.png

1001 Bytes
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/public/images/profiler/right-arrow.png

1001 Bytes
Loading

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@
134134
"use strict";
135135
136136
var _drawingColors = {{ colors|json_encode|raw }},
137-
_storagePrefix = 'sf2/profiler/timeline',
137+
_storagePrefix = 'timeline/',
138138
_threshold = 1,
139139
_requests = requests,
140140
_maxRequestTime = maxRequestTime;
@@ -353,7 +353,7 @@
353353
};
354354
355355
this.getThreshold = function() {
356-
var threshold = localStorage.getItem(_storagePrefix + '/threshold');
356+
var threshold = Sfjs.getPreference(_storagePrefix + 'threshold');
357357
358358
if (threshold === null) {
359359
return _threshold;
@@ -368,7 +368,7 @@
368368
{
369369
_threshold = threshold;
370370
371-
localStorage.setItem(_storagePrefix + '/threshold', threshold);
371+
Sfjs.setPreference(_storagePrefix + 'threshold', threshold);
372372
373373
return this;
374374
};
@@ -423,6 +423,11 @@
423423
elementThresholdControl.onclick = canvasAutoUpdateOnThresholdChange;
424424
elementThresholdControl.onchange = canvasAutoUpdateOnThresholdChange;
425425
elementThresholdControl.onkeyup = canvasAutoUpdateOnThresholdChange;
426+
427+
window.setTimeout(function() {
428+
canvasAutoUpdateOnThresholdChange(null);
429+
}, 50);
430+
426431
//]]></script>
427432
{% endblock %}
428433

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/admin.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="search import clearfix">
1+
<div class="search import clearfix" id="adminBar">
22
<h3>
33
<img style="margin: 0 5px 0 0; vertical-align: middle; height: 16px" width="16" height="16" alt="Import" src="{{ asset('bundles/webprofiler/images/import.png') }}" />
44
Admin

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@
33
"use strict";
44
55
var noop = function() {},
6+
7+
profilerStorageKey = 'sf2/profiler/',
8+
69
request = function(url, onSuccess, onError, payload, options) {
710
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
811
options = options || {};
@@ -17,21 +20,48 @@
1720
};
1821
xhr.send(payload || '');
1922
},
23+
2024
hasClass = function(el, klass) {
2125
return el.className.match(new RegExp('\\b' + klass + '\\b'));
2226
},
27+
2328
removeClass = function(el, klass) {
2429
el.className = el.className.replace(new RegExp('\\b' + klass + '\\b'), ' ');
2530
},
31+
2632
addClass = function(el, klass) {
2733
if (!hasClass(el, klass)) { el.className += " " + klass; }
34+
},
35+
36+
getPreference = function(name) {
37+
if (!window.localStorage) {
38+
return null;
39+
}
40+
41+
return localStorage.getItem(profilerStorageKey + name);
42+
},
43+
44+
setPreference = function(name, value) {
45+
if (!window.localStorage) {
46+
return null;
47+
}
48+
49+
localStorage.setItem(profilerStorageKey + name, value);
2850
};
2951
3052
return {
3153
hasClass: hasClass,
54+
3255
removeClass: removeClass,
56+
3357
addClass: addClass,
58+
59+
getPreference: getPreference,
60+
61+
setPreference: setPreference,
62+
3463
request: request,
64+
3565
load: function(selector, url, onSuccess, onError, options) {
3666
var el = document.getElementById(selector);
3767
@@ -51,6 +81,7 @@
5181
5282
return this;
5383
},
84+
5485
toggle: function(selector, elOn, elOff) {
5586
var i,
5687
style,
@@ -66,7 +97,6 @@
6697
6798
return this;
6899
}
69-
70100
}
71101
})();
72102
/*]]>*/</script>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/header.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</h1>
55

66
<div class="search">
7-
<form method="get" action="http://symfony.com/search">
7+
<form method="get" action="http://symfony.com/search" target="_blank">
88
<div class="form_row">
99
<label for="search_id">
1010
<img src="{{ asset('bundles/webprofiler/images/profiler/grey_magnifier.png') }}" alt="Search on Symfony website"/>

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/layout.html.twig

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,14 @@
4343
</li>
4444
{% endif %}
4545
{% endfor %}
46+
<li class="minimize">
47+
<a href="javascript:void(0);" title="Minimize toolbar" onclick="return toggleMenuPanels();">
48+
<span class="label">
49+
<span class="icon"><img id="minimizePanelIcon" src="{{ asset('bundles/webprofiler/images/profiler/left-arrow.png') }}" alt="" /></span>
50+
<strong>Minimize</strong>
51+
</span>
52+
</a>
53+
</li>
4654
</ul>
4755
{% endif %}
4856
{% render 'WebProfilerBundle:Profiler:searchBar' %}
@@ -51,4 +59,74 @@
5159
</div>
5260
</div>
5361
</div>
62+
63+
<script type="text/javascript">//<![CDATA[
64+
65+
function toggleMenuPanels(state, doSave) {
66+
var leftIconPath = "{{ asset('bundles/webprofiler/images/profiler/left-arrow.png')|e('js') }}",
67+
rightIconPath = "{{ asset('bundles/webprofiler/images/profiler/right-arrow.png')|e('js') }}",
68+
menu = document.getElementById('navigation'), savedState = Sfjs.getPreference('menu/displayState'),
69+
displayState, elem, className;
70+
71+
if (savedState == null) {
72+
savedState = 'block';
73+
}
74+
75+
displayState = state || (savedState == 'block' ? 'none' : 'block');
76+
77+
if (typeof doSave === 'undefined') {
78+
doSave = true;
79+
}
80+
81+
document.getElementById('searchBar').style.display = displayState;
82+
document.getElementById('adminBar').style.display = displayState;
83+
84+
if (displayState == 'block') {
85+
Sfjs.removeClass(menu, 'collapsed-menu');
86+
Sfjs.removeClass(menu.parentNode.parentNode, 'collapsed-menu-parents');
87+
88+
document.getElementById('minimizePanelIcon').src = leftIconPath;
89+
} else {
90+
Sfjs.addClass(menu, 'collapsed-menu');
91+
Sfjs.addClass(menu.parentNode.parentNode, 'collapsed-menu-parents');
92+
93+
document.getElementById('minimizePanelIcon').src = rightIconPath;
94+
}
95+
96+
if (doSave) {
97+
Sfjs.setPreference('menu/displayState', displayState);
98+
}
99+
100+
try {
101+
canvasAutoUpdateOnThresholdChange(null);
102+
} catch (err) {
103+
104+
}
105+
106+
return false;
107+
}
108+
109+
window.setTimeout(function() {
110+
var menuItems = document.getElementById('menu_profiler').getElementsByTagName('LI'),
111+
elem, value, child, displayState = Sfjs.getPreference('menu/displayState');
112+
113+
if (displayState == 'none') {
114+
toggleMenuPanels('none', false);
115+
}
116+
117+
for (elem in menuItems) {
118+
if (typeof(menuItems[elem].children) != 'undefined' &&
119+
menuItems[elem].children.length > 0) {
120+
child = menuItems[elem].children[0]
121+
122+
if (child.getAttribute('title') == '' ||
123+
child.getAttribute('title') == null) {
124+
value = child.text.replace(/^\s+/g, '').split('\n')[0].replace(/\s+$/g, '');
125+
child.setAttribute('title', value);
126+
}
127+
}
128+
}
129+
}, 25);
130+
131+
//]]></script>
54132
{% endblock %}

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/search.html.twig

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="search clearfix">
1+
<div class="search clearfix" id="searchBar">
22
<h3>
33
<img style="margin: 0 5px 0 0; vertical-align: middle;" width="16" height="16" alt="Search" src="{{ asset('bundles/webprofiler/images/search.png') }}" />
44
Search

0 commit comments

Comments
 (0)
0