further improving UI for small screens

This commit is contained in:
Raymond Hill 2018-03-28 16:15:50 -04:00
parent b65923a00e
commit fce2eaf3c3
No known key found for this signature in database
GPG key ID: 25E1490B761470C2
17 changed files with 213 additions and 212 deletions

View file

@ -17,19 +17,22 @@
<body> <body>
<div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div> <div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="myFiltersPane"></div>
<p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p> <p class="vverbose"><span data-i18n="1pFormatHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Static-filter-syntax" target="_blank">&#xf05a;</a></p>
<p> <p>
<button id="userFiltersApply" class="custom important" type="button" disabled="true" data-i18n="1pApplyChanges"></button>&ensp; <button id="userFiltersApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="1pApplyChanges"></span></button>
<button id="userFiltersRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button> <button id="userFiltersRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
</p> &emsp;&emsp;
<p><div class="codeMirrorContainer" id="userFilters" spellcheck="false"></div></p> <button id="importUserFiltersFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="1pImport"></span></button>
<p> <button id="exportUserFiltersToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
<button id="importUserFiltersFromFile" class="custom" data-i18n="1pImport"></button>&ensp; </p>
<button id="exportUserFiltersToFile" class="custom" data-i18n="1pExport"></button> </div>
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput"> <div id="userFilters" class="codeMirrorContainer codeMirrorFillVertical" spellcheck="false"></div>
</p> <div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">
</div>
<script src="lib/codemirror/lib/codemirror.js"></script> <script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/display/panel.js"></script> <script src="lib/codemirror/addon/display/panel.js"></script>

View file

@ -12,29 +12,29 @@
<body> <body>
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div> <div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="tpFiltersPane"></div>
<div> <div>
<ul id="options"> <ul id="options">
<li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button> <li><button id="buttonUpdate" class="custom important disabled" data-i18n="3pUpdateNow"></button>
<button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button> <button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
<button id="buttonApply" class="custom important disabled" data-i18n="3pApplyChanges"></button> <button id="buttonApply" class="custom important disabled" data-i18n="3pApplyChanges"></button>
<li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp; <li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp;
<li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label><button class="whatisthis"></button> <li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div> <div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
<li><input type="checkbox" id="ignoreGenericCosmeticFilters"><label data-i18n="3pIgnoreGenericCosmeticFilters" for="ignoreGenericCosmeticFilters"></label><button class="whatisthis"></button> <li><input type="checkbox" id="ignoreGenericCosmeticFilters"><label data-i18n="3pIgnoreGenericCosmeticFilters" for="ignoreGenericCosmeticFilters"></label><button class="whatisthis"></button>
<div class="whatisthis-expandable para" data-i18n="3pIgnoreGenericCosmeticFiltersInfo"></div> <div class="whatisthis-expandable para" data-i18n="3pIgnoreGenericCosmeticFiltersInfo"></div>
</ul> </ul>
<p><span id="listsOfBlockedHostsPrompt"></span></p> <p><span id="listsOfBlockedHostsPrompt"></span></p>
<ul id="lists"></ul> <ul id="lists"></ul>
</div>
<div id="externalListsDiv">
<p>
<span data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></span>
<a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">&#xf05a;</a>
<textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
</div> </div>
<div id="externalListsDiv">
<p>
<span data-i18n="3pExternalListsHint" style="margin: 0 0 0.25em 0; font-size: 13px;"></span>
<a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Filter-lists-from-around-the-web" target="_blank">&#xf05a;</a>
<textarea id="externalLists" dir="ltr" spellcheck="false"></textarea>
</div>
</div>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<ul> <ul>

View file

@ -380,8 +380,8 @@
"description":"English: Custom" "description":"English: Custom"
}, },
"3pExternalListsHint":{ "3pExternalListsHint":{
"message":"One URL per line. Lines prefixed with &lsquo;!&rsquo; will be ignored. Invalid URLs will be silently ignored.", "message":"One URL per line. Lines prefixed with <code>!</code> will be ignored. Invalid URLs will be silently ignored.",
"description":"English: One URL per line. Lines prefixed with &lsquo;!&rsquo; will be ignored. Invalid URLs will be silently ignored." "description":"Short information about how to use the textarea to import external filter lists by URL"
}, },
"3pExternalListObsolete":{ "3pExternalListObsolete":{
"message":"Out of date.", "message":"Out of date.",
@ -400,8 +400,8 @@
"description":"used as a tooltip for error icon beside a list" "description":"used as a tooltip for error icon beside a list"
}, },
"1pFormatHint":{ "1pFormatHint":{
"message":"One filter per line. A filter can be a plain hostname, or an Adblock Plus-compatible filter. Lines prefixed with &lsquo;!&rsquo; will be ignored.", "message":"One filter per line. A filter can be a plain hostname, or an Adblock Plus-compatible filter. Lines prefixed with <code>!</code> will be ignored.",
"description":"English: One filter per line. A filter can be a plain hostname, or an Adblock Plus-compatible filter. Lines prefixed with &lsquo;!&rsquo; will be ignored." "description":"Short information about how to create custom filters"
}, },
"1pImport":{ "1pImport":{
"message":"Import and append", "message":"Import and append",

View file

@ -10,22 +10,24 @@
<body> <body>
<p id="aboutNameVer"></p> <div class="body">
<ul> <p id="aboutNameVer"></p>
<li><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a> <ul>
<li><a href="https://github.com/gorhill/uBlock/wiki" data-i18n="aboutWiki"></a> <li><a href="https://github.com/gorhill/uBlock/releases" data-i18n="aboutChangelog"></a>
<li><a href="https://www.reddit.com/r/uBlockOrigin/" data-i18n="aboutSupport"></a> <li><a href="https://github.com/gorhill/uBlock/wiki" data-i18n="aboutWiki"></a>
<li><a href="https://github.com/gorhill/uBlock" data-i18n="aboutCode"></a> <li><a href="https://www.reddit.com/r/uBlockOrigin/" data-i18n="aboutSupport"></a>
<li><span data-i18n="aboutContributors"></span> <li><a href="https://github.com/gorhill/uBlock" data-i18n="aboutCode"></a>
<ul> <li><span data-i18n="aboutContributors"></span>
<li><a href="https://github.com/gorhill/uBlock/graphs/contributors">GitHub</a> <ul>
<li><a href="https://crowdin.net/project/ublock">Crowdin</a> <li><a href="https://github.com/gorhill/uBlock/graphs/contributors">GitHub</a>
</ul> <li><a href="https://crowdin.net/project/ublock">Crowdin</a>
<li><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a> </ul>
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a> <li><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a>
<li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a> <li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a>
<li><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a> <li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a>
</ul> <li><a href="https://github.com/Swatinem/diff" target="_blank">An implementation of Myers' diff algorithm</a> by <a href="https://github.com/Swatinem">Arpad Borsos</a>
</ul>
</div>
<script src="js/vapi.js"></script> <script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>

View file

@ -10,10 +10,12 @@
</head> </head>
<body> <body>
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a> <div class="body">
<p> <p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
<button id="advancedSettingsApply" class="custom important" type="button" disabled="true" data-i18n="genericApplyChanges"></button>&ensp; <p>
<p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea> <button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
<p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea>
</div>
<script src="js/vapi.js"></script> <script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>

View file

@ -1,11 +1,8 @@
div > p:first-child { body {
margin-top: 0; overflow: hidden;
}
div > p:last-child {
margin-bottom: 0;
} }
#userFilters { #userFilters {
height: 60vh; height: 75vh;
text-align: left; text-align: left;
width: 100%; width: 100%;
word-wrap: normal; word-wrap: normal;

View file

@ -1,9 +1,3 @@
div > p:first-child {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
}
textarea { textarea {
box-sizing: border-box; box-sizing: border-box;
height: 60vh; height: 60vh;

View file

@ -4,7 +4,6 @@
position: relative; position: relative;
} }
.CodeMirror { .CodeMirror {
border: 1px solid #ddd;
box-sizing: border-box; box-sizing: border-box;
flex-grow: 1; flex-grow: 1;
height: 100%; height: 100%;

View file

@ -20,6 +20,10 @@ body {
color: black; color: black;
font: 14px sans-serif; font: 14px sans-serif;
} }
code {
background-color: #eee;
padding: 0 0.25em;
}
textarea { textarea {
font-size: 90%; font-size: 90%;
} }
@ -35,8 +39,18 @@ button.custom {
color: #000; color: #000;
opacity: 0.8; opacity: 0.8;
} }
button.custom:hover {
opacity: 1.0;
}
button.custom.important {
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
}
button.custom.disabled, button.custom.disabled,
button.custom[disabled] { button.custom[disabled],
button.custom.important.disabled,
button.custom.important[disabled] {
border-color: #ddd #ddd hsl(36, 0%, 85%); border-color: #ddd #ddd hsl(36, 0%, 85%);
background-color: hsl(36, 0%, 72%); background-color: hsl(36, 0%, 72%);
background-image: linear-gradient(#f2f2f2, #dddddd); background-image: linear-gradient(#f2f2f2, #dddddd);
@ -44,25 +58,25 @@ button.custom[disabled] {
opacity: 0.6; opacity: 0.6;
pointer-events: none; pointer-events: none;
} }
button.custom:hover { button.custom.iconifiable > .fa {
opacity: 1.0; padding-right: 0.5em;
} }
button.important { body[dir="rtl"] button.custom.iconifiable > .fa {
padding: 0.6em 1em; padding-left: 0.5em;
border: 1px solid transparent;
border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
border-radius: 3px;
background-color: hsl(36, 100%, 75%);
background-image: linear-gradient(#ffdca8, #ffcc7f);
background-repeat: repeat-x;
color: #222;
opacity: 0.8;
} }
button.important:hover { .hidden {
opacity: 1.0; display: none;
}
.hiddenFileInput {
height: 0; height: 0;
visibility: hidden; visibility: hidden;
width: 0; width: 0;
} }
@media (max-width: 640px) {
button.custom.iconifiable > .fa {
font-size: 150%;
padding: 0;
}
button.custom.iconifiable > [data-i18n] {
display: none;
}
}

View file

@ -1,5 +1,15 @@
body { body {
box-sizing: border-box;
left: 0;
height: 100vh;
margin: 0; margin: 0;
overflow: auto;
padding: 0;
position: absolute;
right: 0;
top: 0;
}
body > div.body {
padding: 0 0.5em 0.5em 0.5em; padding: 0 0.5em 0.5em 0.5em;
} }
@media screen and (max-device-width: 960px) { @media screen and (max-device-width: 960px) {
@ -33,12 +43,6 @@ a.info.important {
button { button {
padding: 0.33em; padding: 0.33em;
} }
div > p:first-child {
margin-top: 0;
}
div > p:last-child {
margin-bottom: 0;
}
input[type="number"] { input[type="number"] {
width: 5em; width: 5em;
} }

View file

@ -1,11 +1,7 @@
body { body {
bottom: 0;
display: flex; display: flex;
left: 0;
position: absolute;
right: 0;
top: 0;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
#diff { #diff {
border: 0; border: 0;
@ -42,53 +38,16 @@ body {
#ruleFilter .fa { #ruleFilter .fa {
color: #888; color: #888;
} }
body[dir="ltr"] #revertButton:after {
content: '\2009\f061';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="rtl"] #revertButton:after {
content: '\2009\f060';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="ltr"] #commitButton:before {
content: '\f060\2009';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
body[dir="rtl"] #commitButton:before {
content: '\f061\2009';
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
vertical-align: baseline;
display: inline-block;
}
#revertButton, #revertButton,
#commitButton, #commitButton,
#diff.editing #exportButton, #diff.editing #exportButton,
#diff.editing #importButton, #diff.editing #importButton {
#editSaveButton {
opacity: 0.25; opacity: 0.25;
pointer-events: none; pointer-events: none;
} }
#diff.dirty:not(.editing) #revertButton, #diff.dirty:not(.editing) #revertButton,
#diff.dirty:not(.editing) #commitButton, #diff.dirty:not(.editing) #commitButton,
#diff.editing #editSaveButton { #diff.editing {
opacity: 1; opacity: 1;
pointer-events: auto; pointer-events: auto;
} }

View file

@ -1,11 +1,8 @@
div > p:first-child { body {
margin-top: 0; overflow: hidden;
}
div > p:last-child {
margin-bottom: 0;
} }
#whitelist { #whitelist {
height: 60vh; height: 75vh;
text-align: left; text-align: left;
width: 100%; width: 100%;
} }

View file

@ -16,26 +16,27 @@
<body> <body>
<div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div> <div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div>
<p class="vverbose"><span data-i18n="rulesHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dynamic-filtering:-rule-syntax" target="_blank">&#xf05a;</a></p> <p class="vverbose"><span data-i18n="rulesHint"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dynamic-filtering:-rule-syntax" target="_blank">&#xf05a;</a></p>
<div id="diff"> <div id="diff">
<div class="tools"> <div class="tools">
<div class="ruleActions"> <div class="ruleActions">
<h3 data-i18n="rulesPermanentHeader"></h3> <h3 data-i18n="rulesPermanentHeader"></h3>
<button type="button" class="custom" id="exportButton" data-i18n="rulesExport"></button> <button type="button" class="custom iconifiable" id="exportButton"><span class="fa">&#xf093;</span><span data-i18n="rulesExport"></span></button>
<button type="button" class="custom" id="revertButton" data-i18n="rulesRevert"></button> <button type="button" class="custom iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
</div>
<div class="ruleActions">
<h3 data-i18n="rulesTemporaryHeader"></h3>
<button type="button" class="custom iconifiable" id="commitButton"><span class="fa">&#xf060;</span><span data-i18n="rulesCommit"></span></button>
<button type="button" class="custom iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="custom iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
</div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div>
</div> </div>
<div class="ruleActions">
<h3 data-i18n="rulesTemporaryHeader"></h3>
<button type="button" class="custom" id="commitButton" data-i18n="rulesCommit"></button>
<button type="button" class="custom" id="importButton" data-i18n="rulesImport"></button>
<button type="button" class="custom" id="editSaveButton" data-i18n="rulesEditSave"></button>
</div>
<div id="ruleFilter"><span class="fa">&#xf0b0;</span>&ensp;<input type="text" size="20"></div>
</div> </div>
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
</div> </div>
<div class="codeMirrorContainer codeMirrorMergeContainer codeMirrorFillVertical"></div>
<div id="templates" style="display: none;"> <div id="templates" style="display: none;">
<input class="hidden" id="importFilePicker" type="file" accept="text/plain"> <input class="hidden" id="importFilePicker" type="file" accept="text/plain">

View file

@ -1,7 +1,7 @@
/******************************************************************************* /*******************************************************************************
uBlock Origin - a browser extension to block requests. uBlock Origin - a browser extension to block requests.
Copyright (C) 2014-2016 Raymond Hill Copyright (C) 2014-2018 Raymond Hill
This program is free software: you can redistribute it and/or modify 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 it under the terms of the GNU General Public License as published by
@ -168,7 +168,24 @@ self.uBlockDashboard.patchCodeMirrorEditor = (function() {
grabFocusAsync(cm); grabFocusAsync(cm);
}; };
var resizeTimer;
var resize = function() {
resizeTimer = undefined;
let prect = document.body.getBoundingClientRect();
let child = document.querySelector('.codeMirrorFillVertical');
let crect = child.getBoundingClientRect();
let height = Math.max(prect.bottom - crect.top, 80);
child.style.height = height + 'px';
};
return function(cm) { return function(cm) {
if ( document.querySelector('.codeMirrorFillVertical') !== null ) {
resize();
window.addEventListener('resize', function() {
if ( resizeTimer !== undefined ) { return; }
resizeTimer = vAPI.setTimeout(resize, 66);
});
}
if ( cm.options.inputStyle === 'contenteditable' ) { if ( cm.options.inputStyle === 'contenteditable' ) {
cm.on('beforeSelectionChange', patchSelectAll); cm.on('beforeSelectionChange', patchSelectAll);
} }

View file

@ -327,6 +327,10 @@ var onTextChanged = (function() {
} }
diff.classList.toggle('editing', isClean === false); diff.classList.toggle('editing', isClean === false);
diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0); diff.classList.toggle('dirty', mergeView.leftChunks().length !== 0);
document.getElementById('editSaveButton').classList.toggle(
'disabled',
isClean
);
var input = document.querySelector('#ruleFilter input'); var input = document.querySelector('#ruleFilter input');
if ( isClean ) { if ( isClean ) {
input.removeAttribute('disabled'); input.removeAttribute('disabled');

View file

@ -10,50 +10,51 @@
</head> </head>
<body> <body>
<div class="body">
<ul id="userSettings"> <ul id="userSettings">
<li><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label> <li><input id="collapse-blocked" type="checkbox" data-setting-name="collapseBlocked" data-setting-type="bool"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
<li><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label> <li><input id="icon-badge" type="checkbox" data-setting-name="showIconBadge" data-setting-type="bool"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
<li><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label> <li><input id="context-menu-enabled" type="checkbox" data-setting-name="contextMenuEnabled" data-setting-type="bool"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
<li><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label> <li><input id="tooltips-disabled" type="checkbox" data-setting-name="tooltipsDisabled" data-setting-type="bool"><label data-i18n="settingsTooltipsPrompt" for="tooltips-disabled"></label>
<li><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label> <li><input id="color-blind-friendly" type="checkbox" data-setting-name="colorBlindFriendly" data-setting-type="bool"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label>
<li><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a> <li><input id="cloud-storage-enabled" type="checkbox" data-setting-name="cloudStorageEnabled" data-setting-type="bool"><label data-i18n="settingsCloudStorageEnabledPrompt" for="cloud-storage-enabled"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Cloud-storage" target="_blank">&#xf05a;</a>
<li><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" title="settingsAdvancedUserSettings">&#xf085;</a> <li><input id="advanced-user-enabled" type="checkbox" data-setting-name="advancedUserEnabled" data-setting-type="bool"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label> <a class="fa info" href="advanced-settings.html" title="settingsAdvancedUserSettings">&#xf085;</a>
<li class="subgroup"><span data-i18n="3pGroupPrivacy"></span><ul> <li class="subgroup"><span data-i18n="3pGroupPrivacy"></span><ul>
<li><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://wikipedia.org/wiki/Link_prefetching#Issues_and_criticisms" target="_blank">&#xf05a;</a> <li><input id="prefetching-disabled" type="checkbox" data-setting-name="prefetchingDisabled" data-setting-type="bool"><label data-i18n="settingsPrefetchingDisabledPrompt" for="prefetching-disabled"></label> <a class="fa info" href="https://wikipedia.org/wiki/Link_prefetching#Issues_and_criticisms" target="_blank">&#xf05a;</a>
<li><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Disable-hyperlink-auditing-beacon" target="_blank">&#xf05a;</a> <li><input id="hyperlink-auditing-disabled" type="checkbox" data-setting-name="hyperlinkAuditingDisabled" data-setting-type="bool"><label data-i18n="settingsHyperlinkAuditingDisabledPrompt" for="hyperlink-auditing-disabled"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Disable-hyperlink-auditing-beacon" target="_blank">&#xf05a;</a>
<li><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a> <li><input id="webrtc-ipaddress-hidden" type="checkbox" data-setting-name="webrtcIPAddressHidden" data-setting-type="bool"><label data-i18n="settingsWebRTCIPAddressHiddenPrompt" for="webrtc-ipaddress-hidden"></label> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Prevent-WebRTC-from-leaking-local-IP-address" target="_blank">&#xf05a;</a>
<li><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a> <li><input id="no-csp-reports" type="checkbox" data-setting-name="noCSPReports" data-setting-type="bool"><label data-i18n="settingsNoCSPReportsPrompt" for="no-csp-reports"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Settings#block-csp-reports" target="_blank">&#xf05a;</a>
</ul>
<li class="subgroup"><span data-i18n="settingPerSiteSwitchGroup"></span><ul>
<li><label class="synopsis"><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label>
<li><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a>
<li><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a>
<li><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a>
</ul>
</ul>
<div id="localData" style="margin: 0 1em;">
<div style="margin: 2.5em 0; border-top: 1px solid #ccc;"></div>
<ul>
<li>
<li style="display: none;"><span data-i18n="settingsLastBackupPrompt"></span><ul>
<li>
</ul> </ul>
<li style="display: none;"><span data-i18n="settingsLastRestorePrompt"></span><ul> <li class="subgroup"><span data-i18n="settingPerSiteSwitchGroup"></span><ul>
<li> <li><label class="synopsis"><span data-i18n="settingPerSiteSwitchGroupSynopsis"></span> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches" target="_blank">&#xf05a;</a></label>
<li> <li><input id="no-cosmetic-filtering" type="checkbox" data-setting-name="noCosmeticFiltering" data-setting-type="bool"><label data-i18n="settingsNoCosmeticFilteringPrompt" for="no-cosmetic-filtering"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-cosmetic-filtering" target="_blank">&#xf05a;</a>
<li><input id="no-large-media" type="checkbox" data-setting-name="noLargeMedia" data-setting-type="bool"><label data-i18n="settingsNoLargeMediaPrompt" for="no-large-media"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-large-media-elements" target="_blank">&#xf05a;</a>
<li><input id="no-remote-fonts" type="checkbox" data-setting-name="noRemoteFonts" data-setting-type="bool"><label data-i18n="settingsNoRemoteFontsPrompt" for="no-remote-fonts"></label> <a class="fa info" href="https://github.com/gorhill/uBlock/wiki/Per-site-switches#no-remote-fonts" target="_blank">&#xf05a;</a>
</ul> </ul>
</ul> </ul>
</div>
<div style="margin: 2.5em 1em;"> <div id="localData" style="margin: 0 1em;">
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp; <div style="margin: 2.5em 0; border-top: 1px solid #ccc;"></div>
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button> <ul>
<input id="restoreFilePicker" type="file" accept="text/plain" class="hiddenFileInput"> <li>
<p> <li style="display: none;"><span data-i18n="settingsLastBackupPrompt"></span><ul>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button> <li>
</div> </ul>
<li style="display: none;"><span data-i18n="settingsLastRestorePrompt"></span><ul>
<li>
<li>
</ul>
</ul>
</div>
<div style="margin: 2.5em 1em;">
<p><button class="custom" type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
<button class="custom" type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
<input id="restoreFilePicker" type="file" accept="text/plain" class="hiddenFileInput">
<p>
<p><button class="custom" type="button" id="reset" data-i18n="aboutResetDataButton"></button>
</div>
</div>
<script src="js/vapi.js"></script> <script src="js/vapi.js"></script>
<script src="js/vapi-common.js"></script> <script src="js/vapi-common.js"></script>

View file

@ -17,17 +17,24 @@
<body> <body>
<div id="cloudWidget" class="hide" data-cloud-entry="whitelistPane"></div> <div class="body">
<div id="cloudWidget" class="hide" data-cloud-entry="whitelistPane"></div>
<p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Whitelist">&#xf05a;</a> <p class="vverbose"><span data-i18n="whitelistPrompt"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Dashboard:-Whitelist">&#xf05a;</a>
<p> </p>
<button id="whitelistApply" class="custom important" type="button" disabled="true" data-i18n="whitelistApply"></button>&ensp; <p>
<button id="whitelistRevert" class="custom" type="button" disabled="true" data-i18n="genericRevert"></button> <button id="whitelistApply" class="custom important iconifiable" type="button" disabled><span class="fa">&#xf00c;</span><span data-i18n="whitelistApply"></span></button>
<p><div id="whitelist" class="codeMirrorContainer"></div> <button id="whitelistRevert" class="custom iconifiable" type="button" disabled><span class="fa">&#xf0e2;</span><span data-i18n="genericRevert"></span></button>
<p> &emsp;&emsp;
<button id="importWhitelistFromFile" class="custom" data-i18n="whitelistImport"></button>&ensp; <button id="importWhitelistFromFile" class="custom iconifiable" type="button"><span class="fa">&#xf019;</span><span data-i18n="whitelistImport"></span></button>
<button id="exportWhitelistToFile" class="custom" data-i18n="whitelistExport"></button> <button id="exportWhitelistToFile" class="custom iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="whitelistExport"></span></button>
<input id="importFilePicker" type="file" accept="text/plain" class="hiddenFileInput"> </p>
</div>
<div id="whitelist" class="codeMirrorContainer codeMirrorFillVertical"></div>
<div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">
</div>
<script src="lib/codemirror/lib/codemirror.js"></script> <script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/display/panel.js"></script> <script src="lib/codemirror/addon/display/panel.js"></script>