web: Add input reset button

I tried type="reset", but it reverts to initial value that is sometimes
set by the backend, instead of actually cleraing data.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/reset

static/script.js

@@ -404,4 +404,8 @@ document.addEventListener('DOMContentLoaded', _ => {
   setupAutoscrollingPrevention();
   setupAnchorOffsetHandler();
   setupGoToTop();
+
+  document.getElementById('clear-search').addEventListener('click',
+    _ => document.getElementById('search-input').value = ''
+  );
 });

static/style.css

@@ -225,6 +225,9 @@ h2 {
 .search {
   position: relative;
 }
+.search input {
+  height: 100%;
+}
 .filter input,
 .search input {
   font-family: 'Ubuntu Mono', monospace;
@@ -238,8 +241,7 @@ h2 {
 .search input:focus {
   outline: 0 none;
 }
-.filter button,
-.search button {
+.filter button {
   position: absolute;
   right: 0;
   bottom: 0;
@@ -250,6 +252,15 @@ h2 {
   color: #999;
   cursor: pointer;
 }
+.search button {
+  border: 0 none;
+  font-size: 1.7em;
+  height: 1.5em;
+  background: transparent;
+  color: #555;
+  cursor: pointer;
+  width: 50px;
+}
 
 .search {
   position: relative;
@@ -322,6 +333,12 @@ h2 {
 .search option { /* Firefox ignores that on linux but the default color is close */
   background-color: #ccc;
 }
+.search .search-controls {
+  flex: 3;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
 
 .filter {
   padding: 0.5em;
@@ -600,6 +617,14 @@ h2 {
   display: block;
 }
 
+.visible-if-js {
+  display: none;
+}
+
+.js .visible-if-js {
+  display: revert;
+}
+
 .no-js .sidebar:target {
   left: 0;
   height: 100vh;

templates/topbar.html

@@ -17,9 +17,12 @@
             {% endfor %}
             </select>
 
+            <div class="search-controls">
                 <input placeholder="Search Identifier" type="text" id="search-input" name="i"
-                value="{{ searched_ident|default('')|e }}" autofocus required />
-            <button class="icon-search"><span class="screenreader">Go get it</span></button>
+                    value="{{ searched_ident|default('')|e }}" autofocus/>
+                <button type="button" id="clear-search" class="visible-if-js icon-cross"><span class="screenreader">Clear</span></button>
+                <button type="submit" class="icon-search"><span class="screenreader">Go get it</span></button>
+            </div>
         </form>
     </div>
 </header>