Stowage/cpython
2
0
Fork 0
mirror of https://github.com/python/cpython.git synced 2025-11-11 19:12:05 +00:00
Code Issues Projects Releases Packages Wiki Activity

gh-135953: Prevent overflow in the profiler flamegraph hover boxes (#138880)

Browse source
This commit is contained in:
Pablo Galindo Salgado 2025-09-14 21:50:18 +01:00 • committed by GitHub
parent 1c984ba953
commit efc08c5fbf
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 33 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

24
Lib/profiling/sampling/flamegraph.css
View file

@ -403,3 +403,27 @@ .chart-container {
margin: 0;
padding: 12px 0;
}
/* Tooltip overflow fixes */
.python-tooltip {
max-width: 500px !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
box-sizing: border-box !important;
}
/* Responsive tooltip adjustments */
@media (max-width: 768px) {
.python-tooltip {
max-width: calc(100vw - 40px) !important;
max-height: calc(100vh - 80px) !important;
overflow-y: auto !important;
}
}
@media (max-width: 480px) {
.python-tooltip {
max-width: calc(100vw - 20px) !important;
font-size: 12px !important;
}
}

16
Lib/profiling/sampling/flamegraph.js
View file

@ -42,6 +42,8 @@ function createPythonTooltip(data) {
.style("font-weight", "400")
.style("line-height", "1.5")
.style("max-width", "500px")
.style("word-wrap", "break-word")
.style("overflow-wrap", "break-word")
.style("font-family", "'Source Sans Pro', sans-serif")
.style("opacity", 0);
}
@ -61,7 +63,7 @@ function createPythonTooltip(data) {
`<div style="font-family: 'SF Mono', 'Monaco', 'Consolas', ` +
`monospace; font-size: 12px; color: ${
line.startsWith("→") ? "#3776ab" : "#5a6c7d"
}; white-space: pre; line-height: 1.4; padding: 2px 0;">${line
}; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; line-height: 1.4; padding: 2px 0;">${line
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")}</div>`,
@ -77,7 +79,7 @@ function createPythonTooltip(data) {
</div>
<div style="background: #f8f9fa; border: 1px solid #e9ecef;
border-radius: 6px; padding: 12px; max-height: 150px;
overflow-y: auto;">
overflow-y: auto; overflow-x: hidden;">
${sourceLines}
</div>
</div>`;
@ -92,7 +94,7 @@ function createPythonTooltip(data) {
</div>
<div style="background: #f8f9fa; border: 1px solid #e9ecef;
border-radius: 6px; padding: 12px; max-height: 150px;
overflow-y: auto; font-family: monospace; font-size: 11px;">
overflow-y: auto; overflow-x: hidden; font-family: monospace; font-size: 11px; word-break: break-all; overflow-wrap: break-word;">
${JSON.stringify(source, null, 2)}
</div>
</div>`;
@ -101,13 +103,13 @@ function createPythonTooltip(data) {
const tooltipHTML = `
<div>
<div style="color: #3776ab; font-weight: 600; font-size: 16px;
margin-bottom: 8px; line-height: 1.3;">
${d.data.funcname || d.data.name}
margin-bottom: 8px; line-height: 1.3; word-break: break-word; overflow-wrap: break-word;">
${funcname}
</div>
<div style="color: #5a6c7d; font-size: 13px; margin-bottom: 12px;
font-family: monospace; background: #f8f9fa;
padding: 4px 8px; border-radius: 4px;">
${d.data.filename || ""}${d.data.lineno ? ":" + d.data.lineno : ""}
padding: 4px 8px; border-radius: 4px; word-break: break-all; overflow-wrap: break-word;">
${filename}${d.data.lineno ? ":" + d.data.lineno : ""}
</div>
<div style="display: grid; grid-template-columns: auto 1fr;
gap: 8px 16px; font-size: 14px;">