From b5c3428a42b2265ddf377cb5c331a4c988b1573f Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Tue, 23 Dec 2025 09:53:58 -0800 Subject: [PATCH 1/7] Detect safe mode and notify when restarting --- index.html | 7 +++++++ js/common/utilities.js | 4 ++-- js/script.js | 4 ++-- js/workflows/workflow.js | 36 +++++++++++++++++++++++++++++++++++- 4 files changed, 46 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 26db8e2..478cac5 100644 --- a/index.html +++ b/index.html @@ -186,6 +186,13 @@ +
+
+
+ + +
+
diff --git a/js/common/utilities.js b/js/common/utilities.js index 0b9f881..4ad4824 100644 --- a/js/common/utilities.js +++ b/js/common/utilities.js @@ -53,7 +53,7 @@ function isIp() { // Check if the current url is a Web Workflow, IP, or Test Address and current path is /code/ function isLocal() { - return (isMdns() || location.hostname == "localhost" || isIp()) && (location.pathname == "/code/"); + return location.hostname == "localhost" || ((isMdns() || isIp()) && location.pathname == "/code/"); } // Test to see if browser is running on Microsoft Windows OS @@ -67,7 +67,7 @@ function isMicrosoftWindows() { return false; } -// Test to see if browser is running on Microsoft Windows OS +// Test to see if browser is running on Chrome OS function isChromeOs() { if (navigator.userAgent.includes("CrOS")) { return true; diff --git a/js/script.js b/js/script.js index 6b32d71..1025b1c 100644 --- a/js/script.js +++ b/js/script.js @@ -229,6 +229,7 @@ async function checkConnected() { await workflow.showInfo(getDocState()); } } + return true; } @@ -491,7 +492,7 @@ async function saveFileContents(path) { if (currentTimeout != null) { clearTimeout(currentTimeout); } - currentTimeout = setTimeout(saveFileContents, 2000); + currentTimeout = setTimeout(await saveFileContents(path), 2000); } } @@ -621,7 +622,6 @@ document.addEventListener('DOMContentLoaded', async (event) => { } } } else { - //await showMessage("USB Workflow is currently experiencing issues. See GitHub issue #203 for more details. Please use Web Workflow."); await checkConnected(); } }); diff --git a/js/workflows/workflow.js b/js/workflows/workflow.js index 33c7ada..661737a 100644 --- a/js/workflows/workflow.js +++ b/js/workflows/workflow.js @@ -1,7 +1,8 @@ import {REPL} from '@adafruit/circuitpython-repl-js'; +//import {REPL} from '../../../circuitpython-repl-js/repl.js'; import {FileHelper} from '../common/file.js'; -import {UnsavedDialog} from '../common/dialogs.js'; +import {ButtonValueDialog, UnsavedDialog} from '../common/dialogs.js'; import {FileDialog, FILE_DIALOG_OPEN, FILE_DIALOG_SAVE} from '../common/file_dialog.js'; import {CONNTYPE, CONNSTATE} from '../constants.js'; import {plotValues} from '../common/plotter.js' @@ -42,6 +43,7 @@ class Workflow { this.disconnectCallback = null; this.loadEditor = null; this.connectDialog = null; + this._okCancelDialog = new ButtonValueDialog("ok-cancel"); this._connected = false; this.currentFilename = null; this.fileHelper = null; @@ -91,9 +93,27 @@ class Workflow { } async restartDevice() { + if (await this.safeMode()) { + let result = await this._okCancelDialog.open("Device is currently in safe mode. Reboot device?"); + if (result === "ok") { + console.log("Rebooting device from safe mode"); + await this.rebootDevice(); + } + } await this.repl.softRestart(); } + async rebootDevice() { + let code = ` +try: + import microcontroller + microcontroller.reset() +except ImportError: + pass +`; + await this.showBusy(this.repl.runCode(code)); + } + async haltScript() { await this.repl.interruptCode(); } @@ -311,6 +331,20 @@ class Workflow { return false; } + async safeMode() { + let code = ` +try: + import supervisor + print(supervisor.runtime.safe_mode_reason is not supervisor.SafeModeReason.NONE) +except ImportError: + print(False) +`; + let result = await this.showBusy(this.repl.runCode(code)); + let isSafeMode = result.match("True") != null; + + return isSafeMode; + } + async parseParams() { return true; } From 9fe236998b57c7087ef82996020463906a47ed36 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 30 Dec 2025 17:47:20 +0000 Subject: [PATCH 2/7] Bump @xterm/xterm from 5.5.0 to 6.0.0 Bumps [@xterm/xterm](https://github.com/xtermjs/xterm.js) from 5.5.0 to 6.0.0. - [Release notes](https://github.com/xtermjs/xterm.js/releases) - [Commits](https://github.com/xtermjs/xterm.js/compare/5.5.0...6.0.0) --- updated-dependencies: - dependency-name: "@xterm/xterm" dependency-version: 6.0.0 dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] --- package-lock.json | 13 ++++++++----- package.json | 2 +- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 16d3732..a58ee5d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@fortawesome/fontawesome-free": "^7.1.0", "@xterm/addon-fit": "^0.11.0", "@xterm/addon-web-links": "^0.12.0", - "@xterm/xterm": "^5.5.0", + "@xterm/xterm": "^6.0.0", "chart.js": "^4.5.1", "codemirror": "^6.0.2", "file-saver": "^2.0.5", @@ -1259,10 +1259,13 @@ "license": "MIT" }, "node_modules/@xterm/xterm": { - "version": "5.5.0", - "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-5.5.0.tgz", - "integrity": "sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==", - "license": "MIT" + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz", + "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==", + "license": "MIT", + "workspaces": [ + "addons/*" + ] }, "node_modules/asynckit": { "version": "0.4.0", diff --git a/package.json b/package.json index 5ff5ff0..90248a5 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,7 @@ "@fortawesome/fontawesome-free": "^7.1.0", "@xterm/addon-fit": "^0.11.0", "@xterm/addon-web-links": "^0.12.0", - "@xterm/xterm": "^5.5.0", + "@xterm/xterm": "^6.0.0", "chart.js": "^4.5.1", "codemirror": "^6.0.2", "file-saver": "^2.0.5", From 6f94f20f742a8cf3434752f5bec764c59cc82dd7 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Tue, 30 Dec 2025 09:58:29 -0800 Subject: [PATCH 3/7] Change text input to custom dialog --- index.html | 8 ++++++++ js/common/dialogs.js | 23 ++++++++++++++++++++++- js/common/file_dialog.js | 12 +++++++++--- 3 files changed, 39 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 478cac5..97f4b02 100644 --- a/index.html +++ b/index.html @@ -199,6 +199,14 @@
+
+
+ +
+ + +
+
diff --git a/js/common/dialogs.js b/js/common/dialogs.js index 74bb077..1b71b90 100644 --- a/js/common/dialogs.js +++ b/js/common/dialogs.js @@ -241,6 +241,26 @@ class MessageModal extends GenericModal { } } +class InputModal extends GenericModal { + _handleOkButton(event) { + this._returnValue(this._getElement('inputValueField').value); + } + + async open(message, defaultValue="") { + let p = super.open(); + const cancelButton = this._currentModal.querySelector("button.cancel-button"); + this._addDialogElement('cancelButton', cancelButton, 'click', this._closeModal); + const okButton = this._currentModal.querySelector("button.ok-button"); + this._addDialogElement('okButton', okButton, 'click', this._handleOkButton); + const inputValueField = this._currentModal.querySelector("#inputvalue"); + this._addDialogElement('inputValueField', inputValueField); + this._setElementValue('inputValueField', defaultValue); + this._currentModal.querySelector("#message").innerHTML = message; + + return p; + } +} + class ProgressDialog extends GenericModal { async open() { let p = super.open(); @@ -424,5 +444,6 @@ export { UnsavedDialog, DiscoveryModal, ProgressDialog, - DeviceInfoModal + DeviceInfoModal, + InputModal }; \ No newline at end of file diff --git a/js/common/file_dialog.js b/js/common/file_dialog.js index 3e05266..b96b609 100644 --- a/js/common/file_dialog.js +++ b/js/common/file_dialog.js @@ -1,4 +1,4 @@ -import {GenericModal, ProgressDialog, ButtonValueDialog} from './dialogs.js'; +import {GenericModal, ProgressDialog, ButtonValueDialog, InputModal} from './dialogs.js'; import {readUploadedFileAsArrayBuffer} from './utilities.js'; import {saveAs} from 'file-saver'; import JSZip from 'jszip'; @@ -321,6 +321,11 @@ class FileDialog extends GenericModal { return selectedItems > 1; } + async _prompt(message, defaultValue="") { + const inputModal = new InputModal("input"); + return await inputModal.open(message, defaultValue); + } + _updateToolbar() { this._setElementEnabled('delButton', this._canPerformWritableFileOperation()); this._setElementEnabled('renameButton', !this._multipleItemsSelected() && this._canPerformWritableFileOperation()); @@ -653,7 +658,8 @@ class FileDialog extends GenericModal { return; } oldName = oldName[0]; - let newName = prompt("Enter a new folder name", oldName); + let newName = await this._prompt("Enter a new name", oldName); + // If cancelled, do nothing if (!newName) { return; @@ -688,7 +694,7 @@ class FileDialog extends GenericModal { async _handleNewFolderButton() { if (this._readOnlyMode) return; // prompt for new folder name - let folderName = prompt("Enter a new folder name"); + let folderName = await this._prompt("Enter a new folder name"); // If cancelled, do nothing if (!folderName) { return; From fb6f0683fca43e39c6389af866086736d6636691 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Fri, 9 Jan 2026 13:41:12 -0800 Subject: [PATCH 4/7] Add settings and themes feature --- index.html | 9 ++ js/common/settings.js | 125 +++++++++++++++++++++++++++ js/script.js | 64 ++++++++++++-- sass/layout/_editor.scss | 98 ---------------------- sass/layout/_layout.scss | 38 +++++---- sass/layout/_themes.scss | 177 +++++++++++++++++++++++++++++++++++++++ sass/style.scss | 2 +- 7 files changed, 389 insertions(+), 124 deletions(-) create mode 100644 js/common/settings.js delete mode 100644 sass/layout/_editor.scss create mode 100644 sass/layout/_themes.scss diff --git a/index.html b/index.html index 97f4b02..db3c055 100644 --- a/index.html +++ b/index.html @@ -120,6 +120,7 @@
+
@@ -153,6 +154,14 @@ +
+ +
+
+ + +
+
diff --git a/js/common/settings.js b/js/common/settings.js new file mode 100644 index 0000000..6f48b5a --- /dev/null +++ b/js/common/settings.js @@ -0,0 +1,125 @@ +import {GenericModal} from './dialogs.js'; + +class SettingsDialog extends GenericModal { + constructor(modalId, settingsData) { + super(modalId); + this._settingsData = settingsData; + this._settings = {} + } + + async open(settings) { + let p = super.open(); + const cancelButton = this._currentModal.querySelector("button.cancel-button"); + this._addDialogElement('cancelButton', cancelButton, 'click', this._closeModal); + const okButton = this._currentModal.querySelector("button.ok-button"); + this._addDialogElement('okButton', okButton, 'click', this._handleOkButton); + + const contentDiv = this._currentModal.querySelector("#settings-content"); + contentDiv.innerHTML = ''; + + for (const setting of this._settingsData) { + const label = document.createElement('label'); + label.textContent = setting.label; + if (setting.icon) { + const icon = document.createElement('i'); + icon.className = `fa-solid fa-${setting.icon} setting-item-icon`; + label.prepend(icon); + } + label.htmlFor = `setting-${setting.key}`; + contentDiv.appendChild(label); + + const control = await this._createControl(setting); + control.value = settings[setting.key]; + contentDiv.appendChild(control); + } + + return p; + } + + async _handleOkButton() { + let settings = {} + for (const setting of this._settingsData) { + const control = this._currentModal.querySelector(`#setting-${setting.key}`); + settings[setting.key] = control.value; + } + this._returnValue(settings); + } + + async _createControl(settingData) { + // Return the created control + let control; + if (settingData.type === 'select') { + control = document.createElement('select'); + for (const optionValue of settingData.options) { + const option = document.createElement('option'); + option.value = optionValue; + option.textContent = optionValue.charAt(0).toUpperCase() + optionValue.slice(1); + control.appendChild(option); + } + } + control.id = `setting-${settingData.key}`; + + // this will also call this._addDialogElement to add event listeners as needed + this._addDialogElement(`setting-${settingData.key}`, control); + return control; + } +} + +class Settings { + // This is a class that handles loading/saving settings as well as providing a settings dialog + constructor() { + // This will hold the layout/save data for the settings + this._settingsData = [ + { key: 'theme', type: 'select', label: 'Editor Theme', icon: 'palette', options: ['dark', 'light'], default: 'dark' } + ]; + this._settings = {}; + this._loadSettings(); + + this._settingsDialog = new SettingsDialog('settings', this._settingsData); + } + + _loadSettings() { + // Load all saved settings or defaults + for (const setting of this._settingsData) { + this._settings[setting.key] = this._loadSetting(setting.key, setting.default); + } + } + + _saveSettings() { + // Save all settings + for (const key in this._settings) { + this._saveSetting(key, this._settings[key]); + } + } + + _loadSetting(setting, defaultValue) { + let value = JSON.parse(window.localStorage.getItem(setting)); + if (value == null) { + return defaultValue; + } + + return value; + } + + _saveSetting(setting, value) { + window.localStorage.setItem(setting, JSON.stringify(value)); + } + + getSetting(key) { + return this._settings[key]; + } + + async showDialog() { + this._settings = await this._settingsDialog.open(this._settings); + if (this._settings) { + this._saveSettings(); + return true; + } + return false; + } +} + + +export { + Settings +}; diff --git a/js/script.js b/js/script.js index 1025b1c..32c2a50 100644 --- a/js/script.js +++ b/js/script.js @@ -1,7 +1,7 @@ import { basicSetup } from "codemirror"; import { EditorView, keymap } from "@codemirror/view"; import { EditorState } from "@codemirror/state"; -import {indentWithTab} from "@codemirror/commands" +import { indentWithTab } from "@codemirror/commands" import { python } from "@codemirror/lang-python"; import { syntaxHighlighting, indentUnit } from "@codemirror/language"; import { classHighlighter } from "@lezer/highlight"; @@ -17,9 +17,10 @@ import { WebWorkflow } from './workflows/web.js'; import { isValidBackend, getBackendWorkflow, getWorkflowBackendName } from './workflows/workflow.js'; import { ButtonValueDialog, MessageModal } from './common/dialogs.js'; import { isLocal, switchUrl, getUrlParam } from './common/utilities.js'; +import { Settings } from './common/settings.js'; import { CONNTYPE } from './constants.js'; import './layout.js'; // load for side effects only -import {setupPlotterChart} from "./common/plotter.js"; +import { setupPlotterChart } from "./common/plotter.js"; import { mainContent, showSerial } from './layout.js'; // Instantiate workflows @@ -31,6 +32,7 @@ workflows[CONNTYPE.Web] = new WebWorkflow(); let workflow = null; let unchanged = 0; let connectionPromise = null; +let debugMessageAnsi = null; const btnRestart = document.querySelector('.btn-restart'); const btnHalt = document.querySelector('.btn-halt'); @@ -43,13 +45,15 @@ const btnSave = document.querySelectorAll('.btn-save'); const btnSaveAs = document.querySelectorAll('.btn-save-as'); const btnSaveRun = document.querySelectorAll('.btn-save-run'); const btnInfo = document.querySelector('.btn-info'); +const btnSettings = document.querySelector('.btn-settings'); const terminalTitle = document.getElementById('terminal-title'); const serialPlotter = document.getElementById('plotter'); const messageDialog = new MessageModal("message"); const connectionType = new ButtonValueDialog("connection-type"); +const settings = new Settings(); -const editorTheme = EditorView.theme({}, {dark: true}); +const editorTheme = EditorView.theme({}, {dark: getCssVar('editor-theme-dark').trim() === '1'}); document.addEventListener('DOMContentLoaded', function() { document.getElementById('mobile-menu-button').addEventListener('click', handleMobileToggle); @@ -168,6 +172,12 @@ btnInfo.addEventListener('click', async function(e) { } }); +btnSettings.addEventListener('click', async function(e) { + if (await settings.showDialog()) { + applySettings(); + } +}); + // Basic functions used for buttons and hotkeys async function openFile() { if (await checkConnected()) { @@ -420,8 +430,12 @@ async function showMessage(message) { } async function debugLog(msg) { + if (debugMessageAnsi === null) { + const colorCode = getCssVar('debug-message-color').trim(); + debugMessageAnsi = `\x1b[38;2;${parseInt(colorCode.slice(1,3),16)};${parseInt(colorCode.slice(3,5),16)};${parseInt(colorCode.slice(5,7),16)}m`; + } state.terminal.writeln(''); // get a fresh line without any prior content (a '>>>' prompt might be there without newline) - state.terminal.writeln(`\x1b[93m${msg}\x1b[0m`); + state.terminal.writeln(`${debugMessageAnsi}${msg}\x1b[0m`); } function updateUIConnected(isConnected) { @@ -547,12 +561,16 @@ editor = new EditorView({ parent: document.querySelector('#editor') }); +function getCssVar(varName) { + return window.getComputedStyle(document.body).getPropertyValue("--" + varName); +} + async function setupXterm() { state.terminal = new Terminal({ theme: { - background: '#333', - foreground: '#ddd', - cursor: '#ddd', + background: getCssVar('background-color'), + foreground: getCssVar('terminal-text-color'), + cursor: getCssVar('terminal-text-color'), } }); @@ -585,8 +603,40 @@ function loadParameterizedContent() { return documentState; } +function applySettings() { + // ----- Themes ----- + const theme = settings.getSetting('theme'); + // Remove all theme-[option] classes from body + document.body.classList.forEach((className) => { + if (className.startsWith('theme-')) { + document.body.classList.remove(className); + } + }); + + // Add the selected theme class + document.body.classList.add(`theme-${theme}`); + + // Apply to EditorView.theme dark parameter + editor.darkTheme = getCssVar('editor-theme-dark').trim() === '1'; + + // Apply to xterm + state.terminal.options.theme = { + background: getCssVar('background-color'), + foreground: getCssVar('terminal-text-color'), + cursor: getCssVar('terminal-text-color'), + }; + + debugMessageAnsi = null; + + // Note: Debug Message color is applied on next debug message or reload + // I'm not sure how to go through the xterm's existing content and change escape sequences + // Changing the CSS style reverts to the old style on terminal update/redraw + +} + document.addEventListener('DOMContentLoaded', async (event) => { await setupXterm(); + applySettings(); btnConnect.forEach((element) => { element.addEventListener('click', async function(e) { e.preventDefault(); diff --git a/sass/layout/_editor.scss b/sass/layout/_editor.scss deleted file mode 100644 index 3ca2a09..0000000 --- a/sass/layout/_editor.scss +++ /dev/null @@ -1,98 +0,0 @@ - -.cm-editor { - color: #ddd; - background-color: #333; - line-height: 1.5; - font-family: 'Operator Mono', 'Source Code Pro', Menlo, Monaco, Consolas, Courier New, monospace; - max-height: calc(100vh - 2*4em - 5em); - - .cm-content { - caret-color: orange; - } - - .cm-comment { - font-style: italic; - color: #676B79; - } - - .cm-operator { - color: #f3f3f3; - } - - .cm-string { - color: #19F9D8; - } - - .cm-string-2 { - color: #FFB86C; - } - - .cm-tag { - color: #ff2c6d; - } - - .cm-meta { - color: #b084eb; - } - - &.cm-focused .cm-cursor { - border-left-color: orange; - } - - &.cm-focused .cm-selectionBackground, - ::selection { - background-color: orange; - } - - &.ͼ3.cm-focused .cm-scroller .cm-selectionLayer .cm-selectionBackground { - background-color: #99eeff33; - } - - .cm-gutters { - background-color: #292a2b; - color: #ddd; - border: none; - } - - .cm-scroller { - overflow: auto; - } - - /* Highlight Tags */ - .tok-comment { - color: #7F848E; - } - - .tok-variableName { - color: #61AFEF; - } - - .tok-operator { - color: #56B6C2; - } - - .tok-string { - color: #98C379; - } - - .tok-punctuation { - color: #fff; - } - - .tok-number { - color: #E5C07B, - } - - .tok-keyword { - color: #C678DD, - } - - .tok-propertyName { - color: #D19A66; - } - - .tok-atom, - .tok-bool { - color: #E06C75; - } -} diff --git a/sass/layout/_layout.scss b/sass/layout/_layout.scss index eae8f4f..b9f808e 100644 --- a/sass/layout/_layout.scss +++ b/sass/layout/_layout.scss @@ -52,10 +52,6 @@ display: flex; } } - - &.unsaved .file-path { - color: #f60; - } } #editor-bar, #serial-bar { @@ -73,14 +69,12 @@ #editor-page { #editor { flex: 1 1 0%; - background: #333; } } #serial-page { #plotter { flex: 2 1 0; - background: #777; position: relative; width: 99%; overflow: hidden; @@ -92,7 +86,6 @@ } #terminal { flex: 1 1 0%; - background: #333; position: relative; width: 100%; overflow: hidden; @@ -103,18 +96,7 @@ cursor: default; position: absolute; inset: 0; - scrollbar-color: var(--highlight) var(--dark); - scrollbar-width: thin; width: initial !important; - - &::-webkit-scrollbar { - background-color: var(--dark); - width: 5px; - } - - &::-webkit-scrollbar-thumb { - background: var(--highlight); - } } } #buffer-size{ @@ -169,6 +151,26 @@ text-decoration: underline; } } + + &.settings-dialog { + #settings-content { + padding-top: 10px; + display: flex; + justify-content: center; + align-items: center; + min-width: 300px; + label { + i { + margin-right: 3px; + } + margin-right: 20px; + white-space: nowrap; + } + input, select { + width: 100%; + } + } + } } .mode-button { diff --git a/sass/layout/_themes.scss b/sass/layout/_themes.scss new file mode 100644 index 0000000..7e11b1e --- /dev/null +++ b/sass/layout/_themes.scss @@ -0,0 +1,177 @@ +@use "../base/variables" as *; + +// Dark Theme (default) +:root { + --editor-theme-dark: 1; // General dark theme flag + --background-color: #333; + --plotter-background: #777; + --border-style: none; + --terminal-text-color: #ddd; + --puctuation-color: #fff; + --operator-color: #f3f3f3; + --gutter-color: #292a2b; + --gutter-active-line-color: #222227; + --gutter-text-color: #ddd; + --debug-message-color: #fce94f; + --unsaved-file-color: #f60; +} + +// Light Theme +.theme-light { + --editor-theme-dark: 0; // General dark theme flag + --background-color: #f8f8f8; + --plotter-background: #ccc; + --border-style: 1px solid #{$gray-border}; + --terminal-text-color: #333; + --puctuation-color: #000; + --gutter-color: #ddd; + --gutter-active-line-color: #ccc; + --gutter-text-color: #222; + --debug-message-color: #FF9900; +} + +// Styles applied to both themes + +#main-content { + &.unsaved .file-path { + color: var(--unsaved-file-color); + } +} + +#footer-bar { + border-top: var(--border-style); +} + +#editor-bar, #serial-bar { + border-bottom: var(--border-style); +} + +#editor-page { + #editor { + background: var(--background-color); + } +} + +#serial-page { + #plotter { + background: var(--plotter-background); + } + #terminal { + background: var(--background-color); + .xterm .xterm-viewport { + scrollbar-color: var(--highlight) var(--dark); + scrollbar-width: thin; + + &::-webkit-scrollbar { + background-color: var(--dark); + width: 5px; + } + + &::-webkit-scrollbar-thumb { + background: var(--highlight); + } + } + } +} + +.cm-editor { + color: #ddd; + background-color: var(--background-color); + line-height: 1.5; + font-family: 'Operator Mono', 'Source Code Pro', Menlo, Monaco, Consolas, Courier New, monospace; + max-height: calc(100vh - 2*4em - 5em); + + .cm-content { + caret-color: orange; + } + + .cm-comment { + font-style: italic; + color: #676B79; + } + + .cm-operator { + color: var(--operator-color); + } + + .cm-string { + color: #19F9D8; + } + + .cm-string-2 { + color: #FFB86C; + } + + .cm-tag { + color: #ff2c6d; + } + + .cm-meta { + color: #b084eb; + } + + &.cm-focused .cm-cursor { + border-left-color: orange; + } + + &.cm-focused .cm-selectionBackground, + ::selection { + background-color: orange; + } + + &.ͼ3.cm-focused .cm-scroller .cm-selectionLayer .cm-selectionBackground { + background-color: #99eeff33; + } + + .cm-gutters { + background-color: var(--gutter-color); + color: var(--gutter-text-color); + border: none; + } + + .cm-activeLineGutter { + background-color: var(--gutter-active-line-color); + } + + .cm-scroller { + overflow: auto; + } + + /* Highlight Tags */ + .tok-comment { + color: #7F848E; + } + + .tok-variableName { + color: #61AFEF; + } + + .tok-operator { + color: #56B6C2; + } + + .tok-string { + color: #98C379; + } + + .tok-punctuation { + color: var(--puctuation-color); + } + + .tok-number { + color: #E5C07B, + } + + .tok-keyword { + color: #C678DD, + } + + .tok-propertyName { + color: #D19A66; + } + + .tok-atom, + .tok-bool { + color: #E06C75; + } +} diff --git a/sass/style.scss b/sass/style.scss index a53a15e..7eecf56 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -12,6 +12,6 @@ @use 'layout/layout'; @use 'layout/grid'; -@use 'layout/editor'; +@use 'layout/themes'; @use 'layout/header'; @use 'layout/header_mobile'; From 297c8fa3e8de72a1bee62b5de6ca0b52452092a3 Mon Sep 17 00:00:00 2001 From: Melissa LeBlanc-Williams Date: Fri, 16 Jan 2026 16:34:29 -0800 Subject: [PATCH 5/7] Code and Serial Panels printable --- index.html | 4 ++-- js/layout.js | 46 +++++++++++++++++++++++++++++++++++++++++++- sass/base/_base.scss | 20 +++++++++++++++++++ 3 files changed, 67 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index db3c055..e937f60 100644 --- a/index.html +++ b/index.html @@ -90,7 +90,7 @@
-
+
@@ -113,7 +113,7 @@
-
+