Skip to content

Commit 28b9ee0

Browse files
georgidhristovgeorgidhristov
authored
refactor(ui): simplify details page layout
Refactored the details page layout to improve readability and reduce visual noise.
2 parents 6f7deea + cab0997 commit 28b9ee0

7 files changed

Lines changed: 156 additions & 220 deletions

File tree

‎DebugProbe.AspNetCore.Tests/Rendering/HtmlRendererTests.cs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,16 +46,16 @@ public void Details_page_renders_captured_values()
4646
}
4747

4848
[Fact]
49-
public void Payload_badges_render_for_json_empty_text_and_hidden_payloads()
49+
public void Payload_groups_render_for_json_empty_text_and_hidden_payloads()
5050
{
5151
var jsonHtml = HtmlRenderer.RenderDetailsPage(CreateEntry(), CreateEnvironment(), "{\"ok\":true}", "plain");
5252
var emptyHtml = HtmlRenderer.RenderDetailsPage(CreateEntry(), CreateEnvironment(), "", "");
5353
var hiddenHtml = HtmlRenderer.RenderDetailsPage(CreateEntry(), CreateEnvironment(), "[Body too large]", "[Body too large]");
5454

55-
Assert.Contains("payload-json", jsonHtml);
56-
Assert.Contains("payload-text", jsonHtml);
57-
Assert.Contains("payload-empty", emptyHtml);
58-
Assert.Contains("payload-hidden", hiddenHtml);
55+
Assert.Contains("Request", jsonHtml);
56+
Assert.Contains("Response", jsonHtml);
57+
58+
Assert.Contains("[Body too large]", hiddenHtml);
5959
}
6060

6161
[Fact]

‎DebugProbe.AspNetCore/Assets/css/debugprobe.css‎

Lines changed: 88 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ h3 {
2828
margin-bottom: 10px;
2929
}
3030

31+
h4 {
32+
margin: 0;
33+
}
34+
3135
/* =========================
3236
Layout
3337
========================= */
@@ -159,18 +163,98 @@ tr:hover {
159163
Section Titles
160164
========================= */
161165

166+
.payload-group {
167+
margin-top: 24px;
168+
padding: 18px;
169+
background: #fff;
170+
border: 1px solid #e8e8e8;
171+
border-left-width: 5px;
172+
border-radius: 8px;
173+
}
174+
175+
.request-group {
176+
border-left-color: #2f80ed;
177+
}
178+
179+
.response-group {
180+
border-left-color: #27ae60;
181+
}
182+
183+
.response-group.response-error {
184+
border-left-color: #e74c3c;
185+
}
186+
187+
.compare-group {
188+
border-left-color: #f39c12;
189+
}
190+
191+
.compare-description {
192+
margin-top: 4px;
193+
color: #777;
194+
font-size: 0.9rem;
195+
}
196+
197+
.payload-group-title {
198+
margin-bottom: 16px;
199+
padding-bottom: 12px;
200+
border-bottom: 1px solid #f0f0f0;
201+
}
202+
203+
.payload-group-title h3 {
204+
margin: 0;
205+
}
206+
162207
.section-title {
163208
display: flex;
164209
align-items: center;
165210
gap: 10px;
166-
margin-top: 25px;
167-
margin-bottom: 10px;
211+
margin-top: 18px;
212+
margin-bottom: 8px;
213+
}
214+
215+
.payload-group-title + .section-title {
216+
margin-top: 0;
168217
}
169218

170-
.section-title h3 {
219+
.section-title h3,
220+
.section-title h4 {
171221
margin: 0;
172222
}
173223

224+
.section-title h4 {
225+
color: #555;
226+
font-size: 13px;
227+
font-weight: 700;
228+
letter-spacing: 0;
229+
}
230+
231+
.compare-controls {
232+
display: flex;
233+
flex-wrap: wrap;
234+
gap: 8px;
235+
padding-bottom: 14px;
236+
}
237+
238+
.compare-controls input {
239+
min-width: 220px;
240+
flex: 1;
241+
}
242+
243+
@media (max-width: 640px) {
244+
.container {
245+
padding: 14px;
246+
}
247+
248+
.payload-group {
249+
padding: 14px;
250+
}
251+
252+
.compare-controls input,
253+
.compare-controls button {
254+
width: 100%;
255+
}
256+
}
257+
174258
/* =========================
175259
Code Blocks
176260
========================= */
@@ -239,8 +323,7 @@ pre {
239323
}
240324

241325
.code-badge,
242-
.status,
243-
.diff-badge {
326+
.status {
244327
display: inline-flex;
245328
align-items: center;
246329
justify-content: center;
@@ -253,40 +336,6 @@ pre {
253336
font-size: 12px;
254337
}
255338

256-
.payload-json {
257-
background: #183d24;
258-
color: #6ddf8b;
259-
}
260-
261-
.payload-invalid-json {
262-
background: #4a1717;
263-
color: #ff8a8a;
264-
}
265-
266-
.payload-text {
267-
background: #4a3112;
268-
color: #ffb84d;
269-
}
270-
271-
.payload-url {
272-
background: #1d3557;
273-
color: #7cc7ff;
274-
}
275-
276-
.payload-empty {
277-
background: #444;
278-
color: #ddd;
279-
}
280-
281-
.payload-hidden {
282-
display: none;
283-
}
284-
285-
.diff-badge {
286-
background: #4a1717;
287-
color: #ff8a8a;
288-
}
289-
290339
/* =========================
291340
Diff
292341
========================= */

‎DebugProbe.AspNetCore/Assets/html/_shared/layout.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,9 @@
1010
{{env_block}}
1111
</div>
1212

13-
1413
{{content}}
1514

1615
<script src="/debug/js/debugprobe-ui.js"></script>
1716
<script src="/debug/js/debugprobe-compare-engine.js"></script>
1817
<script src="/debug/js/debugprobe-compare-renderer.js"></script>
19-
</body>
18+
</body>

‎DebugProbe.AspNetCore/Assets/html/details.html‎

Lines changed: 58 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ <h2>{{method}} {{path}}</h2>
77
<div class="details-grid">
88

99
<div class="details-card">
10-
<div class="details-card-title">Overview</div>
10+
<div class="details-card-title">Transaction Overview</div>
1111

1212
<div class="details-item">
1313
<span>Status</span>
@@ -25,7 +25,7 @@ <h2>{{method}} {{path}}</h2>
2525
</div>
2626

2727
<div class="details-item">
28-
<span>Time</span>
28+
<span>UTC</span>
2929
<strong>{{time}}</strong>
3030
</div>
3131

@@ -51,7 +51,7 @@ <h2>{{method}} {{path}}</h2>
5151
</div>
5252

5353
<div class="details-card">
54-
<div class="details-card-title">Environment</div>
54+
<div class="details-card-title">Environment Overview</div>
5555

5656
<div class="details-item">
5757
<span>Environment</span>
@@ -91,91 +91,76 @@ <h2>{{method}} {{path}}</h2>
9191
</div>
9292

9393

94-
<div class="section-title">
95-
<h3>Request URL</h3>
96-
97-
<div class="code-badges">
98-
<span class="code-badge payload-url">
99-
URL
100-
</span>
94+
<section class="payload-group request-group">
95+
<div class="payload-group-title">
96+
<h3>Request</h3>
10197
</div>
102-
</div>
103-
<div class="code-block">
104-
<button class="copy-btn" onclick="copyText(this)">Copy</button>
105-
<pre>{{requestUrl}}</pre>
106-
</div>
107-
108-
<div class="section-title">
109-
<h3>Request Headers</h3>
11098

111-
<div class="code-badges">
112-
<span class="code-badge payload-text">
113-
HEADERS
114-
</span>
99+
<div class="section-title">
100+
<h4>URL</h4>
115101
</div>
116-
</div>
117-
118-
<div class="code-block">
119-
<button class="copy-btn" onclick="copyText(this)">Copy</button>
120-
<pre>{{requestHeaders}}</pre>
121-
</div>
122-
123-
<div class="section-title">
124-
<h3>Request Body</h3>
125-
126-
<div class="code-badges">
127-
<span class="code-badge {{requestTypeClass}}">
128-
{{requestType}}
129-
</span>
102+
<div class="code-block">
103+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
104+
<pre>{{requestUrl}}</pre>
130105
</div>
131-
</div>
132-
<div class="code-block">
133-
<button class="copy-btn" onclick="copyText(this)">Copy</button>
134-
<pre>{{request}}</pre>
135-
</div>
136106

137-
<div class="section-title">
138-
<h3>Response Headers</h3>
107+
<div class="section-title">
108+
<h4>Headers</h4>
109+
</div>
139110

140-
<div class="code-badges">
141-
<span class="code-badge payload-text">
142-
HEADERS
143-
</span>
111+
<div class="code-block">
112+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
113+
<pre>{{requestHeaders}}</pre>
144114
</div>
145-
</div>
146115

147-
<div class="code-block">
148-
<button class="copy-btn" onclick="copyText(this)">Copy</button>
149-
<pre>{{responseHeaders}}</pre>
150-
</div>
116+
<div class="section-title">
117+
<h4>Body</h4>
118+
</div>
119+
<div class="code-block">
120+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
121+
<pre>{{request}}</pre>
122+
</div>
123+
</section>
151124

152-
<div class="section-title">
153-
<h3>Response Body</h3>
125+
<section class="payload-group response-group {{responseGroupClass}}">
126+
<div class="payload-group-title">
127+
<h3>Response</h3>
128+
</div>
154129

155-
<div class="code-badges">
156-
<span class="code-badge {{responseTypeClass}}">
157-
{{responseType}}
158-
</span>
130+
<div class="section-title">
131+
<h4>Headers</h4>
132+
</div>
159133

160-
<span class="code-badge status {{statusClass}}">
161-
{{responseStatusCode}}
162-
</span>
134+
<div class="code-block">
135+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
136+
<pre>{{responseHeaders}}</pre>
163137
</div>
164-
</div>
165-
<div class="code-block">
166-
<button class="copy-btn" onclick="copyText(this)">Copy</button>
167-
<pre>{{response}}</pre>
168-
</div>
169138

170-
<h3>Compare</h3>
139+
<div class="section-title">
140+
<h4>Body</h4>
141+
</div>
142+
<div class="code-block">
143+
<button class="copy-btn" onclick="copyText(this)">Copy</button>
144+
<pre>{{response}}</pre>
145+
</div>
146+
</section>
147+
148+
<section class="payload-group compare-group">
149+
<div class="payload-group-title">
150+
<h3>Compare</h3>
151+
<p class="compare-description">
152+
Compare this trace with another environment/server.
153+
</p>
154+
</div>
171155

172-
<div style="padding-bottom:14px;">
173-
<input id="baseUrl" placeholder="http://server:port" />
174-
<input id="compareId" placeholder="trace id" />
175-
<button onclick="runCompare()">Compare</button>
176-
</div>
156+
<div class="compare-controls">
157+
<input id="baseUrl" placeholder="http://server:port" />
158+
<input id="compareId" placeholder="trace id" />
159+
<button onclick="runCompare()">Compare</button>
160+
</div>
177161

178-
<div id="compareResult"></div>
162+
<div id="compareResult"></div>
163+
</section>
179164

180165
</div>
181166

0 commit comments

Comments
 (0)