Auto merge of #13539 - GuillaumeGomez:allow-no-js, r=Alexendoo

Allow to go through clippy lints page without javascript Fixes #13536. This is the follow-up of #13269. This PR makes it possible to expand/collapse lints (individually) without JS. To achieve this result, there are two ways: 1. Use `details` and `summary` tags. Problem with this approach is that the web browser search may open the `details` tags automatically if content matching it is inside. From a previous discussion with `@Alexendoo,` it seems to not be a desired behaviour. 2. Use a little trick where you use a `label` and a checkbox where the checkbox is in fact hidden. Then it's just a matter of CSS. r? `@Alexendoo` changelog: Allow to go through clippy lints page without JS
rust-lang · Oct 18, 2024 · 6a79588 · 6a79588
2 parents 47effe4 + da19d47
commit 6a79588
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 27 deletions.
diff --git a/tests/compile-test.rs b/tests/compile-test.rs
@@ -396,7 +396,8 @@ struct Renderer<'a> {
 
 impl Renderer<'_> {
     fn markdown(input: &str) -> Safe<String> {
-        let parser = Parser::new_ext(input, Options::all());
+        let input = clippy_config::sanitize_explanation(input);
+        let parser = Parser::new_ext(&input, Options::all());
         let mut html_output = String::new();
         html::push_html(&mut html_output, parser);
         // Oh deer, what a hack :O

diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html
@@ -143,26 +143,29 @@ <h1>Clippy Lints</h1> {# #}
                 </div> {# #}
             </div>
             {% for lint in lints %}
-                <article class="panel panel-default collapsed" id="{{lint.id}}"> {# #}
-                    <header class="panel-heading" onclick="expandLint('{{lint.id}}')"> {# #}
-                        <h2 class="panel-title"> {# #}
-                            <div class="panel-title-name" id="lint-{{lint.id}}"> {# #}
-                                <span>{{lint.id}}</span> {#+ #}
-                                <a href="#{{lint.id}}" class="anchor label label-default" onclick="openLint(event)">&para;</a> {#+ #}
-                                <a href="" class="anchor label label-default" onclick="copyToClipboard(event)"> {# #}
-                                    &#128203; {# #}
-                                </a> {# #}
-                            </div> {# #}
+                <article class="panel panel-default" id="{{lint.id}}"> {# #}
+                    <input id="label-{{lint.id}}" type="checkbox"> {# #}
+                    <label for="label-{{lint.id}}" onclick="highlightIfNeeded('{{lint.id}}')"> {# #}
+                        <header class="panel-heading"> {# #}
+                            <h2 class="panel-title"> {# #}
+                                <div class="panel-title-name" id="lint-{{lint.id}}"> {# #}
+                                    <span>{{lint.id}}</span> {#+ #}
+                                    <a href="#{{lint.id}}" class="anchor label label-default" onclick="openLint(event)">&para;</a> {#+ #}
+                                    <a href="" class="anchor label label-default" onclick="copyToClipboard(event)"> {# #}
+                                        &#128203; {# #}
+                                    </a> {# #}
+                                </div> {# #}
 
-                            <div class="panel-title-addons"> {# #}
-                                <span class="label label-lint-group label-default label-group-{{lint.group}}">{{lint.group}}</span> {#+ #}
+                                <div class="panel-title-addons"> {# #}
+                                    <span class="label label-lint-group label-default label-group-{{lint.group}}">{{lint.group}}</span> {#+ #}
 
-                                <span class="label label-lint-level label-lint-level-{{lint.level}}">{{lint.level}}</span> {#+ #}
+                                    <span class="label label-lint-level label-lint-level-{{lint.level}}">{{lint.level}}</span> {#+ #}
 
-                                <span class="label label-doc-folding">&plus;</span> {# #}
-                            </div> {# #}
-                        </h2> {# #}
-                    </header> {# #}
+                                    <span class="label label-doc-folding"></span> {# #}
+                                </div> {# #}
+                            </h2> {# #}
+                        </header> {# #}
+                    </label> {# #}
 
                     <div class="list-group lint-docs"> {# #}
                         <div class="list-group-item lint-doc-md">{{Self::markdown(lint.docs)}}</div> {# #}

diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
@@ -138,18 +138,17 @@ function onEachLazy(lazyArray, func) {
     }
 }
 
-function highlightIfNeeded(elem) {
-    onEachLazy(elem.querySelectorAll("pre > code.language-rust:not(.highlighted)"), el => {
+function highlightIfNeeded(lintId) {
+    onEachLazy(document.querySelectorAll(`#${lintId} pre > code:not(.hljs)`), el => {
         hljs.highlightElement(el.parentElement)
         el.classList.add("highlighted");
     });
 }
 
 function expandLint(lintId) {
-    const lintElem = document.getElementById(lintId);
-    const isCollapsed = lintElem.classList.toggle("collapsed");
-    lintElem.querySelector(".label-doc-folding").innerText = isCollapsed ? "+" : "−";
-    highlightIfNeeded(lintElem);
+    const elem = document.querySelector(`#${lintId} > input[type="checkbox"]`);
+    elem.checked = true;
+    highlightIfNeeded(lintId);
 }
 
 // Show details for one lint

diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
@@ -309,12 +309,12 @@ L4.75,12h2.5l0.5393066-2.1572876  c0.2276001-0.1062012,0.4459839-0.2269287,0.649
 .page-header {
     border-color: var(--theme-popup-border);
 }
-.panel-default > .panel-heading {
+.panel-default .panel-heading {
     background: var(--theme-hover);
     color: var(--fg);
     border: 1px solid var(--theme-popup-border);
 }
-.panel-default > .panel-heading:hover {
+.panel-default .panel-heading:hover {
     filter: brightness(90%);
 }
 .list-group-item {
@@ -410,9 +410,25 @@ body {
     color: var(--fg);
 }
 
-article.collapsed .lint-docs {
+article > label {
+    width: 100%;
+    margin: 0;
+}
+article > input[type="checkbox"] {
     display: none;
 }
+article > input[type="checkbox"] + label .label-doc-folding::before {
+    content: "+";
+}
+article > input[type="checkbox"]:checked + label .label-doc-folding::before {
+    content: "−";
+}
+.lint-docs {
+    display: none;
+}
+article > input[type="checkbox"]:checked ~ .lint-docs {
+    display: block;
+}
 
 .github-corner svg {
     fill: var(--fg);