Save attribute checkbox state

[KTibow]

Proposed change

Save whether or not the attribute checkbox is checked in localStorage. This can help if you have a lot of entities, so you don't have to wait forever to load the attributes.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

# Go into the states tab of devtools

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion: Add possibility to turn off Attributes checkbox in developer-tools/state by default #7537
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[spacegaier]

Two points:

1. I propose to rename the storage parameter, so that the area/topic comes first: "devToolsShowAttributes". That would more closely match existing stored parameters such as "sidebarPanelOrder".
2. There is already coding in HA how to handle local storage parameters. That should perhaps be reused. See

   frontend/src/components/ha-sidebar.ts

   Lines 191 to 194 in c196549

   	@LocalStorage("sidebarPanelOrder", true, {
   	attribute: false,
   	})
   	private _panelOrder: string[] = [];

[KTibow]

@spacegaier Could you point me how to use the localStorage decorator? I skimmed through the code, but I couldn't figure out the parameter order.

[spacegaier]

@spacegaier Could you point me how to use the localStorage decorator? I skimmed through the code, but I couldn't figure out the parameter order.

What do you mean by "property order"? Never used local storage in HA myself.

[KTibow]

I mean how to use it. I can see that the first thing you pass to @LocalStorage is the name of the property, but I don't know what everything else is.

[spacegaier]

It's all defined in the HA coding:

frontend/src/common/decorators/local-storage.ts

Lines 85 to 89 in c196549

	export const LocalStorage = (
	storageKey?: string,
	property?: boolean,
	propertyOptions?: PropertyDeclaration
	): any => {

Second parameter seems to indicate whether it's a property and if it is, then the value is automatically read from it by the looks of it. So it is basically subscribing to value changes (changes introduced here #6776).

[bramkragten]

This is not a typescript file and not a Lit element, so you cant use that decorator without converting it first.