Mirrors
/
uBlock
mirror of https://github.com/gorhill/uBlock.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

make use of CodeMirror in "Advanced settings" page

This commit is contained in:
Raymond Hill 2018-08-13 10:21:42 -04:00
parent 3fa72d25df
commit 6db88e67b1
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
3 changed files with 79 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/advanced-settings.html
View File

@ -2,10 +2,15 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title data-i18n="advancedSettingsPageName"></title> <title data-i18n="advancedSettingsPageName"></title>
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
<link rel="stylesheet" type="text/css" href="css/common.css"> <link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css"> <link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
<link rel="stylesheet" type="text/css" href="css/advanced-settings.css"> <link rel="stylesheet" type="text/css" href="css/advanced-settings.css">
<link rel="stylesheet" href="css/codemirror.css">
<link rel="shortcut icon" type="image/png" href="img/icon_16.png"/> <link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
</head> </head>
@ -14,9 +19,13 @@
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a> <p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
<p> <p>
<button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp; <button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
<p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea>
</div> </div>
<div id="advancedSettings" class="codeMirrorContainer codeMirrorFillVertical"></div>
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>
<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>
<script src="js/vapi-client.js"></script> <script src="js/vapi-client.js"></script>

19
src/css/advanced-settings.css
View File

@ -1,8 +1,13 @@
textarea { html {
box-sizing: border-box; height: 100vh;
height: 60vh; overflow: hidden;
text-align: left; }
white-space: pre; body {
width: 100%; overflow: hidden;
word-wrap: normal; }
#advancedSettings {
border-top: 1px solid #ddd;
height: 75vh;
text-align: left;
width: 100%;
} }

94
src/js/advanced-settings.js
View File

@ -1,7 +1,7 @@
/******************************************************************************* /*******************************************************************************
uBlock Origin - a browser extension to block requests. uBlock Origin - a browser extension to block requests.
Copyright (C) 2016 Raymond Hill Copyright (C) 2016-present 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
@ -19,23 +19,36 @@
Home: https://github.com/gorhill/uBlock Home: https://github.com/gorhill/uBlock
*/ */
/* global uDom */ /* global CodeMirror, uDom, uBlockDashboard */
'use strict'; 'use strict';
/******************************************************************************/ /******************************************************************************/
(function() { (function() { // >>>> Start of private namespace
/******************************************************************************/ /******************************************************************************/
var messaging = vAPI.messaging; let messaging = vAPI.messaging;
var cachedData = ''; let noopFunc = function(){};
var rawAdvancedSettings = uDom.nodeFromId('advancedSettings');
let beforeHash = '';
let cmEditor = new CodeMirror(
document.getElementById('advancedSettings'),
{
autofocus: true,
lineNumbers: true,
lineWrapping: true,
styleActiveLine: true
}
);
uBlockDashboard.patchCodeMirrorEditor(cmEditor);
/******************************************************************************/ /******************************************************************************/
var hashFromAdvancedSettings = function(raw) { let hashFromAdvancedSettings = function(raw) {
return raw.trim().replace(/\s+/g, '|'); return raw.trim().replace(/\s+/g, '|');
}; };
@ -43,59 +56,59 @@ var hashFromAdvancedSettings = function(raw) {
// This is to give a visual hint that the content of user blacklist has changed. // This is to give a visual hint that the content of user blacklist has changed.
var advancedSettingsChanged = (function () { let advancedSettingsChanged = (function () {
var timer = null; let timer = null;
var handler = function() { let handler = ( ) => {
timer = null; timer = null;
var changed = hashFromAdvancedSettings(rawAdvancedSettings.value) !== cachedData; let changed = hashFromAdvancedSettings(cmEditor.getValue()) !== beforeHash;
uDom.nodeFromId('advancedSettingsApply').disabled = !changed; uDom.nodeFromId('advancedSettingsApply').disabled = !changed;
CodeMirror.commands.save = changed ? applyChanges : noopFunc;
}; };
return function() { return function() {
if ( timer !== null ) { if ( timer !== null ) { clearTimeout(timer); }
clearTimeout(timer);
}
timer = vAPI.setTimeout(handler, 100); timer = vAPI.setTimeout(handler, 100);
}; };
})(); })();
cmEditor.on('changes', advancedSettingsChanged);
/******************************************************************************/ /******************************************************************************/
function renderAdvancedSettings() { let renderAdvancedSettings = function(first) {
var onRead = function(raw) { let onRead = function(raw) {
cachedData = hashFromAdvancedSettings(raw); beforeHash = hashFromAdvancedSettings(raw);
var pretty = [], let pretty = [],
whitespaces = ' ', whitespaces = ' ',
lines = raw.split('\n'), lines = raw.split('\n'),
max = 0, max = 0;
pos, for ( let line of lines ) {
i, n = lines.length; let pos = line.indexOf(' ');
for ( i = 0; i < n; i++ ) { if ( pos > max ) { max = pos; }
pos = lines[i].indexOf(' ');
if ( pos > max ) {
max = pos;
} }
for ( let line of lines ) {
let pos = line.indexOf(' ');
pretty.push(whitespaces.slice(0, max - pos) + line);
} }
for ( i = 0; i < n; i++ ) { cmEditor.setValue(pretty.join('\n') + '\n');
pos = lines[i].indexOf(' '); if ( first ) {
pretty.push(whitespaces.slice(0, max - pos) + lines[i]); cmEditor.clearHistory();
} }
rawAdvancedSettings.value = pretty.join('\n') + '\n';
advancedSettingsChanged(); advancedSettingsChanged();
rawAdvancedSettings.focus(); cmEditor.focus();
}; };
messaging.send('dashboard', { what: 'readHiddenSettings' }, onRead); messaging.send('dashboard', { what: 'readHiddenSettings' }, onRead);
} };
/******************************************************************************/ /******************************************************************************/
var applyChanges = function() { let applyChanges = function() {
messaging.send( messaging.send(
'dashboard', 'dashboard',
{ {
what: 'writeHiddenSettings', what: 'writeHiddenSettings',
content: rawAdvancedSettings.value content: cmEditor.getValue()
}, },
renderAdvancedSettings renderAdvancedSettings
); );
@ -103,12 +116,17 @@ var applyChanges = function() {
/******************************************************************************/ /******************************************************************************/
// Handle user interaction uDom.nodeFromId('advancedSettings').addEventListener(
uDom('#advancedSettings').on('input', advancedSettingsChanged); 'input',
uDom('#advancedSettingsApply').on('click', applyChanges); advancedSettingsChanged
);
uDom.nodeFromId('advancedSettingsApply').addEventListener(
'click',
applyChanges
);
renderAdvancedSettings(); renderAdvancedSettings(true);
/******************************************************************************/ /******************************************************************************/
})(); })(); // <<<< End of private namespace