Add view generation time to timeline tab when 'time' and 'view' collectors are enabled.

[vdauchy]

Hi,

This pull request is a proposition to add the time spent generating views to the timeline tab.

I implemented this feature a while ago in this package: https://github.com/vdauchy/laravel-debugbar-view-meter so anybody can check it already.

I just thinks that this might be good to nativelly support it.

Thanks :-)

[barryvdh]

Can't we fill the timeline from the existing events?

[barryvdh]

Ah yes they don't have timing information unfortunately. This seems interesting, not sure if it has any downsides though.

[vdauchy]

Ye, unfortunatly there is only the composing and creating events... that's why I had to to wrap the engine.
On the downside the only issue I hitted was with livewire that replaces and adds functions to the engine, now this is supported seamlessly by proxying the call to the underlying engine:

// class DebugbarViewEngine ...

/**
 * NOTE: This is done to support other Engine swap (example: Livewire).
 * @param $name
 * @param $arguments
 * @return mixed
 */
public function __call($name, $arguments)
{
    return $this->engine->$name(...$arguments);
}

[bilfeldt]

@vdauchy trying to test this out, but not seeing any timeline entries for the views:

Testing this out by requiring barryvdh/laravel-debugbar:dev-master in composer.json and adding the repository:

"repositories": [
        {
            "type": "vcs",
            "url": "https://github.com/vdauchy/laravel-debugbar"
        }
    ]

Am I missing anything or should the rendering not appear in the timeline using this PR? Thanks.

[bilfeldt]

A minor glitch found for the checking of enabled/disabled state

[vdauchy]

Hi @bilfeldt !

Thank you so much for spending some time double checking my PR, this is really appreciated :-)

I updated the code so now it uses the isEnable() method for better consistency.

Thanks for your feed back !

[bilfeldt]

Thank you so much for spending some time double checking my PR, this is really appreciated :-)

No, thank you for the PR @vdauchy 😄 This is a great improvement to the package as it gives a perfect overview of the view rendering. This is a neat feature that is currently missing in other packages like Laravel Telescope and Clockwork.

I updated the code so now it uses the isEnable() method for better consistency.

I can confirm that the fix works as expected 👍

[barryvdh]

What do you mean, how do Telescope and Clockwork render the views then? I think I implemented views in Telescope myself, using the same events, but no timing.

[barryvdh]

I think clockwork renders the timeline, but not with duration. We could do that just like we do with the query collector, if it's enabled;

laravel-debugbar/src/DataCollector/QueryCollector.php

Line 181 in 88fd9cf

$this->timeCollector->addMeasure($query, $startTime, $endTime);

[bilfeldt]

What do you mean, how do Telescope and Clockwork render the views then? I think I implemented views in Telescope myself, using the same events, but no timing.

@barryvdh As you know (being the author of aravel/telescope/pull/698) then timing is not currently part of Laravel Telescope.

Here is an example of a Laravel 8 welcome screen with the rending of 5 delay blade components added like so:

// resources/views/welcome.blade.php
...
<div class="flex justify-center mt-4 sm:items-center sm:justify-between">
    @for ($i = 0; $i < 5; $i++)
        <x-delay />
    @endfor
</div>
...

And the delay blade component:

// resources/views/components/delay.blade.php
<div>
    @php usleep(100000) @endphp
    {{ microtime() }}
</div>

Clockwork does show that the debug component is rendering, but it only appears once and the time it tooke to render it is not shown:

Now with debugbar and this PR the result is just super 👍

You can see

• the number of times each component was rendered
• exactly when in the lifecycle if was rendered
• the time rendering took (for each time it was rendered!)
• the total time it took to render the component

Simply perfect for my usecases.

[denis-chmel]

@vdauchy this is so much helpful, thanks and a lot of respect to you for this.

Guys, what are you waiting for, let others enjoy such an awesome feature! :)

[barryvdh]

Okay I like this but I would like to put it behind a feature flag (for now).
Can you add a timeline flag, similar to the query timeline?

laravel-debugbar/config/debugbar.php

Lines 163 to 165 in eb61c2f

	'views' => [
	'data' => false, //Note: Can slow down the application, because the data can be quite large..
	],

And add it to the existing checks?

[barryvdh]

Changed that and merged. Also shortened the path; b8914ce

[erikn69]

• [bug] Fix views generation time to timeline tab #1455

I have not been able to get it to work, apparently some third party package instantiated views before the view.engine.resolver extending, I have created another solution in case you still use this feature