Ui modernization #772

nobody5050 · 2025-06-11T20:31:29Z

closes #23

sciencewhiz · 2025-06-23T01:59:58Z

This looks to be doing multiple things, which makes it really hard to review. It looks like there's refactoring that's enabled by #767, which should probably be a separate PR, so that the actual UI changes are more easily reviewable. Also, it would really help for the PR to describe how the UI is improved. A picture is worth a thousand words.

Gold856 · 2025-07-08T06:12:27Z

We moved several files back to their original locations to help minimize the diff. The API package folding and new utility files were not undone, solely because this originated as an deep refactoring of many dark corners of the codebase, and the changes are a little too intertwined to safely undo. This branch has already been shredded apart and reconstituted multiple times to get it in a state even remotely close to review. The codebase is fundmentally under too much tech debt to be able to do smaller incremental refactors, and we have several deeper refactors queued up that are blocked on the changes in this PR. The diff on just the TypeScript files is now +2975 lines, -1769 lines, split between modernizing the UI (the majority) and refactoring file handling for project generation and file templates. We apologize for the large diff, but hope that the PR is still reviewable enough that reviewed and merged.

If it helps with reviewing, everything in shared and the commands.ts files for both C++ and Java, except for the vendor files in shared are the files that were changed because of the file handling refactor. Everything else is either minor changes like imports or typo fixes, or it's UI modernization.

nobody5050 · 2025-07-08T06:13:10Z

Also, it would really help for the PR to describe how the UI is improved. A picture is worth a thousand words.

Absolutely!

Starting small, this PR adds an "install from url" section to the vendor dependencies UI that was added in 2025. In adding this, the command palette vendordep manager is officially removed as it is no longer needed for anything.

Also, it revamps the RioLog UI to be cleaner, use VSCode UI elements and styling (including the user's VSCode theme) and adding ANSI escape sequence support so that the color of log entries can be set as they would in a normal terminal. It also adds a default "welcome" message when initialized.

The WPILib Help page has been updated and now includes some basic getting started tasks and a button that opens the command palette.

The project creation page has been updated to be paginated, make use of the user's VSCode theme and also make use of VSCode's inbuilt UI elements.

And lastly the project importer has also been updated to follow a similar design language

If there's anything else you'd like to know, I (or @Gold856) would be happy to answer!

auscompgeek

I'll try to find some more time this evening, but here's a few things I noticed at a quick glance.

vscode-wpilib/resources/webviews/gradle2025import.html

vscode-wpilib/package.json

vscode-wpilib/src/docsapi.ts

vscode-wpilib/src/utilities.ts

vscode-wpilib/src/shared/vendorexamples.ts

vscode-wpilib/src/shared/projectGeneratorUtils.ts

vscode-wpilib/src/shared/importupdater.ts

auscompgeek

I think I've managed to look over all this now. Got a few more comments.

vscode-wpilib/src/shared/fileUtils.ts

vscode-wpilib/src/shared/pathUtils.ts

vscode-wpilib/resources/media/main.css

vscode-wpilib/resources/webviews/gradle2025import.html

vscode-wpilib/package.json

vscode-wpilib/resources/webviews/gradle2025import.html

sciencewhiz · 2025-08-31T04:06:28Z

vscode-wpilib/resources/webviews/gradle2025import.html

+      <div class="wizard-step" id="step-3">
+        <div class="step-header">
+          <h2>Step 3: Review & Import</h2>
+          <p>Review your settings and select additional options before importing.</p>


What other options can be selected? I don't see any

That refers to the source, destination, and team number. I'm open to alternate wording

Shouldn't it just be review your settings before importing?

vscode-wpilib/resources/webviews/gradle2025import.html

vscode-wpilib/resources/media/main.css

auscompgeek · 2025-09-06T12:13:21Z

vscode-wpilib/resources/webviews/gradle2025import.html

        <div class="project-field-container">
-          <input id="teamNumber" type="text" inputmode="numeric" class="vscode-textfield" required />
+          <label for="teamNumber">Team Number</label>
+          <input id="teamNumber" class="vscode-textfield" type="number" inputmode="numeric" required />


I'm confused why we're changing this back to <input type="number">. Per #772 (comment) it seemed like we didn't want the spinners in the first place, but this commit now adds the spinners?

Your suggested change from your last review looked to me like a re-adding of spinners. Originally the idea was to have input type number so we could validate that it was indeed a valid team number, but hide the spinners with css

I figured after I left #772 (comment) and still saw it there after I took another look, you just hadn't bothered to remove the unused CSS without a button to press to delete it

sciencewhiz · 2025-09-06T21:26:25Z

I tried to add a vendordep from URL. I used this URL: https://raw.githubusercontent.com/team1306/badger-log/master/vendordep.json but clicking on install didn't seem to do anything and there wasn't any error message and I don't see anything in the log

nobody5050 · 2025-09-06T22:16:02Z

I tried to add a vendordep from URL. I used this URL: https://raw.githubusercontent.com/team1306/badger-log/master/vendordep.json but clicking on install didn't seem to do anything and there wasn't any error message and I don't see anything in the log

I've just checked and it works on https://github.com/nobody5050/vscode-wpilib/tree/nobody5050/improvements but does not seem to work on this branch. Looks like somehow while trimming down the changes to make the pr easier to review we broke it. I'll take a look sometime tonight and push up a fix for that.

@sciencewhiz

Includes the following: commit 69fb3d0 Author: Gold856 <[email protected]> Date: Tue Oct 21 16:52:19 2025 -0400 Prepare for merge (#15) * Prepare for new 2027 updates * Remove file gen refactor * Format commit 5542fec Author: Nobody5050 <[email protected]> Date: Thu Sep 4 23:21:15 2025 -0500 return native number spinners per pr review commit b412d37 Author: Nobody5050 <[email protected]> Date: Tue Sep 2 18:11:23 2025 -0500 Update package dependencies and comply with latest review - Bump VSCode engine requirement to ^1.90.0 - Update various package dependencies including: - @types/node from ^20.19.0 to ^20.19.11 - @types/node-fetch from ^2.6.12 to ^2.6.13 - @typescript-eslint/eslint-plugin and parser from ^8.34.0 to ^8.42.0 - eslint from ^9.28.0 to ^9.34.0 - ts-loader from ^9.5.2 to ^9.5.4 - typescript from ^5.8.3 to ^5.9.2 - webpack from ^5.99.9 to ^5.101.3 - Suggested changes from @sciencewhiz's review commit bb371ba Author: Gold856 <[email protected]> Date: Sun Aug 24 09:58:23 2025 -0400 Final fixups (#14) * Undo changes to VendorLibraries to fix vendordep manager not updating * Format commit 637f9d2 Author: Nobody5050 <[email protected]> Date: Mon Jul 21 22:45:55 2025 -0500 change radio for systemcore to systemcore commit 6c2aeed Author: Nobody5050 <[email protected]> Date: Mon Jul 21 11:57:48 2025 -0500 radio buttons commit 008f472 Author: Nobody5050 <[email protected]> Date: Sun Jul 20 12:29:28 2025 -0500 Simple changes from review commit 3ff6952 Author: Gold856 <[email protected]> Date: Sun Jul 20 01:46:06 2025 -0400 Make elements look more like VS Code native elements (#13) commit d443d15 Author: Gold856 <[email protected]> Date: Sun Jul 20 01:07:54 2025 -0400 Make elements look more like VS Code native elements (#12) commit 9505387 Author: Gold856 <[email protected]> Date: Tue Jul 8 01:31:11 2025 -0400 Rewind time (#11) * Move dependencyView back to its original location * Move files back * Move locale file back commit a9f1e60 Author: Gold856 <[email protected]> Date: Fri Jun 20 21:46:57 2025 -0400 Fix C++ project generator and add pnpm compat (#10) commit 5cd3394 Author: Gold856 <[email protected]> Date: Mon Jun 16 04:06:25 2025 +0000 Clean up (#9) * Clean up utilities * Inline file processor * Format commit 7e12bb3 Author: Nobody5050 <[email protected]> Date: Fri Jun 13 16:44:11 2025 -0500 minor css edit for riolog, fix project importing, and switch documentation link on help page to 2027 commit f7c98f6 Author: Gold856 <[email protected]> Date: Fri Jun 13 21:42:08 2025 +0000 Final polish (#8) commit d523f7f Author: Gold856 <[email protected]> Date: Fri Jun 13 17:08:45 2025 +0000 More refactors (#7) * Move catch block * Remove Command Palette vendordep manager * Make webpack configs work properly * Fix up help page layout * Fix icon * Remove unnecessary .then() * Format commit 229b35c Author: Gold856 <[email protected]> Date: Thu Jun 12 17:57:16 2025 +0000 Clean up more (#6) * Remove simple pathUtils functions * Remove unused deps * Fix extension build * Delete unused stuff, do formatting touch ups * Fold wpilibapi into extension and remove shims * Move i18n to l10n and fix API imports * Remove unneeded project generator code * Fix 2025 stuff * Fix CSS commit 30d1cca Author: Nobody5050 <[email protected]> Date: Wed Jun 11 15:30:26 2025 -0500 manual copy from other branch

nobody5050 force-pushed the ui-improvements-2-electric-boogaloo branch 8 times, most recently from d6dd638 to 30d1cca Compare June 11, 2025 21:48

Gold856 mentioned this pull request Jun 12, 2025

Improve RioLog UI #771

Closed

github-actions bot added the 2027 label Jul 8, 2025

auscompgeek reviewed Jul 20, 2025

View reviewed changes

sciencewhiz reviewed Jul 21, 2025

View reviewed changes

vscode-wpilib/resources/webviews/gradle2025import.html Outdated Show resolved Hide resolved

nobody5050 requested a review from sciencewhiz July 24, 2025 05:03

PeterJohnson requested a review from auscompgeek August 25, 2025 06:00

zachwaffle4 approved these changes Aug 30, 2025

View reviewed changes

auscompgeek reviewed Aug 30, 2025

View reviewed changes

vscode-wpilib/package.json Outdated Show resolved Hide resolved

sciencewhiz reviewed Aug 31, 2025

View reviewed changes

vscode-wpilib/resources/webviews/gradle2025import.html Outdated Show resolved Hide resolved

nobody5050 requested a review from sciencewhiz September 2, 2025 23:12

auscompgeek reviewed Sep 4, 2025

View reviewed changes

vscode-wpilib/resources/media/main.css Outdated Show resolved Hide resolved

nobody5050 requested a review from auscompgeek September 5, 2025 23:21

auscompgeek reviewed Sep 6, 2025

View reviewed changes

Gold856 mentioned this pull request Sep 8, 2025

Fold vscode-wpilibapi into vscode-wpilib #785

Merged

nobody5050 mentioned this pull request Sep 8, 2025

Improve RIOLog UI #786

Merged

Gold856 mentioned this pull request Sep 8, 2025

Refactor file generation logic #787

Merged

nobody5050 force-pushed the ui-improvements-2-electric-boogaloo branch from 69fb3d0 to 009ad8b Compare October 21, 2025 21:31

Gold856 mentioned this pull request Oct 21, 2025

Merge main into 2027 #807

Closed

Ui modernization #772

Are you sure you want to change the base?

Ui modernization #772

Uh oh!

Conversation

nobody5050 commented Jun 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sciencewhiz commented Jun 23, 2025

Uh oh!

Gold856 commented Jul 8, 2025

Uh oh!

nobody5050 commented Jul 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

auscompgeek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

auscompgeek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sciencewhiz Aug 31, 2025

Choose a reason for hiding this comment

Uh oh!

nobody5050 Sep 2, 2025

Choose a reason for hiding this comment

Uh oh!

sciencewhiz Sep 6, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

auscompgeek Sep 6, 2025

Choose a reason for hiding this comment

Uh oh!

nobody5050 Sep 6, 2025

Choose a reason for hiding this comment

Uh oh!

auscompgeek Sep 6, 2025

Choose a reason for hiding this comment

Uh oh!

sciencewhiz commented Sep 6, 2025

Uh oh!

nobody5050 commented Sep 6, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

nobody5050 commented Jun 11, 2025 •

edited

Loading

nobody5050 commented Jul 8, 2025 •

edited

Loading