From a770fbcc3d1d2c943c768b3eaa3b7978ee4d3b2f Mon Sep 17 00:00:00 2001
From: Itiel <itiel_yn8@walla.com>
Date: Sun, 25 Jun 2023 19:26:21 +0000
Subject: [PATCH] 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  | 24 +++++++++++++++++
 .../content/translationsPanel.inc.xhtml       | 27 +------------------
 .../translations/content/translationsPanel.js | 16 ++++++-----
 .../translations/tests/browser/head.js        |  1 +
 browser/themes/shared/translations/panel.css  |  2 +-
 5 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/browser/base/content/main-popupset.inc.xhtml b/browser/base/content/main-popupset.inc.xhtml
index 71a3dffd8af2..fb0df4303e8d 100644
--- a/browser/base/content/main-popupset.inc.xhtml
+++ b/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>
diff --git a/browser/components/translations/content/translationsPanel.inc.xhtml b/browser/components/translations/content/translationsPanel.inc.xhtml
index 051b1fe28bdb..979a099d8b8c 100644
--- a/browser/components/translations/content/translationsPanel.inc.xhtml
+++ b/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">
diff --git a/browser/components/translations/content/translationsPanel.js b/browser/components/translations/content/translationsPanel.js
index fdd467d49e4e..c1fb3ebc3472 100644
--- a/browser/components/translations/content/translationsPanel.js
+++ b/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");
   }
 
   /**
diff --git a/browser/components/translations/tests/browser/head.js b/browser/components/translations/tests/browser/head.js
index a0ad9e5c9939..a3502cfc0399 100644
--- a/browser/components/translations/tests/browser/head.js
+++ b/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);
   }
diff --git a/browser/themes/shared/translations/panel.css b/browser/themes/shared/translations/panel.css
index d8b33b1872e3..d607161aae4d 100644
--- a/browser/themes/shared/translations/panel.css
+++ b/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);
 }