Fixed Split.js issues when resizing to around 1000px wide

package-lock.json

@@ -119,6 +119,7 @@
         "html-webpack-plugin": "^5.5.0",
         "imports-loader": "^3.1.1",
         "mini-css-extract-plugin": "2.6.0",
+        "modify-source-webpack-plugin": "^3.0.0",
         "nightwatch": "^2.0.10",
         "postcss": "^8.4.12",
         "postcss-css-variables": "^0.18.0",
@@ -10740,6 +10741,37 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/modify-source-webpack-plugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/modify-source-webpack-plugin/-/modify-source-webpack-plugin-3.0.0.tgz",
+      "integrity": "sha512-m2g6QEittzzcde0PhgQtOwRywjqo8Q+vMLHbNoH2JDEFE/AlTBWvtNQrp17xbqDUXIueLljm4bhE5OninatHYw==",
+      "dev": true,
+      "dependencies": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "peerDependencies": {
+        "webpack": "^4.37.0 || ^5.0.0"
+      }
+    },
+    "node_modules/modify-source-webpack-plugin/node_modules/schema-utils": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+      "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.8",
+        "ajv": "^6.12.5",
+        "ajv-keywords": "^3.5.2"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
@@ -24019,6 +24051,29 @@
         }
       }
     },
+    "modify-source-webpack-plugin": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/modify-source-webpack-plugin/-/modify-source-webpack-plugin-3.0.0.tgz",
+      "integrity": "sha512-m2g6QEittzzcde0PhgQtOwRywjqo8Q+vMLHbNoH2JDEFE/AlTBWvtNQrp17xbqDUXIueLljm4bhE5OninatHYw==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.1.1.tgz",
+          "integrity": "sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.8",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",

package.json

@@ -69,6 +69,7 @@
     "html-webpack-plugin": "^5.5.0",
     "imports-loader": "^3.1.1",
     "mini-css-extract-plugin": "2.6.0",
+    "modify-source-webpack-plugin": "^3.0.0",
     "nightwatch": "^2.0.10",
     "postcss": "^8.4.12",
     "postcss-css-variables": "^0.18.0",

src/web/App.mjs

@@ -57,7 +57,7 @@ class App {
         this.populateOperationsList();
         this.manager.setup();
         this.manager.output.saveBombe();
-        this.resetLayout();
+        this.adjustComponentSizes();
         this.setCompileMessage();
 
         log.debug("App loaded");
@@ -295,9 +295,7 @@ class App {
             gutterSize: 4,
             expandToMin: true,
             onDrag: debounce(function() {
-                this.manager.recipe.adjustWidth();
+                this.adjustComponentSizes();
-                this.manager.input.calcMaxTabs();
-                this.manager.output.calcMaxTabs();
             }, 50, "dragSplitter", this, [])
         });
 
@@ -307,7 +305,7 @@ class App {
             minSize: minimise ? [0, 0] : [100, 100]
         });
 
-        this.resetLayout();
+        this.adjustComponentSizes();
     }
 
 
@@ -581,6 +579,13 @@ class App {
     resetLayout() {
         this.columnSplitter.setSizes([20, 30, 50]);
         this.ioSplitter.setSizes([50, 50]);
+        this.adjustComponentSizes();
+    }
+
+    /**
+     * Adjust components to fit their containers.
+     */
+    adjustComponentSizes() {
         this.manager.recipe.adjustWidth();
         this.manager.input.calcMaxTabs();
         this.manager.output.calcMaxTabs();

src/web/stylesheets/layout/_structure.css

@@ -39,8 +39,8 @@ div#output {
 
 .split {
     box-sizing: border-box;
-    /* overflow: auto;
+    /* overflow: auto; */
-    Removed to enable Background Magic button pulse to overflow.
+    /* Removed to enable Background Magic button pulse to overflow.
     Replace this rule if it seems to be causing problems. */
     position: relative;
 }

src/web/waiters/WindowWaiter.mjs

@@ -23,11 +23,11 @@ class WindowWaiter {
 
     /**
      * Handler for window resize events.
-     * Resets the layout of CyberChef's panes after 200ms (so that continuous resizing doesn't cause
+     * Resets adjustable component sizes after 200ms (so that continuous resizing doesn't cause
      * continuous resetting).
      */
     windowResize() {
-        debounce(this.app.resetLayout, 200, "windowResize", this.app, [])();
+        debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])();
     }
 
 

webpack.config.js

@@ -1,6 +1,7 @@
 const webpack = require("webpack");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const { ModifySourcePlugin } = require("modify-source-webpack-plugin");
 const path = require("path");
 
 /**
@@ -82,6 +83,16 @@ module.exports = {
                     to: "assets/forge/"
                 }
             ]
+        }),
+        new ModifySourcePlugin({
+            rules: [
+                {
+                    // Fix toSpare(0) bug in Split.js by avoiding gutter accomodation
+                    test: /split\.es\.js$/,
+                    modify: (src, path) =>
+                        src.replace("if (pixelSize < elementMinSize)", "if (false)")
+                }
+            ]
         })
     ],
     resolve: {