Mirrors/uBlock
1
0
Fork 0
mirror of https://github.com/gorhill/uBlock.git synced 2024-10-06 09:37:12 +02:00
Code Issues Releases Wiki Activity

Replace CodeMirror resize code with CSS flex

Browse Source
This commit is contained in:
Raymond Hill 2020-04-25 10:19:08 -04:00
parent 468f4d6b8e
commit fe94aa331a
No known key found for this signature in database
GPG Key ID: 25E1490B761470C2
12 changed files with 75 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/1p-filters.html
View File

@ -31,7 +31,7 @@
<button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="1pExport"></span></button>
</p>
</div>
<div id="userFilters" class="codeMirrorContainer codeMirrorFillVertical codeMirrorBreakAll" spellcheck="false"></div>
<div id="userFilters" class="codeMirrorContainer codeMirrorBreakAll" spellcheck="false"></div>
<div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">
</div>

2
src/advanced-settings.html
View File

@ -22,7 +22,7 @@
<button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button>&ensp;
</div>
<div id="advancedSettings" class="codeMirrorContainer codeMirrorFillVertical"></div>
<div id="advancedSettings" class="codeMirrorContainer"></div>
<script src="lib/codemirror/lib/codemirror.js"></script>
<script src="lib/codemirror/addon/selection/active-line.js"></script>

14
src/css/1p-filters.css
View File

@ -1,13 +1,23 @@
html {
height: 100vh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
.codeMirrorContainer {
flex-grow: 1;
}
#userFilters {
height: 75vh;
text-align: left;
width: 100%;
word-wrap: normal;
}

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

@ -1,15 +1,25 @@
html {
height: 100vh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
.codeMirrorContainer {
flex-grow: 1;
}
#advancedSettings {
border-top: 1px solid #ddd;
height: 75vh;
text-align: left;
width: 100%;
}
.CodeMirror-wrap pre {
word-break: break-all;

4
src/css/codemirror.css
View File

@ -96,3 +96,7 @@
background-image: none;
font-weight: bold;
}
/* This probably needs to be added to CodeMirror repo */
.CodeMirror-merge-gap {
vertical-align: top;
}

16
src/css/dashboard-common.css
View File

@ -53,9 +53,15 @@ input[type="checkbox"][disabled] + * {
display: none !important;
}
}
@media (max-height: 400px) {
html {
min-height: 400px !important;
overflow: auto !important;
}
/**
On mobile device, the on-screen keyboard may take up
so much space that it overlaps the content being edited.
The rule below makes it possible to scroll the edited
content within view.
*/
:root.mobile {
overflow: auto;
}
:root.mobile body {
min-height: 600px;
}

20
src/css/dyna-rules.css
View File

@ -1,18 +1,22 @@
html {
height: 100vh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
width: 100%;
}
.body {
flex-shrink: 0;
}
#diff {
border: 0;
border-top: 1px solid #eee;
flex-grow: 1;
margin: 0;
padding: 0;
white-space: nowrap;
}
#diff .tools > * {
@ -28,8 +32,7 @@ body {
width: 50%;
white-space: nowrap;
}
#diff .ruleActions h3 {
font-weight: normal;
#diff .ruleActions .fieldset-header {
margin: 0.5em 0;
}
#ruleFilter {
@ -63,7 +66,7 @@ body:not(.editing) #diff.dirty #commitButton:hover {
}
.codeMirrorContainer {
height: 60vh;
flex-grow: 1;
}
.CodeMirror-merge, .CodeMirror-merge-pane, .CodeMirror-merge .CodeMirror {
box-sizing: border-box;
@ -83,3 +86,8 @@ body[dir="rtl"] .CodeMirror-merge-pane-rightmost {
right: unset;
left: 0;
}
/* mobile devices */
:root.mobile #diff .tools {
overflow: auto;
}

18
src/css/whitelist.css
View File

@ -1,12 +1,22 @@
html {
height: 100vh;
overflow: hidden;
width: 100vw;
}
body {
display: flex;
flex-direction: column;
height: 100%;
justify-content: stretch;
overflow: hidden;
}
#whitelist {
height: 75vh;
text-align: left;
width: 100%;
}
.body {
flex-shrink: 0;
}
.codeMirrorContainer {
flex-grow: 1;
}
#whitelist {
text-align: left;
}

6
src/dyna-rules.html
View File

@ -24,12 +24,12 @@
<div id="diff">
<div class="tools">
<div class="ruleActions">
<h3 data-i18n="rulesPermanentHeader"></h3>
<div class="fieldset-header" data-i18n="rulesPermanentHeader"></div>
<button type="button" class="iconifiable" id="exportButton"><span class="fa">&#xf093;</span><span data-i18n="rulesExport"></span></button>
<button type="button" class="iconifiable" id="revertButton"><span class="fa">&#xf061;</span><span data-i18n="rulesRevert"></span></button>
</div>
<div class="ruleActions">
<h3 data-i18n="rulesTemporaryHeader"></h3>
<div class="fieldset-header" data-i18n="rulesTemporaryHeader"></div>
<button type="button" class="iconifiable" id="commitButton"><span class="fa">&#xf060;</span><span data-i18n="rulesCommit"></span></button>
<button type="button" class="iconifiable" id="importButton"><span class="fa">&#xf019;</span><span data-i18n="rulesImport"></span></button>
<button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa">&#xf0c7;</span><span data-i18n="rulesEditSave"></span></button>
@ -38,7 +38,7 @@
</div>
</div>
</div>
<div class="codeMirrorContainer codeMirrorMergeContainer codeMirrorFillVertical"></div>
<div class="codeMirrorContainer codeMirrorMergeContainer"></div>
<div id="templates" style="display: none;">
<input class="hidden" id="importFilePicker" type="file" accept="text/plain">

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

@ -39,7 +39,7 @@ const cmEditor = new CodeMirror(
{
autofocus: true,
lineNumbers: true,
lineWrapping: true,
lineWrapping: false,
styleActiveLine: true
}
);

41
src/js/dashboard-common.js
View File

@ -19,7 +19,7 @@
Home: https://github.com/gorhill/uBlock
*/
/* global CodeMirror, uDom */
/* global uDom */
'use strict';
@ -169,46 +169,7 @@ self.uBlockDashboard.patchCodeMirrorEditor = (function() {
grabFocusAsync(cm);
};
let resizeTimer,
resizeObserver;
const resize = function(cm) {
resizeTimer = undefined;
const child = document.querySelector('.codeMirrorFillVertical');
if ( child === null ) { return; }
const prect = document.documentElement.getBoundingClientRect();
const crect = child.getBoundingClientRect();
const cssHeight = Math.floor(Math.max(prect.bottom - crect.top, 80)) + 'px';
if ( child.style.height === cssHeight ) { return; }
child.style.height = cssHeight;
// https://github.com/gorhill/uBlock/issues/3694
// Need to call cm.refresh() when resizing occurs. However the
// cursor position may end up outside the viewport, hence we also
// call cm.scrollIntoView() to address this.
// Reference: https://codemirror.net/doc/manual.html#api_sizing
if ( cm instanceof CodeMirror ) {
cm.refresh();
cm.scrollIntoView(null);
}
};
const resizeAsync = function(cm, delay) {
if ( resizeTimer !== undefined ) { return; }
resizeTimer = vAPI.setTimeout(
resize.bind(null, cm),
typeof delay === 'number' ? delay : 66
);
};
return function(cm) {
if ( document.querySelector('.codeMirrorFillVertical') !== null ) {
const boundResizeAsync = resizeAsync.bind(null, cm);
window.addEventListener('resize', boundResizeAsync);
resizeObserver = new MutationObserver(boundResizeAsync);
resizeObserver.observe(document.querySelector('.body'), {
childList: true,
subtree: true
});
resizeAsync(cm, 1);
}
if ( cm.options.inputStyle === 'contenteditable' ) {
cm.on('beforeSelectionChange', patchSelectAll);
}

2
src/whitelist.html
View File

@ -32,7 +32,7 @@
<button id="exportWhitelistToFile" class="iconifiable" type="button"><span class="fa">&#xf093;</span><span data-i18n="whitelistExport"></span></button>
</p>
</div>
<div id="whitelist" class="codeMirrorContainer codeMirrorFillVertical"></div>
<div id="whitelist" class="codeMirrorContainer"></div>
<div class="hidden">
<input id="importFilePicker" type="file" accept="text/plain">