Bug 1574873 - The Mobile Promotion is wrongly displayed on “about:logins” page when you are not signed in to Sync r=MattN

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

--HG--
extra : moz-landing-system : lando

browser/components/aboutlogins/content/aboutLogins.html

@@ -37,7 +37,6 @@
     <login-list></login-list>
     <login-item></login-item>
     <login-intro></login-intro>
-    <login-footer hidden></login-footer>
     <confirmation-dialog hidden></confirmation-dialog>
 
     <template id="confirmation-dialog-template">
@@ -193,6 +192,7 @@
         <p class="time-changed meta-info" data-l10n-id="login-item-time-changed" data-l10n-args='{"timeChanged": 0}'></p>
         <p class="time-used meta-info" data-l10n-id="login-item-time-used" data-l10n-args='{"timeUsed": 0}'></p>
       </form>
+      <login-footer hidden></login-footer>
     </template>
 
     <template id="login-filter-template">

browser/components/aboutlogins/content/aboutLogins.js

@@ -10,7 +10,10 @@ const gElements = {
   loginIntro: document.querySelector("login-intro"),
   loginItem: document.querySelector("login-item"),
   loginFilter: document.querySelector("login-filter"),
-  loginFooter: document.querySelector("login-footer"),
+  // loginFooter is nested inside of loginItem
+  get loginFooter() {
+    return this.loginItem.shadowRoot.querySelector("login-footer");
+  },
 };
 
 let numberOfLogins = 0;

browser/components/aboutlogins/content/components/login-footer.css

@@ -3,11 +3,8 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 footer {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  position: absolute;
-  margin-inline-start: 40px;
+  position: fixed;
+  margin-inline-start: 0;
   bottom: 40px;
 }
 

browser/components/aboutlogins/tests/browser/browser_dismissFooter.js

@@ -42,9 +42,11 @@ add_task(async function test_open_links() {
 
     await ContentTask.spawn(browser, selector, async buttonClass => {
       let footer = Cu.waiveXrays(
-        content.document.querySelector("login-footer")
+        content.document
+          .querySelector("login-item")
+          .shadowRoot.querySelector("login-footer")
       );
-      ok(ContentTaskUtils.is_visible(footer), "Footer is visible");
+      ok(!footer.hidden, "Footer is visible");
       let button = footer.shadowRoot.querySelector(buttonClass);
 
       button.click();
@@ -62,7 +64,11 @@ add_task(async function dismissFooter() {
   let browser = gBrowser.selectedBrowser;
 
   await ContentTask.spawn(browser, null, async () => {
-    let footer = Cu.waiveXrays(content.document.querySelector("login-footer"));
+    let footer = Cu.waiveXrays(
+      content.document
+        .querySelector("login-item")
+        .shadowRoot.querySelector("login-footer")
+    );
     let dismissButton = footer.shadowRoot.querySelector(".close");
 
     dismissButton.click();