From 380ef6006b6efcde94fd7a0df2b2a9d723707391 Mon Sep 17 00:00:00 2001
From: stephan <stephan@noemail.net>
Date: Sat, 2 Aug 2025 13:21:07 +0000
Subject: [PATCH] Fiddle: move the About button into the header bar and get it
 working together with the optional jquery.terminal console mode.

FossilOrigin-Name: 9639382c5478115df7c1584c14a52c176fe747df73078419be4ab276374a704b
---
 ext/wasm/fiddle/fiddle.js  | 33 ++++++++++++++++++++++++---------
 ext/wasm/fiddle/index.html | 32 +++++++++++++++++++++-----------
 manifest                   | 14 +++++++-------
 manifest.uuid              |  2 +-
 4 files changed, 53 insertions(+), 28 deletions(-)

diff --git a/ext/wasm/fiddle/fiddle.js b/ext/wasm/fiddle/fiddle.js
index ada40b2247..45ef69326f 100644
--- a/ext/wasm/fiddle/fiddle.js
+++ b/ext/wasm/fiddle/fiddle.js
@@ -406,13 +406,16 @@
     self.onSFLoaded();
   });
 
-
   /** Toggle the "About" view on and off. */
   SF.toggleAbout = function(){
-    this.eOther.classList.toggle('hidden');
-    this.eAbout.classList.toggle('hidden');
+    if( document.body.classList.toggle('about') ){
+      this.eAbout.classList.remove('hidden');
+      SF.eMainView.classList.add('hidden');
+    }else{
+      this.eAbout.classList.add('hidden');
+      SF.eMainView.classList.remove('hidden');
+    }
   }.bind({
-    eOther: E("#main-wrapper"),
     eAbout: E("#view-about")
   });
 
@@ -425,6 +428,9 @@
     delete this.onSFLoaded;
     // Unhide all elements which start out hidden
     EAll('.initially-hidden').forEach((e)=>e.classList.remove('initially-hidden'));
+    SF.eMainView = EAll('.app-view:not(.hidden)')[0]
+        /** The main view widget. Initially the first non-hidden
+            .app-view element. */;
     if( (new URL(self.location.href).searchParams).has('about') ){
       SF.toggleAbout() /* for use while editing the About page */;
     }
@@ -823,21 +829,30 @@
     //SF.echo(null/*clear any output generated by the init process*/);
     if(window.jQuery && window.jQuery.terminal){
       /* Set up the terminal-style view... */
-      const eTerm = window.jQuery('#view-terminal').empty();
-      SF.jqTerm = eTerm.terminal(SF.dbExec.bind(SF),{
+      const eTerm = E('#view-terminal');
+      const jqeTerm = window.jQuery(eTerm).empty();
+      SF.jqTerm = jqeTerm.terminal(SF.dbExec.bind(SF),{
         prompt: 'sqlite> ',
         greetings: false /* note that the docs incorrectly call this 'greeting' */
       });
       /* Set up a button to toggle the views... */
-      const head = E('header#titlebar');
+      const head = E('#titlebar-buttons');
       const btnToggleView = document.createElement('button');
       btnToggleView.appendChild(document.createTextNode("Toggle View"));
       head.appendChild(btnToggleView);
+      const eOthers = EAll('.app-view:not(#view-terminal)');
+      const eOtherMain = E('#view-split');
       btnToggleView.addEventListener('click',function f(){
-        EAll('.app-view').forEach(e=>e.classList.toggle('hidden'));
+        document.body.classList.remove('about');
         if(document.body.classList.toggle('terminal-mode')){
-          ForceResizeKludge();
+          eOthers.forEach((e)=>e.classList.add('hidden'));
+          SF.eMainView = eTerm;
+        }else{
+          eTerm.classList.add('hidden');
+          SF.eMainView = eOtherMain;
         }
+        SF.eMainView.classList.remove('hidden');
+        ForceResizeKludge();
       }, false);
       btnToggleView.click()/*default to terminal view*/;
     }
diff --git a/ext/wasm/fiddle/index.html b/ext/wasm/fiddle/index.html
index 9b49748809..0196129549 100644
--- a/ext/wasm/fiddle/index.html
+++ b/ext/wasm/fiddle/index.html
@@ -5,16 +5,27 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     <title>SQLite3 Fiddle</title>
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
-    <!-- to add a toggleable terminal-style view, uncomment the following
-         two lines and ensure that these files are on the web server. -->
+    <!--
+        To add a terminal-style view using jquery.terminal[^1],
+        uncomment the following two HTML lines and ensure that these
+        files are on the web server.
+
+        jquery-bundle.min.js is a concatenation of jquery.min.js from
+        [^2] and jquery.terminal.min.js from [^1].
+        jquery.terminal.min.css is from [^1].
+
+        [^1]: https://github.com/jcubic/jquery.terminal
+        [^2]: https://jquery.com
+    -->
     <!--script src="jqterm/jqterm-bundle.min.js"></script>
-    <link rel="stylesheet" href="jqterm/jquery.terminal.min.css"/-->
+    <link rel="stylesheet" href="jqterm/jquery.terminal.min.css"-->
     <style>
       /* The following styles are for app-level use. */
       :root {
           --sqlite-blue: #044a64;
           --textarea-color1: #000 /*044a64 is nice too*/;
           --textarea-color2: white;
+          --size: 1.25 /* used by jqterm to calculate font size and the default is too tiny.*/;
       }
       textarea {
           font-family: monospace;
@@ -211,8 +222,11 @@
   <body>
     <header id='titlebar'>
       <span>SQLite3 Fiddle</span>
-      <span class='powered-by'>Powered by
-        <a href='https://sqlite.org'>SQLite3</a></span>
+      <span id='titlebar-buttons'>
+        <span class='powered-by'>Powered by
+          <a href='https://sqlite.org'>SQLite3</a></span>
+        <button id='btn-about'>About...</button>
+      </span>
     </header>
     <!-- emscripten bits -->
     <figure id="module-spinner">
@@ -272,9 +286,6 @@
           <span class='labeled-input'>
             <button id='btn-reset'>Reset DB</button>
           </span>
-          <span class='labeled-input'>
-            <button id='btn-about'>About...</button>
-          </span>
         </div>
       </fieldset><!-- .options -->
       <div id='main-wrapper' class=''>
@@ -310,8 +321,9 @@
                          placeholder="Shell output."></textarea></div>
         </fieldset>
       </div><!-- #main-wrapper -->
+    </div> <!-- #view-split -->
 
-<div class='hidden' id='view-about'>
+<div class='hidden app-view' id='view-about'>
   <h1>About SQLite Fiddle <button id='btn-about-close'>close</button></h1>
 
   <p>Fiddle is a JavaScript application wrapping a <a href='https://webassembly.org'>WebAssembly</a>
@@ -356,8 +368,6 @@
 
 </div><!-- #view-about -->
 
-    </div> <!-- #view-split -->
-
 <script src="fiddle.js"></script>
   </body>
 </html>
diff --git a/manifest b/manifest
index f8fd4d3042..88cbbe0172 100644
--- a/manifest
+++ b/manifest
@@ -1,5 +1,5 @@
-C Fiddle:\sadd\san\sabout/info/help\sview\sand\sa\sbutton\sto\stoggle\sit.\sChange\sthe\scolor\sschema\sto\sa\smore\sconventional\sblack/white.\sForce\simported\sdatabases\sout\sof\sWAL\smode,\swhich\sdoesn't\swork\sin\sfiddle.
-D 2025-08-02T12:06:37.203
+C Fiddle:\smove\sthe\sAbout\sbutton\sinto\sthe\sheader\sbar\sand\sget\sit\sworking\stogether\swith\sthe\soptional\sjquery.terminal\sconsole\smode.
+D 2025-08-02T13:21:07.208
 F .fossil-settings/binary-glob 61195414528fb3ea9693577e1980230d78a1f8b0a54c78cf1b9b24d0a409ed6a x
 F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
 F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
@@ -677,8 +677,8 @@ F ext/wasm/dist.make c29018b4db479a4c170569393e5399f0625446123a7eb6ffb0677495292
 F ext/wasm/example_extra_init.c 2347cd69d19d839ef4e5e77b7855103a7fe3ef2af86f2e8c95839afd8b05862f
 F ext/wasm/fiddle.make ea505d11aa2a89551e1693ed4c71ee6a163364ca14f806dda295d0beb26ec0ea
 F ext/wasm/fiddle/fiddle-worker.js 50d3edf54c0c0e3657e876724ec2c10069f55f3e40af20864d72f6f6e9ad00f8
-F ext/wasm/fiddle/fiddle.js 03b2cdd2a935d5dd085dccd7c8e6ce1b64bf0f9c3c1290ca80d72542f1b86de0
-F ext/wasm/fiddle/index.html 37fd85cc878f461cc072f47c0f37ab1d8cd9404295536e1bd7b2684085d38b76
+F ext/wasm/fiddle/fiddle.js 384048afaf938680ce8bf4f7295256dd43ced7943c1172373742d34e379c8530
+F ext/wasm/fiddle/index.html 63051ab7ae7489f3b30dff7fd048f00b7bb7ba2bd6d8b2340fdaf646c18341f8
 F ext/wasm/index-dist.html 56132399702b15d70c474c3f1952541e25cb0922942868f70daf188f024b3730
 F ext/wasm/index.html bcaa00eca521b372a6a62c7e7b17a870b0fcdf3e418a5921df1fd61e5344080d
 F ext/wasm/jaccwabyt/jaccwabyt.js 6e4f26d0edb5c2e7d381b7eff1924832a040a12274afab2d1e1789027e9f6c5c
@@ -2213,8 +2213,8 @@ F tool/version-info.c 3b36468a90faf1bbd59c65fd0eb66522d9f941eedd364fabccd7227350
 F tool/warnings-clang.sh bbf6a1e685e534c92ec2bfba5b1745f34fb6f0bc2a362850723a9ee87c1b31a7
 F tool/warnings.sh 1ad0169b022b280bcaaf94a7fa231591be96b514230ab5c98fbf15cd7df842dd
 F tool/win/sqlite.vsix deb315d026cc8400325c5863eef847784a219a2f
-P 1cccea0508f5c8b8ff751f407873713adc33f8642dcb6cdd495fd2d72ebcbdd3
-R d5f4dc4132df6c16c8a5582596913945
+P 27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d
+R c1c07ea01fe59d26da505e28561c5adc
 U stephan
-Z 1d4cd24556abd41e13f5fd162512c056
+Z 413b972a6b543fbfac24c1068223678c
 # Remove this line to create a well-formed Fossil manifest.
diff --git a/manifest.uuid b/manifest.uuid
index 939c8cfd29..48574e3a28 100644
--- a/manifest.uuid
+++ b/manifest.uuid
@@ -1 +1 @@
-27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d
+9639382c5478115df7c1584c14a52c176fe747df73078419be4ab276374a704b
-- 
2.47.2