[clang-tools-extra] 8ed9a40 - [clang-doc] Make sidebar sections collapsible (#174531)
via cfe-commits
cfe-commits at lists.llvm.org
Tue Jan 6 13:42:33 PST 2026
Author: Erick Velez
Date: 2026-01-06T13:42:29-08:00
New Revision: 8ed9a400c175727b53c79b438362a0cb7f189057
URL: https://github.com/llvm/llvm-project/commit/8ed9a400c175727b53c79b438362a0cb7f189057
DIFF: https://github.com/llvm/llvm-project/commit/8ed9a400c175727b53c79b438362a0cb7f189057.diff
LOG: [clang-doc] Make sidebar sections collapsible (#174531)
Collapsible lists are achieved via `<details>` and their child
`<summary>` tags. `<details>` tags allow for a section to be designated
as collapsible, while the `<summary>` tag is used as the sidebar
section's header. This approach was chosen over making the lists
stateful through various CSS properties.
This patch also refactors the `<li>` tag structure of sidebar sections.
Previously, the section header and list items were in separate `<li>`
tags without sharing a parent. Now, the header and items are under a
single `<li>` tag which makes more sense semantically.
Added:
Modified:
clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
clang-tools-extra/clang-doc/assets/class-template.mustache
clang-tools-extra/clang-doc/assets/index-template.mustache
clang-tools-extra/clang-doc/assets/namespace-template.mustache
clang-tools-extra/test/clang-doc/basic-project.mustache.test
clang-tools-extra/test/clang-doc/index.cpp
clang-tools-extra/test/clang-doc/json/class.cpp
clang-tools-extra/test/clang-doc/json/compound-constraints.cpp
clang-tools-extra/test/clang-doc/mustache-index.cpp
clang-tools-extra/test/clang-doc/mustache-separate-namespace.cpp
clang-tools-extra/test/clang-doc/typedef-alias.cpp
Removed:
################################################################################
diff --git a/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
index 67f11f77eae61..0181e255f4d9f 100644
--- a/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
+++ b/clang-tools-extra/clang-doc/assets/clang-doc-mustache.css
@@ -421,8 +421,7 @@ body, html {
}
.sidebar ul li {
- padding-right: 1rem;
- padding-left: 2rem;
+ padding-left: 1rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
@@ -430,8 +429,7 @@ body, html {
.sidebar-section {
font-size:1.5rem;
font-weight: bold;
- margin-bottom: 1rem;
- padding: 3rem;
+ padding-left: 1rem;
}
.sidebar-section a {
color: var(--brand)
diff --git a/clang-tools-extra/clang-doc/assets/class-template.mustache b/clang-tools-extra/clang-doc/assets/class-template.mustache
index 20510b6fd4d10..0b29ad23129c6 100644
--- a/clang-tools-extra/clang-doc/assets/class-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/class-template.mustache
@@ -16,115 +16,131 @@
<h2>{{TagType}} {{Name}}</h2>
<ul>
{{#HasPublicMembers}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#PublicMembers">Public Members</a>
- </li>
<li>
- <ul>
- {{#PublicMembers}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
- </li>
- {{/PublicMembers}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#PublicMembers">Public Members</a>
+ </summary>
+ <ul>
+ {{#PublicMembers}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
+ </li>
+ {{/PublicMembers}}
+ </ul>
+ </details>
</li>
{{/HasPublicMembers}}
{{#ProtectedMembers}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#PublicMethods">Protected Members</a>
- </li>
<li>
- <ul>
- {{#Obj}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
- </li>
- {{/Obj}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#PublicMethods">Protected Members</a>
+ </summary>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ </details>
</li>
{{/ProtectedMembers}}
{{#HasPublicFunctions}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#PublicMethods">Public Method</a>
- </li>
<li>
- <ul>
- {{#PublicFunctions}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/PublicFunctions}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+ </summary>
+ <ul>
+ {{#PublicFunctions}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/PublicFunctions}}
+ </ul>
+ </details>
</li>
{{/HasPublicFunctions}}
{{#ProtectedFunction}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#ProtectedFunction">Protected Method</a>
- </li>
<li>
- <ul>
- {{#Obj}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{ID}}">{{Name}}</a>
- </li>
- {{/Obj}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#ProtectedFunction">Protected Method</a>
+ </summary>
+ <ul>
+ {{#Obj}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{ID}}">{{Name}}</a>
+ </li>
+ {{/Obj}}
+ </ul>
+ </details>
</li>
{{/ProtectedFunction}}
{{#HasEnums}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Enums">Enums</a>
- </li>
<li>
- <ul>
- {{#Enums}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Enums}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Enums">Enums</a>
+ </summary>
+ <ul>
+ {{#Enums}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Enums}}
+ </ul>
+ </details>
</li>
{{/HasEnums}}
{{#HasTypedefs}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Typedefs">Typedefs</a>
- </li>
<li>
- <ul>
- {{#Typedefs}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Typedefs}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Typedefs">Typedefs</a>
+ </summary>
+ <ul>
+ {{#Typedefs}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Typedefs}}
+ </ul>
+ </details>
</li>
{{/HasTypedefs}}
{{#HasRecords}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Classes">Inner Classes</a>
- </li>
<li>
- <ul>
- {{#Records}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Records}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Classes">Inner Classes</a>
+ </summary>
+ <ul>
+ {{#Records}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Records}}
+ </ul>
+ </details>
</li>
{{/HasRecords}}
{{#HasFriends}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Friends">Friends</a>
- </li>
<li>
- <ul>
- {{#Friends}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{Reference.USR}}">{{Reference.Name}}</a>
- </li>
- {{/Friends}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Friends">Friends</a>
+ </summary>
+ <ul>
+ {{#Friends}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{Reference.USR}}">{{Reference.Name}}</a>
+ </li>
+ {{/Friends}}
+ </ul>
+ </details>
</li>
{{/HasRecords}}
</ul>
diff --git a/clang-tools-extra/clang-doc/assets/index-template.mustache b/clang-tools-extra/clang-doc/assets/index-template.mustache
index de64da4d709ee..cee7df872a0e8 100644
--- a/clang-tools-extra/clang-doc/assets/index-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/index-template.mustache
@@ -8,17 +8,19 @@
<div class="sidebar">
<h2>{{ProjectName}}</h2>
<ul>
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Namespaces">Namespaces</a>
- </li>
<li>
- <ul>
- {{#Index}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
- </li>
- {{/Index}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Namespaces">Namespaces</a>
+ </summary>
+ <ul>
+ {{#Index}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{Name}}">{{Name}}</a>
+ </li>
+ {{/Index}}
+ </ul>
+ </details>
</li>
</ul>
</div>
diff --git a/clang-tools-extra/clang-doc/assets/namespace-template.mustache b/clang-tools-extra/clang-doc/assets/namespace-template.mustache
index 2d8381a9ea6e3..567af626714ef 100644
--- a/clang-tools-extra/clang-doc/assets/namespace-template.mustache
+++ b/clang-tools-extra/clang-doc/assets/namespace-template.mustache
@@ -16,87 +16,99 @@
<h2>{{#RecordType}}{{RecordType}} {{/RecordType}}{{Name}}</h2>
<ul>
{{#HasEnums}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Enums">Enums</a>
- </li>
<li>
- <ul>
- {{#Enums}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Enums}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Enums">Enums</a>
+ </summary>
+ <ul>
+ {{#Enums}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Enums}}
+ </ul>
+ </details>
</li>
{{/HasEnums}}
{{#HasRecords}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Classes">Inner Classes</a>
- </li>
<li>
- <ul>
- {{#Records}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Records}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Classes">Inner Classes</a>
+ </summary>
+ <ul>
+ {{#Records}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Records}}
+ </ul>
+ </details>
</li>
{{/HasRecords}}
{{#HasFunctions}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Functions">Functions</a>
- </li>
<li>
- <ul>
- {{#Functions}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}{{#Template}}{{#Specialization}}<{{#Parameters}}{{Param}}{{^End}}, {{/End}}{{/Parameters}}>{{/Specialization}}{{/Template}}</a>
- </li>
- {{/Functions}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Functions">Functions</a>
+ </summary>
+ <ul>
+ {{#Functions}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}{{#Template}}{{#Specialization}}<{{#Parameters}}{{Param}}{{^End}}, {{/End}}{{/Parameters}}>{{/Specialization}}{{/Template}}</a>
+ </li>
+ {{/Functions}}
+ </ul>
+ </details>
</li>
{{/HasFunctions}}
{{#HasNamespaces}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Namespaces">Namespaces</a>
- </li>
<li>
- <ul>
- {{#Namespaces}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Namespaces}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Namespaces">Namespaces</a>
+ </summary>
+ <ul>
+ {{#Namespaces}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Namespaces}}
+ </ul>
+ </details>
</li>
{{/HasNamespaces}}
{{#HasConcepts}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Concepts">Concepts</a>
- </li>
<li>
- <ul>
- {{#Concepts}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Concepts}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Concepts">Concepts</a>
+ </summary>
+ <ul>
+ {{#Concepts}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Concepts}}
+ </ul>
+ </details>
</li>
{{/HasConcepts}}
{{#HasTypedefs}}
- <li class="sidebar-section">
- <a class="sidebar-item" href="#Typedefs">Typedefs</a>
- </li>
<li>
- <ul>
- {{#Typedefs}}
- <li class="sidebar-item-container">
- <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
- </li>
- {{/Typedefs}}
- </ul>
+ <details open>
+ <summary class="sidebar-section">
+ <a class="sidebar-item" href="#Typedefs">Typedefs</a>
+ </summary>
+ <ul>
+ {{#Typedefs}}
+ <li class="sidebar-item-container">
+ <a class="sidebar-item" href="#{{USR}}">{{Name}}</a>
+ </li>
+ {{/Typedefs}}
+ </ul>
+ </details>
</li>
{{/HasTypedefs}}
</ul>
diff --git a/clang-tools-extra/test/clang-doc/basic-project.mustache.test b/clang-tools-extra/test/clang-doc/basic-project.mustache.test
index 26e42280f3474..033003ce6508d 100644
--- a/clang-tools-extra/test/clang-doc/basic-project.mustache.test
+++ b/clang-tools-extra/test/clang-doc/basic-project.mustache.test
@@ -36,20 +36,24 @@ HTML-SHAPE: <div class="container">
HTML-SHAPE: <div class="sidebar">
HTML-SHAPE: <h2>class Shape</h2>
HTML-SHAPE: <ul>
-HTML-SHAPE: <li class="sidebar-section">
-HTML-SHAPE: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-SHAPE: <li>
+HTML-SHAPE: <details open>
+HTML-SHAPE: <summary class="sidebar-section">
+HTML-SHAPE: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-SHAPE: </summary>
+HTML-SHAPE: <ul>
+HTML-SHAPE: <li class="sidebar-item-container">
+HTML-SHAPE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">area</a>
+HTML-SHAPE: </li>
+HTML-SHAPE: <li class="sidebar-item-container">
+HTML-SHAPE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">perimeter</a>
+HTML-SHAPE: </li>
+HTML-SHAPE: <li class="sidebar-item-container">
+HTML-SHAPE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">~Shape</a>
+HTML-SHAPE: </li>
+HTML-SHAPE: </ul>
+HTML-SHAPE: </details>
HTML-SHAPE: </li>
-HTML-SHAPE: <ul>
-HTML-SHAPE: <li class="sidebar-item-container">
-HTML-SHAPE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">area</a>
-HTML-SHAPE: </li>
-HTML-SHAPE: <li class="sidebar-item-container">
-HTML-SHAPE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">perimeter</a>
-HTML-SHAPE: </li>
-HTML-SHAPE: <li class="sidebar-item-container">
-HTML-SHAPE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">~Shape</a>
-HTML-SHAPE: </li>
-HTML-SHAPE: </ul>
HTML-SHAPE: </ul>
HTML-SHAPE: </div>
HTML-SHAPE: <div class="resizer" id="resizer"></div>
@@ -143,37 +147,45 @@ HTML-CALC: <div class="container">
HTML-CALC: <div class="sidebar">
HTML-CALC: <h2>class Calculator</h2>
HTML-CALC: <ul>
-HTML-CALC: <li class="sidebar-section">
-HTML-CALC: <a class="sidebar-item" href="#PublicMembers">Public Members</a>
+HTML-CALC: <li>
+HTML-CALC: <details open>
+HTML-CALC: <summary class="sidebar-section">
+HTML-CALC: <a class="sidebar-item" href="#PublicMembers">Public Members</a>
+HTML-CALC: </summary>
+HTML-CALC: <ul>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#public_val">public_val</a>
+HTML-CALC: </li>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#static_val">static_val</a>
+HTML-CALC: </li>
+HTML-CALC: </ul>
+HTML-CALC: </details>
HTML-CALC: </li>
-HTML-CALC: <ul>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#public_val">public_val</a>
-HTML-CALC: </li>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#static_val">static_val</a>
-HTML-CALC: </li>
-HTML-CALC: </ul>
-HTML-CALC: <li class="sidebar-section">
-HTML-CALC: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-CALC: <li>
+HTML-CALC: <details open>
+HTML-CALC: <summary class="sidebar-section">
+HTML-CALC: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-CALC: </summary>
+HTML-CALC: <ul>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">add</a>
+HTML-CALC: </li>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">subtract</a>
+HTML-CALC: </li>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">multiply</a>
+HTML-CALC: </li>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">divide</a>
+HTML-CALC: </li>
+HTML-CALC: <li class="sidebar-item-container">
+HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">mod</a>
+HTML-CALC: </li>
+HTML-CALC: </ul>
+HTML-CALC: </details>
HTML-CALC: </li>
-HTML-CALC: <ul>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">add</a>
-HTML-CALC: </li>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">subtract</a>
-HTML-CALC: </li>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">multiply</a>
-HTML-CALC: </li>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">divide</a>
-HTML-CALC: </li>
-HTML-CALC: <li class="sidebar-item-container">
-HTML-CALC: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">mod</a>
-HTML-CALC: </li>
-HTML-CALC: </ul>
HTML-CALC: </ul>
HTML-CALC: </div>
HTML-CALC: <div class="resizer" id="resizer"></div>
@@ -344,20 +356,24 @@ HTML-RECTANGLE: <div class="container">
HTML-RECTANGLE: <div class="sidebar">
HTML-RECTANGLE: <h2>class Rectangle</h2>
HTML-RECTANGLE: <ul>
-HTML-RECTANGLE: <li class="sidebar-section">
-HTML-RECTANGLE: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-RECTANGLE: <li>
+HTML-RECTANGLE: <details open>
+HTML-RECTANGLE: <summary class="sidebar-section">
+HTML-RECTANGLE: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-RECTANGLE: </summary>
+HTML-RECTANGLE: <ul>
+HTML-RECTANGLE: <li class="sidebar-item-container">
+HTML-RECTANGLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Rectangle</a>
+HTML-RECTANGLE: </li>
+HTML-RECTANGLE: <li class="sidebar-item-container">
+HTML-RECTANGLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">area</a>
+HTML-RECTANGLE: </li>
+HTML-RECTANGLE: <li class="sidebar-item-container">
+HTML-RECTANGLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">perimeter</a>
+HTML-RECTANGLE: </li>
+HTML-RECTANGLE: </ul>
+HTML-RECTANGLE: </details>
HTML-RECTANGLE: </li>
-HTML-RECTANGLE: <ul>
-HTML-RECTANGLE: <li class="sidebar-item-container">
-HTML-RECTANGLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Rectangle</a>
-HTML-RECTANGLE: </li>
-HTML-RECTANGLE: <li class="sidebar-item-container">
-HTML-RECTANGLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">area</a>
-HTML-RECTANGLE: </li>
-HTML-RECTANGLE: <li class="sidebar-item-container">
-HTML-RECTANGLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">perimeter</a>
-HTML-RECTANGLE: </li>
-HTML-RECTANGLE: </ul>
HTML-RECTANGLE: </ul>
HTML-RECTANGLE: </div>
HTML-RECTANGLE: <div class="resizer" id="resizer"></div>
@@ -459,20 +475,24 @@ HTML-CIRCLE: <div class="container">
HTML-CIRCLE: <div class="sidebar">
HTML-CIRCLE: <h2>class Circle</h2>
HTML-CIRCLE: <ul>
-HTML-CIRCLE: <li class="sidebar-section">
-HTML-CIRCLE: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-CIRCLE: <li>
+HTML-CIRCLE: <details open>
+HTML-CIRCLE: <summary class="sidebar-section">
+HTML-CIRCLE: <a class="sidebar-item" href="#PublicMethods">Public Method</a>
+HTML-CIRCLE: </summary>
+HTML-CIRCLE: <ul>
+HTML-CIRCLE: <li class="sidebar-item-container">
+HTML-CIRCLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Circle</a>
+HTML-CIRCLE: </li>
+HTML-CIRCLE: <li class="sidebar-item-container">
+HTML-CIRCLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">area</a>
+HTML-CIRCLE: </li>
+HTML-CIRCLE: <li class="sidebar-item-container">
+HTML-CIRCLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">perimeter</a>
+HTML-CIRCLE: </li>
+HTML-CIRCLE: </ul>
+HTML-CIRCLE: </details>
HTML-CIRCLE: </li>
-HTML-CIRCLE: <ul>
-HTML-CIRCLE: <li class="sidebar-item-container">
-HTML-CIRCLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Circle</a>
-HTML-CIRCLE: </li>
-HTML-CIRCLE: <li class="sidebar-item-container">
-HTML-CIRCLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">area</a>
-HTML-CIRCLE: </li>
-HTML-CIRCLE: <li class="sidebar-item-container">
-HTML-CIRCLE: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">perimeter</a>
-HTML-CIRCLE: </li>
-HTML-CIRCLE: </ul>
HTML-CIRCLE: </ul>
HTML-CIRCLE: </div>
HTML-CIRCLE: <div class="resizer" id="resizer"></div>
diff --git a/clang-tools-extra/test/clang-doc/index.cpp b/clang-tools-extra/test/clang-doc/index.cpp
index e9ac164768170..5ff183f8d80ad 100644
--- a/clang-tools-extra/test/clang-doc/index.cpp
+++ b/clang-tools-extra/test/clang-doc/index.cpp
@@ -27,18 +27,20 @@ namespace inner {
// CHECK-HTML-NEXT: <div class="sidebar">
// CHECK-HTML-NEXT: <h2></h2>
// CHECK-HTML-NEXT: <ul>
-// CHECK-HTML-NEXT: <li class="sidebar-section">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#Namespaces">Namespaces</a>
-// CHECK-HTML-NEXT: </li>
// CHECK-HTML-NEXT: <li>
-// CHECK-HTML-NEXT: <ul>
-// CHECK-HTML-NEXT: <li class="sidebar-item-container">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#GlobalNamespace">GlobalNamespace</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: <li class="sidebar-item-container">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#inner">inner</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: </ul>
+// CHECK-HTML-NEXT: <details open>
+// CHECK-HTML-NEXT: <summary class="sidebar-section">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#Namespaces">Namespaces</a>
+// CHECK-HTML-NEXT: </summary>
+// CHECK-HTML-NEXT: <ul>
+// CHECK-HTML-NEXT: <li class="sidebar-item-container">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#GlobalNamespace">GlobalNamespace</a>
+// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: <li class="sidebar-item-container">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#inner">inner</a>
+// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: </ul>
+// CHECK-HTML-NEXT: </details>
// CHECK-HTML-NEXT: </li>
// CHECK-HTML-NEXT: </ul>
// CHECK-HTML-NEXT: </div>
diff --git a/clang-tools-extra/test/clang-doc/json/class.cpp b/clang-tools-extra/test/clang-doc/json/class.cpp
index 936d2c5b10571..c0270723409f7 100644
--- a/clang-tools-extra/test/clang-doc/json/class.cpp
+++ b/clang-tools-extra/test/clang-doc/json/class.cpp
@@ -291,26 +291,24 @@ struct MyClass {
// CHECK-NEXT: }
// HTML: <a class="sidebar-item" href="#Classes">Inner Classes</a>
-// HTML-NEXT: </li>
-// HTML-NEXT: <li>
-// HTML-NEXT: <ul>
-// HTML-NEXT: <li class="sidebar-item-container">
-// HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">NestedClass</a>
-// HTML-NEXT: </li>
-// HTML-NEXT: </ul>
-// HTML-NEXT: </li>
+// HTML-NEXT: </summary>
+// HTML-NEXT: <ul>
+// HTML-NEXT: <li class="sidebar-item-container">
+// HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">NestedClass</a>
+// HTML-NEXT: </li>
+// HTML-NEXT: </ul>
+// HTML-NEXT: </details>
// HTML: <a class="sidebar-item" href="#Friends">Friends</a>
-// HTML-NEXT: </li>
-// HTML-NEXT: <li>
-// HTML-NEXT: <ul>
-// HTML-NEXT: <li class="sidebar-item-container">
-// HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">friendFunction</a>
-// HTML-NEXT: </li>
-// HTML-NEXT: <li class="sidebar-item-container">
-// HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Foo</a>
-// HTML-NEXT: </li>
-// HTML-NEXT: </ul>
-// HTML-NEXT: </li>
+// HTML-NEXT: </summary>
+// HTML-NEXT: <ul>
+// HTML-NEXT: <li class="sidebar-item-container">
+// HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">friendFunction</a>
+// HTML-NEXT: </li>
+// HTML-NEXT: <li class="sidebar-item-container">
+// HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Foo</a>
+// HTML-NEXT: </li>
+// HTML-NEXT: </ul>
+// HTML-NEXT: </details>
// HTML: <section id="Classes" class="section-container">
// HTML-NEXT: <h2>Inner Classes</h2>
// HTML-NEXT: <ul class="class-container">
diff --git a/clang-tools-extra/test/clang-doc/json/compound-constraints.cpp b/clang-tools-extra/test/clang-doc/json/compound-constraints.cpp
index 1c5a92149b995..e741bbfd53466 100644
--- a/clang-tools-extra/test/clang-doc/json/compound-constraints.cpp
+++ b/clang-tools-extra/test/clang-doc/json/compound-constraints.cpp
@@ -127,23 +127,21 @@ template<typename T> requires (Incrementable<T> && Decrementable<T>) || PreIncre
// CHECK-NEXT: ],
// CHECK-HTML: <a class="sidebar-item" href="#Concepts">Concepts</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: <li>
-// CHECK-HTML-NEXT: <ul>
-// CHECK-HTML-NEXT: <li class="sidebar-item-container">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Incrementable</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: <li class="sidebar-item-container">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Decrementable</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: <li class="sidebar-item-container">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">PreIncrementable</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: <li class="sidebar-item-container">
-// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">PreDecrementable</a>
-// CHECK-HTML-NEXT: </li>
-// CHECK-HTML-NEXT: </ul>
-// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: </summary>
+// CHECK-HTML-NEXT: <ul>
+// CHECK-HTML-NEXT: <li class="sidebar-item-container">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Incrementable</a>
+// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: <li class="sidebar-item-container">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Decrementable</a>
+// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: <li class="sidebar-item-container">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">PreIncrementable</a>
+// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: <li class="sidebar-item-container">
+// CHECK-HTML-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">PreDecrementable</a>
+// CHECK-HTML-NEXT: </li>
+// CHECK-HTML-NEXT: </ul>
// CHECK-HTML: <section id="Concepts" class="section-container">
// CHECK-HTML-NEXT: <h2>Concepts</h2>
// CHECK-HTML-NEXT: <div id="" class="delimiter-container">
@@ -157,7 +155,7 @@ template<typename T> requires (Incrementable<T> && Decrementable<T>) || PreIncre
// CHECK-HTML-NEXT: <div>
// CHECK-HTML-NEXT: <b>T</b> A value that can be incremented.
// CHECK-HTML-NEXT: </div>
-// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-151]] of file {{.*}}compound-constraints.cpp</p>
+// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-149]] of file {{.*}}compound-constraints.cpp</p>
// CHECK-HTML-NEXT: </div>
// CHECK-HTML-NEXT: <div id="" class="delimiter-container">
// CHECK-HTML-NEXT: <div>
@@ -170,7 +168,7 @@ template<typename T> requires (Incrementable<T> && Decrementable<T>) || PreIncre
// CHECK-HTML-NEXT: <div>
// CHECK-HTML-NEXT: <b>T</b> A value that can be decremented
// CHECK-HTML-NEXT: </div>
-// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-157]] of file {{.*}}compound-constraints.cpp</p>
+// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-155]] of file {{.*}}compound-constraints.cpp</p>
// CHECK-HTML-NEXT: </div>
// CHECK-HTML-NEXT: <div id="" class="delimiter-container">
// CHECK-HTML-NEXT: <div>
@@ -183,7 +181,7 @@ template<typename T> requires (Incrementable<T> && Decrementable<T>) || PreIncre
// CHECK-HTML-NEXT: <div>
// CHECK-HTML-NEXT: <b>T</b> A value that can be pre-incremented
// CHECK-HTML-NEXT: </div>
-// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-163]] of file {{.*}}compound-constraints.cpp</p>
+// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-161]] of file {{.*}}compound-constraints.cpp</p>
// CHECK-HTML-NEXT: </div>
// CHECK-HTML-NEXT: <div id="" class="delimiter-container">
// CHECK-HTML-NEXT: <div>
@@ -196,6 +194,6 @@ template<typename T> requires (Incrementable<T> && Decrementable<T>) || PreIncre
// CHECK-HTML-NEXT: <div>
// CHECK-HTML-NEXT: <b>T</b> A value that can be pre-decremented
// CHECK-HTML-NEXT: </div>
-// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-169]] of file {{.*}}compound-constraints.cpp</p>
+// CHECK-HTML-NEXT: <p>Defined at line [[@LINE-167]] of file {{.*}}compound-constraints.cpp</p>
// CHECK-HTML-NEXT: </div>
// CHECK-HTML-NEXT: </section>
diff --git a/clang-tools-extra/test/clang-doc/mustache-index.cpp b/clang-tools-extra/test/clang-doc/mustache-index.cpp
index 0aa6e21c37cac..9706307287f9b 100644
--- a/clang-tools-extra/test/clang-doc/mustache-index.cpp
+++ b/clang-tools-extra/test/clang-doc/mustache-index.cpp
@@ -10,24 +10,22 @@ enum Color {
class Foo;
-// CHECK: <li class="sidebar-section">
+// CHECK: <summary class="sidebar-section">
// CHECK-NEXT: <a class="sidebar-item" href="#Enums">Enums</a>
-// CHECK-NEXT: </li>
-// CHECK-NEXT: <li>
-// CHECK-NEXT: <ul>
-// CHECK-NEXT: <li class="sidebar-item-container">
-// CHECK-NEXT: <a class="sidebar-item" href="#{{[0-9A-F]*}}">Color</a>
-// CHECK-NEXT: </li>
-// CHECK-NEXT: </ul>
-// CHECK: <li class="sidebar-section">
-// CHECK-NEXT: <a class="sidebar-item" href="#Classes">Inner Classes</a>
+// CHECK-NEXT: </summary>
+// CHECK-NEXT: <ul>
+// CHECK-NEXT: <li class="sidebar-item-container">
+// CHECK-NEXT: <a class="sidebar-item" href="#{{[0-9A-F]*}}">Color</a>
// CHECK-NEXT: </li>
-// CHECK-NEXT: <li>
-// CHECK-NEXT: <ul>
-// CHECK-NEXT: <li class="sidebar-item-container">
-// CHECK-NEXT: <a class="sidebar-item" href="#{{[0-9A-F]*}}">Foo</a>
-// CHECK-NEXT: </li>
-// CHECK-NEXT: </ul>
+// CHECK-NEXT: </ul>
+// CHECK: <summary class="sidebar-section">
+// CHECK-NEXT: <a class="sidebar-item" href="#Classes">Inner Classes</a>
+// CHECK-NEXT: </summary>
+// CHECK-NEXT: <ul>
+// CHECK-NEXT: <li class="sidebar-item-container">
+// CHECK-NEXT: <a class="sidebar-item" href="#{{[0-9A-F]*}}">Foo</a>
+// CHECK-NEXT: </li>
+// CHECK-NEXT: </ul>
// CHECK: <section id="Enums" class="section-container">
// CHECK-NEXT: <h2>Enumerations</h2>
diff --git a/clang-tools-extra/test/clang-doc/mustache-separate-namespace.cpp b/clang-tools-extra/test/clang-doc/mustache-separate-namespace.cpp
index 00aa6e9e8d12d..c0fa2b47a3983 100644
--- a/clang-tools-extra/test/clang-doc/mustache-separate-namespace.cpp
+++ b/clang-tools-extra/test/clang-doc/mustache-separate-namespace.cpp
@@ -21,15 +21,17 @@ namespace MyNamespace {
// CHECK-GLOBAL-NEXT: <div class="sidebar">
// CHECK-GLOBAL-NEXT: <h2>Global Namespace</h2>
// CHECK-GLOBAL-NEXT: <ul>
-// CHECK-GLOBAL-NEXT: <li class="sidebar-section">
-// CHECK-GLOBAL-NEXT: <a class="sidebar-item" href="#Namespaces">Namespaces</a>
-// CHECK-GLOBAL-NEXT: </li>
// CHECK-GLOBAL-NEXT: <li>
-// CHECK-GLOBAL-NEXT: <ul>
-// CHECK-GLOBAL-NEXT: <li class="sidebar-item-container">
-// CHECK-GLOBAL-NEXT: <a class="sidebar-item" href="#{{[0-9A-F]*}}">MyNamespace</a>
-// CHECK-GLOBAL-NEXT: </li>
-// CHECK-GLOBAL-NEXT: </ul>
+// CHECK-GLOBAL-NEXT: <details open>
+// CHECK-GLOBAL-NEXT: <summary class="sidebar-section">
+// CHECK-GLOBAL-NEXT: <a class="sidebar-item" href="#Namespaces">Namespaces</a>
+// CHECK-GLOBAL-NEXT: </summary>
+// CHECK-GLOBAL-NEXT: <ul>
+// CHECK-GLOBAL-NEXT: <li class="sidebar-item-container">
+// CHECK-GLOBAL-NEXT: <a class="sidebar-item" href="#{{[0-9A-F]*}}">MyNamespace</a>
+// CHECK-GLOBAL-NEXT: </li>
+// CHECK-GLOBAL-NEXT: </ul>
+// CHECK-GLOBAL-NEXT: </details>
// CHECK-GLOBAL-NEXT: </li>
// CHECK-GLOBAL-NEXT: </ul>
// CHECK-GLOBAL-NEXT: </div>
diff --git a/clang-tools-extra/test/clang-doc/typedef-alias.cpp b/clang-tools-extra/test/clang-doc/typedef-alias.cpp
index dec2bc5883a09..22ad67dd05b16 100644
--- a/clang-tools-extra/test/clang-doc/typedef-alias.cpp
+++ b/clang-tools-extra/test/clang-doc/typedef-alias.cpp
@@ -21,23 +21,21 @@ template<typename T> using Vec = Vector<T>;
using IntVec = Vector<int>;
// HTML-GLOBAL: <a class="sidebar-item" href="#Typedefs">Typedefs</a>
-// HTML-GLOBAL-NEXT: </li>
-// HTML-GLOBAL-NEXT: <li>
-// HTML-GLOBAL-NEXT: <ul>
-// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
-// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">u_long</a>
-// HTML-GLOBAL-NEXT: </li>
-// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
-// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">IntPtr</a>
-// HTML-GLOBAL-NEXT: </li>
-// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
-// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Vec</a>
-// HTML-GLOBAL-NEXT: </li>
-// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
-// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">IntVec</a>
-// HTML-GLOBAL-NEXT: </li>
-// HTML-GLOBAL-NEXT: </ul>
-// HTML-GLOBAL-NEXT: </li>
+// HTML-GLOBAL-NEXT: </summary>
+// HTML-GLOBAL-NEXT: <ul>
+// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
+// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">u_long</a>
+// HTML-GLOBAL-NEXT: </li>
+// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
+// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">IntPtr</a>
+// HTML-GLOBAL-NEXT: </li>
+// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
+// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Vec</a>
+// HTML-GLOBAL-NEXT: </li>
+// HTML-GLOBAL-NEXT: <li class="sidebar-item-container">
+// HTML-GLOBAL-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">IntVec</a>
+// HTML-GLOBAL-NEXT: </li>
+// HTML-GLOBAL-NEXT: </ul>
// HTML-GLOBAL: <section id="Typedefs" class="section-container">
// HTML-GLOBAL-NEXT: <h2>Typedefs</h2>
// HTML-GLOBAL-NEXT: <div id="{{([0-9A-F]{40})}}" class="delimiter-container">
@@ -65,14 +63,11 @@ using IntVec = Vector<int>;
// HTML-GLOBAL-NEXT: </div>
// HTML-GLOBAL-NEXT: </section>
-// HTML-VECTOR: <a class="sidebar-item" href="#Typedefs">Typedefs</a>
-// HTML-VECTOR-NEXT: </li>
-// HTML-VECTOR-NEXT: <li>
-// HTML-VECTOR-NEXT: <ul>
-// HTML-VECTOR-NEXT: <li class="sidebar-item-container">
-// HTML-VECTOR-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Ptr</a>
-// HTML-VECTOR-NEXT: </li>
-// HTML-VECTOR-NEXT: </ul>
+// HTML-VECTOR: <a class="sidebar-item" href="#Typedefs">Typedefs</a>
+// HTML-VECTOR-NEXT: </summary>
+// HTML-VECTOR-NEXT: <ul>
+// HTML-VECTOR-NEXT: <li class="sidebar-item-container">
+// HTML-VECTOR-NEXT: <a class="sidebar-item" href="#{{([0-9A-F]{40})}}">Ptr</a>
// HTML-VECTOR-NEXT: </li>
// HTML-VECTOR-NEXT: </ul>
// HTML-VECTOR: <section id="Typedefs" class="section-container">
More information about the cfe-commits
mailing list