Browse Source

add visual cue to hint at relevance of per-scope switches

pull/2/head
Raymond Hill 7 years ago
parent
commit
19c32608f3
No known key found for this signature in database GPG Key ID: 25E1490B761470C2
  1. 31
      src/css/popup.css
  2. 3
      src/js/matrix.js
  3. 12
      src/js/messaging.js
  4. 3
      src/js/pagestats.js
  5. 27
      src/js/popup.js
  6. 27
      src/js/traffic.js
  7. 22
      src/popup.html

31
src/css/popup.css

@ -110,22 +110,36 @@ body .toolbar button.fa {
} }
#mtxSwitches > li { #mtxSwitches > li {
align-items: baseline;
align-items: center;
color: #888; color: #888;
display: flex; display: flex;
justify-content: space-between;
} }
#mtxSwitches > li.switchTrue { #mtxSwitches > li.switchTrue {
color: #000; color: #000;
} }
#mtxSwitches > li > span:before {
font: 110% FontAwesome;
#mtxSwitches > li > svg {
display: inline;
height: 1em;
margin-right: 0.4em;
width: 1.5em;
}
#mtxSwitches > li > svg * {
fill-opacity: 1;
opacity: 1;
stroke: none;
} }
#mtxSwitches > li > span:first-of-type:before {
content: '\f204\a0';
#mtxSwitches > li > svg .off,
#mtxSwitches > li.switchTrue > svg .on,
#mtxSwitches > li.relevant > svg .dot {
display: block;
}
#mtxSwitches > li > svg .on,
#mtxSwitches > li > svg .dot,
#mtxSwitches > li.switchTrue > svg .off {
display: none;
} }
#mtxSwitches > li.switchTrue > span:first-of-type:before {
content: '\f205\a0';
#mtxSwitches > li > span[data-i18n] {
flex-grow: 1;
} }
#mtxSwitches > li > a { #mtxSwitches > li > a {
color: #000; color: #000;
@ -143,7 +157,6 @@ body .toolbar button.fa {
border: 0; border: 0;
bottom: 0; bottom: 0;
display: none; display: none;
font: 1rem httpsb,sans-serif;
left: 0; left: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;

3
src/js/matrix.js

@ -94,7 +94,8 @@ var switchBitOffsets = new Map([
[ 'https-strict', 2 ], [ 'https-strict', 2 ],
/* 4 is now unused, formerly assigned to UA spoofing */ /* 4 is now unused, formerly assigned to UA spoofing */
[ 'referrer-spoof', 6 ], [ 'referrer-spoof', 6 ],
[ 'noscript-spoof', 8 ]
[ 'noscript-spoof', 8 ],
[ 'no-workers', 10 ]
]); ]);
var switchStateToNameMap = new Map([ var switchStateToNameMap = new Map([

12
src/js/messaging.js

@ -164,6 +164,9 @@ var matrixSnapshot = function(pageStore, details) {
collapseBlacklistedDomains: µmuser.popupCollapseBlacklistedDomains, collapseBlacklistedDomains: µmuser.popupCollapseBlacklistedDomains,
diff: [], diff: [],
domain: pageStore.pageDomain, domain: pageStore.pageDomain,
has3pReferrer: pageStore.has3pReferrer,
hasMixedContent: pageStore.hasMixedContent,
hasNoscriptTags: pageStore.hasNoscriptTags,
headerIndices: Array.from(headerIndices), headerIndices: Array.from(headerIndices),
hostname: pageStore.pageHostname, hostname: pageStore.pageHostname,
mtxContentModified: pageStore.mtxContentModifiedTime !== details.mtxContentModifiedTime, mtxContentModified: pageStore.mtxContentModifiedTime !== details.mtxContentModifiedTime,
@ -508,8 +511,9 @@ var onMessage = function(request, sender, callback) {
break; break;
} }
var tabId = sender && sender.tab ? sender.tab.id || 0 : 0;
var tabContext = µm.tabContextManager.lookup(tabId);
var tabId = sender && sender.tab ? sender.tab.id || 0 : 0,
tabContext = µm.tabContextManager.lookup(tabId),
pageStore = µm.pageStoreFromTabId(tabId);
// Sync // Sync
var response; var response;
@ -528,10 +532,12 @@ var onMessage = function(request, sender, callback) {
break; break;
case 'mustRenderNoscriptTags?': case 'mustRenderNoscriptTags?':
if ( tabContext !== null ) {
if ( tabContext === null ) { break; }
response = response =
µm.tMatrix.mustBlock(tabContext.rootHostname, tabContext.rootHostname, 'script') && µm.tMatrix.mustBlock(tabContext.rootHostname, tabContext.rootHostname, 'script') &&
µm.tMatrix.evaluateSwitchZ('noscript-spoof', tabContext.rootHostname); µm.tMatrix.evaluateSwitchZ('noscript-spoof', tabContext.rootHostname);
if ( pageStore !== null ) {
pageStore.hasNoscriptTags = true;
} }
break; break;

3
src/js/pagestats.js

@ -123,6 +123,9 @@ PageStore.prototype = {
this.distinctRequestCount = 0; this.distinctRequestCount = 0;
this.perLoadAllowedRequestCount = 0; this.perLoadAllowedRequestCount = 0;
this.perLoadBlockedRequestCount = 0; this.perLoadBlockedRequestCount = 0;
this.has3pReferrer = false;
this.hasMixedContent = false;
this.hasNoscriptTags = false;
this.incinerationTimer = null; this.incinerationTimer = null;
this.mtxContentModifiedTime = 0; this.mtxContentModifiedTime = 0;
this.mtxCountModifiedTime = 0; this.mtxCountModifiedTime = 0;

27
src/js/popup.js

@ -1185,21 +1185,30 @@ function updateMatrixSwitches() {
enabled, enabled,
switches = matrixSnapshot.tSwitches; switches = matrixSnapshot.tSwitches;
for ( var switchName in switches ) { for ( var switchName in switches ) {
if ( switches.hasOwnProperty(switchName) === false ) {
continue;
}
if ( switches.hasOwnProperty(switchName) === false ) { continue; }
enabled = switches[switchName]; enabled = switches[switchName];
if ( enabled && switchName !== 'matrix-off' ) { if ( enabled && switchName !== 'matrix-off' ) {
count += 1; count += 1;
} }
uDom('#mtxSwitch_' + switchName).toggleClass('switchTrue', enabled); uDom('#mtxSwitch_' + switchName).toggleClass('switchTrue', enabled);
} }
uDom('#buttonMtxSwitches').descendants('span.badge').text(count.toLocaleString());
count = matrixSnapshot.blockedCount;
var button = uDom('#mtxSwitch_matrix-off');
button.descendants('span.badge').text(count.toLocaleString());
button.attr('data-tip', button.attr('data-tip').replace('{{count}}', count));
uDom('body').toggleClass('powerOff', switches['matrix-off']);
uDom.nodeFromId('mtxSwitch_https-strict').classList.toggle(
'relevant',
matrixSnapshot.hasMixedContent
);
uDom.nodeFromId('mtxSwitch_referrer-spoof').classList.toggle(
'relevant',
matrixSnapshot.has3pReferrer
);
uDom.nodeFromId('mtxSwitch_noscript-spoof').classList.toggle(
'relevant',
matrixSnapshot.hasNoscriptTags
);
uDom.nodeFromSelector('#buttonMtxSwitches span.badge').textContent =
count.toLocaleString();
uDom.nodeFromSelector('#mtxSwitch_matrix-off span.badge').textContent =
matrixSnapshot.blockedCount.toLocaleString();
document.body.classList.toggle('powerOff', switches['matrix-off']);
} }
function toggleMatrixSwitch(ev) { function toggleMatrixSwitch(ev) {

27
src/js/traffic.js

@ -111,16 +111,6 @@ var onBeforeRequestHandler = function(details) {
specificity = µm.tMatrix.specificityRegister; specificity = µm.tMatrix.specificityRegister;
} }
// Enforce strict secure connection?
if (
block === false &&
tabContext.secure &&
µmuri.isSecureScheme(requestScheme) === false &&
µm.tMatrix.evaluateSwitchZ('https-strict', rootHostname)
) {
block = true;
}
// Record request. // Record request.
// https://github.com/gorhill/httpswitchboard/issues/342 // https://github.com/gorhill/httpswitchboard/issues/342
// The way requests are handled now, it may happen at this point some // The way requests are handled now, it may happen at this point some
@ -128,6 +118,15 @@ var onBeforeRequestHandler = function(details) {
// been constructed for logging purpose. Use this synthetic URL if // been constructed for logging purpose. Use this synthetic URL if
// it is available. // it is available.
var pageStore = µm.mustPageStoreFromTabId(tabId); var pageStore = µm.mustPageStoreFromTabId(tabId);
// Enforce strict secure connection?
if ( tabContext.secure && µmuri.isSecureScheme(requestScheme) === false ) {
pageStore.hasMixedContent = true;
if ( block === false ) {
block = µm.tMatrix.evaluateSwitchZ('https-strict', rootHostname);
}
}
pageStore.recordRequest(requestType, requestURL, block); pageStore.recordRequest(requestType, requestURL, block);
µm.logger.writeOne(tabId, 'net', rootHostname, requestURL, details.type, block); µm.logger.writeOne(tabId, 'net', rootHostname, requestURL, details.type, block);
@ -244,12 +243,11 @@ var onBeforeSendHeadersHandler = function(details) {
headerIndex = headerIndexFromName('referer', requestHeaders); headerIndex = headerIndexFromName('referer', requestHeaders);
if ( headerIndex !== -1 ) { if ( headerIndex !== -1 ) {
headerValue = requestHeaders[headerIndex].value; headerValue = requestHeaders[headerIndex].value;
if (
headerValue !== '' &&
µm.tMatrix.evaluateSwitchZ('referrer-spoof', rootHostname)
) {
if ( headerValue !== '' ) {
var toDomain = µmuri.domainFromHostname(requestHostname); var toDomain = µmuri.domainFromHostname(requestHostname);
if ( toDomain !== '' && toDomain !== µmuri.domainFromURI(headerValue) ) { if ( toDomain !== '' && toDomain !== µmuri.domainFromURI(headerValue) ) {
pageStore.has3pReferrer = true;
if ( µm.tMatrix.evaluateSwitchZ('referrer-spoof', rootHostname) ) {
modified = true; modified = true;
var newValue; var newValue;
if ( details.method === 'GET' ) { if ( details.method === 'GET' ) {
@ -268,6 +266,7 @@ var onBeforeSendHeadersHandler = function(details) {
} }
} }
} }
}
if ( modified ) { if ( modified ) {
return { requestHeaders: requestHeaders }; return { requestHeaders: requestHeaders };

22
src/popup.html

@ -16,6 +16,22 @@
<div class="domainSeparator"></div> <div class="domainSeparator"></div>
<div class="matRow"><div class="matCell"><b> </b> </div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div></div> <div class="matRow"><div class="matCell"><b> </b> </div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div><div class="matCell">&nbsp;</div></div>
<div id="cellHotspots"><div id="whitelist"></div><div id="blacklist"></div><div id="domainOnly"><span class="fa"></span></div></div> <div id="cellHotspots"><div id="whitelist"></div><div id="blacklist"></div><div id="domainOnly"><span class="fa"></span></div></div>
<!-- Use once min supported browser version allows for use of CSS variables
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<symbol id="toggleButton" viewBox="0 0 152 96">
<g>
<path d="m 48,24 a 24,24 0 0 0 -24,24 24,24 0 0 0 24,24 l 48,0 A 24,24 0 0 0 120,48 24,24 0 0 0 96,24 l -48,0 z" style="opacity:1;fill:#bbb;fill-opacity:1;stroke:none;" />
<g style="display:var(--off);">
<ellipse style="fill:#bbb;fill-opacity:1;stroke:none;" cx="48" cy="48" rx="48" ry="48" />
<ellipse style="opacity:1;fill:#fff;fill-opacity:1;stroke:none;" cx="48" cy="48" rx="40" ry="40" />
<ellipse style="display:var(--dot);fill:#bbb;fill-opacity:1;stroke:none;" cx="48" cy="48" rx="12" ry="12" /></g>
<g style="display:var(--on);">
<ellipse style="opacity:1;fill:#444;fill-opacity:1;stroke:none;" cx="104" cy="48" rx="48" ry="48" />
<ellipse style="display:var(--dot);fill:#bbb;fill-opacity:1;stroke:none;" cx="104" cy="48" rx="12" ry="12" /></g>
</g>
</symbol>
</svg>
-->
</div> </div>
<div class="paneHead"> <div class="paneHead">
@ -70,9 +86,9 @@
<div id="dropDownMenuSwitches" class="dropdown-menu-capture"> <div id="dropDownMenuSwitches" class="dropdown-menu-capture">
<div class="dropdown-menu"> <div class="dropdown-menu">
<ul id="mtxSwitches"> <ul id="mtxSwitches">
<li id="mtxSwitch_https-strict" class="dropdown-menu-entry"><span data-i18n="matrixSwitchNoMixedContent"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/Security/Mixed_content" target="_blank">&#xf05a</a>
<li id="mtxSwitch_referrer-spoof" class="dropdown-menu-entry"><span data-i18n="matrixSwitchReferrerSpoof"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer" target="_blank">&#xf05a</a>
<li id="mtxSwitch_noscript-spoof" class="dropdown-menu-entry"><span data-i18n="matrixSwitchNoscriptSpoof"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/HTML/Element/noscript" target="_blank">&#xf05a</a>
<li id="mtxSwitch_https-strict" class="dropdown-menu-entry exists"><!-- <svg><use xlink:href="#toggleButton" /></svg> --><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 152 96"><g><path d="m 48,24 a 24,24 0 0 0 -24,24 24,24 0 0 0 24,24 l 48,0 A 24,24 0 0 0 120,48 24,24 0 0 0 96,24 l -48,0 z" style="fill:#bbb;" /><g class="off"><ellipse style="fill:#bbb;" cx="48" cy="48" rx="48" ry="48" /><ellipse style="fill:#fff;" cx="48" cy="48" rx="40" ry="40" /><ellipse class="dot" style="fill:#bbb;" cx="48" cy="48" rx="12" ry="12" /></g><g class="on"><ellipse style="fill:#444;" cx="104" cy="48" rx="48" ry="48" /><ellipse class="dot" style="fill:#bbb;" cx="104" cy="48" rx="12" ry="12" /></g></g></svg><span data-i18n="matrixSwitchNoMixedContent"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/Security/Mixed_content" target="_blank">&#xf05a</a>
<li id="mtxSwitch_referrer-spoof" class="dropdown-menu-entry"><!-- <svg><use xlink:href="#toggleButton" /></svg> --><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 152 96"><g><path d="m 48,24 a 24,24 0 0 0 -24,24 24,24 0 0 0 24,24 l 48,0 A 24,24 0 0 0 120,48 24,24 0 0 0 96,24 l -48,0 z" style="fill:#bbb;" /><g class="off"><ellipse style="fill:#bbb;" cx="48" cy="48" rx="48" ry="48" /><ellipse style="fill:#fff;" cx="48" cy="48" rx="40" ry="40" /><ellipse class="dot" style="fill:#bbb;" cx="48" cy="48" rx="12" ry="12" /></g><g class="on"><ellipse style="fill:#444;" cx="104" cy="48" rx="48" ry="48" /><ellipse class="dot" style="fill:#bbb;" cx="104" cy="48" rx="12" ry="12" /></g></g></svg><span data-i18n="matrixSwitchReferrerSpoof"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer" target="_blank">&#xf05a</a>
<li id="mtxSwitch_noscript-spoof" class="dropdown-menu-entry"><!-- <svg><use xlink:href="#toggleButton" /></svg> --><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 152 96"><g><path d="m 48,24 a 24,24 0 0 0 -24,24 24,24 0 0 0 24,24 l 48,0 A 24,24 0 0 0 120,48 24,24 0 0 0 96,24 l -48,0 z" style="fill:#bbb;" /><g class="off"><ellipse style="fill:#bbb;" cx="48" cy="48" rx="48" ry="48" /><ellipse style="fill:#fff;" cx="48" cy="48" rx="40" ry="40" /><ellipse class="dot" style="fill:#bbb;" cx="48" cy="48" rx="12" ry="12" /></g><g class="on"><ellipse style="fill:#444;" cx="104" cy="48" rx="48" ry="48" /><ellipse class="dot" style="fill:#bbb;" cx="104" cy="48" rx="12" ry="12" /></g></g></svg><span data-i18n="matrixSwitchNoscriptSpoof"></span>&emsp;<a class="fa" href="https://developer.mozilla.org/docs/Web/HTML/Element/noscript" target="_blank">&#xf05a</a>
</ul> </ul>
</div> </div>
</div> </div>

Loading…
Cancel
Save