Improve Icon Story

[joadoumie]

Description of the new feature / enhancement

Iconography --> too difficult for developers and unpolished. This whole story needs some investigation, polish, and iteration. Theming options for icons (dark theme & light theme). Need some easy way to just point to a relative path for pngs, etc.

Scenario when this would be used?

Whenever someone (i.e. extension or core) wants to pass over an icon.

Supporting information

Lots of feedback from early builders that passing icons around was difficult and the iconography doesn't look crisp and/or consistent.

• [ ] Investigate passing icons as a base64 strings
  • in this case, the extension would load the image, then pass it to us as base64
• [ ] investigate allowing separate light/dark icon strings
• [ ] Investigate using a shared folder in appxmanifest to allow "relative" file paths

[zadjii]

Need some easy way to just point to a relative path for pngs, etc.

I suspect that this would be Hard to do. Files within other packages are not trivial to get at. We might be able to use some sort of shared folder declared in the extension app's appxmanifest. That however would have the caveat of forcing the extension developer to put their icons in that specific path (maybe hard)

[joadoumie]

It was increasingly evident throughout Hackathon that folks were really not enjoying working with icons. I worked with Ethan for his PT prototype to allow for local images to be passed, and this is how we accomplished it:

internal ColorPickerAction()
{
    this.Name = "Color Picker";
    this.Icon = new(Path.Combine(AppDomain.CurrentDomain.BaseDirectory.ToString(), "Assets\\ColorPicker.png"));
}

Using this file path in the appropriate .csproj adding this works:

  <ItemGroup>
    <Content Include="Assets\SplashScreen.scale-200.png" />
    <Content Include="Assets\LockScreenLogo.scale-200.png" />
    <Content Include="Assets\Square150x150Logo.scale-200.png" />
    <Content Include="Assets\Square44x44Logo.scale-200.png" />
    <Content Include="Assets\Square44x44Logo.targetsize-24_altform-unplated.png" />
    <Content Include="Assets\StoreLogo.png" />
    <Content Include="Assets\Wide310x150Logo.scale-200.png" />
    <Content Include="Assets\ColorPicker.png" />
    <Content Include="Assets\CropAndLock.png" />
    <Content Include="Assets\FancyZones.png" />
    <Content Include="Assets\FindMyMouse.png" />
    <Content Include="Assets\MouseCrosshairs.png" />
    <Content Include="Assets\MouseHighlighter.png" />
    <Content Include="Assets\MouseJump.png" />
    <Content Include="Assets\ScreenRuler.png" />
    <Content Include="Assets\ShortcutGuide.png" />
    <Content Include="Assets\TextExtractor.png" />
    <Content Include="Assets\Workspaces.png" />
    <Content Include="Assets\PowerToys.ico" />
  </ItemGroup>

What if we just improved our templates for building extensions to include an Assets folder that already "abstracts" the additional overhead here?

I'm not sure how this would work for unpackaged apps or sparse apps w/ identity though.

[joadoumie]

Furthermore, we could even potentially abstract out the concept of light vs dark themes by providing the templates to already have light / dark theme folders for icons. Maybe we have an Assets\Icons\Dark & an Assets\Icons\Light for example.

Getting way ahead of myself, but it would be really neat if we could even somehow do an accessibility check on the provided light and dark theme assets to ensure they will be the right contrast in the UI.

[zadjii]

this.Icon = new(Path.Combine(AppDomain.CurrentDomain.BaseDirectory.ToString(), "Assets\\ColorPicker.png"));

holy shit that just works? well then yea we can just have some dumb helper like IconDataType.FromRelativePath(path: String) and have that just do it.

I'd rather not prescribe exactly where app developers need to store their icons, but just make it easy to give us something that works. Then on top of that, have docs that are geared towards "if you don't already have assets in your app, here's how you can add them". Bam. Developers that know what they're doing can just keep doing that, but for everyone (literally everyone) who doesn't know how to add images to a WASDK project, we can help guide them

[joadoumie]

love it.