Merge pull request #54 from ShortArrow/feat/panel-apply-all

Stage toggle changes and add Apply all to the panel

Author: ShortArrow

CHANGELOG.md

@@ -62,5 +62,5 @@ All notable changes to the "ShortArrow.line-number-deco" extension will be docum
 - Releases are built by GitHub Actions on tag push: tests on three OSes, a packaged VSIX with build provenance, and an installation smoke test (#29)
 - The VSIX no longer ships tests, the generator, or CI files
 - Package manager is pnpm instead of Yarn
-- A settings panel in the activity bar toggles each decoration and previews colors live, saving per workspace or user (#21)
+- A settings panel in the activity bar previews toggles and colors live, with per-row Apply and Apply all per workspace or user (#21)
 - List settings and commands in `README.md` (#20), add an `init.lua` example (#31), and trim the recommended plugin list to maintained extensions (#26)

README.md

@@ -86,7 +86,7 @@ The `ForUser` variants write to your user settings; the others write to the curr
 
 ## Settings panel
 
-The LineNumberDeco entry in the activity bar opens a panel with a switch for each decoration above every color setting with its saved value and a color picker. Flipping a switch turns that decoration on or off straight away, writing to the scope the radio at the top selects. Dragging a picker previews that color in the open editors without saving it; Apply writes it to the workspace or to your user settings, whichever the radio at the top selects. Closing the panel discards any preview that was not applied.
+The LineNumberDeco entry in the activity bar opens a panel with a switch for each decoration above every color setting with its saved value and a color picker. Flipping a switch and dragging a picker both preview in the open editors without saving anything, and the row is marked until it is saved. The Apply beside a row saves that one setting; Apply all at the bottom saves everything still pending. Either writes to the workspace or to your user settings, whichever the radio at the top selects. Closing the panel discards every preview that was not applied.
 
 ## Calling commands from init.lua
 

src/config.ts

@@ -1,5 +1,5 @@
 import * as vscode from "vscode";
-import { getPreviewColor } from "./preview";
+import { getPreviewColor, getPreviewToggle } from "./preview";
 
 export const nameOfExtension = "LineNumberDeco";
 export const defaultCenterColorOfRainbow = "#8888ff";
@@ -56,11 +56,17 @@ export function getColorAtInactiveRowNumber() {
 }
 
 export function getEnableRainbow() {
-  return getConfig<boolean>("enableRainbow", false);
+  return (
+    getPreviewToggle("enableRainbow") ??
+    getConfig<boolean>("enableRainbow", false)
+  );
 }
 
 export function getEnableRepeatingDigits() {
-  return getConfig<boolean>("enableRepeatingDigits", false);
+  return (
+    getPreviewToggle("enableRepeatingDigits") ??
+    getConfig<boolean>("enableRepeatingDigits", false)
+  );
 }
 
 export function getColorAtRepeatingDigits() {
@@ -71,7 +77,10 @@ export function getColorAtRepeatingDigits() {
 }
 
 export function getEnableSequentialDigits() {
-  return getConfig<boolean>("enableSequentialDigits", false);
+  return (
+    getPreviewToggle("enableSequentialDigits") ??
+    getConfig<boolean>("enableSequentialDigits", false)
+  );
 }
 
 export function getColorAtSequentialDigits() {
@@ -82,5 +91,8 @@ export function getColorAtSequentialDigits() {
 }
 
 export function getEnableRelativeLine() {
-  return getConfig<boolean>("enableRelativeLine", true);
+  return (
+    getPreviewToggle("enableRelativeLine") ??
+    getConfig<boolean>("enableRelativeLine", true)
+  );
 }

src/panel.ts

@@ -2,7 +2,13 @@ import * as crypto from "crypto";
 import * as vscode from "vscode";
 import { getConfig, nameOfExtension } from "./config";
 import { PanelRow, PanelToggle, renderPanelHtml } from "./panelHtml";
-import { clearAllPreviews, clearPreviewColor, setPreviewColor } from "./preview";
+import {
+  clearAllPreviews,
+  clearPreview,
+  getPendingPreviews,
+  setPreviewColor,
+  setPreviewToggle,
+} from "./preview";
 import { updateUserConfig, updateWorkspaceConfig } from "./ui";
 
 const viewId = "lineNumberDeco.settings";
@@ -48,7 +54,9 @@ function currentRows(): PanelRow[] {
 type PanelMessage =
   | { type: "preview"; key: string; value: string }
   | { type: "apply"; key: string; value: string; scope: string }
-  | { type: "toggle"; key: string; value: boolean; scope: string };
+  | { type: "previewToggle"; key: string; value: boolean }
+  | { type: "applyToggle"; key: string; value: boolean; scope: string }
+  | { type: "applyAll"; scope: string };
 
 function isKnownKey(key: string) {
   return labels.some((entry) => entry.key === key);
@@ -109,21 +117,44 @@ class ColorPanelProvider implements vscode.WebviewViewProvider {
     });
   }
 
+  /** Save one setting where the scope radio points. */
+  private async save(key: string, value: string | boolean, scope: string) {
+    if (scope === "user") {
+      await updateUserConfig(key, value);
+    } else {
+      await updateWorkspaceConfig(key, value);
+    }
+  }
+
   private async handle(message: PanelMessage) {
     if (!message) {
       return;
     }
-    if (message.type === "toggle") {
+    if (message.type === "applyAll") {
+      for (const { key, value } of getPendingPreviews()) {
+        if (isKnownKey(key) || isKnownToggle(key)) {
+          await this.save(key, value, message.scope);
+        }
+      }
+      clearAllPreviews();
+      this.refresh();
+      this.postState();
+      return;
+    }
+    if (message.type === "previewToggle" || message.type === "applyToggle") {
       if (!isKnownToggle(message.key)) {
         return;
       }
       const value = message.value === true;
-      if (message.scope === "user") {
-        await updateUserConfig(message.key, value);
-      } else {
-        await updateWorkspaceConfig(message.key, value);
+      if (message.type === "previewToggle") {
+        setPreviewToggle(message.key, value);
+        this.refresh();
+        return;
       }
+      clearPreview(message.key);
+      await this.save(message.key, value, message.scope);
       this.refresh();
+      this.postState();
       return;
     }
     if (!isKnownKey(message.key)) {
@@ -135,12 +166,8 @@ class ColorPanelProvider implements vscode.WebviewViewProvider {
       return;
     }
     if (message.type === "apply") {
-      clearPreviewColor(message.key);
-      if (message.scope === "user") {
-        await updateUserConfig(message.key, message.value);
-      } else {
-        await updateWorkspaceConfig(message.key, message.value);
-      }
+      clearPreview(message.key);
+      await this.save(message.key, message.value, message.scope);
       this.refresh();
       this.postState();
     }

src/panelHtml.ts

@@ -30,19 +30,22 @@ function pickerValue(savedColor: string) {
 
 function renderToggle(toggle: PanelToggle) {
   const key = escapeHtml(toggle.key);
-  return `      <label class="toggle">
-        <span class="label">${escapeHtml(toggle.label)}</span>
-        <span class="switch">
-          <input type="checkbox" data-toggle="${key}"${toggle.value ? " checked" : ""} />
-          <span class="slider"></span>
-        </span>
-      </label>`;
+  return `      <div class="row toggle-row" data-row="${key}">
+        <label class="toggle">
+          <span class="label">${escapeHtml(toggle.label)}</span>
+          <span class="switch">
+            <input type="checkbox" data-toggle="${key}"${toggle.value ? " checked" : ""} />
+            <span class="slider"></span>
+          </span>
+        </label>
+        <button data-apply-toggle="${key}">Apply</button>
+      </div>`;
 }
 
 function renderRow(row: PanelRow) {
   const key = escapeHtml(row.key);
   const saved = escapeHtml(row.savedColor);
-  return `      <div class="row">
+  return `      <div class="row" data-row="${key}">
         <div class="label">${escapeHtml(row.label)}</div>
         <div class="controls">
           <span class="swatch" data-swatch="${key}" style="background:${saved}" title="${saved}"></span>
@@ -57,18 +60,25 @@ const script = `      const vscode = acquireVsCodeApi();
         const checked = document.querySelector('input[name="scope"]:checked');
         return checked ? checked.value : 'workspace';
       }
+      function markPending(key, pending) {
+        const row = document.querySelector('[data-row="' + key + '"]');
+        if (row) {
+          row.classList.toggle('pending', pending);
+        }
+      }
       document.querySelectorAll('input[type="checkbox"][data-toggle]').forEach((input) => {
         input.addEventListener('change', () => {
+          markPending(input.dataset.toggle, true);
           vscode.postMessage({
-            type: 'toggle',
+            type: 'previewToggle',
             key: input.dataset.toggle,
             value: input.checked,
-            scope: scope(),
           });
         });
       });
       document.querySelectorAll('input[type="color"]').forEach((input) => {
         input.addEventListener('input', () => {
+          markPending(input.dataset.key, true);
           vscode.postMessage({ type: 'preview', key: input.dataset.key, value: input.value });
         });
       });
@@ -79,6 +89,23 @@ const script = `      const vscode = acquireVsCodeApi();
           vscode.postMessage({ type: 'apply', key: key, value: input.value, scope: scope() });
         });
       });
+      document.querySelectorAll('button[data-apply-toggle]').forEach((button) => {
+        button.addEventListener('click', () => {
+          const key = button.dataset.applyToggle;
+          const box = document.querySelector('input[data-toggle="' + key + '"]');
+          vscode.postMessage({
+            type: 'applyToggle',
+            key: key,
+            value: box.checked,
+            scope: scope(),
+          });
+        });
+      });
+      document.querySelectorAll('button[data-apply-all]').forEach((button) => {
+        button.addEventListener('click', () => {
+          vscode.postMessage({ type: 'applyAll', scope: scope() });
+        });
+      });
       window.addEventListener('message', (event) => {
         const message = event.data;
         if (!message || message.type !== 'state') {
@@ -89,8 +116,10 @@ const script = `      const vscode = acquireVsCodeApi();
           if (box) {
             box.checked = toggle.value;
           }
+          markPending(toggle.key, false);
         });
         message.rows.forEach((row) => {
+          markPending(row.key, false);
           const swatch = document.querySelector('[data-swatch="' + row.key + '"]');
           if (swatch) {
             swatch.style.background = row.savedColor;
@@ -107,6 +136,10 @@ const style = `      body { font-family: var(--vscode-font-family); font-size: v
       .scope { display: flex; gap: 12px; margin-bottom: 12px; }
       .scope label { display: flex; align-items: center; gap: 4px; }
       .row { margin-bottom: 10px; }
+      .row.pending .label::after { content: " ●"; color: var(--vscode-charts-orange, var(--vscode-button-background)); }
+      .footer { border-top: 1px solid var(--vscode-panel-border); padding-top: 10px; }
+      .toggle-row { display: flex; align-items: center; gap: 8px; }
+      .toggle-row .toggle { flex: 1; margin-bottom: 0; }
       .label { margin-bottom: 4px; }
       .controls { display: flex; align-items: center; gap: 6px; }
       .swatch { width: 18px; height: 18px; border: 1px solid var(--vscode-panel-border); display: inline-block; }
@@ -131,6 +164,10 @@ const style = `      body { font-family: var(--vscode-font-family); font-size: v
  * carrying this nonce, and each toggle and row keeps its configuration key in a
  * data attribute so the messages back to the extension need no other lookup
  * table. The switches come first: they decide whether a color is drawn at all.
+ *
+ * Flipping a switch or dragging a picker only previews; a row marks itself
+ * pending until a state message says its value was saved. The footer button
+ * commits every pending row at once.
  */
 export function renderPanelHtml(
   toggles: PanelToggle[],
@@ -163,6 +200,9 @@ ${toggles.map(renderToggle).join("\n")}
       <h2>Colors</h2>
 ${rows.map(renderRow).join("\n")}
     </div>
+    <div class="footer">
+      <button data-apply-all="1">Apply all</button>
+    </div>
     <script nonce="${safeNonce}">
 ${script}
     </script>

src/preview.ts

@@ -1,25 +1,50 @@
+/** One setting a control is currently proposing, before anything is saved. */
+export interface PendingPreview {
+  key: string;
+  value: string | boolean;
+}
+
 /**
- * Colors a picker is currently proposing, keyed by configuration name.
+ * Settings the panel is currently proposing, keyed by configuration name.
  *
- * The color panel writes here while one of its pickers is being dragged, and the
- * config getters read an override before the configuration itself, so the editors
- * render the candidate color without anything being written to settings. Hiding
- * the panel clears the overrides and the configured colors take over again.
+ * The panel writes here while a picker is being dragged or a switch is flipped,
+ * and the config getters read an override before the configuration itself, so
+ * the editors render the candidate without anything being written to settings.
+ * Applying one row, applying all of them, or hiding the panel clears what is
+ * pending and the configured values take over again.
  */
-const previews = new Map<string, string>();
+const previews = new Map<string, string | boolean>();
 
 export function setPreviewColor(key: string, value: string) {
   previews.set(key, value);
 }
 
-export function clearPreviewColor(key: string) {
+export function setPreviewToggle(key: string, value: boolean) {
+  previews.set(key, value);
+}
+
+export function clearPreview(key: string) {
   previews.delete(key);
 }
 
+/** The name the color rows have always used for {@link clearPreview}. */
+export const clearPreviewColor = clearPreview;
+
 export function clearAllPreviews() {
   previews.clear();
 }
 
 export function getPreviewColor(key: string) {
-  return previews.get(key);
+  const value = previews.get(key);
+  return typeof value === "string" ? value : undefined;
+}
+
+export function getPreviewToggle(key: string) {
+  const value = previews.get(key);
+  return typeof value === "boolean" ? value : undefined;
+}
+
+/** Everything pending, so one action can commit all of it. */
+export function getPendingPreviews(): PendingPreview[] {
+  return [...previews].map(([key, value]) => ({ key, value }));
 }

src/test/panelHtml.test.ts

@@ -97,4 +97,23 @@ describe('Test render the color panel html', () => {
     );
     assert.ok(!html.includes('<b>'));
   });
+
+  it('Must offer an apply button per toggle row', () => {
+    const html = renderPanelHtml(toggles, rows, 'n0nce', 'vscode-resource:');
+    assert.ok(html.includes('data-apply-toggle="enableRainbow"'));
+  });
+
+  it('Must offer exactly one apply all control', () => {
+    const html = renderPanelHtml(toggles, rows, 'n0nce', 'vscode-resource:');
+    const occurrences = html.split('data-apply-all=').length - 1;
+    assert.strictEqual(occurrences, 1);
+  });
+
+  it('Must draw the apply all control below the color rows', () => {
+    const html = renderPanelHtml(toggles, rows, 'n0nce', 'vscode-resource:');
+    const lastApply = html.lastIndexOf('data-apply=');
+    const applyAll = html.indexOf('data-apply-all=');
+    assert.ok(lastApply >= 0, 'no color row apply button');
+    assert.ok(applyAll > lastApply, 'the apply all control is not below the colors');
+  });
 });

src/test/panelView.test.ts

@@ -39,5 +39,9 @@ describe('Test color panel view', () => {
         `resolved panel html has no switch for ${key}`
       );
     }
+    assert.ok(
+      (html as string).includes('data-apply-all='),
+      'resolved panel html has no apply all control'
+    );
   });
 });