From 98f98e2e2891697e197eb80b9d0dc75610f082e6 Mon Sep 17 00:00:00 2001
From: Warren Buckley <warren@umbraco.com>
Date: Mon, 13 Feb 2023 21:37:35 +0000
Subject: [PATCH] Add bug icon into button

If this is going to be placed into any child component/element - need to think how it will work in places woth tiny/limited space in UI
---
 .../shared/components/debug/debug.element.ts  | 76 +++++++++----------
 1 file changed, 34 insertions(+), 42 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 5af1998733..4c5a1bb016 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -1,8 +1,7 @@
-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';
+import { UmbContextRequestEventImplementation, umbContextRequestEventType } from '@umbraco-cms/context-api';
 
 
 @customElement('umb-debug')
@@ -10,43 +9,34 @@ export class UmbDebug extends LitElement {
 	static styles = [
 		UUITextStyles,
 		css`
-			:host {
-			}
-            
-            #debug {
-                display: block;
+			#container {
+				display: block;
 				font-family: monospace;
-                /* background:red; */
 
-                position:absolute;
-                bottom:0;
-                left:0;
-                z-index:10000;
-                width:calc(100% - 20px);
+				position:absolute;
+				bottom:0;
+				left:0;
+				z-index:10000;
 
-                padding:10px;
-            }
+				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 {
-                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;
-            }
+			.events.open {
+				height:200px;
+				padding:10px;
+			}
 
+			h4 {
+				margin:0;
+			}
 		`,
 	];
 
@@ -66,7 +56,6 @@ export class UmbDebug extends LitElement {
         // 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);
@@ -82,16 +71,19 @@ export class UmbDebug extends LitElement {
 
         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 id="container">
+					<uui-button color="danger" look="primary"  @click="${this._toggleDebugPane}">
+						<uui-icon name="umb:bug"></uui-icon>
+						Debug
+					</uui-button>
+
+					<div class="events ${this._debugPaneOpen ? 'open' : ''}">
+						<h4>Events</h4>
+					</div>
                 </div>
-                `;
+			`;
         }
-        
+
         return nothing;
 	}
 }