Rework based on Mads notes

src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts

@@ -31,6 +31,9 @@ export class UmbContextProvider<HostType extends EventTarget = EventTarget> {
 	public hostConnected() {
 		this.host.addEventListener(umbContextRequestEventType, this._handleContextRequest);
 		this.host.dispatchEvent(new UmbContextProvideEventImplementation(this._contextAlias));
+
+		// Listen to our debug event 'umb:debug-contexts'
+		this.host.addEventListener('umb:debug-contexts', this._handleDebugContextRequest);
 	}
 
 	/**
@@ -54,6 +57,17 @@ export class UmbContextProvider<HostType extends EventTarget = EventTarget> {
 		event.callback(this.#instance);
 	};
 
+	private _handleDebugContextRequest = (event: Event) => {
+
+		
+		console.log('Context Alias:', this._contextAlias);
+		console.log('Context Instance:', this.#instance);
+
+		// Do I update an array on the event which
+		// The Debug element can then render in UI?!
+		console.log('Event:', event);
+	};
+
 
 	destroy(): void {
 		// I want to make sure to call this, but for now it was too overwhelming to require the destroy method on context instances.

src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts

@@ -133,6 +133,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
 
 	render() {
 		return html`
+			<umb-debug enabled></umb-debug>
 			<uui-box headline="Published Cache Status">
 				<p>${this._publishedStatusText}</p>
 				<uui-button

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts

@@ -13,13 +13,10 @@ export class UmbDebug extends LitElement {
 				display: block;
 				font-family: monospace;
 
-				position:absolute;
-				bottom:0;
-				left:0;
 				z-index:10000;
 
-				width:calc(100% - 20px);
-				padding:10px;
+				width:100%;
+				padding:10px 0;
 			}
 
 			.events {
@@ -31,6 +28,9 @@ export class UmbDebug extends LitElement {
 
 			.events.open {
 				height:200px;
+			}
+
+			.events > div {
 				padding:10px;
 			}
 
@@ -43,6 +43,9 @@ export class UmbDebug extends LitElement {
     @property({reflect: true, type: Boolean})
     enabled = false;
 
+	@property({type: Array<String>})
+	contextAliases = ['UmbTemplateDetailStore', 'umbLanguageStore'];
+
     @state()
 	private _debugPaneOpen = false;
 
@@ -50,22 +53,18 @@ export class UmbDebug extends LitElement {
         this._debugPaneOpen = !this._debugPaneOpen;
     }
 
-    constructor() {
-        super();
+	connectedCallback(): void {
+		super.connectedCallback();
 
-        // Get outer element <umb-app>
-        const app = window.document.querySelector('umb-app');
+		// Create event that bubbles up through the DOM
+		const event = new CustomEvent('umb:debug-contexts', {
+			bubbles: true,
+			composed: true			
+		});
 
-        app?.addEventListener(umbContextRequestEventType as unknown as UmbContextRequestEventImplementation, (e) => {
-            // Console.log event
-            console.log('Some event', e.type);
-            console.log('Some event thing', e);
-            console.log('Some event thing', e.contextAlias);
-
-        });
-
-        //this.addEventListener('click', (e) => console.log(e.type, e.target.localName));
-    }
+		// Dispatch it
+		this.dispatchEvent(event);
+	}
 
 	render() {
 
@@ -78,7 +77,14 @@ export class UmbDebug extends LitElement {
 					</uui-button>
 
 					<div class="events ${this._debugPaneOpen ? 'open' : ''}">
-						<h4>Events</h4>
+						<div>
+							<h4>Context Aliases to consume</h4>
+							<ul>
+								${this.contextAliases.map((ctxAlias) =>
+									html`<li>${ctxAlias}</li>`
+								)}
+							</ul>
+						</div>						
 					</div>
                 </div>
 			`;