Add text file export option for console (closes #265)

docsSite/docs/more-features/export.md

@@ -16,6 +16,10 @@ To view options for exporting, click `File` > `Export Data...`.
 
 <img src={Image1} alt="Export options" height="250" />
 
+:::tip
+In addition to the full-log export described here, the 💬 [Console](../tab-reference/console.md) tab allows console data to be exported to a text file.
+:::
+
 ## Options
 
 The following options are provided when exporting:

docsSite/docs/tab-reference/console.md

@@ -15,12 +15,14 @@ Drag the desired field to the main view to get started. Each row represents an u
 
 ![Console view](./img/console-1.png)
 
-:::tip
+:::info
 Click the color palette icon to toggle highlighting for warning and error messages. Messages are highlighted if they contain the text "warning" or "error".
 :::
 
-The controls are similar to the 🔢 [Table](../tab-reference/table.md) tab. The selected time is synchronized across all tabs. Click a row to select it, or hover over a row to preview it in any visible pop-up windows. Clicking the ↓ button jumps to the selected time (or the time entered in the box). Enter text in the "Filter" input to only display rows which contain the filter text. Press `Ctrl+F` to quickly select the "Filter" input.
+The controls are similar to the 🔢 [Table](../tab-reference/table.md) tab. The selected time is synchronized across all tabs. Click a row to select it, or hover over a row to preview it in any visible pop-up windows. Clicking the ↓ button jumps to the selected time (or the time entered in the box).
 
-:::info
-Add a "!" at the start of the filter text to _exclude_ matching messages from the main view.
+Enter text in the "Filter" input to only display rows which contain the filter text. Press `Ctrl+F` to quickly select the "Filter" input. Add a "!" at the start of the filter text to _exclude_ matching messages from the main view.
+
+:::tip
+Click the save icon to export the console data to a text file.
 :::

docsSite/docs/whats-new/index.md

@@ -61,7 +61,7 @@ Users of the WPILib [persistent alerts](https://docs.wpilib.org/en/latest/docs/s
 
 ### 💬 Console Improvements
 
-The 💬 [Console](../tab-reference/console.md) includes new visualization options, like shading for **error and warning message**, the ability to **exclude unwanted messages**, and **highlighting of matching filter text**.
+The 💬 [Console](../tab-reference/console.md) includes new visualization options, like shading for **error and warning message**, the ability to **exclude unwanted messages**, **highlight of matching filter text**, and **text file exporting**.
 
 ![Console tab](../tab-reference/img/console-1.png)
 

src/main/main.ts

@@ -994,6 +994,23 @@ async function handleHubMessage(window: BrowserWindow, message: NamedMessage) {
       select3DCameraPopup(window, message.data.options, message.data.selectedIndex, message.data.fov);
       break;
 
+    case "export-console":
+      dialog
+        .showSaveDialog(window, {
+          title: "Select export location for console log",
+          defaultPath: "Console " + new Date().toLocaleDateString().replaceAll("/", "-") + ".txt",
+          properties: ["createDirectory", "showOverwriteConfirmation", "dontAddToRecent"],
+          filters: [{ name: "Text files", extensions: ["txt"] }]
+        })
+        .then((response) => {
+          if (!response.canceled) {
+            fs.writeFile(response.filePath!, message.data, (err) => {
+              if (err) throw err;
+            });
+          }
+        });
+      break;
+
     case "prompt-export":
       if (message.data.incompleteWarning) {
         dialog

src/shared/renderers/ConsoleRenderer.ts

@@ -11,6 +11,7 @@ export default class ConsoleRenderer implements TabRenderer {
   private TABLE_BODY: HTMLElement;
   private JUMP_INPUT: HTMLInputElement;
   private JUMP_BUTTON: HTMLInputElement;
+  private EXPORT_BUTTON: HTMLButtonElement | null;
   private HIGHLIGHT_BUTTON: HTMLButtonElement;
   private FILTER_INPUT: HTMLInputElement;
   private FIELD_CELL: HTMLElement;
@@ -36,7 +37,12 @@ export default class ConsoleRenderer implements TabRenderer {
     this.TABLE_BODY = this.TABLE_CONTAINER.firstElementChild?.firstElementChild as HTMLElement;
     this.JUMP_INPUT = this.TABLE_BODY.firstElementChild?.firstElementChild?.firstElementChild as HTMLInputElement;
     this.JUMP_BUTTON = this.TABLE_BODY.firstElementChild?.firstElementChild?.lastElementChild as HTMLInputElement;
-    this.HIGHLIGHT_BUTTON = this.TABLE_BODY.firstElementChild?.lastElementChild?.children[1] as HTMLButtonElement;
+    this.EXPORT_BUTTON = hasController
+      ? (this.TABLE_BODY.firstElementChild?.lastElementChild?.children[1] as HTMLButtonElement)
+      : null;
+    this.HIGHLIGHT_BUTTON = this.TABLE_BODY.firstElementChild?.lastElementChild?.getElementsByClassName(
+      "highlight-button"
+    )[0] as HTMLButtonElement;
     this.FILTER_INPUT = this.TABLE_BODY.firstElementChild?.lastElementChild?.lastElementChild as HTMLInputElement;
     this.FIELD_CELL = this.TABLE_BODY.firstElementChild?.lastElementChild as HTMLElement;
     this.FIELD_TEXT = this.FIELD_CELL.firstElementChild?.firstElementChild as HTMLElement;
@@ -74,6 +80,20 @@ export default class ConsoleRenderer implements TabRenderer {
     this.JUMP_BUTTON.addEventListener("click", jump);
     this.FILTER_INPUT.addEventListener("input", () => this.updateData());
 
+    // Export button
+    if (this.EXPORT_BUTTON !== null) {
+      this.EXPORT_BUTTON.addEventListener("click", () => {
+        if (this.values.length === 0) {
+          window.sendMainMessage("error", {
+            title: "Cannot export console log",
+            content: "Please add a field with console data, then try again."
+          });
+        } else {
+          window.sendMainMessage("export-console", this.values.join("\n"));
+        }
+      });
+    }
+
     // Highlight button
     this.HIGHLIGHT_BUTTON.addEventListener("click", () => {
       this.HIGHLIGHT_BUTTON.classList.toggle("active");

www/hub.html

@@ -592,6 +592,9 @@
                       <img src="symbols/xmark.svg" />
                     </button>
                   </div>
+                  <button class="export-button" tabindex="-1">
+                    <img src="symbols/square.and.arrow.down.svg" />
+                  </button>
                   <button class="highlight-button" tabindex="-1">
                     <img src="symbols/paintpalette.fill.svg" />
                   </button>

www/renderers.css

@@ -488,7 +488,7 @@ table.console-table th:not(:first-child) div {
   left: 0px;
   top: 0px;
   height: 30px;
-  right: 218px;
+  right: 246px;
   padding-left: 5px;
   overflow: hidden;
   font-size: 14px;
@@ -497,6 +497,21 @@ table.console-table th:not(:first-child) div {
   white-space: nowrap;
 }
 
+table.console-table th:not(:first-child) div.wide {
+  right: 218px;
+}
+
+table.console-table button.export-button {
+  position: absolute;
+  top: 50%;
+  right: 216px;
+  height: 25px;
+  width: 25px;
+  padding-top: 9px;
+  padding-bottom: 9px;
+  transform: translateY(-50%);
+}
+
 table.console-table button.highlight-button {
   position: absolute;
   top: 50%;

www/satellite.html

@@ -107,7 +107,7 @@
                 </button>
               </th>
               <th>
-                <div>
+                <div class="wide">
                   <span></span>
                   <button class="console-table-key-delete" tabindex="-1">
                     <img src="symbols/xmark.svg" />