vendor/symfony/web-profiler-bundle/Resources/views/Profiler/base_js.html.twig line 1

  1. {# This file is partially duplicated in src/Symfony/Component/ErrorHandler/Resources/assets/js/exception.js.
  2.    If you make any change in this file, verify the same change is needed in the other file. #}
  4. {# CAUTION: the contents of this file are processed by Twig before loading
  5.             them as JavaScript source code. Always use '/*' comments instead
  6.             of '//' comments to avoid impossible-to-debug side-effects #}
  7. <script{% if csp_script_nonce is defined and csp_script_nonce %} nonce="{{ csp_script_nonce }}"{% endif %}>
  8.     window.addEventListener('DOMContentLoaded', () => {
  9.         new SymfonyProfiler();
  10.     });
  12.     class SymfonyProfiler {
  13.         constructor() {
  14.             this.#createTabs();
  15.             this.#createToggles();
  16.             this.#createCopyToClipboard();
  17.             this.#convertDateTimesToUserTimezone();
  18.         }
  20.         #createTabs() {
  21.             /* the accessibility options of this component have been defined according to: */
  22.             /* www.w3.org/WAI/ARIA/apg/example-index/tabs/tabs-manual.html */
  23.             const tabGroups = document.querySelectorAll('.sf-tabs:not([data-processed=true])');
  25.             /* create the tab navigation for each group of tabs */
  26.             tabGroups.forEach((tabGroup, i) => {
  27.                 const tabs = tabGroup.querySelectorAll(':scope > .tab');
  28.                 const tabNavigation = document.createElement('div');
  29.                 tabNavigation.classList.add('tab-navigation');
  30.                 tabNavigation.setAttribute('role', 'tablist');
  32.                 let selectedTabId = `tab-${i}-0`; /* select the first tab by default */
  33.                 tabs.forEach((tab, j) => {
  34.                     const tabId = `tab-${i}-${j}`;
  35.                     const tabTitle = tab.querySelector('.tab-title').innerHTML;
  37.                     const tabNavigationItem = document.createElement('button');
  38.                     tabNavigationItem.classList.add('tab-control');
  39.                     tabNavigationItem.setAttribute('data-tab-id', tabId);
  40.                     tabNavigationItem.setAttribute('role', 'tab');
  41.                     tabNavigationItem.setAttribute('aria-controls', tabId);
  42.                     if (tab.classList.contains('active')) { selectedTabId = tabId; }
  43.                     if (tab.classList.contains('disabled')) {
  44.                         tabNavigationItem.classList.add('disabled');
  45.                     }
  46.                     tabNavigationItem.innerHTML = tabTitle;
  47.                     tabNavigation.appendChild(tabNavigationItem);
  49.                     const tabContent = tab.querySelector('.tab-content');
  50.                     tabContent.parentElement.setAttribute('id', tabId);
  51.                 });
  53.                 tabGroup.insertBefore(tabNavigation, tabGroup.firstChild);
  54.                 document.querySelector('[data-tab-id="' + selectedTabId + '"]').classList.add('active');
  55.             });
  57.             /* display the active tab and add the 'click' event listeners */
  58.             tabGroups.forEach((tabGroup) => {
  59.                 const tabs = tabGroup.querySelectorAll(':scope > .tab-navigation .tab-control');
  60.                 tabs.forEach((tab) => {
  61.                     const tabId = tab.getAttribute('data-tab-id');
  62.                     const tabPanel = document.getElementById(tabId);
  63.                     tabPanel.setAttribute('role', 'tabpanel');
  64.                     tabPanel.setAttribute('aria-labelledby', tabId);
  65.                     tabPanel.querySelector('.tab-title').className = 'hidden';
  67.                     if (tab.classList.contains('active')) {
  68.                         tabPanel.className = 'block';
  69.                         tab.setAttribute('aria-selected', 'true');
  70.                         tab.removeAttribute('tabindex');
  71.                     } else {
  72.                         tabPanel.className = 'hidden';
  73.                         tab.removeAttribute('aria-selected');
  74.                         tab.setAttribute('tabindex', '-1');
  75.                     }
  77.                     tab.addEventListener('click', function(e) {
  78.                         const activeTab = e.target || e.srcElement;
  80.                         /* needed because when the tab contains HTML contents, user can click */
  81.                         /* on any of those elements instead of their parent '<button>' element */
  82.                         while ('button' !== activeTab.tagName.toLowerCase()) {
  83.                             activeTab = activeTab.parentNode;
  84.                         }
  86.                         /* get the full list of tabs through the parent of the active tab element */
  87.                         const tabs = Array.from(activeTab.parentNode.children);
  88.                         tabs.forEach((tab) => {
  89.                             const tabId = tab.getAttribute('data-tab-id');
  90.                             document.getElementById(tabId).className = 'hidden';
  91.                             tab.classList.remove('active');
  92.                             tab.removeAttribute('aria-selected');
  93.                             tab.setAttribute('tabindex', '-1');
  94.                         });
  96.                         activeTab.classList.add('active');
  97.                         activeTab.setAttribute('aria-selected', 'true');
  98.                         activeTab.removeAttribute('tabindex');
  99.                         const activeTabId = activeTab.getAttribute('data-tab-id');
  100.                         document.getElementById(activeTabId).className = 'block';
  101.                     });
  102.                 });
  104.                 tabGroup.setAttribute('data-processed', 'true');
  105.             });
  106.         }
  108.         #createToggles() {
  109.             const toggles = document.querySelectorAll('.sf-toggle:not([data-processed=true])');
  110.             toggles.forEach((toggle) => {
  111.                 const elementSelector = toggle.getAttribute('data-toggle-selector');
  112.                 const element = document.querySelector(elementSelector);
  114.                 element.classList.add('sf-toggle-content');
  116.                 if (toggle.hasAttribute('data-toggle-initial') && 'display' === toggle.getAttribute('data-toggle-initial')) {
  117.                     toggle.classList.add('sf-toggle-on');
  118.                     element.classList.add('sf-toggle-visible');
  119.                 } else {
  120.                     toggle.classList.add('sf-toggle-off');
  121.                     element.classList.add('sf-toggle-hidden');
  122.                 }
  124.                 toggle.addEventListener('click', (e) => {
  125.                     e.preventDefault();
  127.                     if ('' !== window.getSelection().toString()) {
  128.                         /* Don't do anything on text selection */
  129.                         return;
  130.                     }
  132.                     /* needed because when the toggle contains HTML contents, user can click */
  133.                     /* on any of those elements instead of their parent '.sf-toggle' element */
  134.                     const toggle = e.target.closest('.sf-toggle');
  135.                     const element = document.querySelector(toggle.getAttribute('data-toggle-selector'));
  137.                     toggle.classList.toggle('sf-toggle-on');
  138.                     toggle.classList.toggle('sf-toggle-off');
  139.                     element.classList.toggle('sf-toggle-hidden');
  140.                     element.classList.toggle('sf-toggle-visible');
  142.                     /* the toggle doesn't change its contents when clicking on it */
  143.                     if (!toggle.hasAttribute('data-toggle-alt-content')) {
  144.                         return;
  145.                     }
  147.                     if (!toggle.hasAttribute('data-toggle-original-content')) {
  148.                         toggle.setAttribute('data-toggle-original-content', toggle.innerHTML);
  149.                     }
  151.                     const currentContent = toggle.innerHTML;
  152.                     const originalContent = toggle.getAttribute('data-toggle-original-content');
  153.                     const altContent = toggle.getAttribute('data-toggle-alt-content');
  154.                     toggle.innerHTML = currentContent !== altContent ? altContent : originalContent;
  155.                 });
  157.                 /* Prevents from disallowing clicks on links inside toggles */
  158.                 const toggleLinks = toggle.querySelectorAll('a');
  159.                 toggleLinks.forEach((toggleLink) => {
  160.                     toggleLink.addEventListener('click', (e) => {
  161.                         e.stopPropagation();
  162.                     });
  163.                 });
  165.                 toggle.setAttribute('data-processed', 'true');
  166.             });
  167.         }
  169.         #createCopyToClipboard() {
  170.             if (!navigator.clipboard) {
  171.                 return;
  172.             }
  174.             const copyToClipboardElements = document.querySelectorAll('[data-clipboard-text]');
  176.             copyToClipboardElements.forEach((copyToClipboardElement) => {
  177.                 copyToClipboardElement.classList.remove('hidden');
  179.                 copyToClipboardElement.addEventListener('click', (e) => {
  180.                     /* Prevents from disallowing clicks on "copy to clipboard" elements inside toggles */
  181.                     e.stopPropagation();
  183.                     navigator.clipboard.writeText(copyToClipboardElement.getAttribute('data-clipboard-text'));
  185.                     let oldContent = copyToClipboardElement.textContent;
  187.                     copyToClipboardElement.textContent = `✅ Copied!`;
  188.                     copyToClipboardElement.disabled = true;
  190.                     setTimeout(() => {
  191.                         copyToClipboardElement.textContent = oldContent;
  192.                         copyToClipboardElement.disabled = false;
  193.                     }, 7000);
  194.                 });
  195.             });
  196.         }
  198.         #convertDateTimesToUserTimezone() {
  199.             const userTimezoneName = Intl.DateTimeFormat().resolvedOptions().timeZone;
  201.             document.querySelectorAll('time[data-convert-to-user-timezone]').forEach((timeElement) => {
  202.                 const iso8601Datetime = timeElement.getAttribute('datetime');
  203.                 const dateInUserTimezone = new Date(iso8601Datetime);
  205.                 let options = {};
  206.                 if (timeElement.hasAttribute('data-render-as-datetime')) {
  207.                     options = {
  208.                         year: 'numeric', month: 'long', day: 'numeric',
  209.                         hour: 'numeric', minute: 'numeric', second: 'numeric'
  210.                     };
  211.                 } else if (timeElement.hasAttribute('data-render-as-date')) {
  212.                     options = { year: 'numeric', month: 'long', day: 'numeric' };
  213.                 } else if (timeElement.hasAttribute('data-render-as-time')) {
  214.                     options = { hour: 'numeric', minute: 'numeric', second: 'numeric' };
  215.                 }
  217.                 if (timeElement.hasAttribute('data-render-with-millisecond-precision')) {
  218.                     options.fractionalSecondDigits = 3;
  219.                 }
  221.                 /* dates/times are always rendered in English to match the rest of the Profiler interface */
  222.                 timeElement.textContent = dateInUserTimezone.toLocaleString('en', options);
  224.                 if (undefined !== userTimezoneName) {
  225.                     const existingTitle = timeElement.getAttribute('title');
  226.                     const newTitle = null === existingTitle
  227.                         ? `Date/times shown in your timezone: ${userTimezoneName}`
  228.                         : existingTitle + ` (date/times shown in your timezone: ${userTimezoneName})`;
  229.                     timeElement.setAttribute('title', newTitle);
  230.                 }
  231.             });
  232.         }
  233.     }
  234. </script>