mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-18 17:02:27 +02:00
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.
This commit is contained in:
parent
4ce1796f09
commit
87cf95c04b
@ -208,7 +208,7 @@ const addFirewallRow = function(des) {
|
|||||||
row = uDom('#templates > div:nth-of-type(1)').clone();
|
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 hnDetails = popupData.hostnameDict[des] || {};
|
||||||
const isDomain = des === hnDetails.domain;
|
const isDomain = des === hnDetails.domain;
|
||||||
@ -238,36 +238,45 @@ const addFirewallRow = function(des) {
|
|||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
const updateFirewallCell = function(scope, des, type, rule) {
|
const updateFirewallCell = function(scope, des, type, rule) {
|
||||||
const selector = '#firewallContainer span[data-src="' + scope + '"][data-des="' + des + '"][data-type="' + type + '"]';
|
const row = document.querySelector(
|
||||||
const cells = uDom(selector);
|
`#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; }
|
if ( cells.length === 0 ) { return; }
|
||||||
|
|
||||||
cells.removeClass();
|
|
||||||
if ( rule !== null ) {
|
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.
|
// Use dark shade visual cue if the rule is specific to the cell.
|
||||||
let ownRule = false;
|
if (
|
||||||
if ( rule !== null ) {
|
(rule !== null) &&
|
||||||
ownRule = (rule.des !== '*' || rule.type === type) &&
|
(rule.des !== '*' || rule.type === type) &&
|
||||||
(rule.des === des) &&
|
(rule.des === des) &&
|
||||||
(rule.src === scopeToSrcHostnameMap[scope]);
|
(rule.src === scopeToSrcHostnameMap[scope])
|
||||||
|
|
||||||
|
) {
|
||||||
|
cells.forEach(el => { el.classList.add('ownRule'); });
|
||||||
}
|
}
|
||||||
cells.toggleClass('ownRule', ownRule);
|
|
||||||
|
|
||||||
if ( scope !== '.' || des === '*' ) { return; }
|
if ( scope !== '.' || des === '*' ) { return; }
|
||||||
|
|
||||||
// Remember this may be a cell from a reused row, we need to clear text
|
// Remember this may be a cell from a reused row, we need to clear text
|
||||||
// content if we can't compute request counts.
|
// content if we can't compute request counts.
|
||||||
if ( popupData.hostnameDict.hasOwnProperty(des) === false ) {
|
if ( popupData.hostnameDict.hasOwnProperty(des) === false ) {
|
||||||
cells.removeAttr('data-acount');
|
cells.forEach(el => {
|
||||||
cells.removeAttr('data-acount');
|
el.removeAttribute('data-acount');
|
||||||
|
el.removeAttribute('data-bcount');
|
||||||
|
});
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
const hnDetails = popupData.hostnameDict[des];
|
const hnDetails = popupData.hostnameDict[des];
|
||||||
let cell = cells.nodeAt(0);
|
let cell = cells[0];
|
||||||
if ( hnDetails.allowCount !== 0 ) {
|
if ( hnDetails.allowCount !== 0 ) {
|
||||||
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.allowCount + 1) / Math.LN10), 3));
|
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.allowCount + 1) / Math.LN10), 3));
|
||||||
} else {
|
} else {
|
||||||
@ -283,7 +292,7 @@ const updateFirewallCell = function(scope, des, type, rule) {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
cell = cells.nodeAt(1);
|
cell = cells[1];
|
||||||
if ( hnDetails.totalAllowCount !== 0 ) {
|
if ( hnDetails.totalAllowCount !== 0 ) {
|
||||||
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.totalAllowCount + 1) / Math.LN10), 3));
|
cell.setAttribute('data-acount', Math.min(Math.ceil(Math.log(hnDetails.totalAllowCount + 1) / Math.LN10), 3));
|
||||||
} else {
|
} else {
|
||||||
@ -832,11 +841,12 @@ const setFirewallRule = function(src, des, type, action, persist) {
|
|||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
const unsetFirewallRuleHandler = function(ev) {
|
const unsetFirewallRuleHandler = function(ev) {
|
||||||
const cell = uDom(ev.target);
|
const cell = ev.target;
|
||||||
|
const row = cell.closest('[data-des]');
|
||||||
setFirewallRule(
|
setFirewallRule(
|
||||||
cell.attr('data-src') === '/' ? '*' : popupData.pageHostname,
|
cell.getAttribute('data-src') === '/' ? '*' : popupData.pageHostname,
|
||||||
cell.attr('data-des'),
|
row.getAttribute('data-des'),
|
||||||
cell.attr('data-type'),
|
row.getAttribute('data-type'),
|
||||||
0,
|
0,
|
||||||
ev.ctrlKey || ev.metaKey
|
ev.ctrlKey || ev.metaKey
|
||||||
);
|
);
|
||||||
@ -846,22 +856,22 @@ const unsetFirewallRuleHandler = function(ev) {
|
|||||||
/******************************************************************************/
|
/******************************************************************************/
|
||||||
|
|
||||||
const setFirewallRuleHandler = function(ev) {
|
const setFirewallRuleHandler = function(ev) {
|
||||||
const hotspot = uDom(ev.target);
|
const hotspot = ev.target;
|
||||||
const cell = hotspot.ancestors('[data-src]');
|
const cell = hotspot.closest('[data-src]');
|
||||||
if ( cell.length === 0 ) { return; }
|
if ( cell === null ) { return; }
|
||||||
const hotspotId = hotspot.attr('id');
|
const row = cell.closest('[data-des]');
|
||||||
let action = 0;
|
let action = 0;
|
||||||
if ( hotspotId === 'dynaAllow' ) {
|
if ( hotspot.id === 'dynaAllow' ) {
|
||||||
action = 2;
|
action = 2;
|
||||||
} else if ( hotspotId === 'dynaNoop' ) {
|
} else if ( hotspot.id === 'dynaNoop' ) {
|
||||||
action = 3;
|
action = 3;
|
||||||
} else {
|
} else {
|
||||||
action = 1;
|
action = 1;
|
||||||
}
|
}
|
||||||
setFirewallRule(
|
setFirewallRule(
|
||||||
cell.attr('data-src') === '/' ? '*' : popupData.pageHostname,
|
cell.getAttribute('data-src') === '/' ? '*' : popupData.pageHostname,
|
||||||
cell.attr('data-des'),
|
row.getAttribute('data-des'),
|
||||||
cell.attr('data-type'),
|
row.getAttribute('data-type'),
|
||||||
action,
|
action,
|
||||||
ev.ctrlKey || ev.metaKey
|
ev.ctrlKey || ev.metaKey
|
||||||
);
|
);
|
||||||
|
@ -43,19 +43,19 @@
|
|||||||
</div>
|
</div>
|
||||||
</div><!-- DO NOT REMOVE --><div class="tooltipContainer">
|
</div><!-- DO NOT REMOVE --><div class="tooltipContainer">
|
||||||
<div id="firewallContainer" class="minimized">
|
<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 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><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 data-des="*" data-type="image"><span data-i18n="popupImageRulePrompt"></span><span data-src="/"> </span><span data-src="."> </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 data-des="*" data-type="3p"><span data-i18n="popup3pAnyRulePrompt"></span><span data-src="/"> </span><span data-src="."> </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 data-des="*" data-type="inline-script"><span data-i18n="popupInlineScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </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 data-des="*" data-type="1p-script"><span data-i18n="popup1pScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </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 data-des="*" data-type="3p-script"><span data-i18n="popup3pScriptRulePrompt"></span><span data-src="/"> </span><span data-src="."> </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="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 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>
|
</div>
|
||||||
|
|
||||||
<div id="templates" style="display: none">
|
<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="actionSelector"><span id="dynaAllow"></span><span id="dynaNoop"></span><span id="dynaBlock"></span></div>
|
||||||
<div id="hotspotTip"></div>
|
<div id="hotspotTip"></div>
|
||||||
<div id="tooltip"></div>
|
<div id="tooltip"></div>
|
||||||
|
Loading…
Reference in New Issue
Block a user