Move builtin filter expr button inside input field

This commit is contained in:
Raymond Hill 2018-12-18 17:23:03 -05:00
parent 0dcd77d352
commit 61d95aa60f
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
3 changed files with 24 additions and 10 deletions

View File

@ -123,17 +123,25 @@ textarea {
opacity: 1; opacity: 1;
} }
#netInspector #filterInput { #netInspector #filterInput {
display: inline-flex;
}
#netInspector #filterInput > input {
min-width: 18em; min-width: 18em;
} }
#netInspector #filterInput.bad { #netInspector #filterInput.bad > input {
background-color: #fee; background-color: #fee;
} }
#netInspector #maxEntries { #netInspector #maxEntries {
margin: 0 2em; margin: 0 2em;
} }
#netInspector #filterExprButton { #netInspector #filterExprButton {
position: absolute;
right: 0;
transform: scaleY(-1); transform: scaleY(-1);
} }
#netInspector #filterExprButton:hover {
background-color: transparent;
}
#netInspector #filterExprButton.expanded { #netInspector #filterExprButton.expanded {
transform: scaleY(1); transform: scaleY(1);
} }

View File

@ -1418,7 +1418,11 @@ const rowFilterer = (function() {
const parseInput = function() { const parseInput = function() {
userFilters.length = 0; 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 n = rawParts.length;
const reStrs = []; const reStrs = [];
let not = false; let not = false;
@ -1580,7 +1584,7 @@ const rowFilterer = (function() {
}; };
uDom('#filterButton').on('click', onFilterButton); uDom('#filterButton').on('click', onFilterButton);
uDom('#filterInput').on('input', onFilterChangedAsync); uDom('#filterInput > input').on('input', onFilterChangedAsync);
uDom('#filterExprButton').on('click', onToggleExtras); uDom('#filterExprButton').on('click', onToggleExtras);
uDom('#filterExprPicker').on('click', '[data-filtex]', onToggleBuiltinExpression); uDom('#filterExprPicker').on('click', '[data-filtex]', onToggleBuiltinExpression);

View File

@ -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="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="filterExprGroup">
<span id="filterButton" class="button fa-icon" data-i18n-title="loggerRowFiltererButtonTip">filter</span> <span id="filterButton" class="button fa-icon" data-i18n-title="loggerRowFiltererButtonTip">filter</span>
<input id="filterInput" type="text" placeholder="logFilterPrompt"> <span id="filterInput">
<span id="filterExprButton" class="button fa-icon" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span> <input type="text" placeholder="logFilterPrompt">
<div id="filterExprPicker"> <span id="filterExprButton" class="button fa-icon" data-i18n-title="loggerRowFiltererBuiltinTip">angle-up</span>
<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 id="filterExprPicker">
<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="^--$|^\+\+$|^\*\*$|^<<$|^##|^#@#" 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="^1$" data-i18n="loggerRowFiltererBuiltin1p"></span><span data-filtex="^3(?:,\d)?$" data-i18n="loggerRowFiltererBuiltin3p"></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> <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> </span>
<input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip"> <input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip">
</div> </div>