Allow to configure some options of the profiler interface
This commit is contained in:
Javier Eguiluz
Fabien Potencier
parent
6064cfe016
commit
944c53fb0e
@ -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',
|
||||
@ -220,6 +220,11 @@
|
||||
return query('#collector-content h2').clientWidth;
|
||||
}
|
||||
|
||||
function getCssVarValue(varName)
|
||||
{
|
||||
return getComputedStyle(document.querySelector('body')).getPropertyValue(varName);
|
||||
}
|
||||
|
||||
/**
|
||||
* Draw one canvas.
|
||||
*
|
||||
@ -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) {
|
||||
@ -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);
|
||||
}
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -126,6 +126,8 @@
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{{ include('@WebProfiler/Profiler/settings.html.twig') }}
|
||||
</div>
|
||||
|
||||
<div id="collector-wrapper">
|
||||
@ -142,6 +144,6 @@
|
||||
event.preventDefault();
|
||||
Sfjs.toggleClass(document.getElementById('sidebar'), 'expanded');
|
||||
})
|
||||
}())
|
||||
}());
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,19 +1,72 @@
|
||||
{# Mixins
|
||||
========================================================================= #}
|
||||
{% set mixins = {
|
||||
'break_long_words': '-ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;',
|
||||
'monospace_font': 'font-family: monospace; font-size: 13px; font-size-adjust: 0.5;',
|
||||
'sans_serif_font': 'font-family: Helvetica, Arial, sans-serif;',
|
||||
'subtle_border_and_shadow': 'background: #FFF; border: 1px solid #E0E0E0; box-shadow: 0px 0px 1px rgba(128, 128, 128, .2);'
|
||||
} %}
|
||||
|
||||
{# when updating any of these colors, do the same in toolbar.css.twig #}
|
||||
{% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %}
|
||||
|
||||
{# Normalization
|
||||
(normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css)
|
||||
========================================================================= #}
|
||||
html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}
|
||||
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{margin:0;font:inherit;color:inherit}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-spacing:0;border-collapse:collapse}td,th{padding:0}
|
||||
|
||||
:root {
|
||||
--font-sans-serif: 'Helvetica, Arial, sans-serif';
|
||||
--page-background: #f9f9f9;
|
||||
--color-text: #222;
|
||||
--color-muted: #777;
|
||||
/* when updating any of these colors, do the same in toolbar.css.twig */
|
||||
--color-success: #4f805d;
|
||||
--color-warning: #a46a1f;
|
||||
--color-error: #b0413e;
|
||||
--tab-background: #fff;
|
||||
--tab-color: #444;
|
||||
--tab-active-background: #666;
|
||||
--tab-active-color: #fafafa;
|
||||
--tab-disabled-background: #f5f5f5;
|
||||
--tab-disabled-color: #999;
|
||||
--metric-value-background: #fff;
|
||||
--metric-value-color: inherit;
|
||||
--metric-unit-color: #999;
|
||||
--metric-label-background: #e0e0e0;
|
||||
--metric-label-color: inherit;
|
||||
--table-border: #e0e0e0;
|
||||
--table-background: #fff;
|
||||
--table-header: #e0e0e0;
|
||||
--shadow: 0px 0px 1px rgba(128, 128, 128, .2);
|
||||
--border: 1px solid #e0e0e0;
|
||||
--color-muted: #999;
|
||||
--base-0: #fff;
|
||||
--base-1: #f5f5f5;
|
||||
--base-2: #e0e0e0;
|
||||
--base-3: #ccc;
|
||||
--base-4: #666;
|
||||
--base-5: #444;
|
||||
--base-6: #222;
|
||||
}
|
||||
|
||||
.theme-dark {
|
||||
--page-background: #36393e;
|
||||
--color-text: #e0e0e0;
|
||||
--color-muted: #999;
|
||||
--tab-background: #555;
|
||||
--tab-color: #ccc;
|
||||
--tab-active-background: #888;
|
||||
--tab-active-color: #fafafa;
|
||||
--tab-disabled-background: var(--page-background);
|
||||
--tab-disabled-color: #777;
|
||||
--metric-value-background: #555;
|
||||
--metric-value-color: inherit;
|
||||
--metric-unit-color: #999;
|
||||
--metric-label-background: #777;
|
||||
--metric-label-color: #e0e0e0;
|
||||
--table-border: #444;
|
||||
--table-background: #333;
|
||||
--table-header: #555;
|
||||
--shadow: 0px 0px 1px rgba(32, 32, 32, .2);
|
||||
--border: 1px solid #666;
|
||||
--color-muted: #777;
|
||||
--base-0: #2e3136;
|
||||
--base-1: #444;
|
||||
--base-2: #666;
|
||||
--base-3: #666;
|
||||
--base-4: #666;
|
||||
--base-5: #e0e0e0;
|
||||
--base-6: #f5f5f5;
|
||||
}
|
||||
|
||||
{# Basic styles
|
||||
========================================================================= #}
|
||||
@ -22,11 +75,11 @@ html, body {
|
||||
width: 100%;
|
||||
}
|
||||
body {
|
||||
background-color: #F9F9F9;
|
||||
color: #222;
|
||||
background-color: var(--page-background);
|
||||
color: var(--base-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
{{ mixins.sans_serif_font|raw }}
|
||||
font_family: var(--font-sans-serif);
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
@ -50,7 +103,7 @@ h4 {
|
||||
}
|
||||
h2 span, h3 span, h4 span,
|
||||
h2 small, h3 small, h4 small {
|
||||
color: #999;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
|
||||
li {
|
||||
@ -91,24 +144,25 @@ h4 a:hover {
|
||||
}
|
||||
|
||||
abbr {
|
||||
border-bottom: 1px dotted #444;
|
||||
border-bottom: 1px dotted var(--base-5);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
code, pre {
|
||||
{{ mixins.monospace_font|raw }}
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
{# Buttons
|
||||
{# Buttons (the colors of this element don't change based on the selected theme)
|
||||
------------------------------------------------------------------------- #}
|
||||
button {
|
||||
{{ mixins.sans_serif_font|raw }}
|
||||
font_family: var(--font-sans-serif);
|
||||
}
|
||||
.btn {
|
||||
background: #777;
|
||||
border-radius: 2px;
|
||||
border: 0;
|
||||
color: #F5F5F5;
|
||||
color: #f5f5f5;
|
||||
display: inline-block;
|
||||
padding: .5em .75em;
|
||||
}
|
||||
@ -141,13 +195,15 @@ button {
|
||||
{# Tables
|
||||
------------------------------------------------------------------------- #}
|
||||
table, tr, th, td {
|
||||
background: #FFF;
|
||||
background: var(--table-background);
|
||||
border-collapse: collapse;
|
||||
line-height: 1.5;
|
||||
vertical-align: top;
|
||||
}
|
||||
table {
|
||||
{{ mixins.subtle_border_and_shadow|raw }};
|
||||
background: var(--base-0);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
margin: 1em 0;
|
||||
width: 100%;
|
||||
}
|
||||
@ -161,7 +217,7 @@ table th {
|
||||
text-align: left;
|
||||
}
|
||||
table thead th {
|
||||
background-color: #E0E0E0;
|
||||
background-color: var(--table-header);
|
||||
}
|
||||
table thead th.key {
|
||||
width: 19%;
|
||||
@ -173,9 +229,10 @@ table thead.small th {
|
||||
|
||||
table tbody th,
|
||||
table tbody td {
|
||||
{{ mixins.monospace_font|raw }}
|
||||
border: 1px solid #E0E0E0;
|
||||
border: 1px solid var(--base-2);
|
||||
border-width: 1px 0;
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
table tbody div {
|
||||
@ -207,16 +264,21 @@ table tbody ul {
|
||||
display: block;
|
||||
}
|
||||
.break-long-words {
|
||||
{{ mixins.break_long_words|raw }}
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
.text-small {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
.text-muted {
|
||||
color: #999;
|
||||
color: var(--color-muted);
|
||||
}
|
||||
.text-danger {
|
||||
color: {{ colors.error|raw }};
|
||||
color: var(--color-error);
|
||||
}
|
||||
.text-bold {
|
||||
font-weight: bold;
|
||||
@ -228,23 +290,23 @@ table tbody ul {
|
||||
text-align: center;
|
||||
}
|
||||
.font-normal {
|
||||
{{ mixins.sans_serif_font|raw }}
|
||||
font_family: var(--font-sans-serif);
|
||||
font-size: 14px;
|
||||
}
|
||||
.help {
|
||||
color: #999;
|
||||
color: var(--color-muted);
|
||||
font-size: 14px;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
.empty {
|
||||
border: 4px dashed #E0E0E0;
|
||||
color: #999;
|
||||
border: 4px dashed var(--base-2);
|
||||
color: var(--color-muted);
|
||||
margin: 1em 0;
|
||||
padding: .5em 2em;
|
||||
}
|
||||
|
||||
.label {
|
||||
background-color: #666;
|
||||
background-color: var(--base-4);
|
||||
color: #FAFAFA;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
@ -256,9 +318,9 @@ table tbody ul {
|
||||
min-width: 70px;
|
||||
text-align: center;
|
||||
}
|
||||
.label.status-success { background: {{ colors.success|raw }}; color: #FFF; }
|
||||
.label.status-warning { background: {{ colors.warning|raw }}; color: #FFF; }
|
||||
.label.status-error { background: {{ colors.error|raw }}; color: #FFF; }
|
||||
.label.status-success { background: var(--color-success); color: #FFF; }
|
||||
.label.status-warning { background: var(--color-warning); color: #FFF; }
|
||||
.label.status-error { background: var(--color-error); color: #FFF; }
|
||||
|
||||
{# Metrics
|
||||
------------------------------------------------------------------------- #}
|
||||
@ -272,7 +334,10 @@ table tbody ul {
|
||||
}
|
||||
|
||||
.metric {
|
||||
{{ mixins.subtle_border_and_shadow|raw }};
|
||||
background: var(--metric-value-background);
|
||||
border: 1px solid var(--table-border);
|
||||
box-shadow: var(--shadow);
|
||||
color: var(--metric-value-color);
|
||||
min-width: 100px;
|
||||
min-height: 70px;
|
||||
}
|
||||
@ -286,13 +351,13 @@ table tbody ul {
|
||||
margin: 5px 0 -5px;
|
||||
}
|
||||
.metric .unit {
|
||||
color: #999;
|
||||
color: var(--metric-unit-color);
|
||||
font-size: 18px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
.metric .label {
|
||||
background: #E0E0E0;
|
||||
color: #222;
|
||||
background: var(--metric-label-background);
|
||||
color: var(--metric-label-color);
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
@ -332,12 +397,14 @@ table tbody ul {
|
||||
{# Cards
|
||||
------------------------------------------------------------------------- #}
|
||||
.card {
|
||||
{{ mixins.subtle_border_and_shadow|raw }};
|
||||
background: var(--base-0);
|
||||
border: var(--border);
|
||||
box-shadow: var(--shadow);
|
||||
margin: 1em 0;
|
||||
padding: 10px;
|
||||
}
|
||||
.card-block + .card-block {
|
||||
border-top: 1px solid #E0E0E0;
|
||||
border-top: 1px solid var(--base-2);
|
||||
padding-top: 10px;
|
||||
}
|
||||
.card *:first-child,
|
||||
@ -346,7 +413,7 @@ table tbody ul {
|
||||
}
|
||||
.card .label {
|
||||
background-color: #EEE;
|
||||
color: #222;
|
||||
color: var(--base-6);
|
||||
}
|
||||
|
||||
{# Status
|
||||
@ -372,10 +439,10 @@ tr.status-warning td {
|
||||
}
|
||||
|
||||
.status-warning .colored {
|
||||
color: {{ colors.warning|raw }};
|
||||
color: var(--color-warning);
|
||||
}
|
||||
.status-error .colored {
|
||||
color: {{ colors.error|raw }};
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
{# Syntax highlighting
|
||||
@ -462,14 +529,14 @@ tr.status-warning td {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
{# Header
|
||||
{# Header (the colors of this element don't change based on the selected theme)
|
||||
========================================================================= #}
|
||||
#header {
|
||||
background-color: #222;
|
||||
overflow: hidden;
|
||||
}
|
||||
#header h1 {
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
font-weight: normal;
|
||||
font-size: 21px;
|
||||
@ -477,7 +544,7 @@ tr.status-warning td {
|
||||
padding: 10px 10px 8px;
|
||||
}
|
||||
#header h1 span {
|
||||
color: #CCC;
|
||||
color: #ccc;
|
||||
}
|
||||
#header h1 svg {
|
||||
height: 40px;
|
||||
@ -487,13 +554,13 @@ tr.status-warning td {
|
||||
}
|
||||
#header h1 svg path,
|
||||
#header h1 svg .sf-svg-path {
|
||||
fill: #FFF;
|
||||
fill: #fff;
|
||||
}
|
||||
#header .search {
|
||||
padding-top: 11px;
|
||||
}
|
||||
#header .search input {
|
||||
border: 1px solid #DDD;
|
||||
border: 1px solid #ddd;
|
||||
margin-right: 4px;
|
||||
padding: 7px 8px;
|
||||
width: 200px;
|
||||
@ -502,14 +569,14 @@ tr.status-warning td {
|
||||
{# Summary
|
||||
========================================================================= #}
|
||||
#summary .status {
|
||||
background: #E0E0E0;
|
||||
background: var(--base-2);
|
||||
border: solid rgba(0, 0, 0, 0.1);
|
||||
border-width: 2px 0;
|
||||
padding: 10px;
|
||||
}
|
||||
#summary h2,
|
||||
#summary h2 a {
|
||||
color: #222;
|
||||
color: var(--base-6);
|
||||
font-size: 21px;
|
||||
margin: 0;
|
||||
text-decoration: none;
|
||||
@ -518,9 +585,9 @@ tr.status-warning td {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
#summary .status-success { background: {{ colors.success|raw }}; }
|
||||
#summary .status-warning { background: {{ colors.warning|raw }}; }
|
||||
#summary .status-error { background: {{ colors.error|raw }}; }
|
||||
#summary .status-success { background: var(--color-success); }
|
||||
#summary .status-warning { background: var(--color-warning); }
|
||||
#summary .status-error { background: var(--color-error); }
|
||||
|
||||
#summary .status-success h2,
|
||||
#summary .status-success a,
|
||||
@ -559,7 +626,7 @@ tr.status-warning td {
|
||||
========================================================================= #}
|
||||
#sidebar {
|
||||
background: #444;
|
||||
color: #CCC;
|
||||
color: #ccc;
|
||||
padding-bottom: 30px;
|
||||
position: relative;
|
||||
width: 220px;
|
||||
@ -588,7 +655,7 @@ tr.status-warning td {
|
||||
text-align: center;
|
||||
}
|
||||
#sidebar #sidebar-shortcuts .btn {
|
||||
color: #F5F5F5;
|
||||
color: #f5f5f5;
|
||||
}
|
||||
#sidebar #sidebar-shortcuts .btn + .btn {
|
||||
margin-left: 5px;
|
||||
@ -597,7 +664,7 @@ tr.status-warning td {
|
||||
padding: .5em;
|
||||
}
|
||||
|
||||
{# Sidebar Search
|
||||
{# Sidebar Search (the colors of this element don't change based on the selected theme)
|
||||
------------------------------------------------------------------------- #}
|
||||
#sidebar-search .form-group:first-of-type {
|
||||
padding-top: 20px;
|
||||
@ -620,7 +687,7 @@ tr.status-warning td {
|
||||
padding: 3px 6px;
|
||||
}
|
||||
#sidebar-search .form-group input {
|
||||
background: #CCC;
|
||||
background: #ccc;
|
||||
border: 1px solid #999;
|
||||
color: #222;
|
||||
width: 120px;
|
||||
@ -633,7 +700,7 @@ tr.status-warning td {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
{# Sidebar Menu
|
||||
{# Sidebar Menu (the colors of this element don't change based on the selected theme)
|
||||
------------------------------------------------------------------------- #}
|
||||
#menu-profiler {
|
||||
margin: 0;
|
||||
@ -647,7 +714,7 @@ tr.status-warning td {
|
||||
#menu-profiler li a {
|
||||
border: solid transparent;
|
||||
border-width: 2px 0;
|
||||
color: #CCC;
|
||||
color: var(--base-3);
|
||||
display: block;
|
||||
}
|
||||
#menu-profiler li a:hover {
|
||||
@ -705,12 +772,12 @@ tr.status-warning td {
|
||||
#menu-profiler li.selected a .icon svg .sf-svg-path,
|
||||
#menu-profiler li a:hover .icon svg path,
|
||||
#menu-profiler li a:hover .icon svg .sf-svg-path {
|
||||
fill: #FFF;
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
#menu-profiler li a .count {
|
||||
background-color: #666;
|
||||
color: #FFF;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
min-width: 10px;
|
||||
@ -731,16 +798,17 @@ tr.status-warning td {
|
||||
}
|
||||
|
||||
#menu-profiler .label-status-warning .count {
|
||||
background: {{ colors.warning|raw }};
|
||||
background: var(--color-warning);
|
||||
}
|
||||
#menu-profiler .label-status-error .count {
|
||||
background: {{ colors.error|raw }};
|
||||
background: var(--color-error);
|
||||
}
|
||||
|
||||
{# Timeline panel
|
||||
========================================================================= #}
|
||||
#timeline-control {
|
||||
background: #FFF;
|
||||
background: var(--table-background);
|
||||
box-shadow: var(--shadow);
|
||||
margin: 1em 0;
|
||||
padding: 10px;
|
||||
}
|
||||
@ -749,6 +817,8 @@ tr.status-warning td {
|
||||
margin-right: 1em;
|
||||
}
|
||||
#timeline-control input {
|
||||
background: var(--metric-value-background);
|
||||
border: 1px solid var(--table-border);
|
||||
font-size: 16px;
|
||||
padding: 4px;
|
||||
text-align: right;
|
||||
@ -767,8 +837,8 @@ tr.status-warning td {
|
||||
padding: 0 10px 0 5px;
|
||||
}
|
||||
.sf-profiler-timeline canvas {
|
||||
border: 1px solid #DDD;
|
||||
background: #FFF;
|
||||
border: 1px solid var(--table-border);
|
||||
background: var(--page-background);
|
||||
margin: .5em 0;
|
||||
}
|
||||
.sf-profiler-timeline + p.help {
|
||||
@ -782,9 +852,9 @@ tr.status-warning td {
|
||||
padding: 0;
|
||||
}
|
||||
.tab-navigation li {
|
||||
background: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
color: #444;
|
||||
background: var(--tab-background);
|
||||
border: 1px solid var(--table-border);
|
||||
color: var(--tab-color);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
@ -792,12 +862,9 @@ tr.status-warning td {
|
||||
padding: .5em .75em;
|
||||
z-index: 1;
|
||||
}
|
||||
.tab-navigation li:hover {
|
||||
background: #EEE;
|
||||
}
|
||||
.tab-navigation li .badge {
|
||||
background-color: #F5F5F5;
|
||||
color: #777;
|
||||
background-color: var(--base-1);
|
||||
color: var(--base-4);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
@ -807,29 +874,24 @@ tr.status-warning td {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.tab-navigation li:hover .badge {
|
||||
background: #FAFAFA;
|
||||
color: #777;
|
||||
}
|
||||
.tab-navigation li.disabled {
|
||||
background: #F5F5F5;
|
||||
color: #999;
|
||||
background: var(--tab-disabled-background);
|
||||
color: var(--tab-disabled-color);
|
||||
}
|
||||
.tab-navigation li.active {
|
||||
background: #666;
|
||||
border-color: #666;
|
||||
color: #FAFAFA;
|
||||
background: var(--tab-active-background);
|
||||
color: var(--tab-active-color);
|
||||
z-index: 1100;
|
||||
}
|
||||
.tab-navigation li.active .badge {
|
||||
background-color: #444;
|
||||
color: #FFF;
|
||||
background-color: var(--base-5);
|
||||
color: var(--base-2);
|
||||
}
|
||||
.tab-content > *:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.tab-navigation li .badge.status-warning { background: {{ colors.warning|raw }}; color: #FFF; }
|
||||
.tab-navigation li .badge.status-error { background: {{ colors.error|raw }}; color: #FFF; }
|
||||
.tab-navigation li .badge.status-warning { background: var(--color-warning); color: #FFF; }
|
||||
.tab-navigation li .badge.status-error { background: var(--color-error); color: #FFF; }
|
||||
|
||||
.sf-tabs .tab:not(:first-child) { display: none; }
|
||||
|
||||
@ -871,7 +933,7 @@ table.logs .metadata {
|
||||
{# Doctrine panel
|
||||
========================================================================= #}
|
||||
.sql-runnable {
|
||||
background: #F5F5F5;
|
||||
background: var(--base-1);
|
||||
margin: .5em 0;
|
||||
padding: 1em;
|
||||
}
|
||||
@ -883,9 +945,14 @@ table.logs .metadata {
|
||||
word-break: normal;
|
||||
}
|
||||
.queries-table pre {
|
||||
{{ mixins.break_long_words|raw }}
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
-ms-word-break: break-all;
|
||||
word-break: break-all;
|
||||
word-break: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
}
|
||||
|
||||
{# Validator panel
|
||||
@ -937,13 +1004,18 @@ table.logs .metadata {
|
||||
|
||||
{# Dump panel
|
||||
========================================================================= #}
|
||||
pre.sf-dump, pre.sf-dump .sf-dump-default {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
|
||||
#collector-content .sf-dump {
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
#collector-content pre.sf-dump,
|
||||
#collector-content .sf-dump code,
|
||||
#collector-content .sf-dump samp {
|
||||
{{ mixins.monospace_font|raw }}
|
||||
font-family: monospace;
|
||||
font-size: 13px;
|
||||
}
|
||||
#collector-content .sf-dump a {
|
||||
cursor: pointer;
|
||||
@ -951,7 +1023,6 @@ table.logs .metadata {
|
||||
#collector-content .sf-dump pre.sf-dump,
|
||||
#collector-content .sf-dump .trace {
|
||||
border: 1px solid #DDD;
|
||||
background: #FFF;
|
||||
padding: 10px;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
@ -959,18 +1030,9 @@ table.logs .metadata {
|
||||
|
||||
#collector-content pre.sf-dump,
|
||||
#collector-content .sf-dump-default {
|
||||
color: #CC7832;
|
||||
background: none;
|
||||
}
|
||||
#collector-content .sf-dump-str { color: #629755; }
|
||||
#collector-content .sf-dump-private,
|
||||
#collector-content .sf-dump-protected,
|
||||
#collector-content .sf-dump-public { color: #262626; }
|
||||
#collector-content .sf-dump-note { color: #6897BB; }
|
||||
#collector-content .sf-dump-key { color: #789339; }
|
||||
#collector-content .sf-dump-ref { color: #6E6E6E; }
|
||||
#collector-content .sf-dump-ellipsis { color: #CC7832; max-width: 100em; }
|
||||
#collector-content .sf-dump-ellipsis-path { max-width: 5em; }
|
||||
#collector-content .sf-dump-ellipsis { max-width: 100em; }
|
||||
|
||||
#collector-content .sf-dump {
|
||||
margin: 0;
|
||||
@ -995,14 +1057,11 @@ table.logs .metadata {
|
||||
margin-bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#collector-content .sf-dump .trace li.selected {
|
||||
background: rgba(255, 255, 153, 0.5);
|
||||
}
|
||||
|
||||
{# Search Results page
|
||||
========================================================================= #}
|
||||
#search-results td {
|
||||
{{ mixins.sans_serif_font|raw }}
|
||||
font_family: var(--font-sans-serif);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -1071,3 +1130,30 @@ table.logs .metadata {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
{# Config Options
|
||||
========================================================================= #}
|
||||
body.width-full .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
body.theme-light #collector-content .sf-dump pre.sf-dump,
|
||||
body.theme-light #collector-content .sf-dump .trace {
|
||||
background: #FFF;
|
||||
}
|
||||
body.theme-light #collector-content pre.sf-dump,
|
||||
body.theme-light #collector-content .sf-dump-default {
|
||||
color: #CC7832;
|
||||
}
|
||||
body.theme-light #collector-content .sf-dump-str { color: #629755; }
|
||||
body.theme-light #collector-content .sf-dump-private,
|
||||
body.theme-light #collector-content .sf-dump-protected,
|
||||
body.theme-light #collector-content .sf-dump-public { color: #262626; }
|
||||
body.theme-light #collector-content .sf-dump-note { color: #6897BB; }
|
||||
body.theme-light #collector-content .sf-dump-key { color: #789339; }
|
||||
body.theme-light #collector-content .sf-dump-ref { color: #6E6E6E; }
|
||||
body.theme-light #collector-content .sf-dump-ellipsis { color: #CC7832; max-width: 100em; }
|
||||
body.theme-light #collector-content .sf-dump-ellipsis-path { max-width: 5em; }
|
||||
body.theme-light #collector-content .sf-dump .trace li.selected {
|
||||
background: rgba(255, 255, 153, 0.5);
|
||||
}
|
||||
|
||||
@ -0,0 +1,160 @@
|
||||
<style>
|
||||
#open-settings {
|
||||
color: var(--text-muted);
|
||||
display: block;
|
||||
margin: 15px 15px 5px;
|
||||
}
|
||||
|
||||
.modal-wrap {
|
||||
-webkit-transition: all 0.3s ease-in-out;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
height: 100%;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
overflow: auto;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
transition: all 0.3s ease-in-out;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
z-index: 100000;
|
||||
}
|
||||
.modal-wrap.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
.modal-wrap .modal-container {
|
||||
box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
|
||||
color: var(--base-6);
|
||||
margin: 1em;
|
||||
max-width: 94%;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.modal-wrap .modal-header {
|
||||
align-items: center;
|
||||
background: var(--table-header);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 15px 30px;
|
||||
}
|
||||
.modal-wrap .modal-header h3 {
|
||||
color: var(--base-6);
|
||||
margin: 0;
|
||||
}
|
||||
.modal-wrap .modal-header .close-modal {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--base-4);
|
||||
cursor: pointer;
|
||||
font-size: 28px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-wrap .modal-header .close-modal:hover { opacity: 1; }
|
||||
|
||||
.modal-wrap .modal-content {
|
||||
background: var(--base-1);
|
||||
margin: 0;
|
||||
padding: 15px 30px;
|
||||
width: 100%;
|
||||
z-index: 100000;
|
||||
}
|
||||
.modal-content h4 {
|
||||
border-bottom: var(--border);
|
||||
margin: 0 0 15px;
|
||||
padding: 0 0 5px;
|
||||
}
|
||||
.modal-content input, .modal-content .form-help {
|
||||
margin-left: 15px;
|
||||
}
|
||||
.modal-content label {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
.modal-content .form-help {
|
||||
color: var(--color-muted);
|
||||
font-size: 14px;
|
||||
margin: 5px 0 15px 33px;
|
||||
}
|
||||
.modal-content .form-help + h4 {
|
||||
margin-top: 45px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<a href="#" id="open-settings" data-triger="profiler-settings">Settings</a>
|
||||
|
||||
<div class="modal-wrap" id="profiler-settings">
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<h3>Configuration Settings</h3>
|
||||
<button class="close-modal">×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-content">
|
||||
<h4>Theme</h4>
|
||||
|
||||
<input class="config-option" type="radio" name="theme" value="light" id="settings-theme-light">
|
||||
<label for="settings-theme-light">Light</label>
|
||||
<p class="form-help">Default theme. Improves readability.</p>
|
||||
|
||||
<input class="config-option" type="radio" name="theme" value="dark" id="settings-theme-dark">
|
||||
<label for="settings-theme-dark">Dark</label>
|
||||
<p class="form-help">Reduces eye fatigue. Ideal for low light conditions.</p>
|
||||
|
||||
<h4>Page Width</h4>
|
||||
|
||||
<input class="config-option" type="radio" name="width" value="light" id="settings-width-normal">
|
||||
<label for="settings-width-normal">Normal</label>
|
||||
<p class="form-help">Fixed page width. Improves readability.</p>
|
||||
|
||||
<input class="config-option" type="radio" name="width" value="dark" id="settings-width-full">
|
||||
<label for="settings-width-full">Full-page</label>
|
||||
<p class="form-help">Dynamic page width. As wide as the browser window.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
(function() {
|
||||
let configOptions = document.querySelectorAll('.config-option');
|
||||
let oppositeValues = { 'light': 'dark', 'dark': 'light', 'normal': 'full', 'full': 'normal' };
|
||||
[...configOptions].forEach(option => {
|
||||
option.addEventListener('click', function (event) {
|
||||
let optionParts = option.id.split('-');
|
||||
let optionName = optionParts[1];
|
||||
let optionValue = optionParts[2];
|
||||
|
||||
document.body.classList.remove(optionName + '-' + oppositeValues[optionValue]);
|
||||
document.body.classList.add(optionName + '-' + optionValue);
|
||||
localStorage.setItem('symfony/profiler/' + optionName, optionName + '-' + optionValue);
|
||||
});
|
||||
});
|
||||
|
||||
let openModalButton = document.getElementById('open-settings');
|
||||
let modalWindow = document.getElementById('profiler-settings');
|
||||
let closeModalButton = document.getElementsByClassName('close-modal')[0];
|
||||
let modalWrapper = document.getElementsByClassName('modal-wrap')[0]
|
||||
|
||||
openModalButton.addEventListener('click', function(event) {
|
||||
document.getElementById('settings-' + localStorage.getItem('symfony/profiler/theme')).checked = 'checked';
|
||||
document.getElementById('settings-' + localStorage.getItem('symfony/profiler/width')).checked = 'checked';
|
||||
|
||||
modalWindow.classList.toggle('visible');
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
closeModalButton.addEventListener('click', function() {
|
||||
modalWindow.classList.remove('visible');
|
||||
});
|
||||
modalWrapper.addEventListener('click', function(event) {
|
||||
if (event.target == event.currentTarget) {
|
||||
modalWindow.classList.remove('visible');
|
||||
}
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
Reference in New Issue
Block a user