Browse Source

fine tune various UI aspects

- more choices of matrix text size
- more accurate wording for matrix switches
- info links for various matrix switches
pull/2/head
Raymond Hill 7 years ago
parent
commit
157045924b
No known key found for this signature in database GPG Key ID: 25E1490B761470C2
  1. 10
      src/_locales/en/messages.json
  2. 116
      src/css/popup.css
  3. 2
      src/js/background.js
  4. 29
      src/js/popup.js
  5. 10
      src/js/settings.js
  6. 12
      src/js/start.js
  7. 25
      src/popup.html
  8. 4
      src/settings.html

10
src/_locales/en/messages.json

@ -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" : {

116
src/css/popup.css

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

2
src/js/background.js

@ -98,7 +98,7 @@ return {
deleteUnusedSessionCookies: false,
deleteUnusedSessionCookiesAfter: 60,
deleteLocalStorage: false,
displayTextSize: '13px',
displayTextSize: '14px',
externalHostsFiles: '',
iconBadgeEnabled: false,
maxLoggedRequests: 1000,

29
src/js/popup.js

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

10
src/js/settings.js

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

12
src/js/start.js

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

25
src/popup.html

@ -23,20 +23,9 @@
<div id="toolbarContainer">
<div class="toolbar">
<span class="scope" id="specificScope"><span>&nbsp;</span></span><!--
--><span class="scope" id="globalScope" data-scope="*">&#x2217;</span>
--><span class="scope" id="globalScope" data-scope="*"><span><span>&#x2217;</span></span></span>
<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; 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">
<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">&#xf142;<span class="badge"></span></button>
<button id="buttonPersist" type="button" class="fa scopeRel tip-anchor-left" data-i18n-tip="matrixPersistButtonTip">&#xf023;<span class="badge"></span></button>
<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>
@ -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>&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>
</ul>
</div>
</div>
<div id="noTabFound"></div>
<!-- Convenient to auto-fetch locale strings used in scripts -->

4
src/settings.html

@ -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>&ensp;&minus;<input id="displayTextSize" type="range" min="12" max="18" value="14" style="vertical-align: bottom;">&plus;
<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…
Cancel
Save