Skip to content
This repository has been archived by the owner on Jul 21, 2021. It is now read-only.

Commit

Permalink
placeholder styling gone: it's bloat-ish
Browse files Browse the repository at this point in the history
  • Loading branch information
@gorhill
gorhill committed May 2, 2015
1 parent cd13d28 commit 44f1a61
Show file tree
Hide file tree
Showing 7 changed files with 42 additions and 155 deletions.
7 changes: 5 additions & 2 deletions src/css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 1 addition & 3 deletions src/js/background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,7 @@ return {
spoofUserAgent: false,
spoofUserAgentEvery: 5,
spoofUserAgentWith: defaultUserAgentStrings,
statsFilters: {},
subframeColor: '#cc0000',
subframeOpacity: 100
statsFilters: {}
},

clearBrowserCacheCycle: 0,
Expand Down
43 changes: 35 additions & 8 deletions src/js/contentscript-end.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 ) {
Expand All @@ -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');
}
}

Expand Down Expand Up @@ -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));
};

Expand Down
39 changes: 0 additions & 39 deletions src/js/settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -80,7 +47,6 @@ function changeUserSettings(name, value) {
/******************************************************************************/

function prepareToDie() {
onSubframeColorChanged();
}

/******************************************************************************/
Expand All @@ -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);
Expand All @@ -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();
};
Expand Down
76 changes: 0 additions & 76 deletions src/js/traffic.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,69 +30,6 @@

/******************************************************************************/

// The `id='uMatrix'` is important, it allows µMatrix to detect whether a
// specific data URI originates from itself.

var subFrameReplacement = [
'<!DOCTYPE html>',
'<html>',
'<head>',
'<meta charset="utf-8" />',
'<style>',
'@font-face{',
'font-family:httpsb;',
'font-style:normal;',
'font-weight:400;',
'src:local("httpsb"),url("', µMatrix.fontCSSURL, '") format("truetype");',
'}',
'body{',
'margin:0;',
'border:0;',
'padding:0;',
'font:13px httpsb,sans-serif;',
'}',
'#bg{',
'border:1px dotted {{subframeColor}};',
'position:absolute;',
'top:0;',
'right:0;',
'bottom:0;',
'left:0;',
'background-color:transparent;',
'background-size:10px 10px;',
'background-image:',
'repeating-linear-gradient(',
'-45deg,',
'{{subframeColor}},{{subframeColor}} 24%,',
'transparent 25%,transparent 49%,',
'{{subframeColor}} 50%,{{subframeColor}} 74%,',
'transparent 75%,transparent',
');',
'opacity:{{subframeOpacity}};',
'text-align:center;',
'}',
'#bg > div{',
'display:inline-block;',
'background-color:rgba(255,255,255,1);',
'}',
'#bg > div > a {',
'padding:0 2px;',
'display:inline-block;',
'color:white;',
'background-color:{{subframeColor}};',
'text-decoration:none;',
'}',
'</style>',
'<title>Blocked by &mu;Matrix</title>',
'</head>',
'<body title="&ldquo;{{hostname}}&rdquo; frame\nblocked by &mu;Matrix">',
'<div id="bg"><div><a href="{{frameSrc}}" target="_blank">{{hostname}}</a></div></div>',
'</body>',
'</html>'
].join('');

/******************************************************************************/

// Intercept and filter web requests according to white and black lists.

var onBeforeRootFrameRequestHandler = function(details) {
Expand Down Expand Up @@ -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 };
};

Expand Down
2 changes: 1 addition & 1 deletion src/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@

<!-- Yandex: float works correctly only if it is the first child -->
<div class="toolbar alignRight">
<button id="buttonRevertAll" type="button" class="fa tip-anchor-right" tabindex="-1" data-i18n-tip="matrixRevertButtonAllTip">&#xf12d;<span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span></button>
<button id="buttonReload" type="button" class="fa tip-anchor-right" data-i18n-tip="matrixReloadButton">&#xf021;</button>
<button id="buttonRevertAll" type="button" class="fa tip-anchor-right" tabindex="-1" data-i18n-tip="matrixRevertButtonAllTip">&#xf12d;<span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span><span class="fa">&#xf12d;</span></button>
<button id="buttonDashboard" type="button" class="extensionURL fa tip-anchor-right" data-extension-url="dashboard.html">&#xf085;</button>
</div>

Expand Down
26 changes: 0 additions & 26 deletions src/settings.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,20 +23,6 @@
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;
}
</style>
</head>

Expand All @@ -48,25 +34,13 @@ <h2 data-i18n="settingsMatrixDisplayHeader"></h2>
<li style="margin-top:0.5em;"><span data-i18n="settingsMatrixDisplayTextSizePrompt"></span>
<input type="radio" name="displayTextSize" id="displayTextSizeNormal" value="13px"><label data-i18n="settingsMatrixDisplayTextSizeNormal" for="displayTextSizeNormal"></label>
<input type="radio" name="displayTextSize" id="displayTextSizeLarge" value="16px"><label data-i18n="settingsMatrixDisplayTextSizeLarge" for="displayTextSizeLarge"></label>
<li style="margin-top:0.5em;">
<span data-i18n="settingsSubframeColor"></span> <input id="subframe-color" type="color" value="#cc0000">
&ensp;<span data-i18n="settingsSubframeOpacity"></span> <input id="subframe-opacity" type="range" min="0" max="100" value="100">
&ensp;<span id="subframe-color-demo">&nbsp;</span>
</ul>

<h2 data-i18n="settingsMatrixConvenienceHeader"></h2>
<ul>
<li>
<input id="collapseBlocked" type="checkbox" data-range="bool">
<label data-i18n="settingsCollapseBlocked" for="collapseBlocked"></label>
<!-- <li>
<span data-i18n="settingsMatrixAutoReloadPrompt"></span> <select id="smart-auto-reload">
<option value="none" data-i18n="settingsMatrixAutoReloadNone">
<option value="current" data-i18n="settingsMatrixAutoReloadCurrent">
<option value="all" data-i18n="settingsMatrixAutoReloadAll">
</select> <button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="settingsMatrixAutoReloadInfo"></div>
-->
</ul>


Expand Down

5 comments on commit 44f1a61

@my-password-is-password
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aww, I really liked the frames place holder. It was very easy to identify the frames.
Heres the example I used for the gif, http://hoofoot.com/?match=Cordoba_0_-_8_FC_Barcelona_2015_05_02. They embed vids from different sources and I usually watch the ones from dailymotion. In 0.8.1.4 have to right click each frame and "View frame info" to see where its from. In 0.8.1.3 you didn't have to do anything.

uMatrix 0.8.1.4

umatrix814identifyframes

uMatrix 0.8.1.3

umatrix813identifyframes

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 44f1a61 May 3, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I will try to bring this back. I had to find a way to not rely anymore on redirection.

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 44f1a61 May 3, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I committed some code to provide what you want.

Note that since redirection is no longer used, it's glitchy on Chromium, because Chromium used that annoying sad face as a placeholder when the resource can't be fetched for an iframe. Eventually I will look if I can improve this but we might have to live with this, it's a Chromium thing (it's clean on Firefox).

So anyways I didn't spend much time fine tuning visuals etc., as I want to address other re-factoring today in order to get closer to a Firefox port, but I will fine tune everything when this is only what is left to do.

I put these placeholders into local storage of the extension, so advanced users can always hack them to their taste (on Firefox it will be in about:config).

@my-password-is-password
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks gorhill. If you really want to remove it completely, I'm cool with that too. I can just keep 0.8.1.3 installed and use it whenever I visit these streaming sites(not very often). I don't really encounter frames that I actually need.

@gorhill
Copy link
Owner Author

@gorhill gorhill commented on 44f1a61 May 3, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you really want to remove it completely

Of course not. Once I am closer to a Firefox release, I want to look into a way to maybe click-to-load these iframes/images, bypassing the matrix for the time of the load. It's just that now everything is changing so it cant be expected that the github repo in its current state is the final product.

Please sign in to comment.