Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feature #27678 Allow to configure some options of the profiler interf…
…ace (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
  • Loading branch information
fabpot committed Jul 18, 2018
2 parents 5362ff3 + 944c53f commit ce73293
Show file tree
Hide file tree
Showing 5 changed files with 379 additions and 118 deletions.
Expand Up @@ -4,8 +4,8 @@

{% if colors is not defined %}
{% set colors = {
'default': '#999',
'section': '#444',
'default': '#777',
'section': '#999',
'event_listener': '#00B8F5',
'template': '#66CC00',
'doctrine': '#FF6633',
Expand Down Expand Up @@ -220,6 +220,11 @@
return query('#collector-content h2').clientWidth;
}
function getCssVarValue(varName)
{
return getComputedStyle(document.querySelector('body')).getPropertyValue(varName);
}
/**
* Draw one canvas.
*
Expand Down Expand Up @@ -272,7 +277,11 @@
ctx.lineWidth = 0;
// For each event, draw a line.
ctx.strokeStyle = "#CCC";
ctx.strokeStyle = getCssVarValue('--table-border');
// set the background color of the canvas
ctx.fillStyle = getCssVarValue('--table-background');
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawableEvents.forEach(function(event) {
event.periods.forEach(function(period) {
Expand Down Expand Up @@ -379,31 +388,31 @@
// For each event, draw the label.
mainEvents.forEach(function(event) {
ctx.fillStyle = "#444";
ctx.fillStyle = getCssVarValue('--color-text');
ctx.font = "12px sans-serif";
text = event.name;
ms = " " + (event.duration < 1 ? event.duration : parseInt(event.duration, 10)) + " ms / " + event.memory + " MB";
if (x + event.starttime * ratio + ctx.measureText(text + ms).width > width) {
ctx.textAlign = "end";
ctx.font = "10px sans-serif";
ctx.fillStyle = "#777";
ctx.fillStyle = getCssVarValue('--color-muted');
xc = x + event.endtime * ratio - 1;
ctx.fillText(ms, xc, h);
xc -= ctx.measureText(ms).width;
ctx.font = "12px sans-serif";
ctx.fillStyle = "#222";
ctx.fillStyle = getCssVarValue('--color-text');
ctx.fillText(text, xc, h);
} else {
ctx.textAlign = "start";
ctx.font = "13px sans-serif";
ctx.fillStyle = "#222";
ctx.fillStyle = getCssVarValue('--color-text');
xc = x + event.starttime * ratio + 1;
ctx.fillText(text, xc, h);
xc += ctx.measureText(text).width;
ctx.font = "11px sans-serif";
ctx.fillStyle = "#777";
ctx.fillStyle = getCssVarValue('--color-muted');
ctx.fillText(ms, xc, h);
}
Expand Down
Expand Up @@ -14,6 +14,10 @@
{% endblock %}
</head>
<body>
<script async>
document.body.classList.add(localStorage.getItem('symfony/profiler/theme'), localStorage.getItem('symfony/profiler/width'));
</script>

{% block body '' %}
</body>
</html>
Expand Up @@ -126,6 +126,8 @@
{% endfor %}
</ul>
{% endif %}

{{ include('@WebProfiler/Profiler/settings.html.twig') }}
</div>

<div id="collector-wrapper">
Expand All @@ -142,6 +144,6 @@
event.preventDefault();
Sfjs.toggleClass(document.getElementById('sidebar'), 'expanded');
})
}())
}());
</script>
{% endblock %}

0 comments on commit ce73293

Please sign in to comment.