Bug 1836633 - Align the translation panel's settings gear menupopup with its button, and move the menupopup itself to main-popupset.inc.xhtml r=gregtatum

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

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

@@ -636,4 +636,28 @@
               class="unified-extensions-context-menu-report-extension"
               oncommand="gUnifiedExtensions.reportExtension(this.parentElement)" />
   </menupopup>
+
+  <menupopup id="translations-panel-settings-menupopup">
+    <menuitem class="always-translate-language-menuitem"
+              data-l10n-id="translations-panel-settings-always-translate-unknown-language"
+              type="checkbox"
+              checked="false"
+              autocheck="false"
+              oncommand="TranslationsPanel.onAlwaysTranslateLanguage()"/>
+    <menuitem class="never-translate-language-menuitem"
+              data-l10n-id="translations-panel-settings-never-translate-unknown-language"
+              type="checkbox"
+              checked="false"
+              autocheck="false"
+              oncommand="TranslationsPanel.onNeverTranslateLanguage()"/>
+    <menuitem class="never-translate-site-menuitem"
+              data-l10n-id="translations-panel-settings-never-translate-site"
+              type="checkbox"
+              checked="false"
+              autocheck="false"
+              oncommand="TranslationsPanel.onNeverTranslateSite()"/>
+    <menuseparator/>
+    <menuitem data-l10n-id="translations-panel-settings-manage-languages"
+              oncommand="TranslationsPanel.openManageLanguages()"/>
+  </menupopup>
 </popupset>

browser/components/translations/content/translationsPanel.inc.xhtml

@@ -23,32 +23,7 @@
         <toolbarbutton id="translations-panel-settings" class="panel-info-button"
                        data-l10n-id="translations-panel-settings-button"
                        closemenu="none"
-                       oncommand="TranslationsPanel.openSettingsPopup(this)">
-          <image class="translations-panel-gear-icon" />
-          <menupopup>
-            <menuitem class="always-translate-language-menuitem"
-                      data-l10n-id="translations-panel-settings-always-translate-unknown-language"
-                      type="checkbox"
-                      checked="false"
-                      autocheck="false"
-                      oncommand="TranslationsPanel.onAlwaysTranslateLanguage()"/>
-            <menuitem class="never-translate-language-menuitem"
-                      data-l10n-id="translations-panel-settings-never-translate-unknown-language"
-                      type="checkbox"
-                      checked="false"
-                      autocheck="false"
-                      oncommand="TranslationsPanel.onNeverTranslateLanguage()"/>
-            <menuitem class="never-translate-site-menuitem"
-                      data-l10n-id="translations-panel-settings-never-translate-site"
-                      type="checkbox"
-                      checked="false"
-                      autocheck="false"
-                      oncommand="TranslationsPanel.onNeverTranslateSite()"/>
-            <menuseparator/>
-            <menuitem data-l10n-id="translations-panel-settings-manage-languages"
-                      oncommand="TranslationsPanel.openManageLanguages()"/>
-          </menupopup>
-        </toolbarbutton>
+                       oncommand="TranslationsPanel.openSettingsPopup(this)"/>
       </hbox>
 
       <vbox class="translations-panel-content">

browser/components/translations/content/translationsPanel.js

@@ -679,10 +679,10 @@ var TranslationsPanel = new (class {
       await this.#getCachedDetectedLanguages();
 
     const { panel } = this.elements;
-    const alwaysTranslateMenuItems = panel.querySelectorAll(
+    const alwaysTranslateMenuItems = panel.ownerDocument.querySelectorAll(
       ".always-translate-language-menuitem"
     );
-    const neverTranslateMenuItems = panel.querySelectorAll(
+    const neverTranslateMenuItems = panel.ownerDocument.querySelectorAll(
       ".never-translate-language-menuitem"
     );
 
@@ -727,7 +727,7 @@ var TranslationsPanel = new (class {
    */
   async #updateSettingsMenuSiteCheckboxStates() {
     const { panel } = this.elements;
-    const neverTranslateSiteMenuItems = panel.querySelectorAll(
+    const neverTranslateSiteMenuItems = panel.ownerDocument.querySelectorAll(
       ".never-translate-site-menuitem"
     );
     const neverTranslateSite =
@@ -747,10 +747,10 @@ var TranslationsPanel = new (class {
 
     const { panel } = this.elements;
 
-    const alwaysTranslateMenuItems = panel.querySelectorAll(
+    const alwaysTranslateMenuItems = panel.ownerDocument.querySelectorAll(
       ".always-translate-language-menuitem"
     );
-    const neverTranslateMenuItems = panel.querySelectorAll(
+    const neverTranslateMenuItems = panel.ownerDocument.querySelectorAll(
       ".never-translate-language-menuitem"
     );
 
@@ -956,8 +956,10 @@ var TranslationsPanel = new (class {
   openSettingsPopup(button) {
     this.#updateSettingsMenuLanguageCheckboxStates();
     this.#updateSettingsMenuSiteCheckboxStates();
-    const popup = button.querySelector("menupopup");
-    popup.openPopup(button);
+    const popup = button.ownerDocument.getElementById(
+      "translations-panel-settings-menupopup"
+    );
+    popup.openPopup(button, "after_end");
   }
 
   /**

browser/components/translations/tests/browser/head.js

@@ -302,6 +302,7 @@ function getByL10nId(l10nId, doc = document) {
  */
 function getAllByL10nId(l10nId, doc = document) {
   const elements = doc.querySelectorAll(`[data-l10n-id="${l10nId}"]`);
+  console.log(doc);
   if (elements.length === 0) {
     throw new Error("Could not find the element by l10n id: " + l10nId);
   }

browser/themes/shared/translations/panel.css

@@ -17,7 +17,7 @@
   padding-bottom: 0;
 }
 
-image.translations-panel-gear-icon {
+#translations-panel-settings > image {
   /* Override the panel-info-button with a gear icon. */
   list-style-image: url(chrome://global/skin/icons/settings.svg);
 }