From a914c01ea9bdd406d3e676a3ad9166917e742077 Mon Sep 17 00:00:00 2001 From: gorhill Date: Fri, 24 Jul 2015 08:22:54 -0400 Subject: [PATCH] popup resize: code review --- platform/chromium/vapi-common.js | 4 ---- platform/firefox/vapi-background.js | 14 ++++++++------ platform/firefox/vapi-common.js | 4 ---- src/css/popup.css | 1 + src/js/logger-ui.js | 19 +++++++++++++++---- src/js/popup.js | 13 ++++++++----- 6 files changed, 32 insertions(+), 23 deletions(-) diff --git a/platform/chromium/vapi-common.js b/platform/chromium/vapi-common.js index 1763e5e..56b192e 100644 --- a/platform/chromium/vapi-common.js +++ b/platform/chromium/vapi-common.js @@ -81,10 +81,6 @@ vAPI.closePopup = function() { window.open('','_self').close(); }; -vAPI.resizePopup = function() { - // Nothing to do: chromium API takes care to resize the popup -}; - /******************************************************************************/ // A localStorage-like object which should be accessible from the diff --git a/platform/firefox/vapi-background.js b/platform/firefox/vapi-background.js index a0aa4ca..635c911 100644 --- a/platform/firefox/vapi-background.js +++ b/platform/firefox/vapi-background.js @@ -1997,8 +1997,8 @@ vAPI.toolbarButton = { // https://github.com/chrisaljoudi/uBlock/issues/730 // Voodoo programming: this recipe works - panel.style.setProperty('height', height + 'px'); - iframe.style.setProperty('height', height + 'px'); + panel.style.setProperty('height', toPx(height)); + iframe.style.setProperty('height', toPx(height)); // Adjust width for presence/absence of vertical scroll bar which may // have appeared as a result of last operation. @@ -2007,13 +2007,13 @@ vAPI.toolbarButton = { if ( contentWindow.scrollMaxY !== 0 ) { width += scrollBarWidth; } - panel.style.setProperty('width', width + 'px'); + panel.style.setProperty('width', toPx(width)); // scrollMaxX should always be zero once we know the scrollbar width if ( contentWindow.scrollMaxX !== 0 ) { scrollBarWidth = contentWindow.scrollMaxX; width += scrollBarWidth; - panel.style.setProperty('width', width + 'px'); + panel.style.setProperty('width', toPx(width)); } if ( iframe.clientHeight !== height || panel.clientWidth !== width ) { @@ -2042,14 +2042,16 @@ vAPI.toolbarButton = { tbb.onBeforePopupReady.call(this); } + var body = win.document.body; + body.removeAttribute('data-resize-popup'); var mutationObserver = new win.MutationObserver(onResizeRequested); - mutationObserver.observe(win.document.body, { + mutationObserver.observe(body, { attributes: true, attributeFilter: [ 'data-resize-popup' ] }); }; - iframe.addEventListener('DOMContentLoaded', onPopupReady, true); + iframe.addEventListener('load', onPopupReady, true); }; })(); diff --git a/platform/firefox/vapi-common.js b/platform/firefox/vapi-common.js index c8910e0..89e4423 100644 --- a/platform/firefox/vapi-common.js +++ b/platform/firefox/vapi-common.js @@ -120,10 +120,6 @@ vAPI.closePopup = function() { sendAsyncMessage(location.host + ':closePopup'); }; -vAPI.resizePopup = function() { - document.body.setAttribute('data-resize-popup', 'true'); -}; - /******************************************************************************/ // A localStorage-like object which should be accessible from the diff --git a/src/css/popup.css b/src/css/popup.css index a48be42..8bcb9b8 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -313,6 +313,7 @@ body.tScopeSite #scopeCell { padding: 6px 1px 3px 1px; display: inline-block; box-sizing: content-box; + -moz-box-sizing: content-box; width: 2.6em; white-space: nowrap; text-align: center; diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js index bf5e5c6..bd0b044 100644 --- a/src/js/logger-ui.js +++ b/src/js/logger-ui.js @@ -761,11 +761,22 @@ var popupManager = (function() { container.classList.toggle('hide'); }; + var onResizeRequested = function() { + var popupBody = popup.contentWindow.document.body; + if ( popupBody.getAttribute('data-resize-popup') !== 'true' ) { + return; + } + popupBody.removeAttribute('data-resize-popup'); + resizePopup(); + }; + var onLoad = function() { resizePopup(); - popupObserver.observe(popup.contentDocument.body, { - subtree: true, - attributes: true + var popupBody = popup.contentDocument.body; + popupBody.removeAttribute('data-resize-popup'); + popupObserver.observe(popupBody, { + attributes: true, + attributesFilter: [ 'data-resize-popup' ] }); }; @@ -788,7 +799,7 @@ var popupManager = (function() { popup = document.createElement('iframe'); popup.addEventListener('load', onLoad); popup.setAttribute('src', 'popup.html?tabId=' + realTabId); - popupObserver = new MutationObserver(resizePopup); + popupObserver = new MutationObserver(onResizeRequested); container.appendChild(popup); style = document.getElementById('popupFilterer'); diff --git a/src/js/popup.js b/src/js/popup.js index 9b1f002..85614b8 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -288,7 +288,7 @@ function toggleCollapseState(elem) { } else { toggleSpecificCollapseState(elem); } - vAPI.resizePopup(); + resizePopup(); } function toggleMainCollapseState(uelem) { @@ -369,7 +369,6 @@ function updateMatrixColors() { cell = cells.nodeAt(i); cell.className = 'matCell ' + getCellClass(cell.hostname, cell.reqType); } - vAPI.resizePopup(); } /******************************************************************************/ @@ -395,7 +394,6 @@ function updateMatrixBehavior() { } section.toggleClass('collapsible', subdomainRows.filter('.collapsible').length > 0); } - vAPI.resizePopup(); } /******************************************************************************/ @@ -478,7 +476,7 @@ var endMatrixUpdate = function() { updateMatrixBehavior(); matrixList.css('display', ''); matrixList.appendTo('.paneContent'); - vAPI.resizePopup(); + resizePopup(); }; var createMatrixGroup = function() { @@ -1220,6 +1218,11 @@ var onMatrixSnapshotReady = function(response) { // TODO: }; +/******************************************************************************/ + +var resizePopup = function() { + document.body.setAttribute('data-resize-popup', 'true'); +}; /******************************************************************************/ @@ -1367,7 +1370,7 @@ uDom('#matList').on('click', '.g4Meta', function() { .toggleClass('g4Collapsed') .hasClass('g4Collapsed'); setUISetting('popupHideBlacklisted', collapsed); - vAPI.resizePopup(); + resizePopup(); }); /******************************************************************************/