CodeMirror/uMatrix
1
0
Fork 0
mirror of https://github.com/gorhill/uMatrix.git synced 2024-06-02 02:14:52 +12:00
Code Issues Releases Wiki Activity

placeholder styling gone: it's bloat-ish

Browse source
This commit is contained in:
gorhill 2015-05-02 17:13:55 -04:00
parent cd13d2870b
commit 44f1a61c42
7 changed files with 42 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/css/popup.css
View file

@ -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;

4
src/js/background.js
View file

@ -73,9 +73,7 @@ return {
spoofUserAgent: false,
spoofUserAgentEvery: 5,
spoofUserAgentWith: defaultUserAgentStrings,
statsFilters: {},
subframeColor: '#cc0000',
subframeOpacity: 100
statsFilters: {}
},
clearBrowserCacheCycle: 0,

43
src/js/contentscript-end.js
View file

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

39
src/js/settings.js
View file

@ -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();
};

76
src/js/traffic.js
View file

@ -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) {
@ -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 };
};

2
src/popup.html
View file

@ -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>

26
src/settings.html
View file

@ -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;
}
</style>
</head>
@ -48,10 +34,6 @@ ul > li {
<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>
@ -59,14 +41,6 @@ ul > li {
<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>