tor-browser

commit f0361e4a5f69a5012e1171b47ed0a60a35110802
parent dddc9fc62a56f7286db6d09c89078bbf0c5dea90
Author: Dom <im.sekiel@gmail.com>
Date:   Fri, 12 Dec 2025 20:50:43 +0000

Bug 1978347 - Fix leftover space when there are no slotted elements in moz-promo. r=tgiles,desktop-theme-reviewers

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

Diffstat:
M
toolkit/content/widgets/moz-promo/moz-promo.css
 | 
6
+++++-
M
toolkit/content/widgets/moz-promo/moz-promo.mjs
 | 
17
+++++++++++++++--

2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/toolkit/content/widgets/moz-promo/moz-promo.css b/toolkit/content/widgets/moz-promo/moz-promo.css
@@ -105,7 +105,11 @@
 /* MozPromo slot styles */
 
 .actions-and-support-link-wrapper {
-  display: flex;
+  display: none;
   gap: var(--space-small);
   align-items: baseline;
 }
+
+.actions-and-support-link-wrapper.active {
+  display: flex;
+}
diff --git a/toolkit/content/widgets/moz-promo/moz-promo.mjs b/toolkit/content/widgets/moz-promo/moz-promo.mjs
@@ -21,6 +21,7 @@ export default class MozPromo extends MozLitElement {
   static queries = {
     actionsSlot: "slot[name=actions]",
     supportLinkSlot: "slot[name=support-link]",
+    actionsSupportWrapper: ".actions-and-support-link-wrapper",
   };
 
   static properties = {
@@ -43,6 +44,15 @@ export default class MozPromo extends MozLitElement {
     }
   }
 
+  handleSlotChange() {
+    let hasActions = this.actionsSlot.assignedNodes().length;
+    let hasSupport = this.supportLinkSlot.assignedNodes().length;
+    this.actionsSupportWrapper.classList.toggle(
+      "active",
+      hasActions || hasSupport
+    );
+  }
+
   headingTemplate() {
     if (this.heading) {
       return html`<h2 class="heading heading-medium">${this.heading}</h2>`;
@@ -67,8 +77,11 @@ export default class MozPromo extends MozLitElement {
           ${this.headingTemplate()}
           <p class="message">
             ${this.message}<span class="actions-and-support-link-wrapper">
-              <slot name="actions"></slot>
-              <slot name="support-link"></slot>
+              <slot name="actions" @slotchange=${this.handleSlotChange}></slot>
+              <slot
+                name="support-link"
+                @slotchange=${this.handleSlotChange}
+              ></slot>
             </span>
           </p>
         </div>