UI Toolkit(旧:UI Elements)でデフォルト画像の再生ボタンを使う

Unityの比較的新しいUIフレームワークでUI Toolkit(旧:UI Elements)というものがあります。
html & cssのノリで要素を定義したファイルを.uxmlファイルとして、スタイルを定義したファイルを.ussとして分けることができ、従来のEditor拡張に比べて一つのファイルに対するコードの量を短くすることができるというメリットがあるようです。
「Debuggerもあって便利そうだし試しに使ってみよう」と思ったのですが、公式ドキュメントを見ていて困ったところがあったのでメモしておきます。

やろうと思ったこと

Timelineで使われてるような再生管理のためのシンプルなボタンを実装しようと思い、
せっかくなのでEditorに使われている画像を使えたらわざわざ画像用意しなくても良さそうなので
調べてみるとUnity Default Resourcesというところに配置されているようです。

Unity Default Resources

デフォルトでは画像は見えないようなのでファイル名を確認するためには少し手順を踏む必要があります。(チートシート/一覧とか無いのかな。。)
こちらの記事を参考にmacだとUnity.app/Contents/Resourcesフォルダにあるunity editor resourcesをコピーして.asset拡張子をつけてからUnityのAssets以下に配置するとUnity上で確認することができました。

確認方法としてはWindow>UI Toolkit>Debuggerでデバッガーを開いて上部ツールバーからPick Elementをクリックして実装中のEditorWindowをクリック、そして確認したい要素を選択しbackground-imageから確認することができます。
もしくは実装中のEditorWindow右上の3つの点ボタン>UI Toolkit Debuggerでデバッガーを開いて確認することもできます。

コード

少しスタイルを整える必要がありそうですがひとまずこんな感じになりました。

Test.uxml

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
>
  <engine:Box class="toolbarHeader">
    <engine:Button name="firstKeyButton" class="toolbarItem firstKeyButton" />
    <engine:Button name="prevKeyButton" class="toolbarItem prevKeyButton" />
    <engine:Button name="playButton" class="toolbarItem playButton" />
    <engine:Button name="nextKeyButton" class="toolbarItem nextKeyButton" />
    <engine:Button name="lastKeyButton" class="toolbarItem lastKeyButton" />
  </engine:Box>
</engine:UXML>

Test.uss

  .playButton {
    background-image: resource("d_Animation.Play")
  }
  .prevKeyButton {
    background-image: resource("d_Animation.PrevKey")
  }
  .nextKeyButton {
    background-image: resource("d_Animation.NextKey")
  }
  .firstKeyButton {
    background-image: resource("d_Animation.FirstKey")
  }
  .lastKeyButton {
    background-image: resource("d_Animation.LastKey")
  }

TestWindow.cs

using UnityEngine;
using UnityEditor;
using UnityEngine.UIElements;

public class TestWindow : EditorWindow
{
  [MenuItem("Window/TestWindow")]
  public static void ShowWindow() => GetWindow<TestWindow>("TestWindow");

  void OnEnable()
  {
    var root = rootVisualElement;
    root.styleSheets.Add(Resources.Load<StyleSheet>("Test"));
    var docTree = Resources.Load<VisualTreeAsset>("Test");
    docTree.CloneTree(root);

    root.Q<Button>("firstKeyButton").clickable.clicked += () => Debug.Log("firstKeyButton");
    root.Q<Button>("prevKeyButton").clickable.clicked += () => Debug.Log("prevKeyButton");
    root.Q<Button>("playButton").clickable.clicked += () => Debug.Log("playButton");
    root.Q<Button>("nextKeyButton").clickable.clicked += () => Debug.Log("nextKeyButton");
    root.Q<Button>("lastKeyButton").clickable.clicked += () => Debug.Log("lastKeyButton");
  }
}

困ったこと

https://docs.unity3d.com/ja/2019.4/Manual/UIE-USS-PropertyTypes.html
公式リファレンスでは以下のように記載されています。

ファイルが Editor Default Resources下にある場合は、ファイル拡張子を入れる必要があります。例えば background-image: resource("Images/default-image.png")。

ですが拡張子を入れるとエラーになり、逆に外すと反映されるようになりました。