From e54c04758a4f707671018e15443dc596c2b35425 Mon Sep 17 00:00:00 2001 From: Niklas Baumgardner Date: Wed, 13 Dec 2023 20:03:57 +0000 Subject: [PATCH] Bug 1867282 - Hide show more button if content is too small in shopping card. r=shopping-reviewers,kpatenio Differential Revision: https://phabricator.services.mozilla.com/D195467 --- .../shopping/content/highlights.mjs | 5 +- .../shopping/content/shopping-card.css | 6 +- .../shopping/content/shopping-card.mjs | 55 ++++++++++++++++++- .../stories/shopping-card.stories.mjs | 23 +++++++- 4 files changed, 80 insertions(+), 9 deletions(-) diff --git a/browser/components/shopping/content/highlights.mjs b/browser/components/shopping/content/highlights.mjs index 9dae9baeebc3..09ed055b28c0 100644 --- a/browser/components/shopping/content/highlights.mjs +++ b/browser/components/shopping/content/highlights.mjs @@ -107,14 +107,11 @@ class ReviewHighlights extends MozLitElement { highlightsTemplate.push(highlightEl); } - // Only use show-more card type if there are more than two highlights. - let isShowMore = Array.from(this.#highlightsMap.values()).flat().length > 2; - return html`
${highlightsTemplate}
diff --git a/browser/components/shopping/content/shopping-card.css b/browser/components/shopping/content/shopping-card.css index 6fcb27820785..5b0ce9c28036 100644 --- a/browser/components/shopping/content/shopping-card.css +++ b/browser/components/shopping/content/shopping-card.css @@ -138,10 +138,14 @@ details[open] .chevron-icon { height: 200px; } -.show-more ::slotted(div) { +:host(:not([showMoreButtonDisabled])) .show-more ::slotted(div) { margin-block-end: 4rem; } +:host([showMoreButtonDisabled]) footer { + display: none; +} + @media (prefers-color-scheme: dark) { :host > .shopping-card { background-color: #42414d; diff --git a/browser/components/shopping/content/shopping-card.mjs b/browser/components/shopping/content/shopping-card.mjs index 9b921cd86b66..44166af018ab 100644 --- a/browser/components/shopping/content/shopping-card.mjs +++ b/browser/components/shopping/content/shopping-card.mjs @@ -6,6 +6,7 @@ import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs"; import { MozLitElement } from "chrome://global/content/lit-utils.mjs"; +const MIN_SHOW_MORE_HEIGHT = 200; /** * A card container to be used in the shopping sidebar. There are three card types. * The default type where no type attribute is required and the card will have no extra functionality. @@ -26,6 +27,7 @@ class ShoppingCard extends MozLitElement { static get queries() { return { detailsEl: "#shopping-details", + contentEl: "#content", }; } @@ -117,8 +119,7 @@ class ShoppingCard extends MozLitElement { : "shopping-show-more-button" ); // toggle content expanded attribute - e.target.parentElement.parentElement.attributes.expanded.value = - this._isExpanded; + this.contentEl.attributes.expanded.value = this._isExpanded; let action = this._isExpanded ? "expanded" : "collapsed"; Glean.shopping.surfaceShowMoreReviewsButtonClicked.record({ @@ -126,10 +127,60 @@ class ShoppingCard extends MozLitElement { }); } + enableShowMoreButton() { + this._isExpanded = false; + this.toggleAttribute("showMoreButtonDisabled", false); + this.contentEl.attributes.expanded.value = false; + } + + disableShowMoreButton() { + this._isExpanded = true; + this.toggleAttribute("showMoreButtonDisabled", true); + this.contentEl.attributes.expanded.value = true; + } + handleChevronButtonClick() { this.detailsEl.open = !this.detailsEl.open; } + firstUpdated() { + if (this.type !== "show-more") { + return; + } + + let contentSlot = this.shadowRoot.querySelector("slot[name='content']"); + let contentSlotEls = contentSlot.assignedElements(); + if (!contentSlotEls.length) { + return; + } + + let slottedDiv = contentSlotEls[0]; + + this.handleContentSlotResize = this.handleContentSlotResize.bind(this); + this.contentResizeObserver = new ResizeObserver( + this.handleContentSlotResize + ); + this.contentResizeObserver.observe(slottedDiv); + } + + disconnectedCallback() { + this.contentResizeObserver.disconnect(); + } + + handleContentSlotResize(entries) { + for (let entry of entries) { + if (entry.contentRect.height === 0) { + return; + } + + if (entry.contentRect.height < MIN_SHOW_MORE_HEIGHT) { + this.disableShowMoreButton(); + } else if (this.hasAttribute("showMoreButtonDisabled")) { + this.enableShowMoreButton(); + } + } + } + render() { return html`