Show additional JWT info

[micahmo]

Pull request type

Please check the type of change your PR introduces:

• [ ] Bugfix
• [x] New feature or enhancement
• [x] UI change (please include screenshot!)
• [ ] Code style update (formatting, renaming)
• [ ] Refactoring (no functional changes, no api changes)
• [ ] Build related changes
• [ ] Documentation content changes
• [ ] Internationalization and localization
• [ ] Other (please describe):

What is the current behavior?

Issue Numbers: #607 and #670

What is the new behavior?

This PR adds the ability to show additional information about a decoded JWT. Key features are...

• Each top-level property of the JWT is shown in a table with the key in one column and the value in another.
• The values of date/time fields are shown in human-readable formats (instead of timestamp/long).
• Clicking the row for a given field will display an explanation about that field (if it is a known/documented JWT claim).
  • There are descriptions for claims from RFC 7519 Section 4.1 and the OpenID Connect Core Section 5.1, 2, 3.3.2.11, and 7.4 using the IANA Registry as a source of truth.

Other information

There are several things to mention about this implementation.

• In order to inject the information, I went with a slightly different approach than was suggested. Rather than having the parent control inject the info button, it is part of the standard CodeEditor. However the info control itself can be set via a DependencyProperty, and the CodeEditor will show whatever's there.
• I struggled with how to disply the claim descriptions. They're usually very long, and I had trouble fitting them in a third column in the table. My options were (a) allow the grid to expand as wide as it wants, putting the info on one line and marking it hard to read, or (b) keep the grid width fixed and make the description wrap, which ended causing each row to consume too much vertical space. I thought about some other alternatives (truncating the description until clicked), but the bigger issue here is an apparent bug in the Toolkit DataGrid which causes rows taller than one line of text to have trouble rendering. I can upload a video of this if anyone's curious. Luckily, I ran across Row Details and I thought it would be the perfect compromise of having a nice clean grid initially with easy access to the descriptions. One quirk here is that I would expect clicking the row again to toggle the details off, but it doesn't. Maybe some special code can be added in the future to do that.
• Along the same lines, I noticed that the grid doesn't respond perfectly to live theme changes. You have to scroll up and down to get all the rows to convert. I'm guessing this is another bug and maybe related to virtualization. However, I think it's ok since it's a rare case (changing theme while this control is open), and it eventually fixes itself.
• Finally, there is some funny handling related to sizing. In addition to the technique used in the CustomTextBox (a Border whose size controls the TextBox's size), I also had to add another trick. When expanding or collapsing the addiitonal info view, I quickly toggle on the CodeEditor. Without this, the Border has the wrong size. This does occasionally create a very small visual artifact, but it's the only way I could get the sizing to be solid.

https://github.com/veler/DevToys/assets/7417301/fa855d51-5627-45c2-9b1b-44b70c12b587

Quality check

Before creating this PR:

• [x] Did you follow the code style guideline as described in CONTRIBUTING.md
• [x] Did you build the app and test your changes?
• [ ] Did you check for accessibility? On Windows, you can use Accessibility Insights for this.
• [ ] Did you verify that the change work in Release build configuration
• [x] Did you verify that all unit tests pass
• [ ] If necessary and if possible, did you verify your changes on:
  • [x] Windows
  • [ ] macOS (DevToys 2.0)
  • [ ] Linux (DevToys 2.0)