no more jquery in popup

pull/2/head
gorhill 10 years ago
parent f676a745c3
commit 804a5c53e0

@ -74,7 +74,7 @@ body .toolbar button.fa {
body.tScopeGlobal .toolbar button.scopeRel:not(.disabled) { body.tScopeGlobal .toolbar button.scopeRel:not(.disabled) {
color: #000; color: #000;
} }
body.tScopeLocal .toolbar button.scopeRel:not(.disabled) { body.tScopeNarrow .toolbar button.scopeRel:not(.disabled) {
color: #24c; color: #24c;
} }
@ -275,7 +275,7 @@ body #scopeCell + .dropdown-menu {
body.tScopeGlobal #scopeCell { body.tScopeGlobal #scopeCell {
background-color: #000; background-color: #000;
} }
body.tScopeLocal #scopeCell { body.tScopeNarrow #scopeCell {
background-color: #24c; background-color: #24c;
} }

@ -22,19 +22,24 @@
// Helper to deal with the i18n'ing of HTML files. // Helper to deal with the i18n'ing of HTML files.
// jQuery must be present at this point. // jQuery must be present at this point.
$(function() { window.addEventListener('load', function() {
$('[data-i18n]').each(function() { var nodeList = document.querySelectorAll('[data-i18n]');
var me = $(this); var i = nodeList.length;
var key = me.data('i18n'); var node;
me.html(chrome.i18n.getMessage(key)); while ( i-- ) {
}); node = nodeList[i];
node.innerHTML = chrome.i18n.getMessage(node.getAttribute('data-i18n'));
}
// copy text of <h1> if any to document title // copy text of <h1> if any to document title
document.title = $('h1').first().text(); node = document.querySelector('h1');
if ( node !== null ) {
document.title = node.textContent;
}
// Tool tips // Tool tips
$('[data-i18n-tip]').each(function() { nodeList = document.querySelectorAll('[data-i18n-tip]');
var me = $(this); i = nodeList.length;
var key = me.data('i18nTip'); while ( i-- ) {
me.attr('data-tip', chrome.i18n.getMessage(key)); node = nodeList[i];
}); node.setAttribute('data-tip', chrome.i18n.getMessage(node.getAttribute('data-i18n-tip')));
}
}); });

@ -20,6 +20,7 @@
*/ */
/* global µMatrix */ /* global µMatrix */
/* jshint bitwise: false */
/******************************************************************************/ /******************************************************************************/
@ -55,7 +56,7 @@ Matrix.GrayIndirect = Matrix.Gray | Matrix.Indirect;
/******************************************************************************/ /******************************************************************************/
typeBitOffsets = { var typeBitOffsets = {
'*': 0, '*': 0,
'cookie': 2, 'cookie': 2,
'css': 4, 'css': 4,
@ -258,6 +259,7 @@ Matrix.prototype.evaluateCellZXY = function(srcHostname, desHostname, type) {
var rl = this.evaluateCellZ(srcHostname, desHostname, '*'); var rl = this.evaluateCellZ(srcHostname, desHostname, '*');
if ( rl === 1 ) { return Matrix.RedIndirect; } if ( rl === 1 ) { return Matrix.RedIndirect; }
var d = desHostname; var d = desHostname;
var pos;
for (;;) { for (;;) {
pos = d.indexOf('.'); pos = d.indexOf('.');
if ( pos === -1 ) { if ( pos === -1 ) {
@ -328,15 +330,9 @@ Matrix.prototype.desHostnameFromRule = function(rule) {
/******************************************************************************/ /******************************************************************************/
Matrix.prototype.typeFromRule = function(rule) {
return;
};
/******************************************************************************/
Matrix.prototype.extractZRules = function(srcHostname, desHostname, out) { Matrix.prototype.extractZRules = function(srcHostname, desHostname, out) {
var s = srcHostname; var s = srcHostname;
var rule, bitmap; var rule, bitmap, pos;
for (;;) { for (;;) {
rule = s + ' ' + desHostname; rule = s + ' ' + desHostname;
bitmap = this.rules[rule]; bitmap = this.rules[rule];
@ -358,25 +354,6 @@ Matrix.prototype.extractZRules = function(srcHostname, desHostname, out) {
/******************************************************************************/ /******************************************************************************/
Matrix.prototype.extractZYRules = function(srcHostname, desHostname, out) {
var d = srcHostname;
for (;;) {
this.extractZRules(srcHostname, d, out);
pos = d.indexOf('.');
if ( pos !== -1 ) {
d = d.slice(pos + 1);
continue;
}
if ( d !== '*' ) {
d = '*';
continue;
}
break;
}
};
/******************************************************************************/
Matrix.prototype.evaluateCellZXYColor = function(srcHostname, desHostname, type) { Matrix.prototype.evaluateCellZXYColor = function(srcHostname, desHostname, type) {
var v = this.evaluateCellZXY(srcHostname, desHostname, type); var v = this.evaluateCellZXY(srcHostname, desHostname, type);
if ( v === Matrix.RedIndirect ) { if ( v === Matrix.RedIndirect ) {
@ -411,6 +388,7 @@ Matrix.prototype.toggleSwitch = function(srcHostname, newState) {
Matrix.prototype.evaluateSwitch = function(srcHostname) { Matrix.prototype.evaluateSwitch = function(srcHostname) {
var b; var b;
var s = srcHostname; var s = srcHostname;
var pos;
for (;;) { for (;;) {
b = this.switchedOn[s]; b = this.switchedOn[s];
if ( b !== undefined ) { if ( b !== undefined ) {
@ -434,7 +412,7 @@ Matrix.prototype.evaluateSwitch = function(srcHostname) {
Matrix.prototype.extractSwitches = function(srcHostname, out) { Matrix.prototype.extractSwitches = function(srcHostname, out) {
var s = srcHostname; var s = srcHostname;
var v; var v, pos;
for (;;) { for (;;) {
v = this.rules[s]; v = this.rules[s];
if ( v !== undefined ) { if ( v !== undefined ) {

@ -495,17 +495,16 @@ function getCollapseState(domain) {
return getUserSetting('popupCollapseDomains'); return getUserSetting('popupCollapseDomains');
} }
function toggleCollapseState(element) { function toggleCollapseState(elem) {
var el = uDom(element); if ( elem.ancestors('#matHead.collapsible').length > 0 ) {
if ( el.ancestors('#matHead.collapsible').length() > 0 ) { toggleMainCollapseState(elem);
toggleMainCollapseState(el);
} else { } else {
toggleSpecificCollapseState(el); toggleSpecificCollapseState(elem);
} }
} }
function toggleMainCollapseState(element) { function toggleMainCollapseState(uelem) {
var matHead = element.ancestors('#matHead.collapsible').toggleClass('collapsed'); var matHead = uelem.ancestors('#matHead.collapsible').toggleClass('collapsed');
var collapsed = matHead.hasClassName('collapsed'); var collapsed = matHead.hasClassName('collapsed');
uDom('#matList .matSection.collapsible').toggleClass('collapsed', collapsed); uDom('#matList .matSection.collapsible').toggleClass('collapsed', collapsed);
setUserSetting('popupCollapseDomains', collapsed); setUserSetting('popupCollapseDomains', collapsed);
@ -523,10 +522,10 @@ function toggleMainCollapseState(element) {
setUserSetting('popupCollapseSpecificDomains', specificCollapseStates); setUserSetting('popupCollapseSpecificDomains', specificCollapseStates);
} }
function toggleSpecificCollapseState(element) { function toggleSpecificCollapseState(uelem) {
// Remember collapse state forever, but only if it is different // Remember collapse state forever, but only if it is different
// from main collapse switch. // from main collapse switch.
var section = element.ancestors('.matSection.collapsible').toggleClass('collapsed'); var section = uelem.ancestors('.matSection.collapsible').toggleClass('collapsed');
var domain = section.prop('domain'); var domain = section.prop('domain');
var collapsed = section.hasClassName('collapsed'); var collapsed = section.hasClassName('collapsed');
var mainCollapseState = getUserSetting('popupCollapseDomains'); var mainCollapseState = getUserSetting('popupCollapseDomains');
@ -546,13 +545,12 @@ function toggleSpecificCollapseState(element) {
// Color changes when rules change // Color changes when rules change
function updateMatrixColors() { function updateMatrixColors() {
var cells = $('.matrix .matRow.rw > .matCell'); var cells = uDom('.matrix .matRow.rw > .matCell').removeClass();
var i = cells.length; var i = cells.length;
var cell; var cell;
while ( i-- ) { while ( i-- ) {
cell = $(cells[i]); cell = cells.node(i);
cell.removeClass() cell.className = 'matCell ' + getCellClass(cell.hostname, cell.reqType);
.addClass('matCell ' + getCellClass(cell.prop('hostname'), cell.prop('reqType')));
} }
} }
@ -573,17 +571,17 @@ function updateMatrixCounts() {
// - It is not part of group 3 (blacklisted hostnames) // - It is not part of group 3 (blacklisted hostnames)
function updateMatrixBehavior() { function updateMatrixBehavior() {
matrixList = matrixList || $('#matList'); matrixList = matrixList || uDom('#matList');
var sections = matrixList.find('.matSection'); var sections = matrixList.descendants('.matSection');
var i = sections.length; var i = sections.length;
var section, subdomainRows, j, subdomainRow; var section, subdomainRows, j, subdomainRow;
while ( i-- ) { while ( i-- ) {
section = $(sections[i]); section = sections.unode(i);
subdomainRows = section.children('.l2:not(.g3)'); subdomainRows = section.descendants('.l2:not(.g3)');
j = subdomainRows.length; j = subdomainRows.length;
while ( j-- ) { while ( j-- ) {
subdomainRow = $(subdomainRows[j]); subdomainRow = subdomainRows.unode(j);
subdomainRow.toggleClass('collapsible', subdomainRow.children('.gd,.rd').length === 0); subdomainRow.toggleClass('collapsible', subdomainRow.descendants('.gd,.rd').length === 0);
} }
section.toggleClass('collapsible', subdomainRows.filter('.collapsible').length > 0); section.toggleClass('collapsible', subdomainRows.filter('.collapsible').length > 0);
} }
@ -596,7 +594,7 @@ function updateMatrixBehavior() {
function handleFilter(button, leaning) { function handleFilter(button, leaning) {
var µm = µMatrix; var µm = µMatrix;
// our parent cell knows who we are // our parent cell knows who we are
var cell = button.closest('div.matCell'); var cell = button.ancestors('div.matCell');
var type = cell.prop('reqType'); var type = cell.prop('reqType');
var hostname = cell.prop('hostname'); var hostname = cell.prop('hostname');
var nextAction = getNextAction(hostname, type, leaning); var nextAction = getNextAction(hostname, type, leaning);
@ -676,7 +674,7 @@ function getTemporaryRuleset() {
if ( permanentSwitches.hasOwnProperty(k) === false ) { if ( permanentSwitches.hasOwnProperty(k) === false ) {
continue; continue;
} }
if ( temporarySwitches[rule] === undefined ) { if ( temporarySwitches[k] === undefined ) {
ruleset.switchesToRemove.push(k); ruleset.switchesToRemove.push(k);
} }
} }
@ -696,15 +694,15 @@ var matrixRowTemplate = null;
var matrixList = null; var matrixList = null;
var startMatrixUpdate = function() { var startMatrixUpdate = function() {
matrixList = matrixList || $('#matList'); matrixList = matrixList || uDom('#matList');
matrixList.detach(); matrixList.detach();
var rows = matrixList.find('.matRow'); var rows = matrixList.descendants('.matRow');
rows.detach(); rows.detach();
matrixRowPool = matrixRowPool.concat(rows.toArray()); matrixRowPool = matrixRowPool.concat(rows.toArray());
var sections = matrixList.find('.matSection'); var sections = matrixList.descendants('.matSection');
sections.detach(); sections.detach();
matrixSectionPool = matrixSectionPool.concat(sections.toArray()); matrixSectionPool = matrixSectionPool.concat(sections.toArray());
var groups = matrixList.find('.matGroup'); var groups = matrixList.descendants('.matGroup');
groups.detach(); groups.detach();
matrixGroupPool = matrixGroupPool.concat(groups.toArray()); matrixGroupPool = matrixGroupPool.concat(groups.toArray());
}; };
@ -720,36 +718,36 @@ var endMatrixUpdate = function() {
} }
updateMatrixBehavior(); updateMatrixBehavior();
matrixList.css('display', ''); matrixList.css('display', '');
matrixList.appendTo($('.paneContent')); matrixList.appendTo('.paneContent');
}; };
var createMatrixGroup = function() { var createMatrixGroup = function() {
var group = matrixGroupPool.pop(); var group = matrixGroupPool.pop();
if ( group ) { if ( group ) {
return $(group).removeClass().addClass('matGroup'); return uDom(group).removeClass().addClass('matGroup');
} }
return $('<div>').addClass('matGroup'); return uDom('<div>').addClass('matGroup');
}; };
var createMatrixSection = function() { var createMatrixSection = function() {
var section = matrixSectionPool.pop(); var section = matrixSectionPool.pop();
if ( section ) { if ( section ) {
return $(section).removeClass().addClass('matSection'); return uDom(section).removeClass().addClass('matSection');
} }
return $('<div>').addClass('matSection'); return uDom('<div>').addClass('matSection');
}; };
var createMatrixRow = function() { var createMatrixRow = function() {
var row = matrixRowPool.pop(); var row = matrixRowPool.pop();
if ( row ) { if ( row ) {
row.style.visibility = ''; row.style.visibility = '';
row = $(row); row = uDom(row);
row.children('.matCell').removeClass().addClass('matCell'); row.descendants('.matCell').removeClass().addClass('matCell');
row.removeClass().addClass('matRow'); row.removeClass().addClass('matRow');
return row; return row;
} }
if ( matrixRowTemplate === null ) { if ( matrixRowTemplate === null ) {
matrixRowTemplate = $('#templates .matRow'); matrixRowTemplate = uDom('#templates .matRow');
} }
return matrixRowTemplate.clone(); return matrixRowTemplate.clone();
}; };
@ -759,7 +757,7 @@ var createMatrixRow = function() {
function renderMatrixHeaderRow() { function renderMatrixHeaderRow() {
var matHead = uDom('#matHead.collapsible'); var matHead = uDom('#matHead.collapsible');
matHead.toggleClass('collapsed', getUserSetting('popupCollapseDomains')); matHead.toggleClass('collapsed', getUserSetting('popupCollapseDomains'));
var cells = matHead.find('.matCell'); var cells = matHead.descendants('.matCell');
uDom(cells.node(0)) uDom(cells.node(0))
.prop('reqType', '*') .prop('reqType', '*')
.prop('hostname', '*') .prop('hostname', '*')
@ -845,38 +843,38 @@ function renderMatrixCellType(cell, hostname, type, stats) {
} }
function renderMatrixCellTypes(cells, hostname, stats) { function renderMatrixCellTypes(cells, hostname, stats) {
renderMatrixCellType(cells[1], hostname, 'cookie', stats.cookie); renderMatrixCellType(cells.unode(1), hostname, 'cookie', stats.cookie);
renderMatrixCellType(cells[2], hostname, 'css', stats.css); renderMatrixCellType(cells.unode(2), hostname, 'css', stats.css);
renderMatrixCellType(cells[3], hostname, 'image', stats.image); renderMatrixCellType(cells.unode(3), hostname, 'image', stats.image);
renderMatrixCellType(cells[4], hostname, 'plugin', stats.plugin); renderMatrixCellType(cells.unode(4), hostname, 'plugin', stats.plugin);
renderMatrixCellType(cells[5], hostname, 'script', stats.script); renderMatrixCellType(cells.unode(5), hostname, 'script', stats.script);
renderMatrixCellType(cells[6], hostname, 'xhr', stats.xhr); renderMatrixCellType(cells.unode(6), hostname, 'xhr', stats.xhr);
renderMatrixCellType(cells[7], hostname, 'frame', stats.frame); renderMatrixCellType(cells.unode(7), hostname, 'frame', stats.frame);
renderMatrixCellType(cells[8], hostname, 'other', stats.other); renderMatrixCellType(cells.unode(8), hostname, 'other', stats.other);
} }
/******************************************************************************/ /******************************************************************************/
function makeMatrixRowDomain(domain) { function makeMatrixRowDomain(domain) {
var matrixRow = createMatrixRow().addClass('rw'); var matrixRow = createMatrixRow().addClass('rw');
var cells = matrixRow.children('.matCell'); var cells = matrixRow.descendants('.matCell');
renderMatrixCellDomain(cells[0], domain); renderMatrixCellDomain(cells.node(0), domain);
renderMatrixCellTypes(cells, domain, HTTPSBPopup.matrixStats[domain].types); renderMatrixCellTypes(cells, domain, HTTPSBPopup.matrixStats[domain].types);
return matrixRow; return matrixRow;
} }
function makeMatrixRowSubdomain(domain, subdomain) { function makeMatrixRowSubdomain(domain, subdomain) {
var matrixRow = createMatrixRow().addClass('rw'); var matrixRow = createMatrixRow().addClass('rw');
var cells = matrixRow.children('.matCell'); var cells = matrixRow.descendants('.matCell');
renderMatrixCellSubdomain(cells[0], domain, subdomain); renderMatrixCellSubdomain(cells.node(0), domain, subdomain);
renderMatrixCellTypes(cells, subdomain, HTTPSBPopup.matrixStats[subdomain].types); renderMatrixCellTypes(cells, subdomain, HTTPSBPopup.matrixStats[subdomain].types);
return matrixRow; return matrixRow;
} }
function makeMatrixMetaRowDomain(domain, stats) { function makeMatrixMetaRowDomain(domain, stats) {
var matrixRow = createMatrixRow().addClass('rw'); var matrixRow = createMatrixRow().addClass('rw');
var cells = matrixRow.children('.matCell'); var cells = matrixRow.descendants('.matCell');
renderMatrixMetaCellDomain(cells[0], domain); renderMatrixMetaCellDomain(cells.node(0), domain);
renderMatrixCellTypes(cells, domain, stats); renderMatrixCellTypes(cells, domain, stats);
return matrixRow; return matrixRow;
} }
@ -893,11 +891,9 @@ function renderMatrixMetaCellType(cell, count) {
function makeMatrixMetaRow(stats) { function makeMatrixMetaRow(stats) {
var typeStats = stats.types; var typeStats = stats.types;
var matrixRow = uDom(createMatrixRow()[0]).addClass('ro'); var matrixRow = createMatrixRow().unode(0).addClass('ro');
var cells = matrixRow.find('.matCell'); var cells = matrixRow.descendants('.matCell');
var contents = uDom(cells.node(0)) var contents = cells.unode(0).addClass('rd').contents();
.addClass('matCell rd')
.contents();
contents.node(0).textContent = ' '; contents.node(0).textContent = ' ';
contents.node(1).textContent = '\u202A' + typeStats['*'].count + ' blacklisted hostname(s)'; contents.node(1).textContent = '\u202A' + typeStats['*'].count + ' blacklisted hostname(s)';
renderMatrixMetaCellType(cells.node(1), typeStats.cookie.count); renderMatrixMetaCellType(cells.node(1), typeStats.cookie.count);
@ -908,7 +904,7 @@ function makeMatrixMetaRow(stats) {
renderMatrixMetaCellType(cells.node(6), typeStats.xhr.count); renderMatrixMetaCellType(cells.node(6), typeStats.xhr.count);
renderMatrixMetaCellType(cells.node(7), typeStats.frame.count); renderMatrixMetaCellType(cells.node(7), typeStats.frame.count);
renderMatrixMetaCellType(cells.node(8), typeStats.other.count); renderMatrixMetaCellType(cells.node(8), typeStats.other.count);
return $(matrixRow.node(0)); return matrixRow;
} }
/******************************************************************************/ /******************************************************************************/
@ -1204,7 +1200,7 @@ function initMenuEnvironment() {
var cell, key, text; var cell, key, text;
while ( i-- ) { while ( i-- ) {
key = keys[i]; key = keys[i];
cell = $('#matHead .matCell[data-filter-type="'+ key +'"]'); cell = uDom('#matHead .matCell[data-filter-type="'+ key +'"]');
text = chrome.i18n.getMessage(key + 'PrettyName'); text = chrome.i18n.getMessage(key + 'PrettyName');
cell.text(text); cell.text(text);
prettyNames[key] = text; prettyNames[key] = text;
@ -1242,19 +1238,14 @@ function createSiteScope() {
dropDownMenuHide(); dropDownMenuHide();
} }
function getClassSuffixFromScopeKey(scopeKey) { function getClassFromTargetScope() {
if ( scopeKey === '*' ) { if ( targetScope === '*' ) {
return 'ScopeGlobal'; return 'tScopeGlobal';
} }
return 'ScopeLocal'; if ( targetScope === targetPageDomain ) {
} return 'tScopeNarrow';
}
function getClassFromTemporaryScopeKey(scopeKey) { return 'tScopeNarrow';
return 't' + getClassSuffixFromScopeKey(scopeKey);
}
function getClassFromPermanentScopeKey(scopeKey) {
return 'p' + getClassSuffixFromScopeKey(scopeKey);
} }
function initScopeCell() { function initScopeCell() {
@ -1264,21 +1255,19 @@ function initScopeCell() {
return; return;
} }
// Fill in the scope menu entries // Fill in the scope menu entries
var µm = µMatrix;
if ( targetPageDomain === '' || targetPageDomain === targetPageHostname ) { if ( targetPageDomain === '' || targetPageDomain === targetPageHostname ) {
$('#scopeKeyDomain').css('display', 'none'); uDom('#scopeKeyDomain').css('display', 'none');
} else { } else {
$('#scopeKeyDomain').text(targetPageDomain); uDom('#scopeKeyDomain').text(targetPageDomain);
} }
$('#scopeKeySite').text(targetPageHostname); uDom('#scopeKeySite').text(targetPageHostname);
updateScopeCell(); updateScopeCell();
} }
function updateScopeCell() { function updateScopeCell() {
var µm = µMatrix;
uDom('body') uDom('body')
.removeClass('tScopeGlobal tScopeLocal tScopeSite') .removeClass('tScopeGlobal tScopeNarrow')
.addClass(getClassFromTemporaryScopeKey(targetScope)) .addClass(getClassFromTargetScope());
uDom('#scopeCell').text(targetScope.replace('*', '\u2217')); uDom('#scopeCell').text(targetScope.replace('*', '\u2217'));
} }
@ -1289,11 +1278,11 @@ function updateMtxbutton() {
var masterSwitch = µm.getTemporaryMtxFiltering(targetScope); var masterSwitch = µm.getTemporaryMtxFiltering(targetScope);
var pageStats = getPageStats(); var pageStats = getPageStats();
var count = pageStats ? pageStats.requestStats.blocked.all : ''; var count = pageStats ? pageStats.requestStats.blocked.all : '';
var button = $('#buttonMtxFiltering'); var button = uDom('#buttonMtxFiltering');
button.toggleClass('disabled', !masterSwitch); button.toggleClass('disabled', !masterSwitch);
button.children('span.badge').text(µm.formatCount(count)); button.descendants('span.badge').text(µm.formatCount(count));
button.attr('data-tip', button.data('tip').replace('{{count}}', count)); button.attr('data-tip', button.attr('data-tip').replace('{{count}}', count));
$('body').toggleClass('powerOff', !masterSwitch); uDom('body').toggleClass('powerOff', !masterSwitch);
} }
function toggleMtxFiltering() { function toggleMtxFiltering() {
@ -1309,12 +1298,12 @@ function toggleMtxFiltering() {
function updatePersistButton() { function updatePersistButton() {
var ruleset = getTemporaryRuleset(); var ruleset = getTemporaryRuleset();
var button = $('#buttonPersist'); var button = uDom('#buttonPersist');
button.contents() button.contents()
.filter(function(){return this.nodeType===3;}) .filter(function(){return this.nodeType===3;})
.first()[0] .first()
.textContent = ruleset.count > 0 ? '\uf13e' : '\uf023'; .text(ruleset.count > 0 ? '\uf13e' : '\uf023');
button.children('span.badge').text(ruleset.count > 0 ? ruleset.count : ''); button.descendants('span.badge').text(ruleset.count > 0 ? ruleset.count : '');
var disabled = ruleset.count === 0; var disabled = ruleset.count === 0;
button.toggleClass('disabled', disabled); button.toggleClass('disabled', disabled);
uDom('#buttonRevertScope').toggleClass('disabled', disabled); uDom('#buttonRevertScope').toggleClass('disabled', disabled);
@ -1405,7 +1394,7 @@ function gotoExternalURL() {
/******************************************************************************/ /******************************************************************************/
function dropDownMenuShow() { function dropDownMenuShow() {
$(this).next('.dropdown-menu').addClass('show'); uDom(this).next('.dropdown-menu').addClass('show');
} }
function dropDownMenuHide() { function dropDownMenuHide() {
@ -1443,8 +1432,8 @@ var bindToTab = function(tabs) {
// After popup menu is built, check whether there is a non-empty matrix // After popup menu is built, check whether there is a non-empty matrix
if ( !targetPageURL ) { if ( !targetPageURL ) {
$('#matHead').remove(); uDom('#matHead').remove();
$('#toolbarLeft').remove(); uDom('#toolbarLeft').remove();
// https://github.com/gorhill/httpswitchboard/issues/191 // https://github.com/gorhill/httpswitchboard/issues/191
uDom('#noNetTrafficPrompt').text(chrome.i18n.getMessage('matrixNoNetTrafficPrompt')); uDom('#noNetTrafficPrompt').text(chrome.i18n.getMessage('matrixNoNetTrafficPrompt'));
@ -1456,55 +1445,50 @@ var bindToTab = function(tabs) {
// Make menu only when popup html is fully loaded // Make menu only when popup html is fully loaded
$(function() { uDom.onLoad(function() {
chrome.tabs.query({ currentWindow: true, active: true }, bindToTab); chrome.tabs.query({ currentWindow: true, active: true }, bindToTab);
// Below is UI stuff which is not key to make the menu, so this can // Below is UI stuff which is not key to make the menu, so this can
// be done without having to wait for a tab to be bound to the menu. // be done without having to wait for a tab to be bound to the menu.
var popup = HTTPSBPopup;
// Matrix appearance // Matrix appearance
$('body').css('font-size', getUserSetting('displayTextSize')); uDom('body').css('font-size', getUserSetting('displayTextSize'));
$('body').toggleClass('colorblind', getUserSetting('colorBlindFriendly') === true); uDom('body').toggleClass('colorblind', getUserSetting('colorBlindFriendly') === true);
// We reuse for all cells the one and only cell hotspots. // We reuse for all cells the one and only cell hotspots.
matrixCellHotspots = $('#cellHotspots').detach(); uDom('#whitelist').on('click', function() {
$('#whitelist', matrixCellHotspots) handleWhitelistFilter(uDom(this));
.on('click', function() {
handleWhitelistFilter($(this));
return false; return false;
}); });
$('#blacklist', matrixCellHotspots) uDom('#blacklist').on('click', function() {
.on('click', function() { handleBlacklistFilter(uDom(this));
handleBlacklistFilter($(this));
return false; return false;
}); });
$('#domainOnly', matrixCellHotspots) uDom('#domainOnly').on('click', function() {
.on('click', function() { toggleCollapseState(uDom(this));
toggleCollapseState(this);
return false; return false;
}); });
$('body') matrixCellHotspots = uDom('#cellHotspots').detach();
uDom('body')
.on('mouseenter', '.matCell', mouseenterMatrixCellHandler) .on('mouseenter', '.matCell', mouseenterMatrixCellHandler)
.on('mouseleave', '.matCell', mouseleaveMatrixCellHandler); .on('mouseleave', '.matCell', mouseleaveMatrixCellHandler);
$('#scopeKeyGlobal').on('click', createGlobalScope); uDom('#scopeKeyGlobal').on('click', createGlobalScope);
$('#scopeKeyDomain').on('click', createDomainScope); uDom('#scopeKeyDomain').on('click', createDomainScope);
$('#scopeKeySite').on('click', createSiteScope); uDom('#scopeKeySite').on('click', createSiteScope);
$('#buttonMtxFiltering').on('click', toggleMtxFiltering); uDom('#buttonMtxFiltering').on('click', toggleMtxFiltering);
$('#buttonPersist').on('click', persistScope); uDom('#buttonPersist').on('click', persistScope);
$('#buttonRevertScope').on('click', revertScope); uDom('#buttonRevertScope').on('click', revertScope);
$('#buttonRevertAll').on('click', revertAll); uDom('#buttonRevertAll').on('click', revertAll);
$('#buttonReload').on('click', buttonReloadHandler); uDom('#buttonReload').on('click', buttonReloadHandler);
$('.extensionURL').on('click', gotoExtensionURL); uDom('.extensionURL').on('click', gotoExtensionURL);
$('.externalURL').on('click', gotoExternalURL); uDom('.externalURL').on('click', gotoExternalURL);
$('body').on('click', '.dropdown-menu-button', dropDownMenuShow); uDom('body').on('click', '.dropdown-menu-button', dropDownMenuShow);
$('body').on('click', '.dropdown-menu-capture', dropDownMenuHide); uDom('body').on('click', '.dropdown-menu-capture', dropDownMenuHide);
$('#matList').on('click', '.g3Meta', function() { uDom('#matList').on('click', '.g3Meta', function() {
var collapsed = uDom(this) var collapsed = uDom(this)
.toggleClass('g3Collapsed') .toggleClass('g3Collapsed')
.hasClass('g3Collapsed'); .hasClass('g3Collapsed');

@ -38,12 +38,15 @@ var DOMList = function() {
/******************************************************************************/ /******************************************************************************/
var addNodeToList = function(list, node) { Object.defineProperty(
if ( node ) { DOMList.prototype,
list.nodes.push(node); 'length',
{
get: function() {
return this.nodes.length;
} }
return list; }
}; );
/******************************************************************************/ /******************************************************************************/
@ -78,6 +81,15 @@ DOMListFactory.onLoad = function(callback) {
/******************************************************************************/ /******************************************************************************/
var addNodeToList = function(list, node) {
if ( node ) {
list.nodes.push(node);
}
return list;
};
/******************************************************************************/
var addNodeListToList = function(list, nodelist) { var addNodeListToList = function(list, nodelist) {
if ( nodelist ) { if ( nodelist ) {
var n = nodelist.length; var n = nodelist.length;
@ -114,6 +126,8 @@ var pTagOfChildTag = {
'option': 'select' 'option': 'select'
}; };
// TODO: documentFragment
var addHTMLToList = function(list, html) { var addHTMLToList = function(list, html) {
var matches = html.match(/^<([a-z]+)/); var matches = html.match(/^<([a-z]+)/);
if ( !matches || matches.length !== 2 ) { if ( !matches || matches.length !== 2 ) {
@ -134,6 +148,12 @@ var addHTMLToList = function(list, html) {
/******************************************************************************/ /******************************************************************************/
var isChildOf = function(child, parent) {
return child !== null && parent !== null && child.parentNode === parent;
};
/******************************************************************************/
var isDescendantOf = function(descendant, ancestor) { var isDescendantOf = function(descendant, ancestor) {
while ( descendant.parentNode !== null ) { while ( descendant.parentNode !== null ) {
if ( descendant.parentNode === ancestor ) { if ( descendant.parentNode === ancestor ) {
@ -146,6 +166,34 @@ var isDescendantOf = function(descendant, ancestor) {
/******************************************************************************/ /******************************************************************************/
var doesMatchSelector = function(node, selector) {
if ( !node ) {
return false;
}
if ( node.nodeType !== 1 ) {
return false;
}
if ( selector === undefined ) {
return true;
}
var parentNode = node.parentNode;
if ( !parentNode || !parentNode.setAttribute ) {
return false;
}
var doesMatch = false;
parentNode.setAttribute('uDom-32kXc6xEZA7o73AMB8vLbLct1RZOkeoO', '');
var grandpaNode = parentNode.parentNode || document;
var nl = grandpaNode.querySelectorAll('[uDom-32kXc6xEZA7o73AMB8vLbLct1RZOkeoO] > ' + selector);
var i = nl.length;
while ( doesMatch === false && i-- ) {
doesMatch = nl[i] === node;
}
parentNode.removeAttribute('uDom-32kXc6xEZA7o73AMB8vLbLct1RZOkeoO');
return doesMatch;
};
/******************************************************************************/
DOMList.prototype.length = function() { DOMList.prototype.length = function() {
return this.nodes.length; return this.nodes.length;
}; };
@ -156,6 +204,16 @@ DOMList.prototype.node = function(i) {
return this.nodes[i]; return this.nodes[i];
}; };
DOMList.prototype.unode = function(i) {
return addNodeToList(new DOMList(), this.nodes[i]);
};
/******************************************************************************/
DOMList.prototype.toArray = function() {
return this.nodes.slice();
};
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.subset = function(i, l) { DOMList.prototype.subset = function(i, l) {
@ -176,6 +234,29 @@ DOMList.prototype.first = function() {
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.next = function(selector) {
var r = new DOMList();
var n = this.nodes.length;
var node;
for ( var i = 0; i < n; i++ ) {
node = this.nodes[i];
while ( node.nextSibling !== null ) {
node = node.nextSibling;
if ( node.nodeType !== 1 ) {
continue;
}
if ( doesMatchSelector(node, selector) === false ) {
continue;
}
addNodeToList(r, node);
break;
}
}
return r;
};
/******************************************************************************/
DOMList.prototype.parent = function() { DOMList.prototype.parent = function() {
var r = new DOMList(); var r = new DOMList();
if ( this.nodes.length ) { if ( this.nodes.length ) {
@ -186,29 +267,54 @@ DOMList.prototype.parent = function() {
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.ancestors = function(selector) { DOMList.prototype.filter = function(filter) {
var r = new DOMList(); var r = new DOMList();
if ( this.nodes.length === 0 ) { var filterFunc;
return r; if ( typeof filter === 'string' ) {
filterFunc = function() {
return doesMatchSelector(this, filter);
};
} else if ( typeof filter === 'function' ) {
filterFunc = filter;
} else {
filterFunc = function(){
return true;
};
} }
var candidates = document.querySelectorAll(selector); var n = this.nodes.length;
var i = candidates.length; var node;
var j, candidate; for ( var i = 0; i < n; i++ ) {
while ( i-- ) { node = this.nodes[i];
candidate = candidates[i]; if ( filterFunc.apply(node) ) {
j = this.nodes.length; addNodeToList(r, node);
while ( j-- ) {
if ( isDescendantOf(this.nodes[j], candidate) ) {
addNodeToList(r, candidate);
} }
} }
return r;
};
/******************************************************************************/
// TODO: Avoid possible duplicates
DOMList.prototype.ancestors = function(selector) {
var r = new DOMList();
var n = this.nodes.length;
var node;
for ( var i = 0; i < n; i++ ) {
node = this.nodes[i].parentNode;
while ( node ) {
if ( doesMatchSelector(node, selector) ) {
addNodeToList(r, node);
}
node = node.parentNode;
}
} }
return r; return r;
}; };
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.find = function(selector) { DOMList.prototype.descendants = function(selector) {
var r = new DOMList(); var r = new DOMList();
var n = this.nodes.length; var n = this.nodes.length;
var nl; var nl;
@ -248,17 +354,19 @@ DOMList.prototype.forEach = function(callback) {
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.remove = function() { DOMList.prototype.remove = function() {
var n = this.nodes.length; var cn, p;
var c, p; var i = this.nodes.length;
for ( var i = 0; i < n; i++ ) { while ( i-- ) {
c = this.nodes[i]; cn = this.nodes[i];
if ( p = c.parentNode ) { if ( p = cn.parentNode ) {
p.removeChild(c); p.removeChild(cn);
} }
} }
return this; return this;
}; };
DOMList.prototype.detach = DOMList.prototype.remove;
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.empty = function() { DOMList.prototype.empty = function() {
@ -304,13 +412,11 @@ DOMList.prototype.prepend = function(selector, context) {
/******************************************************************************/ /******************************************************************************/
DOMList.prototype.appendTo = function(selector, context) { DOMList.prototype.appendTo = function(selector, context) {
var p = DOMListFactory(selector, context); var p = selector instanceof DOMListFactory ? selector : DOMListFactory(selector, context);
if ( p.length ) { var n = p.length;
var n = this.nodes.length;
for ( var i = 0; i < n; i++ ) { for ( var i = 0; i < n; i++ ) {
p.nodes[0].appendChild(this.nodes[i]); p.nodes[0].appendChild(this.nodes[i]);
} }
}
return this; return this;
}; };
@ -491,22 +597,10 @@ DOMList.prototype.toggleClass = function(className, targetState) {
/******************************************************************************/ /******************************************************************************/
var makeEventHandler = function(context, selector, callback) { var makeEventHandler = function(selector, callback) {
return function(event) { return function(event) {
var candidates = context.querySelectorAll(selector); if ( doesMatchSelector(event.target, selector) ) {
if ( !candidates.length ) { callback.call(event.target, event);
return;
}
var node = event.target;
var i;
while ( node && node !== context ) {
i = candidates.length;
while ( i-- ) {
if ( candidates[i] === node ) {
return callback.call(node, event);
}
}
node = node.parentNode;
} }
}; };
}; };
@ -519,7 +613,7 @@ DOMList.prototype.on = function(etype, selector, callback) {
var i = this.nodes.length; var i = this.nodes.length;
while ( i-- ) { while ( i-- ) {
if ( selector !== undefined ) { if ( selector !== undefined ) {
this.nodes[i].addEventListener(etype, makeEventHandler(this.nodes[i], selector, callback), true); this.nodes[i].addEventListener(etype, makeEventHandler(selector, callback), true);
} else { } else {
this.nodes[i].addEventListener(etype, callback); this.nodes[i].addEventListener(etype, callback);
} }

@ -72,7 +72,6 @@
<div id="noNetTrafficPrompt" style="display:none;text-align:center;font-size:large"></div> <div id="noNetTrafficPrompt" style="display:none;text-align:center;font-size:large"></div>
</div> </div>
<script src="lib/jquery-2.min.js"></script>
<script src="lib/punycode.min.js"></script> <script src="lib/punycode.min.js"></script>
<script src="js/udom.js"></script> <script src="js/udom.js"></script>
<script src="js/i18n.js"></script> <script src="js/i18n.js"></script>

Loading…
Cancel
Save