From: stephan <stephan@noemail.net>
Date: Sat, 2 Aug 2025 12:06:37 +0000 (+0000)
Subject: Fiddle: add an about/info/help view and a button to toggle it. Change the color schem... 
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=a0e569d5ba4aca49fa00e11668b7de8901d5e565;p=thirdparty%2Fsqlite.git

Fiddle: add an about/info/help view and a button to toggle it. Change the color schema to a more conventional black/white. Force imported databases out of WAL mode, which doesn't work in fiddle.

FossilOrigin-Name: 27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d
---

diff --git a/ext/wasm/fiddle/fiddle-worker.js b/ext/wasm/fiddle/fiddle-worker.js
index 27d915eb2c..9c6cddb0f9 100644
--- a/ext/wasm/fiddle/fiddle-worker.js
+++ b/ext/wasm/fiddle/fiddle-worker.js
@@ -163,9 +163,11 @@
         fiddleModule.isDead = true;
         return false;
       }
-      stdout("SQLite version", capi.sqlite3_libversion(),
-             capi.sqlite3_sourceid().substr(0,19));
-      stdout('Welcome to the "fiddle" shell.');
+      wMsg('sqlite-version', {
+        lib: capi.sqlite3_libversion(),
+        srcId: capi.sqlite3_sourceid()
+      });
+      stdout('Welcome to the "fiddle" shell. Tap the About button for more info.');
       if(capi.sqlite3_vfs_find("opfs")){
         stdout("\nOPFS is available. To open a persistent db, use:\n\n",
                "  .open file:name?vfs=opfs\n\nbut note that some",
@@ -281,6 +283,7 @@
             stderr("'open' expects {buffer:Uint8Array} containing an uploaded db.");
             return;
           }
+          buffer.set([1,1], 18)/*force db out of WAL mode*/;
           const fn = (
             opt.filename
               ? opt.filename.split(/[/\\]/).pop().replace('"','_')
diff --git a/ext/wasm/fiddle/fiddle.js b/ext/wasm/fiddle/fiddle.js
index f0a89f25d6..ada40b2247 100644
--- a/ext/wasm/fiddle/fiddle.js
+++ b/ext/wasm/fiddle/fiddle.js
@@ -329,6 +329,21 @@
   SF.worker = new Worker('fiddle-worker.js'+self.location.search);
   SF.worker.onmessage = (ev)=>SF.runMsgHandlers(ev.data);
   SF.addMsgHandler(['stdout', 'stderr'], (ev)=>SF.echo(ev.data));
+  SF.addMsgHandler('sqlite-version', (ev)=>{
+    const v = ev.data;
+    const a = E('#sqlite-version-link');
+    const li = v.srcId.split(' ')/*DATE TIME HASH*/;
+    a.setAttribute('href',
+                   //'https://sqlite.org/src/timeline/?c='+li[2].substr(0,20)
+                   'https://sqlite.org/src/info/'+li[2].substr(0,20)
+                  );
+    a.setAttribute('target', '_blank');
+    a.innerText = [
+      v.lib,
+      v.srcId.substr(0,34)
+    ].join(' ');
+    SF.echo("SQLite version",a.innerText);
+  });
 
   /* querySelectorAll() proxy */
   const EAll = function(/*[element=document,] cssSelector*/){
@@ -391,6 +406,16 @@
     self.onSFLoaded();
   });
 
+
+  /** Toggle the "About" view on and off. */
+  SF.toggleAbout = function(){
+    this.eOther.classList.toggle('hidden');
+    this.eAbout.classList.toggle('hidden');
+  }.bind({
+    eOther: E("#main-wrapper"),
+    eAbout: E("#view-about")
+  });
+
   /**
      Performs all app initialization which must wait until after the
      worker module is loaded. This function removes itself when it's
@@ -400,7 +425,13 @@
     delete this.onSFLoaded;
     // Unhide all elements which start out hidden
     EAll('.initially-hidden').forEach((e)=>e.classList.remove('initially-hidden'));
+    if( (new URL(self.location.href).searchParams).has('about') ){
+      SF.toggleAbout() /* for use while editing the About page */;
+    }
     E('#btn-reset').addEventListener('click',()=>SF.resetDb());
+    EAll('#btn-about, #btn-about-close').forEach((e)=>{
+      e.addEventListener('click',()=>SF.toggleAbout())
+    });
     const taInput = E('#input');
     const btnClearIn = E('#btn-clear');
     const selectExamples = E('#select-examples');
@@ -810,10 +841,6 @@
       }, false);
       btnToggleView.click()/*default to terminal view*/;
     }
-    SF.echo('This experimental app is provided in the hope that it',
-            'may prove interesting or useful but is not an officially',
-            'supported deliverable of the sqlite project. It is subject to',
-            'any number of changes or outright removal at any time.\n');
     const urlParams = new URL(self.location.href).searchParams;
     SF.dbExec(urlParams.get('sql') || null);
     delete ForceResizeKludge.$disabled;
diff --git a/ext/wasm/fiddle/index.html b/ext/wasm/fiddle/index.html
index ca6788ef0b..9b49748809 100644
--- a/ext/wasm/fiddle/index.html
+++ b/ext/wasm/fiddle/index.html
@@ -13,7 +13,7 @@
       /* The following styles are for app-level use. */
       :root {
           --sqlite-blue: #044a64;
-          --textarea-color1: #044a64;
+          --textarea-color1: #000 /*044a64 is nice too*/;
           --textarea-color2: white;
       }
       textarea {
@@ -170,6 +170,17 @@
           display: flex;
           flex-direction: column-reverse;
       }
+      #view-about {
+        flex: auto;
+        overflow: auto;
+      }
+      #view-about h1:first-child {
+        display: flex;
+      }
+      #view-about h1:first-child > button {
+        align-self: center;
+        margin-left: 1em;
+      }
 
       /* emcscript-related styling, used during the module load/intialization processes... */
       .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
@@ -215,7 +226,7 @@
     </figure>
     <div class="emscripten" id="module-status">Downloading...</div>
     <div class="emscripten">
-      <progress value="0" max="100" id="module-progress" hidden='1'></progress>  
+      <progress value="0" max="100" id="module-progress" hidden='1'></progress>
     </div><!-- /emscripten bits -->
 
     <div id='view-terminal' class='app-view hidden initially-hidden'>
@@ -261,6 +272,9 @@
           <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=''>
@@ -295,8 +309,55 @@
           <div><textarea id="output" readonly
                          placeholder="Shell output."></textarea></div>
         </fieldset>
-      </div>
+      </div><!-- #main-wrapper -->
+
+<div class='hidden' 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>
+    build of <a href="https://sqlite.org/cli.html">the SQLite CLI shell</a>, slightly
+    modified to account for browser-based user input. Aside from the different layout,
+    it works just like the CLI shell. This copy was built with SQLite version
+    <a id='sqlite-version-link'></a>.
+  </p>
+
+  <p>This app is provided in the hope that it may prove interesting or useful
+    but it is not an officially-supported deliverable of the SQLite project.
+    It is subject to any number of changes or outright removal at any time.
+    That said, for as long as it's online we do respond to support requests
+    in <a href="https://sqlite.org/forum">the SQLite forum</a>.
+  </p>
+
+  <p>This app runs on your device. After loading, it does not interact
+    with the remote server at all. Similarly, this app does not use any
+    HTTP cookies.</p>
+
+  <p>Fiddle databases are transient in-memory databases unless they
+    specifically use a persistent storage option (if available, help
+    text in the SQL result output area will indicate how to use
+    persistent storage when this app starts up).
+  </p>
+
+  <h1>Usage Summary</h1>
+
+  <ul>
+    <li>Input can be run with either the Run button or tapping one of
+      Ctrl-enter or Shift-enter from within the text input field.
+      If a portion of the input field is selected, only that portion will be run.
+    </li>
+    <li>The various toggle checkboxes can be used to tweak the layout.
+      Those toggles are persistent if the JS environment allows it.</li>
+    <li>Databases can be imported and exported using the buttons in
+      the Options toolbar. No specific limit for imported database
+      sizes is imposed, but large databases may cause it to fail with
+      an out-of-memory error.</li>
+    <!--li></li-->
+  </ul>
+
+</div><!-- #view-about -->
+
     </div> <!-- #view-split -->
-    <script src="fiddle.js"></script>
+
+<script src="fiddle.js"></script>
   </body>
 </html>
diff --git a/manifest b/manifest
index 680c6c69a2..f8fd4d3042 100644
--- a/manifest
+++ b/manifest
@@ -1,5 +1,5 @@
-C Ensure\sthat\sstack\sspace\sallocated\sfor\sa\sflexible\sarray\shas\sthe\scorrect\nalignment.\s\sFix\sto\s[d4307a0d43f42e96]\sto\sfor\ssome\scompilers\n(DeveloperStudio)\sand\splatforms\s(Sparc).
-D 2025-07-31T12:25:23.837
+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
 F .fossil-settings/binary-glob 61195414528fb3ea9693577e1980230d78a1f8b0a54c78cf1b9b24d0a409ed6a x
 F .fossil-settings/empty-dirs dbb81e8fc0401ac46a1491ab34a7f2c7c0452f2f06b54ebb845d024ca8283ef1
 F .fossil-settings/ignore-glob 35175cdfcf539b2318cb04a9901442804be81cd677d8b889fcc9149c21f239ea
@@ -676,9 +676,9 @@ F ext/wasm/demo-worker1.js 08720227e98fa5b44761cf6e219269cee3e9dd0421d8d91459535
 F ext/wasm/dist.make c29018b4db479a4c170569393e5399f0625446123a7eb6ffb0677495292bb954
 F ext/wasm/example_extra_init.c 2347cd69d19d839ef4e5e77b7855103a7fe3ef2af86f2e8c95839afd8b05862f
 F ext/wasm/fiddle.make ea505d11aa2a89551e1693ed4c71ee6a163364ca14f806dda295d0beb26ec0ea
-F ext/wasm/fiddle/fiddle-worker.js 850e66fce39b89d59e161d1abac43a181a4caa89ddeea162765d660277cd84ce
-F ext/wasm/fiddle/fiddle.js 2a2f27b4be2674f501fff61c4a09e44dcf2295731a26b5c28e439f3a573bd269
-F ext/wasm/fiddle/index.html 7fcfb221165183bef0e05d5af9ceb79b527e799b1708ab05de0ec0eaebd5b7bf
+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/index-dist.html 56132399702b15d70c474c3f1952541e25cb0922942868f70daf188f024b3730
 F ext/wasm/index.html bcaa00eca521b372a6a62c7e7b17a870b0fcdf3e418a5921df1fd61e5344080d
 F ext/wasm/jaccwabyt/jaccwabyt.js 6e4f26d0edb5c2e7d381b7eff1924832a040a12274afab2d1e1789027e9f6c5c
@@ -2213,9 +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 cc5f126ea4fa4a1abf183c95d151a7e9bd151b90c5c581d3be56db23bbe05a19 7318a00de64ec89c2a08d86e9f50c694894c4b59b07ff52b0d1f9f0ab8c4df44
-R b3cce284967c0e0245001652919d7f5b
-T +closed 7318a00de64ec89c2a08d86e9f50c694894c4b59b07ff52b0d1f9f0ab8c4df44
-U drh
-Z 1a5f01356c285b08d1cd9d48b01a0055
+P 1cccea0508f5c8b8ff751f407873713adc33f8642dcb6cdd495fd2d72ebcbdd3
+R d5f4dc4132df6c16c8a5582596913945
+U stephan
+Z 1d4cd24556abd41e13f5fd162512c056
 # Remove this line to create a well-formed Fossil manifest.
diff --git a/manifest.uuid b/manifest.uuid
index b9fcf834fc..939c8cfd29 100644
--- a/manifest.uuid
+++ b/manifest.uuid
@@ -1 +1 @@
-1cccea0508f5c8b8ff751f407873713adc33f8642dcb6cdd495fd2d72ebcbdd3
+27d1d0100c0cb6e5c0c576be0f99209bb905f302008d8c257039adf8c5402f7d