mirror of https://github.com/gorhill/uBlock.git
Replace CodeMirror resize code with CSS flex
This commit is contained in:
parent
468f4d6b8e
commit
fe94aa331a
|
@ -31,7 +31,7 @@
|
|||
<button id="exportUserFiltersToFile" class="iconifiable" type="button"><span class="fa"></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>
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
<button id="advancedSettingsApply" class="important" type="button" disabled data-i18n="genericApplyChanges"></button> 
|
||||
</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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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"></span><span data-i18n="rulesExport"></span></button>
|
||||
<button type="button" class="iconifiable" id="revertButton"><span class="fa"></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"></span><span data-i18n="rulesCommit"></span></button>
|
||||
<button type="button" class="iconifiable" id="importButton"><span class="fa"></span><span data-i18n="rulesImport"></span></button>
|
||||
<button type="button" class="iconifiable important disabled" id="editSaveButton"><span class="fa"></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">
|
||||
|
|
|
@ -39,7 +39,7 @@ const cmEditor = new CodeMirror(
|
|||
{
|
||||
autofocus: true,
|
||||
lineNumbers: true,
|
||||
lineWrapping: true,
|
||||
lineWrapping: false,
|
||||
styleActiveLine: true
|
||||
}
|
||||
);
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -32,7 +32,7 @@
|
|||
<button id="exportWhitelistToFile" class="iconifiable" type="button"><span class="fa"></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">
|
||||
|
|
Loading…
Reference in New Issue