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

<div class=perex>

Tracy oferă un instrument excelent pentru depanarea aplicației dvs. Uneori, însă, ați dori să aveți la îndemână și alte informații. Vom arăta cum să scrieți propria extensie pentru Tracy Bar, pentru a face dezvoltarea și mai plăcută.

- Crearea unui panou personalizat pentru Tracy Bar
- Crearea unei extensii personalizate pentru Bluescreen

</div>

.[tip]
Un depozit de extensii gata făcute pentru Tracy poate fi găsit la "Componette":https://componette.org/search/tracy.


Extensii pentru Tracy Bar
=========================

Crearea unei noi extensii pentru Tracy Bar nu este complicată. Creați un obiect care implementează interfața `Tracy\IBarPanel`, care are două metode `getTab()` și `getPanel()`. Metodele trebuie să returneze codul HTML al tab-ului (eticheta mică afișată direct pe Bar) și al panoului. Dacă `getPanel()` nu returnează nimic, se va afișa doar eticheta. Dacă `getTab()` nu returnează nimic, nu se va afișa nimic și nici `getPanel()` nu va mai fi apelată.

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

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


Înregistrare
------------

Înregistrarea se face folosind `Tracy\Bar::addPanel()`:

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

Sau puteți înregistra panoul direct în configurația aplicației:

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


Codul HTML al tab-ului
----------------------

Ar trebui să arate aproximativ așa:

```latte
<span title="Etichetă explicativă">
	<svg>...</svg>
	<span class="tracy-label">Titlu</span>
</span>
```

Imaginea ar trebui să fie în format SVG. Dacă descrierea explicativă nu este necesară, `<span>` cu atributul `title` poate fi omis.


Codul HTML al panoului
----------------------

Ar trebui să arate aproximativ așa:

```latte
<h1>Titlu</h1>

<div class="tracy-inner">
<div class="tracy-inner-container">
	... conținut ...
</div>
</div>
```

Titlul ar trebui să fie fie același cu titlul tab-ului, fie poate conține informații suplimentare.

Trebuie luat în considerare faptul că o extensie se poate înregistra de mai multe ori, de exemplu cu setări diferite, deci pentru stilizare nu se pot folosi id-uri CSS, ci doar clase, în formatul `tracy-addons-<NumeClasa>[-<optional>]`. Clasa se scrie apoi în div împreună cu clasa `tracy-inner`. La scrierea CSS, este util să scrieți `#tracy-debug .clasa`, deoarece regula va avea o prioritate mai mare decât resetarea.


Stiluri implicite
-----------------

În panou sunt prestilizate `<a>`, `<table>`, `<pre>`, `<code>`. Dacă doriți să creați un link care ascunde și afișează un alt element, conectați-le prin atributele `href` și `id` și clasa `tracy-toggle`:

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

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

Dacă starea implicită trebuie să fie restrânsă, adăugați ambelor elemente clasa `tracy-collapsed`.

Folosiți un contor static pentru a evita crearea de ID-uri duplicate pe aceeași pagină.


Extensii pentru Bluescreen
==========================

În acest mod se pot adăuga vizualizări personalizate ale excepțiilor sau panouri care se afișează pe bluescreen.

Extensia se creează cu această comandă:
```php
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // excepția capturată
	return [
		'tab' => '...Etichetă...',
		'panel' => '...Cod HTML al panoului...',
	];
});
```

Funcția este apelată de două ori, mai întâi în parametrul `$e` este transmisă excepția însăși și panoul returnat se desenează la începutul paginii. Dacă nu returnează nimic, panoul nu se desenează. Apoi este apelată cu parametrul `null` și panoul returnat se desenează sub callstack. Dacă funcția returnează în array cheia `'bottom' => true`, panoul se desenează complet jos.