Bug 1937234 - Add signed out avatar variants. r=skhamis,emilio,omc-reviewers,pdahiya

These variants are controlled via the avatarIconVariant variable of the
fxaButtonVisibility feature.

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

browser/components/asrouter/modules/ToolbarBadgeHub.sys.mjs

@@ -114,6 +114,7 @@ export class _ToolbarBadgeHub {
       .querySelector(".toolbarbutton-badge")
       .classList.remove("feature-callout");
     toolbarButton.removeAttribute("badged");
+    toolbarButton.removeAttribute("showing-callout");
     // Remove id used for for aria-label badge description
     const notificationDescription = toolbarButton.querySelector(
       "#toolbarbutton-notification-description"
@@ -132,6 +133,7 @@ export class _ToolbarBadgeHub {
       const badge = toolbarbutton.querySelector(".toolbarbutton-badge");
       badge.classList.add("feature-callout");
       toolbarbutton.setAttribute("badged", true);
+      toolbarbutton.setAttribute("showing-callout", true);
       // If we have additional aria-label information for the notification
       // we add this content to the hidden `toolbarbutton-text` node.
       // We then use `aria-labelledby` to link this description to the button

browser/components/asrouter/tests/unit/ToolbarBadgeHub.test.js

@@ -226,8 +226,13 @@ describe("ToolbarBadgeHub", () => {
     it("should show a notification", () => {
       instance.addToolbarNotification(target, fxaMessage);
 
-      assert.calledOnce(fakeElement.setAttribute);
+      assert.calledTwice(fakeElement.setAttribute);
       assert.calledWithExactly(fakeElement.setAttribute, "badged", true);
+      assert.calledWithExactly(
+        fakeElement.setAttribute,
+        "showing-callout",
+        true
+      );
       assert.calledWithExactly(fakeElement.classList.add, "feature-callout");
     });
     it("should attach a cb on the notification", () => {
@@ -307,10 +312,11 @@ describe("ToolbarBadgeHub", () => {
     it("should remove the notification", () => {
       instance.removeToolbarNotification(fakeElement);
 
-      assert.calledThrice(fakeElement.removeAttribute);
+      assert.callCount(fakeElement.removeAttribute, 4);
       assert.calledWithExactly(fakeElement.removeAttribute, "badged");
       assert.calledWithExactly(fakeElement.removeAttribute, "aria-labelledby");
       assert.calledWithExactly(fakeElement.removeAttribute, "aria-describedby");
+      assert.calledWithExactly(fakeElement.removeAttribute, "showing-callout");
       assert.calledOnce(fakeElement.classList.remove);
       assert.calledWithExactly(fakeElement.classList.remove, "feature-callout");
       assert.calledOnce(fakeElement.remove);