Bug 1851877 - Use moz-message-bar to replace the pending uninstall bar in about:addons r=hjones,fluent-reviewers,extension-reviewers,willdurand

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

python/l10n/fluent_migrations/bug_1851877_mozMessageBar_aboutAddons_uninstallBar.py

@@ -0,0 +1,41 @@
+# Any copyright is dedicated to the Public Domain.
+# http://creativecommons.org/publicdomain/zero/1.0/
+
+import fluent.syntax.ast as FTL
+from fluent.migrate.transforms import TransformPattern
+
+
+class STRIP_SPAN(TransformPattern):
+    # Used to remove `<span data-l10n-name="addon-name"></span>` from a string
+    def visit_TextElement(self, node):
+        span_start = node.value.find('<span data-l10n-name="addon-name">')
+        span_end = node.value.find("</span>")
+        if span_start != -1 and span_end == -1:
+            node.value = node.value[:span_start]
+        elif span_start == -1 and span_end != -1:
+            node.value = node.value[span_end + 7 :]
+
+        return node
+
+
+def migrate(ctx):
+    """Bug 1851877 - Use moz-message-bar to replace the pending uninstall bar in about:addons, part {index}."""
+    aboutAddons_ftl = "toolkit/toolkit/about/aboutAddons.ftl"
+    ctx.add_transforms(
+        aboutAddons_ftl,
+        aboutAddons_ftl,
+        [
+            FTL.Message(
+                id=FTL.Identifier("pending-uninstall-description2"),
+                attributes=[
+                    FTL.Attribute(
+                        id=FTL.Identifier("message"),
+                        value=STRIP_SPAN(
+                            aboutAddons_ftl,
+                            "pending-uninstall-description",
+                        ),
+                    ),
+                ],
+            ),
+        ],
+    )

toolkit/locales/en-US/toolkit/about/aboutAddons.ftl

@@ -420,7 +420,8 @@ addon-detail-reviews-link =
 
 # Variables:
 #   $addon (string) - Name of the add-on
-pending-uninstall-description = <span data-l10n-name="addon-name">{ $addon }</span> has been removed.
+pending-uninstall-description2 =
+    .message = { $addon } has been removed.
 pending-uninstall-undo-button = Undo
 
 addon-detail-updates-label = Allow automatic updates

toolkit/mozapps/extensions/content/aboutaddons.js

@@ -3299,7 +3299,7 @@ class AddonList extends HTMLElement {
   }
 
   getPendingUninstallBar(addon) {
-    return this.querySelector(`message-bar[addon-id="${addon.id}"]`);
+    return this.querySelector(`moz-message-bar[addon-id="${addon.id}"]`);
   }
 
   sortByFn(aAddon, bAddon) {
@@ -3353,26 +3353,24 @@ class AddonList extends HTMLElement {
 
   addPendingUninstallBar(addon) {
     const stack = this.pendingUninstallStack;
-    const mb = document.createElement("message-bar");
+    const mb = document.createElement("moz-message-bar");
     mb.setAttribute("addon-id", addon.id);
-    mb.setAttribute("type", "generic");
+    mb.setAttribute("type", "info");
 
-    const addonName = document.createElement("span");
-    addonName.setAttribute("data-l10n-name", "addon-name");
-    const message = document.createElement("span");
-    message.append(addonName);
     const undo = document.createElement("button");
     undo.setAttribute("action", "undo");
     undo.addEventListener("click", () => {
       addon.cancelUninstall();
     });
+    undo.setAttribute("slot", "actions");
 
-    document.l10n.setAttributes(message, "pending-uninstall-description", {
+    document.l10n.setAttributes(mb, "pending-uninstall-description2", {
       addon: addon.name,
     });
+    mb.setAttribute("data-l10n-attrs", "message");
     document.l10n.setAttributes(undo, "pending-uninstall-undo-button");
 
-    mb.append(message, undo);
+    mb.appendChild(undo);
     stack.append(mb);
   }
 

toolkit/mozapps/extensions/test/browser/browser_reinstall.js

@@ -30,7 +30,7 @@ function removeItem(item) {
 
 function hasPendingMessage(item, msg) {
   let messageBar = htmlDoc().querySelector(
-    `message-bar[addon-id="${item.addon.id}"`
+    `moz-message-bar[addon-id="${item.addon.id}"`
   );
   is_element_visible(messageBar, msg);
 }