Ustvarjanje razširitev Tracy
****************************

<div class=perex>

Tracy je odlično orodje za odpravljanje napak v aplikaciji. Vendar včasih potrebujete več informacij, kot jih ponuja Tracy. Spoznali boste:

- ustvarjanju lastnih plošč Tracy Bar
- ustvarjanju lastnih razširitev Bluescreen

</div>

.[tip]
Uporabne razširitve za Tracy lahko najdete na "Componette":https://componette.org/search/tracy.


Tracy Bar Extensions .[#toc-tracy-bar-extensions]
=================================================

Ustvarjanje nove razširitve za Tracy Bar je preprosto. Implementirati morate vmesnik `Tracy\IBarPanel` z metodama `getTab()` in `getPanel()`. Metodi morata vrniti kodo HTML zavihka (majhna nalepka v Tracy Baru) in plošče (pojavno okno, ki se prikaže po kliku na zavihek). Če `getPanel()` ne vrne ničesar, bo prikazan samo zavihek. Če `getTab()` ne vrne ničesar, se ne prikaže nič in `getPanel()` se ne pokliče.

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

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


Registracija .[#toc-registration]
---------------------------------

Registracija se opravi s klicem na `Tracy\Bar::addPanel()`:

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

ali pa lahko ploščo preprosto registrirate v konfiguraciji aplikacije:

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


Koda HTML zavihka .[#toc-tab-html-code]
---------------------------------------

Izgledati mora nekako takole:

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

Slika mora biti v formatu SVG. Če ne potrebujete namigov, lahko pustite `<span>` izpustite.


Koda HTML plošče .[#toc-panel-html-code]
----------------------------------------

Izgledati mora nekako takole:

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

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

Naslov mora biti enak kot v zavihku ali pa mora vsebovati dodatne informacije.

Ena razširitev je lahko registrirana večkrat, zato je priporočljivo, da za oblikovanje ne uporabljate atributa `id`. Uporabite lahko razrede, po možnosti v `tracy-addons-<class-name>[-<optional>]` obliki. Pri ustvarjanju CSS je bolje uporabiti `#tracy-debug .class`, saj ima takšno pravilo večjo prednost kot reset.


Privzeti slogi .[#toc-default-styles]
-------------------------------------

Na plošči so elementi `<a>`, `<table>`, `<pre>`, `<code>` imajo privzete sloge. Če želite ustvariti povezavo za skrivanje ali prikaz drugega elementa, jih povežite z atributoma `href` in `id` ter razredom `tracy-toggle`.

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

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

Če je privzeto stanje zloženo, obema elementoma dodajte razred `tracy-collapsed`.

Uporabite statični števec, da preprečite podvajanje ID-jev na eni strani.


Razširitve Bluescreen .[#toc-bluescreen-extensions]
===================================================

Dodate lahko lastne vizualizacije izjem ali plošče, ki bodo prikazane na zaslonu Bluescreen.

Razširitev je narejena na naslednji način:
```php
Tracy\Debugger::getBlueScreen()->addPanel(function (?Throwable $e) { // ujeta izjema
	return [
		'tab' => '...Title...',
		'panel' => '...content...',
	];
});
```

Funkcija se pokliče dvakrat, najprej se v parametru `$e` posreduje sama izjema, vrnjena plošča pa se prikaže na začetku strani. Če se ne vrne nič, se plošča ne prikaže. Nato se pokliče s parametrom `null` in vrnjena plošča se izriše pod skladovnico klicev. Če funkcija vrne `'bottom' => true` v polju, se plošča prikaže na samem dnu.