Split Logs from info tab in dev tools (#3560)

* Split Logs from info tab in dev tools

* lint

* Remove border above logs

src/panels/developer-tools/developer-tools-router.ts

@@ -28,6 +28,10 @@ class DeveloperToolsRouter extends HassRouterPage {
         tag: "developer-tools-info",
         load: () => import("./info/developer-tools-info"),
       },
+      logs: {
+        tag: "developer-tools-logs",
+        load: () => import("./logs/developer-tools-logs"),
+      },
       mqtt: {
         tag: "developer-tools-mqtt",
         load: () => import("./mqtt/developer-tools-mqtt"),

src/panels/developer-tools/ha-panel-developer-tools.ts

@@ -52,6 +52,9 @@ class PanelDeveloperTools extends LitElement {
             <paper-tab page-name="info">
               ${this.hass.localize("ui.panel.developer-tools.tabs.info.title")}
             </paper-tab>
+            <paper-tab page-name="logs">
+              ${this.hass.localize("ui.panel.developer-tools.tabs.logs.title")}
+            </paper-tab>
             <paper-tab page-name="event">
               ${this.hass.localize(
                 "ui.panel.developer-tools.tabs.events.title"

src/panels/developer-tools/info/developer-tools-info.ts

@@ -10,8 +10,6 @@ import {
 import { HomeAssistant } from "../../../types";
 import { haStyle } from "../../../resources/styles";
 
-import "./system-log-card";
-import "./error-log-card";
 import "./system-health-card";
 
 const JS_TYPE = __BUILD__;
@@ -119,8 +117,6 @@ class HaPanelDevInfo extends LitElement {
       </div>
       <div class="content">
         <system-health-card .hass=${this.hass}></system-health-card>
-        <system-log-card .hass=${this.hass}></system-log-card>
-        <error-log-card .hass=${this.hass}></error-log-card>
       </div>
     `;
   }
@@ -181,6 +177,7 @@ class HaPanelDevInfo extends LitElement {
           display: block;
           max-width: 600px;
           margin: 0 auto;
+          padding-bottom: 16px;
         }
       `,
     ];

src/panels/developer-tools/logs/developer-tools-logs.ts

@@ -0,0 +1,52 @@
+import {
+  LitElement,
+  html,
+  CSSResult,
+  css,
+  TemplateResult,
+  property,
+} from "lit-element";
+
+import { HomeAssistant } from "../../../types";
+import { haStyle } from "../../../resources/styles";
+
+import "../logs/system-log-card";
+import "../logs/error-log-card";
+
+class HaPanelDevLogs extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  protected render(): TemplateResult | void {
+    return html`
+      <div class="content">
+        <system-log-card .hass=${this.hass}></system-log-card>
+        <error-log-card .hass=${this.hass}></error-log-card>
+      </div>
+    `;
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+
+        .content {
+          direction: ltr;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "developer-tools-logs": HaPanelDevLogs;
+  }
+}
+
+customElements.define("developer-tools-logs", HaPanelDevLogs);

src/panels/developer-tools/logs/system-log-card.ts

@@ -141,8 +141,6 @@ class SystemLogCard extends LitElement {
 
       .system-log-intro {
         margin: 16px;
-        border-top: 1px solid var(--light-primary-color);
-        padding-top: 16px;
       }
 
       .loading-container {

src/translations/en.json

@@ -1320,6 +1320,9 @@
           "info": {
             "title": "Info"
           },
+          "logs": {
+            "title": "Logs"
+          },
           "events": {
             "title": "Events"
           },