Backed out changeset c5f52ea7e7d0 (bug 1857634) for causing failures in test_fxview_tab_list.html

browser/components/firefoxview/card-container.mjs

@@ -23,12 +23,7 @@ import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
  * @property {boolean} toggleDisabled - Optional property given if the card container should not be collapsible
  */
 class CardContainer extends MozLitElement {
-  constructor() {
+  initiallyExpanded = true;
-    super();
-    this.initiallyExpanded = true;
-    this.isExpanded = false;
-    this.visible = false;
-  }
 
   static properties = {
     sectionLabel: { type: String },
@@ -40,7 +35,6 @@ class CardContainer extends MozLitElement {
     shortPageName: { type: String },
     showViewAll: { type: Boolean },
     toggleDisabled: { type: Boolean },
-    visible: { type: Boolean },
   };
 
   static queries = {
@@ -75,8 +69,6 @@ class CardContainer extends MozLitElement {
     }
     this.isExpanded = this.detailsExpanded;
 
-    this.updateTabLists();
-
     if (!this.shortPageName) {
       return;
     }
@@ -109,21 +101,6 @@ class CardContainer extends MozLitElement {
     );
   }
 
-  willUpdate(changes) {
-    if (changes.has("visible")) {
-      this.updateTabLists();
-    }
-  }
-
-  updateTabLists() {
-    let tabLists = this.querySelectorAll("fxview-tab-list");
-    if (tabLists) {
-      tabLists.forEach(tabList => {
-        tabList.updatesPaused = !this.visible || !this.isExpanded;
-      });
-    }
-  }
-
   render() {
     return html`
       <link

browser/components/firefoxview/fxview-tab-list.mjs

@@ -59,7 +59,7 @@ export default class FxviewTabList extends MozLitElement {
     this.maxTabsLength = 25;
     this.tabItems = [];
     this.compactRows = false;
-    this.updatesPaused = true;
+    this.visible = false;
     this.#register();
   }
 
@@ -71,7 +71,7 @@ export default class FxviewTabList extends MozLitElement {
     hasPopup: { type: String },
     maxTabsLength: { type: Number },
     tabItems: { type: Array },
-    updatesPaused: { type: Boolean },
+    visible: { type: Boolean },
     searchQuery: { type: String },
   };
 
@@ -86,10 +86,10 @@ export default class FxviewTabList extends MozLitElement {
       this.tabItems.length - 1
     );
 
-    if (changes.has("dateTimeFormat") || changes.has("updatesPaused")) {
+    if (changes.has("dateTimeFormat")) {
       this.clearIntervalTimer();
       if (
-        !this.updatesPaused &&
+        this.visible &&
         this.dateTimeFormat == "relative" &&
         !window.IS_STORYBOOK
       ) {
@@ -140,8 +140,10 @@ export default class FxviewTabList extends MozLitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.ownerDocument.addEventListener("visibilitychange", this);
+    this.visible = this.ownerDocument.visibilityState == "visible";
     if (
-      !this.updatesPaused &&
+      this.visible &&
       this.dateTimeFormat === "relative" &&
       !window.IS_STORYBOOK
     ) {
@@ -151,9 +153,22 @@ export default class FxviewTabList extends MozLitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.ownerDocument.removeEventListener("visibilitychange", this);
     this.clearIntervalTimer();
   }
 
+  handleEvent(event) {
+    if (event.type == "visibilitychange") {
+      this.visible = this.ownerDocument.visibilityState == "visible";
+      if (this.visible) {
+        this.startIntervalTimer();
+        this.onIntervalUpdate();
+      } else {
+        this.clearIntervalTimer();
+      }
+    }
+  }
+
   async getUpdateComplete() {
     await super.getUpdateComplete();
     await Promise.all(Array.from(this.rowEls).map(item => item.updateComplete));
@@ -237,13 +252,8 @@ export default class FxviewTabList extends MozLitElement {
     }
   }
 
-  shouldUpdate(changes) {
+  shouldUpdate() {
-    if (changes.has("updatesPaused")) {
+    return this.visible;
-      if (this.updatesPaused) {
-        this.clearIntervalTimer();
-      }
-    }
-    return !this.updatesPaused;
   }
 
   itemTemplate = (tabItem, i) => {
@@ -735,13 +745,6 @@ export class VirtualList extends MozLitElement {
     }
   }
 
-  recalculateAfterWindowResize() {
-    this.maxRenderCountEstimate = Math.max(
-      40,
-      2 * Math.ceil(window.innerHeight / this.itemHeightEstimate)
-    );
-  }
-
   firstUpdated() {
     this.intersectionObserver.observe(this);
     if (this.isSubList && this.children[0]) {

browser/components/firefoxview/history.mjs

@@ -75,8 +75,6 @@ class HistoryInView extends ViewPage {
       SEARCH_DEBOUNCE_RATE_MS,
       SEARCH_DEBOUNCE_TIMEOUT_MS
     );
-
-    this.toggleVisibilityInCardContainer();
   }
 
   async connectedCallback() {
@@ -119,8 +117,6 @@ class HistoryInView extends ViewPage {
     if (!this.searchTask.isFinalized) {
       this.searchTask.finalize();
     }
-
-    this.toggleVisibilityInCardContainer();
   }
 
   disconnectedCallback() {
@@ -361,9 +357,6 @@ class HistoryInView extends ViewPage {
 
   updated() {
     this.fullyUpdated = true;
-    if (this.lists?.length) {
-      this.toggleVisibilityInCardContainer();
-    }
   }
 
   panelListTemplate() {

browser/components/firefoxview/opentabs.mjs

@@ -481,15 +481,15 @@ class OpenTabsInViewCard extends ViewPageContent {
   }
 
   viewVisibleCallback() {
-    this.getRootNode().host.toggleVisibilityInCardContainer(true);
+    if (this.tabList) {
+      this.tabList.visible = true;
+    }
   }
 
   viewHiddenCallback() {
-    this.getRootNode().host.toggleVisibilityInCardContainer(true);
+    if (this.tabList) {
-  }
+      this.tabList.visible = false;
-
+    }
-  firstUpdated() {
-    this.getRootNode().host.toggleVisibilityInCardContainer(true);
   }
 
   render() {

browser/components/firefoxview/recentlyclosed.mjs

@@ -95,8 +95,6 @@ class RecentlyClosedTabsInView extends ViewPage {
         this
       );
     }
-
-    this.toggleVisibilityInCardContainer();
   }
 
   stop() {
@@ -120,8 +118,6 @@ class RecentlyClosedTabsInView extends ViewPage {
         this
       );
     }
-
-    this.toggleVisibilityInCardContainer();
   }
 
   disconnectedCallback() {
@@ -146,11 +142,6 @@ class RecentlyClosedTabsInView extends ViewPage {
     this.start();
   }
 
-  firstUpdated() {
-    this.firstUpdateComplete = true;
-    this.toggleVisibilityInCardContainer();
-  }
-
   getTabStateValue(tab, key) {
     let value = "";
     const tabEntries = tab.state.entries;
@@ -271,6 +262,10 @@ class RecentlyClosedTabsInView extends ViewPage {
     this.fullyUpdated = false;
   }
 
+  firstUpdated() {
+    this.firstUpdateComplete = true;
+  }
+
   updated() {
     this.fullyUpdated = true;
   }

browser/components/firefoxview/syncedtabs.mjs

@@ -182,8 +182,6 @@ class SyncedTabsInView extends ViewPage {
         isVisible ? "closed" : "hidden"
       );
     }
-
-    this.toggleVisibilityInCardContainer();
   }
 
   async observe(subject, topic, errorState) {
@@ -671,7 +669,6 @@ class SyncedTabsInView extends ViewPage {
 
   updated() {
     this.fullyUpdated = true;
-    this.toggleVisibilityInCardContainer();
   }
 
   sendTabTelemetry(numTabs) {

browser/components/firefoxview/tests/browser/firefoxview-next/browser_firefoxview_paused.js

@@ -201,85 +201,6 @@ add_task(async function test_recentbrowsing() {
       "Found the recent-browsing recently-closed tabs list"
     );
 
-    // Collapse the Open Tabs card
-    let cardContainer = recentBrowsingOpenTabsView.viewCards[0]?.cardEl;
-    await EventUtils.synthesizeMouseAtCenter(
-      cardContainer.summaryEl,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(
-      () => !cardContainer.detailsEl.hasAttribute("open")
-    );
-
-    ok(
-      recentBrowsingOpenTabsList.updatesPaused,
-      "The Open Tabs list is paused after its card is collapsed."
-    );
-    ok(
-      !recentBrowsingOpenTabsList.intervalID,
-      "The intervalID for the Open Tabs list is undefined while updates are paused."
-    );
-
-    // Expand the Open Tabs card
-    await EventUtils.synthesizeMouseAtCenter(
-      cardContainer.summaryEl,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(() =>
-      cardContainer.detailsEl.hasAttribute("open")
-    );
-
-    ok(
-      !recentBrowsingOpenTabsList.updatesPaused,
-      "The Open Tabs list is unpaused after its card is expanded."
-    );
-    ok(
-      recentBrowsingOpenTabsList.intervalID,
-      "The intervalID for the Open Tabs list is defined while updates are unpaused."
-    );
-
-    // Collapse the Recently Closed card
-    let recentlyClosedCardContainer =
-      recentBrowsingRecentlyClosedTabsView.cardEl;
-    await EventUtils.synthesizeMouseAtCenter(
-      recentlyClosedCardContainer.summaryEl,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(
-      () => !recentlyClosedCardContainer.detailsEl.hasAttribute("open")
-    );
-
-    ok(
-      recentBrowsingRecentlyClosedTabsList.updatesPaused,
-      "The Recently Closed list is paused after its card is collapsed."
-    );
-    ok(
-      !recentBrowsingRecentlyClosedTabsList.intervalID,
-      "The intervalID for the Open Tabs list is undefined while updates are paused."
-    );
-
-    // Expand the Recently Closed card
-    await EventUtils.synthesizeMouseAtCenter(
-      recentlyClosedCardContainer.summaryEl,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(() =>
-      recentlyClosedCardContainer.detailsEl.hasAttribute("open")
-    );
-
-    ok(
-      !recentBrowsingRecentlyClosedTabsList.updatesPaused,
-      "The Recently Closed list is unpaused after its card is expanded."
-    );
-    ok(
-      recentBrowsingRecentlyClosedTabsList.intervalID,
-      "The intervalID for the Recently Closed list is defined while updates are unpaused."
-    );
-
     await checkFxRenderCalls(
       browser,
       {
@@ -310,45 +231,6 @@ add_task(async function test_opentabs() {
     ok(!openTabsView.paused, "The open tabs view is un-paused");
     is(openTabsView.slot, "selected", "The open tabs view is selected");
 
-    // Collapse the Open Tabs card
-    let cardContainer = openTabsView.viewCards[0]?.cardEl;
-    await EventUtils.synthesizeMouseAtCenter(
-      cardContainer.summaryEl,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(
-      () => !cardContainer.detailsEl.hasAttribute("open")
-    );
-
-    ok(
-      openTabsList.updatesPaused,
-      "The Open Tabs list is paused after its card is collapsed."
-    );
-    ok(
-      !openTabsList.intervalID,
-      "The intervalID for the Open Tabs list is undefined while updates are paused."
-    );
-
-    // Expand the Open Tabs card
-    await EventUtils.synthesizeMouseAtCenter(
-      cardContainer.summaryEl,
-      {},
-      content
-    );
-    await TestUtils.waitForCondition(() =>
-      cardContainer.detailsEl.hasAttribute("open")
-    );
-
-    ok(
-      !openTabsList.updatesPaused,
-      "The Open Tabs list is unpaused after its card is expanded."
-    );
-    ok(
-      openTabsList.intervalID,
-      "The intervalID for the Open Tabs list is defined while updates are unpaused."
-    );
-
     await checkFxRenderCalls(
       browser,
       {

browser/components/firefoxview/viewpage.mjs

@@ -158,25 +158,6 @@ export class ViewPage extends ViewPageContent {
     );
   }
 
-  toggleVisibilityInCardContainer(isOpenTabs) {
-    let cards = [];
-    let tabLists = [];
-    if (!isOpenTabs) {
-      cards = this.shadowRoot.querySelectorAll("card-container");
-      tabLists = this.shadowRoot.querySelectorAll("fxview-tab-list");
-    } else {
-      this.viewCards.forEach(viewCard => {
-        cards.push(viewCard.cardEl);
-        tabLists.push(viewCard.tabList);
-      });
-    }
-    if (tabLists.length && cards.length) {
-      cards.forEach(cardEl => {
-        cardEl.visible = !this.paused;
-      });
-    }
-  }
-
   enter() {
     this.selectedTab = true;
     if (this.isVisible) {