|
1 | 1 | {%extends'@WebProfiler/Profiler/layout.html.twig' %} |
2 | 2 |
|
| 3 | +{%blockstylesheets %} |
| 4 | + {{parent() }} |
| 5 | + <style> |
| 6 | +dialog { |
| 7 | +border:none; |
| 8 | +border-radius:6px; |
| 9 | +box-shadow:var(--settings-modal-shadow); |
| 10 | +max-width:94%; |
| 11 | +width:1200px; |
| 12 | + } |
| 13 | +
|
| 14 | +dialog::backdrop { |
| 15 | +background:linear-gradient( |
| 16 | +45deg, |
| 17 | +rgb(18,18,20,0.4), |
| 18 | +rgb(17,17,20,0.8) |
| 19 | + ); |
| 20 | + } |
| 21 | +
|
| 22 | +dialog[open] { |
| 23 | +animation: scale0.3seasenormal; |
| 24 | + } |
| 25 | +
|
| 26 | +dialog[open]::backdrop { |
| 27 | +animation: backdrop0.3seasenormal; |
| 28 | + } |
| 29 | +
|
| 30 | +dialog.hide { |
| 31 | +animation-direction:reverse; |
| 32 | + } |
| 33 | +
|
| 34 | +dialogh2 { |
| 35 | +margin-top:0.2em |
| 36 | + } |
| 37 | +
|
| 38 | +dialogi.cancel { |
| 39 | +cursor:pointer; |
| 40 | +padding:05px; |
| 41 | +float:right; |
| 42 | + } |
| 43 | +
|
| 44 | +dialogtable { |
| 45 | +border:1pxsolid#ccc; |
| 46 | +border-collapse:collapse; |
| 47 | +margin:001em0; |
| 48 | +margin-bottom:1em; |
| 49 | +padding:0; |
| 50 | +table-layout:fixed; |
| 51 | + } |
| 52 | +
|
| 53 | +dialogtabletr { |
| 54 | +background-color:#f8f8f8; |
| 55 | +border:1pxsolid#ddd; |
| 56 | +padding:.35em; |
| 57 | + } |
| 58 | +
|
| 59 | +dialogtableth, |
| 60 | +dialogtabletd { |
| 61 | +padding:.625em; |
| 62 | +text-align:center; |
| 63 | + } |
| 64 | +
|
| 65 | +dialogtableth { |
| 66 | +font-size:.85em; |
| 67 | +letter-spacing:.1em; |
| 68 | +text-transform:uppercase; |
| 69 | + } |
| 70 | +
|
| 71 | +dialogmenu { |
| 72 | +padding:0; |
| 73 | +margin:0; |
| 74 | +display:flex; |
| 75 | +align-items:center; |
| 76 | +flex-direction:row; |
| 77 | +vertical-align:middle; |
| 78 | +justify-content:center; |
| 79 | + } |
| 80 | +
|
| 81 | +dialogmenusmall { |
| 82 | +margin-right:auto; |
| 83 | + } |
| 84 | +dialogmenusmalli { |
| 85 | +margin-right:3px; |
| 86 | + } |
| 87 | +
|
| 88 | +@keyframesscale { |
| 89 | +from {transform:scale(0); } |
| 90 | +to {transform:scale(1); } |
| 91 | + } |
| 92 | +
|
| 93 | +@keyframesbackdrop { |
| 94 | +from {opacity:0; } |
| 95 | +to {opacity:1; } |
| 96 | + } |
| 97 | + </style> |
| 98 | +{%endblock %} |
| 99 | + |
3 | 100 | {%blocktoolbar %} |
4 | 101 | {%ifcollector.callsCount>0 %} |
5 | 102 | {%seticon %} |
|
40 | 137 | flowchart: { useMaxWidth:false }, |
41 | 138 | securityLevel:'loose', |
42 | 139 | }); |
| 140 | +
|
| 141 | + {%forname,dataincollector.workflows %} |
| 142 | +window.showNodeDetails{{ collector.hash(name) }}=function (node) { |
| 143 | +constmap= {{data.listeners|json_encode|raw }}; |
| 144 | +showNodeDetails(node, map); |
| 145 | + }; |
| 146 | + {%endfor %} |
| 147 | +
|
| 148 | +constshowNodeDetails=function (node,map) { |
| 149 | +constdialog=document.getElementById('detailsDialog'); |
| 150 | +
|
| 151 | +dialog.querySelector('tbody').innerHTML=''; |
| 152 | +for (const [eventName,listeners]ofObject.entries(map[node])) { |
| 153 | +listeners.forEach(listener=> { |
| 154 | +constrow=document.createElement('tr'); |
| 155 | +
|
| 156 | +consteventNameCode=document.createElement('code'); |
| 157 | +eventNameCode.textContent= eventName; |
| 158 | +
|
| 159 | +consteventNameCell=document.createElement('td'); |
| 160 | +eventNameCell.appendChild(eventNameCode); |
| 161 | +row.appendChild(eventNameCell); |
| 162 | +
|
| 163 | +constlistenerDetailsCell=document.createElement('td'); |
| 164 | +row.appendChild(listenerDetailsCell); |
| 165 | +
|
| 166 | +let listenerDetails; |
| 167 | +constlistenerDetailsCode=document.createElement('code'); |
| 168 | +listenerDetailsCode.textContent=listener.title; |
| 169 | +if (listener.file) { |
| 170 | +constlink=document.createElement('a'); |
| 171 | +link.href=listener.file; |
| 172 | +link.appendChild(listenerDetailsCode); |
| 173 | + listenerDetails= link; |
| 174 | + }else { |
| 175 | + listenerDetails= listenerDetailsCode; |
| 176 | + } |
| 177 | +listenerDetailsCell.appendChild(listenerDetails); |
| 178 | +
|
| 179 | +if (typeoflistener.guardExpressions==='object') { |
| 180 | +listenerDetailsCell.appendChild(document.createElement('br')); |
| 181 | +
|
| 182 | +constguardExpressionsWrapper=document.createElement('span'); |
| 183 | +guardExpressionsWrapper.appendChild(document.createTextNode('guard expressions:')); |
| 184 | +
|
| 185 | +listener.guardExpressions.forEach((expression,index)=> { |
| 186 | +if (index>0) { |
| 187 | +guardExpressionsWrapper.appendChild(document.createTextNode(',')); |
| 188 | + } |
| 189 | +
|
| 190 | +constexpressionCode=document.createElement('code'); |
| 191 | +expressionCode.textContent= expression; |
| 192 | +guardExpressionsWrapper.appendChild(expressionCode); |
| 193 | + }); |
| 194 | +
|
| 195 | +listenerDetailsCell.appendChild(guardExpressionsWrapper); |
| 196 | + } |
| 197 | +
|
| 198 | +dialog.querySelector('tbody').appendChild(row); |
| 199 | + }); |
| 200 | + }; |
| 201 | +
|
| 202 | +if (dialog.dataset.processed) { |
| 203 | +dialog.showModal(); |
| 204 | +return; |
| 205 | + } |
| 206 | +
|
| 207 | +dialog.addEventListener('click', (e)=> { |
| 208 | +constrect=dialog.getBoundingClientRect(); |
| 209 | +
|
| 210 | +constinDialog= |
| 211 | +rect.top<=e.clientY&& |
| 212 | +e.clientY<=rect.top+rect.height&& |
| 213 | +rect.left<=e.clientX&& |
| 214 | +e.clientX<=rect.left+rect.width; |
| 215 | +
|
| 216 | +!inDialog&&dialog.close(); |
| 217 | + }); |
| 218 | +
|
| 219 | +dialog.querySelectorAll('.cancel').forEach(elt=> { |
| 220 | +elt.addEventListener('click', ()=>dialog.close()); |
| 221 | + }); |
| 222 | +
|
| 223 | +dialog.showModal(); |
| 224 | +
|
| 225 | +dialog.dataset.processed=true; |
| 226 | + }; |
43 | 227 | // We do not load all mermaid diagrams at once, but only when the tab is opened |
44 | 228 | // This is because mermaid diagrams are in a tab, and cannot be renderer with a |
45 | 229 | // "good size" if they are not visible |
|
71 | 255 | <h3>Definition</h3> |
72 | 256 | <preclass="sf-mermaid"> |
73 | 257 | {{data.dump|raw }} |
| 258 | + {%fornodeId,eventsindata.listeners %} |
| 259 | + click {{nodeId }} showNodeDetails{{ collector.hash(name) }} |
| 260 | + {%endfor %} |
74 | 261 | </pre> |
75 | 262 |
|
76 | 263 | <h3>Calls</h3> |
|
128 | 315 | {%endfor %} |
129 | 316 | </div> |
130 | 317 | {%endif %} |
| 318 | + |
| 319 | + <dialogid="detailsDialog"> |
| 320 | + <h2> |
| 321 | + Event listeners |
| 322 | + <iclass="cancel">×</i> |
| 323 | + </h2> |
| 324 | + |
| 325 | + <table> |
| 326 | + <thead> |
| 327 | + <tr> |
| 328 | + <th>event</th> |
| 329 | + <th>listener</th> |
| 330 | + </tr> |
| 331 | + </thead> |
| 332 | + <tbody> |
| 333 | + </tbody> |
| 334 | + </table> |
| 335 | + <menu> |
| 336 | + <small><i>⌨</i> <kbd>esc</kbd></small> |
| 337 | + <buttonclass="btn btn-sm cancel">Close</button> |
| 338 | + </menu> |
| 339 | + </dialog> |
131 | 340 | {%endblock %} |