remove tabs from trace pages (#13640)

src/panels/config/automation/ha-automation-trace.ts

@@ -1,6 +1,5 @@
 import {
   mdiDownload,
-  mdiPencil,
   mdiRayEndArrow,
   mdiRayStartArrow,
   mdiRefresh,
@@ -34,7 +33,7 @@ import {
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
-import { configSections } from "../ha-panel-config";
+import "../../../layouts/hass-subpage";
 
 @customElement("ha-automation-trace")
 export class HaAutomationTrace extends LitElement {
@@ -90,13 +89,34 @@ export class HaAutomationTrace extends LitElement {
       </div>`;
     }
 
-    const actionButtons = html`
+    return html`
+      ${devButtons}
+      <hass-subpage .hass=${this.hass} .narrow=${this.narrow} .header=${title}>
+        ${!this.narrow && stateObj?.attributes.id
+          ? html`
+              <a
+                class="trace-link"
+                href="/config/automation/edit/${stateObj.attributes.id}"
+                slot="toolbar-icon"
+              >
+                <mwc-button>
+                  ${this.hass.localize(
+                    "ui.panel.config.automation.trace.edit_automation"
+                  )}
+                </mwc-button>
+              </a>
+            `
+          : ""}
         <ha-icon-button
-        .label=${this.hass.localize("ui.panel.config.automation.trace.refresh")}
+          slot="toolbar-icon"
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.trace.refresh"
+          )}
           .path=${mdiRefresh}
           @click=${this._refreshTraces}
         ></ha-icon-button>
         <ha-icon-button
+          slot="toolbar-icon"
           .label=${this.hass.localize(
             "ui.panel.config.automation.trace.download_trace"
           )}
@@ -104,41 +124,9 @@ export class HaAutomationTrace extends LitElement {
           .disabled=${!this._trace}
           @click=${this._downloadTrace}
         ></ha-icon-button>
-    `;
-
-    return html`
-      ${devButtons}
-      <hass-tabs-subpage
-        .hass=${this.hass}
-        .narrow=${this.narrow}
-        .route=${this.route}
-        .tabs=${configSections.automations}
-      >
-        ${this.narrow
-          ? html`<span slot="header">${title}</span>
-              <div slot="toolbar-icon">${actionButtons}</div>`
-          : ""}
         <div class="toolbar">
-          ${!this.narrow
-            ? html`<div>
-                ${title}
-                <a
-                  class="linkButton"
-                  href="/config/automation/edit/${this.automationId}"
-                >
-                  <ha-icon-button
-                    .label=${this.hass!.localize(
-                      "ui.panel.config.automation.trace.edit_automation"
-                    )}
-                    .path=${mdiPencil}
-                    tabindex="-1"
-                  ></ha-icon-button>
-                </a>
-              </div>`
-            : ""}
           ${this._traces && this._traces.length > 0
             ? html`
-                <div>
                 <ha-icon-button
                   .label=${this.hass!.localize(
                     "ui.panel.config.automation.trace.older_trace"
@@ -169,10 +157,8 @@ export class HaAutomationTrace extends LitElement {
                   .disabled=${this._traces[0].run_id === this._runId}
                   @click=${this._pickNewerTrace}
                 ></ha-icon-button>
-                </div>
               `
             : ""}
-          ${!this.narrow ? html`<div>${actionButtons}</div>` : ""}
         </div>
 
         ${this._traces === undefined
@@ -276,7 +262,7 @@ export class HaAutomationTrace extends LitElement {
                 </div>
               </div>
             `}
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 
@@ -465,7 +451,7 @@ export class HaAutomationTrace extends LitElement {
         .toolbar {
           display: flex;
           align-items: center;
-          justify-content: space-between;
+          justify-content: center;
           font-size: 20px;
           height: var(--header-height);
           padding: 0 16px;
@@ -476,15 +462,6 @@ export class HaAutomationTrace extends LitElement {
           box-sizing: border-box;
         }
 
-        .toolbar > * {
-          display: flex;
-          align-items: center;
-        }
-
-        :host([narrow]) .toolbar > * {
-          display: contents;
-        }
-
         .main {
           height: calc(100% - 56px);
           display: flex;
@@ -520,6 +497,9 @@ export class HaAutomationTrace extends LitElement {
         .linkButton {
           color: var(--primary-text-color);
         }
+        .trace-link {
+          text-decoration: none;
+        }
       `,
     ];
   }

src/panels/config/script/ha-script-trace.ts

@@ -1,6 +1,5 @@
 import {
   mdiDownload,
-  mdiPencil,
   mdiRayEndArrow,
   mdiRayStartArrow,
   mdiRefresh,
@@ -34,7 +33,7 @@ import {
 import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../resources/styles";
 import { HomeAssistant, Route } from "../../../types";
-import { configSections } from "../ha-panel-config";
+import "../../../layouts/hass-subpage";
 
 @customElement("ha-script-trace")
 export class HaScriptTrace extends LitElement {
@@ -88,51 +87,44 @@ export class HaScriptTrace extends LitElement {
       </div>`;
     }
 
-    const actionButtons = html`
-      <ha-icon-button
-        label="Refresh"
-        @click=${this._refreshTraces}
-        .path=${mdiRefresh}
-      ></ha-icon-button>
-      <ha-icon-button
-        .disabled=${!this._trace}
-        label="Download Trace"
-        @click=${this._downloadTrace}
-        .path=${mdiDownload}
-      ></ha-icon-button>
-    `;
-
     return html`
       ${devButtons}
-      <hass-tabs-subpage
+      <hass-subpage .hass=${this.hass} .narrow=${this.narrow} .header=${title}>
-        .hass=${this.hass}
+        ${!this.narrow && this.scriptEntityId
-        .narrow=${this.narrow}
+          ? html`
-        .route=${this.route}
-        .tabs=${configSections.automations}
-      >
-        ${this.narrow
-          ? html`<span slot="header"> ${title} </span>
-              <div slot="toolbar-icon">${actionButtons}</div>`
-          : ""}
-        <div class="toolbar">
-          ${!this.narrow
-            ? html`<div>
-                ${title}
               <a
-                  class="linkButton"
+                class="trace-link"
                 href="/config/script/edit/${this.scriptEntityId}"
+                slot="toolbar-icon"
               >
-                  <ha-icon-button
+                <mwc-button>
-                    label="Edit Script"
+                  ${this.hass.localize(
-                    tabindex="-1"
+                    "ui.panel.config.script.trace.edit_script"
-                    .path=${mdiPencil}
+                  )}
-                  ></ha-icon-button>
+                </mwc-button>
               </a>
-              </div>`
+            `
           : ""}
+        <ha-icon-button
+          slot="toolbar-icon"
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.trace.refresh"
+          )}
+          .path=${mdiRefresh}
+          @click=${this._refreshTraces}
+        ></ha-icon-button>
+        <ha-icon-button
+          slot="toolbar-icon"
+          .label=${this.hass.localize(
+            "ui.panel.config.automation.trace.download_trace"
+          )}
+          .path=${mdiDownload}
+          .disabled=${!this._trace}
+          @click=${this._downloadTrace}
+        ></ha-icon-button>
+        <div class="toolbar">
           ${this._traces && this._traces.length > 0
             ? html`
-                <div>
                 <ha-icon-button
                   .disabled=${this._traces[this._traces.length - 1].run_id ===
                   this._runId}
@@ -159,10 +151,8 @@ export class HaScriptTrace extends LitElement {
                   @click=${this._pickNewerTrace}
                   .path=${mdiRayStartArrow}
                 ></ha-icon-button>
-                </div>
               `
             : ""}
-          ${!this.narrow ? html`<div>${actionButtons}</div>` : ""}
         </div>
 
         ${this._traces === undefined
@@ -266,7 +256,7 @@ export class HaScriptTrace extends LitElement {
                 </div>
               </div>
             `}
-      </hass-tabs-subpage>
+      </hass-subpage>
     `;
   }
 
@@ -447,26 +437,14 @@ export class HaScriptTrace extends LitElement {
         .toolbar {
           display: flex;
           align-items: center;
-          justify-content: space-between;
+          justify-content: center;
-          font-size: 20px;
           height: var(--header-height);
-          padding: 0 16px;
           background-color: var(--primary-background-color);
-          font-weight: 400;
           color: var(--app-header-text-color, white);
           border-bottom: var(--app-header-border-bottom, none);
           box-sizing: border-box;
         }
 
-        .toolbar > * {
-          display: flex;
-          align-items: center;
-        }
-
-        :host([narrow]) .toolbar > * {
-          display: contents;
-        }
-
         .main {
           height: calc(100% - 56px);
           display: flex;
@@ -499,6 +477,9 @@ export class HaScriptTrace extends LitElement {
         .linkButton {
           color: var(--primary-text-color);
         }
+        .trace-link {
+          text-decoration: none;
+        }
       `,
     ];
   }

src/translations/en.json

@@ -2313,7 +2313,8 @@
             "sequence": "Sequence",
             "sequence_sentence": "The sequence of actions of this script.",
             "link_available_actions": "Learn more about available actions."
-          }
+          },
+          "trace": { "edit_script": "Edit script" }
         },
         "scene": {
           "caption": "Scenes",