me}.open`
      : null;
    if (prefName && Services.prefs.prefHasUserValue(prefName)) {
      return Services.prefs.getBoolPref(prefName);
    }
    return null;
  }

  connectedCallback() {
    super.connectedCallback();
    this.isExpanded = this.detailsOpenPrefValue ?? this.initiallyExpanded;
  }

  onToggleContainer() {
    if (this.isExpanded == this.detailsExpanded) {
      return;
    }
    this.isExpanded = this.detailsExpanded;

    this.updateTabLists();

    if (!this.shortPageName) {
      return;
    }

    if (this.preserveCollapseState) {
      const prefName = this.shortPageName
        ? `browser.tabs.firefox-view.ui-state.${this.shortPageName}.open`
        : null;
      Services.prefs.setBoolPref(prefName, this.isExpanded);
    }

    // Record telemetry
    Glean.firefoxviewNext[
      `card${this.isExpanded ? "Expanded" : "Collapsed"}CardContainer`
    ].record({
      data_type: this.shortPageName,
    });
  }

  viewAllClicked() {
    this.dispatchEvent(
      new CustomEvent("card-container-view-all", {
        bubbles: true,
        composed: true,
      })
    );
  }

  willUpdate(changes) {
    if (changes.has("visible")) {
      this.updateTabLists();
    }
  }

  updateTabLists() {
    let tabLists = this.querySelectorAll(
      "fxview-tab-list, opentabs-tab-list, syncedtabs-tab-list"
    );
    if (tabLists) {
      tabLists.forEach(tabList => {
        tabList.updatesPaused = !this.visible || !this.isExpanded;
      });
    }
  }

  render() {
    return html`
      <link
        rel="stylesheet"
        href="chrome://browser/content/firefoxview/card-container.css"
      />
      ${when(
        this.toggleDisabled,
        () =>
          html`<div
            class=${classMap({
              "card-container": true,
              inner: this.isInnerCard,
              "empty-state": this.isEmptyState && !this.isInnerCard,
            })}
          >
            <span
              id="header"
              class="card-container-header"
              ?hidden=${ifDefined(this.hideHeader)}
              toggleDisabled
              ?withViewAll=${this.showViewAll}
            >
              <slot name="header"></slot>
              <slot name="secondary-header"></slot>
            </span>
            <a
              href="about:firefoxview#${this.shortPageName}"
              @click=${this.viewAllClicked}
              class="view-all-link"
              data-l10n-id="firefoxview-view-all-link"
              ?hidden=${!this.showViewAll}
            ></a>
            <slot name="main"></slot>
            <slot name="footer" class="card-container-footer"></slot>
          </div>`,
        () =>
          html`<details
            class=${classMap({
              "card-container": true,
              inner: this.isInnerCard,
              "empty-state": this.isEmptyState && !this.isInnerCard,
            })}
            ?open=${this.isExpanded}
            ?isOpenTabsView=${this.removeBlockEndMargin}
            @toggle=${this.onToggleContainer}
            role=${this.isInnerCard ? "presentation" : "group"}
          >
            <summary
              class="card-container-header"
              ?hidden=${ifDefined(this.hideHeader)}
              ?withViewAll=${this.showViewAll}
            >
              <span
                class="icon chevron-icon"
                role="presentation"
                data-l10n-id=${this.isExpanded
                  ? "firefoxview-collapse-button-hide"
                  : "firefoxview-collapse-button-show"}
              ></span>
              <slot name="header"></slot>
            </summary>
            <a
              href="about:firefoxview#${this.shortPageName}"
              @click=${this.viewAllClicked}
              class="view-all-link"
              data-l10n-id="firefoxview-view-all-link"
              ?hidden=${!this.showViewAll}
            ></a>
            <slot name="main"></slot>
            <slot name="footer" class="card-container-footer"></slot>
          </details>`
      )}
    `;
  }
}
customElements.define("card-container", CardContainer);
PK