From 61d95aa60f679eece13b4834f20def864fb0d478 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Tue, 18 Dec 2018 17:23:03 -0500
Subject: [PATCH] Move builtin filter expr button inside input field

---
 src/css/logger-ui.css | 10 +++++++++-
 src/js/logger-ui.js   |  8 ++++++--
 src/logger-ui.html    | 16 +++++++++-------
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 1764d9e4c..71dc4ba18 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -123,17 +123,25 @@ textarea {
     opacity: 1;
     }
 #netInspector #filterInput {
+    display: inline-flex;
+    }
+#netInspector #filterInput > input {
     min-width: 18em;
     }
-#netInspector #filterInput.bad {
+#netInspector #filterInput.bad > input {
     background-color: #fee;
     }
 #netInspector #maxEntries {
     margin: 0 2em;
     }
 #netInspector #filterExprButton {
+    position: absolute;
+    right: 0;
     transform: scaleY(-1);
     }
+#netInspector #filterExprButton:hover {
+    background-color: transparent;
+    }
 #netInspector #filterExprButton.expanded {
     transform: scaleY(1);
     }
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 009918e2b..e0de4c7c8 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -1418,7 +1418,11 @@ const rowFilterer = (function() {
     const parseInput = function() {
         userFilters.length = 0;
 
-        const rawParts = uDom('#filterInput').val().trim().split(/\s+/);
+        const rawParts =
+            uDom.nodeFromSelector('#filterInput > input')
+                .value
+                .trim()
+                .split(/\s+/);
         const n = rawParts.length;
         const reStrs = [];
         let not = false;
@@ -1580,7 +1584,7 @@ const rowFilterer = (function() {
     };
 
     uDom('#filterButton').on('click', onFilterButton);
-    uDom('#filterInput').on('input', onFilterChangedAsync);
+    uDom('#filterInput > input').on('input', onFilterChangedAsync);
     uDom('#filterExprButton').on('click', onToggleExtras);
     uDom('#filterExprPicker').on('click', '[data-filtex]', onToggleBuiltinExpression);
 
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 0ddeb6599..5b13351b5 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -48,13 +48,15 @@
             <span id="pause"><span class="button fa-icon" data-i18n-title="loggerPauseTip">pause-circle</span><span class="button fa-icon" data-i18n-title="loggerUnpauseTip">play-circle</span></span>
             <span id="filterExprGroup">
                 <span id="filterButton" class="button fa-icon" data-i18n-title="loggerRowFiltererButtonTip">filter</span>
-                <input id="filterInput" type="text" placeholder="logFilterPrompt">
-                <span id="filterExprButton" class="button fa-icon" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
-                <div id="filterExprPicker">
-                    <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="^--$|^\+\+$|^\*\*$|^<<$|^##|^#@#" data-i18n="loggerRowFiltererBuiltinEventful"></span><span data-filtex="^--$|^<<$|^##" data-i18n="loggerRowFiltererBuiltinBlocked"></span><span data-filtex="^\+\+$|^#@#" data-i18n="loggerRowFiltererBuiltinAllowed"></span></div>
-                    <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="^(?:css|font)$">css/font</span><span data-filtex="^image$">image</span><span data-filtex="^(?:inline-)?script(?:ing)?$">script</span><span data-filtex="^(?:websocket|xhr)$">xhr</span><span data-filtex="^frame$">frame</span><span data-filtex="^dom$">dom</span></div>
-                    <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="^1$" data-i18n="loggerRowFiltererBuiltin1p"></span><span data-filtex="^3(?:,\d)?$" data-i18n="loggerRowFiltererBuiltin3p"></span></div>
-                </div>
+                <span id="filterInput">
+                    <input type="text" placeholder="logFilterPrompt">
+                    <span id="filterExprButton" class="button fa-icon" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
+                    <div id="filterExprPicker">
+                        <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="^--$|^\+\+$|^\*\*$|^<<$|^##|^#@#" data-i18n="loggerRowFiltererBuiltinEventful"></span><span data-filtex="^--$|^<<$|^##" data-i18n="loggerRowFiltererBuiltinBlocked"></span><span data-filtex="^\+\+$|^#@#" data-i18n="loggerRowFiltererBuiltinAllowed"></span></div>
+                        <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="^(?:css|font)$">css/font</span><span data-filtex="^image$">image</span><span data-filtex="^(?:inline-)?script(?:ing)?$">script</span><span data-filtex="^(?:websocket|xhr)$">xhr</span><span data-filtex="^frame$">frame</span><span data-filtex="^dom$">dom</span></div>
+                        <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="^1$" data-i18n="loggerRowFiltererBuiltin1p"></span><span data-filtex="^3(?:,\d)?$" data-i18n="loggerRowFiltererBuiltin3p"></span></div>
+                    </div>
+                </span>
             </span>
             <input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip">
         </div>