diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig index 08babc2ea0..4b66f4589a 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/config.html.twig @@ -19,17 +19,15 @@ {% endif %} {% set icon %} - {% if collector.symfonyState is defined %} - - - {{ include('@WebProfiler/Icon/symfony.svg.twig') }} - - {{ collector.symfonyversion }} - - {% elseif collector.applicationname %} - {{ collector.applicationname }} - {{ collector.applicationversion }} - {% endif %} + {% if collector.symfonyState is defined %} + + {{ include('@WebProfiler/Icon/symfony.svg.twig') }} + + {{ collector.symfonyversion }} + {% elseif collector.applicationname %} + {{ collector.applicationname }} + {{ collector.applicationversion }} + {% endif %} {% endset %} {% set text %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig index b101596843..5dd2269747 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/memory.html.twig @@ -3,10 +3,9 @@ {% block toolbar %} {% set icon %} {% set status_color = (collector.memory / 1024 / 1024) > 50 ? 'yellow' : '' %} - - {{ '%.1f'|format(collector.memory / 1024 / 1024) }} - MB - + {{ include('@WebProfiler/Icon/memory.svg.twig') }} + {{ '%.1f'|format(collector.memory / 1024 / 1024) }} + MB {% endset %} {% set text %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig index 1d0d805c43..25cecdc201 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/request.html.twig @@ -1,24 +1,22 @@ {% extends '@WebProfiler/Profiler/layout.html.twig' %} {% block toolbar %} + + {% set request_handler %} {% if collector.controller.class is defined %} {% set link = collector.controller.file|file_link(collector.controller.line) %} - {% if link %}{% endif %} + {% if link %}{% else %}{% endif %} - - {{ collector.controller.class|abbr_class }} - + {{ collector.controller.class|abbr_class|striptags }} - {% if collector.controller.method %} - - {{ collector.controller.method }} - - {% endif %} + {%- if collector.controller.method -%} +  :: {{ collector.controller.method }} + {%- endif -%} - {% if link %}{% endif %} + {% if link %}{% else %}{% endif %} {% else %} - {{ collector.controller }} + {{ collector.controller }} {% endif %} {% endset %} @@ -26,8 +24,10 @@ {% set icon %} {{ collector.statuscode }} - @ - {{ collector.route }} + {% if collector.route %} + @ + {{ collector.route }} + {% endif %} {% endset %} {% set text %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig index 558a155bdb..8b5330df6b 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.html.twig @@ -21,6 +21,7 @@ {% set status_color = collector.events|length ? collector.duration > 1000 ? 'yellow' : '' %} {% set icon %} + {{ include('@WebProfiler/Icon/time.svg.twig') }} {{ total_time }} ms {% endset %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/form.svg.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/form.svg.twig new file mode 100644 index 0000000000..07bd665507 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/form.svg.twig @@ -0,0 +1 @@ + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/logger.svg.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/logger.svg.twig new file mode 100644 index 0000000000..b29b2071d4 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/logger.svg.twig @@ -0,0 +1 @@ + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/memory.svg.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/memory.svg.twig new file mode 100644 index 0000000000..90b195a521 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/memory.svg.twig @@ -0,0 +1 @@ + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg.twig index da9802c388..d4136c0958 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/symfony.svg.twig @@ -1 +1 @@ - + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/time.svg.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/time.svg.twig new file mode 100644 index 0000000000..65f3671084 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Icon/time.svg.twig @@ -0,0 +1 @@ + diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig index 03a242b627..d0f51c42d2 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base_js.html.twig @@ -180,12 +180,10 @@ requestCounter[0].className = className; var ajaxToolbarPanel = document.querySelectorAll('.sf-toolbar-block-ajax'); - if (state == 'ok') { - ajaxToolbarPanel.className = 'sf-toolbar-status-green'; - } else if (state == 'error') { - ajaxToolbarPanel.className = 'sf-toolbar-status-red'; + if (state == 'error') { + Sfjs.addClass(ajaxToolbarPanel[0], 'sf-toolbar-status-red'); } else { - ajaxToolbarPanel.className = 'sf-ajax-request-loading'; + Sfjs.addClass(ajaxToolbarPanel[0], 'sf-ajax-request-loading'); } }; diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig index de56ad35db..975ed9639f 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig @@ -1,15 +1,12 @@ .sf-minitoolbar { - display: none; - - position: fixed; - bottom: 0; - right: 0; - - padding: 5px 5px 0; - background-color: #222; - - z-index: 6000000; + bottom: 0; + display: none; + height: 36px; + padding: 5px 6px 0; + position: fixed; + right: 0; + z-index: 9999; } .sf-toolbarreset * { @@ -21,8 +18,8 @@ .sf-toolbarreset { background-color: #222; - box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2); bottom: 0; + box-shadow: 0 -1px 0px rgba(0, 0, 0, 0.2); color: #EEE; font: 11px Arial, sans-serif; height: 36px; @@ -32,30 +29,16 @@ position: fixed; right: 0; text-align: left; - z-index: 6000000; + z-index: 9999; } .sf-toolbarreset abbr { border: none; cursor: text; } -.sf-toolbarreset img { - width: auto; - display: inline; -} .sf-toolbarreset svg, .sf-toolbarreset img { max-height: 24px; } -.sf-toolbarreset table { - border-collapse: collapse; - border-spacing: 0; - background-color: #000; - margin: 0; - padding: 0; - border: 0; - width: 100%; - table-layout: auto; -} .sf-toolbarreset .hide-button { background: #444; cursor: pointer; @@ -78,20 +61,17 @@ cursor: default; display: block; float: left; - margin-right: 0px; + height: 36px; + margin-right: 0; white-space: nowrap; } -.sf-toolbar-block a, -.sf-toolbar-block a:hover { +.sf-toolbar-block > a, +.sf-toolbar-block > a:hover { + display: block; text-decoration: none; } -.sf-toolbar-block-config { - float: right; - margin-left: 0; - margin-right: 0; -} .sf-toolbar-block-config svg { - padding-right: 4px; + max-height: 22px; } .sf-toolbar-block span { @@ -103,25 +83,33 @@ line-height: 36px; padding: 0; } -.sf-toolbar-block .sf-toolbar-label { +.sf-toolbar-block .sf-toolbar-label, +.sf-toolbar-block .sf-toolbar-class-separator { color: #AAA; font-size: 12px; } -.sf-toolbar-block-config-php .sf-toolbar-label, -.sf-toolbar-block-config-symfony .sf-toolbar-label { - font-size: 11px; -} +/* TODO: remove it when Twig uses SVG icons */ .sf-toolbar-block-twig img { opacity: .8; } .sf-toolbar-block .sf-toolbar-info { + border-collapse: collapse; display: table; } +.sf-toolbar-block .sf-toolbar-info-piece-group { + border-top: 1px solid #777; + margin-top: 4px; + padding-top: 4px; +} .sf-toolbar-block .sf-toolbar-info-piece { + /* this 'border-bottom' trick is needed because 'margin-bottom' doesn't work for table rows */ + border-bottom: solid transparent 3px; display: table-row; - line-height: 1.4; - margin-bottom: 8px; +} +.sf-toolbar-block .sf-toolbar-info-piece-additional, +.sf-toolbar-block .sf-toolbar-info-piece-additional-detail { + display: none; } .sf-toolbar-block .sf-toolbar-info-piece .sf-toolbar-status { @@ -198,7 +186,7 @@ background-color: rgba(200, 43, 43, 0.8); } .sf-toolbar-block .sf-toolbar-status-yellow { - background-color: rgba(255, 158, 43, 0.8); + background-color: rgb(189, 132, 0); } .sf-toolbar-block.sf-toolbar-status-green { @@ -213,16 +201,21 @@ fill: #FFF; } .sf-toolbar-block.sf-toolbar-status-yellow { - background-color: rgba(255, 158, 43, 0.8); + background-color: rgb(189, 132, 0); color: #FFF; } .sf-toolbar-block-request .sf-toolbar-status { color: #FFF; font-size: 14px; - margin-right: 4px; max-height: 36px; - padding: 10px; + padding: 10px 7px; +} +.sf-toolbar-block-request .sf-toolbar-info-piece a { + text-decoration: none; +} +.sf-toolbar-block-request .sf-toolbar-info-piece a:hover { + text-decoration: underline; } .sf-toolbar-status-green .sf-toolbar-label, @@ -238,17 +231,23 @@ .sf-toolbar-block .sf-toolbar-icon { display: block; - padding: 0 10px; + height: 36px; + padding: 0 7px; } .sf-toolbar-block-request .sf-toolbar-icon { padding-left: 0; + padding-right: 0; } -.sf-toolbar-block .sf-toolbar-icon img, .sf-toolbar-block .sf-toolbar-icon svg { +.sf-toolbar-block .sf-toolbar-icon img, +.sf-toolbar-block .sf-toolbar-icon svg { border-width: 0; - vertical-align: middle; position: relative; - top: -1px; + top: 5px; +} +.sf-toolbar-block-translation .sf-toolbar-icon svg, +.sf-toolbar-block-config .sf-toolbar-icon svg { + top: 8px; } .sf-toolbar-block .sf-toolbar-icon img + span, @@ -256,27 +255,10 @@ margin-left: 4px; } -.sf-toolbar-block-time .sf-toolbar-icon { - padding-right: 5px; -} -.sf-toolbar-block-memory .sf-toolbar-icon { - padding-left: 5px; -} - .sf-toolbar-info-php-ext .sf-toolbar-status + .sf-toolbar-status { margin-left: 4px; } -.sf-toolbar-block a .sf-toolbar-info-piece-additional, -.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail { - display: inline-block; -} - -.sf-toolbar-block a .sf-toolbar-info-piece-additional:empty, -.sf-toolbar-block a .sf-toolbar-info-piece-additional-detail:empty { - display: none; -} - .sf-toolbar-block:hover { position: relative; } @@ -289,13 +271,7 @@ .sf-toolbar-block:hover .sf-toolbar-info { display: block; - min-width: -webkit-calc(100% + 2px); - min-width: calc(100% + 2px); - z-index: 10001; - box-sizing: border-box; - padding: 9px; - line-height: 1.5; - + padding: 8px; max-width: 480px; max-height: 480px; word-wrap: break-word; @@ -309,7 +285,6 @@ .sf-toolbar-ajax-requests { width: 100%; } - .sf-toolbar-ajax-requests td { background-color: #444; border-bottom: 1px solid #777; @@ -342,9 +317,6 @@ .sf-ajax-request-duration { text-align: right; } -.sf-ajax-request-error { - color: #a33 !important; -} .sf-ajax-request-loading { -webkit-animation: sf-blink .5s ease-in-out infinite; -o-animation: sf-blink .5s ease-in-out infinite; @@ -352,24 +324,24 @@ animation: sf-blink .5s ease-in-out infinite; } @-webkit-keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } @-moz-keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } @-o-keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } @keyframes sf-blink { - 0% { color: black; } - 50% { color: #bbb; } - 100% { color: black; } + 0% { background: #222; } + 50% { background: #444; } + 100% { background: #222; } } .sf-toolbar-block-dump pre.sf-dump { @@ -390,7 +362,7 @@ display: none; } -/***** Override the setting when the toolbar is on the top *****/ +/* Override the setting when the toolbar is on the top */ {% if position == 'top' %} .sf-minitoolbar { bottom: auto; @@ -416,38 +388,75 @@ } {% endif %} -/***** Media query *****/ -@media screen and (max-width: 779px) { - .sf-toolbar-block .sf-toolbar-icon > * > :first-child ~ * { +/* Responsive Design */ +.sf-toolbar-icon .sf-toolbar-label, +.sf-toolbar-icon .sf-toolbar-value { + display: none; +} +.sf-toolbar-block-config .sf-toolbar-icon .sf-toolbar-label { + display: inline-block; +} + +@media (min-width: 768px) { +.navbar-brand::before { content: "768 px"; background: red; + color: white; + position: absolute; } + + .sf-toolbar-icon .sf-toolbar-label, + .sf-toolbar-icon .sf-toolbar-value { + display: inline; + } + + .sf-toolbar-block .sf-toolbar-icon img, + .sf-toolbar-block .sf-toolbar-icon svg { + top: 6px; + } + .sf-toolbar-block-config .sf-toolbar-icon svg { + top: 8px; + } + .sf-toolbar-block-time .sf-toolbar-icon svg, + .sf-toolbar-block-memory .sf-toolbar-icon svg { display: none; } - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional, - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail { - display: none !important; + .sf-toolbar-block .sf-toolbar-icon { + padding: 0 10px; + } + .sf-toolbar-block-time .sf-toolbar-icon { + padding-right: 5px; + } + .sf-toolbar-block-memory .sf-toolbar-icon { + padding-left: 5px; + } + .sf-toolbar-block-request .sf-toolbar-icon { + padding-left: 0; + } + .sf-toolbar-block-request .sf-toolbar-status { + margin-right: 4px; + padding: 10px; + } + .sf-toolbar-block-config { + float: right; + margin-left: 0; + margin-right: 0; } } -@media screen and (min-width: 880px) { - .sf-toolbar-block .sf-toolbar-icon a[href$="config"] .sf-toolbar-info-piece-additional { +@media (min-width: 1024px) { +.navbar-brand::before { content: "1024 px"; } + + .sf-toolbar-block .sf-toolbar-info-piece-additional, + .sf-toolbar-block .sf-toolbar-info-piece-additional-detail { display: inline-block; } -} -@media screen and (min-width: 980px) { - .sf-toolbar-block .sf-toolbar-icon a[href$="security"] .sf-toolbar-info-piece-additional { - display: inline-block; - } -} - -@media screen and (max-width: 1179px) { - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional { + .sf-toolbar-block .sf-toolbar-info-piece-additional:empty, + .sf-toolbar-block .sf-toolbar-info-piece-additional-detail:empty { display: none; } } -@media screen and (max-width: 1439px) { - .sf-toolbar-block .sf-toolbar-icon > * > .sf-toolbar-info-piece-additional-detail { - display: none; - } +@media (min-width: 1200px) { +.navbar-brand::before { content: "1200 px"; } + }