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

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !

[wenytang-ms]

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-toolkitvscode-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]

1.55 webview

PR webview

[wenytang-ms]

1.55 issue

beforefix.mp4

new webview

afterfix.mp4

[wenytang-ms]

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

[datho7561]

I'll try to get to reviewing it today

[datho7561]

Looks good. Thanks, @wenytang-ms !