mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Cache used icons in memory, use inline icon for dev-tools (#5927)
This commit is contained in:
parent
16154e9d8b
commit
bbc16b6bc8
@ -28,6 +28,8 @@ checkCacheVersion();
|
|||||||
|
|
||||||
const debouncedWriteCache = debounce(() => writeCache(chunks), 2000);
|
const debouncedWriteCache = debounce(() => writeCache(chunks), 2000);
|
||||||
|
|
||||||
|
const cachedIcons: { [key: string]: string } = {};
|
||||||
|
|
||||||
@customElement("ha-icon")
|
@customElement("ha-icon")
|
||||||
export class HaIcon extends LitElement {
|
export class HaIcon extends LitElement {
|
||||||
@property() public icon?: string;
|
@property() public icon?: string;
|
||||||
@ -83,9 +85,15 @@ export class HaIcon extends LitElement {
|
|||||||
|
|
||||||
this._legacy = false;
|
this._legacy = false;
|
||||||
|
|
||||||
const cachedPath: string = await getIcon(iconName);
|
if (iconName in cachedIcons) {
|
||||||
if (cachedPath) {
|
this._path = cachedIcons[iconName];
|
||||||
this._path = cachedPath;
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const databaseIcon: string = await getIcon(iconName);
|
||||||
|
if (databaseIcon) {
|
||||||
|
this._path = databaseIcon;
|
||||||
|
cachedIcons[iconName] = databaseIcon;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const chunk = findIconChunk(iconName);
|
const chunk = findIconChunk(iconName);
|
||||||
@ -111,6 +119,7 @@ export class HaIcon extends LitElement {
|
|||||||
private async _setPath(promise: Promise<Icons>, iconName: string) {
|
private async _setPath(promise: Promise<Icons>, iconName: string) {
|
||||||
const iconPack = await promise;
|
const iconPack = await promise;
|
||||||
this._path = iconPack[iconName];
|
this._path = iconPack[iconName];
|
||||||
|
cachedIcons[iconName] = iconPack[iconName];
|
||||||
}
|
}
|
||||||
|
|
||||||
static get styles(): CSSResult {
|
static get styles(): CSSResult {
|
||||||
|
@ -53,7 +53,7 @@ class HaMarkdown extends UpdatingElement {
|
|||||||
node.rel = "noreferrer noopener";
|
node.rel = "noreferrer noopener";
|
||||||
|
|
||||||
// Fire a resize event when images loaded to notify content resized
|
// Fire a resize event when images loaded to notify content resized
|
||||||
} else if (node) {
|
} else if (node instanceof HTMLImageElement) {
|
||||||
node.addEventListener("load", this._resize);
|
node.addEventListener("load", this._resize);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,5 @@
|
|||||||
import "@material/mwc-button";
|
import "@material/mwc-button";
|
||||||
|
import "@material/mwc-icon-button";
|
||||||
import "@polymer/paper-checkbox/paper-checkbox";
|
import "@polymer/paper-checkbox/paper-checkbox";
|
||||||
import "@polymer/paper-input/paper-input";
|
import "@polymer/paper-input/paper-input";
|
||||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
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 { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||||
import { safeDump, safeLoad } from "js-yaml";
|
import { safeDump, safeLoad } from "js-yaml";
|
||||||
import "../../../components/entity/ha-entity-picker";
|
import "../../../components/entity/ha-entity-picker";
|
||||||
|
import "../../../components/ha-svg-icon";
|
||||||
import "../../../components/ha-code-editor";
|
import "../../../components/ha-code-editor";
|
||||||
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
import { showAlertDialog } from "../../../dialogs/generic/show-dialog-box";
|
||||||
import { EventsMixin } from "../../../mixins/events-mixin";
|
import { EventsMixin } from "../../../mixins/events-mixin";
|
||||||
import LocalizeMixin from "../../../mixins/localize-mixin";
|
import LocalizeMixin from "../../../mixins/localize-mixin";
|
||||||
import "../../../resources/ha-style";
|
import "../../../resources/ha-style";
|
||||||
|
import { mdiInformationOutline } from "@mdi/js";
|
||||||
|
|
||||||
const ERROR_SENTINEL = {};
|
const ERROR_SENTINEL = {};
|
||||||
/*
|
/*
|
||||||
@ -56,8 +59,9 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
.entities td {
|
.entities td {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
}
|
}
|
||||||
.entities ha-icon-button {
|
.entities mwc-icon-button {
|
||||||
--mdc-icon-button-size: 24px;
|
--mdc-icon-button-size: 24px;
|
||||||
|
--mdc-icon-size: 20px;
|
||||||
}
|
}
|
||||||
.entities td:nth-child(3) {
|
.entities td:nth-child(3) {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
@ -149,13 +153,12 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
<template is="dom-repeat" items="[[_entities]]" as="entity">
|
<template is="dom-repeat" items="[[_entities]]" as="entity">
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<ha-icon-button
|
<mwc-icon-button
|
||||||
on-click="entityMoreInfo"
|
on-click="entityMoreInfo"
|
||||||
icon="hass:information-outline"
|
|
||||||
alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
|
alt="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
|
||||||
title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
|
title="[[localize('ui.panel.developer-tools.tabs.states.more_info')]]"
|
||||||
>
|
><ha-svg-icon path="[[informationOutlineIcon()]]"></ha-svg-icon>
|
||||||
</ha-icon-button>
|
</mwc-icon-button>
|
||||||
<a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
|
<a href="#" on-click="entitySelected">[[entity.entity_id]]</a>
|
||||||
</td>
|
</td>
|
||||||
<td>[[entity.state]]</td>
|
<td>[[entity.state]]</td>
|
||||||
@ -272,6 +275,10 @@ class HaPanelDevState extends EventsMixin(LocalizeMixin(PolymerElement)) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
informationOutlineIcon() {
|
||||||
|
return mdiInformationOutline;
|
||||||
|
}
|
||||||
|
|
||||||
computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) {
|
computeEntities(hass, _entityFilter, _stateFilter, _attributeFilter) {
|
||||||
return Object.keys(hass.states)
|
return Object.keys(hass.states)
|
||||||
.map(function (key) {
|
.map(function (key) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user