Dealing with leftover separators when hiding menu items

[Stevoisiak]

When filtering items in a menu that has separators between sections, is there a best practice for avoiding extra separators being left behind near empty sections?

For example, take this dropdown menu that appears on various GitBook powered sites:

^{Screenshot from https://gitbook.com/docs}

When I filter the AI buttons, extra separators are left behind.

##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M12.8916 1.06265C12.921 0.979101 13.0392"])
##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M475.3 209.6c11.6-34.9 7.6-73.1-11-104.8-27"])
##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M100.4 340.5l100.7-56.5 1.7-4.9-1.7-2.7-4.9"])
##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M334.7 50c-21.4-20.9-55.6-20.9-77 0L52.3"])
##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M363.1 508.5c8.1 3.1 17.3 2.9 25.4-1l105.4"])

My current solution is to individually target the separators that need removing:

##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M12.8916 1.06265C12.921 0.979101 13.0392"]) + [role="separator"]
##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M475.3 209.6c11.6-34.9 7.6-73.1-11-104.8-27"]) + [role="separator"]
##[data-testid="dropdown-menu"] > [role="menuitem"]:has(path[d^="M100.4 340.5l100.7-56.5 1.7-4.9-1.7-2.7-4.9"]) + [role="separator"]

However, this is fragile and can break for menus where the contents aren't always the same. For example, the above filters work on https://gitbook.com/docs where there's an "edit on github" section at the end, but leave an extra separator on https://help.quantower.com/quantower where that section is missing. Similarly, sites like Google Docs vary the menu options depending on the user or the type of document being opened.

One idea I couldn't figure out how to implement was using filters that changed based on whether other items were hidden. So for example, check all non hidden items and have 3 rules: If 2 dividers are next to each other, hide one of them, hide dividers at the end of the list with no items afterwards, and hide dividers at the start of the list with no items before them. While I could accomplish that using :remove() , that method is slower than CSS hiding, and can sometimes have unexpected effects when navigating menus with keyboard arrows.

Is there a better way to handle excess separators in menus after hiding menu items?

[gorhill]

that appears on various GitBook powered sites

As usual, without a specific URL where I can investigate, I can't proposed a solution which I think may work.

---

Without being able to try for myself, I would target a separator followed by a separator, something like:

...##[data-testid="dropdown-menu"] > [role="separator"] + [role="separator"]

[Stevoisiak]

Any of the sites on the "Gitbook powered sites" "browse by documentation type" list should work. The two specific examples used in the question were https://gitbook.com/docs and https://help.quantower.com/quantower.

The issue with [role="separator"] + [role="separator"] is that I'm hiding the menu items, not removing them, so the elements aren't neighbors in the DOM. The menu item elements are created on-demand when the user opens the menu, so removal has a noticeable delay.

[gorhill]

Any of the sites on the "Gitbook powered sites" "browse by documentation type" list should work

I typically won't try to go on a hunt to find what you call "any of the sites". Just provide a specific URL, isn't that simpler? As someone who deals with reports, don't you relate and agree that immediately being able to reproduce with a specific webpage URL is better rather than being asked to go on a hunt of "any site using this or that framework"?

---

Looks like I missed the small-character "Screenshot from https://gitbook.com/docs" under the screenshots.

[Stevoisiak]

I left specific link examples when saying

the above filters work on https://gitbook.com/docs [...] but leave an extra separator on https://help.quantower.com/quantower

Admittedly I could have made that more clearly visible at the start of the post rather than burying it in the middle. Will keep in mind going forward.

[gorhill]

I have to admit that I always try to go straight to the core issue and tend to ignore what I perceive as large chunks of text before getting to it, with the result I missed these links in the middle -- sorry. If that helps, an ideal report for me would be absolutely minimal with only the needed information and nothing else, or at least as a TLDR intro at the top:

• Issue: multiple separator lines on top of each other
• URL
• Screenshot highlighting where to click, and the region where the issue is seen
• Configuration required to reproduce the case

Now as for the current issue, I can't think of anything else than :remove(). On my side, I do see the fraction of second visual glitch except for when using uBO Lite in Chromium, where the result looks fine.