Improve styling of MQTT debug info (#5626)

src/data/mqtt.ts

@@ -5,6 +5,7 @@ export interface MQTTMessage {
   payload: string;
   qos: number;
   retain: number;
+  time: string;
 }
 
 export interface MQTTTopicDebugInfo {

src/dialogs/mqtt-device-debug-info-dialog/dialog-mqtt-device-debug-info.ts

@@ -80,7 +80,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         <h4>
           ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.entities")}
         </h4>
-        <ul>
+        <ul class="entitylist">
           ${this._debugInfo.entities.length
             ? this._renderEntities()
             : html`
@@ -92,7 +92,7 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         <h4>
           ${this.hass!.localize("ui.dialogs.mqtt_device_debug_info.triggers")}
         </h4>
-        <ul>
+        <ul class="triggerlist">
           ${this._debugInfo.triggers.length
             ? this._renderTriggers()
             : html`
@@ -125,11 +125,11 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       ${this._debugInfo!.entities.map(
         (entity) => html`
-          <li>
+          <li class="entitylistitem">
             '${computeStateName(this.hass.states[entity.entity_id])}'
             (<code>${entity.entity_id}</code>)
             <br />MQTT discovery data:
-            <ul>
+            <ul class="discoverydata">
               <li>
                 Topic:
                 <code>${entity.discovery_data.topic}</code>
@@ -177,16 +177,23 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
     return html`
       ${this._debugInfo!.triggers.map(
         (trigger) => html`
+          <li class="triggerlistitem">
+            MQTT discovery data:
+            <ul class="discoverydata">
             <li>
-            Discovery topic:
+              Topic:
               <code>${trigger.discovery_data.topic}</code>
+            </li>
+            <li>
               <mqtt-discovery-payload
                 .hass=${this.hass}
                 .payload=${trigger.discovery_data.payload}
                 .showAsYaml=${this._showAsYaml}
-              .summary="Discovery payload"
+                .summary=${"Payload"}
               >
+            </li>
             </mqtt-discovery-payload>
+            </ul>
           </li>
         `
       )}
@@ -204,6 +211,17 @@ class DialogMQTTDeviceDebugInfo extends LitElement {
         ha-switch {
           margin: 16px;
         }
+        .discoverydata {
+          list-style-type: none;
+          margin: 4px;
+          padding-left: 16px;
+        }
+        .entitylistitem {
+          margin-bottom: 12px;
+        }
+        .triggerlistitem {
+          margin-bottom: 12px;
+        }
       `,
     ];
   }

src/dialogs/mqtt-device-debug-info-dialog/mqtt-discovery-payload.ts

@@ -1,11 +1,14 @@
 import { safeDump } from "js-yaml";
 import {
+  css,
+  CSSResult,
   customElement,
   html,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 
 @customElement("mqtt-discovery-payload")
 class MQTTDiscoveryPayload extends LitElement {
@@ -19,12 +22,17 @@ class MQTTDiscoveryPayload extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <details @toggle=${this._handleToggle}>
+      <div
-        <summary>
+        class="expander ${classMap({ open: this._open })}"
+        @click=${this._handleToggle}
+      >
         ${this.summary}
-        </summary>
+      </div>
-        ${this._open ? this._renderPayload() : ""}
+      ${this._open
-      </details>
+        ? html` <div class="payload">
+            ${this._renderPayload()}
+          </div>`
+        : ""}
     `;
   }
 
@@ -37,8 +45,45 @@ class MQTTDiscoveryPayload extends LitElement {
     `;
   }
 
-  private _handleToggle(ev) {
+  private _handleToggle() {
-    this._open = ev.target.open;
+    this._open = !this._open;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .expander {
+        cursor: pointer;
+        position: relative;
+        padding: 8px;
+        padding-left: 29px;
+        border: 1px solid var(--divider-color);
+      }
+      .expander:before {
+        content: "";
+        position: absolute;
+        border-right: 2px solid var(--primary-text-color);
+        border-bottom: 2px solid var(--primary-text-color);
+        width: 5px;
+        height: 5px;
+        top: 50%;
+        left: 12px;
+        transform: translateY(-50%) rotate(-45deg);
+      }
+      .expander.open:before {
+        transform: translateY(-50%) rotate(45deg);
+      }
+      .payload {
+        border: 1px solid var(--divider-color);
+        border-top: 0;
+        padding-left: 16px;
+      }
+      pre {
+        display: inline-block;
+        font-size: 0.9em;
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+    `;
   }
 }
 

src/dialogs/mqtt-device-debug-info-dialog/mqtt-messages.ts

@@ -1,15 +1,22 @@
 import { safeDump } from "js-yaml";
 import {
+  css,
+  CSSResult,
   customElement,
   html,
   LitElement,
   property,
   TemplateResult,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
+import { formatTimeWithSeconds } from "../../common/datetime/format_time";
+import { HomeAssistant } from "../../types";
 import { MQTTMessage } from "../../data/mqtt";
 
 @customElement("mqtt-messages")
 class MQTTMessages extends LitElement {
+  public hass!: HomeAssistant;
+
   @property() public messages!: MQTTMessage[];
 
   @property() public showAsYaml = false;
@@ -37,16 +44,25 @@ class MQTTMessages extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <details @toggle=${this._handleToggle}>
+      <div
-        <summary>
+        class="expander ${classMap({ open: this._open })}"
+        @click=${this._handleToggle}
+      >
         ${this.summary}
-        </summary>
+      </div>
       ${this._open
         ? html`
-              <ul>
+            <ul class="message-list">
               ${this.messages.map(
                 (message) => html`
-                    <li>
+                  <li class="message">
+                    <div class="time">
+                      Received
+                      ${formatTimeWithSeconds(
+                        new Date(message.time),
+                        this.hass.language
+                      )}
+                    </div>
                     ${this._renderSingleMessage(message)}
                   </li>
                 `
@@ -54,7 +70,6 @@ class MQTTMessages extends LitElement {
             </ul>
           `
         : ""}
-      </details>
     `;
   }
 
@@ -62,10 +77,8 @@ class MQTTMessages extends LitElement {
     const topic = message.topic;
     return this._showTopic
       ? html`
-          <ul>
+          <ul class="message-with-topic">
-            <li>
+            <li>Topic: <code>${topic}</code></li>
-              Topic: ${topic}
-            </li>
             <li>
               Payload: ${this._renderSinglePayload(message)}
             </li>
@@ -118,8 +131,51 @@ class MQTTMessages extends LitElement {
     return jsonPayload;
   }
 
-  private _handleToggle(ev) {
+  private _handleToggle() {
-    this._open = ev.target.open;
+    this._open = !this._open;
+  }
+
+  static get styles(): CSSResult {
+    return css`
+      .expander {
+        cursor: pointer;
+        position: relative;
+        padding: 8px;
+        padding-left: 29px;
+        border: 1px solid var(--divider-color);
+      }
+      .expander:before {
+        content: "";
+        position: absolute;
+        border-right: 2px solid var(--primary-text-color);
+        border-bottom: 2px solid var(--primary-text-color);
+        width: 5px;
+        height: 5px;
+        top: 50%;
+        left: 12px;
+        transform: translateY(-50%) rotate(-45deg);
+      }
+      .expander.open:before {
+        transform: translateY(-50%) rotate(45deg);
+      }
+      .message {
+        font-size: 0.9em;
+        margin-bottom: 12px;
+      }
+      .message-list {
+        border: 1px solid var(--divider-color);
+        border-top: 0;
+        padding-left: 28px;
+        margin: 0;
+      }
+      pre {
+        display: inline-block;
+        font-size: 0.9em;
+        margin: 0;
+        padding-left: 4px;
+        padding-right: 4px;
+      }
+    `;
   }
 }