Replace CodeMirror resize code with CSS flex

src/1p-filters.html

@@ -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>

src/advanced-settings.html

@@ -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>

src/css/1p-filters.css

@@ -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;
     }

src/css/advanced-settings.css

@@ -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;

src/css/codemirror.css

@@ -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;
+    }

src/css/dashboard-common.css

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

src/css/dyna-rules.css

@@ -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 {
+#diff .ruleActions .fieldset-header {
-    font-weight: normal;
     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;
+    }

src/css/whitelist.css

@@ -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;
+    }

src/dyna-rules.html

@@ -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">

src/js/advanced-settings.js

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

src/js/dashboard-common.js

@@ -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);
         }

src/whitelist.html

@@ -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">