wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-12-04 20:18:57 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-Vector/tests/jest/__snapshots__/tableOfContents.test.js.snap

266 lines
12 KiB
Plaintext
Raw Normal View History

Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
// Jest Snapshot v1, https://goo.gl/fbAQLP
Table of contents: FIXME cleanup Follow up to Ib42d532d4e900c01061e1c5e39c03b17f0619c46 Hoist hook binding into main.js and update tests main.js now only tests hook wire up. tableOfContents calls reloadTableOfContents directly. Bug: T316025 Change-Id: Ia06feab7cfb47a64ac3519bd7bd0428dc661045a
2023-02-16 01:20:00 +00:00
exports[`Table of contents reloadTableOfContents re-renders toc when wikipage.tableOfContents hook is fired with empty sections 1`] = `
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
Removes old style rule This patch removes the old style rules for .vector-toc-pinned after one week of cache. Also removes 'data-name' which was no longer used Bug: T325032 Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-03 21:23:28 +00:00
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-feature-name=\\"pinned\\" data-pinnable-element-id=\\"vector-toc\\">
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\" data-event-name=\\"pinnable-header.vector-toc.pin\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\" data-event-name=\\"pinnable-header.vector-toc.unpin\\">hide</button>
</div>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul class=\\"vector-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a href=\\"#\\" class=\\"vector-toc-link\\">
<div class=\\"vector-toc-text\\">Beginning</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#foo\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">1</span>foo</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list\\">
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#bar\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"true\\">
Optimize styles 1) Icon optimizations * Load styles for expand icon in JavaScript since it relates to table of contents and that is only enabled with JavaScript * Drop vector-icon--x-small class since it only applies to this icon * Remove some FIXMEs to an issue that has already been fixed upstream 2) Move styles that do not need to be render blocking to skins.vector.js * Move sticky header to skins.vector.js since it doesn't work without JavaScript * Move popupNotification to skins.vector.js since this is never server side rendered. Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-06 08:42:40 +00:00
<span class=\\"vector-icon mw-ui-icon-wikimedia-expand\\"></span>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<span>Toggle bar subsection</span>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</button>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
<a class=\\"vector-toc-link\\" href=\\"#baz\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1</span>baz</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3\\">
<a class=\\"vector-toc-link\\" href=\\"#qux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1.1</span>qux</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list\\">
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
</li>
</ul>
</li>
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#quux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">3</span>quux</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list\\">
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
</li>
</ul>
</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
"
`;
Table of contents: FIXME cleanup Follow up to Ib42d532d4e900c01061e1c5e39c03b17f0619c46 Hoist hook binding into main.js and update tests main.js now only tests hook wire up. tableOfContents calls reloadTableOfContents directly. Bug: T316025 Change-Id: Ia06feab7cfb47a64ac3519bd7bd0428dc661045a
2023-02-16 01:20:00 +00:00
exports[`Table of contents reloadTableOfContents re-renders toc when wikipage.tableOfContents hook is fired with sections 1`] = `
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
Removes old style rule This patch removes the old style rules for .vector-toc-pinned after one week of cache. Also removes 'data-name' which was no longer used Bug: T325032 Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-03 21:23:28 +00:00
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-feature-name=\\"pinned\\" data-pinnable-element-id=\\"vector-toc\\">
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\" data-event-name=\\"pinnable-header.vector-toc.pin\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\" data-event-name=\\"pinnable-header.vector-toc.unpin\\">hide</button>
</div>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul class=\\"vector-toc-contents\\" id=\\"mw-panel-toc-list\\"><div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
Removes old style rule This patch removes the old style rules for .vector-toc-pinned after one week of cache. Also removes 'data-name' which was no longer used Bug: T325032 Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-03 21:23:28 +00:00
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-feature-name=\\"pinned\\" data-pinnable-element-id=\\"vector-toc\\">
Use PinnableHeader in the TOC all the time [Visual Changes in this patch] This patch introduces changes to whitespace inside the Mustache template which corresponds to an HTML change, resulting 33 minor changes in pixel, the spacing of the ToC label shifts by 1 pixel - Remove page tools feature flag from TOC - Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed - Remove now unused `moveToc()` - Update jest tests to use PinnableHeader Bug: T318013 Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-21 20:46:04 +00:00
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
Log events for pinnable header button Bug: T324878 Change-Id: I3174fc7f90b106c32ae4eb1fb42d089e01967220
2023-01-05 19:43:14 +00:00
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\" data-event-name=\\"pinnable-header.vector-toc.pin\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\" data-event-name=\\"pinnable-header.vector-toc.unpin\\">hide</button>
Use PinnableHeader in the TOC all the time [Visual Changes in this patch] This patch introduces changes to whitespace inside the Mustache template which corresponds to an HTML change, resulting 33 minor changes in pixel, the spacing of the ToC label shifts by 1 pixel - Remove page tools feature flag from TOC - Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed - Remove now unused `moveToc()` - Update jest tests to use PinnableHeader Bug: T318013 Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-21 20:46:04 +00:00
</div>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul class=\\"vector-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a href=\\"#\\" class=\\"vector-toc-link\\">
<div class=\\"vector-toc-text\\">Beginning</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#foo\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">1</span>foo</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list\\">
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#bar\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</a>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"true\\">
Optimize styles 1) Icon optimizations * Load styles for expand icon in JavaScript since it relates to table of contents and that is only enabled with JavaScript * Drop vector-icon--x-small class since it only applies to this icon * Remove some FIXMEs to an issue that has already been fixed upstream 2) Move styles that do not need to be render blocking to skins.vector.js * Move sticky header to skins.vector.js since it doesn't work without JavaScript * Move popupNotification to skins.vector.js since this is never server side rendered. Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-06 08:42:40 +00:00
<span class=\\"vector-icon mw-ui-icon-wikimedia-expand\\"></span>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<span>Toggle bar subsection</span>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</button>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
<a class=\\"vector-toc-link\\" href=\\"#baz\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1</span>baz</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3\\">
<a class=\\"vector-toc-link\\" href=\\"#qux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1.1</span>qux</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list\\">
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</ul>
</li>
</ul>
</li>
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#quux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">3</span>quux</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list\\">
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-bat\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#bat\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">4</span>bat</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-bat-sublist\\" class=\\"vector-toc-list\\">
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
</ul>
</li>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2022-12-20 22:58:44 +00:00
</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2022-12-20 22:58:44 +00:00
</div>
Add Jest tests for TOC before/after edit * Also increase code coverage threshold Bug: T316571 Change-Id: I6eb703bd0d23ff9d038c989562d07ec01cb7b1c8
2022-09-14 03:17:27 +00:00
"
`;
Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons Bug: T303766 Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-03-29 20:51:45 +00:00
exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is false 1`] = `
Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2022-12-20 22:58:44 +00:00
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
Removes old style rule This patch removes the old style rules for .vector-toc-pinned after one week of cache. Also removes 'data-name' which was no longer used Bug: T325032 Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-03 21:23:28 +00:00
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-feature-name=\\"pinned\\" data-pinnable-element-id=\\"vector-toc\\">
Use PinnableHeader in the TOC all the time [Visual Changes in this patch] This patch introduces changes to whitespace inside the Mustache template which corresponds to an HTML change, resulting 33 minor changes in pixel, the spacing of the ToC label shifts by 1 pixel - Remove page tools feature flag from TOC - Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed - Remove now unused `moveToc()` - Update jest tests to use PinnableHeader Bug: T318013 Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-21 20:46:04 +00:00
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
Log events for pinnable header button Bug: T324878 Change-Id: I3174fc7f90b106c32ae4eb1fb42d089e01967220
2023-01-05 19:43:14 +00:00
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\" data-event-name=\\"pinnable-header.vector-toc.pin\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\" data-event-name=\\"pinnable-header.vector-toc.unpin\\">hide</button>
Use PinnableHeader in the TOC all the time [Visual Changes in this patch] This patch introduces changes to whitespace inside the Mustache template which corresponds to an HTML change, resulting 33 minor changes in pixel, the spacing of the ToC label shifts by 1 pixel - Remove page tools feature flag from TOC - Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed - Remove now unused `moveToc()` - Update jest tests to use PinnableHeader Bug: T318013 Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-21 20:46:04 +00:00
</div>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul class=\\"vector-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a href=\\"#\\" class=\\"vector-toc-link\\">
<div class=\\"vector-toc-text\\">Beginning</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#foo\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">1</span>foo</div>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list\\">
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#bar\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</a>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"true\\">
Optimize styles 1) Icon optimizations * Load styles for expand icon in JavaScript since it relates to table of contents and that is only enabled with JavaScript * Drop vector-icon--x-small class since it only applies to this icon * Remove some FIXMEs to an issue that has already been fixed upstream 2) Move styles that do not need to be render blocking to skins.vector.js * Move sticky header to skins.vector.js since it doesn't work without JavaScript * Move popupNotification to skins.vector.js since this is never server side rendered. Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-06 08:42:40 +00:00
<span class=\\"vector-icon mw-ui-icon-wikimedia-expand\\"></span>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<span>Toggle bar subsection</span>
Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons Bug: T303766 Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-03-29 20:51:45 +00:00
</button>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
<a class=\\"vector-toc-link\\" href=\\"#baz\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1</span>baz</div>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3\\">
<a class=\\"vector-toc-link\\" href=\\"#qux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1.1</span>qux</div>
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list\\">
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</ul>
</li>
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</li>
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1 vector-toc-list-item-expanded\\">
<a class=\\"vector-toc-link\\" href=\\"#quux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">3</span>quux</div>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list\\">
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
</li>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2022-12-20 22:58:44 +00:00
</div>
Dynamically expand/collapse sub-sections in ToC based on # of headings Server render the table of contents in a collapsed state when the total number of headings is equal or greater than the value of `$wgVectorTableOfContentsCollapseAtCount`. Otherwise, the table of contents will be server rendered in its "expanded" state. In addition: * Revise table of contents tests to call one `assertion` per element so that it is easier to see the exact element that may fail an assertion. * Revise table of contents tests to call a mount function that can merge props to allow for a more flexible set of tests. * Revise table of contents tests by wrapping a `describe` around tests that expect the same prop state. * Adds typedef for table of sections props Bug: T300973 Depends-On: Ifaee451e1903f2accd0ada2f2ed6dfa3f83037b6 Change-Id: I382200bc603b6abf757a91f14a8a55a6581969bd
2022-02-18 00:19:50 +00:00
"
`;
Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons Bug: T303766 Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-03-29 20:51:45 +00:00
exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is true 1`] = `
Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2022-12-20 22:58:44 +00:00
"<div id=\\"vector-toc\\" class=\\"vector-toc vector-pinnable-element\\">
Removes old style rule This patch removes the old style rules for .vector-toc-pinned after one week of cache. Also removes 'data-name' which was no longer used Bug: T325032 Change-Id: I7c8d8e51a61646151706b71a1733b1daac5dbd45
2023-03-03 21:23:28 +00:00
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-feature-name=\\"pinned\\" data-pinnable-element-id=\\"vector-toc\\">
Use PinnableHeader in the TOC all the time [Visual Changes in this patch] This patch introduces changes to whitespace inside the Mustache template which corresponds to an HTML change, resulting 33 minor changes in pixel, the spacing of the ToC label shifts by 1 pixel - Remove page tools feature flag from TOC - Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed - Remove now unused `moveToc()` - Update jest tests to use PinnableHeader Bug: T318013 Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-21 20:46:04 +00:00
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
Log events for pinnable header button Bug: T324878 Change-Id: I3174fc7f90b106c32ae4eb1fb42d089e01967220
2023-01-05 19:43:14 +00:00
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\" data-event-name=\\"pinnable-header.vector-toc.pin\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\" data-event-name=\\"pinnable-header.vector-toc.unpin\\">hide</button>
Use PinnableHeader in the TOC all the time [Visual Changes in this patch] This patch introduces changes to whitespace inside the Mustache template which corresponds to an HTML change, resulting 33 minor changes in pixel, the spacing of the ToC label shifts by 1 pixel - Remove page tools feature flag from TOC - Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed - Remove now unused `moveToc()` - Update jest tests to use PinnableHeader Bug: T318013 Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-21 20:46:04 +00:00
</div>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul class=\\"vector-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a href=\\"#\\" class=\\"vector-toc-link\\">
<div class=\\"vector-toc-text\\">Beginning</div>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</a>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-foo\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a class=\\"vector-toc-link\\" href=\\"#foo\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">1</span>foo</div>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-foo-sublist\\" class=\\"vector-toc-list\\">
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-bar\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a class=\\"vector-toc-link\\" href=\\"#bar\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2</span>bar</div>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</a>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<button aria-controls=\\"toc-bar-sublist\\" class=\\"cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle\\" aria-expanded=\\"false\\">
Optimize styles 1) Icon optimizations * Load styles for expand icon in JavaScript since it relates to table of contents and that is only enabled with JavaScript * Drop vector-icon--x-small class since it only applies to this icon * Remove some FIXMEs to an issue that has already been fixed upstream 2) Move styles that do not need to be render blocking to skins.vector.js * Move sticky header to skins.vector.js since it doesn't work without JavaScript * Move popupNotification to skins.vector.js since this is never server side rendered. Change-Id: I98e6c0826b514aaefcf88f66275bba37125129b1
2024-05-06 08:42:40 +00:00
<span class=\\"vector-icon mw-ui-icon-wikimedia-expand\\"></span>
Use Codex for button styles, start transitioning icons to use Codex icon mixins Changes: - mw-ui-button to cdx-button - mw-ui-quiet to cdx-button--weight-quiet - mw-ui-icon-element to cdx-button--icon-only - mw-ui-icon to vector-icon - mw-ui-icon-flush-right/left to vector-button-flush-right/left - Removes $isSmallIcon param in Hooks.php 85 Visual Changes - ~36 changes from minor pixel changes from the new button classes in the main menu, language button - 22 from standardizing the padding of the TOC in page title - ~10 changes from addition of .cdx-button to the TOC toggle buttons PERFORMANCE: This will result in an overall increase of 2.7kb of render blocking CSS, 1kb will be reclaimed when I6c1ed1523df8cc9e2f2ca09506f12a595b8b013d is merged. Co-author: Bernard Wang <bwang@wikimedia.org> Bug: T336526 Change-Id: Ibd558238a41a0d3edb981e441638f9564f43d226
2023-04-27 20:39:40 +00:00
<span>Toggle bar subsection</span>
Update sticky header to use ARIA attributes for section collapsing and add accessible label to toggle buttons Bug: T303766 Change-Id: Idda4f286a42152af1d233588a1839ada5491ce95
2022-03-29 20:51:45 +00:00
</button>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-bar-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-baz\\" class=\\"vector-toc-list-item vector-toc-level-2\\">
<a class=\\"vector-toc-link\\" href=\\"#baz\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1</span>baz</div>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-baz-sublist\\" class=\\"vector-toc-list\\">
<li id=\\"toc-qux\\" class=\\"vector-toc-list-item vector-toc-level-3\\">
<a class=\\"vector-toc-link\\" href=\\"#qux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">2.1.1</span>qux</div>
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-qux-sublist\\" class=\\"vector-toc-list\\">
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</ul>
</li>
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</li>
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
</li>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<li id=\\"toc-quux\\" class=\\"vector-toc-list-item vector-toc-level-1\\">
<a class=\\"vector-toc-link\\" href=\\"#quux\\">
<div class=\\"vector-toc-text\\">
<span class=\\"vector-toc-numb\\">3</span>quux</div>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</a>
[Clean up] Remove CSS and HTML from cached TOC html Follow-up: I5b9228380f5c4674ef424d33127a5cb4010822da Change-Id: I2a1167278c5ece9c0540cff9b5c06fcf185bc64d
2023-01-13 20:56:22 +00:00
<ul id=\\"toc-quux-sublist\\" class=\\"vector-toc-list\\">
Use TOC template data for showing collapsible section arrows Bug: T299361 Depends-on: I8ab5c0543b898d1df9399a1cb39672c45daf2acd Change-Id: Ib68de8cd97cc1111a5a33e100e688d6832fc7e6e
2022-02-14 18:55:50 +00:00
</ul>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
</li>
Update tableOfContents.js to rerender only the TOC contents rather than the entire pinnable element Extra: - Reactivated active list element, This still does not work if the current active gets edited. - Removed pinning event reattach as we do not replace teh full element anymore. Known Issues: - Collapse/Expand not working Bug: T326839 Change-Id: I2ce251f5312659b827ac2941d789248473bb0ef5
2023-01-16 11:39:05 +00:00
</ul>
Replace .sidebar-toc class with .vector-toc and use PinnableElement in TOC Using PinnableElement in the TOC allows us to reuse styles associated with all PinnableElements, and helps ensure consistency between page tools and the TOC. This is something that would probably need to be done for T324505 anyway Rather than updating PinnableElement to accept a class prop, I chose to rename '.sidebar-toc' to '.vector-toc', making the TOC's naming conventions consistent with the rest of Vector. "sidebar" doesn't make sense anymore anyway, as the TOC can be in multiple locations and it's best to avoid the "sidebar" term Bug: T324877 Change-Id: I5b9228380f5c4674ef424d33127a5cb4010822da
2022-12-20 22:58:44 +00:00
</div>
Toggle ToC sections when clicking toggle button Bug: T300167 Change-Id: If1150a9e018b232da900187383aaee9c9cf331a1
2022-02-15 22:43:04 +00:00
"
`;
Reference in a new issue Copy permalink