Why is it so complicated to add custom panels?

[bernhard]

Hey @adrian please apologise for the subject 🙂 I love Tracy - This is either a feature request or a question to understand why you built it in the way it is and maybe just a question of where I find info in the docs 🙂 

I'm creating a custom panel for RockFrontend so that RockFrontend can even live-reload pages that throw fatal errors or where latte {include ...} tags point to a wrong file. Until now I needed to hit refresh manually for those files which is tedious in the long run.

All I really need to do is to inject my javascript:

<?php

namespace ProcessWire;

$rf = rockfrontend();
$secret = $rf->addLiveReloadSecret();
$script = $rf->addLiveReloadScript();
if (!$script) return;
?>
<script>
  LiveReloadUrl = '<?= $pages->get(1)->url ?>';
  LiveReloadSecret = '<?= $secret ?>';
  document.addEventListener("DOMContentLoaded", function() {
    var script = document.createElement("script");
    script.src = "<?= $script ?>";
    document.head.appendChild(script);
  });
</script>

I even wouldn't need a panel for this, just a hook that adds my markup whenever the debug bar is rendered on the page. But I did not find one. Is there one?

But the question remains why adding simple panels is so complicated.

I found out thx to @teppo's WireFrame panel that I need to place my panel in /site/modules/RockFrontend/TracyPanels/MyPanel.php, which is already great.

But still... if I only want to show an icon in the bar, a label on the panel and some HTML inside the panel body, this is what I have to do?

<?php

namespace ProcessWire;

use BasePanel;

class RockFrontendPanel extends BasePanel
{

    // settings
    private $name = 'rockfrontend';
    private $label = 'RockFrontend Panel';

    // the svg icon shown in the bar and in the panel header
    private $icon = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M5 5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2z"/><path d="M19 6h1a2 2 0 0 1 2 2a5 5 0 0 1-5 5h-5v2m-2 1a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1z"/></g></svg>';

    private $liveReloadStatus = 'disabled';

    /**
     * define the tab for the panel in the debug bar
     */
    public function getTab()
    {
        if (\TracyDebugger::isAdditionalBar()) return;
        \Tracy\Debugger::timer($this->name);
        $livereload = $this->wire->files->render(__DIR__ . "/livereload.php");
        if ($livereload) $this->liveReloadStatus = 'enabled';
        return
            "$livereload<span title='{$this->label}'>{$this->icon} " . (\TracyDebugger::getDataValue('showPanelLabels') ? $this->label : '') . "</span>";
    }

    /**
     * the panel's HTML code
     */
    public function getPanel()
    {
        $out = "<h1>{$this->icon} {$this->label}</h1>";

        // example of a maximize button
        $out .= '<span class="tracy-icons"><span class="resizeIcons"><a href="#" title="Maximize / Restore" onclick="tracyResizePanel(\'' . $this->className . '\')">+</a></span></span>';

        // panel body
        $out .= '<div class="tracy-inner">';
        $out .= "LiveReload status: " . $this->liveReloadStatus;
        $out .= \TracyDebugger::generatePanelFooter($this->name, \Tracy\Debugger::timer($this->name), strlen($out), 'yourSettingsFieldsetId');
        $out .= '</div>';

        return parent::loadResources() . $out;
    }
}

Maybe it's already possible to do that in a simpler way?

I'm thinking of something like this:

<?php
$wire->addHookAfter("TracyDebugger::getPanels", function($event) {
  $event->return->add([
    'icon' => '<svg ...></svg>',
    'label' => 'RockFrontend',
    'body' => $files->render(__DIR__.'/RockFrontendPanel.php'),
    'allowMaximize' => 'true',
  ]);
});

Where Tracy would on its own add all the necessary boilerplate that is necessary for measuring timings and memory consumption etc.

Thank you for your time and for TracyDebugger in general!!

PS: I have the same todo for RockFrontend's topbar 🙈😅

[bernhard]

Hey @adrian just FYI: I found a solution that does not need tracy and where I do not need to create a panel at all 🙂 

Still I'd welcome if you think about my suggestion to make panels easier one day, because in the long run I think a RockFrontend panel could make a lot of sense.

[teppo]

I didn't mind the boilerplate required to add a new panel (especially since there is an example HelloWorld panel available), and it is definitely nice to have essentially unhindered access to native Tracy extensions, but it also wouldn't hurt to have a hookable method as suggested by Bernhard (if feasible). If adding new panels was that easy, it could be more tempting to add site-specific panels etc. 🙂

(Of course this should be an addition / alternative to current approach, not a replacement.)

Just for context, here's the discussion that led to what we currently have: