Move info and log panels (#6127)

src/panels/config/dashboard/ha-config-dashboard.ts

@@ -20,6 +20,7 @@ import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { configSections } from "../ha-panel-config";
 import "./ha-config-navigation";
+import { mdiCloudLock } from "@mdi/js";
 
 @customElement("ha-config-dashboard")
 class HaConfigDashboard extends LitElement {
@@ -66,7 +67,7 @@ class HaConfigDashboard extends LitElement {
                         path: "/config/cloud",
                         translationKey: "ui.panel.config.cloud.caption",
                         info: this.cloudStatus,
-                        icon: "hass:cloud-lock",
+                        iconPath: mdiCloudLock,
                       },
                     ]}
                   ></ha-config-navigation>

src/panels/config/dashboard/ha-config-navigation.ts

@@ -38,7 +38,10 @@ class HaConfigNavigation extends LitElement {
                 tabindex="-1"
               >
                 <paper-icon-item>
-                  <ha-icon .icon=${page.icon} slot="item-icon"></ha-icon>
+                  <ha-svg-icon
+                    .path=${page.iconPath}
+                    slot="item-icon"
+                  ></ha-svg-icon>
                   <paper-item-body two-line>
                     ${this.hass.localize(
                       page.translationKey ||
@@ -88,7 +91,7 @@ class HaConfigNavigation extends LitElement {
         display: block;
         outline: 0;
       }
-      ha-icon,
+      ha-svg-icon,
       ha-icon-next {
         color: var(--secondary-text-color);
       }

src/panels/config/ha-panel-config.ts

@@ -9,6 +9,25 @@ import "../../layouts/hass-loading-screen";
 import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page";
 import { PageNavigation } from "../../layouts/hass-tabs-subpage";
 import { HomeAssistant, Route } from "../../types";
+import {
+  mdiPuzzle,
+  mdiDevices,
+  mdiShape,
+  mdiSofa,
+  mdiRobot,
+  mdiPalette,
+  mdiScriptText,
+  mdiTools,
+  mdiViewDashboard,
+  mdiAccount,
+  mdiMapMarkerRadius,
+  mdiAccountBadgeHorizontal,
+  mdiHomeAssistant,
+  mdiServer,
+  mdiInformation,
+  mdiMathLog,
+  mdiPencil,
+} from "@mdi/js";
 
 declare global {
   // for fire event
@@ -23,28 +42,28 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       component: "integrations",
       path: "/config/integrations",
       translationKey: "ui.panel.config.integrations.caption",
-      icon: "hass:puzzle",
+      iconPath: mdiPuzzle,
       core: true,
     },
     {
       component: "devices",
       path: "/config/devices",
       translationKey: "ui.panel.config.devices.caption",
-      icon: "hass:devices",
+      iconPath: mdiDevices,
       core: true,
     },
     {
       component: "entities",
       path: "/config/entities",
       translationKey: "ui.panel.config.entities.caption",
-      icon: "hass:shape",
+      iconPath: mdiShape,
       core: true,
     },
     {
       component: "areas",
       path: "/config/areas",
       translationKey: "ui.panel.config.areas.caption",
-      icon: "hass:sofa",
+      iconPath: mdiSofa,
       core: true,
     },
   ],
@@ -53,25 +72,25 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       component: "automation",
       path: "/config/automation",
       translationKey: "ui.panel.config.automation.caption",
-      icon: "hass:robot",
+      iconPath: mdiRobot,
     },
     {
       component: "scene",
       path: "/config/scene",
       translationKey: "ui.panel.config.scene.caption",
-      icon: "hass:palette",
+      iconPath: mdiPalette,
     },
     {
       component: "script",
       path: "/config/script",
       translationKey: "ui.panel.config.script.caption",
-      icon: "hass:script-text",
+      iconPath: mdiScriptText,
     },
     {
       component: "helpers",
       path: "/config/helpers",
       translationKey: "ui.panel.config.helpers.caption",
-      icon: "hass:tools",
+      iconPath: mdiTools,
       core: true,
     },
   ],
@@ -80,7 +99,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       component: "lovelace",
       path: "/config/lovelace/dashboards",
       translationKey: "ui.panel.config.lovelace.caption",
-      icon: "hass:view-dashboard",
+      iconPath: mdiViewDashboard,
     },
   ],
   persons: [
@@ -88,19 +107,19 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       component: "person",
       path: "/config/person",
       translationKey: "ui.panel.config.person.caption",
-      icon: "hass:account",
+      iconPath: mdiAccount,
     },
     {
       component: "zone",
       path: "/config/zone",
       translationKey: "ui.panel.config.zone.caption",
-      icon: "hass:map-marker-radius",
+      iconPath: mdiMapMarkerRadius,
     },
     {
       component: "users",
       path: "/config/users",
       translationKey: "ui.panel.config.users.caption",
-      icon: "hass:account-badge-horizontal",
+      iconPath: mdiAccountBadgeHorizontal,
       core: true,
     },
   ],
@@ -109,21 +128,37 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       component: "core",
       path: "/config/core",
       translationKey: "ui.panel.config.core.caption",
-      icon: "hass:home-assistant",
+      iconPath: mdiHomeAssistant,
       core: true,
     },
     {
       component: "server_control",
       path: "/config/server_control",
       translationKey: "ui.panel.config.server_control.caption",
-      icon: "hass:server",
+      iconPath: mdiServer,
       core: true,
     },
+    {
+      component: "logs",
+      path: "/config/logs",
+      translationKey: "ui.panel.config.logs.caption",
+      iconPath: mdiMathLog,
+      core: true,
+    },
+    {
+      component: "info",
+      path: "/config/info",
+      translationKey: "ui.panel.config.info.caption",
+      iconPath: mdiInformation,
+      core: true,
+    },
+  ],
+  advanced: [
     {
       component: "customize",
       path: "/config/customize",
       translationKey: "ui.panel.config.customize.caption",
-      icon: "hass:pencil",
+      iconPath: mdiPencil,
       core: true,
       advancedOnly: true,
     },
@@ -197,6 +232,20 @@ class HaPanelConfig extends HassRouterPage {
             /* webpackChunkName: "panel-config-server-control" */ "./server_control/ha-config-server-control"
           ),
       },
+      logs: {
+        tag: "ha-config-logs",
+        load: () =>
+          import(
+            /* webpackChunkName: "panel-config-logs" */ "./logs/ha-config-logs"
+          ),
+      },
+      info: {
+        tag: "ha-config-info",
+        load: () =>
+          import(
+            /* webpackChunkName: "panel-config-info" */ "./info/ha-config-info"
+          ),
+      },
       customize: {
         tag: "ha-config-customize",
         load: () =>

src/panels/config/info/ha-config-info.ts

@@ -0,0 +1,209 @@
+import {
+  css,
+  CSSResult,
+  html,
+  LitElement,
+  property,
+  TemplateResult,
+} from "lit-element";
+import { haStyle } from "../../../resources/styles";
+import { HomeAssistant, Route } from "../../../types";
+import "./integrations-card";
+import "./system-health-card";
+import { configSections } from "../ha-panel-config";
+import "../../../layouts/hass-tabs-subpage";
+
+const JS_TYPE = __BUILD__;
+const JS_VERSION = __VERSION__;
+
+class HaConfigInfo extends LitElement {
+  @property() public hass!: HomeAssistant;
+
+  @property() public narrow!: boolean;
+
+  @property() public isWide!: boolean;
+
+  @property() public showAdvanced!: boolean;
+
+  @property() public route!: Route;
+
+  protected render(): TemplateResult {
+    const hass = this.hass;
+    const customUiList: Array<{ name: string; url: string; version: string }> =
+      (window as any).CUSTOM_UI_LIST || [];
+
+    return html`
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .route=${this.route}
+        .tabs=${configSections.general}
+      >
+        <div class="about">
+          <a
+            href="https://www.home-assistant.io"
+            target="_blank"
+            rel="noreferrer"
+            ><img
+              src="/static/icons/favicon-192x192.png"
+              height="192"
+              alt="${this.hass.localize(
+                "ui.panel.config.info.home_assistant_logo"
+              )}"
+          /></a>
+          <br />
+          <h2>Home Assistant ${hass.connection.haVersion}</h2>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.info.path_configuration",
+              "path",
+              hass.config.config_dir
+            )}
+          </p>
+          <p class="develop">
+            <a
+              href="https://www.home-assistant.io/developers/credits/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              ${this.hass.localize("ui.panel.config.info.developed_by")}
+            </a>
+          </p>
+          <p>
+            ${this.hass.localize("ui.panel.config.info.license")}<br />
+            ${this.hass.localize("ui.panel.config.info.source")}
+            <a
+              href="https://github.com/home-assistant/core"
+              target="_blank"
+              rel="noreferrer"
+              >${this.hass.localize("ui.panel.config.info.server")}</a
+            >
+            &mdash;
+            <a
+              href="https://github.com/home-assistant/frontend"
+              target="_blank"
+              rel="noreferrer"
+              >${this.hass.localize("ui.panel.config.info.frontend")}</a
+            >
+          </p>
+          <p>
+            ${this.hass.localize("ui.panel.config.info.built_using")}
+            <a href="https://www.python.org" target="_blank" rel="noreferrer"
+              >Python 3</a
+            >,
+            <a
+              href="https://www.polymer-project.org"
+              target="_blank"
+              rel="noreferrer"
+              >Polymer</a
+            >, ${this.hass.localize("ui.panel.config.info.icons_by")}
+            <a
+              href="https://www.google.com/design/icons/"
+              target="_blank"
+              rel="noreferrer"
+              >Google</a
+            >
+            ${this.hass.localize("ui.common.and")}
+            <a
+              href="https://MaterialDesignIcons.com"
+              target="_blank"
+              rel="noreferrer"
+              >MaterialDesignIcons.com</a
+            >.
+          </p>
+          <p>
+            ${this.hass.localize(
+              "ui.panel.config.info.frontend_version",
+              "version",
+              JS_VERSION,
+              "type",
+              JS_TYPE
+            )}
+            ${customUiList.length > 0
+              ? html`
+                  <div>
+                    ${this.hass.localize("ui.panel.config.info.custom_uis")}
+                    ${customUiList.map(
+                      (item) => html`
+                        <div>
+                          <a href="${item.url}" target="_blank"> ${item.name}</a
+                          >: ${item.version}
+                        </div>
+                      `
+                    )}
+                  </div>
+                `
+              : ""}
+          </p>
+        </div>
+        <div class="content">
+          <system-health-card .hass=${this.hass}></system-health-card>
+          <integrations-card .hass=${this.hass}></integrations-card>
+        </div>
+      </hass-tabs-subpage>
+    `;
+  }
+
+  protected firstUpdated(changedProps): void {
+    super.firstUpdated(changedProps);
+
+    // Legacy custom UI can be slow to register, give them time.
+    const customUI = ((window as any).CUSTOM_UI_LIST || []).length;
+    setTimeout(() => {
+      if (((window as any).CUSTOM_UI_LIST || []).length !== customUI.length) {
+        this.requestUpdate();
+      }
+    }, 1000);
+  }
+
+  static get styles(): CSSResult[] {
+    return [
+      haStyle,
+      css`
+        :host {
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+
+        .content {
+          direction: ltr;
+        }
+
+        .about {
+          text-align: center;
+          line-height: 2em;
+        }
+
+        .version {
+          @apply --paper-font-headline;
+        }
+
+        .develop {
+          @apply --paper-font-subhead;
+        }
+
+        .about a {
+          color: var(--primary-color);
+        }
+
+        system-health-card,
+        integrations-card {
+          display: block;
+          max-width: 600px;
+          margin: 0 auto;
+          padding-bottom: 16px;
+        }
+      `,
+    ];
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-config-info": HaConfigInfo;
+  }
+}
+
+customElements.define("ha-config-info", HaConfigInfo);

src/panels/config/info/integrations-card.ts

@@ -35,9 +35,7 @@ class IntegrationsCard extends LitElement {
   protected render(): TemplateResult {
     return html`
       <ha-card
-        .header=${this.hass.localize(
-          "ui.panel.developer-tools.tabs.info.integrations"
-        )}
+        .header=${this.hass.localize("ui.panel.config.info.integrations")}
       >
         <table class="card-content">
           <tbody>
@@ -67,7 +65,7 @@ class IntegrationsCard extends LitElement {
                               rel="noreferrer"
                             >
                               ${this.hass.localize(
-                                "ui.panel.developer-tools.tabs.info.documentation"
+                                "ui.panel.config.info.documentation"
                               )}
                             </a>
                           </td>
@@ -83,7 +81,7 @@ class IntegrationsCard extends LitElement {
                                     rel="noreferrer"
                                   >
                                     ${this.hass.localize(
-                                      "ui.panel.developer-tools.tabs.info.issues"
+                                      "ui.panel.config.info.issues"
                                     )}
                                   </a>
                                 </td>

src/panels/config/info/system-health-card.ts

@@ -97,9 +97,7 @@ class SystemHealthCard extends LitElement {
     } catch (err) {
       this._info = {
         system_health: {
-          error: this.hass.localize(
-            "ui.panel.developer-tools.tabs.info.system_health_error"
-          ),
+          error: this.hass.localize("ui.panel.config.info.system_health_error"),
         },
       };
     }

src/panels/config/logs/dialog-system-log-detail.ts

@@ -61,7 +61,7 @@ class DialogSystemLogDetail extends LitElement {
       >
         <h2>
           ${this.hass.localize(
-            "ui.panel.developer-tools.tabs.logs.details",
+            "ui.panel.config.logs.details",
             "level",
             item.level
           )}

src/panels/config/logs/error-log-card.ts

@@ -28,9 +28,7 @@ class ErrorLogCard extends LitElement {
             `
           : html`
               <mwc-button raised @click=${this._refreshErrorLog}>
-                ${this.hass.localize(
-                  "ui.panel.developer-tools.tabs.logs.load_full_log"
-                )}
+                ${this.hass.localize("ui.panel.config.logs.load_full_log")}
               </mwc-button>
             `}
       </p>
@@ -67,12 +65,10 @@ class ErrorLogCard extends LitElement {
   }
 
   private async _refreshErrorLog(): Promise<void> {
-    this._errorLog = this.hass.localize(
-      "ui.panel.developer-tools.tabs.logs.loading_log"
-    );
+    this._errorLog = this.hass.localize("ui.panel.config.logs.loading_log");
     const log = await fetchErrorLog(this.hass!);
     this._errorLog =
-      log || this.hass.localize("ui.panel.developer-tools.tabs.logs.no_errors");
+      log || this.hass.localize("ui.panel.config.logs.no_errors");
   }
 }
 

src/panels/config/logs/ha-config-logs.ts

@@ -9,15 +9,25 @@ import {
   TemplateResult,
 } from "lit-element";
 import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
+import { HomeAssistant, Route } from "../../../types";
 import "./error-log-card";
 import "./system-log-card";
 import type { SystemLogCard } from "./system-log-card";
+import { configSections } from "../ha-panel-config";
+import "../../../layouts/hass-tabs-subpage";
 
-@customElement("developer-tools-logs")
+@customElement("ha-config-logs")
 export class HaPanelDevLogs extends LitElement {
   @property() public hass!: HomeAssistant;
 
+  @property() public narrow!: boolean;
+
+  @property() public isWide!: boolean;
+
+  @property() public showAdvanced!: boolean;
+
+  @property() public route!: Route;
+
   @query("system-log-card") private systemLog?: SystemLogCard;
 
   public connectedCallback() {
@@ -29,10 +39,18 @@ export class HaPanelDevLogs extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div class="content">
-        <system-log-card .hass=${this.hass}></system-log-card>
-        <error-log-card .hass=${this.hass}></error-log-card>
-      </div>
+      <hass-tabs-subpage
+        .hass=${this.hass}
+        .narrow=${this.narrow}
+        back-path="/config"
+        .route=${this.route}
+        .tabs=${configSections.general}
+      >
+        <div class="content">
+          <system-log-card .hass=${this.hass}></system-log-card>
+          <error-log-card .hass=${this.hass}></error-log-card>
+        </div>
+      </hass-tabs-subpage>
     `;
   }
 

src/panels/config/logs/system-log-card.ts

@@ -54,9 +54,7 @@ export class SystemLogCard extends LitElement {
                 ${this._items.length === 0
                   ? html`
                       <div class="card-content">
-                        ${this.hass.localize(
-                          "ui.panel.developer-tools.tabs.logs.no_issues"
-                        )}
+                        ${this.hass.localize("ui.panel.config.logs.no_issues")}
                       </div>
                     `
                   : this._items.map(
@@ -83,7 +81,7 @@ export class SystemLogCard extends LitElement {
                                 ? html`
                                     -
                                     ${this.hass.localize(
-                                      "ui.panel.developer-tools.tabs.logs.multiple_messages",
+                                      "ui.panel.config.logs.multiple_messages",
                                       "time",
                                       formatSystemLogTime(
                                         item.first_occurred,
@@ -106,12 +104,12 @@ export class SystemLogCard extends LitElement {
                     domain="system_log"
                     service="clear"
                     >${this.hass.localize(
-                      "ui.panel.developer-tools.tabs.logs.clear"
+                      "ui.panel.config.logs.clear"
                     )}</ha-call-service-button
                   >
                   <ha-progress-button @click=${this.fetchData}
                     >${this.hass.localize(
-                      "ui.panel.developer-tools.tabs.logs.refresh"
+                      "ui.panel.config.logs.refresh"
                     )}</ha-progress-button
                   >
                 </div>

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

@@ -14,7 +14,7 @@ class DeveloperToolsRouter extends HassRouterPage {
     beforeRender: (page) => {
       if (!page || page === "not_found") {
         // If we can, we are going to restore the last visited page.
-        return this._currentPage ? this._currentPage : "info";
+        return this._currentPage ? this._currentPage : "state";
       }
       return undefined;
     },
@@ -25,14 +25,6 @@ class DeveloperToolsRouter extends HassRouterPage {
         tag: "developer-tools-event",
         load: () => import("./event/developer-tools-event"),
       },
-      info: {
-        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

@@ -62,9 +62,6 @@ class PanelDeveloperTools extends LitElement {
                 "ui.panel.developer-tools.tabs.services.title"
               )}
             </paper-tab>
-            <paper-tab page-name="logs">
-              ${this.hass.localize("ui.panel.developer-tools.tabs.logs.title")}
-            </paper-tab>
             <paper-tab page-name="template">
               ${this.hass.localize(
                 "ui.panel.developer-tools.tabs.templates.title"
@@ -84,9 +81,6 @@ class PanelDeveloperTools extends LitElement {
                   </paper-tab>
                 `
               : ""}
-            <paper-tab page-name="info">
-              ${this.hass.localize("ui.panel.developer-tools.tabs.info.title")}
-            </paper-tab>
           </paper-tabs>
         </app-header>
         <developer-tools-router

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

@@ -1,189 +0,0 @@
-import {
-  css,
-  CSSResult,
-  html,
-  LitElement,
-  property,
-  TemplateResult,
-} from "lit-element";
-import { haStyle } from "../../../resources/styles";
-import { HomeAssistant } from "../../../types";
-import "./integrations-card";
-import "./system-health-card";
-
-const JS_TYPE = __BUILD__;
-const JS_VERSION = __VERSION__;
-
-class HaPanelDevInfo extends LitElement {
-  @property() public hass!: HomeAssistant;
-
-  protected render(): TemplateResult {
-    const hass = this.hass;
-    const customUiList: Array<{ name: string; url: string; version: string }> =
-      (window as any).CUSTOM_UI_LIST || [];
-
-    return html`
-      <div class="about">
-        <p class="version">
-          <a href="https://www.home-assistant.io" target="_blank" rel="noreferrer"
-            ><img
-              src="/static/icons/favicon-192x192.png"
-              height="192"
-              alt="${this.hass.localize(
-                "ui.panel.developer-tools.tabs.info.home_assistant_logo"
-              )}"
-          /></a>
-          <br />
-          <h2>Home Assistant ${hass.connection.haVersion}</h2>
-        </p>
-        <p>
-          ${this.hass.localize(
-            "ui.panel.developer-tools.tabs.info.path_configuration",
-            "path",
-            hass.config.config_dir
-          )}
-        </p>
-        <p class="develop">
-          <a
-            href="https://www.home-assistant.io/developers/credits/"
-            target="_blank" rel="noreferrer"
-          >
-            ${this.hass.localize(
-              "ui.panel.developer-tools.tabs.info.developed_by"
-            )}
-          </a>
-        </p>
-        <p>
-          ${this.hass.localize(
-            "ui.panel.developer-tools.tabs.info.license"
-          )}<br />
-          ${this.hass.localize("ui.panel.developer-tools.tabs.info.source")}
-          <a
-            href="https://github.com/home-assistant/core"
-            target="_blank" rel="noreferrer"
-            >${this.hass.localize(
-              "ui.panel.developer-tools.tabs.info.server"
-            )}</a
-          >
-          &mdash;
-          <a
-            href="https://github.com/home-assistant/frontend"
-            target="_blank" rel="noreferrer"
-            >${this.hass.localize(
-              "ui.panel.developer-tools.tabs.info.frontend"
-            )}</a
-          >
-        </p>
-        <p>
-          ${this.hass.localize(
-            "ui.panel.developer-tools.tabs.info.built_using"
-          )}
-          <a href="https://www.python.org" target="_blank" rel="noreferrer">Python 3</a>,
-          <a href="https://www.polymer-project.org" target="_blank" rel="noreferrer">Polymer</a>,
-          ${this.hass.localize("ui.panel.developer-tools.tabs.info.icons_by")}
-          <a href="https://www.google.com/design/icons/" target="_blank" rel="noreferrer"
-            >Google</a
-          >
-          ${this.hass.localize("ui.common.and")}
-          <a href="https://MaterialDesignIcons.com" target="_blank" rel="noreferrer"
-            >MaterialDesignIcons.com</a
-          >.
-        </p>
-        <p>
-          ${this.hass.localize(
-            "ui.panel.developer-tools.tabs.info.frontend_version",
-            "version",
-            JS_VERSION,
-            "type",
-            JS_TYPE
-          )}
-          ${
-            customUiList.length > 0
-              ? html`
-                  <div>
-                    ${this.hass.localize(
-                      "ui.panel.developer-tools.tabs.info.custom_uis"
-                    )}
-                    ${customUiList.map(
-                      (item) => html`
-                        <div>
-                          <a href="${item.url}" target="_blank"> ${item.name}</a
-                          >: ${item.version}
-                        </div>
-                      `
-                    )}
-                  </div>
-                `
-              : ""
-          }
-        </p>
-      </div>
-      <div class="content">
-        <system-health-card .hass=${this.hass}></system-health-card>
-        <integrations-card .hass=${this.hass}></integrations-card>
-      </div>
-    `;
-  }
-
-  protected firstUpdated(changedProps): void {
-    super.firstUpdated(changedProps);
-
-    // Legacy custom UI can be slow to register, give them time.
-    const customUI = ((window as any).CUSTOM_UI_LIST || []).length;
-    setTimeout(() => {
-      if (((window as any).CUSTOM_UI_LIST || []).length !== customUI.length) {
-        this.requestUpdate();
-      }
-    }, 1000);
-  }
-
-  static get styles(): CSSResult[] {
-    return [
-      haStyle,
-      css`
-        :host {
-          -ms-user-select: initial;
-          -webkit-user-select: initial;
-          -moz-user-select: initial;
-        }
-
-        .content {
-          direction: ltr;
-        }
-
-        .about {
-          text-align: center;
-          line-height: 2em;
-        }
-
-        .version {
-          @apply --paper-font-headline;
-        }
-
-        .develop {
-          @apply --paper-font-subhead;
-        }
-
-        .about a {
-          color: var(--primary-color);
-        }
-
-        system-health-card,
-        integrations-card {
-          display: block;
-          max-width: 600px;
-          margin: 0 auto;
-          padding-bottom: 16px;
-        }
-      `,
-    ];
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "developer-tools-info": HaPanelDevInfo;
-  }
-}
-
-customElements.define("developer-tools-info", HaPanelDevInfo);

src/panels/lovelace/cards/hui-safe-mode-card.ts

@@ -10,7 +10,7 @@ import {
 } from "lit-element";
 import "../../../components/ha-card";
 import { HomeAssistant } from "../../../types";
-import "../../developer-tools/logs/error-log-card";
+import "../../config/logs/error-log-card";
 import { LovelaceCard } from "../types";
 
 @customElement("hui-safe-mode-card")

src/translations/en.json

@@ -609,6 +609,37 @@
             }
           }
         },
+        "info": {
+          "caption": "Info",
+          "description": "Info about your Home Assistant installation",
+          "home_assistant_logo": "Home Assistant logo",
+          "path_configuration": "Path to configuration.yaml: {path}",
+          "developed_by": "Developed by a bunch of awesome people.",
+          "license": "Published under the Apache 2.0 license",
+          "source": "Source:",
+          "server": "server",
+          "frontend": "frontend-ui",
+          "built_using": "Built using",
+          "icons_by": "Icons by",
+          "frontend_version": "Frontend version: {version} - {type}",
+          "custom_uis": "Custom UIs:",
+          "system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
+          "integrations": "Integrations",
+          "documentation": "Documentation",
+          "issues": "Issues"
+        },
+        "logs": {
+          "caption": "Logs",
+          "description": "View the Home Assistant logs",
+          "details": "Log Details ({level})",
+          "load_full_log": "Load Full Home Assistant Log",
+          "loading_log": "Loading error log…",
+          "no_errors": "No errors have been reported.",
+          "no_issues": "There are no new issues!",
+          "clear": "Clear",
+          "refresh": "Refresh",
+          "multiple_messages": "message first occurred at {time} and shows up {counter} times"
+        },
         "lovelace": {
           "caption": "Lovelace Dashboards",
           "description": "Configure your Lovelace Dashboards",
@@ -2236,35 +2267,6 @@
       },
       "developer-tools": {
         "tabs": {
-          "info": {
-            "title": "Info",
-            "home_assistant_logo": "Home Assistant logo",
-            "path_configuration": "Path to configuration.yaml: {path}",
-            "developed_by": "Developed by a bunch of awesome people.",
-            "license": "Published under the Apache 2.0 license",
-            "source": "Source:",
-            "server": "server",
-            "frontend": "frontend-ui",
-            "built_using": "Built using",
-            "icons_by": "Icons by",
-            "frontend_version": "Frontend version: {version} - {type}",
-            "custom_uis": "Custom UIs:",
-            "system_health_error": "System Health component is not loaded. Add 'system_health:' to configuration.yaml",
-            "integrations": "Integrations",
-            "documentation": "Documentation",
-            "issues": "Issues"
-          },
-          "logs": {
-            "title": "Logs",
-            "details": "Log Details ({level})",
-            "load_full_log": "Load Full Home Assistant Log",
-            "loading_log": "Loading error log…",
-            "no_errors": "No errors have been reported.",
-            "no_issues": "There are no new issues!",
-            "clear": "Clear",
-            "refresh": "Refresh",
-            "multiple_messages": "message first occurred at {time} and shows up {counter} times"
-          },
           "events": {
             "title": "Events",
             "description": "Fire an event on the event bus.",