Skip to content
Permalink
Browse files

Avoid redundant DOM attributes in dynamic filtering pane

Move redundant attributes in cells to parent row; use
Element.closest() to look-up these attributes when needed.
  • Loading branch information...
gorhill committed Dec 29, 2018
1 parent 4ce1796 commit 87cf95c04b22fd3348c07f01b5328fb8bc98fcb2
Showing with 46 additions and 36 deletions.
  1. +38 −28 src/js/popup.js
  2. +8 −8 src/popup.html
@@ -208,7 +208,7 @@ const addFirewallRow = function(des) {
row = uDom('#templates > div:nth-of-type(1)').clone();
}

row.descendants('[data-des]').attr('data-des', des);
row.attr('data-des', des);

const hnDetails = popupData.hostnameDict[des] || {};
const isDomain = des === hnDetails.domain;
@@ -238,36 +238,45 @@ const addFirewallRow = function(des) {
/******************************************************************************/

const updateFirewallCell = function(scope, des, type, rule) {
const selector = '#firewallContainer span[data-src="' + scope + '"][data-des="' + des + '"][data-type="' + type + '"]';
const cells = uDom(selector);
const row = document.querySelector(
`#firewallContainer div[data-des="${des}"][data-type="${type}"]`
);
if ( row === null ) { return; }

const cells = row.querySelectorAll(`:scope > span[data-src="${scope}"]`);
if ( cells.length === 0 ) { return; }

cells.removeClass();
if ( rule !== null ) {
cells.toggleClass(rule.action + 'Rule', true);
cells.forEach(el => { el.setAttribute('class', rule.action + 'Rule'); });
} else {
cells.forEach(el => { el.removeAttribute('class'); });
}

// Use dark shade visual cue if the rule is specific to the cell.
let ownRule = false;
if ( rule !== null ) {
ownRule = (rule.des !== '*' || rule.type === type) &&
(rule.des === des) &&
(rule.src === scopeToSrcHostnameMap[scope]);
if (
(rule !== null) &&
(rule.des !== '*' || rule.type === type) &&
(rule.des === des) &&
(rule.src === scopeToSrcHostnameMap[scope])

) {
cells.forEach(el => { el.classList.add('ownRule'); });
}
cells.toggleClass('ownRule', ownRule);

if ( scope !== '.' || des === '*' ) { return; }

// Remember this may be a cell from a reused row, we need to clear text
// content if we can't compute request counts.
if ( popupData.hostnameDict.hasOwnProperty(des) === false ) {
cells.removeAttr('data-acount');
cells.removeAttr('data-acount');
cells.forEach(el => {
el.removeAttribute('data-acount');
el.removeAttribute('data-bcount');
});
return;
}

const hnDetails = popupData.hostnameDict[des];
let cell = cells.nodeAt(0);
let cell = cells[0];
if ( hnDetails.allowCount !== 0 ) {
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.allowCount + 1) / Math.LN10), 3));
} else {
@@ -283,7 +292,7 @@ const updateFirewallCell = function(scope, des, type, rule) {
return;
}

cell = cells.nodeAt(1);
cell = cells[1];
if ( hnDetails.totalAllowCount !== 0 ) {
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.totalAllowCount + 1) / Math.LN10), 3));
} else {
@@ -832,11 +841,12 @@ const setFirewallRule = function(src, des, type, action, persist) {
/******************************************************************************/

const unsetFirewallRuleHandler = function(ev) {
const cell = uDom(ev.target);
const cell = ev.target;
const row = cell.closest('[data-des]');
setFirewallRule(
cell.attr('data-src') === '/' ? '*' : popupData.pageHostname,
cell.attr('data-des'),
cell.attr('data-type'),
cell.getAttribute('data-src') === '/' ? '*' : popupData.pageHostname,
row.getAttribute('data-des'),
row.getAttribute('data-type'),
0,
ev.ctrlKey || ev.metaKey
);
@@ -846,22 +856,22 @@ const unsetFirewallRuleHandler = function(ev) {
/******************************************************************************/

const setFirewallRuleHandler = function(ev) {
const hotspot = uDom(ev.target);
const cell = hotspot.ancestors('[data-src]');
if ( cell.length === 0 ) { return; }
const hotspotId = hotspot.attr('id');
const hotspot = ev.target;
const cell = hotspot.closest('[data-src]');
if ( cell === null ) { return; }
const row = cell.closest('[data-des]');
let action = 0;
if ( hotspotId === 'dynaAllow' ) {
if ( hotspot.id === 'dynaAllow' ) {
action = 2;
} else if ( hotspotId === 'dynaNoop' ) {
} else if ( hotspot.id === 'dynaNoop' ) {
action = 3;
} else {
action = 1;
}
setFirewallRule(
cell.attr('data-src') === '/' ? '*' : popupData.pageHostname,
cell.attr('data-des'),
cell.attr('data-type'),
cell.getAttribute('data-src') === '/' ? '*' : popupData.pageHostname,
row.getAttribute('data-des'),
row.getAttribute('data-type'),
action,
ev.ctrlKey || ev.metaKey
);
@@ -43,19 +43,19 @@ <h2 data-i18n="popupHitDomainCountPrompt">&nbsp;</h2>
</div>
</div><!-- DO NOT REMOVE --><div class="tooltipContainer">
<div id="firewallContainer" class="minimized">
<div><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="*" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-des="*" data-type="*" data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
<div><span data-i18n="popupImageRulePrompt"></span><span data-src="/" data-des="*" data-type="image"> </span><span data-src="." data-des="*" data-type="image"> </span></div>
<div><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/" data-des="*" data-type="3p"> </span><span data-src="." data-des="*" data-type="3p"> </span></div>
<div><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="inline-script"> </span><span data-src="." data-des="*" data-type="inline-script"> </span></div>
<div><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="1p-script"> </span><span data-src="." data-des="*" data-type="1p-script"> </span></div>
<div><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-script"> </span><span data-src="." data-des="*" data-type="3p-script"> </span></div>
<div><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/" data-des="*" data-type="3p-frame"> </span><span data-src="." data-des="*" data-type="3p-frame"> </span></div>
<div data-des="*" data-type="*"><span data-i18n="popupAnyRulePrompt"></span><span data-src="/" data-i18n-tip="popupTipGlobalRules" data-tip-position="under"> </span><span data-src="." data-i18n-tip="popupTipLocalRules" data-tip-position="under"> </span></div>
<div data-des="*" data-type="image"><span data-i18n="popupImageRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
<div data-des="*" data-type="3p"><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
<div data-des="*" data-type="inline-script"><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
<div data-des="*" data-type="1p-script"><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
<div data-des="*" data-type="3p-script"><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
<div data-des="*" data-type="3p-frame"><span data-i18n="popup3pFrameRulePrompt"></span><span data-src="/"> </span><span data-src="."> </span></div>
</div><div id="rulesetTools"><span id="saveRules" class="fa-icon" data-i18n-tip="popupTipSaveRules" data-tip-position="under">lock</span><span id="revertRules" class="fa-icon" data-i18n-tip="popupTipRevertRules" data-tip-position="under">eraser</span></div>
</div>
</div>

<div id="templates" style="display: none">
<div><span><sup></sup><span></span></span><span data-src="/" data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span><span data-src="." data-des="" data-type="*"></span></div>
<div data-des="" data-type="*"><span><sup></sup><span></span></span><span data-src="/"></span><span data-src="."></span><span data-src="."></span></div>
<div id="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
<div id="hotspotTip"></div>
<div id="tooltip"></div>

0 comments on commit 87cf95c

Please sign in to comment.
You can’t perform that action at this time.