Jak psát rozšíření pro Debugger Bar

Vytvořit nové rozšíření pro Debugger Bar není nic složitého. Vytvoříte objekt implementující rozhraní Nette\Diagnostics\IBarPanel, které má dvě metody getTab() a getPanel(). Metody musí vrátit HTML kód tabu (malý popisek zobrazený přímo na Baru) a panelu. Pokud getPanel() nic nevrátí, zobrazí se jen samotný popisek. Pokud getTab() nic nevrátí, nezobrazí se vůbec nic a ani getPanel() se už nevolá.

Rozšíření se přidá do baru příkazem Debugger::$bar->addPanel(new NasNovyPanel);.

Příklad:

class ExamplePanel extends Nette\Object implements Nette\Diagnostics\IBarPanel
{

	public function getTab()
	{
		return ...;
	}

	public function getPanel()
	{
		return ...;
	}

}

// registrace
Debugger::$bar->addPanel(new ExamplePanel);

Html kód tabu

Měl by vypadat přibližně takto:

<span title="Vysvětlující popisek">
<img src="data:image/png;base64,<zakodovany obrazek>" />
Titulek
</span>

Pro zakódování obrázků můžete použít funkci Nette\Templating\DefaultHelpers::dataStream(). Pokud není vysvětlující popisek potřeba, lze SPAN vynechat.

Html kód panelu

Měl by vypadat přibližně takto:

<h1>Titulek</h1>

<div class="nette-inner">
	... obsah ...
</div>

Titulek by měl být buď stejný, jako titulek tabu, nebo může obsahovat údaje navíc.

Je třeba počítat s tím, že jedno rozšíření se může zaregistrovat i vícekrát, kupříkladu s jiným nastavením, takže pro stylování nelze používat CSS id, ale jen class, a to ve tvaru nette-addons-<NazevTridy>[-<volitelné>]. Třídu pak zapište do divu společně s třídou nette-inner. Při zápisu CSS je užitečné psát #nette-debug .trida, protože pravidlo pak má vyšší prioritu než reset.

Předpřipravené CSS

V panelu jsou předstylované A, TABLE, PRE, CODE a dále můžete využít třídy: .nette-hidden a .nette-collapsed pro skryté prvky. Pokud chcete vytvořit odkaz, který skrývá a zobrazuje jiný prvek, propojte je atributy rel a id:

<a href='#' rel='#nette-addons-NazevTridy-{$counter}'>Detaily&nbsp;&#x25ba;</a>

<div id="nette-addons-NazevTridy-{$counter}">...</div>

Counter použijte statický, aby se nevytvářely duplicitní ID na jedné stránce.

Seznam předpřipravených stylů by se dal rozšířit.

Rozšíření pro blue screen

Tímto způsobem lze přidávat vlastní vizualizace výjimek (nahrazuje dědení od IDebugPanel) nebo panely, které se zobrazí na červené bluescreen.

Rozšíření se vytvoří tímto příkazem:

Debugger::$blueScreen->addPanel(function($e) { // zachycená výjimka
	return array(
		'tab' => '...Popiska...',
		'panel' => '...HTML kod panelu...',
	);
});

Pokud funkce nic nevrátí, panel se nevykreslí.