Reviewed HTML and options

src/web/html/index.html

@@ -237,8 +237,9 @@
                                     <i class="material-icons">view_compact</i>
                                 </button>
                             </span>
-
                         </div>
+
+                        <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;
@@ -263,7 +264,6 @@
                                 <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,7 +322,6 @@
                                 <ul id="output-tabs">
                                 </ul>
                             </div>
-                            <div class="textarea-wrapper">
                             <div id="output-text"></div>
                             <div id="output-loader">
                                 <div id="output-loader-animation">
@@ -334,7 +334,6 @@
                 </div>
             </div>
         </div>
-        </div>
 
         <div class="modal fade" id="save-modal" tabindex="-1" role="dialog">
             <div class="modal-dialog modal-lg" role="document">
@@ -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">

src/web/index.js

@@ -51,8 +51,7 @@ function main() {
         logLevel:            "info",
         autoMagic:           true,
         imagePreview:        true,
-        syncTabs:            true,
+        syncTabs:            true
-        preserveCR:          "entropy"
     };
 
     document.removeEventListener("DOMContentLoaded", main, false);

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;

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();