chore(web-ui): Remove @vscode/webview-ui-toolkit dependency

microsoft/vscode-webview-ui-toolkit#561

esbuild.js

@@ -1,4 +1,3 @@
-const { error } = require('console');
 const { build, context } = require('esbuild');
 const { copy } = require('esbuild-plugin-copy');
 

package.json

@@ -9,7 +9,7 @@
   "author": "CodeScene AB",
   "publisher": "codescene",
   "description": "Integrates CodeScene analysis into VS Code. Keeps your code clean and maintainable.",
-  "version": "0.9.0",
+  "version": "0.9.1-beta-241107-2",
   "license": "MIT",
   "engines": {
     "vscode": "^1.75.1"
@@ -213,8 +213,8 @@
     "@types/follow-redirects": "^1.14.1",
     "@types/lodash.debounce": "^4.0.7",
     "@types/vscode-webview": "^1.57.4",
+    "@vscode-elements/elements": "^1.8.0",
     "@vscode/codicons": "^0.0.35",
-    "@vscode/webview-ui-toolkit": "^1.4.0",
     "axios": "^1.7.4",
     "extract-zip": "^2.0.1",
     "follow-redirects": "^1.15.6",

src/code-health-monitor/details/view.ts

@@ -75,7 +75,7 @@ class CodeHealthDetailsView implements WebviewViewProvider, Disposable {
           webView.cspSource
         }; font-src ${webView.cspSource}; style-src 'unsafe-inline' ${webView.cspSource};">
 
-        <link href="${codiconsUri}" nonce="${nonce()}" type="text/css" rel="stylesheet" />
+        <link href="${codiconsUri}" nonce="${nonce()}" type="text/css" rel="stylesheet" id="vscode-codicon-stylesheet" />
         <link href="${styleSheet}" nonce="${nonce()}" type="text/css" rel="stylesheet" />
     </head>
 
@@ -110,7 +110,9 @@ class CodeHealthDetailsView implements WebviewViewProvider, Disposable {
     return `
     ${this.fileAndFunctionInfo(functionInfo)}
     ${this.functionDescription(functionInfo)}
-    ${this.refactoringButton(functionInfo.refactoring)}
+    <div class="block">
+      ${this.refactoringButton(functionInfo.refactoring)}
+    </div>
     ${this.issueDetails(functionInfo)}
     `;
   }
@@ -144,33 +146,32 @@ class CodeHealthDetailsView implements WebviewViewProvider, Disposable {
   }
 
   private refactoringButton(refactoring?: CsRefactoringRequest) {
-    const buttonBlock = (iconClass = 'codicon-sparkle', appearance = 'primary', disabled = false) => {
-      return /*html*/ `
-        <div class="block">
-          <vscode-button id="refactoring-button" appearance="${appearance}" ${disabled ? 'disabled' : ''}>
-            <span slot="start" class="codicon ${iconClass}"></span>
-            Auto-refactor
-          </vscode-button>
-        </div>`;
-    };
-
     if (!refactoring) {
-      return buttonBlock('codicon-circle-slash', 'secondary', true);
+      return /* html */ `
+        <vscode-button id="refactoring-button" icon="circle-slash" secondary disabled>
+          Auto-refactor
+        </vscode-button>`;
     }
+
     const webView = this.view?.webview;
-    refactoring?.promise
-      .then(() => {
-        // TODO - consider the actual result (confidence > 0)
-        void webView?.postMessage({
-          command: 'refactoring-ok',
+    if (refactoring && webView) {
+      refactoring.promise
+        .then(() => {
+          if (refactoring.actionable()) {
+            void webView.postMessage({ command: 'refactoring-ok' });
+          } else {
+            void webView.postMessage({ command: 'refactoring-failed' });
+          }
+        })
+        .catch(() => {
+          void webView.postMessage({ command: 'refactoring-failed' });
         });
-      })
-      .catch(() => {
-        void webView?.postMessage({
-          command: 'refactoring-failed',
-        });
-      });
-    return buttonBlock('codicon-loading codicon-modifier-spin');
+    }
+
+    return /* html */ `
+      <vscode-button id="refactoring-button" icon="loading" icon-spin="true" primary>
+        Auto-refactor
+      </vscode-button>`;
   }
 
   private issueDetails(functionInfo: DeltaFunctionInfo) {

src/code-health-monitor/details/webview-script.ts

@@ -1,6 +1,5 @@
-import { provideVSCodeDesignSystem, vsCodeButton } from '@vscode/webview-ui-toolkit';
-
-provideVSCodeDesignSystem().register(vsCodeButton());
+import '@vscode-elements/elements/dist/vscode-button';
+import { VscodeButton } from '@vscode-elements/elements/dist/vscode-button';
 
 window.addEventListener('load', main);
 
@@ -15,7 +14,7 @@ function main() {
   refactoringButton?.addEventListener('click', () => sendMessage('auto-refactor'));
 
   if (refactoringButton) {
-    window.addEventListener('message', refactoringButtonHandler(refactoringButton));
+    window.addEventListener('message', refactoringButtonHandler(refactoringButton as VscodeButton));
   }
   for (const link of Array.from(document.getElementsByClassName('issue-icon-link'))) {
     link.addEventListener('click', (e) => issueClickHandler(e));
@@ -27,17 +26,16 @@ function issueClickHandler(event: Event) {
   sendMessage('interactive-docs', { issueIndex });
 }
 
-function refactoringButtonHandler(refactoringButton: HTMLElement) {
+function refactoringButtonHandler(refactoringButton: VscodeButton) {
   return (event: MessageEvent<any>) => {
     const { command } = event.data;
-    const iconSpan = refactoringButton.querySelector('span');
-    if (!iconSpan) return;
-    iconSpan.classList.remove('codicon-loading', 'codicon-modifier-spin');
+    refactoringButton.iconSpin = false;
     if (command === 'refactoring-ok') {
-      iconSpan.classList.add('codicon-sparkle');
+      refactoringButton.icon = 'sparkle';
     } else if (command === 'refactoring-failed') {
-      iconSpan.classList.add('codicon-circle-slash');
-      refactoringButton.setAttribute('disabled', 'true');
+      refactoringButton.secondary = true;
+      refactoringButton.disabled = true;
+      refactoringButton.icon = 'circle-slash';
     }
   };
 }

src/codescene-tab/webview/documentation-components.ts

@@ -4,9 +4,9 @@ import { readRawMarkdownDocs } from './utils';
 export function optionalRefactoringButton(hidden: boolean) {
   return /*html*/ `
     <div class="button-container">
-      <vscode-button id="refactoring-button" class="${hidden ? 'hidden' : ''}">
-        <span slot="start" class="codicon codicon-loading codicon-modifier-spin"></span>
-        Auto-refactor
+      <vscode-button id="refactoring-button" icon="loading" icon-spin="true"
+        ${hidden ? 'hidden' : ''}>
+          Auto-refactor
       </vscode-button>
     </div>
   `;

src/codescene-tab/webview/documentation-script.ts

@@ -1,6 +1,5 @@
-import { provideVSCodeDesignSystem, vsCodeButton } from '@vscode/webview-ui-toolkit';
-
-provideVSCodeDesignSystem().register(vsCodeButton());
+import '@vscode-elements/elements/dist/vscode-button';
+import { VscodeButton } from '@vscode-elements/elements/dist/vscode-button';
 
 window.addEventListener('load', main);
 
@@ -17,21 +16,20 @@ function main() {
   refactoringButton?.addEventListener('click', () => sendMessage('show-refactoring'));
 
   if (refactoringButton) {
-    window.addEventListener('message', refactoringButtonHandler(refactoringButton));
+    window.addEventListener('message', refactoringButtonHandler(refactoringButton as VscodeButton));
   }
 }
 
-function refactoringButtonHandler(refactoringButton: HTMLElement) {
+function refactoringButtonHandler(refactoringButton: VscodeButton) {
   return (event: MessageEvent<any>) => {
     const { command } = event.data;
-    const iconSpan = refactoringButton.querySelector('span');
-    if (!iconSpan) return;
-    iconSpan.classList.remove('codicon-loading', 'codicon-modifier-spin');
+    refactoringButton.iconSpin = false;
     if (command === 'refactoring-ok') {
-      iconSpan.classList.add('codicon-sparkle');
+      refactoringButton.icon = 'sparkle';
     } else if (command === 'refactoring-failed') {
-      iconSpan.classList.add('codicon-circle-slash');
-      refactoringButton.setAttribute('disabled', 'true');
+      refactoringButton.secondary = true;
+      refactoringButton.disabled = true;
+      refactoringButton.icon = 'circle-slash';
     }
   };
 }

src/codescene-tab/webview/refactoring-components.ts

@@ -1,5 +1,4 @@
 import { commands } from 'vscode';
-import { CsExtensionState } from '../../cs-extension-state';
 import { RefactorConfidence, RefactorResponse } from '../../refactoring/model';
 import { CodeWithLangId, decorateCode } from '../../refactoring/utils';
 import { collapsibleContent, markdownAsCollapsible } from './components';
@@ -93,12 +92,10 @@ function reasonsContent(response: RefactorResponse) {
 function acceptAndRejectButtons() {
   return /* html */ `
       <div class="button-container">
-        <vscode-button id="apply-button" appearance="primary" aria-label="Accept Auto-Refactor" title="Accept Auto-Refactor">
-          <span slot="start" class="codicon codicon-check"></span>
+        <vscode-button id="apply-button" icon="check" primary aria-label="Accept Auto-Refactor" title="Accept Auto-Refactor">
           Accept Auto-Refactor
         </vscode-button>
-        <vscode-button id="reject-button" appearance="secondary" aria-label="Reject" title="Reject">
-          <span slot="start" class="codicon codicon-circle-slash"></span>
+        <vscode-button id="reject-button" icon="circle-slash" secondary aria-label="Reject" title="Reject">
           Reject
         </vscode-button>
       </div>
@@ -114,8 +111,7 @@ async function codeContainerContent(code: CodeWithLangId, showDiff = true) {
 
   const diffButton = showDiff
     ? /*html*/ `
-          <vscode-button id="diff-button" appearance="secondary" aria-label="Show diff">
-            <span slot="start" class="codicon codicon-diff"></span>
+          <vscode-button id="diff-button" icon="diff" secondary aria-label="Show diff">
             Show diff
           </vscode-button>
         `
@@ -126,8 +122,7 @@ async function codeContainerContent(code: CodeWithLangId, showDiff = true) {
         <div class="code-container-buttons">
           ${diffButton}
         <!-- slot="start" ? -->
-          <vscode-button id="copy-to-clipboard-button" appearance="secondary" aria-label="Copy code" title="Copy code">
-            <span slot="start" class="codicon codicon-clippy"></span>
+          <vscode-button id="copy-to-clipboard-button" icon="clippy" secondary aria-label="Copy code" title="Copy code">
             Copy
           </vscode-button>
         </div>      

src/codescene-tab/webview/refactoring-script.ts

@@ -1,6 +1,5 @@
-import { provideVSCodeDesignSystem, vsCodeButton, vsCodeProgressRing } from '@vscode/webview-ui-toolkit';
-
-provideVSCodeDesignSystem().register(vsCodeButton(), vsCodeProgressRing());
+import '@vscode-elements/elements/dist/vscode-button';
+import '@vscode-elements/elements/dist/vscode-progress-ring';
 
 window.addEventListener('load', main);
 

src/codescene-tab/webview/utils.ts

@@ -29,7 +29,7 @@ export function renderHtmlTemplate(webViewPanel: WebviewPanel, params: HtmlTempl
     cssTag(webView, ['out', 'codescene-tab', 'webview', 'styles.css']),
     cssTag(webView, ['assets', 'markdown-languages.css']),
     cssTag(webView, ['assets', 'highlight.css']),
-    cssTag(webView, ['out', 'codicons', 'codicon.css'])
+    cssTag(webView, ['out', 'codicons', 'codicon.css'], 'vscode-codicon-stylesheet') // NOTE - vscode-elements needs an id for the stylesheet tag ¯\_(ツ)_/¯
   );
 
   cssPaths?.forEach((path) => cssTags.push(cssTag(webView, path)));
@@ -65,10 +65,10 @@ export function renderHtmlTemplate(webViewPanel: WebviewPanel, params: HtmlTempl
   webView.html = html;
 }
 
-function cssTag(webView: Webview, pathComponents: string[]) {
+function cssTag(webView: Webview, pathComponents: string[], id?: string) {
   const uri = getUri(webView, ...pathComponents);
   return /*html*/ `
-        <link href="${uri}" type="text/css" rel="stylesheet" />
+        <link href="${uri}" type="text/css" rel="stylesheet" ${id ? 'id="' + id + '"' : ''}/>
     `;
 }