Crearea extensiilor Tracy
*************************

<div class=perex>

Tracy este un instrument excelent pentru depanarea aplicației dumneavoastră. Cu toate acestea, uneori aveți nevoie de mai multe informații decât vă oferă Tracy. Veți învăța despre:

- Crearea propriilor panouri Tracy Bar
- Crearea propriilor extensii Bluescreen

</div>

.[tip]
Puteți găsi extensii utile pentru Tracy pe "Componette":https://componette.org/search/tracy.


Extensii pentru bara Tracy .[#toc-tracy-bar-extensions]
=======================================================

Crearea unei noi extensii pentru Tracy Bar este simplă. Trebuie să implementați interfața `Tracy\IBarPanel` cu metodele `getTab()` și `getPanel()`. Metodele trebuie să returneze codul HTML al unei file (eticheta mică de pe Tracy Bar) și al unui panou (pop-up afișat după ce se face clic pe filă). Dacă `getPanel()` nu returnează nimic, va fi afișată doar fila. Dacă `getTab()` nu returnează nimic, nu se afișează nimic și `getPanel()` nu va fi apelată.

```php
class ExamplePanel implements Tracy\IBarPanel
{
	public function getTab()
	{
		return /* ... */;
	}

	public function getPanel()
	{
		return /* ... */;
	}
}
```


Înregistrare .[#toc-registration]
---------------------------------

Înscrierea se face prin apelarea `Tracy\Bar::addPanel()`:

```php
Tracy\Debugger::getBar()->addPanel(new ExamplePanel);
```

sau vă puteți înregistra pur și simplu panoul în configurația aplicației:

```neon
tracy:
	bar:
		- ExamplePanel
```


Tab Cod HTML .[#toc-tab-html-code]
----------------------------------

Ar trebui să arate ceva de genul acesta:

```latte
<span title="Explaining tooltip">
	<svg>...</svg>
	<span class="tracy-label">Title</span>
</span>
```

Imaginea trebuie să fie în format SVG. Dacă nu aveți nevoie de tooltip, puteți lăsa `<span>` afară.


Codul HTML al panoului .[#toc-panel-html-code]
----------------------------------------------

Ar trebui să arate ceva de genul acesta:

```latte
<h1>Title</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... content ...
</div>
</div>
```

Titlul ar trebui să fie același cu cel din fila sau să conțină informații suplimentare.

O extensie poate fi înregistrată de mai multe ori, astfel încât se recomandă să nu se utilizeze atributul `id` pentru stilizare. Puteți utiliza clase, de preferință în `tracy-addons-<class-name>[-<optional>]` format. Atunci când creați CSS, este mai bine să utilizați `#tracy-debug .class`, deoarece o astfel de regulă are o prioritate mai mare decât resetarea.


Stiluri implicite .[#toc-default-styles]
----------------------------------------

În panou, elementele `<a>`, `<table>`, `<pre>`, `<code>` au stiluri implicite. Pentru a crea o legătură pentru a ascunde sau afișa un alt element, conectați-le cu atributele `href` și `id` și clasa `tracy-toggle`.

```latte
<a href="#tracy-addons-className-{$counter}" class="tracy-toggle">Detail</a>

<div id="tracy-addons-className-{$counter}">...</div>
```

În cazul în care starea implicită este colapsată, adăugați clasa `tracy-collapsed` la ambele elemente.

Utilizați un contor static pentru a preveni duplicarea ID-urilor pe o pagină.


Extensii Bluescreen .[#toc-bluescreen-extensions]
=================================================

Puteți adăuga propriile vizualizări de excepție sau panouri, care vor apărea pe ecranul albastru.

Extensia este realizată astfel:
```php
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // excepție capturată
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});
```

Funcția este apelată de două ori, mai întâi excepția însăși este trecută în parametrul `$e`, iar panoul returnat este redat la începutul paginii. Dacă nu se returnează nimic, panoul nu este redat. Apoi este apelată cu parametrul `null`, iar panoul returnat este redat sub callstack. Dacă funcția returnează `'bottom' => true` în matrice, panoul este redat chiar în partea de jos a paginii.