Skip to content
This repository was archived by the owner on Mar 17, 2025. It is now read-only.

Commit 5b8690c

Browse files
gorhillhawkeye116477
authored andcommitted
make use of CodeMirror in "Advanced settings" page
1 parent 0dc03dc commit 5b8690c

File tree

3 files changed

+77
-45
lines changed

3 files changed

+77
-45
lines changed

src/advanced-settings.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,15 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
56
<title data-i18n="advancedSettingsPageName"></title>
7+
8+
<link rel="stylesheet" href="lib/codemirror/lib/codemirror.css">
9+
610
<link rel="stylesheet" type="text/css" href="css/common.css">
711
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
812
<link rel="stylesheet" type="text/css" href="css/advanced-settings.css">
13+
<link rel="stylesheet" href="css/codemirror.css">
914
<link rel="shortcut icon" type="image/png" href="img/icon_16.png"/>
1015
</head>
1116

@@ -14,9 +19,13 @@
1419
<p><span data-i18n="advancedSettingsWarning"></span> <a class="fa info important" href="https://github.com/gorhill/uBlock/wiki/Advanced-settings" target="_blank">&#xf05a;</a>
1520
<p>
1621
<button id="advancedSettingsApply" class="custom important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
17-
<p><textarea id="advancedSettings" dir="auto" spellcheck="false"></textarea>
1822
</div>
1923

24+
<div id="advancedSettings" class="codeMirrorContainer codeMirrorFillVertical"></div>
25+
26+
<script src="lib/codemirror/lib/codemirror.js"></script>
27+
<script src="lib/codemirror/addon/selection/active-line.js"></script>
28+
2029
<script src="js/vapi.js"></script>
2130
<script src="js/vapi-common.js"></script>
2231
<script src="js/vapi-client.js"></script>

src/css/advanced-settings.css

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1-
textarea {
2-
box-sizing: border-box;
3-
height: 60vh;
1+
html {
2+
height: 100vh;
3+
overflow: hidden;
4+
}
5+
body {
6+
overflow: hidden;
7+
}
8+
#advancedSettings {
9+
border-top: 1px solid #ddd;
10+
height: 75vh;
411
text-align: left;
5-
white-space: pre;
612
width: 100%;
7-
word-wrap: normal;
813
}

src/js/advanced-settings.js

Lines changed: 57 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*******************************************************************************
22
33
uBlock Origin - a browser extension to block requests.
4-
Copyright (C) 2016 Raymond Hill
4+
Copyright (C) 2016-present Raymond Hill
55
66
This program is free software: you can redistribute it and/or modify
77
it under the terms of the GNU General Public License as published by
@@ -19,96 +19,114 @@
1919
Home: https://github.com/gorhill/uBlock
2020
*/
2121

22-
/* global uDom */
22+
/* global CodeMirror, uDom, uBlockDashboard */
2323

2424
'use strict';
2525

2626
/******************************************************************************/
2727

28-
(function() {
28+
(function() { // >>>> Start of private namespace
2929

3030
/******************************************************************************/
3131

32-
var messaging = vAPI.messaging;
33-
var cachedData = '';
34-
var rawAdvancedSettings = uDom.nodeFromId('advancedSettings');
32+
let messaging = vAPI.messaging;
33+
let noopFunc = function(){};
34+
35+
let beforeHash = '';
36+
37+
let cmEditor = new CodeMirror(
38+
document.getElementById('advancedSettings'),
39+
{
40+
autofocus: true,
41+
lineNumbers: true,
42+
lineWrapping: true,
43+
styleActiveLine: true
44+
}
45+
);
46+
47+
uBlockDashboard.patchCodeMirrorEditor(cmEditor);
3548

3649
/******************************************************************************/
3750

38-
var hashFromAdvancedSettings = function(raw) {
51+
let hashFromAdvancedSettings = function(raw) {
3952
return raw.trim().replace(/\s+/g, '|');
4053
};
4154

4255
/******************************************************************************/
4356

4457
// This is to give a visual hint that the content of user blacklist has changed.
4558

46-
var advancedSettingsChanged = (function () {
47-
var timer = null;
59+
let advancedSettingsChanged = (function () {
60+
let timer = null;
4861

49-
var handler = function() {
62+
let handler = ( ) => {
5063
timer = null;
51-
var changed = hashFromAdvancedSettings(rawAdvancedSettings.value) !== cachedData;
64+
let changed = hashFromAdvancedSettings(cmEditor.getValue()) !== beforeHash;
5265
uDom.nodeFromId('advancedSettingsApply').disabled = !changed;
66+
CodeMirror.commands.save = changed ? applyChanges : noopFunc;
5367
};
5468

5569
return function() {
56-
if ( timer !== null ) {
57-
clearTimeout(timer);
58-
}
70+
if ( timer !== null ) { clearTimeout(timer); }
5971
timer = vAPI.setTimeout(handler, 100);
6072
};
6173
})();
6274

75+
cmEditor.on('changes', advancedSettingsChanged);
76+
6377
/******************************************************************************/
6478

65-
function renderAdvancedSettings() {
66-
var onRead = function(raw) {
67-
cachedData = hashFromAdvancedSettings(raw);
68-
var pretty = [],
79+
let renderAdvancedSettings = function(first) {
80+
let onRead = function(raw) {
81+
beforeHash = hashFromAdvancedSettings(raw);
82+
let pretty = [],
6983
whitespaces = ' ',
7084
lines = raw.split('\n'),
71-
max = 0,
72-
pos,
73-
i, n = lines.length;
74-
for ( i = 0; i < n; i++ ) {
75-
pos = lines[i].indexOf(' ');
76-
if ( pos > max ) {
77-
max = pos;
78-
}
85+
max = 0;
86+
for ( let line of lines ) {
87+
let pos = line.indexOf(' ');
88+
if ( pos > max ) { max = pos; }
89+
}
90+
for ( let line of lines ) {
91+
let pos = line.indexOf(' ');
92+
pretty.push(whitespaces.slice(0, max - pos) + line);
7993
}
80-
for ( i = 0; i < n; i++ ) {
81-
pos = lines[i].indexOf(' ');
82-
pretty.push(whitespaces.slice(0, max - pos) + lines[i]);
94+
cmEditor.setValue(pretty.join('\n') + '\n');
95+
if ( first ) {
96+
cmEditor.clearHistory();
8397
}
84-
rawAdvancedSettings.value = pretty.join('\n') + '\n';
8598
advancedSettingsChanged();
86-
rawAdvancedSettings.focus();
99+
cmEditor.focus();
87100
};
88101
messaging.send('dashboard', { what: 'readHiddenSettings' }, onRead);
89-
}
102+
};
90103

91104
/******************************************************************************/
92105

93-
var applyChanges = function() {
106+
let applyChanges = function() {
94107
messaging.send(
95108
'dashboard',
96109
{
97110
what: 'writeHiddenSettings',
98-
content: rawAdvancedSettings.value
111+
content: cmEditor.getValue()
99112
},
100113
renderAdvancedSettings
101114
);
102115
};
103116

104117
/******************************************************************************/
105118

106-
// Handle user interaction
107-
uDom('#advancedSettings').on('input', advancedSettingsChanged);
108-
uDom('#advancedSettingsApply').on('click', applyChanges);
119+
uDom.nodeFromId('advancedSettings').addEventListener(
120+
'input',
121+
advancedSettingsChanged
122+
);
123+
uDom.nodeFromId('advancedSettingsApply').addEventListener(
124+
'click',
125+
applyChanges
126+
);
109127

110-
renderAdvancedSettings();
128+
renderAdvancedSettings(true);
111129

112130
/******************************************************************************/
113131

114-
})();
132+
})(); // <<<< End of private namespace

0 commit comments

Comments
 (0)