8722752454

Committed 17 Apr 2024 01:25PM UTC coverage: 31.994% (-0.06%) from 32.056%

Build # 8722752454

Build Type

Pull #9127

github

Committed by

web-flow

Commit Message

Merge 177a87420 into 094c3dc91

Pull Request Pull Request #9127: Wait for the first render before starting the client bundle

Run Details

4643 of 37815 branches covered (12.28%)

Branch coverage included in aggregate %.

0 of 12 new or added lines in 2 files covered. (0.0%)

134 existing lines in 15 files now uncovered.

27054 of 61257 relevant lines covered (44.16%)

182.92 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

39.02

/packages/lesswrong/components/comments/CommentFrame.tsx

import React from 'react';
import { registerComponent } from '../../lib/vulcan-lib';
import type { CommentTreeOptions } from './commentTree';
import classNames from 'classnames';
import { isFriendlyUI } from '../../themes/forumTheme';

export const HIGHLIGHT_DURATION = 3

export const CONDENSED_MARGIN_BOTTOM = 4

const styles = (theme: ThemeType): JssStyles => ({
  node: {
    border: theme.palette.border.commentBorder,
    borderRadius: isFriendlyUI ? theme.borderRadius.small : undefined,
    cursor: "default",
    // Higher specificity to override child class (variant syntax)
    '&$deleted': {
      opacity: 0.6
    }
  },
  commentsNodeRoot: {
    borderRadius: theme.borderRadius.small,
  },
  child: {
    marginLeft: theme.spacing.unit,
    marginBottom: 6,
    borderLeft: theme.palette.border.commentBorder,
    borderTop: theme.palette.border.commentBorder,
    borderBottom: theme.palette.border.commentBorder,
    borderRight: "none",
    borderRadius: isFriendlyUI
      ? `${theme.borderRadius.small}px 0 0 ${theme.borderRadius.small}px`
      : "2px 0 0 2px",
  },
  new: {
    '&&': {
      borderLeft: `solid 5px ${theme.palette.secondary.light}${isFriendlyUI ? '' : '8c'}`,
      '&:hover': {
        borderLeft: `solid 5px ${theme.palette.secondary.main}${isFriendlyUI ? '' : '8c'}`
      },
    }
  },
  deleted: {},
  isAnswer: {
    border: theme.palette.border.answerBorder,
  },
  answerChildComment: {
    marginBottom: theme.spacing.unit,
    border: theme.palette.border.commentBorder,
  },
  childAnswerComment: {
    borderRight: "none"
  },
  oddAnswerComment: {
    backgroundColor: theme.palette.panelBackground.default,
  },
  answerLeafComment: {
    paddingBottom: 0
  },
  isSingleLine: {
    marginBottom: 0,
    borderBottom: "none",
    borderTop: theme.palette.border.commentBorder,
    '&.comments-node-root':{
      marginBottom: CONDENSED_MARGIN_BOTTOM,
      borderBottom: theme.palette.border.commentBorder,
    }
  },
  condensed: {
    '&.comments-node-root':{
      marginBottom: CONDENSED_MARGIN_BOTTOM,
    }
  },
  shortformTop: {
    '&&': {
      marginTop: isFriendlyUI ? theme.spacing.unit*2 : theme.spacing.unit*4,
      marginBottom: 0,
    }
  },
  hoverPreview: {
    '&&': {
      marginBottom: 0
    }
  },
  moderatorHat: {
    "&.comments-node-even": {
      background: theme.palette.panelBackground.commentModeratorHat,
    },
    "&.comments-node-odd": {
      background: theme.palette.panelBackground.commentModeratorHat,
    },
  },
  '@keyframes higlight-animation': {
    from: {
      backgroundColor: theme.palette.panelBackground.commentHighlightAnimation,
      border: theme.palette.border.maxIntensity,
    },
    to: {
      backgroundColor: "none",
      border: theme.palette.border.commentBorder,
    }
  },
  highlightAnimation: {
    animation: `higlight-animation ${HIGHLIGHT_DURATION}s ease-in-out 0s;`
  },
  promoted: {
    border: `solid 1px ${theme.palette.lwTertiary.main}`,
  },
  isPinnedOnProfile: {
    // What we _really_ want to do here is apply a 1px border with the given linear
    // gradient, however, the `border-image` property isn't compatible with
    // `border-radius`. Using the `::before` selector is a hack to get around this.
    "&::before": {
      content: "''",
      position: "absolute",
      zIndex: -1,
      top: 1,
      right: 1,
      bottom: 1,
      left: 1,
      boxSizing: "border-box",
      backgroundColor: theme.palette.panelBackground.default,
      borderRadius: isFriendlyUI ? theme.borderRadius.small : 0,
    },
    position: "relative",
    backgroundImage: `linear-gradient(to bottom right, ${theme.palette.border.secondaryHighlight}, ${theme.palette.border.primaryHighlight})`,
    border: "none",
    zIndex: 0,
    '&.CommentFrame-isAnswer': {
      backgroundImage: `linear-gradient(to bottom right, ${theme.palette.border.secondaryHighlight2}, ${theme.palette.border.primaryHighlight2})`,
    },
  },
});

const CommentFrame = ({
  comment,
  treeOptions,
  onClick,
  id,
  nestingLevel,
  hasChildren,
  highlighted,
  isSingleLine,
  isChild,
  isNewComment,
  isReplyToAnswer,
  hoverPreview,
  shortform,
  showPinnedOnProfile,
  children,
  className,
  classes
}: {
  comment: CommentsList,
  treeOptions: CommentTreeOptions,
  onClick?: (event: any) => void,
  id?: string,
  
  nestingLevel: number,
  hasChildren?: boolean,
  highlighted?: boolean,
  isSingleLine?: boolean,
  isChild?: boolean,
  isNewComment?: boolean,
  isReplyToAnswer?: boolean,
  hoverPreview?: boolean,
  shortform?: boolean,
  showPinnedOnProfile?: boolean,
  
  children: React.ReactNode,
  className?: string,
  classes: ClassesType,
}) => {
  const { condensed, postPage, switchAlternatingHighlights } = treeOptions;
  const effectiveNestingLevel = nestingLevel + (switchAlternatingHighlights ? 1 : 0);
  
  const nodeClass = classNames(
    "comments-node",
    nestingLevelToClass(effectiveNestingLevel, classes),
    classes.node,
    className,
    {
      "af":comment.af,
      [classes.highlightAnimation]: highlighted,
      [classes.child]: isChild,
      [classes.new]: isNewComment,
      [classes.deleted]: comment.deleted,
      [classes.isPinnedOnProfile]: isFriendlyUI && showPinnedOnProfile && comment.isPinnedOnProfile,
      [classes.isAnswer]: comment.answer,
      [classes.answerChildComment]: isReplyToAnswer,
      [classes.childAnswerComment]: isChild && isReplyToAnswer,
      [classes.oddAnswerComment]: (effectiveNestingLevel % 2 !== 0) && isReplyToAnswer,
      [classes.answerLeafComment]: !hasChildren,
      [classes.isSingleLine]: isSingleLine,
      [classes.condensed]: condensed,
      [classes.shortformTop]: postPage && shortform && (effectiveNestingLevel===1),
      [classes.hoverPreview]: hoverPreview,
      [classes.moderatorHat]: comment.hideModeratorHat ? false : comment.moderatorHat,
      [classes.promoted]: comment.promoted
    }
  )
  
  return <div className={nodeClass} onClick={onClick} id={id}>
    {children}
  </div>
}

const nestingLevelToClass = (nestingLevel: number, classes: ClassesType): string => {
  return classNames({
    [classes.commentsNodeRoot] : nestingLevel === 1,
    "comments-node-root" : nestingLevel === 1,
    "comments-node-even" : nestingLevel % 2 === 0,
    "comments-node-odd"  : nestingLevel % 2 !== 0,
    "comments-node-its-getting-nested-here": nestingLevel > 8,
    "comments-node-so-take-off-all-your-margins": nestingLevel > 12,
    "comments-node-im-getting-so-nested": nestingLevel > 16,
    "comments-node-im-gonna-drop-my-margins": nestingLevel > 20,
    "comments-node-what-are-you-even-arguing-about": nestingLevel > 24,
    "comments-node-are-you-sure-this-is-a-good-idea": nestingLevel > 28,
    "comments-node-seriously-what-the-fuck": nestingLevel > 32,
    "comments-node-are-you-curi-and-lumifer-specifically": nestingLevel > 36,
    "comments-node-cuz-i-guess-that-makes-sense-but-like-really-tho": nestingLevel > 40,
  });
}


const CommentFrameComponent = registerComponent('CommentFrame', CommentFrame, {styles, stylePriority: -1});

declare global {
  interface ComponentTypes {
    CommentFrame: typeof CommentFrameComponent,
  }
}

1	import React from 'react';	5✔
2	import { registerComponent } from '../../lib/vulcan-lib';	1✔
3	import type { CommentTreeOptions } from './commentTree';
4	import classNames from 'classnames';	1✔
5	import { isFriendlyUI } from '../../themes/forumTheme';	1✔
6
7	export const HIGHLIGHT_DURATION = 3	1✔
8
9	export const CONDENSED_MARGIN_BOTTOM = 4	1✔
10
11	const styles = (theme: ThemeType): JssStyles => ({	1✔
12	node: {
13	border: theme.palette.border.commentBorder,
14	borderRadius: isFriendlyUI ? theme.borderRadius.small : undefined,	1!
15	cursor: "default",
16	// Higher specificity to override child class (variant syntax)
17	'&$deleted': {
18	opacity: 0.6
19	}
20	},
21	commentsNodeRoot: {
22	borderRadius: theme.borderRadius.small,
23	},
24	child: {
25	marginLeft: theme.spacing.unit,
26	marginBottom: 6,
27	borderLeft: theme.palette.border.commentBorder,
28	borderTop: theme.palette.border.commentBorder,
29	borderBottom: theme.palette.border.commentBorder,
30	borderRight: "none",
31	borderRadius: isFriendlyUI
32	? `${theme.borderRadius.small}px 0 0 ${theme.borderRadius.small}px`	1!
33	: "2px 0 0 2px",
34	},
35	new: {
36	'&&': {
37	borderLeft: `solid 5px ${theme.palette.secondary.light}${isFriendlyUI ? '' : '8c'}`,	1!
38	'&:hover': {
39	borderLeft: `solid 5px ${theme.palette.secondary.main}${isFriendlyUI ? '' : '8c'}`	1!
40	},
41	}
42	},
43	deleted: {},
44	isAnswer: {
45	border: theme.palette.border.answerBorder,
46	},
47	answerChildComment: {
48	marginBottom: theme.spacing.unit,
49	border: theme.palette.border.commentBorder,
50	},
51	childAnswerComment: {
52	borderRight: "none"
53	},
54	oddAnswerComment: {
55	backgroundColor: theme.palette.panelBackground.default,
56	},
57	answerLeafComment: {
58	paddingBottom: 0
59	},
60	isSingleLine: {
61	marginBottom: 0,
62	borderBottom: "none",
63	borderTop: theme.palette.border.commentBorder,
64	'&.comments-node-root':{
65	marginBottom: CONDENSED_MARGIN_BOTTOM,
66	borderBottom: theme.palette.border.commentBorder,
67	}
68	},
69	condensed: {
70	'&.comments-node-root':{
71	marginBottom: CONDENSED_MARGIN_BOTTOM,
72	}
73	},
74	shortformTop: {
75	'&&': {
76	marginTop: isFriendlyUI ? theme.spacing.unit2 : theme.spacing.unit4,	1!
77	marginBottom: 0,
78	}
79	},
80	hoverPreview: {
81	'&&': {
82	marginBottom: 0
83	}
84	},
85	moderatorHat: {
86	"&.comments-node-even": {
87	background: theme.palette.panelBackground.commentModeratorHat,
88	},
89	"&.comments-node-odd": {
90	background: theme.palette.panelBackground.commentModeratorHat,
91	},
92	},
93	'@keyframes higlight-animation': {
94	from: {
95	backgroundColor: theme.palette.panelBackground.commentHighlightAnimation,
96	border: theme.palette.border.maxIntensity,
97	},
98	to: {
99	backgroundColor: "none",
100	border: theme.palette.border.commentBorder,
101	}
102	},
103	highlightAnimation: {
104	animation: `higlight-animation ${HIGHLIGHT_DURATION}s ease-in-out 0s;`
105	},
106	promoted: {
107	border: `solid 1px ${theme.palette.lwTertiary.main}`,
108	},
109	isPinnedOnProfile: {
110	// What we _really_ want to do here is apply a 1px border with the given linear
111	// gradient, however, the `border-image` property isn't compatible with
112	// `border-radius`. Using the `::before` selector is a hack to get around this.
113	"&::before": {
114	content: "''",
115	position: "absolute",
116	zIndex: -1,
117	top: 1,
118	right: 1,
119	bottom: 1,
120	left: 1,
121	boxSizing: "border-box",
122	backgroundColor: theme.palette.panelBackground.default,
123	borderRadius: isFriendlyUI ? theme.borderRadius.small : 0,	1!
124	},
125	position: "relative",
126	backgroundImage: `linear-gradient(to bottom right, ${theme.palette.border.secondaryHighlight}, ${theme.palette.border.primaryHighlight})`,
127	border: "none",
128	zIndex: 0,
129	'&.CommentFrame-isAnswer': {
130	backgroundImage: `linear-gradient(to bottom right, ${theme.palette.border.secondaryHighlight2}, ${theme.palette.border.primaryHighlight2})`,
131	},
132	},
133	});
134
135	const CommentFrame = ({	1✔
136	comment,
137	treeOptions,
138	onClick,
139	id,
140	nestingLevel,
141	hasChildren,
142	highlighted,
143	isSingleLine,
144	isChild,
145	isNewComment,
146	isReplyToAnswer,
147	hoverPreview,
148	shortform,
149	showPinnedOnProfile,
150	children,
151	className,
152	classes
153	}: {
154	comment: CommentsList,
155	treeOptions: CommentTreeOptions,
156	onClick?: (event: any) => void,
157	id?: string,
158
159	nestingLevel: number,
160	hasChildren?: boolean,
161	highlighted?: boolean,
162	isSingleLine?: boolean,
163	isChild?: boolean,
164	isNewComment?: boolean,
165	isReplyToAnswer?: boolean,
166	hoverPreview?: boolean,
167	shortform?: boolean,
168	showPinnedOnProfile?: boolean,
169
170	children: React.ReactNode,
171	className?: string,
172	classes: ClassesType,
173	}) => {
174	const { condensed, postPage, switchAlternatingHighlights } = treeOptions;	×
175	const effectiveNestingLevel = nestingLevel + (switchAlternatingHighlights ? 1 : 0);	×
176
177	const nodeClass = classNames(	×
178	"comments-node",
179	nestingLevelToClass(effectiveNestingLevel, classes),
180	classes.node,
181	className,
182	{
183	"af":comment.af,
184	[classes.highlightAnimation]: highlighted,
185	[classes.child]: isChild,
186	[classes.new]: isNewComment,
187	[classes.deleted]: comment.deleted,
188	[classes.isPinnedOnProfile]: isFriendlyUI && showPinnedOnProfile && comment.isPinnedOnProfile,	×
189	[classes.isAnswer]: comment.answer,
190	[classes.answerChildComment]: isReplyToAnswer,
191	[classes.childAnswerComment]: isChild && isReplyToAnswer,	×
192	[classes.oddAnswerComment]: (effectiveNestingLevel % 2 !== 0) && isReplyToAnswer,	×
193	[classes.answerLeafComment]: !hasChildren,
194	[classes.isSingleLine]: isSingleLine,
195	[classes.condensed]: condensed,
196	[classes.shortformTop]: postPage && shortform && (effectiveNestingLevel===1),	×
197	[classes.hoverPreview]: hoverPreview,
198	[classes.moderatorHat]: comment.hideModeratorHat ? false : comment.moderatorHat,	×
199	[classes.promoted]: comment.promoted
200	}
201	)
202
UNCOV 203	return <div className={nodeClass} onClick={onClick} id={id}>	×
204	{children}
205	</div>
206	}
207
208	const nestingLevelToClass = (nestingLevel: number, classes: ClassesType): string => {	1✔
UNCOV 209	return classNames({	×
210	[classes.commentsNodeRoot] : nestingLevel === 1,
211	"comments-node-root" : nestingLevel === 1,
212	"comments-node-even" : nestingLevel % 2 === 0,
213	"comments-node-odd" : nestingLevel % 2 !== 0,
214	"comments-node-its-getting-nested-here": nestingLevel > 8,
215	"comments-node-so-take-off-all-your-margins": nestingLevel > 12,
216	"comments-node-im-getting-so-nested": nestingLevel > 16,
217	"comments-node-im-gonna-drop-my-margins": nestingLevel > 20,
218	"comments-node-what-are-you-even-arguing-about": nestingLevel > 24,
219	"comments-node-are-you-sure-this-is-a-good-idea": nestingLevel > 28,
220	"comments-node-seriously-what-the-fuck": nestingLevel > 32,
221	"comments-node-are-you-curi-and-lumifer-specifically": nestingLevel > 36,
222	"comments-node-cuz-i-guess-that-makes-sense-but-like-really-tho": nestingLevel > 40,
223	});
224	}
225
226
227	const CommentFrameComponent = registerComponent('CommentFrame', CommentFrame, {styles, stylePriority: -1});	1✔
228
229	declare global {
230	interface ComponentTypes {
231	CommentFrame: typeof CommentFrameComponent,
232	}
233	}

ForumMagnum / ForumMagnum / 8722752454

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous