paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-14 02:48:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

css: Use a class for spoiler header text.

Browse Source 
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.
This commit is contained in:
Shubham Padia
2024-09-02 07:52:14 +00:00
committed by Tim Abbott
parent 28d9c02479
commit 4a7983fad3
3 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/rendered_markdown.ts
View File

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

2
web/styles/rendered_markdown.css
View File

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

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

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