🧑‍💻 [2.1.77] Rename "Docs" view

Author: thinkyhead

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 The following enhancements and changes have been made to ***Auto Build Marlin***.
 
+## 2.1.77
+- Docs Panel: Replacing "Info" panel
+- Docs Panel: Filter now includes group name
+
 ## 2.1.76
 - Info Panel: Clean up appearance
 

README.md

@@ -74,7 +74,7 @@ The Auto Build Marlin extension for VSCode contributes sidebar panels, a web vie
 
 ### Bootstrapping
 
-When VSCode starts the extension it just loads `extension.js`. This file imports `abm.js` and `prefs.js` for utility functions, and `format.js`, `info.js`, and `editor.js` for our feature providers. These files import `js/marlin.js` and `js/schema.js` to process Marlin files, and node `fs` for file functions. Any top level code in these files runs as soon as `extension.js` does. This is when modules init their classes and export their symbols.
+When VSCode starts the extension it just loads `extension.js`. This file imports `abm.js` and `prefs.js` for utility functions, and `format.js`, `docs.js`, and `editor.js` for our feature providers. These files import `js/marlin.js` and `js/schema.js` to process Marlin files, and node `fs` for file functions. Any top level code in these files runs as soon as `extension.js` does. This is when modules init their classes and export their symbols.
 
 With all that done, `extension.js` defines the code that will register ABM's commands and feature providers with VSCode upon activation.
 

abm/css/infoview.css abm/css/docsview.cssabm/css/infoview.css renamed to abm/css/docsview.css

@@ -1,7 +1,7 @@
 /**
  * Auto Build Marlin
- * abm/css/infoview.css
- * Styles for Info sidebar panel
+ * abm/css/docsview.css
+ * Styles for Docs sidebar panel
  */
 
 * {
@@ -18,55 +18,55 @@
   }
 
 body.vscode-light {
-  --abm-info-overlay-bg: white;
+  --abm-docs-overlay-bg: white;
   --abm-svg-color: #00000020;
-  --abm-info-bg: #F5F5FDC0;
-  --abm-info-bc: #CCCCCCC0;
+  --abm-docs-bg: #F5F5FDC0;
+  --abm-docs-bc: #CCCCCCC0;
   --abm-line-hover-bg: #FFFFFFE0;
-  --abm-info-color: black;
-  --abm-info-color-comment: #3C2200;
-  --abm-info-legend-color: black;
-  --abm-info-legend-bg: #FFFA;
+  --abm-docs-color: black;
+  --abm-docs-color-comment: #3C2200;
+  --abm-docs-legend-color: black;
+  --abm-docs-legend-bg: #FFFA;
   --abm-item-row-bg: #FFF4;
   --abm-item-row-odd-bg: #FFFA;
   --abm-item-border-color: #000A;
   }
 
 body.vscode-dark {
-  --abm-info-overlay-bg: #333;
+  --abm-docs-overlay-bg: #333;
   --marlin-svg: url(marlin-w.svg);
   --abm-svg-color: #FFFFFF20;
   --abm-line-hover-bg: #00000020;
-  --abm-info-bg: #00002220;
-  --abm-info-bc: #FFFFFF40;
-  --abm-info-color: white;
-  --abm-info-color-comment: #827461;
-  --abm-info-legend-color: white;
-  --abm-info-legend-bg: #0008;
+  --abm-docs-bg: #00002220;
+  --abm-docs-bc: #FFFFFF40;
+  --abm-docs-color: white;
+  --abm-docs-color-comment: #827461;
+  --abm-docs-legend-color: white;
+  --abm-docs-legend-bg: #0008;
   --abm-item-row-bg: #0000;
   --abm-item-row-odd-bg: #FFF2;
   --abm-item-border-color: #FFFA;
   }
 
 body.vscode-high-contrast {
-  --abm-info-overlay-bg: #2A2;
+  --abm-docs-overlay-bg: #2A2;
   --marlin-svg: url(marlin-w.svg);
   --abm-svg-color: #FFFFFF20;
   --abm-line-hover-bg: #00000030;
-  --abm-info-bg: #282C34AA;
-  --abm-info-bc: #CCCCCCC0;
-  --abm-info-color: white;
-  --abm-info-color-comment: #827461;
-  --abm-info-legend-color: yellow;
-  --abm-info-legend-bg: #009;
+  --abm-docs-bg: #282C34AA;
+  --abm-docs-bc: #CCCCCCC0;
+  --abm-docs-color: white;
+  --abm-docs-color-comment: #827461;
+  --abm-docs-legend-color: yellow;
+  --abm-docs-legend-bg: #009;
   --abm-item-row-bg: black;
   --abm-item-row-odd-bg: #226;
   --abm-item-border-color: white;
   }
 body.vscode-high-contrast-light {
-  --abm-info-overlay-bg: #AFA;
-  --abm-info-legend-color: #009;
-  --abm-info-legend-bg: #FF0;
+  --abm-docs-overlay-bg: #AFA;
+  --abm-docs-legend-color: #009;
+  --abm-docs-legend-bg: #FF0;
   --abm-item-row-bg: #FFF;
   --abm-item-row-odd-bg: #DDF;
   --abm-item-border-color: black;
@@ -116,7 +116,7 @@ pre {
     padding: 4px 0;
     margin-bottom: 4px;
     border-radius: 1em;
-    color: var(--abm-info-color);
+    color: var(--abm-docs-color);
   }
   h2.gcode {background: var(--color-h2-gcode);}
   h2.basics { background: var(--color-h2-basics); }

abm/info.html abm/docs.htmlabm/info.html renamed to abm/docs.html

@@ -14,12 +14,11 @@
     // ]]>
   </script>
   <script nonce="${ nonce }" src="${ vsviewUri }"></script>
-  <script nonce="${ nonce }" src="${ schemaUri }"></script>
   <script nonce="${ nonce }" src="${ jqueryUri }"></script>
   <script nonce="${ nonce }" src="${ scriptUri }"></script>
-  <title>Marlin Info</title>
+  <title>Marlin Docs</title>
 </head>
-<body id="abm-info">
+<body id="abm-docs">
   <!-- Based on marlinfw.org live site search page -->
 
   <div id="search" class="container" role="main">

abm/info.js abm/docs.jsabm/info.js renamed to abm/docs.js

@@ -1,45 +1,38 @@
 /**
- * abm/info.js
+ * abm/docs.js
  *
- * Provider for the Marlin Info sidebar.
+ * Provider for the Marlin Docs sidebar.
  * Loads at extension startup.
  *
  * This provider:
- * - Sets up the initial webview for the Marlin Info sidebar.
- * - Handles commands sent by the Info webview.
- * - Sends messages to the Info webview when something changes.
+ * - Sets up the initial webview for the Marlin Docs sidebar.
+ * - Handles commands sent by the Docs webview.
+ * - Sends messages to the Docs webview when something changes.
  *
- * The Info Panel displays the same information as the Build Panel.
- * Code developed for this panel may later be applied to all parts
- * of ABM for display of configuration info.
+ * The Docs Panel downloads the marlinfw.org search index and
+ * displays a search field to find terms in the index.
+ * Search results are displayed in a list with links to the website.
  */
 'use strict';
 
 const vscode = require("vscode"),
-          fs = require('fs'),
          abm = require('./abm'),
-      marlin = require('./js/marlin'),
-      schema = require('./js/schema'),
           vw = vscode.window;
 
-// Get the schema for the display and manipulation of configuration info
-const ConfigSchema = schema.ConfigSchema;
-var schemas;
-
 const jsonFeedUrl = 'https://marlinfw.org/feeds/feed.json';
-class InfoPanelProvider {
+class DocsPanelProvider {
 
   constructor(context) { this.context = context; }
 
   // Called by extension.js to register the provider.
   static register(context) {
-    const provider = new InfoPanelProvider(context);
-    return vw.registerWebviewViewProvider(InfoPanelProvider.viewType, provider);
+    const provider = new DocsPanelProvider(context);
+    return vw.registerWebviewViewProvider(DocsPanelProvider.viewType, provider);
   }
 
-  // Called when the info pane is revealed.
+  // Called when the Docs pane is revealed.
   async resolveWebviewView(wvv, wvContext, _token) {
-    //console.log("InfoPanelProvider.resolveWebviewView"); console.dir(wvv);
+    //console.log("DocsPanelProvider.resolveWebviewView"); console.dir(wvv);
 
     this._view = wvv; // Take ownership of the webview view.
 
@@ -52,36 +45,33 @@ class InfoPanelProvider {
     wv.html = await this.getWebViewHtml(wv);
 
     // Handle show/hide events.
-    wvv.onDidChangeVisibility(() => {
-      abm.log(`InfoPanelProvider.onDidChangeVisibility: ${wvv.visible}`);
-    });
+    //wvv.onDidChangeVisibility(() => {
+    //  abm.log(`DocsPanelProvider.onDidChangeVisibility: ${wvv.visible}`);
+    //});
 
     // Let go of the webview view when it is closed.
     wvv.onDidDispose(() => {
-      abm.log("InfoPanelProvider.onDidDispose:");
+      abm.log("DocsPanelProvider.onDidDispose:");
       this._view = undefined;
     });
 
     // Receive message from the webview.
-    function handleMessageFromUI(m) {
-      abm.log('InfoPanelProvider::handleMessageFromUI', m);
-      switch (m.type) {
-        case 'hello':
-          vw.showInformationMessage('Hello from the webview!');
-          break;
-      }
-    }
-    wv.onDidReceiveMessage(handleMessageFromUI);
+    //function handleMessageFromUI(m) {
+    //  abm.log('DocsPanelProvider::handleMessageFromUI', m);
+    //  switch (m.type) {
+    //    case 'hello':
+    //      vw.showInformationMessage('Hello from the webview!');
+    //      break;
+    //  }
+    //}
+    //wv.onDidReceiveMessage(handleMessageFromUI);
 
     // Tell the webview to display something
-    // Received by infoview.js:handleMessageToUI
+    // Received by docsview.js:handleMessageToUI
     function updateWebview() {
-      wv.postMessage({ type: 'say', text: "hello" }); // infoview.js:handleMessageToUI
+      wv.postMessage({ type: 'say', text: "hello" }); // docsview.js:handleMessageToUI
     }
 
-    schemas = schema.combinedSchema(marlin, fs);
-    abm.log("abm/info.js", schemas);
-
     // Update the view now that the pane has been revealed.
     updateWebview();
   }
@@ -105,28 +95,27 @@ class InfoPanelProvider {
   }
 
   /**
-   * Static HTML as the starting point for info webviews.
+   * Static HTML as the starting point for the docs webview.
    * Attached scripts are invoked in the webview's context.
    */
   async getWebViewHtml(webview) {
     // Local path to script and css for the webview
     const nonce = abm.getNonce(), // Use a nonce to whitelist which scripts can be run
       jqueryUri = this.jsUri(webview, 'jquery-3.6.0.min.js'),
       vsviewUri = this.jsUri(webview, 'vsview.js'),
-      schemaUri = this.jsUri(webview, 'schema.js'),
-      scriptUri = this.jsUri(webview, 'infoview.js'),
-         cssUri = this.resourceUri(webview, 'css', 'infoview.css'),
+      scriptUri = this.jsUri(webview, 'docsview.js'),
+         cssUri = this.resourceUri(webview, 'css', 'docsview.css'),
     _searchData = (await this.fetchMarlinSiteIndex()).replaceAll('`', '\\`');
 
-    const merged_html = eval(`\`${ abm.load_html('info.html') }\``);
+    const merged_html = eval(`\`${ abm.load_html('docs.html') }\``);
     return merged_html;
   }
 }
 
 // Static members
-InfoPanelProvider.viewType = 'abm.infoView';
+DocsPanelProvider.viewType = 'abm.docsView';
 
 // Export the provider
-exports.InfoPanelProvider = InfoPanelProvider;
+exports.DocsPanelProvider = DocsPanelProvider;
 
-abm.log("InfoPanelProvider (info.js) loaded");
+abm.log("DocsPanelProvider (docs.js) loaded");

abm/js/infoview.js abm/js/docsview.jsabm/js/infoview.js renamed to abm/js/docsview.js

@@ -1,11 +1,11 @@
 /**
  * Auto Build Marlin
- * abm/js/infoview.js
+ * abm/js/docsview.js
  *
  * This script runs when the view is created / revealed.
  *
  * The webview already contains the base HTML, so we:
- *  - Set up the initial info webview.
+ *  - Set up the initial docs webview.
  */
 'use strict';
 
@@ -222,15 +222,12 @@ $(function () {
   var verbose = false;
   function log(message, data) {
     if (!verbose) return;
-    console.log(`[editview] ${message}`);
+    console.log(`[docsview] ${message}`);
     if (data !== undefined) console.dir(data);
   }
 
-  // References to elements in the webview.
-  const $element = $('#element');
-
   // Set up the view anew.
-  function initInfoView() {
+  function initDocsView() {
     // Fetch the marlinfw.org site index
     marlinfwSearch.init();
   }
@@ -249,12 +246,12 @@ $(function () {
    * @param {object} message - The message object.
    */
   function handleMessageToUI(m) {
-    log("infoview.js : handleMessageToUI", m);
+    log("docsview.js : handleMessageToUI", m);
     switch (m.type) {
       // Update the whole form in response to an external change.
-      case 'info':
-        //drawInfo(m.data);
-        break;
+      //case 'say':
+      //  showtext(m.text);
+      //  break;
 
       // Display an error message
       case 'error':
@@ -272,18 +269,18 @@ $(function () {
   //
 
   // Create elements, add handlers, fill in initial info, etc.
-  initInfoView();
+  initDocsView();
 
   //
-  // Info Panel Revealed
+  // Docs Panel Revealed
   //
-  // If there is state data then we can skip the parser and build the form.
+  // If there is state data then apply it to the view, e.g., to preserve the filter text.
   const state = vscode.getState();
   if (state) {
     log("Got VSCode state", state);
     if ('data' in state) {
-      log("Init Marlin Info Webview with stored data")
-      initInfoView();
+      log("Init Marlin Docs Webview with stored data")
+      initDocsView();
     }
   }
 

extension.js

@@ -10,7 +10,7 @@ const vscode = require('vscode'),
          abm = require('./abm/abm'),
        prefs = require('./abm/prefs'),
       format = require('./abm/format'),
-        info = require('./abm/info'),
+        docs = require('./abm/docs'),
       editor = require('./abm/editor');
 
 exports.activate = (context) => {
@@ -33,8 +33,8 @@ exports.activate = (context) => {
     vc.registerCommand('abm.export.yml',  () => { abm.run_schema_py('yml');     }),
     vc.registerCommand('abm.apply.ini',   () => { abm.run_configuration_py();   }),
 
-    // Register a webview provider for the Info panel
-    info.InfoPanelProvider.register(context),
+    // Register a webview provider for the Docs panel
+    docs.DocsPanelProvider.register(context),
 
     // Formatter to do an extra level of indentation for Marlin C++.
     format.PPFormatProvider.register(context),