attempt at addressing #514, #518

src/css/devtool-log.css

@@ -14,12 +14,12 @@ body {
     border: 0;
     box-sizing: border-box;
     height: 36px;
+    left: 1em;
     margin: 0;
     padding: 0;
     position: fixed;
     text-align: center;
     top: 0;
-    width: 100%;
     }
 #toolbar .button {
     background-color: white;
@@ -105,4 +105,4 @@ body:not(.filterOff) #content table tr.hidden {
     }
 #content table tr.allowed td:nth-of-type(4) b {
     background-color: rgba(0, 160, 0, 0.2);
-    }
+    }

src/css/devtools.css

@@ -17,6 +17,7 @@ body {
     }
 #toolbar > * {
     display: inline-block;
+    position: relative;
     vertical-align: middle;
     }
 #toolbar button {
@@ -42,6 +43,14 @@ select {
 select option {
     max-width: 40em;
     }
+#popupToggler {
+    opacity: 0.25;
+    position: absolute;
+    right: 0;
+    }
+body.popupEnabled #popupToggler {
+    opacity: 1;
+    }
 #content {
     border: 0;
     box-sizing: border-box;
@@ -52,3 +61,13 @@ select option {
     padding: 0;
     width: 100%;
     }
+#popup {
+    border: 1px solid gray;
+    display: none;
+    position: fixed;
+    right: 2px;
+    top: calc(4em + 2px);
+    }
+body.popupEnabled #popup[src^="popup.html"] {
+    display: initial;
+    }

src/devtools.html

@@ -14,8 +14,10 @@
 <div id="toolbar">
     <select id="pageSelector"></select>
     <button id="refresh" class="fa" type="button">&#xf021;</button>
+    <button id="popupToggler" class="fa" type="button">&#xf0c8;</button>
 </div>
 <iframe id="content"></iframe>
+<iframe id="popup" src=""></iframe>
 
 <script src="js/vapi-common.js"></script>
 <script src="js/vapi-client.js"></script>

src/js/devtools.js

@@ -78,6 +78,7 @@ var selectPage = function() {
         return;
     }
     inspector.attr('src', targetSrc);
+    uDom('#popup').attr('src', tabId ? 'popup.html?tabId=' + tabId : '');
 
     // This is useful for when the user force-refresh the page: this will
     // prevent a reset to the original request log.
@@ -93,6 +94,63 @@ var selectPage = function() {
 
 /******************************************************************************/
 
+var togglePopup = function() {
+    var tabId = uDom('#pageSelector').val() || '';
+    var body = uDom('body');
+    body.toggleClass('popupEnabled');
+    if ( body.hasClass('popupEnabled') === false ) {
+        tabId = '';
+    }
+    uDom('#popup').attr('src', tabId ? 'popup.html?tabId=' + tabId : '');
+};
+
+/******************************************************************************/
+
+var resizePopup = function() {
+    var popup = document.getElementById('popup');
+    popup.style.width = popup.contentWindow.document.body.clientWidth + 'px';
+    popup.style.height = popup.contentWindow.document.body.clientHeight + 'px';
+};
+
+/******************************************************************************/
+
+var onPopupLoaded = function() {
+    resizePopup();
+
+    if ( popupObserver !== null ) {
+        popupObserver.disconnect();
+    }
+
+    var popup = document.getElementById('popup');
+    if ( popup.contentDocument === null ) {
+        return;
+    }
+    var popupBody = popup.contentDocument.body;
+    if ( popupBody === null ) {
+        return;
+    }
+    var popupPanes = popup.contentDocument.getElementById('panes');
+    if ( popupPanes === null ) {
+        return;
+    }
+
+    if ( popupObserver === null ) {
+        popupObserver = new MutationObserver(resizePopup);
+    }
+
+    var details = {
+        childList: false,
+        attributes: true,
+        attributeFilter: ['class']
+    };
+    popupObserver.observe(popupBody, details);
+    popupObserver.observe(popupPanes, details);
+};
+
+var popupObserver = null;
+
+/******************************************************************************/
+
 uDom.onLoad(function() {
     var tabId;
 
@@ -102,6 +160,9 @@ uDom.onLoad(function() {
         tabId = matches[1];
     }
 
+    uDom('#popupToggler').on('click', togglePopup);
+    uDom('#popup').on('load', onPopupLoaded);
+
     renderPageSelector(tabId);
 
     uDom('#pageSelector').on('change', pageSelectorChanged);

src/js/messaging.js

@@ -281,6 +281,10 @@ var onMessage = function(request, sender, callback) {
     // Async
     switch ( request.what ) {
         case 'getPopupData':
+            if ( request.tabId === vAPI.noTabId ) {
+                callback(getStats(vAPI.noTabId, ''));
+                return;
+            }
             vAPI.tabs.get(request.tabId, function(tab) {
                 // https://github.com/gorhill/uBlock/issues/1012
                 callback(getStats(getTargetTabId(tab), tab ? tab.title : ''));