From bbc16b6bc85960a33a6ca10434d29c959ac5b829 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 19 May 2020 13:58:08 +0200 Subject: [PATCH] Cache used icons in memory, use inline icon for dev-tools (#5927) --- src/components/ha-icon.ts | 15 ++++++++++++--- src/components/ha-markdown.ts | 2 +- .../state/developer-tools-state.js | 17 ++++++++++++----- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/ha-icon.ts b/src/components/ha-icon.ts index 23f68b1fb6..7f1bfc57c9 100644 --- a/src/components/ha-icon.ts +++ b/src/components/ha-icon.ts @@ -28,6 +28,8 @@ checkCacheVersion(); const debouncedWriteCache = debounce(() => writeCache(chunks), 2000); +const cachedIcons: { [key: string]: string } = {}; + @customElement("ha-icon") export class HaIcon extends LitElement { @property() public icon?: string; @@ -83,9 +85,15 @@ export class HaIcon extends LitElement { this._legacy = false; - const cachedPath: string = await getIcon(iconName); - if (cachedPath) { - this._path = cachedPath; + if (iconName in cachedIcons) { + this._path = cachedIcons[iconName]; + return; + } + + const databaseIcon: string = await getIcon(iconName); + if (databaseIcon) { + this._path = databaseIcon; + cachedIcons[iconName] = databaseIcon; return; } const chunk = findIconChunk(iconName); @@ -111,6 +119,7 @@ export class HaIcon extends LitElement { private async _setPath(promise: Promise, iconName: string) { const iconPack = await promise; this._path = iconPack[iconName]; + cachedIcons[iconName] = iconPack[iconName]; } static get styles(): CSSResult { diff --git a/src/components/ha-markdown.ts b/src/components/ha-markdown.ts index b5ba2e6697..162a344daf 100644 --- a/src/components/ha-markdown.ts +++ b/src/components/ha-markdown.ts @@ -53,7 +53,7 @@ class HaMarkdown extends UpdatingElement { node.rel = "noreferrer noopener"; // Fire a resize event when images loaded to notify content resized - } else if (node) { + } else if (node instanceof HTMLImageElement) { node.addEventListener("load", this._resize); } } diff --git a/src/panels/developer-tools/state/developer-tools-state.js b/src/panels/developer-tools/state/developer-tools-state.js index f1d42046e1..76fecb5d97 100644 --- a/src/panels/developer-tools/state/developer-tools-state.js +++ b/src/panels/developer-tools/state/developer-tools-state.js @@ -1,4 +1,5 @@ import "@material/mwc-button"; +import "@material/mwc-icon-button"; import "@polymer/paper-checkbox/paper-checkbox"; import "@polymer/paper-input/paper-input"; import { html } from "@polymer/polymer/lib/utils/html-tag"; @@ -6,11 +7,13 @@ import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; import { safeDump, safeLoad } from "js-yaml"; import "../../../components/entity/ha-entity-picker"; +import "../../../components/ha-svg-icon"; import "../../../components/ha-code-editor"; import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box"; import { EventsMixin } from "../../../mixins/events-mixin"; import LocalizeMixin from "../../../mixins/localize-mixin"; import "../../../resources/ha-style"; +import { mdiInformationOutline } from "@mdi/js"; const ERROR_SENTINEL = {}; /* @@ -56,8 +59,9 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) { .entities td { padding: 4px; } - .entities ha-icon-button { + .entities mwc-icon-button { --mdc-icon-button-size: 24px; + --mdc-icon-size: 20px; } .entities td:nth-child(3) { white-space: pre-wrap; @@ -149,13 +153,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {