Replace search with vanilla JS

Author: GuillaumeGomez

tests/compile-test.rs

@@ -10,7 +10,7 @@ use clippy_lints::declared_lints::LINTS;
 use clippy_lints::deprecated_lints::{DEPRECATED,DEPRECATED_VERSION,RENAMED};
 use pulldown_cmark::{Options,Parser, html};
 use rinja::{Template, filters::Safe};
-use serde::{Deserialize,Serialize};
+use serde::Deserialize;
 use test_utils::IS_RUSTC_TEST_SUITE;
 use ui_test::custom_flags::Flag;
 use ui_test::custom_flags::rustfix::RustfixMode;

util/gh-pages/index_template.html

@@ -180,9 +180,9 @@ <h1>Clippy Lints</h1>
 <divclass="col-12 col-md-5 search-control">
 <divclass="input-group">
 <labelclass="input-group-addon" id="filter-label" for="search-input">Filter:</label>
-<inputtype="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" onblur="updatePath()" onchange="handleInputChanged()" />
+<inputtype="text" class="form-control filter-input" placeholder="Keywords or search string (`S` or `/` to focus)" id="search-input" />
 <spanclass="input-group-btn">
-<buttonclass="filter-clear btn" type="button" ng-click="search = ''; updatePath();">
+<buttonclass="filter-clear btn" type="button" onclick="searchState.clearInput(event)">
  Clear
 </button>
 </span>
@@ -199,22 +199,22 @@ <h1>Clippy Lints</h1>
 </div>
 </div>
  {% for lint in lints %}
-<articleclass="panel panel-default" id="{{lint.id}}">
+<articleclass="panel panel-default" id="{(lint.id)}">
 <headerclass="panel-heading" ng-click="open[lint.id] = !open[lint.id]">
 <h2class="panel-title">
 <divclass="panel-title-name">
 <span>{(lint.id)}</span>
-<ahref="#{{lint.id}}" class="anchor label label-default"
+<ahref="#{(lint.id)}" class="anchor label label-default"
 ng-click="openLint(lint); $event.preventDefault(); $event.stopPropagation()">&para;</a>
-<ahref="" id="clipboard-{{lint.id}}" class="anchor label label-default" ng-click="copyToClipboard(lint); $event.stopPropagation()">
+<ahref="" id="clipboard-{(lint.id)}" class="anchor label label-default" ng-click="copyToClipboard(lint); $event.stopPropagation()">
  &#128203;
 </a>
 </div>
 
 <divclass="panel-title-addons">
-<spanclass="label label-lint-group label-default label-group-{{lint.group}}">{(lint.group)}</span>
+<spanclass="label label-lint-group label-default label-group-{(lint.group)}">{(lint.group)}</span>
 
-<spanclass="label label-lint-level label-lint-level-{{lint.level}}">{(lint.level)}</span>
+<spanclass="label label-lint-level label-lint-level-{(lint.level)}">{(lint.level)}</span>
 
 
 <spanclass="label label-doc-folding" ng-show="open[lint.id]">&minus;</span>
@@ -223,7 +223,7 @@ <h2 class="panel-title">
 </h2>
 </header>
 
-<divclass="list-group lint-docs"ng-class="{collapse: true, in: open[lint.id]}">
+<divclass="list-group lint-docs">
 <divclass="list-group-item lint-doc-md">{(markdown(lint.docs))}</div>
 <divclass="lint-additional-info-container">
  {# Applicability #}
@@ -232,18 +232,21 @@ <h2 class="panel-title">
 <spanclass="label label-default label-applicability">{( lint.applicability_str() )}</span>
 <ahref="https://doc.rust-lang.org/nightly/nightly-rustc/rustc_lint_defs/enum.Applicability.html#variants">(?)</a>
 </div>
-<!-- Clippy version -->
+{# Clippy version #}
 <divclass="lint-additional-info-item">
 <span>{% if lint.group == "deprecated" %}Deprecated{% else %} Added{% endif %} in: </span>
 <spanclass="label label-default label-version">{(lint.version)}</span>
 </div>
-<!-- Open related issues -->
+{# Open related issues #}
 <divclass="lint-additional-info-item">
 <ahref="https://github.com/rust-lang/rust-clippy/issues?q=is%3Aissue+{{lint.id}}">Related Issues</a>
 </div>
-<!-- Jump to source -->
-<divclass="lint-additional-info-item" ng-if="lint.id_location">
-<ahref="https://github.com/rust-lang/rust-clippy/blob/{{docVersion}}/clippy_lints/{{lint.id_location.path}}">View Source</a>
+
+ {# Jump to source #}
+ {% if let Some(id_location) = lint.id_location %}
+<divclass="lint-additional-info-item">
+<ahref="https://github.com/rust-lang/rust-clippy/blob/{{docVersion}}/clippy_lints/{{id_location}}">View Source</a>
+ {% endif %}
 </div>
 </div>
 </div>

util/gh-pages/script.js

@@ -361,42 +361,6 @@
 return$scope.groups[lint.group];
 };
 
-$scope.bySearch=function(lint,index,array){
-letsearchStr=$scope.search;
-// It can be `null` I haven't missed this value
-if(searchStr==null){
-returntrue;
-}
-searchStr=searchStr.toLowerCase();
-if(searchStr.startsWith("clippy::")){
-searchStr=searchStr.slice(8);
-}
-
-// Search by id
-if(lint.id.indexOf(searchStr.replaceAll("-","_"))!==-1){
-returntrue;
-}
-
-// Search the description
-// The use of `for`-loops instead of `foreach` enables us to return early
-constterms=searchStr.split(" ");
-constdocsLowerCase=lint.docs.toLowerCase();
-for(index=0;index<terms.length;index++){
-// This is more likely and will therefore be checked first
-if(docsLowerCase.indexOf(terms[index])!==-1){
-continue;
-}
-
-if(lint.id.indexOf(terms[index])!==-1){
-continue;
-}
-
-returnfalse;
-}
-
-returntrue;
-}
-
 $scope.byApplicabilities=function(lint){
 return$scope.applicabilities[lint.applicability];
 };
@@ -472,6 +436,11 @@ function getQueryVariable(variable) {
 window.searchState={
 timeout: null,
 inputElem: document.getElementById("search-input"),
+lastSearch: '',
+clearInput: ()=>{
+searchState.inputElem.value="";
+searchState.filterLints();
+},
 clearInputTimeout: ()=>{
 if(searchState.timeout!==null){
 clearTimeout(searchState.timeout);
@@ -483,32 +452,38 @@ window.searchState = {
 setTimeout(searchState.filterLints,50);
 },
 filterLints: ()=>{
-letsearchStr=searchState.value.trim().toLowerCase();
+searchState.clearInputTimeout();
+
+letsearchStr=searchState.inputElem.value.trim().toLowerCase();
 if(searchStr.startsWith("clippy::")){
 searchStr=searchStr.slice(8);
 }
+if(searchState.lastSearch===searchStr){
+return;
+}
+searchState.lastSearch=searchStr;
 constterms=searchStr.split(" ");
 
 onEachLazy(document.querySelectorAll("article"),lint=>{
 // Search by id
 if(lint.id.indexOf(searchStr.replaceAll("-","_"))!==-1){
-el.style.display="";
+lint.style.display="";
 return;
 }
 // Search the description
 // The use of `for`-loops instead of `foreach` enables us to return early
-constdocsLowerCase=lint.docs.toLowerCase();
+constdocsLowerCase=lint.textContent.toLowerCase();
 for(index=0;index<terms.length;index++){
 // This is more likely and will therefore be checked first
 if(docsLowerCase.indexOf(terms[index])!==-1){
-continue;
+return;
 }
 
 if(lint.id.indexOf(terms[index])!==-1){
-continue;
+return;
 }
 
-returnfalse;
+lint.style.display="none";
 }
 });
 },
@@ -631,7 +606,16 @@ function generateSettings() {
 );
 }
 
+functiongenerateSearch(){
+searchState.inputElem.addEventListener("change",handleInputChanged);
+searchState.inputElem.addEventListener("input",handleInputChanged);
+searchState.inputElem.addEventListener("keydown",handleInputChanged);
+searchState.inputElem.addEventListener("keyup",handleInputChanged);
+searchState.inputElem.addEventListener("paste",handleInputChanged);
+}
+
 generateSettings();
+generateSearch();
 
 // loading the theme after the initial load
 constprefersDark=window.matchMedia("(prefers-color-scheme: dark)");