From 6f54317bdf5566d822dd43da2ffc1a772d542bc5 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 13 Mar 2024 10:57:56 -0400
Subject: [PATCH] Keep search input field visuals consistent

Related feedback:
https://github.com/uBlockOrigin/uBlock-issues/issues/3161#issuecomment-1992340127
---
 src/3p-filters.html         |  2 +-
 src/css/3p-filters.css      | 16 +---------------
 src/css/codemirror.css      |  6 ++----
 src/css/common.css          | 18 ++++++++++++++++++
 src/js/3p-filters.js        |  4 ++--
 src/js/codemirror/search.js |  5 ++++-
 6 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/src/3p-filters.html b/src/3p-filters.html
index 173fa4c95..c9123cc9d 100644
--- a/src/3p-filters.html
+++ b/src/3p-filters.html
@@ -44,7 +44,7 @@
     <div class="rootstats expandable" data-key="*">
         <span class="fa-icon listExpander">angle-up</span><span id="listsOfBlockedHostsPrompt"></span>
     </div>
-    <div class="searchbar"><input type="search" spellcheck="false"/><span class="fa-icon">search</span></div>
+    <div class="searchfield"><input type="search" spellcheck="false" placeholder="" /><span class="fa-icon">search</span></div>
     <div class="listEntries"></div>
     <div class="li listEntry expandable" data-role="import">
         <span class="detailbar">
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index e59068564..f5bed6b8b 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -54,23 +54,9 @@ body.working #actions button {
     transform: rotate(180deg);
     }
 
-#lists .searchbar {
-    align-items: center;
-    column-gap: var(--default-gap-xxsmall);
-    display: inline-flex;
+#lists .searchfield {
     margin-block-start: calc(var(--font-size) * 0.75);
     margin-inline-start: var(--checkbox-size);
-    position: relative;
-    }
-#lists .searchbar input {
-    padding-inline-start: var(--default-gap-large);
-    }
-#lists .searchbar .fa-icon {
-    color: var(--ink-4);
-        fill: var(--ink-4);
-    left: 4px;
-    position: absolute;
-    transform: none;
     }
 #lists.searchMode > .listEntries .listEntries,
 #lists.searchMode > .listEntries .listEntry.searchMatch {
diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index ac1b89f73..fce571b72 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -160,7 +160,6 @@
     }
 
 .cm-search-widget {
-    align-items: center;
     background-color: var(--cm-gutter-surface);
     border-bottom: 1px solid var(--cm-gutter-border);
     cursor: default;
@@ -169,6 +168,7 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     justify-content: space-between;
+    line-height: 1.5;
     padding: var(--default-gap-xsmall);
     row-gap: var(--default-gap-xsmall);
     user-select: none;
@@ -186,7 +186,7 @@
 .cm-search-widget .cm-maximize {
     fill: none;
     flex-grow: 0;
-    font-size: 140%;
+    font-size: 130%;
     height: 1em;
     stroke-width: 3px;
     stroke: var(--ink-0);
@@ -221,8 +221,6 @@ html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
     transform: scale(1.2);
     }
 .cm-search-widget-input input {
-    border: 1px solid var(--cm-gutter-ink);
-    display: inline-flex;
     flex-grow: 1;
     max-width: 16em;
     }
diff --git a/src/css/common.css b/src/css/common.css
index 01606249a..fae4bb5d6 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -271,6 +271,24 @@ select {
     padding: 2px;
     }
 
+.searchfield {
+    align-items: center;
+    column-gap: var(--default-gap-xxsmall);
+    display: inline-flex;
+    position: relative;
+    }
+.searchfield .fa-icon {
+    color: var(--ink-4);
+        fill: var(--ink-4);
+    font-size: 1em !important;
+    left: 2px;
+    position: absolute;
+    transform: none;
+    }
+.searchfield input:not(:placeholder-shown) ~ .fa-icon {
+    display: none;
+    }
+
 .hidden {
     display: none;
     height: 0;
diff --git a/src/js/3p-filters.js b/src/js/3p-filters.js
index 4fb38fa36..574180942 100644
--- a/src/js/3p-filters.js
+++ b/src/js/3p-filters.js
@@ -664,7 +664,7 @@ dom.on('#suspendUntilListsAreLoaded', 'change', userSettingCheckboxChanged);
 /******************************************************************************/
 
 const searchFilterLists = ( ) => {
-    const pattern = dom.prop('.searchbar input', 'value') || '';
+    const pattern = dom.prop('.searchfield input', 'value') || '';
     dom.cl.toggle('#lists', 'searchMode', pattern !== '');
     if ( pattern === '' ) { return; }
     const reflectSearchMatches = listEntry => {
@@ -707,7 +707,7 @@ const searchFilterLists = ( ) => {
 
 const perListHaystack = new WeakMap();
 
-dom.on('.searchbar input', 'input', searchFilterLists);
+dom.on('.searchfield input', 'input', searchFilterLists);
 
 /******************************************************************************/
 
diff --git a/src/js/codemirror/search.js b/src/js/codemirror/search.js
index bde91b214..8794224c8 100644
--- a/src/js/codemirror/search.js
+++ b/src/js/codemirror/search.js
@@ -478,7 +478,10 @@ import { i18n$ } from '../i18n.js';
               '<div class="cm-search-widget">',
                 '<span class="cm-maximize"><svg viewBox="0 0 40 40"><path d="M4,16V4h12M24,4H36V16M4,24V36H16M36,24V36H24" /><path d="M14 2.5v12h-12M38 14h-12v-12M14 38v-12h-12M26 38v-12h12" /></svg></span>&ensp;',
                 '<span class="cm-search-widget-input">',
-                  '<input type="search" spellcheck="false" placeholder="&#x26B2;">&ensp;',
+                    '<span class="searchfield">',
+                        '<input type="search" spellcheck="false" placeholder="">',
+                        '<span class="fa-icon">search</span>',
+                    '</span>&ensp;',
                   '<span class="cm-search-widget-up cm-search-widget-button fa-icon">angle-up</span>&nbsp;',
                   '<span class="cm-search-widget-down cm-search-widget-button fa-icon fa-icon-vflipped">angle-up</span>&ensp;',
                   '<span class="cm-search-widget-count"></span>',