diff --git a/package-lock.json b/package-lock.json index 12bf39a4..abb686c7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index eabfaed7..4a6e330f 100644 --- a/package.json +++ b/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", diff --git a/src/web/App.mjs b/src/web/App.mjs index 04397a5f..9d4813e0 100755 --- a/src/web/App.mjs +++ b/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.manager.input.calcMaxTabs(); - this.manager.output.calcMaxTabs(); + this.adjustComponentSizes(); }, 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(); diff --git a/src/web/stylesheets/layout/_structure.css b/src/web/stylesheets/layout/_structure.css index 01777437..4f262029 100755 --- a/src/web/stylesheets/layout/_structure.css +++ b/src/web/stylesheets/layout/_structure.css @@ -39,8 +39,8 @@ div#output { .split { box-sizing: border-box; - /* overflow: auto; - Removed to enable Background Magic button pulse to overflow. + /* overflow: auto; */ + /* Removed to enable Background Magic button pulse to overflow. Replace this rule if it seems to be causing problems. */ position: relative; } diff --git a/src/web/waiters/WindowWaiter.mjs b/src/web/waiters/WindowWaiter.mjs index 288e0206..bb80e453 100755 --- a/src/web/waiters/WindowWaiter.mjs +++ b/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, [])(); } diff --git a/webpack.config.js b/webpack.config.js index 2b8489f2..32206c18 100644 --- a/webpack.config.js +++ b/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: {