Split configs into cats, reflect cats in view (not finished)

This commit is contained in:
Ilya Ig. Petrov 2017-04-21 19:43:30 +05:00
parent bc78bc7c5a
commit c49ef2d9b7
4 changed files with 181 additions and 179 deletions

View File

@ -19,53 +19,72 @@
dflt: false, dflt: false,
label: 'проксировать только HTTP<em>S</em>-сайты', label: 'проксировать только HTTP<em>S</em>-сайты',
desc: 'Проксировать только сайты, доступные по шифрованному протоколу HTTP<em>S</em>. Прокси и провайдер смогут видеть только адреса проксируемых HTTP<em>S</em>-сайтов, но не их содержимое. Используйте, если вы не доверяете прокси-серверам ваш HTTP-трафик. Разумеется, что с этой опцией разблокировка HTTP-сайтов работать не будет.', desc: 'Проксировать только сайты, доступные по шифрованному протоколу HTTP<em>S</em>. Прокси и провайдер смогут видеть только адреса проксируемых HTTP<em>S</em>-сайтов, но не их содержимое. Используйте, если вы не доверяете прокси-серверам ваш HTTP-трафик. Разумеется, что с этой опцией разблокировка HTTP-сайтов работать не будет.',
index: 0, order: 0,
}, },
ifUseSecureProxiesOnly: { ifUseSecureProxiesOnly: {
dflt: false, dflt: false,
label: 'только шифрованная связь с прокси', label: 'только шифрованная связь с прокси',
desc: 'Шифровать соединение до прокси от провайдера, используя только прокси типа HTTPS или локальный Tor. Провайдер всё же сможет видеть адреса (но не содержимое) проксируемых ресурсов из протокола DNS (даже с Tor). Опция вряд ли может быть вам полезна, т.к. шифруется не весь трафик, а лишь разблокируемые ресурсы.', desc: 'Шифровать соединение до прокси от провайдера, используя только прокси типа HTTPS или локальный Tor. Провайдер всё же сможет видеть адреса (но не содержимое) проксируемых ресурсов из протокола DNS (даже с Tor). Опция вряд ли может быть вам полезна, т.к. шифруется не весь трафик, а лишь разблокируемые ресурсы.',
index: 1, order: 1,
}, },
ifProhibitDns: { ifProhibitDns: {
dflt: false, dflt: false,
label: 'запретить опредление по IP/DNS', label: 'запретить опредление по IP/DNS',
desc: 'Пытается запретить скрипту использовать DNS, без которого определение блокировки по IP работать не будет (т.е. будет разблокироваться меньше сайтов). Используйте, чтобы получить прирост в производительности или если вам кажется, что мы проксируем слишком много сайтов. Запрет действует только для скрипта, браузер и др.программы продолжат использование DNS.', desc: 'Пытается запретить скрипту использовать DNS, без которого определение блокировки по IP работать не будет (т.е. будет разблокироваться меньше сайтов). Используйте, чтобы получить прирост в производительности или если вам кажется, что мы проксируем слишком много сайтов. Запрет действует только для скрипта, браузер и др.программы продолжат использование DNS.',
index: 2, order: 2,
}, },
ifProxyOrDie: { ifProxyOrDie: {
dflt: true, dflt: true,
ifDfltMods: true, ifDfltMods: true,
label: 'проксируй или умри!', label: 'проксируй или умри!',
desc: 'Запрещает соединение с сайтами напрямую без прокси в случаях, когда все прокси отказывают. Например, если все ВАШИ прокси вдруг недоступны, то добавленные вручную сайты открываться не будут совсем. Однако смысл опции в том, что она препятствует занесению прокси в чёрные списки Хрома. Рекомендуется не отключать.', desc: 'Запрещает соединение с сайтами напрямую без прокси в случаях, когда все прокси отказывают. Например, если все ВАШИ прокси вдруг недоступны, то добавленные вручную сайты открываться не будут совсем. Однако смысл опции в том, что она препятствует занесению прокси в чёрные списки Хрома. Рекомендуется не отключать.',
index: 3, order: 3,
}, },
ifUsePacScriptProxies: { ifUsePacScriptProxies: {
dflt: true, dflt: true,
category: 'ownProxies',
label: 'использовать прокси PAC-скрипта', label: 'использовать прокси PAC-скрипта',
desc: 'Использовать прокси-сервера от авторов PAC-скрипта.', desc: 'Использовать прокси-сервера от авторов PAC-скрипта.',
index: 4, order: 4,
}, },
ifUseLocalTor: { ifUseLocalTor: {
dflt: false, dflt: false,
category: 'ownProxies',
label: 'использовать СВОЙ локальный Tor', label: 'использовать СВОЙ локальный Tor',
desc: 'Установите <a href="https://rebrand.ly/ac-tor">Tor</a> на свой компьютер и используйте его как прокси-сервер. <a href="https://rebrand.ly/ac-tor">ВАЖНО</a>', desc: 'Установите <a href="https://rebrand.ly/ac-tor">Tor</a> на свой компьютер и используйте его как прокси-сервер. <a href="https://rebrand.ly/ac-tor">ВАЖНО</a>',
index: 5, order: 5,
}, },
exceptions: { exceptions: {
category: 'exceptions',
dflt: null, dflt: null,
}, },
ifMindExceptions: { ifMindExceptions: {
dflt: true, dflt: true,
category: 'exceptions',
label: 'учитывать исключения', label: 'учитывать исключения',
desc: 'Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.', desc: 'Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.',
index: 6, order: 6,
},
ifProxyErrors: {
dflt: false,
category: 'exceptions',
label: 'проксировать <a href>выбранные</a> ошибки',
desc: 'Предлагать добавить сайт в исключения при выбранных ошибках',
order: 7,
}, },
customProxyStringRaw: { customProxyStringRaw: {
dflt: '', dflt: '',
category: 'ownProxies',
label: 'использовать СВОИ прокси', label: 'использовать СВОИ прокси',
url: 'https://rebrand.ly/ac-own-proxy', url: 'https://rebrand.ly/ac-own-proxy',
index: 7, order: 8,
},
ifProxyMoreDomains: {
dflt: false,
category: 'ownProxies',
label: 'проксировать .onion, .i2p и OpenNIC',
desc: 'Проксировать особые домены. Необходима поддержка со стороны прокси.',
order: 9,
}, },
}; };
@ -91,17 +110,21 @@
}; };
const getOrderedConfigsForUser = function getOrderedConfigs() { const getOrderedConfigsForUser = function getOrderedConfigs(category) {
const pacMods = getCurrentConfigs(); const pacMods = getCurrentConfigs();
return Object.keys(configs).reduce((arr, key) => { return Object.keys(configs)
.sort((keyA, keyB) => configs[keyA].order - configs[keyB].order)
.reduce((arr, key) => {
const conf = configs[key]; const conf = configs[key];
if(typeof(conf.index) === 'number') { if(typeof(conf.order) === 'number') {
arr[conf.index] = conf; if(!category || category === (conf.category || 'general')) {
arr.push(conf);
conf.value = pacMods[key]; conf.value = pacMods[key];
conf.key = key; conf.key = key;
} }
}
return arr; return arr;
}, []); }, []);
@ -322,6 +345,7 @@
new RegExp(kitchenStartsMark + '[\\s\\S]*$', 'g'), new RegExp(kitchenStartsMark + '[\\s\\S]*$', 'g'),
'' ''
); );
/a/.test('a'); // GC RegExp.input and friends.
return chrome.proxy.settings.set(details, chromified(cb)); return chrome.proxy.settings.set(details, chromified(cb));
} }
} }

View File

@ -213,7 +213,7 @@
getSortedEntriesForProviders() { getSortedEntriesForProviders() {
return Object.entries(this.pacProviders).sort((entryA, entryB) => entryA[1].order - entryB[1].order); return Object.entries(this.pacProviders).sort((entryA, entryB) => entryA[1].order - entryB[1].order).map(([key, prov]) => Object.assign({key: key}, prov));
}, },

View File

@ -177,6 +177,7 @@
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.nav-labels { .nav-labels {
background-color: #eef;
text-align: center; text-align: center;
} }
.nav-labels li label { .nav-labels li label {
@ -508,52 +509,7 @@
<section data-for="acc-own"> <section data-for="acc-own">
<ul id="owns-foo"> <ul id="own-proxies">
<li class="info-row hor-flex">
<input type="checkbox" id="mods-if-mind-exceptions" checked="">
<div class="label-container">
<label for="mods-if-mind-exceptions"> Использовать СВОЙ локальный Tor</label>
</div><div class="desc">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
<div class="tooltip">Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.</div>
</div>
</li>
<li class="info-row hor-flex" style="flex-wrap: wrap;">
<input type="checkbox" id="mods-custom-proxy-string-raw">
<div class="label-container">
<label for="mods-custom-proxy-string-raw"> использовать СВОИ прокси</label>
</div>
<a href="https://rebrand.ly/ac-own-proxy" class="right-bottom-icon info-url">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
</a>
<textarea spellcheck="false" placeholder="SOCKS5 localhost:9050; # Tor Expert
SOCKS5 localhost:9150; # Tor Browser
HTTPS 11.22.33.44:3143;
PROXY foobar.com:8080; # Not HTTP!"></textarea>
</li>
<li class="info-row hor-flex">
<input type="checkbox" id="mods-if-mind-exceptions" checked="">
<div class="label-container">
<label for="mods-if-mind-exceptions"> Проксировать .onion, .i2p, .bit и др.</label>
</div><div class="desc">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
<div class="tooltip">Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.</div>
</div>
</li>
<li class="info-row hor-flex">
<input type="checkbox" id="mods-if-mind-exceptions" checked="">
<div class="label-container">
<label for="mods-if-mind-exceptions"> Проксировать <a href>некоторые</a> ошибки</label>
</div><div class="desc">
<svg class="icon" style="position: relative; top: 0.08em"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-info"></use></svg>
<div class="tooltip">Учитывать сайты, добавленные вручную. Только для своих прокси-серверов! Без своих прокси работать не будет.</div>
</div>
</li>
<li class="control-row hor-flex"> <li class="control-row hor-flex">
<input type="button" value="Применить" id="apply-mods" disabled/> <input type="button" value="Применить" id="apply-mods" disabled/>
<a href id="bar-reset-mods">К изначальным!</a> <a href id="bar-reset-mods">К изначальным!</a>

View File

@ -158,11 +158,9 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
}; };
const infoIcon = ` const infoIcon = `<svg class="icon" style="position: relative; top: 0.08em">
<svg class="icon" <use xlink:href="#icon-info"></use>
style="position: relative; top: 0.08em"><use xlink:href="#icon-info"></use></svg> </svg>`;
<!--span style="font-size: 1.3em" class="emoji">🛈(looks huge)</span-->
`;
const infoSign = function infoSign(tooltip) { const infoSign = function infoSign(tooltip) {
@ -173,22 +171,31 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
}; };
const infoUrl = (url) => `<a href="${url}" class="right-bottom-icon info-url">${infoIcon}</a>`;
const appendInfoRow = (mountEl, conf, inputTypeName, inputId, htmlAfterLabel = '') => {
mountEl.classList.add('info-row', 'hor-flex');
mountEl.innerHTML = `
<input ${inputTypeName} id="${inputId}">
<div class="label-container">
<label for="${inputId}"> ${conf.label}</label>
${htmlAfterLabel}
</div>` + (conf.desc ? infoSign(conf.desc) : infoUrl(conf.url));
};
{ {
const ul = document.querySelector('#list-of-providers'); const ul = document.querySelector('#list-of-providers');
const _firstChild = ul.firstChild; const _firstChild = ul.firstChild;
for( for(
const [providerKey, provider] of antiCensorRu.getSortedEntriesForProviders() const provConf of antiCensorRu.getSortedEntriesForProviders()
) { ) {
const li = document.createElement('li'); const li = document.createElement('li');
li.classList.add('info-row', 'hor-flex'); appendInfoRow(li, provConf, 'type="radio" name="pacProvider"', provConf.key, `
li.innerHTML = `
<input type="radio" name="pacProvider" id="${providerKey}">
<div class="label-container">
<label for="${providerKey}"> ${provider.label}</label>
&nbsp;<a href class="link-button update-button" &nbsp;<a href class="link-button update-button"
id="update-${providerKey}">[обновить]</a> id="update-${provConf.key}">[обновить]</a>
</div>` + `);
infoSign(provider.desc);
li.querySelector('.link-button').onclick = li.querySelector('.link-button').onclick =
() => { () => {
conduct( conduct(
@ -255,13 +262,12 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
document.documentElement.classList.add('if-options-page'); document.documentElement.classList.add('if-options-page');
} }
// EXCEPTIONS PANEL
{ { // KITCHEN PANELS starts.
const pacKitchen = backgroundPage.apis.pacKitchen; const pacKitchen = backgroundPage.apis.pacKitchen;
{ { // EXCEPTIONS TAB starts.
const excEditor = document.getElementById('exc-editor'); const excEditor = document.getElementById('exc-editor');
@ -518,41 +524,36 @@ chrome.runtime.getBackgroundPage( (backgroundPage) =>
}; };
} } // EXCEPTIONS TAB ends.
// PAC MODS PANEL const camelToDash = (name) => name.replace(/([A-Z])/g, (_, p) => '-' + p.toLowerCase());
const modPanel = document.getElementById('pac-mods'); { // OWN PROXIES TAB starts.
const _firstChild = modPanel.firstChild;
const ownsList = document.getElementById('own-proxies');
const _firstChild = ownsList.firstChild;
const keyToLi = {}; const keyToLi = {};
const customProxyStringKey = 'customProxyStringRaw'; const customProxyStringKey = 'customProxyStringRaw';
const uiRaw = 'ui-proxy-string-raw'; const uiRaw = 'ui-proxy-string-raw';
for(const conf of pacKitchen.getOrderedConfigs()) { for(const conf of pacKitchen.getOrderedConfigs('ownProxies')) {
const key = conf.key; const key = conf.key;
const iddy = 'mods-' + conf.key.replace(/([A-Z])/g, (_, p) => '-' + p.toLowerCase()); const iddy = 'mods-' + camelToDash(conf.key);
const li = document.createElement('li'); const li = document.createElement('li');
li.classList.add('info-row', 'hor-flex'); appendInfoRow(li, conf, `type="checkbox" ${conf.value ? 'checked' : ''}`, iddy);
keyToLi[key] = li;
const ifMultiline = key === customProxyStringKey;
li.innerHTML = `
<input type="checkbox" id="${iddy}" ${ conf.value ? 'checked' : '' }/>
<div class="label-container">
<label for="${iddy}"> ${ conf.label }</label>
</div>`;
if (!ifMultiline) { const ifMultiline = key === customProxyStringKey;
li.innerHTML += infoSign(conf.desc); if (ifMultiline) {
} else {
li.style.flexWrap = 'wrap'; li.style.flexWrap = 'wrap';
li.innerHTML += `<a href="${conf.url}" class="right-bottom-icon info-url">${infoIcon}</a> li.innerHTML += `
<textarea <textarea
spellcheck="false" spellcheck="false"
placeholder="SOCKS5 localhost:9050; # Tor Expert placeholder="SOCKS5 localhost:9050; # Tor Expert
SOCKS5 localhost:9150; # Tor Browser SOCKS5 localhost:9150; # Tor Browser
HTTPS 11.22.33.44:3143; HTTPS 11.22.33.44:3143;
PROXY foobar.com:8080; # Not HTTP!">${conf.value || localStorage.getItem(uiRaw) || ''}</textarea>`; PROXY foobar.com:8080; # Not HTTP!">${conf.value || localStorage.getItem(uiRaw) || ''}</textarea>
`;
li.querySelector('textarea').onkeyup = function() { li.querySelector('textarea').onkeyup = function() {
this.dispatchEvent( new Event('change', {'bubbles': true}) ); this.dispatchEvent( new Event('change', {'bubbles': true}) );
@ -560,7 +561,26 @@ PROXY foobar.com:8080; # Not HTTP!">${conf.value || localStorage.getItem(uiRaw)
}; };
} }
modPanel.insertBefore( li, _firstChild ); ownsList.insertBefore( li, _firstChild );
}
} // OWN PROXIES TAB ends.
{ // PAC MODS TAB starts.
const modsList = document.getElementById('pac-mods');
const _firstChild = modsList.firstChild;
const keyToLi = {};
for(const conf of pacKitchen.getOrderedConfigs('general')) {
const key = conf.key;
const iddy = 'mods-' + camelToDash(conf.key);
const li = document.createElement('li');
appendInfoRow(li, conf, `type="checkbox" ${conf.value ? 'checked' : ''}`, iddy);
keyToLi[key] = li;
modsList.insertBefore( li, _firstChild );
}; };
document.getElementById('apply-mods').onclick = () => { document.getElementById('apply-mods').onclick = () => {
@ -635,7 +655,9 @@ PROXY foobar.com:8080; # Not HTTP!">${conf.value || localStorage.getItem(uiRaw)
}; };
} } // PAC MODS TAB ends.
} // KITCHEN PANELS ends.
// NOTIFICATIONS PANEL // NOTIFICATIONS PANEL