Make "Events" dev tools use screen space better

[spacegaier]

Breaking change

Proposed change

Currently we wasting quite some screen space in the dev tools. This PR optimizes it and makes the template tab a bit more structured by using <ha-card>.

Events before:

Events after:

---

The following proposed changes have been reverted again:

Templates before:

Templates after:

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

Additional information

• This PR fixes or closes issue: fixes Developer Tools: make service data textarea as wide as the page itself #7386
• This PR is related to issue:
• 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

[bramkragten]

I don't think the entity picker and service picker should be full width. Same for the event name.

And we should probably set a max-width, and center it. Is it workable on a big, big screen?

[spacegaier]

I don't think the entity picker and service picker should be full width. Same for the event name.

And we should probably set a max-width, and center it. Is it workable on a big, big screen?

On big screens, it just grows.

You want to center that? Do we have a common HA max width I should use to limit the growing?

[bramkragten]

We have a max for Lovelace, should probably use that:

[zsarnett]

Adding everything to a Ha-card 🤮 IMO cards aren't mean for everything

[spacegaier]

Adding everything to a Ha-card 🤮 IMO cards aren't mean for everything

They provide a good way to structure the screens / layouts. What would you propose we use instead?

[zsarnett]

The page :) like other webpages do :)

Im not totally against using them here. I just feel like HA trys to use Cards in too many places. I mean this is a bit different but checkout the homeassistant website home page... Somethings just aren't supposed to be in cards

[spacegaier]

But other webpages still have clear visual structure, if not by using cards / blocks (background colors), then lines / borders to structure the view port. I am not hell-bent on using cards, but if I compare the before/after of the template tab, I think it is an improvement.

And on purpose I did not move the template listeners information or on the event tab the available event list into ha-cards, since now the other elements around provide enough structure IMO.

[spacegaier]

We have a max for Lovelace, should probably use that:

@bramkragten Are you sure there is a fixed max width for the content overall? I can see that each column has a max-width of 500px but I cannot see an overall restriction. The <hui-view> sets width to 100%. I was able to add new cards until there was not enough horizontal space anymore for a new one, so they were added below vertically then.

How do you propose we limit the size? Set a fixed limit at 1500px and leave its position as-is?

[bramkragten]

Yes, set a fixed limit. I personally like it to be centered when it reached the max.

Also, I think we should remove the card from the template dev tools and the service description. It really doesn't add anything and I don't think it looks better.

[spacegaier]

Yes, set a fixed limit. I personally like it to be centered when it reached the max.

Also, I think we should remove the card from the template dev tools and the service description. It really doesn't add anything and I don't think it looks better.

Any proposal for the max width I should set?

I also quite strongly think that using cards here really helps with the visual appearance. Previously the template view just looked like a collection of "thrown" together elements. Now it's a much clearer two column look: Left side input, right side output.

For the services: There is now a clear visual block that contains the details about the service and the related "Fill example data" button. The constant full-size width of the card also helps the page's consistency independent of how narrow the service parameter table itself is.

So overall I feel quite strongly about those proposed changes 😄 . If it turns out I am the only one with that opinion, I could "probably 😉" also live with putting a full width horizontal line below the "Call service" button to at least have some sort of visual guidelines between input area on top and information area below.

Update: The card for the "Services" is actually already in the dev branch through another PR (#7364). So that part is no longer up for this discussion 😆 .

[github-actions]

There hasn't been any activity on this pull request recently. This pull request has been automatically marked as stale because of that and will be closed if no further activity occurs within 7 days.
Thank you for your contributions.

[spacegaier]

Will tackle that soon, by splitting into smaller PRs so that the non controversial parts can be merged.

[bramkragten]

fyi, I'm rewriting the service dev page soon 😄

[bramkragten]

Can we extract the events part of this PR in a separate PR?

[spacegaier]

Yes, it is somewhere on my todo list :)