From da253bf80c59167452e65589a22c644539d55eca Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sun, 3 Nov 2019 13:14:29 -0500
Subject: [PATCH] Use `type="search"` for search input fields

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/768

So that the input fields can gain extra built-in
browser widgets useful in search fields.
---
 src/css/logger-ui.css       | 11 +++--------
 src/dyna-rules.html         |  2 +-
 src/js/codemirror/search.js |  6 +++---
 src/logger-ui.html          |  2 +-
 4 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 3df70a861..470081699 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -122,21 +122,16 @@ body[dir="rtl"] #pageSelector {
     opacity: 1;
     }
 #netInspector #filterInput {
+    border: 1px solid gray;
     display: inline-flex;
     }
 #netInspector #filterInput > input {
-    min-width: 18em;
+    border: 0;
+    min-width: 16em;
     }
 #netInspector #filterExprButton {
-    position: absolute;
     transform: scaleY(-1);
     }
-body[dir="ltr"] #netInspector #filterExprButton {
-    right: 0;
-    }
-body[dir="rtl"] #netInspector #filterExprButton {
-    left: 0;
-    }
 #netInspector #filterExprButton:hover {
     background-color: transparent;
     }
diff --git a/src/dyna-rules.html b/src/dyna-rules.html
index 12353f354..ab70007a7 100644
--- a/src/dyna-rules.html
+++ b/src/dyna-rules.html
@@ -32,7 +32,7 @@
                 <button type="button" class="custom iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
                 <button type="button" class="custom iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
             </div>
-            <div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div>
+            <div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="search" size="20"></div>
         </div>
     </div>
 </div>
diff --git a/src/js/codemirror/search.js b/src/js/codemirror/search.js
index d21bd4c6d..248249170 100644
--- a/src/js/codemirror/search.js
+++ b/src/js/codemirror/search.js
@@ -96,11 +96,11 @@
     }
 
     function queryTextFromSearchWidget(cm) {
-        return getSearchState(cm).widget.querySelector('input[type="text"]').value;
+        return getSearchState(cm).widget.querySelector('input[type="search"]').value;
     }
 
     function queryTextToSearchWidget(cm, q) {
-        var input = getSearchState(cm).widget.querySelector('input[type="text"]');
+        var input = getSearchState(cm).widget.querySelector('input[type="search"]');
         if ( typeof q === 'string' && q !== input.value ) {
             input.value = q;
         }
@@ -310,7 +310,7 @@
               '<div class="cm-search-widget">' +
                 '<span class="fa-icon fa-icon-ro">search</span>&ensp;' +
                 '<span class="cm-search-widget-input">' +
-                  '<input type="text">' +
+                  '<input type="search">' +
                   '<span class="cm-search-widget-count">' +
                     '<span><!-- future use --></span><span>0</span>' +
                   '</span>' +
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 657b0926a..36fabf235 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -54,7 +54,7 @@
                 <span id="filterExprGroup">
                     <span id="filterButton" class="button fa-icon" data-i18n-title="loggerRowFiltererButtonTip">filter</span>
                     <span id="filterInput">
-                        <input type="text" placeholder="logFilterPrompt">
+                        <input type="search" placeholder="logFilterPrompt">
                         <span id="filterExprButton" class="button fa-icon expanded" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
                         <div id="filterExprPicker">
                             <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="\t--\t|\t<<\t|\t##" data-i18n="loggerRowFiltererBuiltinBlocked"></span><span data-filtex="\t\+\+\t|\t\*\*\t|\t#@#" data-i18n="loggerRowFiltererBuiltinAllowed"></span></div>