From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- browser/components/firefoxview/card-container.mjs | 208 ++++++++++++++++++++++ 1 file changed, 208 insertions(+) create mode 100644 browser/components/firefoxview/card-container.mjs (limited to 'browser/components/firefoxview/card-container.mjs') diff --git a/browser/components/firefoxview/card-container.mjs b/browser/components/firefoxview/card-container.mjs new file mode 100644 index 0000000000..b58f42204a --- /dev/null +++ b/browser/components/firefoxview/card-container.mjs @@ -0,0 +1,208 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +import { + classMap, + html, + ifDefined, + when, +} from "chrome://global/content/vendor/lit.all.mjs"; +import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; + +/** + * A collapsible card container to be used throughout Firefox View + * + * @property {string} sectionLabel - The aria-label used for the section landmark if the header is hidden with hideHeader + * @property {boolean} hideHeader - Optional property given if the card container should not display a header + * @property {boolean} isEmptyState - Optional property given if the card is used within an empty state + * @property {boolean} isInnerCard - Optional property given if the card a nested card within another card and given a border rather than box-shadow + * @property {boolean} preserveCollapseState - Whether or not the expanded/collapsed state should persist + * @property {string} shortPageName - Page name that the 'View all' link will navigate to and the preserveCollapseState pref will use + * @property {boolean} showViewAll - True if you need to display a 'View all' header link to navigate + * @property {boolean} toggleDisabled - Optional property given if the card container should not be collapsible + * @property {boolean} removeBlockEndMargin - True if you need to remove the block end margin on the card container + */ +class CardContainer extends MozLitElement { + constructor() { + super(); + this.initiallyExpanded = true; + this.isExpanded = false; + this.visible = false; + } + + static properties = { + sectionLabel: { type: String }, + hideHeader: { type: Boolean }, + isExpanded: { type: Boolean }, + isEmptyState: { type: Boolean }, + isInnerCard: { type: Boolean }, + preserveCollapseState: { type: Boolean }, + shortPageName: { type: String }, + showViewAll: { type: Boolean }, + toggleDisabled: { type: Boolean }, + removeBlockEndMargin: { type: Boolean }, + visible: { type: Boolean }, + }; + + static queries = { + detailsEl: "details", + mainSlot: "slot[name=main]", + summaryEl: "summary", + viewAllLink: ".view-all-link", + }; + + get detailsExpanded() { + return this.detailsEl.hasAttribute("open"); + } + + get detailsOpenPrefValue() { + const prefName = this.shortPageName + ? `browser.tabs.firefox-view.ui-state.${this.shortPageName}.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 + Services.telemetry.recordEvent( + "firefoxview_next", + this.isExpanded ? "card_expanded" : "card_collapsed", + "card_container", + null, + { + 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"); + if (tabLists) { + tabLists.forEach(tabList => { + tabList.updatesPaused = !this.visible || !this.isExpanded; + }); + } + } + + render() { + return html` + +
+ ${when( + this.toggleDisabled, + () => html`
+ + + + + + + +
`, + () => html`
+ + + + + + + +
` + )} +
+ `; + } +} +customElements.define("card-container", CardContainer); -- cgit v1.2.3