From 16a76aa524c76fdbd46a13eae0daef5ecbaeda3a Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Mon, 22 Apr 2019 10:23:58 -0400
Subject: [PATCH] Add filter expressions in logger's expression picker

- Added `media`
- Include `generichide` in `dom` filter expression
- Include `beacon`/`csp_report`/`ping` in `other filter expression
---
 src/css/logger-ui.css | 5 +++++
 src/logger-ui.html    | 7 ++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 775e88e7a..07307a23f 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -176,9 +176,14 @@ body[dir="rtl"] #netInspector #filterExprPicker {
 #netInspector #filterExprPicker > div:last-of-type {
     border-bottom: 0;
     }
+#netInspector #filterExprPicker div {
+    display: flex;
+    }
 #netInspector #filterExprPicker span[data-filtex] {
+    align-items: center;
     border: 1px solid transparent;
     cursor: pointer;
+    display: inline-flex;
     margin: 0 0.5em 0 0;
     padding: 0.5em;
     white-space: nowrap;
diff --git a/src/logger-ui.html b/src/logger-ui.html
index fda4df585..4c9084dbd 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -58,7 +58,12 @@
                         <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>
-                            <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="\t(?:css|font)\t">css/font</span><span data-filtex="\timage\t">image</span><span data-filtex="\t(?:inline-)?script(?:ing)?\t">script</span><span data-filtex="\t(?:websocket|xhr)\t">xhr</span><span data-filtex="\tframe\t">frame</span><span data-filtex="\tdom\t">dom</span></div>
+                            <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span>
+                                <span style="flex-direction: column;">
+                                    <div style="margin-bottom: 1px;"><span data-filtex="\t(?:css|font)\t">css/font</span><span data-filtex="\timage\t">image</span><span data-filtex="\tmedia\t">media</span><span data-filtex="\t(?:inline-)?script(?:ing)?\t">script</span></div>
+                                    <div><span data-filtex="\t(?:websocket|xhr)\t">xhr</span><span data-filtex="\tframe\t">frame</span><span data-filtex="\t(?:beacon|csp_report|ping|other)\t">other</span><span data-filtex="\t(?:dom|generichide)\t">dom</span></div>
+                                </span>
+                            </div>
                             <div><span data-filtex="!" data-i18n="loggerRowFiltererBuiltinNot"></span><span data-filtex="\t(?:0,)?1\t" data-i18n="loggerRowFiltererBuiltin1p"></span><span data-filtex="\t(?:3(?:,\d)?|0,3)\t" data-i18n="loggerRowFiltererBuiltin3p"></span></div>
                         </div>
                     </span>