Commit efc08c5

authored

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

1 parent 1c984ba commit efc08c5Copy full SHA for efc08c5

File tree

2 files changed

+33

-7

lines changed

Lib/profiling/sampling
- flamegraph.css
- flamegraph.js

2 files changed

+33

-7

lines changed

`‎Lib/profiling/sampling/flamegraph.css`

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -403,3 +403,27 @@ body {`
`403`	`403`	`margin: 0;`
`404`	`404`	`padding: 12px 0;`
`405`	`405`	`}`
	`406`	`+`
	`407`	`+/* Tooltip overflow fixes */`
	`408`	`+.python-tooltip {`
	`409`	`+ max-width: 500px !important;`
	`410`	`+ word-wrap: break-word !important;`
	`411`	`+ overflow-wrap: break-word !important;`
	`412`	`+ box-sizing: border-box !important;`
	`413`	`+}`
	`414`	`+`
	`415`	`+/* Responsive tooltip adjustments */`
	`416`	`+@media (max-width: 768px) {`
	`417`	`+ .python-tooltip {`
	`418`	`+ max-width: calc(100vw - 40px) !important;`
	`419`	`+ max-height: calc(100vh - 80px) !important;`
	`420`	`+ overflow-y: auto !important;`
	`421`	`+ }`
	`422`	`+}`
	`423`	`+`
	`424`	`+@media (max-width: 480px) {`
	`425`	`+ .python-tooltip {`
	`426`	`+ max-width: calc(100vw - 20px) !important;`
	`427`	`+ font-size: 12px !important;`
	`428`	`+ }`
	`429`	`+}`

`‎Lib/profiling/sampling/flamegraph.js`

Lines changed: 9 additions & 7 deletions

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,8 @@ function createPythonTooltip(data) {`
`42`	`42`	`.style("font-weight", "400")`
`43`	`43`	`.style("line-height", "1.5")`
`44`	`44`	`.style("max-width", "500px")`
	`45`	`+ .style("word-wrap", "break-word")`
	`46`	`+ .style("overflow-wrap", "break-word")`
`45`	`47`	`.style("font-family", "'Source Sans Pro', sans-serif")`
`46`	`48`	`.style("opacity", 0);`
`47`	`49`	`}`
`@@ -61,7 +63,7 @@ function createPythonTooltip(data) {`
`61`	`63`	`<div style="font-family: 'SF Mono', 'Monaco', 'Consolas', ` +
`62`	`64`	`monospace; font-size: 12px; color: ${
`63`	`65`	`line.startsWith("→") ? "#3776ab" : "#5a6c7d"`
`64`		`- }; white-space: pre; line-height: 1.4; padding: 2px 0;">${line`
	`66`	`+ }; white-space: pre-wrap; word-break: break-all; overflow-wrap: break-word; line-height: 1.4; padding: 2px 0;">${line`
`65`	`67`	`.replace(/&/g, "&")`
`66`	`68`	`.replace(/</g, "<")`
`67`	`69`	.replace(/>/g, ">")}</div>`,
`@@ -77,7 +79,7 @@ function createPythonTooltip(data) {`
`77`	`79`	`</div>`
`78`	`80`	`<div style="background: #f8f9fa; border: 1px solid #e9ecef;`
`79`	`81`	`border-radius: 6px; padding: 12px; max-height: 150px;`
`80`		`- overflow-y: auto;">`
	`82`	`+ overflow-y: auto; overflow-x: hidden;">`
`81`	`83`	`${sourceLines}`
`82`	`84`	`</div>`
`83`	`85`	</div>`;
`@@ -92,7 +94,7 @@ function createPythonTooltip(data) {`
`92`	`94`	`</div>`
`93`	`95`	`<div style="background: #f8f9fa; border: 1px solid #e9ecef;`
`94`	`96`	`border-radius: 6px; padding: 12px; max-height: 150px;`
`95`		`- overflow-y: auto; font-family: monospace; font-size: 11px;">`
	`97`	`+ overflow-y: auto; overflow-x: hidden; font-family: monospace; font-size: 11px; word-break: break-all; overflow-wrap: break-word;">`
`96`	`98`	`${JSON.stringify(source, null, 2)}`
`97`	`99`	`</div>`
`98`	`100`	</div>`;
`@@ -101,13 +103,13 @@ function createPythonTooltip(data) {`
`101`	`103`	const tooltipHTML = `
`102`	`104`	`<div>`
`103`	`105`	`<div style="color: #3776ab; font-weight: 600; font-size: 16px;`
`104`		`- margin-bottom: 8px; line-height: 1.3;">`
`105`		`- ${d.data.funcname\|\|d.data.name}`
	`106`	`+ margin-bottom: 8px; line-height: 1.3; word-break: break-word; overflow-wrap: break-word;">`
	`107`	`+ ${funcname}`
`106`	`108`	`</div>`
`107`	`109`	`<div style="color: #5a6c7d; font-size: 13px; margin-bottom: 12px;`
`108`	`110`	`font-family: monospace; background: #f8f9fa;`
`109`		`- padding: 4px 8px; border-radius: 4px;">`
`110`		`- ${d.data.filename\|\|""}${d.data.lineno ? ":" + d.data.lineno : ""}`
	`111`	`+ padding: 4px 8px; border-radius: 4px; word-break: break-all; overflow-wrap: break-word;">`
	`112`	`+ ${filename}${d.data.lineno ? ":" + d.data.lineno : ""}`
`111`	`113`	`</div>`
`112`	`114`	`<div style="display: grid; grid-template-columns: auto 1fr;`
`113`	`115`	`gap: 8px 16px; font-size: 14px;">`

0 commit comments

Comments

(0)

Navigation Menu

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Commit efc08c5

File tree

2 files changed

2 files changed

`‎Lib/profiling/sampling/flamegraph.css`

`‎Lib/profiling/sampling/flamegraph.js`

0 commit comments