/******************************************************************************* µBlock - a Chromium browser extension to block requests. Copyright (C) 2014 Raymond Hill This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program. If not, see {http://www.gnu.org/licenses/}. Home: https://github.com/gorhill/uBlock */ /* global vAPI, uDom */ /******************************************************************************/ (function() { 'use strict'; /******************************************************************************/ var stats; var dynaTypes = [ 'image', 'inline-script', '1p-script', '3p-script', '3p-frame' ]; var popupHeight; var reIP = /^\d+(?:\.\d+){1,3}$/; var reSrcHostnameFromResult = /^d[abn]:([^ ]+) ([^ ]+)/; var touchedDomains = {}; var scopeToSrcHostnameMap = { '/': '*', '.': '' }; var threePlus = '+++'; var threeMinus = '\u2012\u2012\u2012'; var sixSpace = '\u2007\u2007\u2007\u2007\u2007\u2007'; /******************************************************************************/ // https://github.com/gorhill/httpswitchboard/issues/345 var messager = vAPI.messaging.channel('popup.js'); /******************************************************************************/ var cachePopupData = function(data) { if ( data ) { stats = data; scopeToSrcHostnameMap['.'] = data.pageHostname || ''; } return data; }; /******************************************************************************/ var formatNumber = function(count) { if ( typeof count !== 'number' ) { return ''; } return count.toLocaleString(); }; /******************************************************************************/ var rulekeyCompare = function(a, b) { var ha = a.slice(2, a.indexOf(' ', 2)); if ( !reIP.test(ha) ) { ha = ha.split('.').reverse().join('.').replace(reRulekeyCompareNoise, '~'); } var hb = b.slice(2, b.indexOf(' ', 2)); if ( !reIP.test(hb) ) { hb = hb.split('.').reverse().join('.').replace(reRulekeyCompareNoise, '~'); } return ha.localeCompare(hb); }; var reRulekeyCompareNoise = /[^a-z0-9.]/g; /******************************************************************************/ var addDynamicFilterRow = function(des) { var row = uDom('#templates > div:nth-of-type(1)').clone(); row.descendants('[data-des]').attr('data-des', des); row.descendants('div > span:nth-of-type(1)').text(des); var hnDetails = stats.hostnameDict[des] || {}; var isDomain = des === hnDetails.domain; row.toggleClass('isDomain', isDomain); if ( hnDetails.allowCount !== 0 ) { touchedDomains[hnDetails.domain] = true; } row.appendTo('#dynamicFilteringContainer'); // 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('body > div:nth-of-type(2)').nodeAt(0).offsetHeight; uDom('body > div:nth-of-type(1)').css('height', popupHeight + 'px'); } return row; }; /******************************************************************************/ var syncDynamicFilter = function(scope, des, type, result) { var selector = '#dynamicFilteringContainer span[data-src="' + scope + '"][data-des="' + des + '"][data-type="' + type + '"]'; var cell = uDom(selector); // Create the row? if ( cell.length === 0 ) { cell = addDynamicFilterRow(des).descendants(selector); } var blocked = result.charAt(1) === 'b'; cell.toggleClass('blocked', blocked); // Use dark shade visual cue if the filter is specific to the cell. var ownFilter = false; var matches = reSrcHostnameFromResult.exec(result); if ( matches !== null ) { ownFilter = matches[2] === des && matches[1] === scopeToSrcHostnameMap[scope]; } cell.toggleClass('ownFilter', ownFilter); if ( scope !== '.' || type !== '*' ) { return; } if ( stats.hostnameDict.hasOwnProperty(des) === false ) { return; } var hnDetails = stats.hostnameDict[des]; var aCount = Math.min(Math.ceil(Math.log10(hnDetails.allowCount + 1)), 3); var bCount = Math.min(Math.ceil(Math.log10(hnDetails.blockCount + 1)), 3); cell.text( threePlus.slice(0, aCount) + sixSpace.slice(aCount + bCount) + threeMinus.slice(0, bCount) ); }; /******************************************************************************/ var syncAllDynamicFilters = function() { var hasBlock = false; var rules = stats.dynamicFilterRules; var type, result; var types = dynaTypes; var i = types.length; while ( i-- ) { type = types[i]; syncDynamicFilter('/', '*', type, rules['/ * ' + type] || ''); result = rules['. * ' + type] || ''; if ( result.charAt(1) === 'b' ) { hasBlock = true; } syncDynamicFilter('.', '*', type, result); } // Sort hostnames. First-party hostnames must always appear at the top // of the list. var keys = Object.keys(rules).sort(rulekeyCompare); var key; for ( var i = 0; i < keys.length; i++ ) { key = keys[i]; // Specific-type rules -- they were processed above if ( key.slice(-1) !== '*' ) { continue; } syncDynamicFilter(key.charAt(0), key.slice(2, key.indexOf(' ', 2)), '*', rules[key]); } uDom('body').toggleClass('hasDynamicBlock', hasBlock); uDom('#privacyInfo > b').text(Object.keys(touchedDomains).length); }; /******************************************************************************/ var renderPopup = function(details) { if ( !cachePopupData(details) ) { return; } var hdr = uDom('#version'); hdr.nodes[0].previousSibling.textContent = details.appName; hdr.html(hdr.html() + 'v' + details.appVersion); var isHTTP = /^https?:\/\/[0-9a-z]/.test(stats.pageURL); // Conditions for request log: // - `http` or `https` scheme // - logging of requests enabled uDom('#gotoLog').toggleClass( 'enabled', isHTTP && stats.logRequests ); // Conditions for element picker: // - `http` or `https` scheme uDom('#gotoPick').toggleClass( 'enabled', isHTTP ); var or = vAPI.i18n('popupOr'); var blocked = stats.pageBlockedRequestCount; var total = stats.pageAllowedRequestCount + blocked; var html = []; if ( total === 0 ) { html.push('0'); } else { html.push( formatNumber(blocked), ' ', or, ' ', formatNumber(Math.floor(blocked * 100 / total)), '%' ); } uDom('#page-blocked').html(html.join('')); blocked = stats.globalBlockedRequestCount; total = stats.globalAllowedRequestCount + blocked; html = []; if ( total === 0 ) { html.push('0'); } else { html.push( formatNumber(blocked), ' ', or, ' ', formatNumber(Math.floor(blocked * 100 / total)), '%' ); } syncAllDynamicFilters(); uDom('#total-blocked').html(html.join('')); uDom('#switch .fa').toggleClass('off', stats.pageURL === '' || !stats.netFilteringSwitch); uDom('body').toggleClass('dynamicFilteringEnabled', stats.dynamicFilteringEnabled); }; /******************************************************************************/ var toggleNetFilteringSwitch = function(ev) { if ( !stats || !stats.pageURL ) { return; } messager.send({ what: 'toggleNetFiltering', url: stats.pageURL, scope: ev.ctrlKey || ev.metaKey ? 'page' : '', state: !uDom(this).toggleClass('off').hasClass('off'), tabId: stats.tabId }); }; /******************************************************************************/ var gotoDashboard = function() { messager.send({ what: 'gotoURL', details: { url: 'dashboard.html', select: true, index: -1 } }); }; /******************************************************************************/ var gotoStats = function() { messager.send({ what: 'gotoURL', details: { url: 'dashboard.html?tab=stats&which=' + stats.tabId, select: true, index: -1 } }); }; /******************************************************************************/ var gotoPick = function() { messager.send({ what: 'gotoPick', tabId: stats.tabId }); window.open('','_self').close(); }; /******************************************************************************/ var gotoLink = function(ev) { if (!ev.target.href) { return; } ev.preventDefault(); messager.send({ what: 'gotoURL', details: { url: ev.target.href, select: true, index: -1 } }); }; /******************************************************************************/ var onDynamicFilterClicked = function(ev) { // This can happen on pages where uBlock does not work if ( typeof stats.pageHostname !== 'string' || stats.pageHostname === '' ) { return; } var cell = uDom(ev.target); var scope = cell.attr('data-src') === '/' ? '*' : stats.pageHostname; var onDynamicFilterChanged = function(details) { cachePopupData(details); syncAllDynamicFilters(); }; messager.send({ what: 'toggleDynamicFilter', tabId: stats.tabId, pageHostname: stats.pageHostname, srcHostname: scope, desHostname: cell.attr('data-des'), requestType: cell.attr('data-type'), block: cell.hasClass('blocked') === false }, onDynamicFilterChanged); }; /******************************************************************************/ var toggleDynamicFiltering = function(ev) { var el = uDom('body'); el.toggleClass('dynamicFilteringEnabled'); messager.send({ what: 'userSettings', name: 'dynamicFilteringEnabled', value: el.hasClass('dynamicFilteringEnabled') }); }; /******************************************************************************/ var installEventHandlers = function() { uDom('h1,h2,h3,h4').on('click', gotoDashboard); uDom('#switch .fa').on('click', toggleNetFilteringSwitch); uDom('#gotoLog').on('click', gotoStats); uDom('#gotoPick').on('click', gotoPick); uDom('a[href^=http]').on('click', gotoLink); uDom('#dynamicFilteringToggler').on('click', toggleDynamicFiltering); uDom('#dynamicFilteringContainer').on('click', 'span[data-type]', onDynamicFilterClicked); }; /******************************************************************************/ // Make menu only when popup html is fully loaded uDom.onLoad(function() { messager.send({ what: 'activeTabStats' }, renderPopup); installEventHandlers(); }); /******************************************************************************/ })();