1
0
mirror of https://github.com/gorhill/uBlock.git synced 2024-11-02 00:42:45 +01:00

set popup *size* as early as possible

This commit is contained in:
gorhill 2015-03-16 09:20:58 -04:00
parent 2534e45245
commit cf8275eb9e
2 changed files with 42 additions and 30 deletions

View File

@ -23,25 +23,51 @@
/******************************************************************************/
// Ensure the popup is properly sized as soon as possible. It is assume the DOM
// content is ready at this point, which should be the case given where this
// script file is included in the HTML file.
(function() {
'use strict';
var doc = document;
// Hacky? I couldn't figure a CSS recipe for this problem.
// I do not want the left pane -- optional and hidden by defaut -- to
// dictate the height of the popup. The right pane dictates the height
// of the popup, and the left pane will have a scrollbar if ever its
// height is larger than what is available.
doc.querySelector('#panes > div:nth-of-type(2)').style.setProperty(
'height',
doc.querySelector('#panes > div:nth-of-type(1)').offsetHeight + 'px'
);
// The padlock must be manually positioned:
// - It's vertical position depends on the height on the title bar.
doc.getElementById('saveRules').style.setProperty(
'top',
(doc.getElementById('gotoPrefs').getBoundingClientRect().bottom + 4) + 'px'
);
// https://github.com/gorhill/uBlock/issues/996
// Experimental: mitigate glitchy popup UI: immediately set the firewall pane
// visibility to its last known state. By default the pane is hidden.
// Will remove if it makes no difference.
if ( vAPI.localStorage.getItem('popupFirewallPane') === 'true' ) {
doc.getElementById('panes').classList.add('dfEnabled');
}
})();
/******************************************************************************/
(function() {
'use strict';
/******************************************************************************/
// https://github.com/gorhill/uBlock/issues/996
// Experimental: mitigate glitchy popup UI: immediately set the firewall pane
// visibility to its last known state. By default the pane is hidden.
// Will remove if it makes no difference.
if ( vAPI.localStorage.getItem('popupFirewallPane') === 'true' ) {
uDom('#panes').addClass('dfEnabled');
}
/******************************************************************************/
var popupData;
var dfPaneBuilt = false;
var popupHeight;
var reIP = /^\d+(?:\.\d+){1,3}$/;
var reSrcHostnameFromRule = /^d[abn]:([^ ]+) ([^ ]+) ([^ ]+)/;
var scopeToSrcHostnameMap = {
@ -169,20 +195,6 @@ var addFirewallRow = function(des) {
row.toggleClass('blocked', hnDetails.blockCount !== 0);
row.appendTo('#firewallContainer');
// Hacky? I couldn't figure a CSS recipe for this problem.
// I do not want the left pane -- optional and hidden by defaut -- to
// dictate the height of the popup. The right pane dictates the height
// of the popup, and the left pane will have a scrollbar if ever its
// height is larger than what is available.
if ( popupHeight === undefined ) {
popupHeight = uDom('#panes > div:nth-of-type(1)').nodeAt(0).offsetHeight;
uDom('#panes > div:nth-of-type(2)').css('height', popupHeight + 'px');
// The padlock must be manually positioned:
// - It's vertical position depends on the height on the title bar.
var rect = document.getElementById('gotoPrefs').getBoundingClientRect();
document.getElementById('saveRules').style.setProperty('top', (rect.bottom + 4) + 'px');
}
return row;
};

View File

@ -15,17 +15,17 @@
<div>
<p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
<p id="switch-hint"></p>
<h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt"></h2>
<h2 id="dfToggler" data-i18n="popupBlockedRequestPrompt">&nsbsp;</h2>
<p class="statName">
<span data-i18n="popupBlockedOnThisPagePrompt"></span>&ensp;
<span data-i18n="popupBlockedOnThisPagePrompt">&nsbsp;</span>&ensp;
<span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
<a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
</p>
<p class="statValue" id="page-blocked">?</p>
<p class="statName" data-i18n="popupBlockedSinceInstallPrompt"></p>
<p class="statName" data-i18n="popupBlockedSinceInstallPrompt">&nsbsp;</p>
<p class="statValue" id="total-blocked">?</p>
<h2 data-i18n="popupHitDomainCountPrompt"></h2>
<p class="statValue" id="popupHitDomainCount"></p>
<h2 data-i18n="popupHitDomainCountPrompt">&nsbsp;</h2>
<p class="statValue" id="popupHitDomainCount">&nsbsp;</p>
<div id="refresh" class="fa">&#xf021;</div>
</div><!-- DO NOT REMOVE --><div>
<div id="firewallContainer">