Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #17765

ildar170975 · 2023-08-31T22:57:41Z

Initial idea was posted here: https://community.home-assistant.io/t/dev-tools-template-add-scrollbars/439175

This PR creates independent scrollbars for right & left panel in Dev tools -> Template.
These scrollbars are visible on large screens only (when these panels are "left - right", not "up - down").

P.S. I do not like the current design where panels are not aligned:

instead of

but this will be another my PR (I hope...).

Breaking change

Proposed change

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 #
This PR is related to issue or discussion:
Link to documentation pull request:

Checklist

[x ] The code change is tested and works locally.
[x ] 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

Summary by CodeRabbit

New Features
- Enhanced layout and functionality of the developer tools panel with improved CSS styles.
- Introduced dynamic height adjustments for the code mirror component to improve usability.
- Updated spinner component properties for better visual presentation.
Bug Fixes
- Improved responsiveness and consistency of elements within the horizontal content area.

bramkragten · 2023-10-09T11:57:15Z

If we are going to add scroll bars to both sides, we should make this panel full screen, and make both scrollable containers the same height. Take a look at the automation traces UI for inspiration.

ildar170975 · 2023-10-13T02:03:33Z

and make both scrollable containers the same height

Hi @bramkragten !
Agreed. Will try to propose a solution.

bramkragten · 2023-11-29T09:38:04Z

Hi! Are you planning to continue working on this?

ildar170975 · 2023-11-29T13:24:31Z

Hi, Bram! Absolutely yes. Sorry for a delay, some personal & war-related issues.

bramkragten · 2023-11-29T14:06:54Z

No worries, was just checking!

Thanks!

github-actions · 2024-02-27T16:01:50Z

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.

ildar170975 · 2024-02-27T16:07:47Z

please do not close

github-actions · 2024-07-26T10:01:39Z

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.

ildar170975 · 2024-07-26T15:58:22Z

please do not close

typxxi · 2024-09-02T20:58:03Z

I also wanna see this feature implemented cause it would help me big times.

I have spent over 1 day cause my studio code server has failed big times and did not save really. And when it saved the reboot stopped without telling and went to an older yaml without telling me. Big mess while testing a very complex picture page with a lot of elements in that for each single string of the solar power system.

coderabbitai · 2024-09-05T17:38:12Z

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The changes made to the developer tools panel involve updates to CSS styles that enhance the layout and usability of the interface. New rules were added to control the dimensions and behavior of components like the code mirror and spinner, ensuring a more structured and responsive design without altering any exported or public entity declarations.

Changes

Files	Change Summary
`src/panels/developer-tools/template/developer-tools-template.ts`	Introduced new CSS styles for `.content.horizontal`, modified `.horizontal .edit-pane`, and updated `.render-spinner` for improved layout and usability.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

ildar170975 · 2024-09-05T17:38:19Z

One more try:

silamon · 2024-09-24T17:43:59Z

This suggestion doesn't work with smaller screens. The content jumps out of the card.
Have you experimented with the resize css variable?

ildar170975 · 2024-09-24T19:55:11Z

This suggestion doesn't work with smaller screen

Can you tell me with which screen you faced issue?
I will check it within a few days.

silamon · 2024-09-27T15:52:27Z

Resolution 1400px * 600px should be enough to reproduce.

ildar170975 · 2024-10-02T17:53:40Z

A 2nd scrollbar will be shown if needed. Not the most elegant solution but it works.

wendevlin · 2024-10-14T11:39:32Z

Hi @ildar170975,
Let's finish this PR 🙂

Lets sum it up what we want: on desktop the editor and preview should be scrollable for easier editing.

What is still to do:

why does the parent panes become scrollable?
- You just have to make the editor and preview panels sync size, if the preview pane is higher then the editor it is fine and I would avoid the 2nd scrollbar because it leads to bad UX.

I made some suggestions on how you can implement it.

ildar170975 · 2024-10-15T21:45:22Z

@wendevlin
Hi! Thanks a lot for a feedback.
Not sure that I got your point properly.

Earlier (w/o the last commit) what I achieved was:

The editor's height in horizontal layout has some maximum height (--code-mirror-max-height).
The left pane (containing the editor) has some max-height (to occupy a remaining vertical space):

But there is a case when "listening entities" area causing an overflow:

This I tried to solve by

        .content.horizontal .render-pane {
          overflow-y: auto;
        }

and agree that this 2nd scrollbar is ugly.

Ideas what I considered:

Make the "listening entities" area scrollable: i.e. a height of a "listening entities" area is fixed, and a height of the "results" pane (render-spinner) is as big as possible - to make analysing the "results" easier.
Alternatively: a height of the "listening entities" area is dynamic, and thus a height of the "results" pane (render-spinner) may decrease if needed. This variant I do not like - in some cases the "results" pane may become low.

wendevlin · 2024-10-17T07:08:54Z

@ildar170975 Have you tried out my suggestions?

I think you also have to edit:

.edit-pane {
    direction: var(--direction);
    height: 100%;
}

ildar170975 · 2024-10-17T12:55:43Z

@wendevlin

Have you tried out my suggestions?

If by "suggestions" you mean

then I need some clarifications which I tried to express in my post.
There are no comments in the code...

I tried to add

.edit-pane {
    direction: var(--direction);
    height: 100%;
}

But it probably requires other alterations.

Can you explain me what a purpose of adding direction: var(--direction); to .edit-pane?
Is it about LTR? Imho it is already processed in a parent element.

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

wendevlin · 2024-10-14T11:37:34Z

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

          .render-pane {
            max-width: 100%;


Suggested change

.render-pane {

max-width: 100%;

.content ha-card {

max-width: 100%;

Co-authored-by: Wendelin <[email protected]>

wendevlin · 2024-12-03T08:35:12Z

Hi @ildar170975,
do you want to continue on this?
What do you say to my last comment, would this be ok for you. It is not all on one page, but all important information.

ildar170975 · 2024-12-03T16:38:06Z

@wendevlin
Hi! Thanks for not forgetting!
These months I have a very rare access to PC thanks to the war. Trying my best on Community via mobile.
Definitely will come back to this PR.
Thanks for supporting!

wendevlin · 2024-12-03T18:45:34Z

@wendevlin

Hi! Thanks for not forgetting!

These months I have a very rare access to PC thanks to the war. Trying my best on Community via mobile.

Definitely will come back to this PR.

Thanks for supporting!

Ok thanks for the update. Take care and all the best!

wendevlin

This is a good state now, let's merge 🙂

ildar170975 · 2024-12-10T09:20:29Z

@wendevlin
I honestly have not completed yet, playing with it right now, give me some time please.
Your last suggestion still in progress.

…ft & right panels for large screens (home-assistant#17765) * Update developer-tools-template.ts * Update developer-tools-template.ts * fix overflow * Update src/panels/developer-tools/template/developer-tools-template.ts Co-authored-by: Wendelin <[email protected]> * Update src/panels/developer-tools/template/developer-tools-template.ts Co-authored-by: Wendelin <[email protected]> * Update developer-tools-template.ts * Update src/panels/developer-tools/template/developer-tools-template.ts Co-authored-by: Wendelin <[email protected]> * Update developer-tools-template.ts * prettier * Update developer-tools-template.ts * Update developer-tools-template.ts * prettier * Update developer-tools-template.ts * prettier * prettier * Update developer-tools-template.ts * prettier * prettier * prettier * Update developer-tools-template.ts --------- Co-authored-by: Wendelin <[email protected]>

home-assistant bot added the cla-signed label Aug 31, 2023

ildar170975 mentioned this pull request Sep 25, 2023

Update developer-tools-template.ts: Vertical layout instead of horizo… #16921

Closed

8 tasks

github-actions bot added the stale label Feb 27, 2024

github-actions bot removed the stale label Feb 27, 2024

silamon marked this pull request as draft April 27, 2024 09:10

github-actions bot added the stale label Jul 26, 2024

github-actions bot removed the stale label Jul 26, 2024

ildar170975 marked this pull request as ready for review September 5, 2024 17:37

bramkragten assigned wendevlin Oct 9, 2024

wendevlin requested changes Oct 17, 2024

View reviewed changes

ildar170975 and others added 13 commits November 19, 2024 19:00

Update src/panels/developer-tools/template/developer-tools-template.ts

3ff2c46

Co-authored-by: Wendelin <[email protected]>

Update src/panels/developer-tools/template/developer-tools-template.ts

2683db4

Co-authored-by: Wendelin <[email protected]>

Update developer-tools-template.ts

b95f1e1

Update src/panels/developer-tools/template/developer-tools-template.ts

c6ef326

Co-authored-by: Wendelin <[email protected]>

Update developer-tools-template.ts

1388212

prettier

c14e7f1

Update developer-tools-template.ts

ee71839

Update developer-tools-template.ts

0077c2f

prettier

4721223

Update developer-tools-template.ts

a4dd72e

prettier

5374ff1

prettier

63dd699

Update developer-tools-template.ts

e45c674

ildar170975 force-pushed the dev_tools_templates_scrollbar branch from 5e22cb2 to e45c674 Compare November 19, 2024 16:00

ildar170975 added 4 commits December 10, 2024 07:36

prettier

62c66e2

prettier

036d1e8

prettier

ab3fff8

Update developer-tools-template.ts

32ed18e

wendevlin marked this pull request as ready for review December 10, 2024 09:10

home-assistant bot requested a review from wendevlin December 10, 2024 09:10

wendevlin approved these changes Dec 10, 2024

View reviewed changes

wendevlin merged commit d1c981b into home-assistant:dev Dec 10, 2024
15 checks passed

wendevlin mentioned this pull request Dec 10, 2024

Revert "Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens" #23237

Merged

ildar170975 deleted the dev_tools_templates_scrollbar branch December 10, 2024 10:59

ildar170975 mentioned this pull request Dec 10, 2024

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #23242

Merged

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #17765

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #17765

ildar170975 commented Aug 31, 2023 •

edited by coderabbitai bot

Loading

bramkragten commented Oct 9, 2023

ildar170975 commented Oct 13, 2023

bramkragten commented Nov 29, 2023

ildar170975 commented Nov 29, 2023

bramkragten commented Nov 29, 2023

github-actions bot commented Feb 27, 2024

ildar170975 commented Feb 27, 2024

github-actions bot commented Jul 26, 2024

ildar170975 commented Jul 26, 2024

typxxi commented Sep 2, 2024

coderabbitai bot commented Sep 5, 2024 •

edited

Loading

Review skipped

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

ildar170975 commented Sep 5, 2024 •

edited

Loading

silamon commented Sep 24, 2024

ildar170975 commented Sep 24, 2024

silamon commented Sep 27, 2024

ildar170975 commented Oct 2, 2024 •

edited

Loading

wendevlin commented Oct 14, 2024

ildar170975 commented Oct 15, 2024 •

edited

Loading

wendevlin commented Oct 17, 2024

ildar170975 commented Oct 17, 2024

wendevlin Oct 14, 2024

wendevlin commented Dec 3, 2024

ildar170975 commented Dec 3, 2024

wendevlin commented Dec 3, 2024

wendevlin left a comment

ildar170975 commented Dec 10, 2024 •

edited

Loading

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #17765

Update developer-tools-template.ts: add independent scrollbars for left & right panels for large screens #17765

Conversation

ildar170975 commented Aug 31, 2023 • edited by coderabbitai bot Loading

Breaking change

Proposed change

Type of change

Example configuration

Additional information

Checklist

Summary by CodeRabbit

bramkragten commented Oct 9, 2023

ildar170975 commented Oct 13, 2023

bramkragten commented Nov 29, 2023

ildar170975 commented Nov 29, 2023

bramkragten commented Nov 29, 2023

github-actions bot commented Feb 27, 2024

ildar170975 commented Feb 27, 2024

github-actions bot commented Jul 26, 2024

ildar170975 commented Jul 26, 2024

typxxi commented Sep 2, 2024

coderabbitai bot commented Sep 5, 2024 • edited Loading

Review skipped

Walkthrough

Changes

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

ildar170975 commented Sep 5, 2024 • edited Loading

silamon commented Sep 24, 2024

ildar170975 commented Sep 24, 2024

silamon commented Sep 27, 2024

ildar170975 commented Oct 2, 2024 • edited Loading

wendevlin commented Oct 14, 2024

ildar170975 commented Oct 15, 2024 • edited Loading

wendevlin commented Oct 17, 2024

ildar170975 commented Oct 17, 2024

wendevlin Oct 14, 2024

Choose a reason for hiding this comment

wendevlin commented Dec 3, 2024

ildar170975 commented Dec 3, 2024

wendevlin commented Dec 3, 2024

wendevlin left a comment

Choose a reason for hiding this comment

ildar170975 commented Dec 10, 2024 • edited Loading

ildar170975 commented Aug 31, 2023 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Sep 5, 2024 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

ildar170975 commented Sep 5, 2024 •

edited

Loading

ildar170975 commented Oct 2, 2024 •

edited

Loading

ildar170975 commented Oct 15, 2024 •

edited

Loading

ildar170975 commented Dec 10, 2024 •

edited

Loading