Skip to content

Commit ce73293

Browse files
fabpotfabpot
committed
feature #27678 Allow to configure some options of the profiler interface (javiereguiluz)
This PR was squashed before being merged into the 4.2-dev branch (closes #27678). Discussion ---------- Allow to configure some options of the profiler interface | Q | A | ------------- | --- | Branch? | master | Bug fix? | yno | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | - | License | MIT | Doc PR | - This PR adds some configurable options for the interface of the Symfony profiler. First, you can configure the theme. The current one remains as the default light theme, but there's a new dark theme. A quick comparison: ![theme-light](https://user-images.githubusercontent.com/73419/41765883-ad2f9e6a-7605-11e8-87fb-881afbffc788.png) ![theme-dark](https://user-images.githubusercontent.com/73419/41765888-af597800-7605-11e8-9097-eb9667b82136.png) The second option is the width of the profiler pages. The current normal width remains as the default, but there's a new dynamic width that is as width as the browser window. The "Performance" panel is the one where this option makes more sense. A quick comparison when using a 2560 x 1440 resolution: ![settings-width-normal](https://user-images.githubusercontent.com/73419/41765890-b4affe14-7605-11e8-80b9-99ca54b07b83.png) ![settings-width-wide](https://user-images.githubusercontent.com/73419/41765891-b6506876-7605-11e8-95c4-664b1fb0f3dd.png) All settings are managed by JavaScript and persisted in localStorage, so everything is fast and simple: ![settings-in-action](https://user-images.githubusercontent.com/73419/41765926-ce04f31a-7605-11e8-93f4-a7f810f034a5.gif) ----- Note to reviewers: * This is the first draft of the PR. * I expect: approval/rejection of this idea and general comments of the proposed solution. Once this is accepted, I will finish the feature tweaking/fixing the design and the HTML/CSS/JS/Twig code. Don't comment on those details for now. Thanks! Commits ------- 944c53f Allow to configure some options of the profiler interface
2 parents 5362ff3 + 944c53f commit ce73293

File tree

5 files changed

+379
-118
lines changed

5 files changed

+379
-118
lines changed

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

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44

55
{% if colors is not defined %}
66
{% set colors = {
7-
'default': '#999',
8-
'section': '#444',
7+
'default': '#777',
8+
'section': '#999',
99
'event_listener': '#00B8F5',
1010
'template': '#66CC00',
1111
'doctrine': '#FF6633',
@@ -220,6 +220,11 @@
220220
return query('#collector-content h2').clientWidth;
221221
}
222222
223+
function getCssVarValue(varName)
224+
{
225+
return getComputedStyle(document.querySelector('body')).getPropertyValue(varName);
226+
}
227+
223228
/**
224229
* Draw one canvas.
225230
*
@@ -272,7 +277,11 @@
272277
ctx.lineWidth = 0;
273278
274279
// For each event, draw a line.
275-
ctx.strokeStyle = "#CCC";
280+
ctx.strokeStyle = getCssVarValue('--table-border');
281+
282+
// set the background color of the canvas
283+
ctx.fillStyle = getCssVarValue('--table-background');
284+
ctx.fillRect(0, 0, canvas.width, canvas.height);
276285
277286
drawableEvents.forEach(function(event) {
278287
event.periods.forEach(function(period) {
@@ -379,31 +388,31 @@
379388
// For each event, draw the label.
380389
mainEvents.forEach(function(event) {
381390
382-
ctx.fillStyle = "#444";
391+
ctx.fillStyle = getCssVarValue('--color-text');
383392
ctx.font = "12px sans-serif";
384393
text = event.name;
385394
ms = " " + (event.duration < 1 ? event.duration : parseInt(event.duration, 10)) + " ms / " + event.memory + " MB";
386395
if (x + event.starttime * ratio + ctx.measureText(text + ms).width > width) {
387396
ctx.textAlign = "end";
388397
ctx.font = "10px sans-serif";
389-
ctx.fillStyle = "#777";
398+
ctx.fillStyle = getCssVarValue('--color-muted');
390399
xc = x + event.endtime * ratio - 1;
391400
ctx.fillText(ms, xc, h);
392401
393402
xc -= ctx.measureText(ms).width;
394403
ctx.font = "12px sans-serif";
395-
ctx.fillStyle = "#222";
404+
ctx.fillStyle = getCssVarValue('--color-text');
396405
ctx.fillText(text, xc, h);
397406
} else {
398407
ctx.textAlign = "start";
399408
ctx.font = "13px sans-serif";
400-
ctx.fillStyle = "#222";
409+
ctx.fillStyle = getCssVarValue('--color-text');
401410
xc = x + event.starttime * ratio + 1;
402411
ctx.fillText(text, xc, h);
403412
404413
xc += ctx.measureText(text).width;
405414
ctx.font = "11px sans-serif";
406-
ctx.fillStyle = "#777";
415+
ctx.fillStyle = getCssVarValue('--color-muted');
407416
ctx.fillText(ms, xc, h);
408417
}
409418

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@
1414
{% endblock %}
1515
</head>
1616
<body>
17+
<script async>
18+
document.body.classList.add(localStorage.getItem('symfony/profiler/theme'), localStorage.getItem('symfony/profiler/width'));
19+
</script>
20+
1721
{% block body '' %}
1822
</body>
1923
</html>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,8 @@
126126
{% endfor %}
127127
</ul>
128128
{% endif %}
129+
130+
{{ include('@WebProfiler/Profiler/settings.html.twig') }}
129131
</div>
130132

131133
<div id="collector-wrapper">
@@ -142,6 +144,6 @@
142144
event.preventDefault();
143145
Sfjs.toggleClass(document.getElementById('sidebar'), 'expanded');
144146
})
145-
}())
147+
}());
146148
</script>
147149
{% endblock %}

0 commit comments

Comments
 (0)