Hide recipe and blocks for embed mode

README.md

@@ -71,14 +71,12 @@ You can use as many operations as you like in simple or complex ways. Some examp
      - It should be noted that none of your recipe configuration or input (either text or files) is ever sent to the CyberChef web server - all processing is carried out within your browser, on your own computer.
      - Due to this feature, CyberChef can be downloaded and run locally. You can use the link in the top left corner of the app to download a full copy of CyberChef and drop it into a virtual machine, share it with other people, or host it in a closed network.
 
-
 ## Deep linking
 
 By manipulation of CyberChef's URL hash, you can change the initial settings with which the page opens.
 The format is `https://gchq.github.io/CyberChef/#recipe=Operation()&input=...`
 
-Supported arguments are `recipe`, `input` (encoded in Base64), and `theme`. 
+Supported arguments are `recipe`, `input` (encoded in Base64), `theme`, and `embed`. All options except `embed` (which if present will render CyberChef with fewer frames so it's more easily embedded) take a single argument.
-
 
 ## Browser support
 

src/web/App.mjs

@@ -41,6 +41,7 @@ class App {
         this.autoBakePause = false;
         this.progress      = 0;
         this.ingId         = 0;
+        this.embed         = false;
     }
 
 
@@ -454,6 +455,7 @@ class App {
      * If recipe is present, replaces the current recipe with the recipe provided in the URI.
      * If input is present, decodes and sets the input to the one provided in the URI.
      * If theme is present, uses the theme.
+     * If embed mode is set, hides UI elements to increase space.
      *
      * @fires Manager#statechange
      */
@@ -497,6 +499,17 @@ class App {
             this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme));
         }
 
+        if (this.uriParams.embed) {
+            this.embed = true;
+            this.columnSplitter.destroy();
+            document.getElementById("operations").style.display = "none";
+            document.getElementById("recipe").style.display = "none";
+            document.getElementById("IO").style.width = "100%";
+
+            document.getElementById("options").style.display = "none";
+            document.getElementById("edit").style.display = "inline";
+        }
+
         this.autoBakePause = false;
         window.dispatchEvent(this.manager.statechange);
     }
@@ -579,7 +592,9 @@ class App {
      * Resets the splitter positions to default.
      */
     resetLayout() {
-        this.columnSplitter.setSizes([20, 30, 50]);
+        if (!this.embed) {
+            this.columnSplitter.setSizes([20, 30, 50]);
+        }
         this.ioSplitter.setSizes([50, 50]);
         this.manager.recipe.adjustWidth();
         this.manager.input.calcMaxTabs();

src/web/Manager.mjs

@@ -121,6 +121,7 @@ class Manager {
         document.getElementById("load-name").addEventListener("change", this.controls.loadNameChange.bind(this.controls));
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
+        document.getElementById("edit").addEventListener("click", this.controls.editButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
 
         // Operations

src/web/html/index.html

@@ -162,6 +162,7 @@
                 </div>
                 <div class="col" style="text-align: right; padding-right: 0;">
                     <a href="#" id="options">Options <i class="material-icons">settings</i></a>
+                    <a href="#" id="edit" style="display: none">Edit <i class="material-icons">edit</i></a>
                     <a href="#" id="support" data-toggle="modal" data-target="#support-modal">About / Support <i class="material-icons">help</i></a>
                 </div>
             </div>

src/web/waiters/ControlsWaiter.mjs

@@ -355,6 +355,17 @@ ${navigator.userAgent}
         }
     }
 
+    /**
+     * Open the page in a new window.
+     *
+     * @param {event} e
+     */
+    editButtonClick(e) {
+        e.preventDefault();
+        const saveLink = this.generateStateUrl(true, true, null, null, "https://gchq.github.io/CyberChef/");
+        window.open(saveLink, "_blank");
+    }
+
 
     /**
      * Shows the stale indicator to show that the input or recipe has changed