Introduce "Info/Advanced/Stylesheets" tab to Control Panel

Makes it a bit easier to understand what the browser will see for each stylesheet tiddler

core/language/en-GB/ControlPanel.multids

@@ -155,6 +155,10 @@ Settings/MissingLinks/Hint: Choose whether to link to tiddlers that do not exist
 Settings/MissingLinks/Description: Enable links to missing tiddlers
 StoryView/Caption: Story View
 StoryView/Prompt: Current view:
+Stylesheets/Caption: Stylesheets
+Stylesheets/Expand/Caption: Expand All
+Stylesheets/Hint: This is the rendered CSS of the current stylesheet tiddlers tagged with <<tag "$:/tags/Stylesheet">>
+Stylesheets/Restore/Caption: Restore
 Theme/Caption: Theme
 Theme/Prompt: Current theme:
 TiddlerFields/Caption: Tiddler Fields

core/ui/ControlPanel/Stylesheets.tid

@@ -0,0 +1,9 @@
+title: $:/core/ui/ControlPanel/Stylesheets
+tags: $:/tags/ControlPanel/Advanced
+caption: {{$:/language/ControlPanel/Stylesheets/Caption}}
+
+\define lingo-base() $:/language/ControlPanel/
+
+<<lingo Stylesheets/Hint>>
+
+{{$:/snippets/peek-stylesheets}}

core/wiki/peek-stylesheets.tid

@@ -0,0 +1,77 @@
+title: $:/snippets/peek-stylesheets
+
+\define expandable-stylesheets-list()
+<ol>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
+<$vars state=<<qualify "$:/config/peek-stylesheets/open/">>>
+<$set name="state" value={{{ [<state>addsuffix<currentTiddler>] }}}>
+<li>
+<$reveal type="match" state=<<state>> text="yes" tag="span">
+<$button set=<<state>> setTo="no" class="tc-btn-invisible">
+{{$:/core/images/down-arrow}}
+</$button>
+</$reveal>
+<$reveal type="nomatch" state=<<state>> text="yes" tag="span">
+<$button set=<<state>> setTo="yes" class="tc-btn-invisible">
+{{$:/core/images/right-arrow}}
+</$button>
+</$reveal>
+<$link>
+<$view field="title"/>
+</$link>
+<$reveal type="match" state=<<state>> text="yes" tag="div">
+<$set name="source" tiddler=<<currentTiddler>>>
+<$wikify name="styles" text=<<source>>>
+<pre>
+<code>
+<$text text=<<styles>>/>
+</code>
+</pre>
+</$wikify>
+</$set>
+</$reveal>
+</li>
+</$set>
+</$vars>
+</$list>
+</ol>
+\end
+
+\define stylesheets-list()
+<ol>
+<$list filter="[all[shadows+tiddlers]tag[$:/tags/Stylesheet]!has[draft.of]]">
+<li>
+<$link>
+<$view field="title"/>
+</$link>
+<$set name="source" tiddler=<<currentTiddler>>>
+<$wikify name="styles" text=<<source>>>
+<pre>
+<code>
+<$text text=<<styles>>/>
+</code>
+</pre>
+</$wikify>
+</$set>
+</li>
+</$list>
+</ol>
+\end
+
+<$vars modeState=<<qualify "$:/config/peek-stylesheets/mode/">>>
+
+<$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div">
+<$button set=<<modeState>> setTo="expanded" class="tc-btn-invisible">{{$:/core/images/chevron-right}} {{$:/language/ControlPanel/Stylesheets/Expand/Caption}}</$button>
+</$reveal>
+<$reveal type="match" state=<<modeState>> text="expanded" tag="div">
+<$button set=<<modeState>> setTo="restored" class="tc-btn-invisible">{{$:/core/images/chevron-down}} {{$:/language/ControlPanel/Stylesheets/Restore/Caption}}</$button>
+</$reveal>
+
+<$reveal type="nomatch" state=<<modeState>> text="expanded" tag="div">
+<<expandable-stylesheets-list>>
+</$reveal>
+<$reveal type="match" state=<<modeState>> text="expanded" tag="div">
+<<stylesheets-list>>
+</$reveal>
+
+</$vars>