From 57f6089c591e6defda7fc026976ea4ad5e88c4bd Mon Sep 17 00:00:00 2001 From: leekelleher Date: Mon, 13 May 2024 18:09:09 +0100 Subject: [PATCH] UI enhancements Uses `
` to collapse the context data. Makes more use of Lit directives to render markup. --- .../debug/context-data.function.ts | 2 +- .../src/packages/core/debug/debug.element.ts | 220 ++++++++---------- .../debug/modals/debug/debug-modal.element.ts | 60 ++--- 3 files changed, 114 insertions(+), 168 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/libs/context-api/debug/context-data.function.ts b/src/Umbraco.Web.UI.Client/src/libs/context-api/debug/context-data.function.ts index 6e4768d6f2..3493f69227 100644 --- a/src/Umbraco.Web.UI.Client/src/libs/context-api/debug/context-data.function.ts +++ b/src/Umbraco.Web.UI.Client/src/libs/context-api/debug/context-data.function.ts @@ -59,7 +59,7 @@ function contextItemData(contextInstance: any): UmbDebugContextItemData { valueToDisplay = `Web Component <${tagName}>`; } else if (isSubscribeLike) { - valueToDisplay = 'Subscribable'; + valueToDisplay = 'Observable'; } props.push({ key: key, type: typeof value, value: valueToDisplay }); diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts index 20e1a75fbc..057a5ec557 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/debug/debug.element.ts @@ -1,19 +1,16 @@ -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { TemplateResult } from '@umbraco-cms/backoffice/external/lit'; -import { css, html, nothing, customElement, property, state, repeat } from '@umbraco-cms/backoffice/external/lit'; - +import { css, customElement, html, map, nothing, property, state, when } from '@umbraco-cms/backoffice/external/lit'; import { contextData, UmbContextDebugRequest } from '@umbraco-cms/backoffice/context-api'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; -import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import { UMB_CONTEXT_DEBUGGER_MODAL, UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; import type { UmbDebugContextData, UmbDebugContextItemData } from '@umbraco-cms/backoffice/context-api'; +import type { UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; @customElement('umb-debug') export class UmbDebugElement extends UmbLitElement { - @property({ reflect: true, type: Boolean }) + @property({ type: Boolean }) visible = false; - @property({ reflect: true, type: Boolean }) + @property({ type: Boolean }) dialog = false; @state() @@ -31,22 +28,13 @@ export class UmbDebugElement extends UmbLitElement { }); } - render() { - if (this.visible) { - return this.dialog ? this._renderDialog() : this._renderPanel(); - } else { - return nothing; - } - } - - private _update() { - // Dispatch it + #update() { this.dispatchEvent( new UmbContextDebugRequest((contexts: Map) => { // The Contexts are collected // When travelling up through the DOM from this element // to the root of which then uses the callback prop - // of the this event tha has been raised to assign the contexts + // of this event that has been raised to assign the contexts // back to this property of the WebComponent // Massage the data into a simplier array of objects @@ -57,134 +45,127 @@ export class UmbDebugElement extends UmbLitElement { ); } - private _toggleDebugPane() { + #toggleDebugPane() { this._debugPaneOpen = !this._debugPaneOpen; if (this._debugPaneOpen) { - this._update(); + this.#update(); } } - private _openDialog() { - - this._update(); + #openDialog() { + this.#update(); this._modalContext?.open(this, UMB_CONTEXT_DEBUGGER_MODAL, { data: { - content: html`${this._renderContextAliases()}`, + content: this.#renderContextAliases(), }, }); } - private _renderDialog() { + render() { + if (!this.visible) return nothing; + return this.dialog ? this.#renderDialog() : this.#renderPanel(); + } + + #renderDialog() { return html` -
- -  Debug - -
`; - } - - private _renderPanel() { - return html`
- - - Debug - - -
-
-
    - ${this._renderContextAliases()} -
-
+
+ + + Debug +
+ `; + } + + #renderPanel() { + return html` +
+ + + Debug + + ${when(this._debugPaneOpen, () => this.#renderContextAliases())} +
+ `; + } + + #renderContextAliases() { + return html`
+ ${map(this._contextData, (context) => { + return html` +
+ ${context.alias} + ${this.#renderInstance(context.data)} +
+ `; + })}
`; } - private _renderContextAliases() { - return repeat( - this.contextData, - (contextData) => contextData.alias, - (contextData) => { - return html`
  • - Context: ${contextData.alias} - (${contextData.type}) -
      - ${this._renderInstance(contextData.data)} -
    -
    • `; - }, - ); - } - - private _renderInstance(instance: DebugContextItemData) { - const instanceTemplates: TemplateResult[] = []; - - if (instance.type === 'function') { - return instanceTemplates.push(html`
  • Callable Function
    • `); - } else if (instance.type === 'object') { - if (instance.methods?.length) { - instanceTemplates.push(html` -
  • - Methods -
      - ${instance.methods?.map((methodName) => html`
    • ${methodName}
      • `)} -
    -
    • - `); + #renderInstance(instance: UmbDebugContextItemData) { + switch (instance.type) { + case 'function': { + return html`

    Callable Function

    `; } - const props: TemplateResult[] = []; - instance.properties?.forEach((property) => { - switch (property.type) { - case 'string': - case 'number': - case 'boolean': - case 'object': - props.push(html`
  • ${property.key} (${property.type}) = ${property.value}
    • `); - break; + case 'object': { + return html` +
    + Methods +
      + ${map(instance.methods, (methodName) => html`
    • ${methodName}
      • `)} +
    +
    - default: - props.push(html`
  • ${property.key} (${property.type})
    • `); - break; - } - }); +
    + Properties +
      + ${map(instance.properties, (property) => { + switch (property.type) { + case 'string': + case 'number': + case 'boolean': + case 'object': + return html`
    • ${property.key} (${property.type}) = ${property.value}
      • `; - instanceTemplates.push(html` -
    • - Properties -
        - ${props} -
      -
      • - `); - } else if (instance.type === 'primitive') { - instanceTemplates.push(html`
    • Context is a primitive with value: ${instance.value}
      • `); + default: + return html`
    • ${property.key} (${property.type})
      • `; + } + })} +
    +
    + `; + } + + case 'primitive': { + return html`

    Context is a primitive with value: ${instance.value}

    `; + } + + default: { + return html`

    Unknown type: ${instance.type}

    `; + } } - - return instanceTemplates; } static styles = [ - UmbTextStyles, css` :host { float: right; + font-family: monospace; + position: relative; + z-index: 10000; } #container { - display: block; - font-family: monospace; - - z-index: 10000; - - position: relative; - width: 100%; - padding: 10px 0; + display: flex; + flex-direction: column; + align-items: flex-end; } uui-badge { cursor: pointer; + gap: 0.5rem; } uui-icon { @@ -194,22 +175,19 @@ export class UmbDebugElement extends UmbLitElement { .events { background-color: var(--uui-color-danger); color: var(--uui-color-selected-contrast); - max-height: 0; - transition: max-height 0.25s ease-out; - overflow: hidden; + padding: 1rem; } - .events.open { - max-height: 500px; - overflow: auto; + summary { + cursor: pointer; } - .events > div { - padding: 10px; + details > details { + margin-left: 1rem; } - h4 { - margin: 0; + ul { + margin-top: 0; } `, ]; diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/debug/modals/debug/debug-modal.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/debug/modals/debug/debug-modal.element.ts index 255ce97a88..7b045e89fb 100644 --- a/src/Umbraco.Web.UI.Client/src/packages/core/debug/modals/debug/debug-modal.element.ts +++ b/src/Umbraco.Web.UI.Client/src/packages/core/debug/modals/debug/debug-modal.element.ts @@ -1,66 +1,34 @@ -import { css, html, customElement } from '@umbraco-cms/backoffice/external/lit'; -import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import type { UmbContextDebuggerModalData} from '@umbraco-cms/backoffice/modal'; +import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit'; import { UmbModalBaseElement } from '@umbraco-cms/backoffice/modal'; +import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; +import type { UmbContextDebuggerModalData } from '@umbraco-cms/backoffice/modal'; @customElement('umb-context-debugger-modal') export default class UmbContextDebuggerModalElement extends UmbModalBaseElement { - private _handleClose() { + #close() { this.modalContext?.reject(); } render() { return html` - - Debug: Contexts - - ${this.data?.content} - - Close - + +
    ${this.data?.content}
    +
    + +
    +     `; } static styles = [ UmbTextStyles, css` - uui-dialog-layout { - display: flex; - flex-direction: column; - height: 100%; - - padding: var(--uui-size-space-5); - box-sizing: border-box; + summary { + cursor: pointer; } - uui-scroll-container { - overflow-y: scroll; - max-height: 100%; - min-height: 0; - flex: 1; - } - - uui-icon { - vertical-align: text-top; - color: var(--uui-color-danger); - } - - .context { - padding: 15px 0; - border-bottom: 1px solid var(--uui-color-danger-emphasis); - } - - h3 { - margin-top: 0; - margin-bottom: 0; - } - - h3 > span { - border-radius: var(--uui-size-4); - background-color: var(--uui-color-danger); - color: var(--uui-color-danger-contrast); - padding: 8px; - font-size: 12px; + details > details { + margin-left: 1rem; } ul {