urlbarNotificationIconsOpenStatus.uc.js

// ==UserScript==
// @name           Add [open] Status to Urlbar Notification Icons
// @version        1.1.4
// @author         aminomancer
// @homepageURL    https://github.com/aminomancer
// @long-description
// @description
/*
This sets an attribute on the buttons in `#notification-popup-box` based on whether their popups are open or closed. That way we can set their `fill-opacity` to 1 when they're open, like we do already with the other icons in `#identity-box`. This also sets a variable `--uc-panel-top-offset` on the panel so you can adjust its top margin. The offset will be equal to the difference between the anchor node's height and 16px (the default icon height). So if the popup notification opens in the urlbar, the offset will be 0.

But the popup notification can also open on the app menu button in the navbar (for example for rare contextual feature recommendations, which you can test in <about:newtab#devtools> if you enable `browser.newtabpage.activity-stream.asrouter.devtoolsEnabled` in <about:config>) whose height is equal to the navbar height. So the popup notification needs to have a variable top margin for it to be positioned consistently regardless of anchor node. I implement that like this:

```css
#notification-popup {
  margin-top: calc(-1px - var(--uc-panel-top-offset, 0px)) !important;
}
```
*/
// @downloadURL    https://cdn.jsdelivr.net/gh/aminomancer/uc.css.js@master/JS/urlbarNotificationIconsOpenStatus.uc.js
// @updateURL      https://cdn.jsdelivr.net/gh/aminomancer/uc.css.js@master/JS/urlbarNotificationIconsOpenStatus.uc.js
// @license        This Source Code Form is subject to the terms of the Creative Commons Attribution-NonCommercial-ShareAlike International License, v. 4.0. If a copy of the CC BY-NC-SA 4.0 was not distributed with this file, You can obtain one at http://creativecommons.org/licenses/by-nc-sa/4.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
// ==/UserScript==

class PopupNotificationHandler {
  constructor() {
    this.panel = document.getElementById("notification-popup");
    this.panel.addEventListener("popupshowing", this);
    this.panel.addEventListener("popuphiding", this);
  }
  handleEvent(e) {
    if (e.originalTarget === this.panel) {
      let { anchorNode } = this.panel;
      if (e.type === "popupshowing") {
        anchorNode.setAttribute("open", true);
        let offset = 0;
        if (
          anchorNode.localName === "toolbarbutton" ||
          anchorNode.classList.contains("toolbarbutton-icon") ||
          anchorNode.classList.contains("toolbarbutton-badge-stack")
        ) {
          offset =
            (windowUtils.getBoundsWithoutFlushing(anchorNode).height - 16) / 2;
        }
        this.panel.style.setProperty("--uc-panel-top-offset", `${offset}px`);
      } else {
        anchorNode.removeAttribute("open");
        this.panel.style.removeProperty("--uc-panel-top-offset");
      }
    }
  }
}

if (gBrowserInit.delayedStartupFinished) {
  new PopupNotificationHandler();
} else {
  let delayedListener = (subject, topic) => {
    if (topic == "browser-delayed-startup-finished" && subject == window) {
      Services.obs.removeObserver(delayedListener, topic);
      new PopupNotificationHandler();
    }
  };
  Services.obs.addObserver(delayedListener, "browser-delayed-startup-finished");
}