Skip to content

Migrate Change Method Signature webview off deprecated webview-ui-toolkit#4449

Open
wenytang-ms wants to merge 1 commit into
redhat-developer:mainfrom
wenytang-ms:refactor/change-signature-native-webview
Open

Migrate Change Method Signature webview off deprecated webview-ui-toolkit#4449
wenytang-ms wants to merge 1 commit into
redhat-developer:mainfrom
wenytang-ms:refactor/change-signature-native-webview

Conversation

@wenytang-ms

@wenytang-ms wenytang-ms commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

Fixes #4417

This PR is the complete fix: it both resolves the editable-cell bug and migrates the dialog off the deprecated toolkit.

Background

On Change Method Signature, editing a parameter Type (or Name / Default, or an exception Type) showed nothing while typing, and on OK the typed text was appended to the original value instead of replacing it. Root cause: the cells set contentEditable directly on the deprecated @vscode/webview-ui-toolkit vscode-data-grid-cell, whose shadow root is only <slot> — typed text became a bare text node on the host, outside the slot, so it never rendered and was read back via outerText (concatenated).

What this PR does

  1. Fixes the bug — editable cells render a real <input> while editing and read its .value on commit (visible typing + correct replace semantics).
  2. Migrates the whole dialog off the archived toolkit to native HTML elements styled with --vscode-* theme variables, and removes the dependency.

Scope

This change only touches the Change Method Signature refactoring dialog. It was the only webview in the extension that depended on @vscode/webview-ui-toolkit, so it is the only one affected by this migration. Other webviews (e.g. the dashboard) never used the toolkit and are left completely untouched.

Component mapping

Toolkit Native
VSCodeButton <button> + btn/btn-primary/btn-secondary/btn-icon
VSCodeTextField <input type=text>
VSCodeDropdown / VSCodeOption <select> / <option>
VSCodeCheckbox <label> + <input type=checkbox>
VSCodeTextArea readonly <textarea>
VSCodePanels / Tab / View native tab bar + activeTab state + conditional render
VSCodeDataGrid / Row / Cell <table>/<thead>/<tbody>/<tr>/<th>/<td>

Notes

  • Preserves the existing id scheme (parameterRow-N, parameterButton-N, parameterType-N …) so hover-to-reveal-buttons and edit/confirm/cancel logic is unchanged.
  • delegate checkbox handling moved from onClick to onChange.
  • Removed the obsolete setTextAreaCursorStyle shadow-DOM hack.
  • Tightened the webview CSP: dropped style-src 'unsafe-inline' (only the toolkit needed it; CSS is now loaded via <link> and the codicon font is a data: URL covered by font-src).
  • Removed @vscode/webview-ui-toolkit from package.json + package-lock.json.

Validation

  • tsc --noEmit — passes
  • eslint on changed files — clean
  • webpack changeSignature bundle — builds successfully; built bundle contains no vscode-data-grid references
  • Manual VS Code UI walkthrough (edit/add/remove/reorder parameters & exceptions, tabs, dropdown, checkbox, preview, reset, light/dark/high-contrast themes) recommended before merge.

@wenytang-ms

Copy link
Copy Markdown
Contributor Author

1.55 webview

image

PR webview

image

@wenytang-ms

Copy link
Copy Markdown
Contributor Author

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

@wenytang-ms wenytang-ms marked this pull request as ready for review June 30, 2026 08:33
@wenytang-ms

wenytang-ms commented Jun 30, 2026

Copy link
Copy Markdown
Contributor Author

@datho7561 @jjohnstn please help review this PR, thanks!
@rgrunber can you help review this pr? thanks!

@wenytang-ms wenytang-ms force-pushed the refactor/change-signature-native-webview branch from bb08893 to e93e599 Compare July 1, 2026 07:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Change Method Signature: parameter Type field doesn't visibly render typed text (contenteditable text node escapes shadow DOM slot)

1 participant