Grand refactoring of the logger

Performance-related work: the logger data has been decoupled from the DOM -- inspired from CodeMirror's way of efficiently handling large amout of text data. This decoupling now makes the logger highly efficient CPU- and memory-wise, and open the way to more possibilities. Ability to configure some aspect of the logger behavior and visuals: - The hard-coded limit of 5000 entries has been removed and is now replaced with a variety of user-configurable settings to enforce the discarding of logger entries. - Some columns in the logger output can now be hidden. The filter list look-up feature has been merged into the existing overlay dialog used to create URL rules or static filters, as an entry in a new "Details" pane. Other issues addressed during refactoring: - https://github.com/uBlockOrigin/uBlock-issues/issues/280 - https://github.com/gorhill/uBlock/issues/1999 The minimum version supported on Firefox has been bumped up to 55.0.
2024-07-08 04:49:12 +02:00 · 2019-01-12 16:36:20 -05:00 · 2019-01-12 16:36:20 -05:00 · ed5d63df69
commit ed5d63df69
parent 941182d6f2
27 changed files with 2218 additions and 1340 deletions
--- a/platform/firefox/manifest.json
+++ b/platform/firefox/manifest.json
@ -2,7 +2,7 @@
  "applications": {
    "gecko": {
      "id": "uBlock0@raymondhill.net",
-      "strict_min_version": "52.0"
+      "strict_min_version": "55.0"
    }
  },
  "author": "All uBlock Origin contributors",
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@ -300,7 +300,7 @@
    "description": ""
  },
  "settingsNoLargeMediaPrompt":{
-    "message":"Block media elements larger than {{input:number}} kB",
+    "message":"Block media elements larger than {{input}} kB",
    "description": ""
  },
  "settingsNoRemoteFontsPrompt":{
@ -607,9 +607,45 @@
    "message":"3rd-party",
    "description":"A keyword in the built-in row filtering expression"
  },
-  "logMaxEntriesTip":{
-    "message":"Maximum number of logger entries",
-    "description":"Tooltip informaing that the input field is to set the maximum number of entries in the log"
+  "loggerEntryDetailsHeader":{
+    "message":"Details",
+    "description":"Small header to identify the 'Details' pane for a specific logger entry"
+  },
+  "loggerEntryDetailsFilter":{
+    "message":"Filter",
+    "description":"Label to identify a filter field"
+  },
+  "loggerEntryDetailsFilterList":{
+    "message":"Filter list",
+    "description":"Label to identify a filter list field"
+  },
+  "loggerEntryDetailsRule":{
+    "message":"Rule",
+    "description":"Label to identify a rule field"
+  },
+  "loggerEntryDetailsContext":{
+    "message":"Context",
+    "description":"Label to identify a context field (typically a hostname)"
+  },
+  "loggerEntryDetailsRootContext":{
+    "message":"Root context",
+    "description":"Label to identify a root context field (typically a hostname)"
+  },
+  "loggerEntryDetailsPartyness":{
+    "message":"Partyness",
+    "description":"Label to identify a field providing partyness information"
+  },
+  "loggerEntryDetailsType":{
+    "message":"Type",
+    "description":"Label to identify the type of an entry"
+  },
+  "loggerEntryDetailsURL":{
+    "message":"URL",
+    "description":"Label to identify the URL of an entry"
+  },
+  "loggerURLFilteringHeader":{
+    "message":"URL rule",
+    "description":"Small header to identify the dynamic URL filtering section"
  },
  "loggerURLFilteringContextLabel":{
    "message":"Context:",
@ -619,12 +655,8 @@
    "message":"Type:",
    "description":"Label for the type selector"
  },
-  "loggerURLFilteringHeader":{
-    "message":"Dynamic URL filtering",
-    "description":"Small header to identify the dynamic URL filtering section"
-  },
  "loggerStaticFilteringHeader":{
-    "message":"Static filtering",
+    "message":"Filter",
    "description":"Small header to identify the static filtering section"
  },
  "loggerStaticFilteringSentence":{
@ -671,6 +703,46 @@
    "message":"Static filter <code>{{filter}}</code> could not be found in any of the currently enabled filter lists",
    "description":"Message to show when a filter cannot be found in any filter lists"
  },
+  "loggerSettingDiscardPrompt":{
+    "message":"Logger entries which do not fulfill all three conditions below will be automatically discarded:",
+    "description":"Logger setting: A sentence to describe the purpose of the settings below"
+  },
+  "loggerSettingPerEntryMaxAge":{
+    "message":"Preserve entries from the last {{input}} minutes",
+    "description":"A logger setting"
+  },
+  "loggerSettingPerTabMaxLoads":{
+    "message":"Preserve at most {{input}} page loads per tab",
+    "description":"A logger setting"
+  },
+  "loggerSettingPerTabMaxEntries":{
+    "message":"Preserve at most {{input}} entries per tab",
+    "description":"A logger setting"
+  },
+  "loggerSettingPerEntryLineCount":{
+    "message":"Use {{input}} lines per entry in vertically expanded mode",
+    "description":"A logger setting"
+  },
+  "loggerSettingHideColumnsPrompt":{
+    "message":"Hide columns:",
+    "description":"Logger settings: a sentence to describe the purpose of the checkboxes below"
+  },
+  "loggerSettingHideColumnTime":{
+    "message":"{{input}} Time",
+    "description":"A label for the time column"
+  },
+  "loggerSettingHideColumnFilter":{
+    "message":"{{input}} Filter/rule",
+    "description":"A label for the filter or rule column"
+  },
+  "loggerSettingHideColumnContext":{
+    "message":"{{input}} Context",
+    "description":"A label for the context column"
+  },
+  "loggerSettingHideColumnPartyness":{
+    "message":"{{input}} Partyness",
+    "description":"A label for the partyness column"
+  },
  "aboutChangelog":{
    "message":"Changelog",
    "description":""
--- a/src/css/fa-icons.css
+++ b/src/css/fa-icons.css
@ -63,6 +63,7 @@
 .fa-icon > .fa-icon_home {
    width: calc(1em * 1612 / 1792);
    }
+.fa-icon > .fa-icon_cog,
 .fa-icon > .fa-icon_floppy-o,
 .fa-icon > .fa-icon_info-circle,
 .fa-icon > .fa-icon_pause-circle-o,
--- a/src/css/logger-ui-inspector.css
+++ b/src/css/logger-ui-inspector.css
@ -85,13 +85,13 @@
    display: none;
    }

-#domInspector.vCompact li:not(.hasCosmeticHide):not(.isCosmeticHide) {
+#domInspector:not(.vExpanded) li:not(.hasCosmeticHide):not(.isCosmeticHide) {
    display: none;
    }
 #domInspector #domTree > li {
    display: block;
    }
-#domInspector.vCompact ul {
+#domInspector:not(.vExpanded) ul {
    display: block;
    }
 #domInspector li > ul > li:not(.hasCosmeticHide):not(.isCosmeticHide) {
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@ -38,10 +38,16 @@ textarea {
    background-color: #eee;
    }
 #pageSelector {
-    margin-right: 1em;
    padding: 0.25em 0;
    width: 28em;
    }
+body[dir="ltr"] #pageSelector {
+    margin-right: 1em;
+    }
+body[dir="rtl"] #pageSelector {
+    margin-left: 1em;
+    }
+
 #showpopup {
    display: inline-flex;
    align-items: center;
@ -56,11 +62,16 @@ textarea {
    padding-left: 0.5em;
    padding-right: 0.5em;
    position: absolute;
-    right: 0;
    }
 #info:hover {
    fill: #000;
    }
+body[dir="ltr"] #info {
+    right: 0;
+    }
+body[dir="rtl"] #info {
+    left: 0;
+    }
@media (max-width: 600px) {
    #info {
        display: none;
@ -81,13 +92,14 @@ textarea {
    flex-direction: column;
    }
 .vscrollable {
+    direction: ltr;
    flex-grow: 1;
    font-size: small;
    overflow-x: hidden;
    overflow-y: auto;
 }

-.vCompact .vCompactToggler.button {
+.inspector:not(.vExpanded) .vCompactToggler.button {
    transform: scaleY(-1)
    }
 .hCompact .hCompactToggler.button {
@ -125,14 +137,16 @@ textarea {
 #netInspector #filterInput > input {
    min-width: 18em;
    }
-#netInspector #maxEntries {
-    margin: 0 2em;
-    }
 #netInspector #filterExprButton {
    position: absolute;
-    right: 0;
    transform: scaleY(-1);
    }
+body[dir="ltr"] #netInspector #filterExprButton {
+    right: 0;
+    }
+body[dir="rtl"] #netInspector #filterExprButton {
+    left: 0;
+    }
 #netInspector #filterExprButton:hover {
    background-color: transparent;
    }
@ -146,10 +160,16 @@ textarea {
    position: absolute;
    flex-direction: column;
    font-size: small;
-    right: 0;
    top: 100%;
    z-index: 100;
    }
+body[dir="ltr"] #netInspector #filterExprPicker {
+    right: 0;
+    }
+body[dir="rtl"] #netInspector #filterExprPicker {
+    left: 0;
+    }
+
 #netInspector #filterExprGroup:hover #filterExprButton.expanded ~ #filterExprPicker {
    display: flex;
    }
@ -184,145 +204,169 @@ textarea {
    background-color: lightblue;
    border: 1px solid lightblue;
    }
+#netInspector #settings {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    position: absolute;
+}
+body[dir="ltr"] #netInspector #settings {
+    right: 0;
+    }
+body[dir="rtl"] #netInspector #settings {
+    left: 0;
+    }

-#netInspector table {
-    border: 0;
-    border-collapse: collapse;
-    direction: ltr;
-    table-layout: fixed;
+#netInspector .vscrollable {
+    overflow: hidden;
+    }
+#vwRenderer {
+    box-sizing: border-box;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
    width: 100%;
    }
-#netInspector table > colgroup > col:nth-of-type(1) {
-    width: 4.6em;
+#vwRenderer #vwScroller {
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: absolute;
+    width: 100%;
    }
-#netInspector table > colgroup > col:nth-of-type(2) {
-    width: 16%;
+#vwRenderer #vwScroller #vwVirtualContent {
+    overflow: hidden;
    }
-#netInspector table > colgroup > col:nth-of-type(3) {
-    width: 2.1em;
+#vwRenderer #vwContent {
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
    }
-#netInspector table > colgroup > col:nth-of-type(4) {
-    width: 20%;
+#vwRenderer .logEntry {
+    display: block;
+    left: 0;
+    overflow: hidden;
+    position: absolute;
+    width: 100%;
    }
-#netInspector table > colgroup > col:nth-of-type(5) {
-    width: 2.4em;
-    }
-#netInspector table > colgroup > col:nth-of-type(6) {
-    width: 6em;
-    }
-#netInspector table > colgroup > col:nth-of-type(7) {
-    width: calc(100% - 4.6em - 16% - 2.1em - 20% - 2.4em - 6em);
-    }
-#netInspector.f table tr.f {
+#vwRenderer .logEntry:empty {
    display: none;
    }
-
-#netInspector tr.cat_info {
-    color: #00f;
-    }
-#netInspector tr.blocked {
-    background-color: rgba(192, 0, 0, 0.1);
-    }
-body.colorBlind #netInspector tr.blocked {
-    background-color: rgba(0, 19, 110, 0.1);
-    }
-#netInspector tr.nooped {
-    background-color: rgba(108, 108, 108, 0.1);
-    }
-body.colorBlind #netInspector tr.nooped {
-    background-color: rgba(96, 96, 96, 0.1);
-    }
-#netInspector tr.allowed {
-    background-color: rgba(0, 160, 0, 0.1);
-    }
-body.colorBlind #netInspector tr.allowed {
-    background-color: rgba(255, 194, 57, 0.1)
-    }
-#netInspector tr.cosmetic,
-#netInspector tr.redirect {
-    background-color: rgba(255, 255, 0, 0.1);
-    }
-body.colorBlind #netInspector tr.cosmetic,
-body.colorBlind #netInspector tr.redirect {
-    background-color: rgba(0, 19, 110, 0.1);
-    }
-#netInspector tr.maindoc {
-    background-color: #666;
-    color: white;
-    text-align: center;
-    }
-
-body #netInspector td {
-    border: 1px solid #ccc;
-    border-top: none;
-    min-width: 0.5em;
-    padding: 3px;
-    vertical-align: top;
-    white-space: normal;
-    word-break: break-all;
-    word-wrap: break-word;
-    }
-#netInspector tr td {
-    border-top: 1px solid #ccc;
-    }
-#netInspector tr td:first-of-type {
-    border-left: none;
-    }
-#netInspector tr td:last-of-type {
-    border-right: none;
-    }
-#netInspector.vCompact tr:not(.vExpanded) td {
-    overflow: hidden;
-    text-overflow: ellipsis;
+#vwRenderer .logEntry > div {
+    height: 100%;
    white-space: nowrap;
    }
-#netInspector tr[data-tabid].void {
+#vwRenderer .logEntry > div.blocked {
+    background-color: rgba(192, 0, 0, 0.1);
+    }
+body.colorBlind #vwRenderer .logEntry > div.blocked {
+    background-color: rgba(0, 19, 110, 0.1);
+    }
+#vwRenderer .logEntry > div.nooped {
+    background-color: rgba(108, 108, 108, 0.1);
+    }
+body.colorBlind #vwRenderer .logEntry > div.nooped {
+    background-color: rgba(96, 96, 96, 0.1);
+    }
+#vwRenderer .logEntry > div.allowed {
+    background-color: rgba(0, 160, 0, 0.1);
+    }
+body.colorBlind #vwRenderer .logEntry > div.allowed {
+    background-color: rgba(255, 194, 57, 0.1)
+    }
+#vwRenderer .logEntry > div.cosmetic,
+#vwRenderer .logEntry > div.redirect {
+    background-color: rgba(255, 255, 0, 0.1);
+    }
+body.colorBlind #vwRenderer .logEntry > div.cosmetic,
+body.colorBlind #vwRenderer .logEntry > div.redirect {
+    background-color: rgba(0, 19, 110, 0.1);
+    }
+#vwRenderer .logEntry > div[data-type="tabLoad"] {
+    background-color: #666;
+    color: white;
+    }
+#vwRenderer .logEntry > div[data-type="error"] {
+    color: #800;
+    }
+#vwRenderer .logEntry > div[data-type="info"] {
+    color: #008;
+    }
+#vwRenderer .logEntry > div.voided {
    opacity: 0.3;
    }
-#netInspector tr[data-tabid].void:hover {
+#vwRenderer .logEntry > div.voided:hover {
    opacity: 0.7;
    }

-#netInspector tr td:nth-of-type(1) {
-    cursor: default;
-    text-align: right;
+#vwRenderer .logEntry > div > span {
+    border: 1px solid #ccc;
+    border-top: 0;
+    border-right: 0;
+    box-sizing: border-box;
+    display: inline-block;
+    height: 100%;
+    overflow: hidden;
+    padding: 0.2em;
+    vertical-align: middle;
    white-space: nowrap;
+    word-break: break-all;
    }
-#netInspector tr td:nth-of-type(2) {
+#vwRenderer .logEntry > div.canDetails:hover > span {
+    background-color: rgba(0,0,0,0.04);
    }
-#netInspector tr.canLookup td:nth-of-type(2) {
+body[dir="ltr"] #vwRenderer .logEntry > div > span:first-child {
+    border-left: 0;
+    }
+body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
+    border-right: 0;
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(1) {
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(2) {
+    }
+#vwRenderer #vwContent .logEntry > div > span:nth-of-type(2) {
+    text-overflow: ellipsis;
+    }
+.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(2) {
+    overflow-y: auto;
+    white-space: pre-line;
+    }
+#vwRenderer .logEntry > div.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
+    text-align: center;
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(3) {
+    font: 12px monospace;
+    padding-left: 0.3em;
+    padding-right: 0.3em;
+    text-align: center;
+    }
+#vwRenderer .logEntry > div.canDetails:hover > span:nth-of-type(2),
+#vwRenderer .logEntry > div.canDetails:hover > span:nth-of-type(3),
+#vwRenderer .logEntry > div.canDetails:hover > span:nth-of-type(5) {
+    background: rgba(0, 0, 0, 0.08);
    cursor: zoom-in;
    }
-#netInspector tr.cat_net td:nth-of-type(3),
-#netInspector tr.cat_cosmetic td:nth-of-type(3),
-#netInspector tr.cat_redirect td:nth-of-type(3) {
-    font: 12px monospace;
-    text-align: center;
-    white-space: nowrap;
-    }
-#netInspector tr.cat_net td:nth-of-type(3) {
-    cursor: pointer;
-    }
-#netInspector tr.cat_net td:nth-of-type(3):hover {
-    background: #ccc;
-    }
-#netInspector tr td:nth-of-type(4) {
-    }
-#netInspector tr[data-dochn] td:nth-of-type(4) {
+#netInspector:not(.vExpanded) #vwRenderer .logEntry > div > span:nth-of-type(4) {
    direction: rtl;
    }
-#netInspector tr td:nth-of-type(5) {
-    cursor: default;
-    overflow: visible !important;
-    position: relative;
+#vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
+    text-overflow: ellipsis;
+    }
+.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
+    overflow-y: auto;
+    text-overflow: clip;
+    white-space: pre-line;
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(5) {
    text-align: center;
    }
-#netInspector tr td[data-parties]:nth-of-type(5) {
-    cursor: zoom-in;
-    }
 /* visual for tabless network requests */
-#netInspector tr.tab_bts td:nth-of-type(5)::before {
-    border: 5px solid #bbb;
+#vwRenderer .logEntry > div > span:nth-of-type(5) {
+    position: relative;
+    }
+#vwRenderer .logEntry > div[data-tabid="-1"] > span:nth-of-type(5)::before {
+    border: 5px solid #ccc;
    border-bottom: 0;
    border-top: 0;
    bottom: 0;
@ -334,49 +378,61 @@ body #netInspector td {
    width: calc(100% - 10px);
    z-index: -1;
    }
-/* visual for quick tooltip */
-#netInspector tr td[data-parties]:nth-of-type(5):active::after {
-    background-color: #feb;
-    border: 1px outset #feb;
-    border-left: 5px solid gray;
-    color: black;
-    content: attr(data-parties);
-    left: 100%;
-    padding: 0.4em 0.6em;
-    position: absolute;
-    text-align: left;
-    top: -50%;
-    white-space: pre;
-}
-#netInspector tr.cat_net td:nth-of-type(7) > span > b {
+#vwRenderer .logEntry > div > span:nth-of-type(6) {
+    }
+#vwRenderer #vwContent .logEntry > div > span:nth-of-type(6) {
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(7) {
+    }
+#vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) {
+    text-overflow: ellipsis;
+    }
+.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) {
+    overflow-y: auto;
+    white-space: pre-line;
+    }
+#vwRenderer .logEntry > div > span:nth-of-type(7) > span > b {
    font-weight: bold;
    }
-#netInspector tr td:nth-of-type(7) b {
+#vwRenderer .logEntry > div > span:nth-of-type(7) b {
    font-weight: normal;
    }
-#netInspector tr.blocked td:nth-of-type(7) b {
+#vwRenderer .logEntry > div.blocked > span:nth-of-type(7) b {
    background-color: rgba(192, 0, 0, 0.2);
    }
-body.colorBlind #netInspector tr.blocked td:nth-of-type(7) b {
+body.colorBlind #vwRenderer .logEntry > div.blocked > span:nth-of-type(7) b {
    background-color: rgba(0, 19, 110, 0.2);
    }
-#netInspector tr.nooped td:nth-of-type(7) b {
+#vwRenderer .logEntry > div.nooped > span:nth-of-type(7) b {
    background-color: rgba(108, 108, 108, 0.2);
    }
-body.colorBlind #netInspector tr.nooped td:nth-of-type(7) b {
+body.colorBlind #vwRenderer .logEntry > div.nooped > span:nth-of-type(7) b {
    background-color: rgba(96, 96, 96, 0.2);
    }
-#netInspector tr.allowed td:nth-of-type(7) b {
+#vwRenderer .logEntry > div.allowed > span:nth-of-type(7) b {
    background-color: rgba(0, 160, 0, 0.2);
    }
-body.colorBlind #netInspector tr.allowed td:nth-of-type(7) b {
+body.colorBlind #vwRenderer .logEntry > div.allowed > span:nth-of-type(7) b {
    background-color: rgba(255, 194, 57, 0.2);
    }
+#vwRenderer #vwBottom {
+    background-color: #00F;
+    height: 0;
+    overflow: hidden;
+    width: 100%;
+    }
+#vwRenderer #vwLineSizer {
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    visibility: hidden;
+    width: 100%;
+    }

 #popupContainer {
    background: white;
    border: 1px solid gray;
-    border-radius: 3px;
    bottom: 0;
    box-sizing: border-box;
    display: none;
@ -389,16 +445,13 @@ body.colorBlind #netInspector tr.allowed td:nth-of-type(7) b {
    display: block;
    }

-.modalDialog {
+#modalOverlay {
    align-items: center;
-    -webkit-align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    border: 0;
    bottom: 0;
-    display: flex;
-    display: -webkit-flex;
+    display: none;
    justify-content: center;
-    -webkit-justify-content: center;
    left: 0;
    margin: 0;
    position: fixed;
@ -406,27 +459,56 @@ body.colorBlind #netInspector tr.allowed td:nth-of-type(7) b {
    top: 0;
    z-index: 400;
    }
-
-.modalDialog .dialog {
+#modalOverlay.on {
+    display: flex;
+    }
+#modalOverlay > div {
+    position: relative;
+    }
+#modalOverlay > div > div:nth-of-type(1) {
    background-color: white;
-    border: 2px solid white;
+    border: 0;
    box-sizing: border-box;
-    width: 90vw;
+    padding: 1em;
    max-height: 90vh;
    overflow-y: auto;
+    width: 90vw;
+    }
+#modalOverlay > div > div:nth-of-type(2) {
+    stroke: #000;
+    stroke-width: 3px;
+    position: absolute;
+    width: 1.6em;
+    height: 1.6em;
+    bottom: calc(100% + 2px);
+    background-color: white;
+    }
+body[dir="ltr"] #modalOverlay > div > div:nth-of-type(2) {
+    right: 0;
+    }
+body[dir="rtl"] #modalOverlay > div > div:nth-of-type(2) {
+    left: 0;
+    }
+#modalOverlay > div > div:nth-of-type(2):hover {
+    background-color: #eee;
+    }
+#modalOverlay > div > div:nth-of-type(2) > * {
+    pointer-events: none;
    }

-#netFilteringDialog .dialog p {
-    line-height: 2em;
+#netFilteringDialog {
+    font-size: 90%;
    }
-
-#netFilteringDialog .dialog select {
+#netFilteringDialog a {
+    text-decoration: none;
+    }
+#netFilteringDialog select {
    max-width: 75%;
    outline: none;
    padding: 0.2em;
 }
-
-#netFilteringDialog .dialog > div.preview {
+#netFilteringDialog > .preview {
+    align-items: center;
    /* http://lea.verou.me/css3patterns/ */
    background-color: #aaa;
    background-image:
@ -448,35 +530,28 @@ body.colorBlind #netInspector tr.allowed td:nth-of-type(7) b {
        );
    background-position:0 0, 9px 9px;
    background-size: 18px 18px;
+    display: flex;
+    justify-content: center;
+    margin-bottom: 1em;
+    padding: 0.5em;
    text-align: center;
    }
-#netFilteringDialog .dialog > div.preview > * {
+#netFilteringDialog > .preview > * {
+    background-color: white;
    max-width: 100%;
-    max-height: 40vh;
+    max-height: 20vh;
+    }
+#netFilteringDialog > .preview > span {
+    cursor: pointer;
+    padding: 0.5em;
    }

-#netFilteringDialog .dialog table {
-    border: 0;
-    border-collapse: collapse;
-    table-layout: fixed;
-    width: 100%;
-    }
-#netFilteringDialog .dialog table > colgroup > col:nth-of-type(1) {
-    width: 3.8em;
-    }
-#netFilteringDialog .dialog table > colgroup > col:nth-of-type(2) {
-    }
-
-#netFilteringDialog .dialog td {
-    border: 0;
-    padding: 0;
-    vertical-align: middle;
-    }
-#netFilteringDialog .dialog > div.headers {
+#netFilteringDialog > .headers {
    border-bottom: 1px solid #888;
+    line-height: 2;
    position: relative;
    }
-#netFilteringDialog .dialog > div.headers > span.header {
+#netFilteringDialog > .headers > .header {
    background-color: #eee;
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
@ -485,98 +560,164 @@ body.colorBlind #netInspector tr.allowed td:nth-of-type(7) b {
    color: #888;
    cursor: pointer;
    display: inline-block;
-    font-size: small;
-    line-height: 2em;
-    margin-left: 0.5em;
    padding: 0 1em;
    position: relative;
    text-align: center;
    top: 1px;
    }
-#netFilteringDialog .dialog > div.headers > span.header.selected {
+#netFilteringDialog[data-pane="details"] > .headers > [data-pane="details"],
+#netFilteringDialog[data-pane="dynamic"] > .headers > [data-pane="dynamic"],
+#netFilteringDialog[data-pane="static"] > .headers > [data-pane="static"] {
    background-color: white;
    border-color: #888;
    border-bottom: 1px solid white;
    color: black;
    }
-#netFilteringDialog .dialog > div.headers > span.tools {
-    display: inline-block;
+#netFilteringDialog > .headers > .tools {
+    bottom: 0;
+    display: flex;
    position: absolute;
-    top: 50%;
-    transform: translate(0, -50%);
    }
-body[dir="ltr"] #netFilteringDialog .dialog > div.headers > span.tools {
-    right: 0.1em;
+body[dir="ltr"] #netFilteringDialog > .headers > .tools {
+    right: 0;
    }
-body[dir="rtl"] #netFilteringDialog .dialog > div.headers > span.tools {
-    left: 0.1em;
+body[dir="rtl"] #netFilteringDialog > .headers > .tools {
+    left: 0;
    }
-#netFilteringDialog .dialog > div.headers > span.tools > span {
+#netFilteringDialog > .headers > .tools > span {
    cursor: pointer;
-    font-size: 1.2em;
-    padding: 0.2em 0.4em;
+    font-size: 1.5em;
+    padding: 0 0.25em;
    text-align: center;
    }
-#netFilteringDialog .dialog > div.headers > span.tools > span:hover {
+#netFilteringDialog > .headers > .tools > span:hover {
    background-color: #eee;
    }
-#netFilteringDialog .dialog > div.containers {
-    height: 40vh;
-    overflow: hidden;
-    overflow-y: auto;
-    }
-#netFilteringDialog .dialog > div.containers > div {
+#netFilteringDialog.cosmeticRealm > .headers > .dynamic,
+#netFilteringDialog.cosmeticRealm > .panes > .dynamic {
    display: none;
    }
-#netFilteringDialog .dialog > div.containers > div.selected {
-    display: block;
+#netFilteringDialog.cosmeticRealm > .headers > .static,
+#netFilteringDialog.cosmeticRealm > .panes > .static {
+    display: none;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar select {
-    font: 14px;
-    height: 2.5em;
+#netFilteringDialog > div.panes {
+    min-height: 40vh;
+    overflow: hidden;
+    overflow-y: auto;
+    padding-top: 1em;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar #saveRules {
+#netFilteringDialog > div.panes > div {
+    display: none;
+    }
+#netFilteringDialog[data-pane="details"] > .panes > [data-pane="details"],
+#netFilteringDialog[data-pane="dynamic"] > .panes > [data-pane="dynamic"],
+#netFilteringDialog[data-pane="static"] > .panes > [data-pane="static"] {
+    display: flex;
+    flex-direction: column;
+    }
+#netFilteringDialog > .panes > .details > div {
+    align-items: stretch;
+    background-color: #e6e6e6;
+    border: 0;
+    border-bottom: 1px solid white;
+    display: flex;
+    min-height: 2.2em;
+    }
+#netFilteringDialog > .panes > .details > div > span {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    padding: 0.25em 0.5em;
+    }
+#netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
+    border: 0;
+    flex-grow: 0;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    width: 8em;
+    }
+body[dir="ltr"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
+    border-right: 1px solid white;
+    }
+body[dir="rtl"] #netFilteringDialog > .panes > .details > div > span:nth-of-type(1) {
+    border-left: 1px solid white;
+    }
+#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) {
+    max-height: 20vh;
+    overflow: hidden auto;
+    white-space: pre-line
+    }
+#netFilteringDialog > .panes > .details > div > span:nth-of-type(2):not(.prose) {
+    word-break: break-all;
+    }
+#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon {
+    font-size: 110%;
+    opacity: 0.5;
+    vertical-align: bottom;
+    }
+#netFilteringDialog > .panes > .details > div > span:nth-of-type(2) .fa-icon:hover {
+    opacity: 1;
+    }
+#netFilteringDialog > div.panes > .dynamic > .toolbar {
+    padding-bottom: 1em;
+    }
+#netFilteringDialog > div.panes > .dynamic .row {
+    display: flex;
+    min-height: 2.2em;
+    }
+#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
+    align-self: stretch;
+    border: 0;
+    display: inline-flex;
+    flex-grow: 0;
+    flex-shrink: 0;
+    text-align: center;
+    width: 4.5em;
+    }
+body[dir="ltr"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
+    border-right: 1px solid white;
+    }
+body[dir="rtl"] #netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(1) {
+    border-left: 1px solid white;
+    }
+#netFilteringDialog > div.panes > .dynamic .row > span:nth-of-type(2) {
+    align-self: center;
+    padding: 0 0.5em;
+    }
+#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
    background-color: #ffe;
    border: 1px solid #ddc;
    border-radius: 4px;
    fill: #888;
    cursor: pointer;
-    font-size: 1.6em;
-    margin: 0.1em;
-    padding: 0.25em 0.5em;
+    font-size: 2em;
    visibility: hidden;
+    width: 100%;
    }
-body.dirty #netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar #saveRules {
+body.dirty #netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
    visibility: visible;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar #saveRules:hover {
+#netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules:hover {
    fill: black;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic > table.toolbar tr.entry {
+#netFilteringDialog > div.panes > .dynamic > .toolbar .entry {
    display: none;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry {
+#netFilteringDialog > div.panes > .dynamic .entry {
    background-color: #e6e6e6;
    border: 0;
    border-bottom: 1px solid white;
-    font-size: 13px;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry:hover {
+#netFilteringDialog > div.panes > .dynamic .entry:hover {
    background-color: #f0f0f0;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td:first-of-type {
-    border: 0;
-    border-right: 1px solid white;
-    text-align: center;
-    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action {
+#netFilteringDialog > div.panes > .dynamic .entry > .action {
    background-color: transparent;
    border: 0;
    cursor: pointer;
-    height: 2em;
-    width: 100%;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action > span {
+#netFilteringDialog > div.panes > .dynamic .entry > .action > span {
    background-color: transparent;
    border: 0;
    display: inline-block;
@ -585,90 +726,94 @@ body.dirty #netFilteringDialog .dialog > div.containers > div.dynamic > table.to
    visibility: hidden;
    width: 33.33%;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.allow {
+#netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
    background-color: rgba(0, 160, 0, 0.3);
    }
-body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.allow {
+body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.allow {
    background-color: rgba(255, 194, 57, 0.4);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.noop {
+#netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
    background-color: rgba(108, 108, 108, 0.3);
    }
-body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.noop {
+body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.noop {
    background-color: rgba(96, 96, 96, 0.4);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.block {
+#netFilteringDialog > div.panes > .dynamic .entry > .action.block {
    background-color: rgba(192, 0, 0, 0.3);
    }
-body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.block {
+body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.block {
    background-color: rgba(0, 19, 110, 0.4);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.own.allow {
+#netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
    background-color: rgba(0, 160, 0, 1);
    }
-body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.own.allow {
+body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.allow {
    background-color: rgba(255, 194, 57, 1);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.own.noop,
-body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.own.noop {
+#netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop,
+body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.noop {
    background-color: rgba(108, 108, 108, 1);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.own.block {
+#netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
    background-color: rgba(192, 0, 0, 1);
    }
-body.colorBlind #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action.own.block {
+body.colorBlind #netFilteringDialog > div.panes > .dynamic .entry > .action.own.block {
    background-color: rgba(0, 19, 110, 1);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action:not(.own):hover > span {
+#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span {
    opacity: 0.2;
    visibility: visible;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action:not(.own):hover > span:hover {
+#netFilteringDialog > div.panes > .dynamic .entry > .action:not(.own):hover > span:hover {
    opacity: 0.75;
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.allow {
+#netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
    background-color: rgb(0, 160, 0);
    }
-body.colorBlind  #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.allow {
+body.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .allow {
    background-color: rgb(255, 194, 57);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.noop {
+#netFilteringDialog > div.panes > .dynamic .entry > .action > .noop {
    background-color: rgb(108, 108, 108);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.block {
+#netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
    background-color: rgb(192, 0, 0);
    }
-body.colorBlind  #netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td > div.action > span.block {
+body.colorBlind  #netFilteringDialog > div.panes > .dynamic .entry > .action > .block {
    background-color: rgb(0, 19, 110);
    }
-#netFilteringDialog .dialog > div.containers > div.dynamic tr.entry > td.url {
+#netFilteringDialog > div.panes > .dynamic .entry > .url {
    overflow: hidden;
-    padding-left: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
    }
-#netFilteringDialog .dialog > div.containers > div.static > p {
-    margin: 0.75em 0;
+#netFilteringDialog > div.panes > div.static > div {
+    line-height: 2;
    }
-#netFilteringDialog .dialog > div.containers > div.static textarea {
+#netFilteringDialog > div.panes > div.static > div {
+    padding-bottom: 1em;
+    }
+#netFilteringDialog > div.panes > div.static textarea {
    height: 6em;
+    max-height: 20vh;
+    min-height: 10vh;
+    word-break: break-all;
    }
-#netFilteringDialog .dialog > div.containers > div.static > p:nth-of-type(2) {
+#netFilteringDialog > div.panes > div.static > div:nth-of-type(2) {
    text-align: center;
    }

-#filterFinderDialog .dialog {
-    padding: 1em;
+#filterFinderDialog {
    word-break: break-all;
    }
-#filterFinderDialog .dialog code {
+#filterFinderDialog code {
    background: #eee;
    font-size: 85%;
    padding: 3px;
    unicode-bidi: plaintext;
    white-space: pre-wrap;
    }
-#filterFinderDialog .dialog ul {
+#filterFinderDialog ul {
    font-size: larger;
    }
 #filterFinderDialog .filterFinderListEntry {
@ -688,13 +833,40 @@ body.colorBlind  #netFilteringDialog .dialog > div.containers > div.dynamic tr.e
 #filterFinderDialog .filterFinderListEntry a.fa-icon[href=""] {
    display: none;
    }
-#filterFinderDialog .dialog > *:first-child {
+#filterFinderDialog > *:first-child {
    margin-top: 0;
    }
-#filterFinderDialog .dialog > *:last-child {
+#filterFinderDialog > *:last-child {
    margin-bottom: 0;
    }

-.hide {
-    display: none;
+#loggerSettingsDialog {
+    display: flex;
+    flex-direction: column;
+    }
+#loggerSettingsDialog > div {
+    padding-bottom: 1em;
+    }
+#loggerSettingsDialog > div:last-of-type {
+    padding-bottom: 0;
+    }
+#loggerSettingsDialog ul {
+    padding: 0;
+    }
+body[dir="ltr"] #loggerSettingsDialog ul {
+    padding-left: 2em;
+    }
+body[dir="rtl"] #loggerSettingsDialog ul {
+    padding-right: 2em;
+    }
+#loggerSettingsDialog li {
+    list-style-type: none;
+    margin: 0.5em 0 0 0;
+    }
+#loggerSettingsDialog input {
+    max-width: 6em;
+    }
+
+.hide {
+    display: none !important;
    }
--- a/src/img/fontawesome/fontawesome-defs.svg
+++ b/src/img/fontawesome/fontawesome-defs.svg
@ -29,6 +29,7 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68
    <symbol id="angle-up"             viewBox="0 0  998  582"><path d="m 998,499 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,179 106,572 Q 96,582 83,582 70,582 60,572 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z"/></symbol>
    <symbol id="bolt"                 viewBox="0 0  896 1664"><path d="m 885.08696,438 q 18,20 7,44 l -540,1157 q -13,25 -42,25 -4,0 -14,-2 -17,-5 -25.5,-19 -8.5,-14 -4.5,-30 l 197,-808 -406,101 q -4,1 -12,1 -18,0 -31,-11 Q -3.9130435,881 1.0869565,857 L 202.08696,32 q 4,-14 16,-23 12,-9 28,-9 l 328,0 q 19,0 32,12.5 13,12.5 13,29.5 0,8 -5,18 l -171,463 396,-98 q 8,-2 12,-2 19,0 34,15 z"/></symbol>
    <symbol id="code"                 viewBox="0 0 1830 1373"><path d="m 572,1125.5 -50,50 q -10,10 -23,10 -13,0 -23,-10 l -466,-466 q -10,-10 -10,-23 0,-13 10,-23 l 466,-466 q 10,-10 23,-10 13,0 23,10 l 50,50 q 10,10 10,23 0,13 -10,23 l -393,393 393,393 q 10,10 10,23 0,13 -10,23 z M 1163,58.476203 790,1349.4762 q -4,13 -15.5,19.5 -11.5,6.5 -23.5,2.5 l -62,-17 q -13,-4 -19.5,-15.5 -6.5,-11.5 -2.5,-24.5 L 1040,23.5 q 4,-13 15.5,-19.5 11.5,-6.5 23.5,-2.5 l 62,17 q 13,4 19.5,15.5 6.5,11.5 2.5,24.5 z m 657,651 -466,466 q -10,10 -23,10 -13,0 -23,-10 l -50,-50 q -10,-10 -10,-23 0,-13 10,-23 l 393,-393 -393,-393 q -10,-10 -10,-23 0,-13 10,-23 l 50,-50 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 0,13 -10,23 z"/></symbol>
+    <symbol id="cog"                  viewBox="0 0 1536 1536"><path d="m 1024,768 q 0,-106 -75,-181 -75,-75 -181,-75 -106,0 -181,75 -75,75 -75,181 0,106 75,181 75,75 181,75 106,0 181,-75 75,-75 75,-181 z m 512,-109 0,222 q 0,12 -8,23 -8,11 -20,13 l -185,28 q -19,54 -39,91 35,50 107,138 10,12 10,25 0,13 -9,23 -27,37 -99,108 -72,71 -94,71 -12,0 -26,-9 l -138,-108 q -44,23 -91,38 -16,136 -29,186 -7,28 -36,28 l -222,0 q -14,0 -24.5,-8.5 Q 622,1519 621,1506 l -28,-184 q -49,-16 -90,-37 l -141,107 q -10,9 -25,9 -14,0 -25,-11 -126,-114 -165,-168 -7,-10 -7,-23 0,-12 8,-23 15,-21 51,-66.5 36,-45.5 54,-70.5 -27,-50 -41,-99 L 29,913 Q 16,911 8,900.5 0,890 0,877 L 0,655 q 0,-12 8,-23 8,-11 19,-13 l 186,-28 q 14,-46 39,-92 -40,-57 -107,-138 -10,-12 -10,-24 0,-10 9,-23 26,-36 98.5,-107.5 Q 315,135 337,135 q 13,0 26,10 L 501,252 Q 545,229 592,214 608,78 621,28 628,0 657,0 L 879,0 Q 893,0 903.5,8.5 914,17 915,30 l 28,184 q 49,16 90,37 l 142,-107 q 9,-9 24,-9 13,0 25,10 129,119 165,170 7,8 7,22 0,12 -8,23 -15,21 -51,66.5 -36,45.5 -54,70.5 26,50 41,98 l 183,28 q 13,2 21,12.5 8,10.5 8,23.5 z"/></symbol>
    <symbol id="double-angle-left"    viewBox="0 0  966  998"><path d="m 582,915 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 50,50 q 10,10 10,23 0,13 -10,23 L 179,499 572,892 q 10,10 10,23 z m 384,0 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 394,522 q -10,-10 -10,-23 0,-13 10,-23 L 860,10 q 10,-10 23,-10 13,0 23,10 l 50,50 q 10,10 10,23 0,13 -10,23 L 563,499 956,892 q 10,10 10,23 z"/></symbol>
    <symbol id="double-angle-up"      viewBox="0 0  998  966"><path d="m 998,883 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,563 106,956 Q 96,966 83,966 70,966 60,956 L 10,906 Q 0,896 0,883 0,870 10,860 L 476,394 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z m 0,-384 q 0,13 -10,23 l -50,50 q -10,10 -23,10 -13,0 -23,-10 L 499,179 106,572 Q 96,582 83,582 70,582 60,572 L 10,522 Q 0,512 0,499 0,486 10,476 L 476,10 q 10,-10 23,-10 13,0 23,10 l 466,466 q 10,10 10,23 z"/></symbol>
    <symbol id="eraser"               viewBox="0 0 1920 1280"><path d="M 896,1152 1232,768 l -768,0 -336,384 768,0 z M 1909,75 q 15,34 9.5,71.5 Q 1913,184 1888,212 L 992,1236 q -38,44 -96,44 l -768,0 q -38,0 -69.5,-20.5 -31.5,-20.5 -47.5,-54.5 -15,-34 -9.5,-71.5 5.5,-37.5 30.5,-65.5 L 928,44 Q 966,0 1024,0 l 768,0 q 38,0 69.5,20.5 Q 1893,41 1909,75 Z"/></symbol>
--- a/src/js/asset-viewer.js
+++ b/src/js/asset-viewer.js
@ -49,7 +49,7 @@
            lineNumbers: true,
            lineWrapping: true,
            readOnly: true,
-            styleActiveLine: true
+            styleActiveLine: true,
        }
    );

--- a/src/js/assets.js
+++ b/src/js/assets.js
@ -130,7 +130,9 @@ api.fetchText = function(url, onLoad, onError) {
    const onErrorEvent = function() {
        cleanup();
        µBlock.logger.writeOne({
-            error: errorCantConnectTo.replace('{{msg}}', actualUrl)
+            realm: 'message',
+            type: 'error',
+            text: errorCantConnectTo.replace('{{msg}}', actualUrl)
        });
        onError({ url, content: '' });
    };
--- a/src/js/commands.js
+++ b/src/js/commands.js
@ -51,7 +51,7 @@
            vAPI.tabs.get(null, function(tab) {
                let hash = tab.url.startsWith(vAPI.getURL('')) ?
                    '' :
-                    '#tab_active+' + tab.id;
+                    '#_+' + tab.id;
                µb.openNewTab({
                    url: 'logger-ui.html' + hash,
                    select: true,
--- a/src/js/cosmetic-filtering.js
+++ b/src/js/cosmetic-filtering.js
@ -599,7 +599,9 @@ FilterContainer.prototype.compileGenericHideSelector = function(
    if ( compiled === undefined || compiled !== selector ) {
        const who = writer.properties.get('assetKey') || '?';
        µb.logger.writeOne({
-            error: `Invalid generic cosmetic filter in ${who}: ##${selector}`
+            realm: 'message',
+            type: 'error',
+            text: `Invalid generic cosmetic filter in ${who}: ##${selector}`
        });
        return;
    }
@ -658,7 +660,9 @@ FilterContainer.prototype.compileGenericUnhideSelector = function(
    if ( compiled === undefined ) {
        const who = writer.properties.get('assetKey') || '?';
        µb.logger.writeOne({
-            error: `Invalid cosmetic filter in ${who} : #@#${parsed.suffix}`
+            realm: 'message',
+            type: 'error',
+            text: `Invalid cosmetic filter in ${who}: #@#${parsed.suffix}`
        });
        return;
    }
@ -687,7 +691,9 @@ FilterContainer.prototype.compileSpecificSelector = function(
    if ( compiled === undefined ) {
        const who = writer.properties.get('assetKey') || '?';
        µb.logger.writeOne({
-            error: `Invalid cosmetic filter in ${who} : ##${parsed.suffix}`
+            realm: 'message',
+            type: 'error',
+            text: `Invalid cosmetic filter in ${who}: ##${parsed.suffix}`
        });
        return;
    }
--- a/src/js/dynamic-net-filtering.js
+++ b/src/js/dynamic-net-filtering.js
@ -404,24 +404,18 @@ Matrix.prototype.lookupRuleData = function(src, des, type) {
 /******************************************************************************/

 Matrix.prototype.toLogData = function() {
-    if ( this.r === 0  || this.type === '' ) {
-        return;
-    }
-    var logData = {
+    if ( this.r === 0  || this.type === '' ) { return; }
+    return {
        source: 'dynamicHost',
        result: this.r,
-        raw: this.z + ' ' +
-             this.y + ' ' +
-             this.type + ' ' +
-             this.intToActionMap.get(this.r)
+        raw: `${this.z} ${this.y} ${this.type} ${this.intToActionMap.get(this.r)}`
    };
-    return logData;
 };

 Matrix.prototype.intToActionMap = new Map([
-    [ 1, ' block' ],
-    [ 2, ' allow' ],
-    [ 3, ' noop' ]
+    [ 1, 'block' ],
+    [ 2, 'allow' ],
+    [ 3, 'noop' ]
 ]);

 /******************************************************************************/
--- a/src/js/fa-icons.js
+++ b/src/js/fa-icons.js
@ -26,10 +26,7 @@
 let faIconsInit = function(root) {
    const icons = (root || document).querySelectorAll('.fa-icon');
    for ( const icon of icons ) {
-        if (
-            icon.firstChild === null ||
-            icon.firstChild.nodeType !== 3
-        ) {
+        if ( icon.firstChild === null || icon.firstChild.nodeType !== 3 ) {
            continue;
        }
        const name = icon.firstChild.nodeValue;
--- a/src/js/html-filtering.js
+++ b/src/js/html-filtering.js
@ -244,7 +244,9 @@
        if ( compiled === undefined ) {
            const who = writer.properties.get('assetKey') || '?';
            µb.logger.writeOne({
-                error: `Invalid HTML filter in ${who} : ##${selector}`
+                realm: 'message',
+                type: 'error',
+                text: `Invalid HTML filter in ${who}: ##${selector}`
            });
            return;
        }
--- a/src/js/i18n.js
+++ b/src/js/i18n.js
@ -31,36 +31,25 @@
 /******************************************************************************/

 // https://github.com/gorhill/uBlock/issues/2084
-//   Anything else than <a>, <b>, <code>, <em>, <i>, <input>, and <span> will
+//   Anything else than <a>, <b>, <code>, <em>, <i>, and <span> will
 //   be rendered as plain text.
-//   For <input>, only the type attribute is allowed.
 //   For <a>, only href attribute must be present, and it MUST starts with
 //   `https://`, and includes no single- or double-quotes.
 //   No HTML entities are allowed, there is code to handle existing HTML
 //   entities already present in translation files until they are all gone.

-var reSafeTags = /^([\s\S]*?)<(b|code|em|i|span)>(.+?)<\/\2>([\s\S]*)$/,
-    reSafeInput = /^([\s\S]*?)<(input type="[^"]+")>(.*?)([\s\S]*)$/,
-    reInput = /^input type=(['"])([a-z]+)\1$/,
-    reSafeLink = /^([\s\S]*?)<(a href=['"]https:\/\/[^'" <>]+['"])>(.+?)<\/a>([\s\S]*)$/,
-    reLink = /^a href=(['"])(https:\/\/[^'"]+)\1$/;
+const reSafeTags = /^([\s\S]*?)<(b|code|em|i|span)>(.+?)<\/\2>([\s\S]*)$/;
+const reSafeLink = /^([\s\S]*?)<(a href=['"]https:\/\/[^'" <>]+['"])>(.+?)<\/a>([\s\S]*)$/;
+const reLink = /^a href=(['"])(https:\/\/[^'"]+)\1$/;

-var safeTextToTagNode = function(text) {
-    var matches, node;
+const safeTextToTagNode = function(text) {
    if ( text.lastIndexOf('a ', 0) === 0 ) {
-        matches = reLink.exec(text);
+        const matches = reLink.exec(text);
        if ( matches === null ) { return null; }
-        node = document.createElement('a');
+        const node = document.createElement('a');
        node.setAttribute('href', matches[2]);
        return node;
    }
-    if ( text.lastIndexOf('input ', 0) === 0 ) {
-        matches = reInput.exec(text);
-        if ( matches === null ) { return null; }
-        node = document.createElement('input');
-        node.setAttribute('type', matches[2]);
-        return node;
-    }
    // Firefox extension validator warns if using a variable as argument for
    // document.createElement().
    switch ( text ) {
@ -79,8 +68,8 @@ var safeTextToTagNode = function(text) {
    }
 };

-var safeTextToTextNode = (function() {
-    let entities = new Map([
+const safeTextToTextNode = (function() {
+    const entities = new Map([
        // TODO: Remove quote entities once no longer present in translation
        // files. Other entities must stay.
        [ '&ldquo;', '“' ],
@ -90,7 +79,7 @@ var safeTextToTextNode = (function() {
        [ '&lt;', '<' ],
        [ '&gt;', '>' ],
    ]);
-    let decodeEntities = match => {
+    const decodeEntities = match => {
        return entities.get(match) || match;
    };
    return function(text) {
@ -101,15 +90,16 @@ var safeTextToTextNode = (function() {
    };
 })();

-var safeTextToDOM = function(text, parent) {
+const safeTextToDOM = function(text, parent) {
    if ( text === '' ) { return; }
+
    // Fast path (most common).
    if ( text.indexOf('<') === -1 ) {
        parent.appendChild(safeTextToTextNode(text));
        return;
    }
    // Slow path.
-    // `<p>` no longer allowed. Code below can be remove once all <p>'s are
+    // `<p>` no longer allowed. Code below can be removed once all <p>'s are
    // gone from translation files.
    text = text.replace(/^<p>|<\/p>/g, '')
               .replace(/<p>/g, '\n\n');
@ -118,18 +108,17 @@ var safeTextToDOM = function(text, parent) {
    if ( matches === null ) {
        matches = reSafeLink.exec(text);
        if ( matches === null ) {
-            matches = reSafeInput.exec(text);
-            if ( matches === null ) {
-                parent.appendChild(safeTextToTextNode(text));
-                return;
-            }
+            parent.appendChild(safeTextToTextNode(text));
+            return;
        }
    }
-    safeTextToDOM(matches[1], parent);
-    let node = safeTextToTagNode(matches[2]) || parent;
+    const fragment = document.createDocumentFragment();
+    safeTextToDOM(matches[1], fragment);
+    let node = safeTextToTagNode(matches[2]);
    safeTextToDOM(matches[3], node);
-    parent.appendChild(node);
-    safeTextToDOM(matches[4], parent);
+    fragment.appendChild(node);
+    safeTextToDOM(matches[4], fragment);
+    parent.appendChild(fragment);
 };

 /******************************************************************************/
@ -146,7 +135,7 @@ vAPI.i18n.safeTemplateToDOM = function(id, dict, parent) {
        safeTextToDOM(textin, parent);
        return parent;
    }
-    let re = /\{\{\w+\}\}/g;
+    const re = /\{\{\w+\}\}/g;
    let textout = '';
    for (;;) {
        let match = re.exec(textin);
@ -172,44 +161,62 @@ vAPI.i18n.safeTemplateToDOM = function(id, dict, parent) {

 // Helper to deal with the i18n'ing of HTML files.
 vAPI.i18n.render = function(context) {
-    var docu = document;
-    var root = context || docu;
-    var elems, n, i, elem, text;
+    const docu = document;
+    const root = context || docu;

-    elems = root.querySelectorAll('[data-i18n]');
-    n = elems.length;
-    for ( i = 0; i < n; i++ ) {
-        elem = elems[i];
-        text = vAPI.i18n(elem.getAttribute('data-i18n'));
+    for ( const elem of root.querySelectorAll('[data-i18n]') ) {
+        let text = vAPI.i18n(elem.getAttribute('data-i18n'));
        if ( !text ) { continue; }
-        // TODO: remove once it's all replaced with <input type="...">
-        if ( text.indexOf('{') !== -1 ) {
-            text = text.replace(/\{\{input:([^}]+)\}\}/g, '<input type="$1">');
+        if ( text.indexOf('{{') === -1 ) {
+            safeTextToDOM(text, elem);
+            continue;
        }
-        safeTextToDOM(text, elem);
+        // Handle selector-based placeholders: these placeholders tell where
+        // existing child DOM element are to be positioned relative to the
+        // localized text nodes.
+        const parts = text.split(/(\{\{[^}]+\}\})/);
+        const fragment = document.createDocumentFragment();
+        let textBefore = '';
+        for ( let part of parts ) {
+            if ( part === '' ) { continue; }
+            if ( part.startsWith('{{') && part.endsWith('}}') ) {
+                // TODO: remove detection of ':' once it no longer appears
+                //       in translation files.
+                const pos = part.indexOf(':');
+                if ( pos !== -1 ) {
+                    part = part.slice(0, pos) + part.slice(-2);
+                }
+                const node = elem.querySelector(part.slice(2, -2));
+                if ( node !== null ) {
+                    safeTextToDOM(textBefore, fragment);
+                    fragment.appendChild(node);
+                    textBefore = '';
+                    continue;
+                }
+            }
+            textBefore += part;
+        }
+        if ( textBefore !== '' ) {
+            safeTextToDOM(textBefore, fragment);
+        }
+        elem.appendChild(fragment);
    }

-    elems = root.querySelectorAll('[data-i18n-title]');
-    n = elems.length;
-    for ( i = 0; i < n; i++ ) {
-        elem = elems[i];
-        text = vAPI.i18n(elem.getAttribute('data-i18n-title'));
+    for ( const elem of root.querySelectorAll('[data-i18n-title]') ) {
+        const text = vAPI.i18n(elem.getAttribute('data-i18n-title'));
        if ( !text ) { continue; }
        elem.setAttribute('title', text);
    }

-    elems = root.querySelectorAll('[placeholder]');
-    n = elems.length;
-    for ( i = 0; i < n; i++ ) {
-        elem = elems[i];
-        elem.setAttribute('placeholder', vAPI.i18n(elem.getAttribute('placeholder')));
+    for ( const elem of root.querySelectorAll('[placeholder]') ) {
+        elem.setAttribute(
+            'placeholder',
+            vAPI.i18n(elem.getAttribute('placeholder'))
+        );
    }

-    elems = root.querySelectorAll('[data-i18n-tip]');
-    n = elems.length;
-    for ( i = 0; i < n; i++ ) {
-        elem = elems[i];
-        text = vAPI.i18n(elem.getAttribute('data-i18n-tip'))
+    for ( const elem of root.querySelectorAll('[data-i18n-tip]') ) {
+        const text = vAPI.i18n(elem.getAttribute('data-i18n-tip'))
                   .replace(/<br>/g, '\n')
                   .replace(/\n{3,}/g, '\n\n');
        elem.setAttribute('data-tip', text);
@ -224,7 +231,7 @@ vAPI.i18n.render();
 /******************************************************************************/

 vAPI.i18n.renderElapsedTimeToString = function(tstamp) {
-    var value = (Date.now() - tstamp) / 60000;
+    let value = (Date.now() - tstamp) / 60000;
    if ( value < 2 ) {
        return vAPI.i18n('elapsedOneMinuteAgo');
    }
--- a/src/js/logger-ui-inspector.js
+++ b/src/js/logger-ui-inspector.js
@ -29,7 +29,7 @@

 /******************************************************************************/

-var showdomButton = uDom.nodeFromId('showdom');
+const showdomButton = uDom.nodeFromId('showdom');

 // Don't bother if the browser is not modern enough.
 if (
@ -340,31 +340,25 @@ var nidFromNode = function(node) {

 /******************************************************************************/

-var startDialog = (function() {
-    var dialog = uDom.nodeFromId('cosmeticFilteringDialog');
-    var textarea = dialog.querySelector('textarea');
-    var hideSelectors = [];
-    var unhideSelectors = [];
-    var inputTimer = null;
+const startDialog = (function() {
+    let dialog;
+    let textarea;
+    let hideSelectors = [];
+    let unhideSelectors = [];
+    let inputTimer;

-    var onInputChanged = (function() {
-        var parse = function() {
-            inputTimer = null;
+    const onInputChanged = (function() {
+        const parse = function() {
+            inputTimer = undefined;
            hideSelectors = [];
            unhideSelectors = [];

-            var line, matches;
-            var re = /^([^#]*)(#@?#)(.+)$/;
-            var lines = textarea.value.split(/\s*\n\s*/);
-            for ( var i = 0; i < lines.length; i++ ) {
-                line = lines[i].trim();
-                if ( line === '' || line.charAt(0) === '!' ) {
-                    continue;
-                }
-                matches = re.exec(line);
-                if ( matches === null || matches.length !== 4 ) {
-                    continue;
-                }
+            const re = /^([^#]*)(#@?#)(.+)$/;
+            for ( let line of textarea.value.split(/\s*\n\s*/) ) {
+                line = line.trim();
+                if ( line === '' || line.charAt(0) === '!' ) { continue; }
+                const matches = re.exec(line);
+                if ( matches === null || matches.length !== 4 ) { continue; }
                if ( inspectedHostname.lastIndexOf(matches[1]) === -1 ) {
                    continue;
                }
@ -379,19 +373,15 @@ var startDialog = (function() {
        };

        return function parseAsync() {
-            if ( inputTimer === null ) {
+            if ( inputTimer === undefined ) {
                inputTimer = vAPI.setTimeout(parse, 743);
            }
        };
    })();

-    var onClicked = function(ev) {
+    const onClicked = function(ev) {
        var target = ev.target;

-        // click outside the dialog proper
-        if ( target.classList.contains('modalDialog') ) {
-            return stop();
-        }
        ev.stopPropagation();

        if ( target.id === 'createCosmeticFilters' ) {
@ -402,7 +392,7 @@ var startDialog = (function() {
        }
    };

-    var showCommitted = function() {
+    const showCommitted = function() {
        messaging.sendTo(inspectorConnectionId, {
            what: 'showCommitted',
            hide: hideSelectors.join(',\n'),
@ -410,7 +400,7 @@ var startDialog = (function() {
        });
    };

-    var showInteractive = function() {
+    const showInteractive = function() {
        messaging.sendTo(inspectorConnectionId, {
            what: 'showInteractive',
            hide: hideSelectors.join(',\n'),
@ -418,46 +408,45 @@ var startDialog = (function() {
        });
    };

-    var start = function() {
+    const start = function() {
+        dialog = logger.modalDialog.create('#cosmeticFilteringDialog', stop);
+        textarea = dialog.querySelector('textarea');
        hideSelectors = [];
-        textarea.addEventListener('input', onInputChanged);
-        var node;
-        for ( node of domTree.querySelectorAll('code.off') ) {
-            if ( node.classList.contains('filter') === false ) {
-                hideSelectors.push(selectorFromNode(node));
-            }
+        for ( const node of domTree.querySelectorAll('code.off') ) {
+            if ( node.classList.contains('filter') ) { continue; }
+            hideSelectors.push(selectorFromNode(node));
        }
-        var taValue = [];
-        var d = new Date();
-        taValue.push('! ' + d.toLocaleString() + ' ' + inspectedURL);
-        for ( var selector of hideSelectors ) {
+        const taValue = [];
+        for ( const selector of hideSelectors ) {
            taValue.push(inspectedHostname + '##' + selector);
        }
-        var ids = new Set(), id;
-        for ( node of domTree.querySelectorAll('code.filter.off') ) {
-            id = node.getAttribute('data-filter-id');
+        const ids = new Set();
+        for ( const node of domTree.querySelectorAll('code.filter.off') ) {
+            const id = node.getAttribute('data-filter-id');
            if ( ids.has(id) ) { continue; }
            ids.add(id);
            unhideSelectors.push(node.textContent);
            taValue.push(inspectedHostname + '#@#' + node.textContent);
        }
        textarea.value = taValue.join('\n');
-        document.body.appendChild(dialog);
+        textarea.addEventListener('input', onInputChanged);
        dialog.addEventListener('click', onClicked, true);
        showCommitted();
+        logger.modalDialog.show();
    };

-    var stop = function() {
-        if ( inputTimer !== null ) {
+    const stop = function() {
+        if ( inputTimer !== undefined ) {
            clearTimeout(inputTimer);
-            inputTimer = null;
+            inputTimer = undefined;
        }
        showInteractive();
-        hideSelectors = [];
-        unhideSelectors = [];
        textarea.removeEventListener('input', onInputChanged);
        dialog.removeEventListener('click', onClicked, true);
-        document.body.removeChild(dialog);
+        dialog = undefined;
+        textarea = undefined;
+        hideSelectors = [];
+        unhideSelectors = [];
    };

    return start;
@ -585,7 +574,7 @@ var shutdownInspector = function() {
        inspectorConnectionId = undefined;
    }
    logger.removeAllChildren(domTree);
-    inspector.classList.add('vCompact');
+    inspector.classList.remove('vExpanded');
    inspectedTabId = 0;
 };

@ -605,7 +594,7 @@ var onTabIdChanged = function() {
 /******************************************************************************/

 var toggleVCompactView = function() {
-    var state = !inspector.classList.toggle('vCompact');
+    var state = inspector.classList.toggle('vExpanded');
    var branches = document.querySelectorAll('#domInspector li.branch');
    for ( var branch of branches ) {
        branch.classList.toggle('show', state);
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
--- a/src/js/logger.js
+++ b/src/js/logger.js
@ -26,17 +26,6 @@

 µBlock.logger = (function() {

-    const LogEntry = function(details) {
-        this.init(details);
-    };
-
-    LogEntry.prototype.init = function(details) {
-        if ( details.tstamp === undefined ) {
-            details.tstamp = Date.now();
-        }
-        this.details = JSON.stringify(details);
-    };
-
    let buffer = null;
    let lastReadTime = 0;
    let writePtr = 0;
@ -61,15 +50,22 @@
        }
    };

+    const boxEntry = function(details) {
+        if ( details.tstamp === undefined ) {
+            details.tstamp = Date.now();
+        }
+        return JSON.stringify(details);
+    };
+
    const api = {
        enabled: false,
        ownerId: undefined,
        writeOne: function(details) {
            if ( buffer === null ) { return; }
            if ( writePtr === buffer.length ) {
-                buffer.push(new LogEntry(details));
+                buffer.push(boxEntry(details));
            } else {
-                buffer[writePtr].init(details);
+                buffer[writePtr] = boxEntry(details);
            }
            writePtr += 1;
        },
--- a/src/js/messaging.js
+++ b/src/js/messaging.js
@ -1398,7 +1398,7 @@ var onMessage = function(request, sender, callback) {
                .setURL(request.docURL)
                .setDocOriginFromURL(request.docURL);
            if ( pageStore.filterRequest(fctxt) === 0 ) {
-                fctxt.setRealm('net').toLogger();
+                fctxt.setRealm('network').toLogger();
            }
        }
        break;
--- a/src/js/pagestore.js
+++ b/src/js/pagestore.js
@ -322,7 +322,7 @@ PageStore.prototype.init = function(tabId, context) {
                µb.logger.enabled &&
                context === 'tabCommitted'
            ) {
-                fctxt.setRealm('net')
+                fctxt.setRealm('network')
                     .setType('generichide')
                     .setFilter(µb.staticNetFilteringEngine.toLogData())
                     .toLogger();
--- a/src/js/popup.js
+++ b/src/js/popup.js
@ -753,7 +753,7 @@ const gotoURL = function(ev) {

    let url = this.getAttribute('href');
    if (
-        url === 'logger-ui.html#tab_active' &&
+        url === 'logger-ui.html#_' &&
        typeof popupData.tabId === 'number'
    ) {
        url += '+' + popupData.tabId;
--- a/src/js/static-net-filtering.js
+++ b/src/js/static-net-filtering.js
@ -2192,7 +2192,9 @@ FilterContainer.prototype.compile = function(raw, writer) {
    if ( parsed.unsupported ) {
        const who = writer.properties.get('assetKey') || '?';
        µb.logger.writeOne({
-            error: `Invalid network filter in ${who}: ${raw}`
+            realm: 'message',
+            type: 'error',
+            text: `Invalid network filter in ${who}: ${raw}`
        });
        return false;
    }
--- a/src/js/tab.js
+++ b/src/js/tab.js
@ -789,7 +789,7 @@ vAPI.tabs.onPopupUpdated = (function() {
        // Log only for when there was a hit against an actual filter (allow or block).
        // https://github.com/gorhill/uBlock/issues/2776
        if ( µb.logger.enabled ) {
-            fctxt.setRealm('net').setType(popupType);
+            fctxt.setRealm('network').setType(popupType);
            if ( popupType === 'popup' ) {
                fctxt.setURL(targetURL)
                     .setTabId(openerTabId)
--- a/src/js/traffic.js
+++ b/src/js/traffic.js
@ -91,7 +91,7 @@ const onBeforeRequest = function(details) {
    pageStore.journalAddRequest(fctxt.getHostname(), result);

    if ( µb.logger.enabled ) {
-        fctxt.setRealm('net').toLogger();
+        fctxt.setRealm('network').toLogger();
    }

    // Not blocked
@ -203,7 +203,7 @@ const onBeforeRootFrameRequest = function(fctxt) {
    }

    if ( logEnabled ) {
-        fctxt.setRealm('net').setFilter(logData).toLogger();
+        fctxt.setRealm('network').setFilter(logData).toLogger();
    }

    // Not blocked
@ -311,7 +311,7 @@ const onBeforeBehindTheSceneRequest = function(fctxt) {
    }

    if ( µb.logger.enabled ) {
-        fctxt.setRealm('net').toLogger();
+        fctxt.setRealm('network').toLogger();
    }

    // Blocked?
@ -396,7 +396,7 @@ const onBeforeMaybeSpuriousCSPReport = (function() {
        // At this point, we have a potentially spurious CSP report.

        if ( µBlock.logger.enabled ) {
-            fctxt.setRealm('net')
+            fctxt.setRealm('network')
                 .setType('csp_report')
                 .setFilter({ result: 1, source: 'global', raw: 'no-spurious-csp-report' })
                 .toLogger();
@ -775,7 +775,7 @@ const injectCSP = function(fctxt, pageStore, responseHeaders) {
    if ( pageStore.filterScripting(fctxt, true) === 1 ) {
        builtinDirectives.push("script-src http: https:");
        if ( loggerEnabled ) {
-            fctxt.setRealm('net').setType('scripting').toLogger();
+            fctxt.setRealm('network').setType('scripting').toLogger();
        }
    } else {
        fctxt.type = 'inline-script';
@ -784,7 +784,7 @@ const injectCSP = function(fctxt, pageStore, responseHeaders) {
            builtinDirectives.push("script-src 'unsafe-eval' * blob: data:");
        }
        if ( result !== 0 && loggerEnabled ) {
-            fctxt.setRealm('net').toLogger();
+            fctxt.setRealm('network').toLogger();
        }
    }

@ -794,7 +794,7 @@ const injectCSP = function(fctxt, pageStore, responseHeaders) {
    if ( pageStore.filterRequest(fctxt) === 1 ) {
        builtinDirectives.push('font-src *');
        if ( loggerEnabled ) {
-            fctxt.setRealm('net').toLogger();
+            fctxt.setRealm('network').toLogger();
        }
    }

@ -825,7 +825,7 @@ const injectCSP = function(fctxt, pageStore, responseHeaders) {
        ) === 2
    ) {
        if ( loggerEnabled ) {
-            fctxt.setRealm('net')
+            fctxt.setRealm('network')
                 .setType('csp')
                 .setFilter(µb.sessionURLFiltering.toLogData())
                 .toLogger();
@ -844,7 +844,7 @@ const injectCSP = function(fctxt, pageStore, responseHeaders) {
        ) === 2
    ) {
        if ( loggerEnabled ) {
-            fctxt.setRealm('net')
+            fctxt.setRealm('network')
                 .setType('csp')
                 .setFilter(µb.sessionFirewall.toLogData())
                 .toLogger();
@ -856,7 +856,7 @@ const injectCSP = function(fctxt, pageStore, responseHeaders) {

    // Static CSP policies will be applied.
    if ( logDataEntries !== undefined ) {
-        fctxt.setRealm('net').setType('csp');
+        fctxt.setRealm('network').setType('csp');
        for ( const entry of logDataEntries ) {
            fctxt.setFilter(entry).toLogger();
        }
@ -908,7 +908,7 @@ const foilLargeMediaElement = function(fctxt, pageStore, responseHeaders) {
    if ( result === 0 ) { return; }

    if ( µBlock.logger.enabled ) {
-        fctxt.setRealm('net').toLogger();
+        fctxt.setRealm('network').toLogger();
    }

    return { cancel: true };
--- a/src/js/udom.js
+++ b/src/js/udom.js
@ -132,12 +132,9 @@ var addSelectorToList = function(list, selector, context) {

 /******************************************************************************/

-var nodeInNodeList = function(node, nodeList) {
-    var i = nodeList.length;
-    while ( i-- ) {
-        if ( nodeList[i] === node ) {
-            return true;
-        }
+const nodeInNodeList = function(node, nodeList) {
+    for ( const other of nodeList ) {
+        if ( other === node ) { return true; }
    }
    return false;
 };
@ -603,9 +600,9 @@ DOMList.prototype.toggleClasses = function(classNames, targetState) {

 /******************************************************************************/

-var listenerEntries = [];
+const listenerEntries = [];

-var ListenerEntry = function(target, type, capture, callback) {
+const ListenerEntry = function(target, type, capture, callback) {
    this.target = target;
    this.type = type;
    this.capture = capture;
@ -621,13 +618,16 @@ ListenerEntry.prototype.dispose = function() {

 /******************************************************************************/

-var makeEventHandler = function(selector, callback) {
+const makeEventHandler = function(selector, callback) {
    return function(event) {
-        var dispatcher = event.currentTarget;
-        if ( !dispatcher || typeof dispatcher.querySelectorAll !== 'function' ) {
+        const dispatcher = event.currentTarget;
+        if (
+            dispatcher instanceof HTMLElement === false ||
+            typeof dispatcher.querySelectorAll !== 'function'
+        ) {
            return;
        }
-        var receiver = event.target;
+        const receiver = event.target;
        if ( nodeInNodeList(receiver, dispatcher.querySelectorAll(selector)) ) {
            callback.call(receiver, event);
        }
@ -642,9 +642,10 @@ DOMList.prototype.on = function(etype, selector, callback) {
        callback = makeEventHandler(selector, callback);
    }

-    var i = this.nodes.length;
-    while ( i-- ) {
-        listenerEntries.push(new ListenerEntry(this.nodes[i], etype, selector !== undefined, callback));
+    for ( const node of this.nodes ) {
+        listenerEntries.push(
+            new ListenerEntry(node, etype, selector !== undefined, callback)
+        );
    }
    return this;
 };
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@ -10,14 +10,15 @@
 <link rel="stylesheet" type="text/css" href="css/logger-ui-inspector.css">
 <link rel="shortcut icon" type="image/png" href="img/icon_16.png">
 <title data-i18n="statsPageName"></title>
+<style id="vwRendererRuntimeStyles"></style>
 </head>
 <body>

 <div class="permatoolbar">
    <select id="pageSelector">
-        <option value="" data-i18n="logAll">
-        <option value="tab_bts" data-i18n="logBehindTheScene">
-        <option value="tab_active" data-i18n="loggerCurrentTab">
+        <option value="0" data-i18n="logAll">
+        <option value="-1" data-i18n="logBehindTheScene">
+        <option value="_" data-i18n="loggerCurrentTab">
    </select>
    <span id="refresh" class="button fa-icon disabled needdom" data-i18n-title="loggerReloadTip">refresh</span>
    <span id="showdom" class="button fa-icon disabled needdom" data-i18n-title="loggerDomInspectorTip">code</span>
@ -26,7 +27,7 @@
 </div>

 <div id="inspectors">
-    <div id="domInspector" class="inspector vCompact hCompact">
+    <div id="domInspector" class="inspector hCompact">
        <div class="permatoolbar">
            <div>
                <span class="button fa-icon vCompactToggler">double-angle-up</span>
@ -40,7 +41,7 @@
            <ul id="domTree"></ul>
        </div>
    </div>
-    <div id="netInspector" class="inspector vCompact f">
+    <div id="netInspector" class="inspector f">
        <div class="permatoolbar">
            <span class="button fa-icon vCompactToggler">double-angle-up</span>
            <span id="clean" class="button fa-icon disabled">times</span>
@ -52,79 +53,117 @@
                    <input type="text" 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="^--$|^<<$|^##" 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 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 data-filtex="\t1\t" data-i18n="loggerRowFiltererBuiltin1p"></span><span data-filtex="\t3(?:,\d)?\t" data-i18n="loggerRowFiltererBuiltin3p"></span></div>
                    </div>
                </span>
            </span>
-            <input id="maxEntries" type="text" size="5" data-i18n-title="logMaxEntriesTip">
+            <span id="settings" class="button fa-icon">cog</span>
        </div>
        <div class="vscrollable">
-            <style id="tabFilterer"></style>
-            <table>
-                <colgroup><col><col><col><col><col><col></colgroup>
-                <tbody></tbody>
-            </table>
+            <div id="vwRenderer">
+                <div id="vwScroller">
+                    <div id="vwVirtualContent">
+                        <div id="vwContent"></div>
+                    </div>
+                </div>
+                <div id="vwLineSizer">
+                    <div class="logEntry oneLine"><div><span>00:00:00</span><span>&nbsp;</span><span>**</span><span>&nbsp;</span><span>3,3</span><span>inline-script</span><span>&nbsp;</span></div></div>
+                </div>
+            </div>
        </div>
    </div>
-    <iframe id="popupContainer" class="hide"></iframe>
+    <iframe id="popupContainer"></iframe>
+</div>
+
+<div id="modalOverlay">
+    <div>
+        <div id="modalOverlayContainer"></div>
+        <div id="modalOverlayClose"><svg viewBox="0 0 64 64"><path d="M 16 16 L 48 48 M 16 48 L 48 16" /></svg></div>
+    </div>
 </div>

 <div id="templates" style="display: none;">
+    <div id="logEntryTemplate"><div><span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span>&#8203;<span></span></div></div>
    <div id="renderedURLTemplate"><span><span></span><b></b><span></span></span></div>
-    <div id="netFilteringDialog" class="modalDialog">
-        <div class="dialog">
-            <div class="hide preview"></div>
-            <div class="headers">
-                <span class="header dynamic selected" data-container="dynamic" data-i18n="loggerURLFilteringHeader"></span>
-                <span class="header static" data-container="static" data-i18n="loggerStaticFilteringHeader"></span>
-                <span class="tools"><span class="fa-icon reload">refresh</span>&ensp;<span class="fa-icon picker">eye-dropper</span></span>
+
+    <div id="netFilteringDialog" data-pane="details">
+        <div class="hide preview"><span>click to preview</span></div>
+        <div class="headers">
+            &ensp;
+            <span class="header details" data-pane="details" data-i18n="loggerEntryDetailsHeader"></span>
+            <span class="header dynamic" data-pane="dynamic" data-i18n="loggerURLFilteringHeader"></span>
+            <span class="header static" data-pane="static" data-i18n="loggerStaticFilteringHeader"></span>
+            <span class="tools"><span class="fa-icon reload">refresh</span>&ensp;<span class="fa-icon picker">eye-dropper</span></span>
+        </div>
+        <div class="panes">
+            <div class="pane details" data-pane="details">
+                <div><span data-i18n="loggerEntryDetailsFilter"></span><span></span></div>
+                <div><span data-i18n="loggerEntryDetailsFilterList"></span><span class="prose"></span></div>
+                <div><span data-i18n="loggerEntryDetailsRule"></span><span></span></div>
+                <div><span data-i18n="loggerEntryDetailsRootContext"></span><span></span></div>
+                <div><span data-i18n="loggerEntryDetailsContext"></span><span></span></div>
+                <div><span data-i18n="loggerEntryDetailsPartyness"></span><span class="prose"></span></div>
+                <div><span data-i18n="loggerEntryDetailsType"></span><span></span></div>
+                <div><span data-i18n="loggerEntryDetailsURL"></span><span></span></div>
            </div>
-            <div class="containers">
-                <div class="container dynamic selected">
-                    <table class="toolbar">
-                        <colgroup><col><col></colgroup>
-                        <tbody>
-                        <tr>
-                            <td><span id="saveRules" class="fa-icon">lock</span>
-                            <td><p>
-                                <label><span data-i18n="loggerURLFilteringContextLabel"></span> <select class="dynamic origin"></select></label>&emsp;
-                                <label><span data-i18n="loggerURLFilteringTypeLabel"></span> <select class="dynamic type"><option><option value="*">*</select></label>
-                                </p>
-                        <tr class="entry">
-                            <td><div class="action"><span class="allow">&nbsp;</span><span class="noop">&nbsp;</span><span class="block">&nbsp;</span></div>
-                            <td class="url">
-                        </tbody>
-                    </table>
-                    <table class="entries">
-                        <colgroup><col><col></colgroup>
-                        <tbody></tbody>
-                    </table>
-                </div>
-                <div class="container static">
-                    <p></p>
-                    <p><textarea class="staticFilter" spellcheck="false" value=""></textarea>
-                       <button id="createStaticFilter" class="custom important" type="button" data-i18n="pickerCreate"></button>
-                   </p>
+            <div class="pane dynamic" data-pane="dynamic">
+                <div class="toolbar row">
+                    <span><span id="saveRules" class="fa-icon">lock</span></span>
+                    <span>
+                        <label><span data-i18n="loggerURLFilteringContextLabel"></span> <select class="dynamic origin"></select></label>&emsp;
+                        <label><span data-i18n="loggerURLFilteringTypeLabel"></span> <select class="dynamic type"><option><option value="*">*</select></label>
+                    </span>
+                    <div class="entry row">
+                        <span class="action"><span class="allow">&nbsp;</span><span class="noop">&nbsp;</span><span class="block">&nbsp;</span></span>
+                        <span class="url"></span>
+                    </div>
                </div>
+                <div class="entries"></div>
+            </div>
+            <div class="pane static" data-pane="static">
+                <div></div>
+                <div><textarea class="staticFilter" spellcheck="false" value=""></textarea>
+                   <button id="createStaticFilter" class="custom important" type="button" data-i18n="pickerCreate"></button>
+               </div>
            </div>
        </div>
    </div>
-    <div id="filterFinderDialog" class="modalDialog">
-        <div class="dialog"></div>
+
+    <div id="filterFinderDialog">
    </div>
-    <ul id="filterFinderListEntry">
-        <li class="filterFinderListEntry">
-            <a href="asset-viewer.html?url=" target="_blank"></a>
-            <a href="" class="fa-icon" target="_blank">home</a></li>
-    </ul>
+
+    <div id="filterFinderListEntry">
+        <span><!--
+         --><a href="asset-viewer.html?url=" target="_blank"></a>&nbsp;<!--
+         --><a href="" class="fa-icon" target="_blank">home</a><!--
+     --></span>
+    </div>
+
    <div id="cosmeticFilteringDialog" class="modalDialog">
-        <div class="dialog">
-            <textarea class="cosmeticFilters" value=""></textarea>
-            <button id="createCosmeticFilters" class="custom important" type="button" data-i18n="pickerCreate"></button>
-        </div>
+        <textarea class="cosmeticFilters" value=""></textarea>
+        <button id="createCosmeticFilters" class="custom important" type="button" data-i18n="pickerCreate"></button>
    </div>
+
+    <div id="loggerSettingsDialog">
+        <div><span data-i18n="loggerSettingDiscardPrompt"></span>
+            <ul>
+            <li><label data-i18n="loggerSettingPerEntryMaxAge"><input type="number" min="0" max="50000" /></label>
+            <li><label data-i18n="loggerSettingPerTabMaxLoads"><input type="number" min="0" max="1000000" /></label>
+            <li><label data-i18n="loggerSettingPerTabMaxEntries"><input type="number" min="0" max="1000000" /></label>
+            </ul>
+        </div>
+        <div><span data-i18n="loggerSettingHideColumnsPrompt"></span>
+            <ul>
+            <li><label data-i18n="loggerSettingHideColumnTime"><input type="checkbox" data-column="0" /></label>
+            <li><label data-i18n="loggerSettingHideColumnFilter"><input type="checkbox" data-column="1" /></label>
+            <li><label data-i18n="loggerSettingHideColumnContext"><input type="checkbox" data-column="3" /></label>
+            <li><label data-i18n="loggerSettingHideColumnPartyness"><input type="checkbox" data-column="4" /></label>
+            </ul>
+        </div>
+        <div><label data-i18n="loggerSettingPerEntryLineCount"><input type="number" min="2" max="6"></label></div>
+        </div>
 </div>

 <script src="js/fa-icons.js"></script>
--- a/src/popup.html
+++ b/src/popup.html
@ -19,7 +19,7 @@
        <p id="basicTools">
            <span id="gotoZap" class="fa-icon tool" data-i18n-tip="popupTipZapper" data-tip-position="under">bolt</span>
            <span id="gotoPick" class="fa-icon tool" data-i18n-tip="popupTipPicker" data-tip-position="under">eye-dropper</span>
-            <a href="logger-ui.html#tab_active" class="fa-icon tool enabled" aria-label="data-tip" data-i18n-tip="popupTipLog" data-tip-position="under" target="uBOLogger" tabindex="0">list-alt</a>
+            <a href="logger-ui.html#_" class="fa-icon tool enabled" aria-label="data-tip" data-i18n-tip="popupTipLog" data-tip-position="under" target="uBOLogger" tabindex="0">list-alt</a>
            <a href="dashboard.html" class="fa-icon tool enabled" aria-label="data-tip" data-i18n-tip="popupTipDashboard" data-tip-position="under" target="uBODashboard" tabindex="0">sliders</a>
        </p>
        <h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nbsp;</h2>
--- a/src/settings.html
+++ b/src/settings.html
@ -28,7 +28,7 @@
        <li class="subgroup"><span data-i18n="settingPerSiteSwitchGroup"></span><ul>
            <li><label class="synopsis"><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label>
            <li><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a>
-            <li><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a>
+            <li><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"><input type="number" min="0"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a>
            <li><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a>
            <li><input id="no-scripting" type="checkbox" data-setting-name="noScripting" data-setting-type="bool"><label data-i18n="settingsNoScriptingPrompt" for="no-scripting"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-scripting" target="_blank">&#xf05a;</a>
            </ul>