From 84f0750525f57f2aa71da6a4632d258e6db3d46c Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Thu, 19 Jan 2023 17:47:07 +0000
Subject: [PATCH] Reviewed HTML and options

---
 src/web/html/index.html            | 88 +++++++++++++-----------------
 src/web/index.js                   |  3 +-
 src/web/stylesheets/layout/_io.css | 28 +---------
 src/web/waiters/BindingsWaiter.mjs |  4 +-
 4 files changed, 43 insertions(+), 80 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index a762ea96..28c8c186 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -237,33 +237,33 @@
                                     <i class="material-icons">view_compact</i>
                                 </button>
                             </span>
+                        </div>
 
-                        </div>
-                        <div id="input-tabs-wrapper" style="display: none;" class="no-select">
-                            <span id="btn-previous-input-tab" class="input-tab-buttons">
-                                &lt;
-                            </span>
-                            <span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                                ···
-                            </span>
-                            <div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
-                                <a id="btn-go-to-input-tab" class="dropdown-item">
-                                    Go to tab
-                                </a>
-                                <a id="btn-find-input-tab" class="dropdown-item">
-                                    Find tab
-                                </a>
-                                <a id="btn-close-all-tabs" class="dropdown-item">
-                                    Close all tabs
-                                </a>
+                        <div id="input-wrapper" class="no-select">
+                            <div id="input-tabs-wrapper" style="display: none;" class="no-select">
+                                <span id="btn-previous-input-tab" class="input-tab-buttons">
+                                    &lt;
+                                </span>
+                                <span id="btn-input-tab-dropdown" class="input-tab-buttons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                                    ···
+                                </span>
+                                <div class="dropdown-menu" aria-labelledby="btn-input-tab-dropdown">
+                                    <a id="btn-go-to-input-tab" class="dropdown-item">
+                                        Go to tab
+                                    </a>
+                                    <a id="btn-find-input-tab" class="dropdown-item">
+                                        Find tab
+                                    </a>
+                                    <a id="btn-close-all-tabs" class="dropdown-item">
+                                        Close all tabs
+                                    </a>
+                                </div>
+                                <span id="btn-next-input-tab" class="input-tab-buttons">
+                                    &gt;
+                                </span>
+                                <ul id="input-tabs">
+                                </ul>
                             </div>
-                            <span id="btn-next-input-tab" class="input-tab-buttons">
-                                &gt;
-                            </span>
-                            <ul id="input-tabs">
-                            </ul>
-                        </div>
-                        <div class="textarea-wrapper no-select input-wrapper" id="input-wrapper">
                             <div id="input-text"></div>
                         </div>
                     </div>
@@ -299,7 +299,8 @@
                                 <i class="material-icons">access_time</i>
                             </span>
                         </div>
-                        <div id="output-wrapper">
+
+                        <div id="output-wrapper" class="no-select">
                             <div id="output-tabs-wrapper" style="display: none" class="no-select">
                                 <span id="btn-previous-output-tab" class="output-tab-buttons">
                                     &lt;
@@ -321,14 +322,12 @@
                                 <ul id="output-tabs">
                                 </ul>
                             </div>
-                            <div class="textarea-wrapper">
-                                <div id="output-text"></div>
-                                <div id="output-loader">
-                                    <div id="output-loader-animation">
-                                        <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
-                                    </div>
-                                    <div class="loading-msg"></div>
+                            <div id="output-text"></div>
+                            <div id="output-loader">
+                                <div id="output-loader-animation">
+                                    <object id="bombe" data="<%- require('../static/images/bombe.svg') %>" width="100%" height="100%"></object>
                                 </div>
+                                <div class="loading-msg"></div>
                             </div>
                         </div>
                     </div>
@@ -443,20 +442,6 @@
                             </select>
                         </div>
 
-                        <div class="form-group option-item">
-                            <label for="preserveCR" class="bmd-label-floating"> Preserve carriage returns (0x0d)</label>
-                            <select class="form-control" option="preserveCR" id="preserveCR" data-toggle="tooltip" data-placement="bottom" data-offset="-10%" data-html="true" title="HTML textareas don't support carriage returns, so if we want to preserve them in our input, we have to disable editing.<br><br>The default option is to only do this for high-entropy inputs, but you can force the choice using this dropdown.">
-                                <option value="entropy">For high-entropy inputs</option>
-                                <option value="always">Always</option>
-                                <option value="never">Never</option>
-                            </select>
-                        </div>
-
-                        <div class="form-group option-item">
-                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
-                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
-                        </div>
-
                         <div class="form-group option-item">
                             <label for="logLevel" class="bmd-label-floating">Console logging level</label>
                             <select class="form-control" option="logLevel" id="logLevel">
@@ -490,13 +475,18 @@
                             </label>
                         </div>
 
-                        <div class="checkbox option-item">
+                        <div class="checkbox option-item mb-0">
                             <label for="showErrors">
                                 <input type="checkbox" option="showErrors" id="showErrors" checked>
-                                Operation error reporting (recommended)
+                                Show errors from operations (recommended)
                             </label>
                         </div>
 
+                        <div class="form-group option-item">
+                            <label for="errorTimeout" class="bmd-label-floating">Operation error timeout in ms (0 for never)</label>
+                            <input type="number" class="form-control" option="errorTimeout" id="errorTimeout">
+                        </div>
+
                         <div class="checkbox option-item">
                             <label for="useMetaKey">
                                 <input type="checkbox" option="useMetaKey" id="useMetaKey">
diff --git a/src/web/index.js b/src/web/index.js
index f2b0a688..82039931 100755
--- a/src/web/index.js
+++ b/src/web/index.js
@@ -51,8 +51,7 @@ function main() {
         logLevel:            "info",
         autoMagic:           true,
         imagePreview:        true,
-        syncTabs:            true,
-        preserveCR:          "entropy"
+        syncTabs:            true
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);
diff --git a/src/web/stylesheets/layout/_io.css b/src/web/stylesheets/layout/_io.css
index c29f855f..43cd8c9e 100755
--- a/src/web/stylesheets/layout/_io.css
+++ b/src/web/stylesheets/layout/_io.css
@@ -13,6 +13,7 @@
     height: 100%;
     margin: 0;
     background-color: transparent;
+    overflow: hidden;
 }
 
 .cm-editor {
@@ -25,19 +26,6 @@
     color: var(--fixed-width-font-colour);
 }
 
-#output-wrapper{
-    margin: 0;
-    padding: 0;
-}
-
-#output-wrapper .textarea-wrapper {
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    pointer-events: auto;
-}
-
 #input-tabs-wrapper #input-tabs,
 #output-tabs-wrapper #output-tabs {
     list-style: none;
@@ -165,20 +153,6 @@
     height: calc(100% - var(--tab-height) - var(--title-height));
 }
 
-.input-wrapper.textarea-wrapper {
-    width: 100%;
-    box-sizing: border-box;
-    overflow: hidden;
-    pointer-events: auto;
-}
-
-.textarea-wrapper textarea,
-.textarea-wrapper #output-text {
-    font-family: var(--fixed-width-font-family);
-    font-size: var(--fixed-width-font-size);
-    color: var(--fixed-width-font-colour);
-}
-
 #output-loader {
     position: absolute;
     bottom: 0;
diff --git a/src/web/waiters/BindingsWaiter.mjs b/src/web/waiters/BindingsWaiter.mjs
index ebccc63a..a6bf7b65 100755
--- a/src/web/waiters/BindingsWaiter.mjs
+++ b/src/web/waiters/BindingsWaiter.mjs
@@ -40,11 +40,11 @@ class BindingsWaiter {
                     break;
                 case "KeyI": // Focus input
                     e.preventDefault();
-                    document.getElementById("input-text").focus();
+                    this.manager.input.inputEditorView.focus();
                     break;
                 case "KeyO": // Focus output
                     e.preventDefault();
-                    document.getElementById("output-text").focus();
+                    this.manager.output.outputEditorView.focus();
                     break;
                 case "Period": // Focus next operation
                     e.preventDefault();