Skip to content

Commit b10ac00

Browse files
gorhillgorhill
committed
make use of CodeMirror in "My rules" pane
1 parent caef7d0 commit b10ac00

9 files changed

Lines changed: 568 additions & 582 deletions

‎src/about.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424
<li><a href="https://github.com/bestiejs/punycode.js" target="_blank">Punycode.js</a> by <a href="https://github.com/mathiasbynens">Mathias Bynens</a>
2525
<li><a href="https://fontawesome.com/" target="_blank">Font Awesome</a> by <a href="https://github.com/davegandy">Dave Gandy</a>
2626
<li><a href="https://codemirror.net/" target="_blank">CodeMirror</a> by <a href="https://github.com/marijnh">Marijn Haverbeke</a>
27+
<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>
2728
</ul>
2829

2930
<script src="js/vapi.js"></script>

‎src/css/codemirror.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
}
1313

1414
/* For when panels are used */
15-
.codeMirrorContainer > div:not(.CodeMirror) {
15+
.codeMirrorContainer > div:not([class^="CodeMirror"]) {
1616
display: flex;
1717
flex-direction: column;
1818
height: 100%;
@@ -63,3 +63,12 @@
6363
.cm-search-widget .cm-search-widget-button:hover {
6464
color: #000;
6565
}
66+
67+
.CodeMirror-merge-l-deleted {
68+
background-image: none;
69+
font-weight: bold;
70+
}
71+
.CodeMirror-merge-l-inserted {
72+
background-image: none;
73+
font-weight: bold;
74+
}

‎src/css/dyna-rules.css‎

Lines changed: 41 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,40 @@
1-
div > p:first-child {
2-
margin-top: 0;
3-
}
4-
div > p:last-child {
5-
margin-bottom: 0;
1+
body {
2+
bottom: 0;
3+
display: flex;
4+
left: 0;
5+
position: absolute;
6+
right: 0;
7+
top: 0;
8+
flex-direction: column;
69
}
7-
code {
8-
background-color: #eee;
9-
font: 11px monospace;
10-
padding: 2px 4px;
11-
}
1210
#diff {
1311
border: 0;
1412
border-top: 1px solid #eee;
13+
flex-grow: 1;
1514
margin: 0;
16-
padding: 0.5em 0 0 0;
15+
padding: 0;
1716
white-space: nowrap;
1817
}
19-
#diff .pane {
18+
#diff .tools > * {
19+
margin-bottom: 0.5em;
20+
}
21+
#diff .tools .fa {
22+
font-size: large;
23+
}
24+
#diff .ruleActions {
2025
border: 0;
2126
box-sizing: border-box;
2227
display: inline-block;
23-
font: 90%/180% "Noto Mono",monospace;
24-
margin: 0;
2528
padding: 0;
26-
position: relative;
27-
white-space: normal;
29+
text-align: center;
30+
vertical-align: top;
2831
width: 50%;
2932
}
30-
#diff .pane .rulesContainer {
31-
position: relative;
32-
min-height: 150px; /* too short is confusing */
33+
#diff .ruleActions h3 {
34+
font-weight: normal;
35+
margin: 0.5em 0;
3336
}
34-
#diff .ruleActions {
35-
padding: 0 0 1em 0;
37+
#diff .ruleFilter {
3638
text-align: center;
3739
}
3840
body[dir="ltr"] #revertButton:after {
@@ -73,97 +75,33 @@ body[dir="rtl"] #commitButton:before {
7375
}
7476
#revertButton,
7577
#commitButton,
76-
#diff.edit #editEnterButton {
78+
#diff.editing #exportButton,
79+
#diff.editing #importButton,
80+
#editSaveButton {
7781
opacity: 0.25;
7882
pointer-events: none;
7983
}
80-
#editStopButton,
81-
#editCancelButton {
82-
display: none;
83-
}
84-
#diff.dirty:not(.edit) #revertButton,
85-
#diff.dirty:not(.edit) #commitButton {
84+
#diff.dirty:not(.editing) #revertButton,
85+
#diff.dirty:not(.editing) #commitButton,
86+
#diff.editing #editSaveButton {
8687
opacity: 1;
8788
pointer-events: auto;
8889
}
89-
#diff.edit #editStopButton,
90-
#diff.edit #editCancelButton {
91-
display: initial;
92-
}
93-
#diff.edit #importButton,
94-
#diff.edit #exportButton {
95-
display: none;
90+
91+
.codeMirrorContainer {
92+
height: 60vh;
9693
}
97-
#diff ul {
98-
border: 0;
99-
border-top: 1px solid #eee;
100-
list-style-type: none;
101-
margin: 0;
102-
overflow: hidden;
103-
padding: 1em 0 0 0;
104-
}
105-
#diff.edit .right ul {
106-
visibility: hidden;
94+
.CodeMirror-merge, .CodeMirror-merge-pane, .CodeMirror-merge .CodeMirror {
95+
box-sizing: border-box;
96+
height: 100%;
10797
}
108-
#diff .left {
109-
border-right: 1px solid #eee;
98+
#diff.editing .CodeMirror-merge-copy,
99+
#diff.editing .CodeMirror-merge-copy-reverse {
100+
display: none;
110101
}
111-
#diff .right > ul {
102+
#diff.editing .CodeMirror-merge-left .CodeMirror {
112103
color: #888;
113104
}
114-
#diff li {
115-
background-color: #ddd;
116-
direction: ltr;
117-
padding: 0;
118-
text-align: left;
119-
white-space: nowrap;
120-
padding-left: 3px; /* a bit of padding; must also be in textarea */
121-
}
122-
#diff li:nth-child(even) {
123-
background-color: #eee;
124-
}
125-
#diff .right li {
126-
opacity: 0.5;
127-
}
128-
#diff .right li:hover {
129-
}
130-
#diff .right li.notLeft {
131-
color: #000;
132-
opacity: 1;
133-
}
134-
#diff .right li.notRight {
135-
color: #000;
136-
}
137-
#diff .right li.toRemove {
138-
color: #000;
139-
text-decoration: line-through;
140-
opacity: 1;
141-
}
142-
#diff textarea {
143-
background-color: #f8f8ff;
144-
border: 0;
145-
border-top: 1px solid #eee;
146-
box-sizing: border-box;
147-
color: black;
148-
direction: ltr;
149-
font: inherit;
150-
height: 100%;
151-
left: 0;
152-
margin: 0;
153-
overflow: hidden;
154-
overflow-y: auto;
155-
padding: 1em 0 0 3px; /* same left and top padding as ul/li */
156-
position: absolute;
157-
resize: none;
158-
top: 0;
159-
visibility: hidden;
160-
white-space: pre; /* this implies nowrap; break only on \n and <br>.
161-
nowrap doesn't consistently
162-
respect \n's (example: Safari) per the CSS spec:
163-
http://www.w3.org/wiki/CSS/Properties/white-space */
164-
width: 100%;
165-
word-wrap: normal;
166-
}
167-
#diff.edit textarea {
168-
visibility: visible;
105+
#diff.editing .CodeMirror-merge-editor .CodeMirror {
106+
background-color: #ffe;
169107
}

‎src/dyna-rules.html‎

Lines changed: 19 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,51 +4,49 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>uBlock — Dynamic filtering rules</title>
7+
<link rel="stylesheet" type="text/css" href="lib/codemirror/lib/codemirror.css">
8+
<link rel="stylesheet" type="text/css" href="lib/codemirror/addon/dialog/dialog.css">
9+
<link rel="stylesheet" type="text/css" href="lib/codemirror/addon/merge/merge.css">
10+
711
<link rel="stylesheet" type="text/css" href="css/common.css">
812
<link rel="stylesheet" type="text/css" href="css/dashboard-common.css">
913
<link rel="stylesheet" type="text/css" href="css/cloud-ui.css">
1014
<link rel="stylesheet" type="text/css" href="css/dyna-rules.css">
15+
<link rel="stylesheet" type="text/css" href="css/codemirror.css">
1116
</head>
1217

1318
<body>
1419

1520
<div id="cloudWidget" class="hide" data-cloud-entry="myRulesPane"></div>
1621

17-
<p data-i18n="rulesHint"></p>
18-
<p data-i18n="rulesFormatHint"></p>
22+
<p><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>
1923
<div id="diff">
20-
<div class="pane left">
24+
<div class="tools">
2125
<div class="ruleActions">
22-
<h2 data-i18n="rulesPermanentHeader"></h2>
26+
<h3 data-i18n="rulesPermanentHeader"></h3>
2327
<button type="button" class="custom" id="exportButton" data-i18n="rulesExport"></button>
2428
<button type="button" class="custom" id="revertButton" data-i18n="rulesRevert"></button>
2529
</div>
26-
<div class="rulesContainer">
27-
<ul></ul>
28-
</div>
29-
</div>
30-
<div class="pane right">
3130
<div class="ruleActions">
32-
<h2 data-i18n="rulesTemporaryHeader"></h2>
31+
<h3 data-i18n="rulesTemporaryHeader"></h3>
3332
<button type="button" class="custom" id="commitButton" data-i18n="rulesCommit"></button>
34-
<button type="button" class="custom" id="editEnterButton" data-i18n="rulesEdit"></button>
35-
<button type="button" class="custom" id="editStopButton" data-i18n="rulesEditSave"></button>
36-
<button type="button" class="custom" id="editCancelButton" data-i18n="rulesEditDiscard"></button>
3733
<button type="button" class="custom" id="importButton" data-i18n="rulesImport"></button>
34+
<button type="button" class="custom" id="editSaveButton" data-i18n="rulesEditSave"></button>
3835
</div>
39-
<div class="rulesContainer">
40-
<textarea spellcheck="false"></textarea>
41-
<ul></ul>
42-
</div>
36+
<!-- TO BE IMPLEMENTED: <div class="ruleFilter"><span class="fa">&#xf0b0;</span>&emsp;<input type="text" size="32"></div> -->
4337
</div>
38+
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
39+
</div>
4440

4541
<div id="templates" style="display: none;">
4642
<input class="hidden" id="importFilePicker" type="file" accept="text/plain">
4743
<span class="hidden" data-i18n="rulesDefaultFileName"></span>
48-
<ul>
49-
<li>&nbsp;</li>
50-
</ul>
51-
</div>
44+
</div>
45+
46+
<script src="lib/diff/swatinem_diff.js"></script>
47+
<script src="lib/codemirror/lib/codemirror.js"></script>
48+
<script src="lib/codemirror/addon/merge/merge.js"></script>
49+
<script src="lib/codemirror/addon/selection/active-line.js"></script>
5250

5351
<script src="js/vapi.js"></script>
5452
<script src="js/vapi-common.js"></script>

0 commit comments

Comments
 (0)