Configuration tab on Homeassistant broken with 0.90.0

[vajonam]

Checklist

• [x] I'm running the latest version of CustomUI (Update guide) or using a specific release that is not marked as "Broken".
• [x] I tried to force-refresh (Ctrl+Shift+R / Ctrl+F5) the browser
• [x] (Optional, but recommended) I'm using Chrome or tried to reproduce the feature on Chrome.

Browser + Version: Version 72.0.3626.121 (Official Build) (64-bit)

CustomUI version: 20190113

Home Assistant release (hass --version): 0.90.0

Problem-relevant configuration.yaml entries:

customizer:
  custom_ui: local

Problem-relevant Home Assistant log entries:

None 

Any errors from browser Javascript console:

None

The issue is the "Configuration" tab is not usable. Navigating to Configuration and then going into integrations or general, results in the new pane being loaded below, instead of poping over and so overall not very usable at the moment.

[rccoleman]

I'm seeing the same failure and also tracked it down to custom_ui before seeing that @vajonam is way ahead of me :) The menu item that custom_ui adds to the end of the menu has always been flaky for me, sometimes showing up and usually not. I did manage to catch an error in the JS during one of the failures and it was in this clause here starting at line 349 in hooks.js:

    } else {
      const root = haPanelConfig.shadowRoot || haPanelConfig;
      if (root.lastElementChild.tagName !== 'HA-CONFIG-CUSTOM-UI') {
        const haConfigCustomUi = getHaConfigCustomUi();
        root.appendChild(haConfigCustomUi);
      }
      const visible = window.location.pathname.startsWith('/config/customui');
      root.lastElementChild.style.display = visible ? '' : 'none';
    }

This line was failing because it claimed that tagName was undefined, if I remember correctly.

if (root.lastElementChild.tagName !== 'HA-CONFIG-CUSTOM-UI') {

Here's what I see in home-assistant.log when it happens:

2019-03-21 17:36:09 ERROR (MainThread) [frontend.js.latest.201903200] http://192.168.1.159:8123/local/custom_ui/state-card-custom-ui.html:27:9151 Uncaught TypeError: Cannot read property 'tagName' of null

I don't really understand the purpose of that menu item or the device name that you can set, so my preference would just be to get rid of it.

This problem just showed up in version 0.90.0, and happens on every browser and OS that I have available (Safari, Chrome, Firefox on both Windows and Mac).

[balloob]

So one thing that has changed in this release is that the pages that do routing, <partial-panel-resolver> and <ha-panel-config> no longer contain shadow DOM and will recreate elements when switching pages. Both are now powered by https://github.com/home-assistant/home-assistant-polymer/blob/dev/src/layouts/hass-router-page.ts

[rccoleman]

I commented out the code that adds the new item in the config panel and rebuilt the custom_ui package:

  runHooks() {
    window.customUI.fixGroupTitles();
    // window.customUI.updateConfigPanel();
    window.customUI.installHaFormCustomize();
  },

After installing the new html files, restarting, and force-reloading, I have all my colors in Lovelace and the config panel navigation appears to be working. The only loss is the ability to set the "device name", whose purpose I still don't understand. In any case, if anyone is interested in the hacked html files, let me know.

Edit: Here's a fork that should work: https://github.com/rccoleman/home-assistant-custom-ui. I updated the text in the info screen to say "CustomUI-fix-nav" so you tell it's different from the real version.

[andrey-git]

Fixed in 2019-03-24

@rccoleman the device name is for templating: You can have different attributes (i.e. icon color or anything else) on different devices.

[rccoleman]

Thanks very much for fixing it (and icon_color)! I can confirm that the config panel navigation is working now, and I'll put a note on my fork to go back to the released version.

I'm still not able to wrap my brain around how to use the device name in templating. Do you have an example?

[andrey-git]

homeassistant:
  customize_glob:
    "*.*":
      custom_ui_state_card: state-card-custom-ui  
    device_tracker.joe_phone:
      friendly_name: Joe phone
      device:
        joe_mobile:
          friendly_name: My phone

This way Joe will see My phone and everyone else will see Joe phone

[rccoleman]

Thanks, I think I see. Part of my confusion was that I was viewing it as a single, global name, but it sounds like you're envisioning a multi-user scenario where each user sets their own device name based on their own login. Is that correct?

[andrey-git]

This functionality predates users. I don't know if you can achieve the same effect with users. The device name is saved locally on client (in localstorage) and not on the server. This way you can hide some devices on a wall-mounted tablet for example.

[rccoleman]

Ah, I see. I log into my account from many devices, including my phone, and probably more now that remote access is enabled, so I don't think that would work very well for me. In any case, thanks for explaining.

[Codename-11]

@rccoleman - Your fix states that the latest version of Custom-UI fixed this issue. I am running the latest version of Custom-Ui (2019-03-24), however I am still experiencing the issue. I am running the latest version of Hassio on a Raspberry Pi 3. Any thoughts? I'd appreciate it. Thanks!

[rccoleman]

Did you force-reload those pages or clear your cache? It’s definitely fixed in 0324.

[Codename-11]

I had, but only for a month period. I suppose the cached data from prior still persisted. Clearing it completely solved the issue. Thanks! Sorry for the trouble.

[rccoleman]

Glad it worked. You probably could have just force-reloaded it to ignore the cache, but clearing it entirely will accomplish the same thing.