From 83fa7a685bf57e72cf126ebefd42b50595856ed9 Mon Sep 17 00:00:00 2001 From: gorhill Date: Fri, 25 Oct 2013 15:14:25 -0200 Subject: [PATCH] This fixes #22 --- js/popup.js | 137 +++++++++++++++++++++++++++++++------------------- manifest.json | 2 +- popup.html | 63 +++++++++++++++++++++-- 3 files changed, 147 insertions(+), 55 deletions(-) diff --git a/js/popup.js b/js/popup.js index f9118b8..a11e84c 100644 --- a/js/popup.js +++ b/js/popup.js @@ -31,6 +31,7 @@ var matrixStats = {}; var matrixHeaderTypes = ['*']; var matrixHeaderPrettyNames = { }; var matrixCellMenu = null; +var matrixCellHotspots = null; var matrixHasRows = false; // useful to know for various housekeeping task /******************************************************************************/ @@ -284,19 +285,24 @@ function getCellClass(domain, type) { } // compute next state -function getNextAction(domain, type) { +function getNextAction(domain, type, leaning) { var entry = matrixStats[domain][type]; var temporaryColor = entry.temporaryColor; // special case: root toggle only between two states if ( type === '*' && domain === '*' ) { return temporaryColor === 'gdt' ? 'blacklist' : 'whitelist'; } + // Lean toward whitelisting? + if ( leaning === 'whitelisting' ) { + if ( temporaryColor === 'rpt' || temporaryColor === 'gpt' ) { + return 'whitelist'; + } + return 'graylist'; + } + // Lean toward blacklisting if ( temporaryColor === 'rpt' || temporaryColor === 'gpt' ) { return 'blacklist'; } - if ( temporaryColor === 'rdt' ) { - return 'whitelist'; - } return 'graylist'; } @@ -324,11 +330,13 @@ function updateMatrixCells() { // handle user interaction with filters -function handleFilter(button) { +function handleFilter(button, leaning) { var background = backgroundPage(); - var type = button.prop('filterType'); - var domain = button.prop('filterDomain'); - var nextAction = getNextAction(domain, type); + // our parent cell knows who we are + var cell = button.closest('div.filter-button'); + var type = cell.prop('filterType'); + var domain = cell.prop('filterDomain'); + var nextAction = getNextAction(domain, type, leaning); if ( nextAction === 'blacklist' ) { background.blacklistTemporarily(type, domain); } else if ( nextAction === 'whitelist' ) { @@ -338,7 +346,15 @@ function handleFilter(button) { } updateMatrixStats(matrixStats); updateMatrixCells(); - handleFilterMessage(button); + handleFilterMessage(button, leaning); +} + +function handleWhitelistFilter(button) { + handleFilter(button, 'whitelisting'); +} + +function handleBlacklistFilter(button) { + handleFilter(button, 'blacklisting'); } /******************************************************************************/ @@ -506,10 +522,11 @@ var mouseOverPrompts = { '.??': 'Click to graylist {{what}} from {{where}}' }; -function handleFilterMessage(button) { - var type = button.prop('filterType'); - var domain = button.prop('filterDomain'); - var nextAction = getNextAction(domain, type); +function handleFilterMessage(hotspot, leaning) { + var cell = hotspot.closest('div.filter-button'); + var type = cell.prop('filterType'); + var domain = cell.prop('filterDomain'); + var nextAction = getNextAction(domain, type, leaning); var action = nextAction === 'whitelist' ? '+' : (nextAction === 'blacklist' ? '-' : '.'); var what = type === '*' ? '*' : '?'; var where = domain === '*' ? '*' : '?'; @@ -519,6 +536,14 @@ function handleFilterMessage(button) { $('#message').html(prompt); } +function handleWhitelistFilterMessage(hotspot) { + handleFilterMessage(hotspot, 'whitelisting'); +} + +function handleBlacklistFilterMessage(hotspot) { + handleFilterMessage(hotspot, 'blacklisting'); +} + /******************************************************************************/ function handlePersistMessage(button) { @@ -539,6 +564,12 @@ function handleUnpersistMessage(button) { /******************************************************************************/ +function blankMessage() { + $('#message').html(formatHeader(pageUrl)); +} + +/******************************************************************************/ + function onMessage(request) { if ( request.what === 'urlStatsChanged' ) { makeMenu(); @@ -570,6 +601,43 @@ function bindToTabHandler(tabs) { // We reuse for all cells the one and only cell menu. matrixCellMenu = $('#cellMenu').detach(); + $('span:nth-of-type(1)', matrixCellMenu).on('click', function() { + handlePersistence($(this)); + return false; + }); + $('span:nth-of-type(2)', matrixCellMenu).on('click', function() { + handleUnpersistence($(this)); + return false; + }); + $('span:nth-of-type(1)', matrixCellMenu).on('mouseenter', function() { + handlePersistMessage($(this)); + return false; + }); + // to display useful message + $('span:nth-of-type(2)', matrixCellMenu).on('mouseenter', function() { + handleUnpersistMessage($(this)); + return false; + }); + + + // We reuse for all cells the one and only cell hotspots. + matrixCellHotspots = $('#cellHotspots').detach(); + $('div:nth-of-type(1)', matrixCellHotspots).on('click', function() { + handleWhitelistFilter($(this)); + return false; + }); + $('div:nth-of-type(2)', matrixCellHotspots).on('click', function() { + handleBlacklistFilter($(this)); + return false; + }); + $('div:nth-of-type(1)', matrixCellHotspots).on('mouseenter', function() { + handleWhitelistFilterMessage($(this)); + return false; + }); + $('div:nth-of-type(2)', matrixCellHotspots).on('mouseenter', function() { + handleBlacklistFilterMessage($(this)); + return false; + }); // To know when to rebuild the matrix // TODO: What if this event is triggered before bindToTabHandler() @@ -593,58 +661,25 @@ function revert() { function initAll() { chrome.tabs.query({currentWindow: true, active: true}, bindToTabHandler); - // to handle filter button - $('body').on('click', '.filter-button', function() { - handleFilter($(this)); - return false; - }); - - // to handle cell menu item - $('body').on('click', '#cellMenu span:nth-of-type(1)', function() { - handlePersistence($(this)); - return false; - }); + // TODO: prevent spurious selection - // to handle cell menu item - $('body').on('click', '#cellMenu span:nth-of-type(2)', function() { - handleUnpersistence($(this)); - return false; - }); - - // to prevent spurious selection -// doesn't work... -// $('body').delegate('.filter-button', 'dblclick', function(event) { -// event.preventDefault(); -// }); - - // to display useful message + // to attach widgets to matrix cell $('body').on('mouseenter', '.filter-button', function() { + matrixCellHotspots.prependTo(this); matrixCellMenu.prependTo(this); - handleFilterMessage($(this)); - }); - - // to display useful message - $('body').on('mouseenter', '#cellMenu span:nth-of-type(1)', function() { - handlePersistMessage($(this)); - }); - - // to display useful message - $('body').on('mouseenter', '#cellMenu span:nth-of-type(2)', function() { - handleUnpersistMessage($(this)); }); // to blank message $('body').on('mouseleave', '.filter-button', function() { + matrixCellHotspots.detach(); matrixCellMenu.detach(); - $('#message').html(formatHeader(pageUrl)); + blankMessage(); }); $('#button-revert').on('click', revert); - $('#button-info').on('click', function() { chrome.runtime.sendMessage({ what: 'gotoExtensionUrl', url: 'info.html' }); }); - $('#button-settings').on('click', function() { chrome.runtime.sendMessage({ what: 'gotoExtensionUrl', url: 'settings.html' }); }); diff --git a/manifest.json b/manifest.json index 69f5e62..54ddbee 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 2, "name": "HTTP Switchboard", - "version": "0.3.5", + "version": "0.3.6", "description": "Point & click to forbid/allow any class of requests made by your browser. Use it to block scripts, iframes, ads, facebook, etc.", "icons": { "128": "icon_128.png" diff --git a/popup.html b/popup.html index a0bf8f7..4df4f12 100644 --- a/popup.html +++ b/popup.html @@ -49,7 +49,7 @@ border: 1px dotted #aaa; padding: 1px 1px 1px 6px; display: inline-block; - width: 37px; + width: 35px; white-space:nowrap; text-align: center; cursor: pointer; @@ -224,7 +224,62 @@ .filter-button.gdt.gdp #cellMenu span:nth-of-type(1) { background-image: url('img/persist-dim.png'); } - +#cellHotspots { + margin: 0; + border: 0; + padding: 0; + position: position; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: 10; +} +#cellHotspots > div { + margin: 0; + border: 0; + padding: 0; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 50%; + background: transparent; +} +#cellHotspots > div:nth-of-type(1) { + top: 0; +} +#cellHotspots > div:nth-of-type(2) { + top: 50%; +} +.filter-button.rpt #cellHotspots > div:nth-of-type(1):hover { + background-color: #080; + opacity: 0.25; +} +.filter-button.gpt #cellHotspots > div:nth-of-type(1):hover { + background-color: #080; + opacity: 0.25; +} +.filter-button.rdt #cellHotspots > div:nth-of-type(1):hover { + background-color: inherited; +} +.filter-button.gdt #cellHotspots > div:nth-of-type(1):hover { + background-color: inherited; +} +.filter-button.rpt #cellHotspots > div:nth-of-type(2):hover { + background-color: #c00; + opacity: 0.25; +} +.filter-button.gpt #cellHotspots > div:nth-of-type(2):hover { + background-color: #c00; + opacity: 0.25; +} +.filter-button.rdt #cellHotspots > div:nth-of-type(2):hover { + background-color: inherited; +} +.filter-button.gdt #cellHotspots > div:nth-of-type(2):hover { + background-color: inherited; +} HTTP Switchboard @@ -235,7 +290,9 @@
 
 
 
 
 
 
 
 
-
+
+
+