Migrate Change Method Signature webview off deprecated webview-ui-toolkit#4449
Open
wenytang-ms wants to merge 4 commits into
Open
Migrate Change Method Signature webview off deprecated webview-ui-toolkit#4449wenytang-ms wants to merge 4 commits into
wenytang-ms wants to merge 4 commits into
Conversation
…edhat-developer#4417) The parameter Type/Name/Default and exception Type cells relied on contentEditable directly on the deprecated webview-ui-toolkit �scode-data-grid-cell. The cell's shadow root only contains a <slot>, so text typed onto the host text node is never slotted/rendered: the field looks blank while editing, and on commit the typed text was read via outerText and appended to the original value instead of replacing it. Render a real <input> as slotted content of the cell when editing, and read the value via .value. This makes typed text visible and gives correct replace-on-commit semantics. Focus/select now run in the setState callback since the input mounts after re-render, and the obsolete contentEditable DOM-reset on cancel is removed.
…lkit Replace all @vscode/webview-ui-toolkit React components in the Change Method Signature dialog with native HTML elements styled via --vscode-* CSS variables, and drop the archived dependency entirely. - Buttons -> <button> with btn/btn-primary/btn-secondary/btn-icon classes - VSCodeTextField -> <input>, VSCodeDropdown/Option -> <select>/<option> - VSCodeCheckbox -> <label> + <input type=checkbox> (delegate handling moved to onChange) - VSCodeTextArea -> readonly <textarea> - VSCodePanels/Tab/View -> native tab bar with new activeTab state + conditional rendering - VSCodeDataGrid/Row/Cell -> <table>/<thead>/<tbody>/<tr>/<th>/<td>, preserving the id scheme used by the hover/edit logic - Removed the obsolete setTextAreaCursorStyle shadow-DOM hack Builds on the redhat-developer#4417 editable-cell fix (native <input> read via .value), which is preserved. The dialog is the only webview that used the toolkit.
Contributor
Author
1.55 webview
PR webview
|
…safe-inline' The 'unsafe-inline' style-src was only required by the webview-ui-toolkit web components, which set inline style attributes on their hosts at runtime. After migrating to native elements, CSS is bundled to a file and loaded via <link> (covered by cspSource) and the codicon font is a data: URL (covered by font-src data:), so no inline styles remain.
Contributor
Author
|
1.55 issue beforefix.mp4new webview afterfix.mp4 |
Contributor
Author
|
@datho7561 @jjohnstn please help review this PR, thanks! |
… webview Restore accessibility that the toolkit VSCodePanels provided: tab buttons now expose aria-selected/aria-controls and each view is a role=tabpanel labelled by its tab. Also set type=button on all native buttons so they never default to submit. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
contentEditabledirectly 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 viaouterText(concatenated).What this PR does
<input>while editing and read its.valueon commit (visible typing + correct replace semantics).--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
VSCodeButton<button>+btn/btn-primary/btn-secondary/btn-iconVSCodeTextField<input type=text>VSCodeDropdown/VSCodeOption<select>/<option>VSCodeCheckbox<label>+<input type=checkbox>VSCodeTextArea<textarea>VSCodePanels/Tab/ViewactiveTabstate + conditional renderVSCodeDataGrid/Row/Cell<table>/<thead>/<tbody>/<tr>/<th>/<td>Notes
parameterRow-N,parameterButton-N,parameterType-N…) so hover-to-reveal-buttons and edit/confirm/cancel logic is unchanged.delegatecheckbox handling moved fromonClicktoonChange.setTextAreaCursorStyleshadow-DOM hack.style-src 'unsafe-inline'(only the toolkit needed it; CSS is now loaded via<link>and the codicon font is adata:URL covered byfont-src).@vscode/webview-ui-toolkitfrompackage.json+package-lock.json.Validation
tsc --noEmit— passeseslinton changed files — cleanchangeSignaturebundle — builds successfully; built bundle contains novscode-data-gridreferences