Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 0762d2d

Browse filesBrowse files
fabpotfabpot
committed
feature #30450 [Profiler] Render the performance graph with SVG (Tom32i)
This PR was squashed before being merged into the 4.3-dev branch (closes #30450). Discussion ---------- [Profiler] Render the performance graph with SVG | Q | A | ------------- | --- | Branch? | master | Bug fix? | no | New feature? | yes | BC breaks? | no | Deprecations? | no | Tests pass? | yes | Fixed tickets | Part 1, 3 and 4 of #27262 | License | MIT | Doc PR | n/a Following a suggestion by @ogizanagi in #27262, Here's a proposal to render the Request Graph, from the performance profiler panel, with SVG instead of canvas. Some benefits of the SVG format: - The text labels are searchable and can be selected. - It renders well on high DPI monitors. - [Colors and text styles](#27262 (comment)) can be defined with CSS just like the rest of the page. In addition, SVG allow us to consider (and easily implement) interactives features such as: - Zoom in and time navigation (thanks to the viewport). - Highlight hovered line (or other DOM related events). Preview: ![screenshot_2019-03-08 symfony profiler 1](https://user-images.githubusercontent.com/1846873/54036727-a33f4300-41bc-11e9-8be7-b1de10d4afd9.png) Filtered events example: ![capture d ecran 2019-03-08 a 17 22 47](https://user-images.githubusercontent.com/1846873/54041039-00d88d00-41c7-11e9-9590-23e809415c34.png) ### Progress : - [x] Render request events in SVG - [x] Show labels with duration and memory - [x] Show specific markers at start / end of lines - [x] Re-render graph when window resize - [x] Re-render graph when threshold change. - [x] Generate graph legend with only existing categories (part 1. of #27262 ) - [x] Show sub-request area with hatched pattern - [x] Allow to hide categories by clicking them on the legend (part 3. of #27262 ) - [x] Handle text overflow on long labels. - [x] Ensure JS code is compatible with all supported browsers (used [classes](https://caniuse.com/#feat=es6-class) and [arrow functions](https://caniuse.com/#feat=arrow-functions). - ~Add left-padding to sub-request graph?~ Commits ------- a69a718 [Profiler] Render the performance graph with SVG
2 parents d7fdcb1 + a69a718 commit 0762d2d
Copy full SHA for 0762d2d

File tree

5 files changed

+588
-421
lines changed
Filter options

5 files changed

+588
-421
lines changed

‎src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md

Copy file name to clipboardExpand all lines: src/Symfony/Bundle/WebProfilerBundle/CHANGELOG.md
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
CHANGELOG
22
=========
33

4+
4.3.0
5+
-----
6+
7+
* Replaced the canvas performance graph renderer with an SVG renderer
8+
49
4.1.0
510
-----
611

‎src/Symfony/Bundle/WebProfilerBundle/Resources/views/Collector/time.css.twig

Copy file name to clipboard
+105Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/* Variables */
2+
3+
.sf-profiler-timeline {
4+
--color-default: #777;
5+
--color-section: #999;
6+
--color-event-listener: #00B8F5;
7+
--color-template: #66CC00;
8+
--color-doctrine: #FF6633;
9+
--color-messenger-middleware: #BDB81E;
10+
--color-controller-argument-value-resolver: #8c5de6;
11+
}
12+
13+
/* Legend */
14+
15+
.sf-profiler-timeline .legends .timeline-category {
16+
border: none;
17+
background: none;
18+
border-left: 1em solid transparent;
19+
line-height: 1em;
20+
margin: 0 1em 0 0;
21+
padding: 0 0.5em;
22+
display: none;
23+
opacity: 0.5;
24+
}
25+
26+
.sf-profiler-timeline .legends .timeline-category.active {
27+
opacity: 1;
28+
}
29+
30+
.sf-profiler-timeline .legends .timeline-category.present {
31+
display: inline-block;
32+
}
33+
34+
.sf-profiler-timeline .legends .{{ classnames.default|raw }} { border-color: var(--color-default); }
35+
.sf-profiler-timeline .legends .{{ classnames.section|raw }} { border-color: var(--color-section); }
36+
.sf-profiler-timeline .legends .{{ classnames.event_listener|raw }} { border-color: var(--color-event-listener); }
37+
.sf-profiler-timeline .legends .{{ classnames.template|raw }} { border-color: var(--color-template); }
38+
.sf-profiler-timeline .legends .{{ classnames.doctrine|raw }} { border-color: var(--color-doctrine); }
39+
.sf-profiler-timeline .legends .{{ classnames['messenger.middleware']|raw }} { border-color: var(--color-messenger-middleware); }
40+
.sf-profiler-timeline .legends .{{ classnames['controller.argument_value_resolver']|raw }} { border-color: var(--color-controller-argument-value-resolver); }
41+
42+
.timeline-graph {
43+
margin: 1em 0;
44+
width: 100%;
45+
background-color: var(--table-background);
46+
border: 1px solid var(--table-border);
47+
}
48+
49+
/* Typography */
50+
51+
.timeline-graph .timeline-label {
52+
font-family: var(--font-sans-serif);
53+
font-size: 12px;
54+
line-height: 12px;
55+
font-weight: normal;
56+
color: var(--color-text);
57+
}
58+
59+
.timeline-graph .timeline-label .timeline-sublabel {
60+
margin-left: 1em;
61+
fill: var(--color-muted);
62+
}
63+
64+
.timeline-graph .timeline-subrequest,
65+
.timeline-graph .timeline-border {
66+
fill: none;
67+
stroke: var(--table-border);
68+
stroke-width: 1px;
69+
}
70+
71+
.timeline-graph .timeline-subrequest {
72+
fill: url(#subrequest);
73+
fill-opacity: 0.5;
74+
}
75+
76+
.timeline-subrequest-pattern {
77+
fill: var(--table-border);
78+
}
79+
80+
/* Timeline periods */
81+
82+
.timeline-graph .timeline-period {
83+
stroke-width: 0;
84+
}
85+
.timeline-graph .{{ classnames.default|raw }} .timeline-period {
86+
fill: var(--color-default);
87+
}
88+
.timeline-graph .{{ classnames.section|raw }} .timeline-period {
89+
fill: var(--color-section);
90+
}
91+
.timeline-graph .{{ classnames.event_listener|raw }} .timeline-period {
92+
fill: var(--color-event-listener);
93+
}
94+
.timeline-graph .{{ classnames.template|raw }} .timeline-period {
95+
fill: var(--color-template);
96+
}
97+
.timeline-graph .{{ classnames.doctrine|raw }} .timeline-period {
98+
fill: var(--color-doctrine);
99+
}
100+
.timeline-graph .{{ classnames['messenger.middleware']|raw }} .timeline-period {
101+
fill: var(--color-messenger-middleware);
102+
}
103+
.timeline-graph .{{ classnames['controller.argument_value_resolver']|raw }} .timeline-period {
104+
fill: var(--color-controller-argument-value-resolver);
105+
}

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.