Bug 1782456 - Move unified extensions context menu to main popupset. r=rpl,Gijs

I noticed some missing context menu style when loading the context menu
from our own viewcache, which explains the difference between primary
and secondary button click. Not sure ecavtly what was missing as the
styles are all over the place.

The menu item actually works, the actions are called and for
checkbox-like menu items, the `checked` attribute is correctly set in
the "HTML". Also it looked like sub-menus weren't affected (e.g. Tree
Style Tab didn't have any issue).

While investigating, I also noticed that most (if not all) `menupopup`
elements are declared in the main popupset, so I tried to move the
unified extensions context menu to this main popupset and lazy-load the
l10n strings (similar to the toolbar context menu [1]).

That fixed the bug.

[1]: https://bugzilla.mozilla.org/show_bug.cgi?id=1609556

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

browser/base/content/browser-addons.js

@@ -1350,11 +1350,17 @@ var gUnifiedExtensions = {
         this._listView.addEventListener("ViewShowing", this);
         this._listView.addEventListener("ViewHiding", this);
 
-        // Load context menu popup.
-        const template = document.getElementById("unified-extensions-template");
-        if (template) {
-          template.replaceWith(template.content);
-        }
+        // Lazy-load the l10n strings.
+        document
+          .getElementById("unified-extensions-context-menu")
+          .querySelectorAll("[data-lazy-l10n-id]")
+          .forEach(el => {
+            el.setAttribute(
+              "data-l10n-id",
+              el.getAttribute("data-lazy-l10n-id")
+            );
+            el.removeAttribute("data-lazy-l10n-id");
+          });
       }
 
       if (this._button.open) {

browser/base/content/main-popupset.inc.xhtml

@@ -632,4 +632,17 @@
       </hbox>
     </panel>
   </html:template>
+
+  <menupopup id="unified-extensions-context-menu"
+             onpopupshowing="gUnifiedExtensions.updateContextMenu(this, event)">
+    <menuitem data-lazy-l10n-id="unified-extensions-context-menu-manage-extension"
+              class="unified-extensions-context-menu-manage-extension"
+              oncommand="gUnifiedExtensions.manageExtension(this.parentElement)" />
+    <menuitem data-lazy-l10n-id="unified-extensions-context-menu-remove-extension"
+              class="unified-extensions-context-menu-remove-extension"
+              oncommand="gUnifiedExtensions.removeExtension(this.parentElement)" />
+    <menuitem data-lazy-l10n-id="unified-extensions-context-menu-report-extension"
+              class="unified-extensions-context-menu-report-extension"
+              oncommand="gUnifiedExtensions.reportExtension(this.parentElement)" />
+  </menupopup>
 </popupset>

browser/base/content/unified-extensions-viewcache.inc.xhtml

@@ -2,21 +2,6 @@
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
-<html:template id="unified-extensions-template">
-  <menupopup id="unified-extensions-context-menu"
-             onpopupshowing="gUnifiedExtensions.updateContextMenu(this, event)">
-    <menuitem data-l10n-id="unified-extensions-context-menu-manage-extension"
-              class="unified-extensions-context-menu-manage-extension"
-              oncommand="gUnifiedExtensions.manageExtension(this.parentElement)" />
-    <menuitem data-l10n-id="unified-extensions-context-menu-remove-extension"
-              class="unified-extensions-context-menu-remove-extension"
-              oncommand="gUnifiedExtensions.removeExtension(this.parentElement)" />
-    <menuitem data-l10n-id="unified-extensions-context-menu-report-extension"
-              class="unified-extensions-context-menu-report-extension"
-              oncommand="gUnifiedExtensions.reportExtension(this.parentElement)" />
-  </menupopup>
-</html:template>
-
 <!--
   This is the template used for the `unified-extensions-item` custom element,
   defined in `browser/base/content/browser-addons.js`.

browser/components/extensions/test/browser/browser_unified_extensions_context_menu.js

@@ -55,6 +55,7 @@ add_task(async function test_context_menu() {
   // Open the extension panel, then open the context menu for the extension.
   await openExtensionsPanel(win);
   const contextMenu = await openUnifiedExtensionsContextMenu(win, extension.id);
+  const doc = contextMenu.ownerDocument;
 
   const manageButton = contextMenu.querySelector(
     ".unified-extensions-context-menu-manage-extension"
@@ -62,6 +63,11 @@ add_task(async function test_context_menu() {
   ok(manageButton, "expected manage button");
   is(manageButton.hidden, false, "expected manage button to be visible");
   is(manageButton.disabled, false, "expected manage button to be enabled");
+  Assert.deepEqual(
+    doc.l10n.getAttributes(manageButton),
+    { id: "unified-extensions-context-menu-manage-extension", args: null },
+    "expected correct l10n attributes for manage button"
+  );
 
   const removeButton = contextMenu.querySelector(
     ".unified-extensions-context-menu-remove-extension"
@@ -69,6 +75,11 @@ add_task(async function test_context_menu() {
   ok(removeButton, "expected remove button");
   is(removeButton.hidden, false, "expected remove button to be visible");
   is(removeButton.disabled, false, "expected remove button to be enabled");
+  Assert.deepEqual(
+    doc.l10n.getAttributes(removeButton),
+    { id: "unified-extensions-context-menu-remove-extension", args: null },
+    "expected correct l10n attributes for remove button"
+  );
 
   const reportButton = contextMenu.querySelector(
     ".unified-extensions-context-menu-report-extension"
@@ -76,6 +87,11 @@ add_task(async function test_context_menu() {
   ok(reportButton, "expected report button");
   is(reportButton.hidden, false, "expected report button to be visible");
   is(reportButton.disabled, false, "expected report button to be enabled");
+  Assert.deepEqual(
+    doc.l10n.getAttributes(reportButton),
+    { id: "unified-extensions-context-menu-report-extension", args: null },
+    "expected correct l10n attributes for report button"
+  );
 
   await closeChromeContextMenu(contextMenu.id, null, win);
   await closeExtensionsPanel(win);