Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

css: Use a class for spoiler header text. 

Having the :not() rule there affected the performance, see
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1920156
for more details.

(cherry picked from commit 4a7983fad3)
This commit is contained in:
Shubham Padia 2024-09-02 07:52:14 +00:00 committed by Tim Abbott
parent 2ce934ed43
commit 8aacfcdfee
3 changed files with 5 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/rendered_markdown.ts
View File

@ -267,6 +267,8 @@ export const update_elements = ($content: JQuery): void => {
$(this).append($("<p>").text($t({defaultMessage: "Spoiler"})));
}
$(this).find("p").addClass("spoiler-header-text");
// Add the expand/collapse button to spoiler blocks
const toggle_button_html =
'<span class="spoiler-button" aria-expanded="false"><span class="spoiler-arrow"></span></span>';

2
web/styles/rendered_markdown.css
View File

@ -258,7 +258,7 @@
padding: 8px 5px;
font-weight: bold;
> :not(.spoiler-button) {
.spoiler-header-text {
/* Disallow margin from ordinary rendered-markdown
elements. The header's vertical space is handled
independently by padding on .spoiler-header. */

2
web/tests/rendered_markdown.test.js
View File

@ -504,6 +504,7 @@ run_test("spoiler-header", () => {
const toggle_button_html =
'<span class="spoiler-button" aria-expanded="false"><span class="spoiler-arrow"></span></span>';
$header.html(label);
$header.set_find_results("p", $.create("p"));
rm.update_elements($content);
assert.equal(label, $header.html());
assert.equal($appended.selector, toggle_button_html);
@ -523,6 +524,7 @@ run_test("spoiler-header-empty-fill", () => {
const toggle_button_html =
'<span class="spoiler-button" aria-expanded="false"><span class="spoiler-arrow"></span></span>';
$header.empty();
$header.set_find_results("p", $.create("p"));
rm.update_elements($content);
assert.equal($appended[0].selector, "<p>");
assert.equal($appended[0].text(), $t({defaultMessage: "Spoiler"}));