Auto merge of #12656 - SpencerAWill:Add-expand-all-to-the-web-site, r…

…=xFrednet

Add 'Expand All' & 'Collapse All' to the website

changelog: Add 'Expand All' and 'Collapse All' buttons to the website.
Fixes #12542

Desktop view:
![image](https://github.com/rust-lang/rust-clippy/assets/43732866/554d7782-352c-4705-83f0-1cbc809a3290)

Mobile view:
![image](https://github.com/rust-lang/rust-clippy/assets/43732866/2845fc9a-a9e8-4057-b7dd-a8a1dbf47290)

I did have some slight performance issues with lots of tabs being open. In the future it may be worth it to consider virtual scrolling. I'm not sure if this would allow ctrl+f finding on all the lints since the DOM won't contain the text of all the lints, just those that need to be immediately shown.

util/gh-pages/index.html

@@ -57,20 +57,17 @@
             background-color: var(--theme-hover);
         }
 
-        div.panel div.panel-body button.dropdown-toggle {
+        div.panel div.panel-body button {
             background: var(--searchbar-bg);
             color: var(--searchbar-fg);
             border-color: var(--theme-popup-border);
         }
 
-        div.panel div.panel-body button.dropdown-toggle:hover {
+        div.panel div.panel-body button:hover {
             box-shadow: 0 0 3px var(--searchbar-shadow-color);
         }
 
-        div.panel div.panel-body .open button.dropdown-toggle {
-            background: var(--searchbar-bg);
-            color: var(--searchbar-fg);
-            border-color: var(--theme-popup-border);
+        div.panel div.panel-body  button.open {
             filter: brightness(90%);
         }
 
@@ -96,7 +93,6 @@
         @media (min-width: 992px) {
             .search-control {
                 margin-top: 0;
-                float: right;
             }
         }
 
@@ -361,6 +357,24 @@
             opacity: 30%;
         }
 
+        .expansion-group {
+            margin-top: 15px;
+            padding: 0px 8px;
+            display: flex;
+            flex-wrap: nowrap;
+        }
+
+        @media (min-width: 992px) {
+            .expansion-group {
+                margin-top: 0;
+                padding: 0px 15px;
+            }
+        }
+
+        .expansion-control {
+            width: 50%;
+        }
+
         :not(pre) > code {
             color: var(--inline-code-color);
             background-color: var(--inline-code-bg);
@@ -405,7 +419,7 @@ <h1>Clippy Lints</h1>
 
             <div class="panel panel-default" ng-show="data">
                 <div class="panel-body row">
-                    <div id="upper-filters" class="col-12 col-md-6">
+                    <div id="upper-filters" class="col-12 col-md-5">
                         <div class="btn-group" filter-dropdown>
                             <button type="button" class="btn btn-default dropdown-toggle">
                                 Lint levels <span class="badge">{{selectedValuesCount(levels)}}</span> <span class="caret"></span>
@@ -524,7 +538,7 @@ <h1>Clippy Lints</h1>
                             </ul>
                         </div>
                     </div>
-                    <div class="col-12 col-md-6 search-control">
+                    <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" id="search-input"
@@ -537,6 +551,14 @@ <h1>Clippy Lints</h1>
                             </span>
                         </div>
                     </div>
+                    <div class="col-12 col-md-2 btn-group expansion-group">
+                        <button title="Collapse All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, false)">
+                            <span class="glyphicon glyphicon-collapse-up"></span>
+                        </button>
+                        <button title="Expand All" class="btn btn-default expansion-control" type="button" ng-click="toggleExpansion(data, true)">
+                            <span class="glyphicon glyphicon-collapse-down"></span>
+                        </button>
+                    </div>
                 </div>
             </div>
             <!-- The order of the filters should be from most likely to remove a lint to least likely to improve performance. -->

util/gh-pages/script.js

@@ -469,6 +469,12 @@
                 $location.path(lint.id);
             };
 
+            $scope.toggleExpansion = function(lints, isExpanded) {
+                lints.forEach(lint => {
+                    $scope.open[lint.id] = isExpanded;
+                });
+            }
+
             $scope.copyToClipboard = function (lint) {
                 const clipboard = document.getElementById("clipboard-" + lint.id);
                 if (clipboard) {