🔹 Browser_mod - turn your browser into a controllable device, and a media_player

[arganto]

On every browser and every device. Windows and Apple. Full heigh. Only below 500px is is moving to fullscreen with same height but overflow and scrollbars

Can you point me to the dom nodes where (in your working case) the heigh and overflow or scroll behavior is set, so we can compare?

[arganto]

Got it. From which cache ever this was still applied from my theme if I used the standard theme, it is related to the centering

Here I used your example and suggestions form the docs to set the margin top auto, but this is leading to the behavior here.

[dcapslock (Darryn Capes-Davis)]

@arganto

Got it. From which cache ever this was still applied from my theme if I used the standard theme, it is related to the centering

OK. So that styling does not work for newer dialogs with extended content.

Will check what may work. With the changes in Home Assistant there may be no option.

[dcapslock (Darryn Capes-Davis)]

@arganto

Here I used your example and suggestions form the docs to set the margin top auto, but this is leading to the behavior here.

There is also --popup-max-height that you can define.

Default applied by Browser Mod is --popup-max-height: calc(100svh - var(--dialog-surface-margin-top) - var(--ha-space-2) - var(--safe-area-inset-bottom, 0px)) which will break when using --dialog-surface-margin-top: auto so this could be a bug to fix but not sure how given that if --dialog-surface-margin-top is a size then it needs to part of the default max-height calculation and not sure CSS can deal with a var being auto in a calc.

Anyhow, you have a workaround, that is, to specify a desired --popup-max-height if you set --dialog-surface-margin-top: auto. Saying that, if you know your dialog will be large then you would not set -dialog-surface-margin-top: auto. If you believe this needs further addressing please raise an issue on GitHub. Thank you.

[arganto]

@dcapslock

Anyhow, you have a workaround, that is, to specify a desired --popup-max-height if you set --dialog-surface-margin-top: auto.

Yes. Already using that. Mentioned it in the original question above as well. Only wanted to double check, if it is really needed now and I don’t miss an obvious other thing. Fine for me in this cases.

[dcapslock (Darryn Capes-Davis)]

@arganto

Yes. Already using that. Mentioned it in the original question above as well

OK, I did not see --popup-max-height mentioned anywhere in code shared or in your example. Glad you have a way forward. The issue notes I wrote are not exhaustive nor is any styling documentation. As I have found with working on Browser Mod and UIX, its impossible to cover all scanerios, so I don’t try, rather just document common scenarios when needed, hence UIX Guides for UIX.

[arganto]

Completely fine.

Was here.

@arganto

And secondly, my heigh popups now running out of the screen on top and button of the screen. And now my auto high size anymore. Anything I have overread? Do I really always set --popup-max-height and no standard is there anymore?

Of course it is not in the code, because then the reported problem wouldnt be there.

Regarding the lag for the other stytling of the popup, here one example.

[dcapslock (Darryn Capes-Davis)]

@arganto

Do I really always set --popup-max-height and no standard is there anymore?

Sorry, missed that with the mix of both issues (margin plus height).

@arganto

because then the reported problem wouldnt be there.

Got confusing though as you still had styling being applied when you said no themes. Anyhow we got there in the end.

@arganto

Regarding the lag for the other stytling of the popup, here one example.

Doubt anything can be done. You may need to live with it.

[Mariusthvdb (Marius)]

using a browser_mod.javascript service hass-browser_mod/documentation/services.md at 7cb63451d15970f63e1cdd14c535af928a1c5dea · thomasloven/hass-browser_mod · GitHub
I am not sure how to do what I ‘need’…

please help me out if you can. I basically want to refresh the Yaml of the frontend, like the top right menubar item does when clicking Refresh.

In have a toast created in an automation with this action:

automation:

  - id: alert_yaml_error
    max_exceeded: silent
    triggers:
      trigger: event
      event_type: system_log_event
      event_data:
        name: annotatedyaml.loader
      variables:
        message: >
          {{trigger.event.data.message}}
        name: >
          {{trigger.event.data.name}}
#     conditions:
#       condition: template
#       value_template: >
#         {{'uix_foundries' in trigger.event.data.message}}
    actions:
#       - variables:
#           message: >
#             {{trigger.event.data.message}}
#           name: '{{trigger.event.data.name}}'
      - action: persistent_notification.create
        data:
          title: '{{name}}'
          message: '{{message}}'
      - action: browser_mod.javascript
        data:
          code: |
            document.querySelector("home-assistant").dispatchEvent(
              new CustomEvent("hass-notification", {
                detail: {
                  message: "{{ (name ~ ': ' ~ message) | replace('"', '\\"') }}",
                  duration: -1,
                  dismissable: true,
                  action: { text: "Reload Yaml", action: lovelace_reload }
                },
                bubbles: true,
                composed: true
              })
            );

and the Toast seems to show alright

However, if I click that button before having fixed the yaml, I expect the toast to popup once more, and in this case, it disappears.

as you can see I also create the persistent notifications for the same trigger, and that also isnt updated when I click the Reload Yaml. It is updated when clicking Refresh in the menu bar item

so, is this not the right command, or should I use different syntax?

maybe the command isnt even functional anymore because of Frontend changes and no more using Lovelace…

in which case it should probably not even be listed in BM documentation anymore

but, first checking if this is a user error, so, any help appreciated

edit

stock Dashboard does have this button

so if I could execute the same action of that button Id be happy.
is this it? frontend/src/panels/lovelace/ha-panel-lovelace.ts at b0b2d842874ce1e5193e8562f9cda2a3a344cb5d · home-assistant/frontend · GitHub

[dcapslock (Darryn Capes-Davis)]

This won’t work as once the dashboard is in error it does not have lovelace root for the lovelace_reload function to work. If the dashboard is not in error then lovelace_reload works (e.g. I tested having working dashbaord, introduce error in my dashboard, simulate your toast with lovelace_reload as action, then it works to refreh and get error showing).

So as you suggest, you will need to find the event/function to cause a reload in this case.

[Mariusthvdb (Marius)]

I did find location.reload() and that actually did something… it created an endless loop and I couldnt stop, so was glad to have had another browser open to reload automations and deleting that…

odd I cant find the action under Reload UI (Herlaad UI) on that button, (Inspector doesnt help me there, or rephrase, I dont know how to read it) because that is exactly what does work. Click it, and the toast returns immediately

@dcapslock

then lovelace_reload works

a that is good to know, it is not deprecated, and not a remnant of the past to be taken out.

[dcapslock (Darryn Capes-Davis)]

@Mariusthvdb

I did find location.reload()

Could work but using with parens means you are always calling the function, not passing reference to be called, hence your endless loop.

[Mariusthvdb (Marius)]

and without () it does nothing

action: { text: "Reload Yaml", action: location.reload }

and back to what I had:

      - action: browser_mod.javascript
        data:
          code: |
            document.querySelector("home-assistant").dispatchEvent(
              new CustomEvent("hass-notification", {
                detail: {
                  message: "{{ (name ~ ': ' ~ message) | replace('"', '\\"') }}",
                  duration: -1,
                  dismissable: true,
                  /*action: { text: "Reload Yaml", action: lovelace_reload }*/
                },
                bubbles: true,
                composed: true
              })
            );

if I leave the toast (which remains forever whiteout clicking the X) and Refresh (menubar Refresh item) the toast clears, (while the pers notification adds) .

maybe one of the parameters causes this behavior, but I would have expected it to always produce the toast, even if it already exists

[MarkDayb]

oh nice, I’ve been using browser_mod for a while now and it’s super handy for sending quick TTS alerts around the house. especially when I’m keeping an eye on solar stats and need a heads up if something’s off. love the idea of the camera pop-up too, might try that next!

[dcapslock (Darryn Capes-Davis)]

@Mariusthvdb

if I leave the toast (which remains forever whiteout clicking the X) and Refresh (menubar Refresh item) the toast clears, (while the pers notification adds) .

maybe one of the parameters causes this behavior, but I would have expected it to always produce the toast, even if it already exists

Depends on timing of reload - anyhow, I won’t focus on this but will look for best refresh action.

@Mariusthvdb

action: { text: "Reload Yaml", action: location.reload }

If you want to use general window.location its best to just set to itself, and do so in an anonymous arrow function.

action: { text: "Reload Yaml", action: () => window.location = window.location }

@dcapslock

So as you suggest, you will need to find the event/function to cause a reload in this case

Checked and when the dashboard is in error, the button action is a private function, so no way to get that. You can still fire the ‘config-fresh’ to the right element, but not via BM directly as lovelace_reload works on hui-root not on ha-panel-lovelace. So apart from using browser_mod.javascript the request is a bit beyond Browser Mod. Happy to keep helping in PM.

[dcapslock (Darryn Capes-Davis)]

Browser Mod 2.13.0-beta.1 available

Browser Mod 2.13.0-beta.1 now available which has a new Sync Browser ID to login session option in the Browser Mod panel for the Browser.

If you have the issue of Safari clearing out localStorage of the session in Companion App, this new feature will mean that your Browser ID will be recalled as long as the login session in the Companion App has not changed, which is usually the case (it will change if you log out).

Hopefully this will clear up what has been a bug bear for iOS users.

[dcapslock (Darryn Capes-Davis)]

Browser Mod 2.13.0

DEFAULT DASHBOARDS ARE BACK

Browser Mod 2.13.0 brings back Default Dashboards to Browser Mod. This has been able now that Sync user session allows for the integration to know of the Browser early to be able to patch in Frontend user_data and system_data for specific Browser ID as well as User or System, allowing for the 3 levels as per Browser Mod Frontend settings levels.

It would be great to have some beta testers. Check the doco links above and let me know if you have any questions.