Optimize updateMoreInfo() to use search customElements and dont use DOM scraping

[Mariusthvdb]

trying to optimize the updateMoreInfo() function to be less dependent on the actual DOM, Ive fed GPT with the feedback by HeyImAlex in the community and especially the final bullet on DOM scraping:

I had a quick look at your code. You’re using a very different method to modify the more info panel. You’re basically waiting for a HA expansion tag to open (on any dialog) and then brute force the DOM and see if it’s the attributes on the more info dialog, by walking the DOM with hardcoded elements. That works, but it’s very fragile. It’s basically like webscraping the DOM :slight_smile: As soon as the HA frontend guys change the slightest little thing, it’s gonna break. At a quick glance, comparing the 2022.4 and 2022.11 DOM around this area, it looks very similar. But the slightest change will be an issue.

Another possibility is timing. Your code is very time sensitive. You only try to search the DOM twice, during the first 200 msec after the attributes expand. Then the code gives up. If the expansion takes longer, it’s going to fail.

Things you can do (load the code up on the JS debugger):

Put a breakpoint just below updateMoreInfo, on line 47. Open the attributes, see if it hits. If not, they changed the event.
Change the number of retries on line 51 from 2 to some huge value. See if it works now. If it does, it’s a timing issue.
Break on line 53. Open the attributes and step line by line, following your DOM walking. See where it fails. Doing this you’ll eventually hit the problem.
Do improve the code and make it more robust, directly search customElements for a custom tag close to your target, like for example ha-attributes. Then you can remove pretty much all of the DOM scrapping. In a next step, you could also directly hook into the ha-attributes tag, overriding its prototype. Then you could remove the timing based brute forcing. That’s the way the history explorer card does it.

Fed that into GPT which seems to 'get;' what we need, and responds with the following:

GPT:
replaced the DOM scraping with directly searching for the ha-attribute custom element. However, it's important to note that this code will only hide the ha-attribute element whose key is "hide attributes". It will not hide other ha-attribute elements based on the value of the "hide attributes" element.

To hide other ha-attribute elements based on the value of the "hide attributes" element, you will need to update the code as follows:

Retrieve the value of the "hide attributes" element. This can be done by accessing the value property of the ha-attribute element.
Split the value of the "hide attributes" element by a comma to get an array of attributes to hide.
Iterate over all the ha-attribute elements and check if the key of each element is in the array of attributes to hide. If it is, then hide the element by setting its style.display property to "none".

After some more iterating and unsuccessful code changes it finally suggests code below. However, it still does not hide the attributes in the more-info panel.....

updateMoreInfo(ev) {
  if (!ev.detail.expanded) return;

  const checkElements = () => {
    try {
      const homeAssistantEl = document.querySelector("home-assistant");
      const moreInfoDialogEl = homeAssistantEl.shadowRoot.querySelector("ha-more-info-dialog");
      const dialogEl = moreInfoDialogEl.shadowRoot.querySelector("ha-dialog");
      const contentEl = dialogEl.getElementsByClassName("content")[0];
      const moreInfoInfoEl = contentEl.querySelector("ha-more-info-info");
      const moreInfoContentEl = moreInfoInfoEl.shadowRoot.querySelector("more-info-content");
      const moreInfoEl = moreInfoContentEl.firstElementChild;
      const moreInfoNodeName = moreInfoEl.nodeName.toLowerCase();

      let t;
      if (moreInfoNodeName === "more-info-group") {
        const moreInfoGroupEl = moreInfoEl;
        const moreInfoNestedEl = moreInfoGroupEl.firstElementChild;
        const moreInfoNestedNodeName = moreInfoNestedEl.nodeName.toLowerCase();
        t = moreInfoGroupEl.shadowRoot.querySelector(moreInfoNestedNodeName).shadowRoot.querySelectorAll("ha-attribute");
      } else {
        t = moreInfoEl.shadowRoot.querySelectorAll("ha-attribute");
      }

      if (t.length) {
        let hideAttributesValue = "";
        for (const haAttributeEl of t) {
          const key = haAttributeEl.getAttribute("key");
          if (key.toLowerCase().trim() === "hide attributes") {
            hideAttributesValue = haAttributeEl.getAttribute("value");
          }
        }

        if (hideAttributesValue) {
          const attributesToHide = hideAttributesValue.split(",").map((item) => item.replace("_", " ").trim());
          for (const haAttributeEl of t) {
            const key = haAttributeEl.getAttribute("key");
            if (attributesToHide.includes(key.toLowerCase().trim()) || attributesToHide.includes("all")) {
              haAttributeEl.style.display = "none";
            }
          }
        }
      }
    } catch (err) {
      console.error(err);
    }
  };

  requestAnimationFrame(checkElements);
}

Hope someone can check this and maybe help to figure out how to do it.

[Mariusthvdb]

current GPT pre-release code for this:

  updateMoreInfo(ev) {
    if (!ev.detail.expanded) return;
    let homeAssistantEl;
    let moreInfoDialogEl;
    let dialogEl;
    let contentEl;
    let moreInfoInfoEl;
    let moreInfoContentEl;
    let moreInfoEl;
    let moreInfoNodeName;
    let moreInfoGroupEl;
    let moreInfoNestedEl;
    let moreInfoNestedNodeName;
    let attributesEl;
    let t;
    let e;
    const checkElements = () => {
      homeAssistantEl =
        homeAssistantEl || document.querySelector("home-assistant");
      moreInfoDialogEl =
        moreInfoDialogEl ||
        homeAssistantEl.shadowRoot.querySelector("ha-more-info-dialog");
      dialogEl =
        dialogEl || moreInfoDialogEl.shadowRoot.querySelector("ha-dialog");
      contentEl = contentEl || dialogEl.getElementsByClassName("content")[0];
      moreInfoInfoEl =
        moreInfoInfoEl || contentEl.querySelector("ha-more-info-info");
      moreInfoContentEl =
        moreInfoContentEl ||
        moreInfoInfoEl.shadowRoot.querySelector("more-info-content");
      moreInfoEl = moreInfoEl || moreInfoContentEl.firstElementChild;
      moreInfoNodeName = moreInfoNodeName || moreInfoEl.nodeName.toLowerCase();
      if (moreInfoNodeName === "more-info-group") {
        moreInfoGroupEl = moreInfoGroupEl || moreInfoEl;
        moreInfoNestedEl =
          moreInfoNestedEl || moreInfoGroupEl.firstElementChild;
        moreInfoNestedNodeName =
          moreInfoNestedNodeName || moreInfoNestedEl.nodeName.toLowerCase();
        attributesEl =
          attributesEl ||
          moreInfoGroupEl.shadowRoot
            .querySelector(moreInfoNestedNodeName)
            .shadowRoot.querySelector("ha-attributes").shadowRoot;
      } else {
        attributesEl =
          attributesEl ||
          moreInfoEl.shadowRoot.querySelector("ha-attributes").shadowRoot;
      }
      t = attributesEl ? attributesEl.querySelectorAll(".data-entry") : null;
      if (t && t.length) {
        e = [];
        for (const entry of t) {
          const keyEl = entry.getElementsByClassName("key")[0];
          if (keyEl.innerText.toLowerCase().trim() === "hide attributes") {
            e = keyEl.parentNode
              .getElementsByClassName("value")[0]
              .innerText.split(",")
              .map((item) => item.replace("_", " ").trim());
            e.push("hide attributes");
          }
        }
        for (const entry of t) {
          const keyEl = entry.getElementsByClassName("key")[0];
          if (
            e.includes(keyEl.innerText.toLowerCase().trim()) ||
            e.includes("all")
          )
            keyEl.parentNode.style.display = "none";
        }
      } else {
        // elements are not available yet, schedule another check
        requestAnimationFrame(checkElements);
      }
    };
    requestAnimationFrame(checkElements);
  }

still not using the getElementsBy* methods to the max, but the above code should be an improvement.

this is why:

One thing that might help improve the efficiency of this code is to cache the DOM element references that are being selected multiple times, rather than querying for them each time they are needed. This could be especially useful if the DOM structure is large and querying for elements is expensive.

It's also worth noting that the checkElements function is scheduled to run repeatedly using requestAnimationFrame until all the elements it needs are available in the DOM. This could potentially be inefficient if the elements take a long time to become available, or if they never become available. You might want to consider setting a maximum number of attempts or a timeout to prevent the function from running indefinitely in these cases.

general suggestions by GPT summarized:

There are a few reasons why you might choose to use getElementsBy* methods (such as getElementsByClassName or getElementsByTagName) to select elements in the DOM, rather than traversing the DOM manually:

Speed: The getElementsBy* methods are generally faster than manually traversing the DOM, especially for large DOM trees. This is because the getElementsBy* methods use native browser APIs to search for elements, which are generally faster than JavaScript loops.
Ease of use: The getElementsBy* methods are easy to use and require minimal code to select elements in the DOM. This can help reduce the amount of code you need to write and make your code more readable.
Live collections: The getElementsBy* methods return "live" HTML collections, which means that the collection is automatically updated when the DOM changes. This can be useful if you need to dynamically update a selection of elements based on changes to the DOM.
That being said, there are also cases where it may be more appropriate to manually traverse the DOM using techniques like querySelector or parentNode.children. For example, if you only need to select a small number of elements or if you need to apply more complex logic to select the elements, manually traversing the DOM may be a more suitable option.

[Mariusthvdb]

closing this as we now have custom_more_info and custom_attributes