From 77419f94605738881e5571abf052db0218813ec8 Mon Sep 17 00:00:00 2001 From: Roland Franssen Date: Sat, 24 Dec 2016 21:51:01 +0000 Subject: [PATCH] [WebProfilerBundle] Added preview iframe for built-in IDE links :santa: :gift: --- .../Resources/views/Profiler/base.css.twig | 9 +++ .../views/Profiler/base_js.html.twig | 64 +++++++++++++++++++ .../Resources/views/Profiler/open.css.twig | 17 +++-- .../Resources/views/Profiler/open.html.twig | 1 + .../views/Profiler/profiler.css.twig | 4 ++ .../Resources/views/Profiler/toolbar.css.twig | 3 + .../views/Profiler/toolbar_js.html.twig | 7 +- .../Component/VarDumper/Dumper/HtmlDumper.php | 2 +- 8 files changed, 99 insertions(+), 8 deletions(-) create mode 100644 src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig new file mode 100644 index 000000000000..7a1dc8a242a3 --- /dev/null +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/base.css.twig @@ -0,0 +1,9 @@ +iframe#sfpreview { + display: none; + position: fixed; + bottom: 0; + left: 0; + height: 80%; + width: 100%; + z-index: 99995; {# Behind toolbar, above profiler menu and dumps #} +} 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 ca69e371df28..2a29e63e5c08 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 @@ -491,6 +491,69 @@ toggle.innerHTML = currentContent !== altContent ? altContent : originalContent; }); } + }, + + createIdeLinks: function() { + var links = document.querySelectorAll('a[href^="'+window.location.protocol+'//'+window.location.host+'/_profiler/open"]'); + if (links.length === 0) { + return; + } + + var target = document.getElementById('sfpreview'); + if (!target) { + target = document.createElement('iframe'); + target.setAttribute('id', 'sfpreview'); + target.setAttribute('src', 'javascript:;'); + + addEventListener(target, 'load', function() { + if (target.src === 'javascript:;') { + return; + } + + var contentDoc = (target.contentDocument || target.contentWindow.document), + close = contentDoc.querySelector('a.close'); + addEventListener(close, 'click', function() { + target.style.display = 'none'; + }); + addEventListener(contentDoc.body, 'click', function() { + target.style.height = '80%'; + target.setAttribute('scrolling', 'auto'); + }); + close.style.display = 'block'; + target.style.display = 'block'; + }); + + var toolbar = document.querySelector('.sf-toolbar'); + addEventListener(document.body, 'click', function(e) { + if (toolbar) { + var node = e.target.parentNode; + while (node) { + if (node === toolbar) { + return; + } + node = node.parentNode; + } + } + + target.style.height = '20%'; + target.setAttribute('scrolling', 'no'); + }); + + (toolbar || document.body).appendChild(target); + } + + for (var i = 0; i < links.length; i++) { + addEventListener(links[i], 'click', function(e) { + e.preventDefault(); + e.stopPropagation(); + + if (target.getAttribute('src') === this.getAttribute('href')) { + target.style.display = 'block'; + } else { + target.setAttribute('src', this.getAttribute('href')); + } + }) + } } }; })(); @@ -498,6 +561,7 @@ Sfjs.addEventListener(window, 'load', function() { Sfjs.createTabs(); Sfjs.createToggles(); + Sfjs.createIdeLinks(); Sfjs.renderAjaxRequests(); }); diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.css.twig index 144e86f062bb..6d8faf01837e 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.css.twig @@ -43,14 +43,23 @@ body { word-break: break-all; } -a.doc { +a.doc, +a.close { color: #FFF; text-decoration: none; - margin: auto; - margin-right: 10px; + margin: auto 10px auto 0; +} + +a.close { + display: none; +} + +a.doc { + margin-left: auto; } -a.doc:hover { +a.doc:hover, +a.close:hover { text-decoration: underline; } diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.html.twig index 9b482f1f0aa9..ee40b006bb23 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/open.html.twig @@ -10,6 +10,7 @@

{{ file }} line {{ line }}

Open in your IDE? + Close panel
{{ filename|file_excerpt(line, -1) }} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig index e3a016855322..78a869e7d03d 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/profiler.css.twig @@ -15,6 +15,10 @@ ========================================================================= #} 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} +{# Shared styles + ========================================================================= #} +{{ include('@WebProfiler/Profiler/base.css.twig') }} + {# Basic styles ========================================================================= #} html, body { 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 294765d979ae..2560c8c93501 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig @@ -1,3 +1,6 @@ +{# shared styles #} +{{ include('@WebProfiler/Profiler/base.css.twig') }} + {# when updating any of these colors, do the same in profiler.css.twig #} {% set colors = { 'success': '#4F805D', 'warning': '#A46A1F', 'error': '#B0413E' } %} diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig index cade08339b27..259a1c08ee0b 100644 --- a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig +++ b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig @@ -41,7 +41,7 @@ /* Handle toolbar-info position */ var toolbarBlocks = [].slice.call(el.querySelectorAll('.sf-toolbar-block')); for (i = 0; i < toolbarBlocks.length; ++i) { - toolbarBlocks[i].onmouseover = function () { + Sfjs.addEventListener(toolbarBlocks[i], 'mouseover', function () { var toolbarInfo = this.querySelectorAll('.sf-toolbar-info')[0]; var pageWidth = document.body.clientWidth; var elementWidth = toolbarInfo.offsetWidth; @@ -62,7 +62,7 @@ } else { toolbarInfo.style.right = '0px'; } - }; + }); } Sfjs.addEventListener(document.getElementById('sfToolbarHideButton-{{ token }}'), 'click', function (event) { event.preventDefault(); @@ -88,7 +88,8 @@ } Sfjs.setPreference('toolbar/displayState', 'block'); - }) + }); + Sfjs.createIdeLinks(); }, function(xhr) { if (xhr.status !== 0) { diff --git a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php index 5131f6943f92..ebae46003fb3 100644 --- a/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php +++ b/src/Symfony/Component/VarDumper/Dumper/HtmlDumper.php @@ -31,7 +31,7 @@ class HtmlDumper extends CliDumper protected $headerIsDumped = false; protected $lastDepth = -1; protected $styles = array( - 'default' => 'background-color:#18171B; color:#FF8400; line-height:1.2em; font:12px Menlo, Monaco, Consolas, monospace; word-wrap: break-word; white-space: pre-wrap; position:relative; z-index:99999; word-break: break-all', + 'default' => 'background-color:#18171B; color:#FF8400; line-height:1.2em; font:12px Menlo, Monaco, Consolas, monospace; word-wrap: break-word; white-space: pre-wrap; position:relative; z-index:99990; word-break: break-all', 'num' => 'font-weight:bold; color:#1299DA', 'const' => 'font-weight:bold', 'str' => 'font-weight:bold; color:#56DB3A',