From 394a61570cf5de95661a389942778b49a75b4834 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Fri, 21 Aug 2020 08:23:36 -0400
Subject: [PATCH] Use modern popup panel in logger

The logger was still embedding the now deprecated popup
panel.
---
 src/css/logger-ui.css |  3 ++-
 src/js/logger-ui.js   |  2 +-
 src/js/popup-fenix.js | 29 +++++++++++++++--------------
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css
index 104f98c7d..ee158c579 100644
--- a/src/css/logger-ui.css
+++ b/src/css/logger-ui.css
@@ -448,8 +448,9 @@ body.colorBlind #netFilteringDialog > .panes > .details > div[data-status="2"] b
     background: white;
     border: 1px solid gray;
     bottom: 0;
-    box-sizing: border-box;
     display: none;
+    max-height: 70vh;
+    min-width: 360px;
     overflow: hidden;
     position: fixed;
     right: 0;
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 8c5016f57..939ff6720 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -2323,7 +2323,7 @@ const popupManager = (( ) => {
 
     const setTabId = function(tabId) {
         if ( popup === null ) { return; }
-        popup.setAttribute('src', 'popup.html?tabId=' + tabId);
+        popup.setAttribute('src', 'popup-fenix.html?portrait=1&tabId=' + tabId);
     };
 
     const onTabIdChanged = function() {
diff --git a/src/js/popup-fenix.js b/src/js/popup-fenix.js
index 7370592bd..c8f543c58 100644
--- a/src/js/popup-fenix.js
+++ b/src/js/popup-fenix.js
@@ -1206,18 +1206,13 @@ const getPopupData = async function(tabId) {
 /******************************************************************************/
 
 // Popup DOM is assumed to be loaded at this point -- because this script
-// is loaded after everything else..
+// is loaded after everything else.
 
 {
-    // If there's no tab id specified in the query string,
-    // it will default to current tab.
-    let tabId = null;
-
-    // Extract the tab id of the page this popup is for
-    const matches = self.location.search.match(/[\?&]tabId=([^&]+)/);
-    if ( matches && matches.length === 2 ) {
-        tabId = parseInt(matches[1], 10) || 0;
-    }
+    // Extract the tab id of the page for this popup. If there's no tab id
+    // specified in the query string, it will default to current tab.
+    const selfURL = new URL(self.location.href);
+    const tabId = parseInt(selfURL.searchParams.get('tabId'), 10) || null;
 
     const nextFrames = async n => {
         for ( let i = 0; i < n; i++ ) {
@@ -1240,16 +1235,22 @@ const getPopupData = async function(tabId) {
     // when testing against viewport width.
     const checkViewport = async function() {
         const root = document.querySelector(':root');
-        if ( root.classList.contains('desktop') ) {
+        if (
+            root.classList.contains('mobile') ||
+            selfURL.searchParams.get('portrait')
+        ) {
+            root.classList.add('portrait');
+        } else if ( root.classList.contains('desktop') ) {
             await nextFrames(4);
             const main = document.getElementById('main');
             const firewall = document.getElementById('firewall');
             const minWidth = (main.offsetWidth + firewall.offsetWidth) / 1.1;
-            if ( window.innerWidth < minWidth ) {
+            if (
+                selfURL.searchParams.get('portrait') ||
+                window.innerWidth < minWidth
+            ) {
                 root.classList.add('portrait');
             }
-        } else if ( root.classList.contains('mobile') ) {
-            root.classList.add('portrait');
         }
         if ( root.classList.contains('portrait') ) {
             const panes = document.getElementById('panes');