mirror of
https://github.com/gorhill/uMatrix.git
synced 2024-06-14 00:05:08 +12:00
fine tune various UI aspects
- more choices of matrix text size - more accurate wording for matrix switches - info links for various matrix switches
This commit is contained in:
parent
c1325d06b7
commit
157045924b
|
@ -112,15 +112,19 @@
|
|||
"description": "Appears in the metadata row of bottom-most group: **mind the limited width**"
|
||||
},
|
||||
"matrixSwitchNoMixedContent" : {
|
||||
"message": "Strict HTTPS",
|
||||
"message": "Forbid mixed content",
|
||||
"description": "A menu entry in the matrix popup"
|
||||
},
|
||||
"matrixSwitchNoWorker" : {
|
||||
"message": "Forbid web workers",
|
||||
"description": "A menu entry in the matrix popup"
|
||||
},
|
||||
"matrixSwitchReferrerSpoof" : {
|
||||
"message": "Referrer spoofing",
|
||||
"message": "Spoof <code>Referer</code> header",
|
||||
"description": "A menu entry in the matrix popup"
|
||||
},
|
||||
"matrixSwitchNoscriptSpoof" : {
|
||||
"message": "<code><noscript></code> tags spoofing",
|
||||
"message": "Spoof <code><noscript></code> tags",
|
||||
"description": "A menu entry in the matrix popup"
|
||||
},
|
||||
"matrixRevertAllEntry" : {
|
||||
|
|
|
@ -2,7 +2,7 @@ body {
|
|||
background-color: white;
|
||||
border: 0;
|
||||
float: left;
|
||||
font: 13px httpsb,sans-serif;
|
||||
font: 14px httpsb,sans-serif;
|
||||
margin: 0;
|
||||
min-height: 16em;
|
||||
min-width: 32em;
|
||||
|
@ -72,88 +72,103 @@ body[dir="rtl"] #gotoDashboard > span:last-of-type {
|
|||
font-family: sans-serif;
|
||||
line-height: 12px;
|
||||
margin: 0;
|
||||
padding: 02px 0;
|
||||
padding: 2px 0;
|
||||
text-align: center;
|
||||
}
|
||||
#toolbarContainer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.toolbar {
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
display: inline-flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
body .toolbar button {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 4px;
|
||||
font: inherit;
|
||||
background-color: white;
|
||||
border: 0;
|
||||
color: black;
|
||||
opacity: 0.9;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
margin: 0;
|
||||
padding: 0.2em 0.2em 0.1em 0.2em;
|
||||
position: relative;
|
||||
}
|
||||
body .toolbar button:hover {
|
||||
background-color: #eee;
|
||||
opacity: 1;
|
||||
}
|
||||
body .toolbar button.disabled {
|
||||
color: #ccc;
|
||||
}
|
||||
body .toolbar button.fa {
|
||||
font: 1.75em FontAwesome;
|
||||
min-width: 1.1em;
|
||||
font: 1.7em FontAwesome;
|
||||
min-width: 1.4em;
|
||||
}
|
||||
#mtxSwitch_matrix-off.switchTrue {
|
||||
color: #a00;
|
||||
}
|
||||
|
||||
#mtxSwitches > li {
|
||||
align-items: baseline;
|
||||
color: #888;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
#mtxSwitches > li.switchTrue {
|
||||
color: #000;
|
||||
}
|
||||
#mtxSwitches > li:before {
|
||||
#mtxSwitches > li > span:before {
|
||||
font: 110% FontAwesome;
|
||||
}
|
||||
body[dir="ltr"] #mtxSwitches > li:before {
|
||||
padding-right: 0.5em;
|
||||
#mtxSwitches > li > span:first-of-type:before {
|
||||
content: '\f204\a0';
|
||||
}
|
||||
body[dir="rtl"] #mtxSwitches > li:before {
|
||||
padding-left: 0.5em;
|
||||
#mtxSwitches > li.switchTrue > span:first-of-type:before {
|
||||
content: '\f205\a0';
|
||||
}
|
||||
#mtxSwitches > li:before {
|
||||
content: '\f204';
|
||||
}
|
||||
#mtxSwitches > li.switchTrue:before {
|
||||
#mtxSwitches > li > a {
|
||||
color: #000;
|
||||
content: '\f205';
|
||||
opacity: 0;
|
||||
}
|
||||
#mtxSwitches > li:hover > a {
|
||||
opacity: 0.1;
|
||||
}
|
||||
#mtxSwitches > li > a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
margin: 0;
|
||||
.dropdown-menu-capture {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
font-size: 110%;
|
||||
padding: 3px 0 0 0;
|
||||
font: 1rem httpsb,sans-serif;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 300;
|
||||
}
|
||||
.dropdown-menu-capture.show {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-menu {
|
||||
border: 0;
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 3px 0 0 0;
|
||||
position: absolute;
|
||||
white-space: normal;
|
||||
z-index: 50;
|
||||
}
|
||||
.dropdown-menu > ul {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
padding: 0.25em;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
@ -162,7 +177,7 @@ body[dir="rtl"] #mtxSwitches > li:before {
|
|||
color: black;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
padding: 4px 0.5em;
|
||||
padding: 0.2em 0.25em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dropdown-menu > ul > li.dropdown-menu-entry:hover {
|
||||
|
@ -175,23 +190,6 @@ body[dir="rtl"] #mtxSwitches > li:before {
|
|||
.dropdown-menu.show {
|
||||
display: block;
|
||||
}
|
||||
.dropdown-menu-capture {
|
||||
margin: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
opacity: 0.1;
|
||||
display: none;
|
||||
z-index: 40;
|
||||
}
|
||||
.dropdown-menu.show ~ .dropdown-menu-capture {
|
||||
display: block;
|
||||
}
|
||||
|
||||
#buttonReload {
|
||||
margin-left: 1em;
|
||||
|
@ -282,19 +280,22 @@ body .toolbar .scope {
|
|||
border: 1px solid #ccc;
|
||||
box-sizing: content-box;
|
||||
-moz-box-sizing: content-box;
|
||||
display: inline-flex;
|
||||
color: white;
|
||||
display: inline-block;
|
||||
line-height: 2em;
|
||||
margin: 0;
|
||||
padding: 1px;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
body .toolbar .scope > span {
|
||||
align-items: center;
|
||||
display: inline-flex;
|
||||
}
|
||||
body .toolbar .scope > span > span {
|
||||
pointer-events: none;
|
||||
}
|
||||
body .toolbar #specificScope {
|
||||
direction: ltr;
|
||||
display: inline-flex;
|
||||
justify-content: flex-end;
|
||||
text-align: right;
|
||||
width: 16em;
|
||||
}
|
||||
body .toolbar #specificScope.on {
|
||||
|
@ -303,8 +304,7 @@ body .toolbar #specificScope.on {
|
|||
}
|
||||
body .toolbar #specificScope > span {
|
||||
background-color: #ccc;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
body .toolbar #specificScope > span.on {
|
||||
background-color: #24c;
|
||||
|
@ -325,9 +325,9 @@ body .toolbar #specificScope > span:first-of-type {
|
|||
flex: 1;
|
||||
}
|
||||
body .toolbar #globalScope {
|
||||
justify-content: center;
|
||||
margin-left: 1px;
|
||||
text-align: center;
|
||||
width: 2em;
|
||||
width: 1.8em;
|
||||
}
|
||||
body .toolbar #globalScope.on {
|
||||
background-color: #000;
|
||||
|
|
|
@ -98,7 +98,7 @@ return {
|
|||
deleteUnusedSessionCookies: false,
|
||||
deleteUnusedSessionCookiesAfter: 60,
|
||||
deleteLocalStorage: false,
|
||||
displayTextSize: '13px',
|
||||
displayTextSize: '14px',
|
||||
externalHostsFiles: '',
|
||||
iconBadgeEnabled: false,
|
||||
maxLoggedRequests: 1000,
|
||||
|
|
|
@ -1134,7 +1134,7 @@ function initScopeCell() {
|
|||
tld = matrixSnapshot.domain.slice(pos + 1);
|
||||
labels = matrixSnapshot.hostname.slice(0, -tld.length);
|
||||
}
|
||||
var beg = 0, span;
|
||||
var beg = 0, span, label;
|
||||
while ( beg < labels.length ) {
|
||||
pos = labels.indexOf('.', beg);
|
||||
if ( pos === -1 ) {
|
||||
|
@ -1142,18 +1142,22 @@ function initScopeCell() {
|
|||
} else {
|
||||
pos += 1;
|
||||
}
|
||||
span = document.createElement('span');
|
||||
span.setAttribute('data-scope', labels.slice(beg) + tld);
|
||||
span.appendChild(
|
||||
label = document.createElement('span');
|
||||
label.appendChild(
|
||||
document.createTextNode(punycode.toUnicode(labels.slice(beg, pos)))
|
||||
);
|
||||
span = document.createElement('span');
|
||||
span.setAttribute('data-scope', labels.slice(beg) + tld);
|
||||
span.appendChild(label);
|
||||
specificScope.appendChild(span);
|
||||
beg = pos;
|
||||
}
|
||||
if ( tld !== '' ) {
|
||||
label = document.createElement('span');
|
||||
label.appendChild(document.createTextNode(punycode.toUnicode(tld)));
|
||||
span = document.createElement('span');
|
||||
span.setAttribute('data-scope', tld);
|
||||
span.appendChild(document.createTextNode(punycode.toUnicode(tld)));
|
||||
span.appendChild(label);
|
||||
specificScope.appendChild(span);
|
||||
}
|
||||
updateScopeCell();
|
||||
|
@ -1200,10 +1204,9 @@ function updateMatrixSwitches() {
|
|||
|
||||
function toggleMatrixSwitch(ev) {
|
||||
var elem = ev.currentTarget;
|
||||
if ( elem.target.localName === 'a' ) { return; }
|
||||
var pos = elem.id.indexOf('_');
|
||||
if ( pos === -1 ) {
|
||||
return;
|
||||
}
|
||||
if ( pos === -1 ) { return; }
|
||||
var switchName = elem.id.slice(pos + 1);
|
||||
var request = {
|
||||
what: 'toggleMatrixSwitch',
|
||||
|
@ -1310,18 +1313,20 @@ function gotoExtensionURL(ev) {
|
|||
|
||||
function dropDownMenuShow(ev) {
|
||||
var button = ev.target;
|
||||
var menu = button.nextElementSibling;
|
||||
var menuOverlay = document.getElementById(button.getAttribute('data-dropdown-menu'));
|
||||
var butnRect = button.getBoundingClientRect();
|
||||
var viewRect = document.body.getBoundingClientRect();
|
||||
var butnNormalLeft = butnRect.left / (viewRect.width - butnRect.width);
|
||||
menu.classList.add('show');
|
||||
menuOverlay.classList.add('show');
|
||||
var menu = menuOverlay.querySelector('.dropdown-menu');
|
||||
var menuRect = menu.getBoundingClientRect();
|
||||
var menuLeft = butnNormalLeft * (viewRect.width - menuRect.width);
|
||||
menu.style.left = menuLeft.toFixed(0) + 'px';
|
||||
menu.style.top = butnRect.bottom + 'px';
|
||||
}
|
||||
|
||||
function dropDownMenuHide() {
|
||||
uDom('.dropdown-menu').removeClass('show');
|
||||
uDom('.dropdown-menu-capture').removeClass('show');
|
||||
}
|
||||
|
||||
/******************************************************************************/
|
||||
|
@ -1502,7 +1507,7 @@ uDom('#buttonRevertAll').on('click', revertAll);
|
|||
uDom('#buttonReload').on('click', buttonReloadHandler);
|
||||
uDom('.extensionURL').on('click', gotoExtensionURL);
|
||||
|
||||
uDom('body').on('click', '.dropdown-menu-button', dropDownMenuShow);
|
||||
uDom('body').on('click', '[data-dropdown-menu]', dropDownMenuShow);
|
||||
uDom('body').on('click', '.dropdown-menu-capture', dropDownMenuHide);
|
||||
|
||||
uDom('#matList').on('click', '.g4Meta', function(ev) {
|
||||
|
|
|
@ -89,9 +89,8 @@ function onInputChanged(ev) {
|
|||
var target = ev.target;
|
||||
|
||||
switch ( target.id ) {
|
||||
case 'displayTextSizeNormal':
|
||||
case 'displayTextSizeLarge':
|
||||
changeUserSettings('displayTextSize', target.value);
|
||||
case 'displayTextSize':
|
||||
changeUserSettings('displayTextSize', target.value + 'px');
|
||||
break;
|
||||
case 'clearBrowserCache':
|
||||
case 'cloudStorageEnabled':
|
||||
|
@ -172,9 +171,8 @@ vAPI.messaging.send(
|
|||
}
|
||||
});
|
||||
|
||||
uDom('input[name="displayTextSize"]').forEach(function(elem) {
|
||||
elem.prop('checked', elem.val() === userSettings.displayTextSize);
|
||||
});
|
||||
uDom.nodeFromId('displayTextSize').value =
|
||||
parseInt(userSettings.displayTextSize, 10) || 14;
|
||||
|
||||
uDom.nodeFromId('popupScopeLevel').value = userSettings.popupScopeLevel;
|
||||
uDom.nodeFromId('deleteUnusedSessionCookiesAfter').value =
|
||||
|
|
|
@ -163,18 +163,6 @@ var onTabsReady = function(tabs) {
|
|||
};
|
||||
|
||||
var onUserSettingsLoaded = function() {
|
||||
// Version 0.9.0.0
|
||||
// Remove obsolete user settings which may have been loaded.
|
||||
// These are now stored as local settings:
|
||||
delete µm.userSettings.popupCollapseDomains;
|
||||
delete µm.userSettings.popupCollapseSpecificDomains;
|
||||
delete µm.userSettings.popupHideBlacklisted;
|
||||
// These do not exist anymore:
|
||||
delete µm.smartAutoReload;
|
||||
delete µm.userSettings.statsFilters;
|
||||
delete µm.userSettings.subframeColor;
|
||||
delete µm.userSettings.subframeOpacity;
|
||||
|
||||
µm.loadHostsFiles();
|
||||
};
|
||||
|
||||
|
|
|
@ -23,20 +23,9 @@
|
|||
<div id="toolbarContainer">
|
||||
<div class="toolbar">
|
||||
<span class="scope" id="specificScope"><span> </span></span><!--
|
||||
--><span class="scope" id="globalScope" data-scope="*">∗</span>
|
||||
--><span class="scope" id="globalScope" data-scope="*"><span><span>∗</span></span></span>
|
||||
<button id="mtxSwitch_matrix-off" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixMtxButtonTip"><span class="badge"></span></button>
|
||||
<div style="display:inline-block; position:relative; vertical-align:top;">
|
||||
<button id="buttonMtxSwitches" type="button" class="dropdown-menu-button fa scopeRel" tabindex="-1"><span class="badge"></span></button>
|
||||
<div class="dropdown-menu">
|
||||
<ul id="mtxSwitches">
|
||||
<li id="mtxSwitch_referrer-spoof" class="dropdown-menu-entry" data-i18n="matrixSwitchReferrerSpoof">
|
||||
<li id="mtxSwitch_https-strict" class="dropdown-menu-entry" data-i18n="matrixSwitchNoMixedContent">
|
||||
<li id="mtxSwitch_noscript-spoof" class="dropdown-menu-entry" data-i18n="matrixSwitchNoscriptSpoof">
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-menu-capture"></div>
|
||||
</div>
|
||||
|
||||
<button id="buttonMtxSwitches" type="button" class="fa scopeRel" tabindex="-1" data-dropdown-menu="dropDownMenuSwitches"><span class="badge"></span></button>
|
||||
<button id="buttonPersist" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixPersistButtonTip"><span class="badge"></span></button>
|
||||
<button id="buttonRevertScope" type="button" class="fa scopeRel tip-anchor-left" tabindex="-1" data-i18n-tip="matrixRevertButtonTip"></button>
|
||||
<button id="buttonReload" type="button" class="fa tip-anchor-left" data-i18n-tip="matrixReloadButton"></button>
|
||||
|
@ -78,6 +67,16 @@
|
|||
<div id="noNetTrafficPrompt" style="display:none;text-align:center;font-size:large"></div>
|
||||
</div>
|
||||
|
||||
<div id="dropDownMenuSwitches" class="dropdown-menu-capture">
|
||||
<div class="dropdown-menu">
|
||||
<ul id="mtxSwitches">
|
||||
<li id="mtxSwitch_https-strict" class="dropdown-menu-entry"><span data-i18n="matrixSwitchNoMixedContent"></span> <a class="fa" href="https://developer.mozilla.org/docs/Web/Security/Mixed_content" target="_blank"></a>
|
||||
<li id="mtxSwitch_referrer-spoof" class="dropdown-menu-entry"><span data-i18n="matrixSwitchReferrerSpoof"></span> <a class="fa" href="https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer" target="_blank"></a>
|
||||
<li id="mtxSwitch_noscript-spoof" class="dropdown-menu-entry"><span data-i18n="matrixSwitchNoscriptSpoof"></span> <a class="fa" href="https://developer.mozilla.org/docs/Web/HTML/Element/noscript" target="_blank"></a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="noTabFound"></div>
|
||||
|
||||
<!-- Convenient to auto-fetch locale strings used in scripts -->
|
||||
|
|
|
@ -48,9 +48,7 @@ ul > li.separator {
|
|||
</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><span data-i18n="settingsMatrixDisplayTextSizePrompt"></span> −<input id="displayTextSize" type="range" min="12" max="18" value="14" style="vertical-align: bottom;">+
|
||||
<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>
|
||||
|
|
Loading…
Reference in a new issue