From fe94aa331ac2cfbb1ef2e350f7d50fb061ecb7bc Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Sat, 25 Apr 2020 10:19:08 -0400
Subject: [PATCH] Replace CodeMirror resize code with CSS flex

---
 src/1p-filters.html           |  2 +-
 src/advanced-settings.html    |  2 +-
 src/css/1p-filters.css        | 14 ++++++++++--
 src/css/advanced-settings.css | 14 ++++++++++--
 src/css/codemirror.css        |  4 ++++
 src/css/dashboard-common.css  | 16 +++++++++-----
 src/css/dyna-rules.css        | 20 ++++++++++++-----
 src/css/whitelist.css         | 18 +++++++++++----
 src/dyna-rules.html           |  6 ++---
 src/js/advanced-settings.js   |  2 +-
 src/js/dashboard-common.js    | 41 +----------------------------------
 src/whitelist.html            |  2 +-
 12 files changed, 75 insertions(+), 66 deletions(-)

diff --git a/src/1p-filters.html b/src/1p-filters.html
index 6454df7e6..27a2c81d9 100644
--- a/src/1p-filters.html
+++ b/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>
diff --git a/src/advanced-settings.html b/src/advanced-settings.html
index b3b64096a..564ae99dc 100644
--- a/src/advanced-settings.html
+++ b/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>
diff --git a/src/css/1p-filters.css b/src/css/1p-filters.css
index 5983465a0..81c247f7b 100644
--- a/src/css/1p-filters.css
+++ b/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;
     }
diff --git a/src/css/advanced-settings.css b/src/css/advanced-settings.css
index 7c4a8723a..b112e66a4 100644
--- a/src/css/advanced-settings.css
+++ b/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;
diff --git a/src/css/codemirror.css b/src/css/codemirror.css
index deb8ac2a7..5d3eafdc7 100644
--- a/src/css/codemirror.css
+++ b/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;
+    }
diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
index b144dca3c..0c1ef842d 100644
--- a/src/css/dashboard-common.css
+++ b/src/css/dashboard-common.css
@@ -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;
     }
diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css
index d67cb0597..ca0735562 100644
--- a/src/css/dyna-rules.css
+++ b/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 {
-    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;
+    }
diff --git a/src/css/whitelist.css b/src/css/whitelist.css
index fe116381b..715c9640d 100644
--- a/src/css/whitelist.css
+++ b/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;
+    }
diff --git a/src/dyna-rules.html b/src/dyna-rules.html
index 17b13e21f..40cbcc17b 100644
--- a/src/dyna-rules.html
+++ b/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">
diff --git a/src/js/advanced-settings.js b/src/js/advanced-settings.js
index 940a12887..6d993e1ed 100644
--- a/src/js/advanced-settings.js
+++ b/src/js/advanced-settings.js
@@ -39,7 +39,7 @@ const cmEditor = new CodeMirror(
     {
         autofocus: true,
         lineNumbers: true,
-        lineWrapping: true,
+        lineWrapping: false,
         styleActiveLine: true
     }
 );
diff --git a/src/js/dashboard-common.js b/src/js/dashboard-common.js
index ad59fb500..99c14dc3f 100644
--- a/src/js/dashboard-common.js
+++ b/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);
         }
diff --git a/src/whitelist.html b/src/whitelist.html
index 311a4f8ab..2a1dbe022 100644
--- a/src/whitelist.html
+++ b/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">