Reduce clippy lints page size (#15235)

Follow-up of https://github.com/rust-lang/rust-clippy/pull/15208.

Removed some unneeded wrappings and shortened some CSS class name.

The diff is big because of one indent level getting removed. :-/

Before this PR: 1751301
With this PR: 1663634
Reduction: -5%

r? @samueltardieu

changelog: Reduce page size and number of DOM elements on clippy lints
page

3 files changed, 181 insertions, 179 deletions

diff --git a/util/gh-pages/index_template.html b/util/gh-pages/index_template.html
index 6f380ec8fee..06646f8a892 100644
--- a/util/gh-pages/index_template.html
+++ b/util/gh-pages/index_template.html
@@ -49,9 +49,7 @@ Otherwise, have a great day =^.^=
     <script src="theme.js"></script> {# #}
 
     <div class="container"> {# #}
-        <div class="page-header"> {# #}
-            <h1>Clippy Lints <span id="lint-count" class="badge"></span></h1> {# #}
-        </div> {# #}
+        <h1 class="page-header">Clippy Lints <span id="lint-count" class="badge"></span></h1> {# #}
 
         <noscript> {# #}
             <div class="alert alert-danger" role="alert"> {# #}
@@ -59,143 +57,141 @@ Otherwise, have a great day =^.^=
             </div> {# #}
         </noscript> {# #}
 
-        <div> {# #}
-            <div class="panel panel-default" id="menu-filters"> {# #}
-                <div class="panel-body row"> {# #}
-                    <div id="upper-filters" class="col-12 col-md-5"> {# #}
-                        <div class="btn-group" id="lint-levels" tabindex="-1"> {# #}
-                            <button type="button" class="btn btn-default dropdown-toggle"> {# #}
-                                Lint levels <span class="badge">4</span> <span class="caret"></span> {# #}
-                            </button> {# #}
-                            <ul class="dropdown-menu" id="lint-levels-selector"> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="toggleElements('levels_filter', true)">All</button> {# #}
-                                </li> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="toggleElements('levels_filter', false)">None</button> {# #}
-                                </li> {# #}
-                                <li role="separator" class="divider"></li> {# #}
-                            </ul> {# #}
-                        </div> {# #}
-                        <div class="btn-group" id="lint-groups" tabindex="-1"> {# #}
-                            <button type="button" class="btn btn-default dropdown-toggle"> {# #}
-                                Lint groups <span class="badge">9</span> <span class="caret"></span> {# #}
-                            </button> {# #}
-                            <ul class="dropdown-menu" id="lint-groups-selector"> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="toggleElements('groups_filter', true)">All</button> {# #}
-                                </li> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="resetGroupsToDefault()">Default</button> {# #}
-                                </li> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="toggleElements('groups_filter', false)">None</button> {# #}
-                                </li> {# #}
-                                <li role="separator" class="divider"></li> {# #}
-                            </ul> {# #}
-                        </div> {# #}
-                        <div class="btn-group" id="version-filter" tabindex="-1"> {# #}
-                            <button type="button" class="btn btn-default dropdown-toggle"> {# #}
-                                Version {#+ #}
-                                <span id="version-filter-count" class="badge">0</span> {#+ #}
-                                <span class="caret"></span> {# #}
-                            </button> {# #}
-                            <ul id="version-filter-selector" class="dropdown-menu"> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="clearVersionFilters()">Clear filters</button> {# #}
-                                </li> {# #}
-                                <li role="separator" class="divider"></li> {# #}
-                            </ul> {# #}
-                        </div> {# #}
-                        <div class="btn-group" id="lint-applicabilities" tabindex="-1"> {# #}
-                            <button type="button" class="btn btn-default dropdown-toggle"> {# #}
-                                Applicability {#+ #}
-                                <span class="badge">4</span> {#+ #}
-                                <span class="caret"></span> {# #}
-                            </button> {# #}
-                            <ul class="dropdown-menu" id="lint-applicabilities-selector"> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="toggleElements('applicabilities_filter', true)">All</button> {# #}
-                                </li> {# #}
-                                <li class="checkbox"> {# #}
-                                    <button onclick="toggleElements('applicabilities_filter', false)">None</button> {# #}
-                                </li> {# #}
-                                <li role="separator" class="divider"></li> {# #}
-                            </ul> {# #}
-                        </div> {# #}
+        <div id="menu-filters"> {# #}
+            <div class="panel-body row"> {# #}
+                <div id="upper-filters" class="col-12 col-md-5"> {# #}
+                    <div class="btn-group" id="lint-levels" tabindex="-1"> {# #}
+                        <button type="button" class="btn btn-default dropdown-toggle"> {# #}
+                            Lint levels <span class="badge">4</span> <span class="caret"></span> {# #}
+                        </button> {# #}
+                        <ul class="dropdown-menu" id="lint-levels-selector"> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="toggleElements('levels_filter', true)">All</button> {# #}
+                            </li> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="toggleElements('levels_filter', false)">None</button> {# #}
+                            </li> {# #}
+                            <li role="separator" class="divider"></li> {# #}
+                        </ul> {# #}
                     </div> {# #}
-                    <div class="col-12 col-md-5 search-control"> {# #}
-                        <div class="input-group"> {# #}
-                            <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
-                            <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
-                            <span class="input-group-btn"> {# #}
-                                <button class="filter-clear btn" type="button" onclick="searchState.clearInput(event)"> {# #}
-                                    Clear {# #}
-                                </button> {# #}
-                            </span> {# #}
-                        </div> {# #}
+                    <div class="btn-group" id="lint-groups" tabindex="-1"> {# #}
+                        <button type="button" class="btn btn-default dropdown-toggle"> {# #}
+                            Lint groups <span class="badge">9</span> <span class="caret"></span> {# #}
+                        </button> {# #}
+                        <ul class="dropdown-menu" id="lint-groups-selector"> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="toggleElements('groups_filter', true)">All</button> {# #}
+                            </li> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="resetGroupsToDefault()">Default</button> {# #}
+                            </li> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="toggleElements('groups_filter', false)">None</button> {# #}
+                            </li> {# #}
+                            <li role="separator" class="divider"></li> {# #}
+                        </ul> {# #}
                     </div> {# #}
-                    <div class="col-12 col-md-2 btn-group expansion-group"> {# #}
-                        <button title="Collapse All" class="btn btn-default expansion-control" type="button" id="collapse-all"> {# #}
-                            <span class="glyphicon glyphicon-collapse-up"></span> {# #}
+                    <div class="btn-group" id="version-filter" tabindex="-1"> {# #}
+                        <button type="button" class="btn btn-default dropdown-toggle"> {# #}
+                            Version {#+ #}
+                            <span id="version-filter-count" class="badge">0</span> {#+ #}
+                            <span class="caret"></span> {# #}
                         </button> {# #}
-                        <button title="Expand All" class="btn btn-default expansion-control" type="button" id="expand-all"> {# #}
-                            <span class="glyphicon glyphicon-collapse-down"></span> {# #}
+                        <ul id="version-filter-selector" class="dropdown-menu"> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="clearVersionFilters()">Clear filters</button> {# #}
+                            </li> {# #}
+                            <li role="separator" class="divider"></li> {# #}
+                        </ul> {# #}
+                    </div> {# #}
+                    <div class="btn-group" id="lint-applicabilities" tabindex="-1"> {# #}
+                        <button type="button" class="btn btn-default dropdown-toggle"> {# #}
+                            Applicability {#+ #}
+                            <span class="badge">4</span> {#+ #}
+                            <span class="caret"></span> {# #}
                         </button> {# #}
+                        <ul class="dropdown-menu" id="lint-applicabilities-selector"> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="toggleElements('applicabilities_filter', true)">All</button> {# #}
+                            </li> {# #}
+                            <li class="checkbox"> {# #}
+                                <button onclick="toggleElements('applicabilities_filter', false)">None</button> {# #}
+                            </li> {# #}
+                            <li role="separator" class="divider"></li> {# #}
+                        </ul> {# #}
+                    </div> {# #}
+                </div> {# #}
+                <div class="col-12 col-md-5 search-control"> {# #}
+                    <div class="input-group"> {# #}
+                        <label class="input-group-addon" id="filter-label" for="search-input">Filter:</label> {# #}
+                        <input type="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" /> {# #}
+                        <span class="input-group-btn"> {# #}
+                            <button class="filter-clear btn" type="button" onclick="searchState.clearInput(event)"> {# #}
+                                Clear {# #}
+                            </button> {# #}
+                        </span> {# #}
                     </div> {# #}
                 </div> {# #}
-            </div>
-            {% for lint in lints %}
-                <article class="panel panel-default" id="{{lint.id}}"> {# #}
-                    <input id="label-{{lint.id}}" type="checkbox"> {# #}
-                    <label for="label-{{lint.id}}"> {# #}
-                        <h2 class="lint-title"> {# #}
-                            <div class="panel-title-name" id="lint-{{lint.id}}"> {# #}
-                                {{lint.id +}}
-                                <a href="#{{lint.id}}" class="anchor label label-default">&para;</a> {#+ #}
-                                <a href="" class="copy-to-clipboard anchor label label-default"> {# #}
-                                    &#128203; {# #}
-                                </a> {# #}
-                            </div> {# #}
+                <div class="col-12 col-md-2 btn-group expansion-group"> {# #}
+                    <button title="Collapse All" class="btn btn-default expansion-control" type="button" id="collapse-all"> {# #}
+                        <span class="glyphicon glyphicon-collapse-up"></span> {# #}
+                    </button> {# #}
+                    <button title="Expand All" class="btn btn-default expansion-control" type="button" id="expand-all"> {# #}
+                        <span class="glyphicon glyphicon-collapse-down"></span> {# #}
+                    </button> {# #}
+                </div> {# #}
+            </div> {# #}
+        </div>
+        {% for lint in lints %}
+            <article id="{{lint.id}}"> {# #}
+                <input id="label-{{lint.id}}" type="checkbox"> {# #}
+                <label for="label-{{lint.id}}"> {# #}
+                    <h2 class="lint-title"> {# #}
+                        <div class="panel-title-name" id="lint-{{lint.id}}"> {# #}
+                            {{lint.id +}}
+                            <a href="#{{lint.id}}" class="anchor label label-default">&para;</a> {#+ #}
+                            <a href="" class="copy-to-clipboard anchor label label-default"> {# #}
+                                &#128203; {# #}
+                            </a> {# #}
+                        </div> {# #}
 
-                            <span class="label label-lint-group label-default label-group-{{lint.group}}">{{lint.group}}</span> {#+ #}
+                        <span class="label label-default lint-group group-{{lint.group}}">{{lint.group}}</span> {#+ #}
 
-                            <span class="label label-lint-level label-lint-level-{{lint.level}}">{{lint.level}}</span> {#+ #}
+                        <span class="label lint-level level-{{lint.level}}">{{lint.level}}</span> {#+ #}
 
-                            <span class="label label-doc-folding"></span> {# #}
-                        </h2> {# #}
-                    </label> {# #}
+                        <span class="label doc-folding"></span> {# #}
+                    </h2> {# #}
+                </label> {# #}
 
-                    <div class="list-group lint-docs"> {# #}
-                        <div class="list-group-item lint-doc-md">{{Self::markdown(lint.docs)}}</div> {# #}
-                        <div class="lint-additional-info-container">
-                            {# Applicability #}
-                            <div> {# #}
-                                Applicability: {#+ #}
-                                <span class="label label-default label-applicability">{{ lint.applicability_str() }}</span> {# #}
-                                <a href="https://doc.rust-lang.org/nightly/nightly-rustc/rustc_lint_defs/enum.Applicability.html#variants">(?)</a> {# #}
-                            </div>
-                            {# Clippy version #}
-                            <div> {# #}
-                                {% if lint.group == "deprecated" %}Deprecated{% else %} Added{% endif +%} in: {#+ #}
-                                <span class="label label-default label-version">{{lint.version}}</span> {# #}
-                            </div>
-                            {# Open related issues #}
+                <div class="lint-docs"> {# #}
+                    <div class="lint-doc-md">{{Self::markdown(lint.docs)}}</div> {# #}
+                    <div class="lint-additional-info">
+                        {# Applicability #}
+                        <div> {# #}
+                            Applicability: {#+ #}
+                            <span class="label label-default applicability">{{ lint.applicability_str() }}</span> {# #}
+                            <a href="https://doc.rust-lang.org/nightly/nightly-rustc/rustc_lint_defs/enum.Applicability.html#variants">(?)</a> {# #}
+                        </div>
+                        {# Clippy version #}
+                        <div> {# #}
+                            {% if lint.group == "deprecated" %}Deprecated{% else %} Added{% endif +%} in: {#+ #}
+                            <span class="label label-default label-version">{{lint.version}}</span> {# #}
+                        </div>
+                        {# Open related issues #}
+                        <div> {# #}
+                            <a href="https://github.com/rust-lang/rust-clippy/issues?q=is%3Aissue+{{lint.id}}">Related Issues</a> {# #}
+                        </div>
+
+                        {# Jump to source #}
+                        {% if let Some(id_location) = lint.id_location %}
                             <div> {# #}
-                                <a href="https://github.com/rust-lang/rust-clippy/issues?q=is%3Aissue+{{lint.id}}">Related Issues</a> {# #}
+                                <a href="https://github.com/rust-lang/rust-clippy/blob/master/{{id_location}}">View Source</a> {# #}
                             </div>
-
-                            {# Jump to source #}
-                            {% if let Some(id_location) = lint.id_location %}
-                                <div> {# #}
-                                    <a href="https://github.com/rust-lang/rust-clippy/blob/master/{{id_location}}">View Source</a> {# #}
-                                </div>
-                            {% endif %}
-                        </div> {# #}
+                        {% endif %}
                     </div> {# #}
-                </article>
-            {% endfor %}
-        </div> {# #}
+                </div> {# #}
+            </article>
+        {% endfor %}
     </div> {# #}
 
     <a {#+ #}
diff --git a/util/gh-pages/script.js b/util/gh-pages/script.js
index ee13f1c0cd8..cfc5fb7b27c 100644
--- a/util/gh-pages/script.js
+++ b/util/gh-pages/script.js
@@ -250,10 +250,10 @@ window.filters = {
                 }
                 return {
                     elem: elem,
-                    group: elem.querySelector(".label-lint-group").innerText,
-                    level: elem.querySelector(".label-lint-level").innerText,
+                    group: elem.querySelector(".lint-group").innerText,
+                    level: elem.querySelector(".lint-level").innerText,
                     version: parseInt(version.split(".")[1]),
-                    applicability: elem.querySelector(".label-applicability").innerText,
+                    applicability: elem.querySelector(".applicability").innerText,
                     filteredOut: false,
                     searchFilteredOut: false,
                 };
@@ -594,19 +594,19 @@ disableShortcutsButton.checked = disableShortcuts;
 addListeners();
 highlightLazily();
 
-generateSettings();
-generateSearch();
-parseURLFilters();
-scrollToLintByURL();
-filters.filterLints();
-updateLintCount();
-
 function updateLintCount() {
     const allLints = filters.getAllLints().filter(lint => lint.group != "deprecated");
     const totalLints = allLints.length;
-    
+
     const countElement = document.getElementById("lint-count");
     if (countElement) {
         countElement.innerText = `Total number: ${totalLints}`;
     }
 }
+
+generateSettings();
+generateSearch();
+parseURLFilters();
+scrollToLintByURL();
+filters.filterLints();
+updateLintCount();
diff --git a/util/gh-pages/style.css b/util/gh-pages/style.css
index 022ea875200..66abf4598b0 100644
--- a/util/gh-pages/style.css
+++ b/util/gh-pages/style.css
@@ -30,17 +30,25 @@ blockquote { font-size: 1em; }
     background-color: var(--theme-hover);
 }
 
-div.panel div.panel-body button {
+.container > * {
+  margin-bottom: 20px;
+  border-radius: 4px;
+  background: var(--bg);
+  border: 1px solid var(--theme-popup-border);
+  box-shadow: 0 1px 1px rgba(0,0,0,.05);
+}
+
+div.panel-body button {
     background: var(--searchbar-bg);
     color: var(--searchbar-fg);
     border-color: var(--theme-popup-border);
 }
 
-div.panel div.panel-body button:hover {
+div.panel-body button:hover {
     box-shadow: 0 0 3px var(--searchbar-shadow-color);
 }
 
-div.panel div.panel-body  button.open {
+div.panel-body  button.open {
     filter: brightness(90%);
 }
 
@@ -48,8 +56,6 @@ div.panel div.panel-body  button.open {
     background-color: #777;
 }
 
-.panel-heading { cursor: pointer; }
-
 .lint-title {
     cursor: pointer;
     margin-top: 0;
@@ -70,8 +76,8 @@ div.panel div.panel-body  button.open {
 
 .panel-title-name { flex: 1; min-width: 400px;}
 
-.panel .panel-title-name .anchor { display: none; }
-.panel:hover .panel-title-name .anchor { display: inline;}
+.panel-title-name .anchor { display: none; }
+article:hover .panel-title-name .anchor { display: inline;}
 
 .search-control {
     margin-top: 15px;
@@ -111,40 +117,48 @@ div.panel div.panel-body  button.open {
     padding-bottom: 0.3em;
 }
 
-.label-lint-group {
-    min-width: 8em;
-}
-.label-lint-level {
+.lint-level {
     min-width: 4em;
 }
-
-.label-lint-level-allow {
+.level-allow {
     background-color: #5cb85c;
 }
-.label-lint-level-warn {
+.level-warn {
     background-color: #f0ad4e;
 }
-.label-lint-level-deny {
+.level-deny {
     background-color: #d9534f;
 }
-.label-lint-level-none {
+.level-none {
     background-color: #777777;
     opacity: 0.5;
 }
 
-.label-group-deprecated {
+.lint-group {
+    min-width: 8em;
+}
+.group-deprecated {
     opacity: 0.5;
 }
 
-.label-doc-folding {
+.doc-folding {
     color: #000;
     background-color: #fff;
     border: 1px solid var(--theme-popup-border);
 }
-.label-doc-folding:hover {
+.doc-folding:hover {
     background-color: #e6e6e6;
 }
 
+.lint-doc-md {
+    position: relative;
+    display: block;
+    padding: 10px 15px;
+    margin-bottom: -1px;
+    background: 0%;
+    border-bottom: 1px solid var(--theme-popup-border);
+    border-top: 1px solid var(--theme-popup-border);
+}
 .lint-doc-md > h3 {
     border-top: 1px solid var(--theme-popup-border);
     padding: 10px 15px;
@@ -157,32 +171,32 @@ div.panel div.panel-body  button.open {
 }
 
 @media (max-width:749px) {
-    .lint-additional-info-container {
+    .lint-additional-info {
         display: flex;
         flex-flow: column;
     }
-    .lint-additional-info-container > div + div {
+    .lint-additional-info > div + div {
         border-top: 1px solid var(--theme-popup-border);
     }
 }
 @media (min-width:750px) {
-    .lint-additional-info-container {
+    .lint-additional-info {
         display: flex;
         flex-flow: row;
     }
-    .lint-additional-info-container > div + div {
+    .lint-additional-info > div + div {
         border-left: 1px solid var(--theme-popup-border);
     }
 }
 
-.lint-additional-info-container > div {
+.lint-additional-info > div {
     display: inline-flex;
     min-width: 200px;
     flex-grow: 1;
     padding: 9px 5px 5px 15px;
 }
 
-.label-applicability {
+.applicability {
     background-color: #777777;
     margin: auto 5px;
 }
@@ -332,21 +346,12 @@ L4.75,12h2.5l0.5393066-2.1572876  c0.2276001-0.1062012,0.4459839-0.2269287,0.649
     border: 1px solid var(--theme-popup-border);
 }
 .page-header {
-    border-color: var(--theme-popup-border);
-}
-.panel-default .panel-heading {
-    background: var(--theme-hover);
-    color: var(--fg);
-    border: 1px solid var(--theme-popup-border);
-}
-.panel-default .panel-heading:hover {
-    filter: brightness(90%);
-}
-.list-group-item {
-    background: 0%;
-    border: 1px solid var(--theme-popup-border);
+    border: 0;
+    border-bottom: 1px solid var(--theme-popup-border);
+    padding-bottom: 19px;
+    border-radius: 0;
 }
-.panel, pre, hr {
+pre, hr {
     background: var(--bg);
     border: 1px solid var(--theme-popup-border);
 }
@@ -442,14 +447,15 @@ article > label {
 article > input[type="checkbox"] {
     display: none;
 }
-article > input[type="checkbox"] + label .label-doc-folding::before {
+article > input[type="checkbox"] + label .doc-folding::before {
     content: "+";
 }
-article > input[type="checkbox"]:checked + label .label-doc-folding::before {
+article > input[type="checkbox"]:checked + label .doc-folding::before {
     content: "−";
 }
 .lint-docs {
     display: none;
+    margin-bottom: 0;
 }
 article > input[type="checkbox"]:checked ~ .lint-docs {
     display: block;