Adding upstream version 1.57.0+dfsg.upstream/1.57.0+dfsgupstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

17 files changed, 260 insertions, 159 deletions

diff --git a/src/css/1p-filters.css b/src/css/1p-filters.css
index 679e4b8..9e087cb 100644
--- a/src/css/1p-filters.css
+++ b/src/css/1p-filters.css
@@ -1,5 +1,6 @@
 html {
     height: 100vh;
+        height: 100svh;
     overflow: hidden;
     width: 100vw;
     }
@@ -14,7 +15,11 @@ body {
 .body {
     flex-shrink: 0;
     }
-[data-i18n="1pTrustWarning"] {
+/* https://github.com/uBlockOrigin/uBlock-issues/issues/3058 */
+:root.mobile body {
+    min-height: unset;
+    }
+html:not(.mobile) [data-i18n="1pTrustWarning"] {
     font-weight: bold;
     }
 .codeMirrorContainer {
diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css
index 014dd20..f5bed6b 100644
--- a/src/css/3p-filters.css
+++ b/src/css/3p-filters.css
@@ -7,7 +7,6 @@ body {
     }
 #actions {
     background-color: var(--surface-1);
-    padding: var(--default-gap-small) 0 var(--default-gap-xsmall) 0;
     position: sticky;
     top: 0;
     z-index: 10;
@@ -15,7 +14,8 @@ body {
 #buttonUpdate.active {
     pointer-events: none;
     }
-#buttonUpdate.active .fa-icon svg {
+#buttonUpdate.active .fa-icon svg,
+body.working #buttonUpdate:not(.disabled) .fa-icon svg {
     animation: spin 1s linear infinite;
     transform-origin: 50%;
     }
@@ -24,7 +24,7 @@ body.updating #actions,
 body.working #actions {
     cursor: progress;
     }
-body.updating #actions button,
+body.updating #actions #buttonUpdate,
 body.working #actions button {
     pointer-events: none;
     }
@@ -54,23 +54,9 @@ body.working #actions button {
     transform: rotate(180deg);
     }
 
-#lists .searchbar {
-    align-items: center;
-    column-gap: var(--default-gap-xxsmall);
-    display: inline-flex;
+#lists .searchfield {
     margin-block-start: calc(var(--font-size) * 0.75);
     margin-inline-start: var(--checkbox-size);
-    position: relative;
-    }
-#lists .searchbar input {
-    padding-inline-start: var(--default-gap-large);
-    }
-#lists .searchbar .fa-icon {
-    color: var(--ink-4);
-        fill: var(--ink-4);
-    left: 4px;
-    position: absolute;
-    transform: none;
     }
 #lists.searchMode > .listEntries .listEntries,
 #lists.searchMode > .listEntries .listEntry.searchMatch {
@@ -212,13 +198,14 @@ body.working #actions button {
     color: var(--info2-ink);
         fill: var(--info2-ink);
     }
-body:not(.updating) #lists .listEntry.checked.obsolete > .detailbar .iconbar .obsolete {
+body:not(.updating,.working) #lists .listEntry.checked.obsolete > .detailbar .iconbar .obsolete {
     display: inline-flex;
     }
 #lists .iconbar .updating {
     transform-origin: 50%;
     }
-body.updating #lists .listEntry.checked.obsolete > .detailbar .iconbar .updating {
+body.updating #lists .listEntry.checked.obsolete > .detailbar .iconbar .updating,
+body.working #lists .listEntry.checked.obsolete:not(.cached) > .detailbar .iconbar .updating {
     animation: spin 1s steps(8) infinite;
     display: inline-flex;
     }
diff --git a/src/css/advanced-settings.css b/src/css/advanced-settings.css
index c67e750..10225dd 100644
--- a/src/css/advanced-settings.css
+++ b/src/css/advanced-settings.css
@@ -1,5 +1,6 @@
 html {
     height: 100vh;
+        height: 100svh;
     overflow: hidden;
     width: 100vw;
     }
diff --git a/src/css/asset-viewer.css b/src/css/asset-viewer.css
index 8b6f1da..d2df68a 100644
--- a/src/css/asset-viewer.css
+++ b/src/css/asset-viewer.css
@@ -23,6 +23,7 @@ body {
     display: flex;
     flex-direction: column;
     height: 100vh;
+        height: 100svh;
     margin: 0;
     overflow: hidden;
     padding: 0;
diff --git a/src/css/code-viewer.css b/src/css/code-viewer.css
index 774fa69..40b5114 100644
--- a/src/css/code-viewer.css
+++ b/src/css/code-viewer.css
@@ -3,6 +3,7 @@ body {
     display: flex;
     flex-direction: column;
     height: 100vh;
+        height: 100svh;
     margin: 0;
     overflow: hidden;
     padding: 0;
diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index 2d15bf8..fce571b 100644
--- a/src/css/codemirror.css
+++ b/src/css/codemirror.css
@@ -3,6 +3,13 @@
     overflow: hidden;
     position: relative;
     }
+.codeMirrorContainer.cm-maximized {
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    }
 .CodeMirror {
     background-color: var(--surface-0);
     box-sizing: border-box;
@@ -153,7 +160,6 @@
     }
 
 .cm-search-widget {
-    align-items: center;
     background-color: var(--cm-gutter-surface);
     border-bottom: 1px solid var(--cm-gutter-border);
     cursor: default;
@@ -162,6 +168,7 @@
     flex-shrink: 0;
     flex-wrap: wrap;
     justify-content: space-between;
+    line-height: 1.5;
     padding: var(--default-gap-xsmall);
     row-gap: var(--default-gap-xsmall);
     user-select: none;
@@ -176,20 +183,44 @@
     text-align: end;
     }
 
+.cm-search-widget .cm-maximize {
+    fill: none;
+    flex-grow: 0;
+    font-size: 130%;
+    height: 1em;
+    stroke-width: 3px;
+    stroke: var(--ink-0);
+    width: 1em;
+    }
+.cm-search-widget .cm-maximize * {
+    pointer-events: none;
+    }
+.codeMirrorContainer[data-maximizable="false"] .cm-search-widget .cm-maximize {
+    display: none;
+    }
+.codeMirrorContainer .cm-search-widget .cm-maximize svg > path:nth-child(2),
+.codeMirrorContainer.cm-maximized .cm-search-widget .cm-maximize svg > path:nth-child(1) {
+    display: none;
+    }
+.codeMirrorContainer.cm-maximized .cm-search-widget .cm-maximize svg > path:nth-child(2) {
+    display: initial;
+    }
+html:not(.mobile) .cm-search-widget .cm-maximize:hover {
+    transform: scale(1.2);
+    }
+
 .cm-search-widget-input {
     display: inline-flex;
     flex-grow: 1;
+    flex-wrap: nowrap;
     }
 .cm-search-widget .fa-icon {
-    fill: var(--cm-gutter-ink);
     font-size: 140%;
     }
-.cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
-    fill: var(--ink-1);
+html:not(.mobile) .cm-search-widget .fa-icon:not(.fa-icon-ro):hover {
+    transform: scale(1.2);
     }
 .cm-search-widget-input input {
-    border: 1px solid var(--cm-gutter-ink);
-    display: inline-flex;
     flex-grow: 1;
     max-width: 16em;
     }
@@ -198,7 +229,6 @@
     display: inline-flex;
     flex-grow: 0;
     font-size: var(--font-size-smaller);
-    min-width: 6em;
     visibility: hidden;
     }
 .cm-search-widget[data-query] .cm-search-widget-count {
@@ -207,9 +237,6 @@
 .cm-search-widget[data-query] .cm-search-widget-count:empty {
     visibility: hidden;
     }
-.cm-search-widget .cm-search-widget-button:hover {
-    color: #000;
-    }
 .cm-search-widget .sourceURL[href=""] {
     visibility: hidden;
     }
diff --git a/src/css/common.css b/src/css/common.css
index 1a8ba0b..fae4bb5 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -52,11 +52,11 @@ body {
     margin: 0;
     padding: 0;
     }
-a {
+a:not(.fa-icon) {
     color: var(--link-ink);
         fill: var(--link-ink);
     }
-a:hover {
+a:not(.fa-icon):hover {
     color: var(--link-hover-ink);
         fill: var(--link-hover-ink);
     }
@@ -271,6 +271,24 @@ select {
     padding: 2px;
     }
 
+.searchfield {
+    align-items: center;
+    column-gap: var(--default-gap-xxsmall);
+    display: inline-flex;
+    position: relative;
+    }
+.searchfield .fa-icon {
+    color: var(--ink-4);
+        fill: var(--ink-4);
+    font-size: 1em !important;
+    left: 2px;
+    position: absolute;
+    transform: none;
+    }
+.searchfield input:not(:placeholder-shown) ~ .fa-icon {
+    display: none;
+    }
+
 .hidden {
     display: none;
     height: 0;
@@ -309,7 +327,7 @@ select {
         font-size: 1.2rem;
         padding: 0;
         }
-    button.iconified > [data-i18n] {
+    button.iconified:not(.dontshrink) > [data-i18n] {
         display: none;
         }
     }
@@ -331,6 +349,22 @@ select {
     width: 100%;
     }
 
+.wikilink[href=""] {
+    display: none;
+    }
+.wikilink.fa-icon {
+    color: var(--info0-ink);
+        fill: var(--info0-ink);
+    padding: var(--default-gap-xxsmall) var(--default-gap-xsmall);
+    }
+.wikilink.fa-icon:hover {
+    transform: scale(1.2);
+    }
+.wikilink.fa-icon > svg {
+    height: 1.25rem;
+    width: 1.25rem;
+    }
+
 /* high dpi devices */
 :root.hidpi button {
     font-family: Metropolis, sans-serif;
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index ba02d97..b75949e 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -2,6 +2,7 @@ html, body {
     display: flex;
     flex-direction: column;
     height: 100vh;
+        height: 100svh;
     justify-content: stretch;
     overflow: hidden;
     position: relative;
@@ -11,11 +12,12 @@ body.notReady {
     display: none;
     }
 #dashboard-nav {
+    align-items: center;
     border: 0;
     border-bottom: 1px solid var(--border-1);
     display: flex;
     flex-shrink: 0;
-    flex-wrap: wrap;
+    justify-content: space-between;
     overflow-x: hidden;
     padding: 0;
     position: sticky;
@@ -23,6 +25,10 @@ body.notReady {
     width: 100%;
     z-index: 10;
     }
+#dashboard-nav > span {
+    display: flex;
+    flex-wrap: wrap;
+    }
 .tabButton {
     background-color: transparent;
     border: 0;
@@ -75,6 +81,7 @@ iframe {
     }
 #unsavedWarning > div:last-of-type {
     height: 100vh;
+        height: 100svh;
     position: absolute;
     width: 100vw;
     }
@@ -105,8 +112,7 @@ body.noDashboard #dashboard-nav {
     border-bottom-color: var(--dashboard-tab-hover-border);
     }
 
-/* touch-screen devices */
-:root.mobile #dashboard-nav {
+:root.mobile #dashboard-nav > span {
     flex-wrap: nowrap;
     overflow-x: auto;
     }
diff --git a/src/css/devtools.css b/src/css/devtools.css
index 425aac4..bb4c40d 100644
--- a/src/css/devtools.css
+++ b/src/css/devtools.css
@@ -1,5 +1,6 @@
 html {
     height: 100vh;
+        height: 100svh;
     overflow: hidden;
     width: 100vw;
     }
diff --git a/src/css/document-blocked.css b/src/css/document-blocked.css
index 25dd204..62d4921 100644
--- a/src/css/document-blocked.css
+++ b/src/css/document-blocked.css
@@ -42,10 +42,10 @@ a {
     word-break: break-all;
     }
 #warningSign {
-    width: 100%;
-    }
-#warningSign > a {
+    color: var(--accent-surface-1);
+        fill: var(--accent-surface-1);
     font-size: 96px;
+    width: 100%;
     }
 #theURL {
     color: var(--ink-2);
diff --git a/src/css/dom-inspector.css b/src/css/dom-inspector.css
index 71ba348..2f2ca14 100644
--- a/src/css/dom-inspector.css
+++ b/src/css/dom-inspector.css
@@ -3,6 +3,7 @@ html#ublock0-inspector,
     background: transparent;
     box-sizing: border-box;
     height: 100vh;
+        height: 100svh;
     margin: 0;
     overflow: hidden;
     width: 100vw;
diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css
index 35e0f8c..9a6bd8d 100644
--- a/src/css/dyna-rules.css
+++ b/src/css/dyna-rules.css
@@ -1,5 +1,6 @@
 html {
     height: 100vh;
+        height: 100svh;
     overflow: hidden;
     width: 100vw;
     }
diff --git a/src/css/epicker-ui.css b/src/css/epicker-ui.css
index d09e1ef..8ce5ade 100644
--- a/src/css/epicker-ui.css
+++ b/src/css/epicker-ui.css
@@ -3,6 +3,7 @@ html#ublock0-epicker,
     background: transparent;
     cursor: not-allowed;
     height: 100vh;
+        height: 100svh;
     margin: 0;
     overflow: hidden;
     width: 100vw;
@@ -13,29 +14,41 @@ html#ublock0-epicker,
 #ublock0-epicker aside {
     background-color: var(--surface-1);
     border: 1px solid var(--border-2);
-    bottom: 2px;
     box-sizing: border-box;
     cursor: default;
     display: none;
-    max-height: calc(100vh - 4px);
-    max-width: 36rem;
-    min-width: 24rem;
+    flex-direction: column;
+    max-width: min(32rem, 100vw - 4px);
+    min-width: min(24rem, 100vw - 4px);
     overflow-y: auto;
-    padding: 4px;
     position: fixed;
-    right: 2px;
-    width: calc(40% - 2px);
+    width: min(32rem, 100vw - 4px);
+    z-index: 100;
 }
-/* https://github.com/uBlockOrigin/uBlock-issues/discussions/2114 */
-#ublock0-epicker aside {
-    min-width: min(24rem, 100vw - 4px);
+#ublock0-epicker:not(.zap) aside {
+    display: flex;
+}
+#ublock0-epicker:not(.paused) aside,
+#ublock0-epicker.minimized aside {
+    min-width: min(16rem, 100vw - 4px);
+    overflow: hidden;
+    width: min(16rem, 100vw - 4px);
+}
+#ublock0-epicker:not(.paused) aside > *:not(#windowbar),
+#ublock0-epicker.minimized aside > *:not(#windowbar) {
+    display: none;
 }
-#ublock0-epicker.paused:not(.zap) aside {
-    display: block;
+#ublock0-epicker aside > *:not(:first-child) {
+    padding: 0 2px;
 }
+
 #ublock0-epicker #toolbar {
     display: flex;
+    justify-content: space-between;
 }
+#ublock0-epicker #toolbar button {
+    min-width: 5em;
+    }
 #ublock0-epicker ul {
     margin: 0.25em 0 0 0;
 }
@@ -43,16 +56,6 @@ html#ublock0-epicker,
     background-color: var(--button-preferred-surface);
     color: var(--button-preferred-ink);
 }
-#ublock0-epicker #move {
-    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
-    cursor: grab;
-    flex-grow: 1;
-    margin: 2px 4px;
-    opacity: 0.8;
-    }
-#ublock0-epicker aside.moving #move {
-    cursor: grabbing;
-}
 #ublock0-epicker section {
     border: 0;
     box-sizing: border-box;
@@ -70,8 +73,8 @@ html#ublock0-epicker,
 #ublock0-epicker section .codeMirrorContainer {
     border: none;
     box-sizing: border-box;
-    height: 8em;
-    max-height: 50vh;
+    height: 6em;
+    max-height: min(6em, 10vh);
     min-height: 1em;
     padding: 2px;
     width: 100%;
@@ -129,8 +132,8 @@ html#ublock0-epicker,
     );
     display: inline-block;
     flex-shrink: 0;
-    height: 16px;
-    width: 16px;
+    height: 20px;
+    width: 20px;
     }
 .resultsetModifier  > span > span:nth-of-type(3) {
     background-color: var(--surface-3);
@@ -174,12 +177,9 @@ html#ublock0-epicker,
     overflow: hidden;
 }
 #ublock0-epicker #candidateFilters {
-    max-height: 14em;
+    max-height: min(12em, 18vh);
     overflow-y: auto;
 }
-#ublock0-epicker #candidateFilters > li:first-of-type {
-    margin-bottom: 0.5em;
-}
 #ublock0-epicker .changeFilter > li > span:nth-of-type(1) {
     font-weight: bold;
 }
@@ -187,6 +187,9 @@ html#ublock0-epicker,
     font-size: smaller;
     color: gray;
 }
+#ublock0-epicker #candidateFilters [data-i18n] {
+    font-size: 90%;
+}
 #ublock0-epicker #candidateFilters .changeFilter {
     list-style-type: none;
     margin: 0 0 0 1em;
@@ -207,36 +210,7 @@ html#ublock0-epicker,
     background-color: var(--surface-2);
 }
 
-/**
-    https://github.com/gorhill/uBlock/issues/3449
-    https://github.com/uBlockOrigin/uBlock-issues/issues/55
-**/
-@keyframes startDialog {
-  0% { opacity: 1.0; }
-  60% { opacity: 1.0; }
-  100% { opacity: 0.1; }
-}
-#ublock0-epicker.paused aside {
-    opacity: 0.1;
-    visibility: visible;
-    z-index: 100;
-}
-#ublock0-epicker.paused:not(.show):not(.hide) aside:not(:hover) {
-    animation-duration: 1.6s;
-    animation-name: startDialog;
-    animation-timing-function: linear;
-}
-#ublock0-epicker.paused aside:hover {
-    opacity: 1;
-}
-#ublock0-epicker.paused.show aside {
-    opacity: 1;
-}
-#ublock0-epicker.paused.hide aside {
-    opacity: 0.1;
-}
-
-#ublock0-epicker svg {
+#ublock0-epicker svg#sea {
     cursor: crosshair;
     box-sizing: border-box;
     height: 100%;
@@ -245,26 +219,62 @@ html#ublock0-epicker,
     top: 0;
     width: 100%;
 }
-#ublock0-epicker.paused svg {
+#ublock0-epicker.paused svg#sea {
     cursor: not-allowed;
 }
-#ublock0-epicker svg > path:first-child {
+#ublock0-epicker svg#sea > path:first-child {
     fill: rgba(0,0,0,0.5);
     fill-rule: evenodd;
 }
-#ublock0-epicker svg > path + path {
+#ublock0-epicker svg#sea > path + path {
     stroke: #F00;
     stroke-width: 0.5px;
     fill: rgba(255,63,63,0.20);
 }
-#ublock0-epicker.zap svg > path + path {
+#ublock0-epicker.zap svg#sea > path + path {
     stroke: #FF0;
     stroke-width: 0.5px;
     fill: rgba(255,255,63,0.20);
 }
-#ublock0-epicker.preview svg > path {
+#ublock0-epicker.preview svg#sea > path {
     fill: rgba(0,0,0,0.10);
 }
-#ublock0-epicker.preview svg > path + path {
+#ublock0-epicker.preview svg#sea > path + path {
     stroke: none;
 }
+
+
+#ublock0-epicker #windowbar {
+    display: flex;
+}
+#ublock0-epicker #windowbar svg {
+    fill: none;
+    pointer-events: none;
+    stroke: var(--ink-1);
+    stroke-width: 3px;
+}
+#ublock0-epicker #windowbar #move {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAECAYAAACtBE5DAAAAFElEQVQI12NgwAfKy8v/M5ANYLoBshgEyQo6H9UAAAAASUVORK5CYII=');
+    cursor: grab;
+    flex-grow: 1;
+    opacity: 0.8;
+}
+#ublock0-epicker aside.moving #windowbar #move {
+    cursor: grabbing;
+}
+#windowbar #quit,
+#windowbar #minimize {
+    height: 2em;
+    width: 2em;
+}
+#windowbar #quit:hover,
+#windowbar #minimize:hover {
+    background-color: var(--surface-2)
+}
+#ublock0-epicker.minimized #windowbar #minimize svg > path,
+#windowbar #minimize svg > rect {
+    display: none;
+}
+#ublock0-epicker.minimized #windowbar #minimize svg > rect {
+    display: initial;
+}
diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css
index f6d517d..adac445 100644
--- a/src/css/fa-icons.css
+++ b/src/css/fa-icons.css
@@ -89,12 +89,14 @@
 .fa-icon > .fa-icon_sun-o {
     width: calc(1em * 1708 / 1792);
     }
+.fa-icon > .fa-icon_book,
 .fa-icon > .fa-icon_download-alt,
 .fa-icon > .fa-icon_font,
 .fa-icon > .fa-icon_search,
 .fa-icon > .fa-icon_spinner,
 .fa-icon > .fa-icon_unlink,
 .fa-icon > .fa-icon_upload-alt,
+.fa-icon > .fa-icon_volume-up,
 .fa-icon > .fa-icon_zoom-in,
 .fa-icon > .fa-icon_zoom-out {
     width: calc(1em * 1664 / 1792);
diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 8e5065c..7ae632e 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -2,6 +2,7 @@ body {
     display: flex;
     flex-direction: column;
     height: 100vh;
+        height: 100svh;
     overflow: hidden;
     width: 100vw;
     }
@@ -218,6 +219,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     width: 100%;
     }
 #vwRenderer .logEntry {
+    background-color: var(--surface-1);
     display: block;
     left: 0;
     overflow: hidden;
@@ -228,7 +230,11 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     display: none;
     }
 #vwRenderer .logEntry > div {
+    border-bottom: 1px dotted var(--border-1);
+    box-sizing: border-box;
+    display: flex;
     height: 100%;
+    max-height: 200px;
     white-space: nowrap;
     }
 #vwRenderer .logEntry > div[data-status="1"],
@@ -271,7 +277,7 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     color: white;
     }
 #vwRenderer .logEntry > div[data-type="error"] {
-    color: var(--sf-error-ink);
+    color: var(--cm-negative);
     }
 #vwRenderer .logEntry > div[data-type="info"] {
     color: var(--sf-def-ink);
@@ -283,10 +289,8 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     opacity: 0.7;
     }
 
-#vwRenderer .logEntry > div > span {
-    border: 1px dotted var(--border-1);
-    border-top: 0;
-    border-right: 0;
+#vwRenderer .logEntry > .fields > span {
+    border-left: 1px dotted var(--border-1);
     box-sizing: border-box;
     display: inline-block;
     height: 100%;
@@ -296,86 +300,74 @@ body[dir="rtl"] #netInspector #filterExprPicker {
     white-space: nowrap;
     word-break: break-all;
     }
-#vwRenderer .logEntry > div.canDetails:hover > span {
+#vwRenderer .logEntry > div:hover > span {
     background-color: rgba(0,0,0,0.04);
     }
-body[dir="ltr"] #vwRenderer .logEntry > div > span:first-child {
+body[dir="ltr"] #vwRenderer .logEntry > .fields > span:first-child {
     border-left: 0;
     }
-body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
+body[dir="rtl"] #vwRenderer .logEntry > .fields > span:first-child {
     border-right: 0;
     }
 #vwRenderer .logEntry > div > span:nth-of-type(1) {
     }
 #vwRenderer .logEntry > div > span:nth-of-type(2) {
     }
-#vwRenderer .logEntry > div > span:nth-of-type(2) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(2) {
     text-overflow: ellipsis;
     }
-#vwRenderer .logEntry > div.messageRealm > span:nth-of-type(2) ~ span {
+#vwRenderer .logEntry > .fields.messageRealm > span:nth-of-type(2) ~ span {
     display: none;
     }
-.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(2) {
+.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(2) {
     overflow-y: auto;
     white-space: pre-line;
     }
-#vwRenderer .logEntry > div.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
+#vwRenderer .logEntry > .fields.messageRealm[data-type="tabLoad"] > span:nth-of-type(2) {
     text-align: center;
     }
-#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:first-of-type {
+#vwRenderer .logEntry > .fields.extendedRealm > span:nth-of-type(2) > span:first-of-type {
     display: none;
     }
-#vwRenderer .logEntry > div.extendedRealm > span:nth-of-type(2) > span:last-of-type {
-    pointer-events: none;
-    }
-#vwRenderer .logEntry > div.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type {
+#vwRenderer .logEntry > .fields.extendedRealm.isException > span:nth-of-type(2) > span:last-of-type {
     text-decoration: line-through rgba(0,0,255,0.7);
     }
-#vwRenderer .logEntry > div > span:nth-of-type(3) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(3) {
     font-family: monospace;
     padding-left: 0.3em;
     padding-right: 0.3em;
     text-align: center;
     }
-#vwRenderer .logEntry > div.canDetails:hover > span:not(:nth-of-type(4)):not(:nth-of-type(8)) {
-    background: rgba(0, 0, 255, 0.1);
-    cursor: zoom-in;
-    }
-#netInspector:not(.vExpanded) #vwRenderer .logEntry > div > span:nth-of-type(4) {
-    direction: rtl;
+#netInspector:not(.vExpanded) #vwRenderer .logEntry > .fields > span:nth-of-type(4) {
     text-align: right;
-    unicode-bidi: plaintext;
     }
-#vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
+#vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(4) {
     text-overflow: ellipsis;
     }
-.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(4) {
+.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(4) {
     overflow-y: auto;
     text-overflow: clip;
     white-space: pre-line;
     }
-#vwRenderer .logEntry > div > span:nth-of-type(5) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(5) {
     text-align: center;
     }
-/* visual for tabless network requests */
-#vwRenderer .logEntry > div > span:nth-of-type(5) {
-    position: relative;
+#vwRenderer .logEntry > .fields > span:nth-of-type(3),
+#vwRenderer .logEntry > .fields > span:nth-of-type(5),
+#vwRenderer .logEntry > .fields > span:nth-of-type(7) {
+    white-space: nowrap !important;
     }
-#vwRenderer .logEntry > div > span:nth-of-type(7) {
-    }
-#vwRenderer #vwContent .logEntry > div > span:nth-of-type(7) {
-    }
-#vwRenderer .logEntry > div > span:nth-of-type(8) {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) {
     position: relative;
     }
-#vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) {
+#vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(8) {
     text-overflow: ellipsis;
     }
-.vExpanded #vwRenderer #vwContent .logEntry > div > span:nth-of-type(8) {
+.vExpanded #vwRenderer #vwContent .logEntry > .fields > span:nth-of-type(8) {
     overflow-y: auto;
     white-space: pre-line;
     }
-#vwRenderer .logEntry > div > span:nth-of-type(8) b {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) b {
     font-weight: bold;
     }
 #vwRenderer .logEntry > div[data-status="1"] > span:nth-of-type(8) b,
@@ -396,37 +388,65 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
 .netFilteringDialog > .panes > .details > div[data-status="2"] b {
     background-color: rgb(var(--popup-cell-allow-surface-rgb) / 100%);
     }
-#vwRenderer .logEntry > div > span:nth-of-type(8) a {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
     align-items: center;
     background-color: dimgray;
+    bottom: 0;
     color: white;
     display: none;
-    height: 100%;
+    height: min(100%, 1.5em);
     justify-content: center;
-    padding: 0 0.25em;
+    padding: 0.1em;
     opacity: 0.4;
     position: absolute;
     right: 0;
     text-decoration: none;
-    top: 0;
-    width: 2rem;
+    width: 1.5em;
     }
-#netInspector.vExpanded #vwRenderer .logEntry > div > span:nth-of-type(8) a {
+#netInspector.vExpanded #vwRenderer .logEntry > .fields > span:nth-of-type(8) a {
     bottom: 0px;
     height: unset;
-    padding: 0.25em;
+    padding: 0.2em;
     top: unset;
     }
-#vwRenderer .logEntry > div > span:nth-of-type(8) a::after {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) a::after {
     content: '\2197';
     }
-#vwRenderer .logEntry > div.networkRealm > span:nth-of-type(8):hover a {
+#vwRenderer .logEntry > .fields.networkRealm > span:nth-of-type(8):hover a {
     display: inline-flex;
     }
-#vwRenderer .logEntry > div > span:nth-of-type(8) a:hover {
+#vwRenderer .logEntry > .fields > span:nth-of-type(8) a:hover {
     opacity: 1;
     }
 
+@keyframes unrollRow {
+    to {
+        box-shadow: 0 2px 3px 0 #444;
+        height: auto;
+        max-height: 200px;
+        z-index: 1;
+    }
+}
+@keyframes unrollRowCell {
+    to {
+        height: auto;
+        overflow-y: auto;
+        white-space: pre-wrap;
+    }
+}
+#netInspector:not(.vExpanded) #vwRenderer .logEntry:hover {
+    animation-delay: 0.8s;
+    animation-fill-mode: forwards;
+    animation-name: unrollRow;
+    animation-timing-function: step-start;
+    }
+#netInspector:not(.vExpanded) #vwRenderer .logEntry:hover > .fields > span {
+    animation-delay: 0.8s;
+    animation-fill-mode: forwards;
+    animation-name: unrollRowCell;
+    animation-timing-function: step-start;
+    }
+
 #vwRenderer #vwBottom {
     background-color: #00F;
     height: 0;
@@ -448,6 +468,7 @@ body[dir="rtl"] #vwRenderer .logEntry > div > span:first-child {
     max-width: 640px;
     min-width: min(100%, 640px);
     position: absolute;
+    z-index: 2;
     }
 #netInspector .entryTools:empty {
     display: none;
@@ -492,6 +513,7 @@ body[dir="rtl"] .closeButton {
     bottom: 0;
     display: none;
     max-height: min(800px, calc(100vh - 2rem));
+        max-height: min(800px, calc(100svh - 2rem));
     min-width: 360px;
     overflow: hidden;
     position: fixed;
@@ -947,10 +969,10 @@ body.dirty .netFilteringDialog > div.panes > .dynamic > .toolbar #saveRules {
     background-color: rgb(var(--primary-70) / 40%);
     }
 #loggerExportDialog .output {
-    font: smaller mono;
-    height: 60vh;
+    font-size: small;
+    height: 80vh;
     padding: 0.5em;
-    white-space: pre;
+    white-space: pre-wrap;
     }
 
 #loggerSettingsDialog {
diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index 252e371..b845562 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -211,7 +211,7 @@ body.needSave #revertRules {
     font-size: 1.6em;
     }
 
-#basicTools:not(.canPick) .needPick {
+#basicTools .needPick:not(.canPick) {
     visibility: hidden;
     }
 
@@ -300,6 +300,7 @@ body.needSave #revertRules {
     }
 :root.desktop body.vMin #firewall {
     max-height: 100vh;
+        max-height: 100svh;
     }
 #firewall > * {
     direction: ltr;
diff --git a/src/css/whitelist.css b/src/css/whitelist.css
index 715c964..3248a77 100644
--- a/src/css/whitelist.css
+++ b/src/css/whitelist.css
@@ -1,5 +1,6 @@
 html {
     height: 100vh;
+        height: 100svh;
     overflow: hidden;
     width: 100vw;
     }