Bug 1782675 - Add `button` helper to FirefoxViewHandler and make `attention` a boolean attribute. r=Gijs

Differential Revision: https://phabricator.services.mozilla.com/D153447

browser/base/content/browser.js

@@ -9926,6 +9926,9 @@ var ConfirmationHint = {
 
 var FirefoxViewHandler = {
   tab: null,
+  get button() {
+    return document.getElementById("firefox-view-button");
+  },
   init() {
     const { FirefoxViewNotificationManager } = ChromeUtils.importESModule(
       "resource:///modules/firefox-view-notification-manager.sys.mjs"
@@ -9960,9 +9963,7 @@ var FirefoxViewHandler = {
   handleEvent(e) {
     switch (e.type) {
       case "TabSelect":
-        document
-          .getElementById("firefox-view-button")
-          ?.toggleAttribute("open", e.target == this.tab);
+        this.button?.toggleAttribute("open", e.target == this.tab);
         this._removeNotificationDotIfTabSelected();
         break;
       case "TabClose":
@@ -9990,7 +9991,6 @@ var FirefoxViewHandler = {
     }
   },
   _toggleNotificationDot(shouldShow) {
-    let fxViewButton = document.getElementById("firefox-view-button");
-    fxViewButton?.setAttribute("attention", shouldShow);
+    this.button?.toggleAttribute("attention", shouldShow);
   },
 };

browser/components/firefoxview/tests/browser/browser_notification_dot.js

@@ -44,23 +44,18 @@ async function waitForNotificationBadgeToBeShowing(fxViewButton) {
   await BrowserTestUtils.waitForMutationCondition(
     fxViewButton,
     { attributes: true },
-    () => fxViewButton.getAttribute("attention") === "true"
+    () => fxViewButton.hasAttribute("attention")
   );
-  return fxViewButton.getAttribute("attention") === "true";
+  return fxViewButton.hasAttribute("attention");
 }
 
 async function waitForNotificationBadgeToBeHidden(fxViewButton) {
   await BrowserTestUtils.waitForMutationCondition(
     fxViewButton,
     { attributes: true },
-    () =>
-      !fxViewButton.getAttribute("attention") ||
-      fxViewButton.getAttribute("attention") === "false"
-  );
-  return (
-    !fxViewButton.getAttribute("attention") ||
-    fxViewButton.getAttribute("attention") === "false"
+    () => !fxViewButton.hasAttribute("attention")
   );
+  return !fxViewButton.hasAttribute("attention");
 }
 
 function getBackgroundPositionForElement(ele) {

browser/themes/shared/tabs.css

@@ -630,7 +630,7 @@ toolbar[brighttext] {
 
 .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]),
-#firefox-view-button[attention="true"] {
+#firefox-view-button[attention] {
   background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px);
   background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size));
   background-size: 4px 4px;