Hacking the planet - trying to add some DEBUG pane to help display what Contexts are available or events are firing

src/Umbraco.Web.UI.Client/src/app.ts

@@ -149,7 +149,9 @@ export class UmbApp extends UmbLitElement {
 	}
 
 	render() {
-		return html`<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
+		return html`
+			<umb-debug enabled></umb-debug>
+			<umb-router-slot id="router-slot" .routes=${this._routes}></umb-router-slot>`;
 	}
 }
 

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

@@ -0,0 +1,103 @@
+import { UmbContextRequestEventImplementation, umbContextRequestEventType } from '@umbraco-cms/context-api';
+import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
+import { css, html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit-html/directives/style-map';
+import { customElement, property, state } from 'lit/decorators.js';
+
+
+@customElement('umb-debug')
+export class UmbDebug extends LitElement {
+	static styles = [
+		UUITextStyles,
+		css`
+			:host {
+			}
+            
+            #debug {
+                display: block;
+				font-family: monospace;
+                /* background:red; */
+
+                position:absolute;
+                bottom:0;
+                left:0;
+                z-index:10000;
+                width:calc(100% - 20px);
+
+                padding:10px;
+            }
+
+            #debug:hover {
+                /* background-color:blue; */
+            }
+
+            .events {
+                background-color:var(--uui-color-danger);
+                color:var(--uui-color-selected-contrast);
+                height:0;
+                transition: height 0.3s ease-out;
+            }
+
+            .events.open {
+                height:200px;
+                padding:10px;
+            }
+
+            h4 { 
+                margin:0;
+            }
+
+		`,
+	];
+
+    @property({reflect: true, type: Boolean})
+    enabled = false;
+
+    @state()
+	private _debugPaneOpen = false;
+
+    private _toggleDebugPane() {
+        this._debugPaneOpen = !this._debugPaneOpen;
+    }
+
+    constructor() {
+        super();
+
+        // Get outer element <umb-app>
+        const app = window.document.querySelector('umb-app');
+
+        console.log('root app', app);
+        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));
+    }
+
+	render() {
+
+        if(this.enabled){
+            return html`
+                <div id="debug">
+                    <uui-button color="danger" look="primary" @click="${this._toggleDebugPane}">Debug</uui-button>
+                    <div class="events ${this._debugPaneOpen ? 'open' : ''}">
+                        <h4>Events</h4>
+                        
+                    </div>
+                </div>
+                `;
+        }
+        
+        return nothing;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-debug': UmbDebug;
+	}
+}

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts

@@ -31,3 +31,5 @@ import './input-document-picker/input-document-picker.element';
 import './empty-state/empty-state.element';
 
 import './color-picker/color-picker.element';
+
+import './debug/debug.element';