UI Rework

[taori]

Is your feature request related to a problem? Please describe. I looked at the VSCode rest clients and thought they structured the data more nicely. I was wondering if you are open to a rework?

Describe the solution you'd like I'd copy this UI pretty much, because it seems amazing. (https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

Describe alternatives you've considered I think any work invested into UI could be a great benefit.

Additional context I would be willing to do the work, though it may take some time depending on how busy i am with my work

[madskristensen]

What part of the UI were you thinking of updating? I like the tabbed result pane from the extension you linked to, but I want to keep the left side a text editor as it is now.

[taori]

How about splitting the text editor into either a tab collection with "response/headers/cookies" with a little toolbar that contains minimal info (similar to the extension (response code, duration, size )

[SQL-MisterMagoo]

Personal view as a user - I also like the simplicity of the text editor and would hate to lose that, perhaps a more structured UI could be optional or could be toggled to show up in a split view like (e.g.) the XAML code/designer?

[taori]

Using tabs would add little UI complexity while maximizing space however. And if the result is JSON it is a tedious process to select and copy the content if it is needed (for me it is) combined with the select copy issue that appears to be a VS bug that would only make sense? Apart from that offering multiple ways of rendering a response based on a config switch would also be an option

Holen Sie sich Outlook für Androidhttps://aka.ms/AAb9ysg

---

From: SQL-MisterMagoo @.> Sent: Wednesday, May 11, 2022 2:39:02 AM To: madskristensen/RestClientVS @.> Cc: Andreas Müller @.>; Author @.> Subject: Re: [madskristensen/RestClientVS] UI Rework (Issue #29)

Personal view as a user - I also like the simplicity of the text editor and would hate to lose that, perhaps a more structured UI could be optional or could be toggled to show up in a split view like (e.g.) the XAML code/designer?

— Reply to this email directly, view it on GitHubhttps://github.com/madskristensen/RestClientVS/issues/29#issuecomment-1123050755, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ABKJZYG2IKFPEODZE472ALTVJL6SNANCNFSM5VS24QIQ. You are receiving this because you authored the thread.Message ID: @.***>

[taori]

A screenshot so less imagination is required:

Basically a small toolbar for commands (did not figure out which control i have to use for icons to render the way they do in solution explorer), tabs which are not perfectly styled yet (UseVSTheme seems to render focused tab wrong, but perhaps they can also be styled in a prettier fashion like the document well tabs.

So imagine response just contains the response, response headers are in the headers tab as a list, where you could add a search bar to filter for headers of interest. Set-Cookie headers are removed from headers and moved into cookies tab.

Thoughts?

For reference: https://github.com/taori/RestClientVS/tree/feature-rework-ui

[madskristensen]

I like it. How about adding a tab for the Raw response too?

[taori]

Sounds good to me. Ideally as first tab, so the original behavior is preserved. In that case the copy command could be made contextual, so if raw response tab is open all is copied, for headers just the headers, etc. Just an idea though. Still gotta figure out how to properly apply theme colors from VS for the tabs and what type of control is used for the icon buttons in the solution explorer for example. If you recall any pointers i would appreciate it.

[taori]

After debugging VS with VS and digging some with the Xaml Live Tree i found out two things:

The TabControl in VS for the Solution Explorer is in fact this:

The icons for the solution Explorer are VsButton controls

@madskristensen Could you advise me on the reference the assembly which contain those controls to get the most native looking UI?

[madskristensen]

Let's ask @reduckted since I'm not super familiar with the WPF parts?

[taori]

Sure thing. If you have a way to summon him i am happy to receive advice by anyone who knows which assembly i should reference

[madskristensen]

You should be able to import the namespace in the XAML files directly without any other references than the VSSDK/Community Toolkit:

xmlns:platform="clr-namespace:Microsoft.VisualStudio.PlatformUI;assembly=Microsoft.VisualStudio.Shell.15.0"

[taori]

Neither of the controls available through that reference sadly

[madskristensen]

It's probably internal only then. See this though: https://github.com/VsixCommunity/Community.VisualStudio.Toolkit/issues/296

[taori]

Well that one looks prettier but forces vertical tabs and TabStripPlacement breaks the control. I'll see if i can extract the style used elsewhere somehow

[taori]

@madskristensen Extension idea: dropdown list with a resource type, e.g. EnvironmentColors with a matrix generated what that color will be depending on the theme. @reduckted appears to be right about the brushes being wrong for TabItem. In dark mode it just looks awful and the brushes do seem to be wrong at the moment

Update: ThemeSwatches... Dear god mads. Is there any extension you did not write yet?

[reduckted]

I used ILSpy to look through Visual Studio's assemblies and found:

• VsButton in [InstallDir]\Common7\IDE\Microsoft.VisualStudio.Shell.UI.Internal.dll
• SingleRowTabPanel in [InstallDir]\Common7\IDE\Microsoft.VisualStudio.Shell.ViewManager.dll

Neither are public assemblies, so you can pretty much rule out using either of those types 😢

[taori]

Oh well. Thansk for trying. Guess colors it is

[reduckted]

For the toolbar, take a look at my ProjectFilter extension. It has a regular Toolbar control that's styled to look like a Visual Studio toolbar.

The styles: https://github.com/reduckted/ProjectFilter/blob/5efc9732a72d8402896c38f2690da3ec6311102a/source/ProjectFilter/UI/Resources.xaml#L297-L441

The toolbar: https://github.com/reduckted/ProjectFilter/blob/5efc9732a72d8402896c38f2690da3ec6311102a/source/ProjectFilter/UI/FilterDialog.xaml#L77-L141

What it looks like:

[taori]

Very nice thanks. I'll update some styles and see if i can style it myself then.

[taori]

Is there something i should be doing in order for Moniker images to adapt to the theme?

For some reason it's wrong in the margin. I began modifying a command bar to see the actual "copy" moniker, but it has a different color there.

[madskristensen]

Use the CrispImage WPF control. That should do the theming correctly.

[taori]

Use the CrispImage WPF control. That should do the theming correctly.

I am. That is why i am wondering why it does not work. According to LiveTree VS does this everywhere else too. https://github.com/taori/RestClientVS/blob/4d0c4f5ae8a08ce102aab7fe8e92e951cd9674a9/src/RestClientVS/Margin/ResponseControl.xaml#L39

[madskristensen]

Hang on, I think you need to set something else as well. See this: https://docs.microsoft.com/en-us/visualstudio/extensibility/image-service-and-catalog?view=vs-2022#how-do-i-write-new-wpf-ui

[taori]

I would like to use https://www.nuget.org/packages/CommunityToolkit.Mvvm/8.0.0-preview3 for the MVVM layer. Is there any way i can consume a netstandard library in a vsix project? All VS references show up as not resolvable after adding the package. Usually i had no issues consuming netstand projects from net462+ projects so i guess this is a vsix related issue in some way?

Nevermind... Clean+Rebuild shows errors in error window but it starts debugging anyway. Guess it's some build caching issue

[taori]

Nope. Still does not work. Getting the following error at runtime.

I tried adding these properties to the RestClientVS csproj

true true true true true Full true true true

FileNotFoundException: Die Datei oder Assembly "System.ComponentModel.Annotations, Version=4.2.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" oder eine Abhängigkeit davon wurde nicht gefunden. Das System kann die angegebene Datei nicht finden.

[madskristensen]

You can consume .NET Standard 2.0 from a VSIX targeting VS 2019 or 2022

[taori]

That is what i learned from my research of this too, but for some reason once i add the package and generate a viewmodel with it it'll crash at runtime with that error. Do you know if i can just do the binding redirects myself? At least for System.ComponentModel.Annotations i would imagine there is already some version loaded into the appdomain for the type to be present

[taori]

I tried isolating the issue to see if it makes any difference. I cannot get the vsix to load the assemblies properly.

The runtime complains about not finding 4.2.0.0, the debug folder contains 4.6.26515.6, CommunityToolkit.MVVM has >= 5.0.0.0 as netstandard dependency.

Providing the pkgdef with this + NewVersion just gives build errors. Not sure what to do here anymore because it feels i am fighting vsix here and i don't understand why it won't accept the attribute.

[assembly: ProvideBindingRedirection( AssemblyName = "System.ComponentModel.Annotations", CodeBase = @"$PackageFolder$\System.ComponentModel.Annotations.dll", OldVersionUpperBound = "4.9.9.9", OldVersionLowerBound = "0.0.0.0", PublicKeyToken = "b03f5f7f11d50a3a")]