From 9709672b3473022fe143a013f2402bea0534e81b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrik=20Elfstr=C3=B6m?= <me@patrikelfstrom.se>
Date: Sun, 22 Dec 2024 10:19:03 +0100
Subject: [PATCH] WebUI: Change filter inputs to type search

Changing input type from text to search for all search and filter inputs
to enable user to easily clear input.

This feature is yet to be implemented in Firefox.
See tracking bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1654288

Also fix search icon horizontal positioning and minor input box paddings.

Closes #15481.
PR #22033.
---
 src/webui/www/private/css/style.css                |  9 +++++----
 src/webui/www/private/index.html                   |  2 +-
 src/webui/www/private/views/log.html               |  6 +++---
 src/webui/www/private/views/propertiesToolbar.html |  2 +-
 src/webui/www/private/views/search.html            | 10 +++++-----
 5 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
index 1dc074745340..186d0f5e87e9 100644
--- a/src/webui/www/private/css/style.css
+++ b/src/webui/www/private/css/style.css
@@ -107,6 +107,7 @@ ol {
 
 /* Forms */
 
+input[type="search"],
 input[type="text"],
 input[type="number"],
 input[type="password"],
@@ -503,13 +504,13 @@ a.propButton img {
 #torrentsFilterInput {
     background-color: var(--color-background-default);
     background-image: url("../images/edit-find.svg");
-    background-position: left;
+    background-position: 2px;
     background-repeat: no-repeat;
     background-size: 1.5em;
     border: 1px solid var(--color-border-default);
     border-radius: 3px;
-    min-width: 160px;
-    padding: 2px 12px 2px 25px;
+    min-width: 170px;
+    padding: 2px 2px 2px 25px;
 }
 
 #torrentsFilterRegexBox {
@@ -555,7 +556,7 @@ a.propButton img {
 
 #torrentFilesFilterInput {
     background-image: url("../images/edit-find.svg");
-    background-position: left;
+    background-position: 1px;
     background-repeat: no-repeat;
     background-size: 1.5em;
     margin-top: -1px;
diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index 99817ed4a9af..da0b74d7e876 100644
--- a/src/webui/www/private/index.html
+++ b/src/webui/www/private/index.html
@@ -140,7 +140,7 @@ <h1 class="applicationTitle">qBittorrent Web User Interface <span class="version
                     <div class="clear"></div>
                 </div>
                 <div id="torrentsFilterToolbar">
-                    <input type="text" id="torrentsFilterInput" placeholder="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" aria-label="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" autocorrect="off" autocapitalize="none">
+                    <input type="search" id="torrentsFilterInput" placeholder="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" aria-label="QBT_TR(Filter torrent list...)QBT_TR[CONTEXT=MainWindow]" autocorrect="off" autocapitalize="none">
                     <input type="checkbox" id="torrentsFilterRegexBox">
                     <label for="torrentsFilterRegexBox" aria-label="QBT_TR(Use regular expression)QBT_TR[CONTEXT=MainWindow]" title="QBT_TR(Use regular expression)QBT_TR[CONTEXT=MainWindow]"></label>
                     <label for="torrentsFilterSelect">QBT_TR(Filter by:)QBT_TR[CONTEXT=MainWindow]</label>
diff --git a/src/webui/www/private/views/log.html b/src/webui/www/private/views/log.html
index 1f54315f52e2..ace1399713ee 100644
--- a/src/webui/www/private/views/log.html
+++ b/src/webui/www/private/views/log.html
@@ -43,9 +43,9 @@
     #filterTextInput {
         background-image: url("../images/edit-find.svg");
         background-repeat: no-repeat;
-        background-position: left;
+        background-position: 2px;
         background-size: 1.5em;
-        padding: 2px 12px 2px 2em;
+        padding: 2px 2px 2px 2em;
         margin-left: .3em;
         width: 237px;
         border: 1px solid var(--color-border-default);
@@ -96,7 +96,7 @@
                 <option value="8">QBT_TR(Critical Messages)QBT_TR[CONTEXT=ExecutionLogWidget]</option>
             </select>
 
-            <input type="text" id="filterTextInput" oninput="window.qBittorrent.Log.filterTextChanged()" placeholder="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" aria-label="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" autocomplete="off" autocorrect="off" autocapitalize="none">
+            <input type="search" id="filterTextInput" oninput="window.qBittorrent.Log.filterTextChanged()" placeholder="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" aria-label="QBT_TR(Filter logs)QBT_TR[CONTEXT=ExecutionLogWidget]" autocomplete="off" autocorrect="off" autocapitalize="none">
             <button type="button" title="Clear input" onclick="javascript:document.getElementById('filterTextInput').value='';window.qBittorrent.Log.filterTextChanged();">QBT_TR(Clear)QBT_TR[CONTEXT=ExecutionLogWidget]</button>
         </div>
 
diff --git a/src/webui/www/private/views/propertiesToolbar.html b/src/webui/www/private/views/propertiesToolbar.html
index beb84b4c93dc..95fa5ff8f47c 100644
--- a/src/webui/www/private/views/propertiesToolbar.html
+++ b/src/webui/www/private/views/propertiesToolbar.html
@@ -1,6 +1,6 @@
 <div class="toolbarTabs">
     <div id="torrentFilesFilterToolbar" class="invisible">
-        <input type="text" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" aria-label="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none">
+        <input type="search" id="torrentFilesFilterInput" placeholder="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" aria-label="QBT_TR(Filter files...)QBT_TR[CONTEXT=PropertiesWidget]" autocorrect="off" autocapitalize="none">
     </div>
     <menu id="propertiesTabs" class="tab-menu">
         <li id="propGeneralLink">
diff --git a/src/webui/www/private/views/search.html b/src/webui/www/private/views/search.html
index 45e8dda090a7..187586c90ff8 100644
--- a/src/webui/www/private/views/search.html
+++ b/src/webui/www/private/views/search.html
@@ -4,10 +4,10 @@
         background-image: url("images/edit-find.svg");
         background-repeat: no-repeat;
         background-size: 1.5em;
-        background-position: left;
+        background-position: 3px;
         border: 1px solid var(--color-border-default);
         border-radius: 3px;
-        padding: 0 0 0 25px;
+        padding: 0 4px 0 25px;
     }
 
     #categorySelect {
@@ -36,7 +36,7 @@
     }
 
     #searchInNameFilter {
-        width: 150px;
+        width: 160px;
         margin-right: 20px;
     }
 
@@ -89,7 +89,7 @@
 <div id="searchResults">
     <div style="overflow: hidden; height: 60px;">
         <div style="display: flex; flex-wrap: wrap; gap: 5px; margin: 20px 0 10px 0; height: 24px;">
-            <input type="text" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
+            <input type="search" id="searchPattern" class="searchInputField" placeholder="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Search)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocomplete="off" autocapitalize="none" oninput="qBittorrent.Search.onSearchPatternChanged()">
             <select id="categorySelect" class="searchInputField" aria-label="QBT_TR(Select category)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.categorySelected()"></select>
             <select id="pluginsSelect" class="searchInputField" aria-label="QBT_TR(Select plugins)QBT_TR[CONTEXT=SearchEngineWidget]" onchange="qBittorrent.Search.pluginSelected()"></select>
             <button type="button" id="startSearchButton" class="searchInputField" onclick="qBittorrent.Search.startStopSearch()">
@@ -132,7 +132,7 @@
     </div>
 
     <div id="searchResultsFilters" class="invisible">
-        <input type="text" id="searchInNameFilter" placeholder="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocapitalize="none">
+        <input type="search" id="searchInNameFilter" placeholder="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" aria-label="QBT_TR(Filter)QBT_TR[CONTEXT=SearchEngineWidget]" autocorrect="off" autocapitalize="none">
 
         <span>QBT_TR(Results)QBT_TR[CONTEXT=SearchEngineWidget] (QBT_TR(showing)QBT_TR[CONTEXT=SearchEngineWidget] <span id="numSearchResultsVisible" class="numSearchResults">0</span> QBT_TR(out of)QBT_TR[CONTEXT=SearchEngineWidget] <span id="numSearchResultsTotal" class="numSearchResults">0</span>):</span>