☰

symfony profiler toolbar enhancement

symfony debug bar enhancement

  1. // ==UserScript==
  2. // @name         symfony profiler toolbar enhancement
  3. // @namespace    micoli.symfony.profiler
  4. // @version      0.2
  5. // @description  symfony debug bar enhancement
  6. // @match        http*://*/*
  7. // @author       micoli
  8. // @match        https://stackoverflow.com/questions/52040308/css-selector-anchor-text-of-href-contains
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     const openPhpStormLink = function (link) {
  16.         const linkWindow = window.open(link,'ee');
  17.         setTimeout(function(){
  18.             linkWindow.close();
  19.         },2);
  20.     };
  21.  
  22.     if(document.querySelector('.exception-summary')){
  23.         document.querySelectorAll('.trace-file-path>a').forEach(function (link) {
  24.             const matches = link.href.match(/\_profiler\/open\?file=(.*)/);
  25.             const sublink=matches[1];;
  26.             link.href = `http://localhost:63342/api/file?file=${sublink}`;
  27.             link.addEventListener('click',function (event) {
  28.                 openPhpStormLink(event.currentTarget.href);
  29.                 event.preventDefault();
  30.             });
  31.         });
  32.     }
  33.  
  34.     if (document.location.href.match(/_profiler/)) {
  35.         document.getElementById('header').style.display='none';
  36.         return;
  37.     }
  38.  
  39.     if(!document.querySelector('.sf-toolbar')){
  40.         return;
  41.     }
  42.  
  43.     let windowSrc = `
  44.     <style>
  45.         #sfProfilerWindow-title {
  46.             font-size: 20px;
  47.             left: 26px;
  48.             top: 9px;
  49.             position: fixed;
  50.             font-weight: bold;
  51.             color: white;
  52.         }
  53.         #sfProfilerWindow-title-container {
  54.             top: 5px;
  55.             height: 25px;
  56.             left: 10px;
  57.             right: 10px;
  58.             border: 1px solid #A3A3A3;
  59.             position: fixed;
  60.             overflow: hidden;
  61.             z-index: 99;
  62.             background-color: #4F805D;
  63.             display: none;
  64.         }
  65.         #sfProfilerWindow {
  66.             top: 30px;
  67.             bottom: 45px;
  68.             left: 10px;
  69.             right: 10px;
  70.             border: 0px solid #A3A3A3;
  71.             position: fixed;
  72.             overflow: hidden;
  73.             z-index: 99;
  74.             display: none;
  75.         }
  76.         #sfProfilerWindow-close{
  77.             width: 20px;
  78.             cursor: pointer;
  79.             float: right;
  80.             font-size: 20px;
  81.             margin-right: 7px;
  82.             font-weight: bold;
  83.             color: white;
  84.         }
  85.         #sfProfilerWindow-iframe {
  86.             width: 100%;
  87.             height: 100vh;
  88.             border-width: thin;
  89.         }
  90.     </style>
  91.     <div id="sfProfilerWindow-title-container">
  92.         <span id="sfProfilerWindow-title">title</span>
  93.         <span id="sfProfilerWindow-close">[X]</span>
  94.     </div>
  95.     <div id="sfProfilerWindow">
  96.         <iframe
  97.             id="sfProfilerWindow-iframe"
  98.             src="http://dinghy:22080/_profiler/052e26?panel=request"
  99.             scrolling="yes"
  100.         ></iframe>
  101.         </div>
  102.     </div>
  103.     `;
  104.  
  105.     const isWindowOpened = function () {
  106.         return document.getElementById('sfProfilerWindow').style.display === 'block';
  107.     };
  108.  
  109.     const showWindow = function () {
  110.         document.getElementById('sfProfilerWindow-title-container').style.display = 'block';
  111.         document.getElementById('sfProfilerWindow').style.display = 'block';
  112.     };
  113.  
  114.     const hideWindow = function () {
  115.         document.getElementById('sfProfilerWindow-title-container').style.display = 'none';
  116.         document.getElementById('sfProfilerWindow').style.display = 'none';
  117.     };
  118.     const capitalize = function (s) {
  119.         if (typeof s !== 'string') return ''
  120.         return s.charAt(0).toUpperCase() + s.slice(1)
  121.     };
  122.     const openSymfonyWindow = function (event, button) {
  123.         event.preventDefault();
  124.         let link = button.querySelector('a');
  125.         if (isWindowOpened() && link.href === document.getElementById('sfProfilerWindow-iframe').src) {
  126.             hideWindow();
  127.             return false;
  128.         }
  129.         showWindow();
  130.         document.getElementById('sfProfilerWindow-iframe').src = link.href;
  131.         const linkMatches = link.href.match(/panel=(.*)/);
  132.         document.getElementById('sfProfilerWindow-title').innerHTML = capitalize(linkMatches[1]);
  133.         return false;
  134.     };
  135.  
  136.     const setLinks = function () {
  137.         //a[href*="/_profiler/"]:not(.rgx-add-profiler)
  138.         document.querySelectorAll(
  139.             '.sf-toolbarreset>.sf-toolbar-block:not(.rgx-add-profiler'
  140.         ).forEach(function (button) {
  141.             button.className = button.className + ' rgx-add-profiler';
  142.             button.target = '_blank';
  143.             button.onclick = function (event) {
  144.                 openSymfonyWindow(event, button);
  145.             }
  146.         });
  147.     };
  148.  
  149.     setLinks();
  150.     setInterval(setLinks, 500);
  151.  
  152.     document.body.insertAdjacentHTML('beforeEnd', windowSrc);
  153.     document.getElementById('sfProfilerWindow-close').onclick = hideWindow;
  154.     hideWindow();
  155. })();
  156.  
  157.