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

fix #821

Browse source
This commit is contained in:
gorhill 2017-11-21 10:36:08 -05:00
parent c4718246ea
commit b1f53a6d09
7 changed files with 159 additions and 102 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/_locales/en/messages.json
View file

@ -259,8 +259,8 @@
"description": ""
},
"settingsMatrixDisplayHeader" : {
"message": "Appearance",
"description": ""
"message": "Matrix",
"description": "header for matrix settings used in Settings page"
},
"settingsMatrixDisplayTextSizePrompt" : {
"message": "Text size:",
@ -282,6 +282,22 @@
"message": "Convenience",
"description": "English: Convenience"
},
"settingsDefaultScopeLevel" : {
"message": "Default scope level:",
"description": "Label for default scope level selector in Settings pane"
},
"settingsDefaultScopeLevel0" : {
"message": "Global",
"description": "Scope will be global"
},
"settingsDefaultScopeLevel1" : {
"message": "Domain",
"description": "Scope will be base domain"
},
"settingsDefaultScopeLevel2" : {
"message": "Site",
"description": "Scope will be full hostname of site"
},
"settingsMatrixAutoReloadPrompt" : {
"message": "When the matrix is closed, smart reload these tabs:",
"description": ""

92
src/css/popup.css
View file

@ -75,30 +75,18 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type {
text-align: center;
}
#toolbarContainer {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.toolbar {
border: 0;
display: inline-block;
margin: 0;
padding: 0;
position: relative;
vertical-align: top;
white-space: nowrap;
}
.toolbar.alignRight {
position: absolute;
}
body[dir="ltr"] .toolbar.alignLeft,
body[dir="rtl"] .toolbar.alignRight {
left: 0;
}
body[dir="ltr"] .toolbar.alignRight,
body[dir="rtl"] .toolbar.alignLeft {
right: 0;
}
body .toolbar button {
margin: 0;
@ -122,15 +110,6 @@ body .toolbar button.fa {
font: 1.75em FontAwesome;
min-width: 1.1em;
}
body.tScopeGlobal .scopeRel:not(.disabled) {
color: #000;
}
body.tScopeDomain .scopeRel:not(.disabled) {
color: #24c;
}
body.tScopeSite .scopeRel:not(.disabled) {
color: #48c;
}
#mtxSwitch_matrix-off.switchTrue {
color: #a00;
}
@ -297,37 +276,55 @@ button.disabled > span.badge {
font-size: 1.2em;
}
body .toolbar button#scopeCell {
margin: 0;
border: 1px dotted rgba(0,0,0,0.2);
padding: 6px 1px 3px 1px;
body .toolbar .scope {
background-color: #ccc;
border: 1px solid #ccc;
box-sizing: content-box;
-moz-box-sizing: content-box;
width: 16em;
height: 1.5em;
white-space: nowrap;
text-align: right;
line-height: 100%;
color: white;
background-repeat: no-repeat;
background-position: -1px -1px;
display: inline-block;
line-height: 2em;
margin: 0;
padding: 1px;
cursor: pointer;
white-space: nowrap;
}
body #scopeCell + .dropdown-menu {
padding: 6px 1px 3px 1px;
body .toolbar #specificScope {
display: inline-flex;
justify-content: flex-end;
text-align: right;
min-width: 50%;
max-width: 80%;
width: 16em;
}
body.tScopeGlobal #scopeCell {
background-color: #000;
body .toolbar #specificScope.on {
background-color: #24c;
border-color: #24c;
}
body.tScopeDomain #scopeCell {
body .toolbar #specificScope > span {
background-color: #ccc;
display: inline-block;
height: 100%;
}
body .toolbar #specificScope > span.on {
background-color: #24c;
}
body.tScopeSite #scopeCell {
background-color: #48c;
body .toolbar #specificScope > span:first-of-type {
flex: 1;
}
body .toolbar #globalScope {
margin-left: 0 0 0 1px;
text-align: center;
width: 2em;
}
body .toolbar #globalScope.on {
background-color: #000;
border-color: #000;
}
body .toolbar .scopeRel {
color: #24c;
}
body.globalScope .toolbar .scopeRel {
color: #000;
}
.matrix {
text-align: left;
@ -349,6 +346,11 @@ body.tScopeSite #scopeCell {
position: relative;
}
#matHead {
border-top: 1px dotted #ccc;
padding-top: 1px;
margin: 1px 0 0 0;
}
.paneHead .matCell:nth-child(2) {
letter-spacing: -0.3px;
}

8
src/js/messaging.js
View file

@ -1,7 +1,7 @@
/*******************************************************************************
µMatrix - a Chromium browser extension to black/white list requests.
Copyright (C) 2014 Raymond Hill
uMatrix - a Chromium browser extension to black/white list requests.
Copyright (C) 2014-2017 Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@ -173,7 +173,9 @@ var matrixSnapshot = function(pageStore, details) {
var headers = r.headers;
if ( µmuser.popupScopeLevel === 'site' ) {
if ( typeof details.scope === 'string' ) {
r.scope = details.scope;
} else if ( µmuser.popupScopeLevel === 'site' ) {
r.scope = r.hostname;
} else if ( µmuser.popupScopeLevel === 'domain' ) {
r.scope = r.domain;

97
src/js/popup.js
View file

@ -1043,59 +1043,82 @@ function initMenuEnvironment() {
// Create page scopes for the web page
function selectGlobalScope() {
setUserSetting('popupScopeLevel', '*');
if ( matrixSnapshot.scope === '*' ) { return; }
matrixSnapshot.scope = '*';
document.body.classList.add('globalScope');
matrixSnapshot.tMatrixModifiedTime = undefined;
updateMatrixSnapshot();
dropDownMenuHide();
}
function selectDomainScope() {
setUserSetting('popupScopeLevel', 'domain');
function selectSpecificScope(ev) {
var newScope = ev.target.getAttribute('data-scope');
if ( matrixSnapshot.scope === newScope ) { return; }
document.body.classList.remove('globalScope');
matrixSnapshot.scope = newScope;
matrixSnapshot.tMatrixModifiedTime = undefined;
updateMatrixSnapshot();
dropDownMenuHide();
}
function selectSiteScope() {
setUserSetting('popupScopeLevel', 'site');
matrixSnapshot.tMatrixModifiedTime = undefined;
updateMatrixSnapshot();
dropDownMenuHide();
}
function getClassFromScope() {
if ( matrixSnapshot.scope === '*' ) {
return 'tScopeGlobal';
}
if ( matrixSnapshot.scope === matrixSnapshot.domain ) {
return 'tScopeDomain';
}
return 'tScopeSite';
}
function initScopeCell() {
// It's possible there is no page URL at this point: some pages cannot
// be filtered by µMatrix.
if ( matrixSnapshot.url === '' ) {
return;
// be filtered by uMatrix.
if ( matrixSnapshot.url === '' ) { return; }
var specificScope = uDom.nodeFromId('specificScope');
while ( specificScope.firstChild !== null ) {
specificScope.removeChild(specificScope.firstChild);
}
// Fill in the scope menu entries
if ( matrixSnapshot.hostname === matrixSnapshot.domain ) {
uDom('#scopeKeySite').css('display', 'none');
var pos = matrixSnapshot.domain.indexOf('.');
var tld, labels;
if ( pos === -1 ) {
tld = '';
labels = matrixSnapshot.hostname;
} else {
uDom('#scopeKeySite').text(punycode.toUnicode(matrixSnapshot.hostname));
tld = matrixSnapshot.domain.slice(pos + 1);
labels = matrixSnapshot.hostname.slice(0, -tld.length);
}
var beg = 0, span;
while ( beg < labels.length ) {
pos = labels.indexOf('.', beg);
if ( pos === -1 ) {
pos = labels.length;
} else {
pos += 1;
}
span = document.createElement('span');
span.setAttribute('data-scope', labels.slice(beg) + tld);
span.appendChild(
document.createTextNode(punycode.toUnicode(labels.slice(beg, pos)))
);
specificScope.appendChild(span);
beg = pos;
}
if ( tld !== '' ) {
span = document.createElement('span');
span.setAttribute('data-scope', tld);
span.appendChild(document.createTextNode(punycode.toUnicode(tld)));
specificScope.appendChild(span);
}
uDom('#scopeKeyDomain').text(punycode.toUnicode(matrixSnapshot.domain));
updateScopeCell();
}
function updateScopeCell() {
uDom('body')
.removeClass('tScopeGlobal tScopeDomain tScopeSite')
.addClass(getClassFromScope());
uDom('#scopeCell').text(
punycode.toUnicode(matrixSnapshot.scope).replace('*', '\u2217')
);
var specificScope = uDom.nodeFromId('specificScope'),
globalScope = uDom.nodeFromId('globalScope');
var isGlobal = matrixSnapshot.scope === '*';
specificScope.classList.toggle('on', !isGlobal);
globalScope.classList.toggle('on', isGlobal);
for ( var node of uDom.nodeFromId('specificScope').children ) {
node.classList.toggle(
'on',
!isGlobal &&
matrixSnapshot.scope.endsWith(node.getAttribute('data-scope'))
);
}
}
/******************************************************************************/
@ -1254,7 +1277,7 @@ var onMatrixSnapshotReady = function(response) {
// After popup menu is built, check whether there is a non-empty matrix
if ( matrixSnapshot.url === '' ) {
uDom('#matHead').remove();
uDom('#toolbarLeft').remove();
uDom('#toolbarContainer').remove();
// https://github.com/gorhill/httpswitchboard/issues/191
uDom('#noNetTrafficPrompt').text(vAPI.i18n('matrixNoNetTrafficPrompt'));
@ -1335,6 +1358,7 @@ var matrixSnapshotPoller = (function() {
messager.send({
what: 'matrixSnapshot',
tabId: matrixSnapshot.tabId,
scope: matrixSnapshot.scope,
mtxContentModifiedTime: matrixSnapshot.mtxContentModifiedTime,
mtxCountModifiedTime: matrixSnapshot.mtxCountModifiedTime,
mtxDiffCount: matrixSnapshot.diff.length,
@ -1419,9 +1443,8 @@ matrixCellHotspots = uDom('#cellHotspots').detach();
uDom('body')
.on('mouseenter', '.matCell', mouseenterMatrixCellHandler)
.on('mouseleave', '.matCell', mouseleaveMatrixCellHandler);
uDom('#scopeKeyGlobal').on('click', selectGlobalScope);
uDom('#scopeKeyDomain').on('click', selectDomainScope);
uDom('#scopeKeySite').on('click', selectSiteScope);
uDom('#specificScope').on('click', selectSpecificScope);
uDom('#globalScope').on('click', selectGlobalScope);
uDom('[id^="mtxSwitch_"]').on('click', toggleMatrixSwitch);
uDom('#buttonPersist').on('click', persistMatrix);
uDom('#buttonRevertScope').on('click', revertMatrix);

6
src/js/settings.js
View file

@ -62,6 +62,10 @@ var installEventHandlers = function() {
changeUserSettings('displayTextSize', this.value);
});
uDom('#popupScopeLevel').on('change', function(){
changeUserSettings('popupScopeLevel', this.value);
});
// https://github.com/gorhill/httpswitchboard/issues/197
uDom(window).on('beforeunload', prepareToDie);
};
@ -83,6 +87,8 @@ uDom.onLoad(function() {
elem.prop('checked', elem.val() === userSettings.displayTextSize);
});
uDom.nodeFromId('popupScopeLevel').value = userSettings.popupScopeLevel;
installEventHandlers();
};
messager.send({ what: 'getUserSettings' }, onUserSettingsReceived);

13
src/popup.html
View file

@ -20,18 +20,19 @@
<div class="paneHead">
<a id="gotoDashboard" class="extensionURL" href="#" data-extension-url="dashboard.html" title="popupTipDashboard">uMatrix <span id="version"> </span><span class="fa">&#xf013;</span></a>
<div id="toolbarContainer">
<div id="toolbarLeft" class="toolbar alignLeft">
<button id="scopeCell" class="dropdown-menu-button" tabindex="-1"></button>
<div class="dropdown-menu">
<div class="toolbar">
<span class="scope" id="specificScope"></span><!--
--><span class="scope" id="globalScope" data-scope="*">&#x2217;</span>
<!-- <div class="dropdown-menu">
<ul>
<li id="scopeKeyGlobal" class="dropdown-menu-entry">&#x2217;
<li id="scopeKeyDomain" class="dropdown-menu-entry">
<li id="scopeKeySite" class="dropdown-menu-entry">
</ul>
</div>
<div class="dropdown-menu-capture"></div>
<div class="dropdown-menu-capture"></div> -->
<button id="mtxSwitch_matrix-off" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixMtxButtonTip">&#xf011;<span class="badge"></span></button>
<div style="display: inline-block; position: relative">
<div style="display:inline-block; position:relative; vertical-align:top;">
<button id="buttonMtxSwitches" type="button" class="dropdown-menu-button fa scopeRel" tabindex="-1">&#xf142;<span class="badge"></span></button>
<div class="dropdown-menu">
<ul id="mtxSwitches">
@ -47,7 +48,7 @@
<button id="buttonRevertScope" type="button" class="fa scopeRel tip-anchor-left" tabindex="-1" data-i18n-tip="matrixRevertButtonTip">&#xf12d;</button>
<button id="buttonReload" type="button" class="fa tip-anchor-left" data-i18n-tip="matrixReloadButton">&#xf021;</button>
</div>
<div class="toolbar alignRight">
<div class="toolbar">
<button id="buttonRevertAll" class="fa tip-anchor-right" data-i18n-tip="matrixRevertAllEntry">&#xf122;</button>
<button type="button" class="fa extensionURL tip-anchor-right" data-extension-url="logger-ui.html" data-i18n-tip="matrixLoggerMenuEntry">&#xf022;</button>
</div>

25
src/settings.html
View file

@ -19,6 +19,9 @@ ul {
ul > li {
margin: 0 0 0 1em;
}
ul > li.separator {
margin: 0.5em 0;
}
.dim {
font-weight: 100;
color: #888;
@ -28,14 +31,6 @@ ul > li {
<body>
<h2 data-i18n="settingsMatrixDisplayHeader"></h2>
<ul style="list-style:none">
<li style="margin-top:0.5em;"><input id="colorBlindFriendly" type="checkbox" data-range="bool"><label data-i18n="settingsMatrixDisplayColorBlind" for="colorBlindFriendly"></label>
<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>
</ul>
<h2 data-i18n="settingsMatrixConvenienceHeader"></h2>
<ul>
<li>
@ -48,7 +43,19 @@ ul > li {
<input id="cloudStorageEnabled" type="checkbox" data-range="bool">
<label data-i18n="settingsCloudStorageEnabled" for="cloudStorageEnabled"></label>
</ul>
<h2 data-i18n="settingsMatrixDisplayHeader"></h2>
<ul>
<li><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 class="separator">
<li>
<label data-i18n="settingsDefaultScopeLevel"></label> <select id="popupScopeLevel"><option data-i18n="settingsDefaultScopeLevel2" value="site"><option data-i18n="settingsDefaultScopeLevel1" value="domain"><option data-i18n="settingsDefaultScopeLevel0" value="*"></select>
<li class="separator">
<li>
<input id="colorBlindFriendly" type="checkbox" data-range="bool">
<label data-i18n="settingsMatrixDisplayColorBlind" for="colorBlindFriendly"></label>
</ul>
<script src="js/vapi-common.js"></script>
<script src="js/vapi-client.js"></script>