From 44f1a61c42fb3c0357774ea176ef0ea6a9591642 Mon Sep 17 00:00:00 2001 From: gorhill Date: Sat, 2 May 2015 17:13:55 -0400 Subject: [PATCH] placeholder styling gone: it's bloat-ish --- src/css/popup.css | 7 +++- src/js/background.js | 4 +- src/js/contentscript-end.js | 43 +++++++++++++++++---- src/js/settings.js | 39 ------------------- src/js/traffic.js | 76 ------------------------------------- src/popup.html | 2 +- src/settings.html | 26 ------------- 7 files changed, 42 insertions(+), 155 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 6b3d4c3..653a45b 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -174,14 +174,17 @@ body[dir="rtl"] #mtxSwitches > li > span:before { display: block; } +#buttonReload { + margin-right: 1em; + } body #buttonRevertAll { position: relative; color: transparent; } body #buttonRevertAll > span { - position: absolute; - font-size: 60%; color: black; + font-size: 60%; + position: absolute; } body #buttonRevertAll > span:nth-of-type(1) { left: 3px; diff --git a/src/js/background.js b/src/js/background.js index 0d8cb5e..0e3d66e 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -73,9 +73,7 @@ return { spoofUserAgent: false, spoofUserAgentEvery: 5, spoofUserAgentWith: defaultUserAgentStrings, - statsFilters: {}, - subframeColor: '#cc0000', - subframeOpacity: 100 + statsFilters: {} }, clearBrowserCacheCycle: 0, diff --git a/src/js/contentscript-end.js b/src/js/contentscript-end.js index 5f0bbad..04aa87e 100644 --- a/src/js/contentscript-end.js +++ b/src/js/contentscript-end.js @@ -153,12 +153,34 @@ var collapser = (function() { var newRequests = []; var pendingRequests = {}; var pendingRequestCount = 0; + var backgroundImage = [ + 'linear-gradient(', + '0deg,', + 'rgba(0,0,0,0.02) 25%,', + 'rgba(0,0,0,0.05) 25%,', + 'rgba(0,0,0,0.05) 75%,', + 'rgba(0,0,0,0.02) 75%,', + 'rgba(0,0,0,0.02)', + ') center center / 10px 10px repeat scroll,', + 'linear-gradient(', + '90deg,', + 'rgba(0,0,0,0.02) 25%,', + 'rgba(0,0,0,0.05) 25%,', + 'rgba(0,0,0,0.05) 75%,', + 'rgba(0,0,0,0.02) 75%,', + 'rgba(0,0,0,0.02)', + ') center center / 10px 10px repeat scroll' + ].join(''); var srcProps = { 'iframe': 'src', 'img': 'src' }; + var srcValues = { + 'iframe': 'about:blank', + 'img': 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' + }; - var PendingRequest = function(target, tagName, attr) { + var PendingRequest = function(target) { this.id = requestId++; this.target = target; pendingRequests[this.id] = this; @@ -175,14 +197,17 @@ var collapser = (function() { }; var onProcessed = function(response) { + if ( !response ) { + return; + } var requests = response.requests; if ( requests === null || Array.isArray(requests) === false ) { return; } var collapse = response.collapse; - + var bgImg = backgroundImage; var i = requests.length; - var request, entry; + var request, entry, target, tagName; while ( i-- ) { request = requests[i]; if ( pendingRequests.hasOwnProperty(request.id) === false ) { @@ -191,15 +216,17 @@ var collapser = (function() { entry = pendingRequests[request.id]; delete pendingRequests[request.id]; pendingRequestCount -= 1; - if ( !request.blocked ) { continue; } - + target = entry.target; if ( collapse ) { - entry.target.style.setProperty('display', 'none', 'important'); + target.style.setProperty('display', 'none', 'important'); } else { - // TODO: uMatrix placeholder + tagName = target.localName; + target.setAttribute(srcProps[tagName], srcValues[tagName]); + target.style.setProperty('border', '1px solid rgba(0,0,0,0.05)', 'important'); + target.style.setProperty('background', bgImg, 'important'); } } @@ -247,7 +274,7 @@ var collapser = (function() { if ( src.lastIndexOf('http', 0) !== 0 ) { return; } - var req = new PendingRequest(target, tagName, prop); + var req = new PendingRequest(target); newRequests.push(new BouncingRequest(req.id, tagName, src)); }; diff --git a/src/js/settings.js b/src/js/settings.js index db0f358..d88a29b 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -36,39 +36,6 @@ var cachedUserSettings = {}; /******************************************************************************/ -var subframeDemoBackgroundImage = 'repeating-linear-gradient(\ --45deg,\ -{{color}},{{color}} 24%,\ -transparent 26%,transparent 49%,\ -{{color}} 51%,{{color}} 74%,\ -transparent 76%,transparent\ -)'; - -var updateSubframeDemo = function() { - var demo = uDom('#subframe-color-demo'); - var color = uDom('#subframe-color').val(); - demo.css('border-color', color); - var re = new RegExp('\{\{color\}\}', 'g'); - demo.css('background-image', subframeDemoBackgroundImage.replace(re, color)); - demo.css('opacity', (parseInt(uDom('#subframe-opacity').val(), 10) / 100).toFixed(1)); -}; - -var onSubframeColorChanged = function() { - var color = uDom('#subframe-color').val(); - if ( color === '' ) { - uDom('#subframe-color').val(color); - } - changeUserSettings('subframeColor', color); - var opacity = parseInt(uDom('#subframe-opacity').val(), 10); - if ( Number.isNaN(opacity) ) { - opacity = 100; - } - changeUserSettings('subframeOpacity', opacity); - updateSubframeDemo(); -}; - -/******************************************************************************/ - function changeUserSettings(name, value) { messager.send({ what: 'userSettings', @@ -80,7 +47,6 @@ function changeUserSettings(name, value) { /******************************************************************************/ function prepareToDie() { - onSubframeColorChanged(); } /******************************************************************************/ @@ -98,8 +64,6 @@ var installEventHandlers = function() { uDom('#smart-auto-reload').on('change', function(){ changeUserSettings('smartAutoReload', this.value); }); - uDom('#subframe-color').on('change', function(){ onSubframeColorChanged(); }); - uDom('#subframe-opacity').on('change', function(){ onSubframeColorChanged(); }); // https://github.com/gorhill/httpswitchboard/issues/197 uDom(window).on('beforeunload', prepareToDie); @@ -122,9 +86,6 @@ uDom.onLoad(function() { elem.prop('checked', elem.val() === userSettings.displayTextSize); }); uDom('#smart-auto-reload').val(userSettings.smartAutoReload); - uDom('#subframe-color').val(userSettings.subframeColor); - uDom('#subframe-opacity').val(userSettings.subframeOpacity); - updateSubframeDemo(); installEventHandlers(); }; diff --git a/src/js/traffic.js b/src/js/traffic.js index c0dd4f8..c819cfc 100644 --- a/src/js/traffic.js +++ b/src/js/traffic.js @@ -30,69 +30,6 @@ /******************************************************************************/ -// The `id='uMatrix'` is important, it allows µMatrix to detect whether a -// specific data URI originates from itself. - -var subFrameReplacement = [ - '', - '', - '', - '', - '', - 'Blocked by μMatrix', - '', - '', - '
{{hostname}}
', - '', - '' -].join(''); - -/******************************************************************************/ - // Intercept and filter web requests according to white and black lists. var onBeforeRootFrameRequestHandler = function(details) { @@ -201,19 +138,6 @@ var onBeforeRequestHandler = function(details) { // blacklisted // console.debug('onBeforeRequestHandler()> BLOCK "%s": %o', details.url, details); - // If it's a blacklisted frame, redirect to frame.html - // rhill 2013-11-05: The root frame contains a link to noop.css, this - // allows to later check whether the root frame has been unblocked by the - // user, in which case we are able to force a reload using a redirect. - if ( requestType === 'frame' ) { - var html = subFrameReplacement - .replace(/{{hostname}}/g, requestHostname) - .replace('{{frameSrc}}', requestURL) - .replace(/{{subframeColor}}/g, µm.userSettings.subframeColor) - .replace('{{subframeOpacity}}', (µm.userSettings.subframeOpacity / 100).toFixed(1)); - return { 'redirectUrl': 'data:text/html,' + encodeURIComponent(html) }; - } - return { 'cancel': true }; }; diff --git a/src/popup.html b/src/popup.html index 1f7c859..ca5520d 100644 --- a/src/popup.html +++ b/src/popup.html @@ -47,8 +47,8 @@
- +
diff --git a/src/settings.html b/src/settings.html index 7e079df..cded1f6 100644 --- a/src/settings.html +++ b/src/settings.html @@ -23,20 +23,6 @@ ul > li { font-weight: 100; color: #888; } -#subframe-color-demo { - margin: 0; - border: 1px dotted transparent; - padding: 0; - display: inline-block; - position: relative; - top: 1px; - width: 2em; - height: 20px; - text-align: center; - vertical-align: baseline; - background-color: transparent; - background-size: 10px 10px; - } @@ -48,10 +34,6 @@ ul > li {
  • -
  • - -   -   

    @@ -59,14 +41,6 @@ ul > li {
  • -