Skip to content

Commit 5707f11

Browse files
mstangemstange
authored
Enforce max-width: 600px for all tooltips (Merge PR #3480)
2 parents c975429 + 78146f0 commit 5707f11

17 files changed

+63
-118
lines changed

‎src/components/shared/Backtrace.css

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.backtrace {
2-
max-width: var(--tooltip-detail-max-width);
32
padding: 0;
43
margin: 0;
54
}

‎src/components/tooltip/CallNode.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,9 @@ export class TooltipCallNode extends React.PureComponent<Props> {
216216
<div className="tooltipLabel" key="file">
217217
Script URL:
218218
</div>,
219-
fileNameURL,
219+
<div className="tooltipDetailsUrl" key="fileVal">
220+
{fileNameURL}
221+
</div>,
220222
];
221223
}
222224

@@ -249,7 +251,9 @@ export class TooltipCallNode extends React.PureComponent<Props> {
249251
<div className="tooltipLabel" key="iframe">
250252
iframe URL:
251253
</div>,
252-
<div key="iframeVal">{page.url}</div>,
254+
<div className="tooltipDetailsUrl" key="iframeVal">
255+
{page.url}
256+
</div>,
253257
];
254258

255259
// Getting the embedder URL now.
@@ -271,7 +275,9 @@ export class TooltipCallNode extends React.PureComponent<Props> {
271275
<div className="tooltipLabel" key="page">
272276
Page URL:
273277
</div>,
274-
<div key="pageVal">{page.url}</div>,
278+
<div className="tooltipDetailsUrl" key="pageVal">
279+
{page.url}
280+
</div>,
275281
];
276282
}
277283
}

‎src/components/tooltip/Marker.js

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -391,14 +391,9 @@ class MarkerTooltipContents extends React.PureComponent<Props> {
391391
* a short list of rendering strategies, in the order they appear.
392392
*/
393393
render() {
394-
const { className, restrictHeightWidth } = this.props;
394+
const { className } = this.props;
395395
return (
396-
<div
397-
className={classNames('tooltipMarker', className)}
398-
style={{
399-
'--tooltip-detail-max-width': restrictHeightWidth ? '600px' : '100%',
400-
}}
401-
>
396+
<div className={classNames('tooltipMarker', className)}>
402397
<div className="tooltipHeader">
403398
<div className="tooltipOneLine">
404399
{this._maybeRenderMarkerDuration()}

‎src/components/tooltip/NetworkMarker.css

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,3 @@
5151
.tooltipNetworkMimeTypeSwatch {
5252
background-color: var(--marker-color);
5353
}
54-
55-
.tooltipNetworkUrl {
56-
word-break: break-word;
57-
}

‎src/components/tooltip/NetworkMarker.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -381,14 +381,14 @@ export function getNetworkMarkerDetails(
381381
{payload.cache}
382382
</TooltipDetail>,
383383
<TooltipDetail label="URL" key="Network-URL">
384-
<span className="tooltipNetworkUrl">{payload.URI}</span>
384+
<span className="tooltipDetailsUrl">{payload.URI}</span>
385385
</TooltipDetail>
386386
);
387387

388388
if (payload.RedirectURI) {
389389
details.push(
390390
<TooltipDetail label="Redirect URL" key="Network-Redirect URL">
391-
<span className="tooltipNetworkUrl">{payload.RedirectURI}</span>
391+
<span className="tooltipDetailsUrl">{payload.RedirectURI}</span>
392392
</TooltipDetail>
393393
);
394394
}

‎src/components/tooltip/Tooltip.css

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,7 @@
22
position: fixed;
33
display: inline-block;
44
overflow: hidden;
5-
6-
/**
7-
* The VISUAL_MARGIN = 8 for the Tooltip is defined in src/components/tooltip/Tooltip.js.
8-
* Both added together equals: 8px + 8px = 16px
9-
*/
10-
max-width: calc(100% - 16px);
11-
box-sizing: border-box;
5+
max-width: 600px;
126
padding: 8px;
137
border: 1px solid #ccc;
148
background-color: var(--grey-10);
@@ -69,7 +63,10 @@
6963
display: grid;
7064
padding-top: 5px;
7165
grid-gap: 2px 5px;
72-
grid-template-columns: min-content auto;
66+
67+
/* Make the right column "definitely" sized (ignore its intrinsic size) by setting a min-width of 0.
68+
* This stops long contents from overflowing the tooltip. */
69+
grid-template-columns: min-content minmax(0, 1fr);
7370
}
7471

7572
.tooltipDetailSeparator {
@@ -79,22 +76,13 @@
7976
}
8077

8178
.tooltipDetailsUrl {
82-
/* URLs can be really long, and it's disruptive when widths change rapidly
83-
* this components. Define an arbitrary max-width in px to restrict this change.
84-
* Set the variable to 100% to allow the full-width, e.g. in the sidebar. */
85-
max-width: var(--tooltip-detail-max-width);
8679
word-break: break-all;
8780
}
8881

8982
.tooltipDetailsDim {
9083
color: var(--grey-50);
9184
}
9285

93-
.tooltipDetailsDescription {
94-
/* Stop long descriptions from making the tooltip disruptively long. */
95-
max-width: var(--tooltip-detail-max-width);
96-
}
97-
9886
.tooltipLabel {
9987
color: var(--grey-50);
10088
text-align: right;

‎src/components/tooltip/Tooltip.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,10 +93,6 @@ export class Tooltip extends React.PureComponent<Props> {
9393
<div
9494
className="tooltip"
9595
data-testid="tooltip"
96-
style={{
97-
/* This is the default max width, but can be redefined in children */
98-
'--tooltip-detail-max-width': '600px',
99-
}}
10096
ref={this._interiorElementRef}
10197
>
10298
{this.props.children}

‎src/test/components/Tooltip.test.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ describe('shared/Tooltip', () => {
4343
expect(getTooltipStyle()).toEqual({
4444
left: `${MOUSE_OFFSET}px`,
4545
top: `${MOUSE_OFFSET}px`,
46-
'--tooltip-detail-max-width': '600px',
4746
});
4847

4948
const mouseX = 50;
@@ -53,7 +52,6 @@ describe('shared/Tooltip', () => {
5352
expect(getTooltipStyle()).toEqual({
5453
left: `${mouseX + MOUSE_OFFSET}px`,
5554
top: `${mouseY + MOUSE_OFFSET}px`,
56-
'--tooltip-detail-max-width': '600px',
5755
});
5856
});
5957

@@ -72,7 +70,6 @@ describe('shared/Tooltip', () => {
7270
expect(getTooltipStyle()).toEqual({
7371
left: `${expectedLeft}px`,
7472
top: `${expectedTop}px`,
75-
'--tooltip-detail-max-width': '600px',
7673
});
7774
});
7875

@@ -87,7 +84,6 @@ describe('shared/Tooltip', () => {
8784
expect(getTooltipStyle()).toEqual({
8885
left: `${expectedLeft}px`,
8986
top: `${expectedTop}px`,
90-
'--tooltip-detail-max-width': '600px',
9187
});
9288
});
9389
});

‎src/test/components/__snapshots__/FlameGraph.test.js.snap

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ exports[`FlameGraph has a tooltip that matches the snapshot 1`] = `
2121
<div
2222
class="tooltip"
2323
data-testid="tooltip"
24-
style="--tooltip-detail-max-width: 600px; left: 14px; top: 306px;"
24+
style="left: 14px; top: 306px;"
2525
>
2626
<div
2727
class="tooltipCallNode"
@@ -152,7 +152,11 @@ exports[`FlameGraph has a tooltip that matches the snapshot 1`] = `
152152
>
153153
Script URL:
154154
</div>
155-
path/to/file:10:100
155+
<div
156+
class="tooltipDetailsUrl"
157+
>
158+
path/to/file:10:100
159+
</div>
156160
</div>
157161
</div>
158162
</div>
@@ -694,7 +698,7 @@ exports[`FlameGraph shows a tooltip with the resource information 1`] = `
694698
<div
695699
class="tooltip"
696700
data-testid="tooltip"
697-
style="--tooltip-detail-max-width: 600px; left: 80.66666666666666px; top: 226px;"
701+
style="left: 80.66666666666666px; top: 226px;"
698702
>
699703
<div
700704
class="tooltipCallNode"
@@ -825,7 +829,11 @@ exports[`FlameGraph shows a tooltip with the resource information 1`] = `
825829
>
826830
Script URL:
827831
</div>
828-
path/to/file:17:107
832+
<div
833+
class="tooltipDetailsUrl"
834+
>
835+
path/to/file:17:107
836+
</div>
829837
<div
830838
class="tooltipLabel"
831839
>

‎src/test/components/__snapshots__/MarkerChart.test.js.snap

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -256,11 +256,10 @@ exports[`MarkerChart renders the hoveredItem markers properly 2`] = `
256256
<div
257257
class="tooltip"
258258
data-testid="tooltip"
259-
style="--tooltip-detail-max-width: 600px; left: 189px; top: 150px;"
259+
style="left: 189px; top: 150px;"
260260
>
261261
<div
262262
class="tooltipMarker"
263-
style="--tooltip-detail-max-width: 600px;"
264263
>
265264
<div
266265
class="tooltipHeader"
@@ -1081,11 +1080,10 @@ exports[`MarkerChart with active tab renders the hovered marker properly 2`] = `
10811080
<div
10821081
class="tooltip"
10831082
data-testid="tooltip"
1084-
style="--tooltip-detail-max-width: 600px; left: 102px; top: 38px;"
1083+
style="left: 102px; top: 38px;"
10851084
>
10861085
<div
10871086
class="tooltipMarker"
1088-
style="--tooltip-detail-max-width: 600px;"
10891087
>
10901088
<div
10911089
class="tooltipHeader"

0 commit comments

Comments
 (0)