profiler redesign

[fbourigault]

Q	A
Bug fix?	no
New feature?	yes
BC breaks?	no
Deprecations?	no
Related tickets	partially #93
Documentation	N/A
License	MIT

Here is my proposal for the new profiler design.

Now, when you display the profiler, you just see a list of requests sent and only have the method, the url and the response status code displayed. When you click on a line, the request (captured after plugin stack) and the response (captured before the plugin stack) are displayed. Then you have a button to toggle plugin stack which show the plugins list.

I used CSS3 flexbox for the layout with the help of word-wrap & co, we get a nice look at every screen size. No overflow for very long headers/urls.

The body toggle is now moved per request profile instead of globally.

I also cleaned the html to be more CSP friendly (no more inlined style/script attributes). I also reduced the javascript code to the strict minimum.

HTTP method colors are from SwaggerUi. I also used the best font color to have enough contrast for a11y.

Comments are welcome :)

To Do

• Update the changelog.
• Update the documentation.
• Complete ProfileClientTest.

[Nyholm]

I have nothing to remark.

Good work

[Nyholm]

Could you have a look why the tests are failing?

[fbourigault]

I broke those myself and didn't update them yet.

About the features, I didn't re-implemented the display of failed stacks. I don't think the http status is enough as any plugin can transform an 200 response to an exception. I also removed the path of arrows in the plugin stack. Maybe it must be re-introduced for users not familiar with PluginClient internals.

[fbourigault]

Should I follow php-http/client-common#45?
If yes, what does it means exactly? Using a PSR-7 implementation and go with new GuzzleHttp\Psr7\Request() instead of $this->getMockBuilder(RequestInterface::class)->getMock();?
And last question, should I do the same for promise?

[Nyholm]

Yes. That is correct. They are just value objects. It is okey to use them when testing.

[fbourigault]

So I can consider Promise a value object?

[sagikazarmark]

Great work @fbourigault thanks for your hard work.

Regarding promises: while messages can be considered VOs, Promises not really. They represent behaviour, not values.

[fbourigault]

Does someone have ideas on how to display a failed stack?

[Nyholm]

Thank you Mark.

@fbourigault: Hm, No, not really. Maybe just display the stack as normal but on the request line indicate it failed.

[fbourigault]

I added a green check mark in front of successful stacks and a red ballot in front of failed one. What do you think?

[fbourigault]

I think this is now ready. I encourage everyone to test this new profiler on their own projects. Using the profiler worth more than my screenshots.

[Nyholm]

Thank you. I will test it and see what's happen.. I maybe have time to do it before Tuesday.

[fbourigault]

I ran some extra tests using BrowserStack. It works on every browser (IE, Edge, Chrome, Firefox, Safari) where the profiler is fine 👌

[Nyholm]

I've tried the PR now. I like it. I've got nothing to complain about.

@fbourigault Really good job. Feel free to merge when you are ready.