Skip to content

Commit 0dfba51

Browse files
NyholmNyholm
committed
Added design on webprofiler page
1 parent 507bb11 commit 0dfba51

File tree

7 files changed

+252
-22
lines changed

7 files changed

+252
-22
lines changed

‎Collector/ClientDataCollector.php

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@ public static function createFromCollectedData(array $data)
5959
}
6060

6161
/**
62-
* @param array $messages
62+
* @param array $messages is an array with keys 'request' and 'response' which hold requests for each call to
63+
* sendRequest and for each depth.
6364
*
6465
* @return ClientDataCollector
6566
*/

‎Collector/Twig/HttpMessageMarkupExtension.php

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<?php
2+
3+
namespace Http\HttplugBundle\Collector\Twig;
4+
5+
/**
6+
*
7+
*
8+
* @author Tobias Nyholm <tobias.nyholm@gmail.com>
9+
*/
10+
class HttpMessageMarkupExtension extends \Twig_Extension
11+
{
12+
/**
13+
* {@inheritdoc}
14+
*
15+
* @return array
16+
*/
17+
public function getFilters()
18+
{
19+
return array(
20+
new \Twig_SimpleFilter('httplug_markup', [$this, 'markup'], ['is_safe' => ['html']]),
21+
);
22+
}
23+
24+
/**
25+
* @param string $message http message
26+
*/
27+
public function markup($message)
28+
{
29+
$safeMessage = htmlentities($message);
30+
list($headers, $body) = preg_split('|\\r?\\n\\r?\\n|', $safeMessage, 2);
31+
32+
// make header names bold
33+
$headers = preg_replace("|\n(.*?): |si", "\n<b>$1</b>: ", $headers);
34+
35+
return sprintf("%s\n\n<div class='httplug-http-body'>%s</div>", $headers, $body);
36+
}
37+
38+
public function getName()
39+
{
40+
return 'httplug.message_markup';
41+
}
42+
}

‎Resources/config/data-collector.xml

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,9 @@
1212
<argument type="service" id="httplug.collector.plugin_journal"/>
1313
<tag name="data_collector" template="HttplugBundle::webprofiler.html.twig" priority="200" id="httplug"/>
1414
</service>
15+
16+
<service id="httplug.collector.twig.http_message" class="Http\HttplugBundle\Collector\Twig\HttpMessageMarkupExtension" public="false">
17+
<tag name="twig.extension" />
18+
</service>
1519
</services>
1620
</container>

‎Resources/public/script/httplug.js

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
2+
3+
/**
4+
* Toggle hide/show on the message body
5+
*/
6+
function httplug_toggleBody() {
7+
var bodies = document.querySelectorAll(".httplug-http-body");
8+
9+
httplug_toggleVisibility(bodies);
10+
}
11+
12+
function httplug_togglePluginStack(el) {
13+
var requestTable = httplug_getClosest(el, '.httplug-request-table');
14+
var stacks = requestTable.querySelectorAll('.httplug-request-stack');
15+
16+
httplug_toggleVisibility(stacks, "table-row");
17+
18+
var newLabel = el.getAttribute("data-label");
19+
var oldLabel = el.innerHTML;
20+
el.innerHTML = newLabel;
21+
el.setAttribute("data-label", oldLabel);
22+
}
23+
24+
25+
26+
/**
27+
* Get the closest matching element up the DOM tree.
28+
*
29+
* {@link https://gomakethings.com/climbing-up-and-down-the-dom-tree-with-vanilla-javascript/}
30+
*
31+
* @param {Element} elem Starting element
32+
* @param {String} selector Selector to match against (class, ID, data attribute, or tag)
33+
* @return {Boolean|Element} Returns null if not match found
34+
*/
35+
var httplug_getClosest = function ( elem, selector ) {
36+
37+
// Variables
38+
var firstChar = selector.charAt(0);
39+
var supports = 'classList' in document.documentElement;
40+
var attribute, value;
41+
42+
// If selector is a data attribute, split attribute from value
43+
if ( firstChar === '[' ) {
44+
selector = selector.substr( 1, selector.length - 2 );
45+
attribute = selector.split( '=' );
46+
47+
if ( attribute.length > 1 ) {
48+
value = true;
49+
attribute[1] = attribute[1].replace( /"/g, '' ).replace( /'/g, '' );
50+
}
51+
}
52+
53+
// Get closest match
54+
for ( ; elem && elem !== document && elem.nodeType === 1; elem = elem.parentNode ) {
55+
56+
// If selector is a class
57+
if ( firstChar === '.' ) {
58+
if ( supports ) {
59+
if ( elem.classList.contains( selector.substr(1) ) ) {
60+
return elem;
61+
}
62+
} else {
63+
if ( new RegExp('(^|\\s)' + selector.substr(1) + '(\\s|$)').test( elem.className ) ) {
64+
return elem;
65+
}
66+
}
67+
}
68+
69+
// If selector is an ID
70+
if ( firstChar === '#' ) {
71+
if ( elem.id === selector.substr(1) ) {
72+
return elem;
73+
}
74+
}
75+
76+
// If selector is a data attribute
77+
if ( firstChar === '[' ) {
78+
if ( elem.hasAttribute( attribute[0] ) ) {
79+
if ( value ) {
80+
if ( elem.getAttribute( attribute[0] ) === attribute[1] ) {
81+
return elem;
82+
}
83+
} else {
84+
return elem;
85+
}
86+
}
87+
}
88+
89+
// If selector is a tag
90+
if ( elem.tagName.toLowerCase() === selector ) {
91+
return elem;
92+
}
93+
94+
}
95+
96+
return null;
97+
98+
};
99+
100+
/**
101+
* Check if element is hidden.
102+
* @param el
103+
* @returns {boolean}
104+
*/
105+
var httplug_isHidden = function (el) {
106+
var style = window.getComputedStyle(el);
107+
return (style.display === 'none')
108+
}
109+
110+
/**
111+
* Toggle visibility on elemets
112+
* @param els
113+
* @param display defaults to "block"
114+
*/
115+
var httplug_toggleVisibility = function (els, display) {
116+
if (typeof display === 'undefined') {
117+
display = "block";
118+
}
119+
120+
for (var i = 0; i < els.length; i++) {
121+
if (httplug_isHidden(els[i])) {
122+
els[i].style.display = display;
123+
} else {
124+
els[i].style.display = "none";
125+
}
126+
}
127+
};

‎Resources/public/style/httplug.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
2+
.push-right {
3+
float: right;
4+
}
5+
6+
.httplug-http-body {
7+
display: none;
8+
}
9+
10+
.httplug-request-table {
11+
12+
}
13+
14+
.httplug-plugin-name {
15+
font-size: 130%;
16+
font-weight: bold;
17+
}
18+
.httplug-request-stack {
19+
20+
display: none;
21+
}

‎Resources/views/webprofiler.html.twig

Lines changed: 54 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@
3131

3232
{% block head %}
3333
{# Optional. Here you can link to or define your own CSS and JS contents. #}
34+
<link rel="stylesheet" href="{{ asset('bundles/httplug/style/httplug.css') }}" />
35+
<script type="text/javascript" src="{{ asset("bundles/httplug/script/httplug.js") }}"></script>
3436
{{ parent() }}
3537
{% endblock %}
3638

@@ -50,42 +52,74 @@
5052

5153
{% block panel %}
5254
<h2>HTTPlug</h2>
53-
{% for name, client in collector.clients %}
54-
<h3>{{ name }}</h3>
55-
{% for stackIndex in client.stackIndexKeys %}
56-
{{ macro.printMessages(client.requstStack(stackIndex), client.responseStack(stackIndex), collector.journal.plugins(name)) }}
57-
{% endfor %}
58-
{% else %}
59-
<div class="empty">
60-
<p>No request were sent.</p>
55+
<button class="btn push-right" onclick="httplug_toggleBody()">Toggle message body</button>
56+
57+
<div class="sf-tabs">
58+
{% for name, client in collector.clients %}
59+
<div class="tab">
60+
<h3 class="tab-title">{{ name }} <span class="badge">{{ client.stackIndexKeys|length }}</span></h3>
61+
62+
<div class="tab-content">
63+
<p class="help">
64+
These messages are sent by client named "{{ name }}".
65+
</p>
66+
67+
{% for stackIndex in client.stackIndexKeys %}
68+
<h3>Request {{ stackIndex }}</h3>
69+
{{ macro.printMessages(client.requstStack(stackIndex), client.responseStack(stackIndex), collector.journal.plugins(name)) }}
70+
{% endfor %}
71+
</div>
6172
</div>
62-
{% endfor %}
73+
{% else %}
74+
<div class="empty">
75+
<p>No request were sent.</p>
76+
</div>
77+
{% endfor %}
78+
79+
</div>
6380

6481
{% endblock %}
6582

6683
{% macro printMessages(requestStack, responseStack, pluginNames) %}
67-
<table>
84+
<table class="httplug-request-table">
6885
<tr>
6986
<th width="50%">Request</th>
7087
<th width="50%">Response</th>
7188
</tr>
7289

7390
<tr>
74-
<td>{{ requestStack[0]|nl2br }}</td>
75-
<td>{{ responseStack[0]|nl2br }}</td>
91+
<td>{{ requestStack[responseStack|length-1]|httplug_markup|nl2br }}</td>
92+
<td>{{ responseStack[0]|httplug_markup|nl2br }}</td>
7693
</tr>
7794
{% if requestStack|length > 1 %}
7895
<tr>
79-
<td colspan="2" style="text-align:center">See all</td>
96+
<td colspan="2" style="text-align:center">
97+
<button class="btn" onclick="httplug_togglePluginStack(this)" data-label="Hide plugin stack">See plugin stack</button>
98+
</td>
8099
</tr>
81-
{% for idx in 1..requestStack|length-1 %}
82-
<tr>
83-
<td colspan="2" style="">{{ pluginNames[idx-1] }}</td>
84-
</tr>
85-
<tr>
86-
<td>{{ requestStack[idx]|nl2br }}</td>
87-
<td>{{ responseStack[idx]|nl2br }}</td>
100+
{% for idx in 0..requestStack|length-1 %}
101+
{% if loop.first %}
102+
{# We do not have a plugin at the first entry in the stack #}
103+
<tr class="httplug-request-stack">
104+
<td class="httplug-plugin-name">&darr; Start </td>
105+
<td class="httplug-plugin-name">- End</td>
106+
</tr>
107+
{% else %}
108+
<tr class="httplug-request-stack">
109+
<td class="httplug-plugin-name">&darr; {{ pluginNames[idx-1] }} </td>
110+
<td class="httplug-plugin-name">&uarr;</td>
111+
</tr>
112+
{% endif %}
113+
<tr class="httplug-request-stack">
114+
<td>{{ requestStack[idx]|httplug_markup|nl2br }}</td>
115+
<td>{{ responseStack[idx]|httplug_markup|nl2br }}</td>
88116
</tr>
117+
{% if loop.last %}
118+
<tr class="httplug-request-stack">
119+
<td class="httplug-plugin-name">&#10230; <span class="push-right">Internet</span></td>
120+
<td class="httplug-plugin-name">&uarr;</td>
121+
</tr>
122+
{% endif %}
89123
{% endfor %}
90124
{% endif %}
91125
</table>

‎composer.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@
2525
"php-http/stopwatch-plugin": "^1.0",
2626
"symfony/options-resolver": "^2.7|^3.0",
2727
"symfony/framework-bundle": "^2.7|^3.0",
28-
"php-http/discovery": "^0.9"
28+
"php-http/discovery": "^0.9",
29+
"twig/twig": "^1.18|^2.0"
2930
},
3031
"require-dev": {
3132
"phpunit/phpunit": "^4.5",

0 commit comments

Comments
 (0)