Bug 1928452 - Add blog type for in app notifications. r=freaktechnik,micahilbery

Differential Revision: https://phabricator.services.mozilla.com/D229705 --HG-- extra : amend_source : 35762f8a20a1dd21f063158a9fae56919bfaaa8c
2024-11-24 19:10:15 +00:00 · 2024-11-24 19:10:15 +00:00 · e11ff16063
--- a/mail/components/inappnotifications/content/in-app-notification-container.mjs
+++ b/mail/components/inappnotifications/content/in-app-notification-container.mjs
@ -5,7 +5,7 @@
 import "./in-app-notification-button.mjs"; //eslint-disable-line import/no-unassigned-import
 import "./in-app-notification-close-button.mjs"; //eslint-disable-line import/no-unassigned-import

-const attrs = ["cta", "description", "heading", "url", "data-id"];
+const attrs = ["cta", "description", "heading", "url", "data-id", "type"];

 /**
 * Container for in app notifications.
@ -82,6 +82,14 @@ class InAppNotificationContainer extends HTMLElement {
          '[is="in-app-notification-close-button"]'
        ).dataset.id = newValue;
        break;
+      case "type": {
+        const container = this.shadowRoot.querySelector(
+          ".in-app-notification-container"
+        );
+        container.classList.remove(`in-app-notification-${oldValue}`);
+        container.classList.add(`in-app-notification-${newValue}`);
+        break;
+      }
    }
  }

--- a/mail/components/inappnotifications/content/in-app-notification.mjs
+++ b/mail/components/inappnotifications/content/in-app-notification.mjs
@ -62,6 +62,7 @@ class InAppNotification extends HTMLElement {
      description: "description",
      id: "data-id",
      title: "heading",
+      type: "type",
      URL: "url",
    };

--- a/mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml
+++ b/mail/components/inappnotifications/content/inAppNotificationTemplates.inc.xhtml
@ -8,7 +8,7 @@

 <html:template id="inAppNotificationContainerTemplate" xmlns="http://www.w3.org/1999/xhtml">
  <div
-    class="in-app-notification-container in-app-notification-donation"
+    class="in-app-notification-container"
    tabindex="0"
  >
    <button is="in-app-notification-close-button"></button>
--- a/mail/components/inappnotifications/test/browser/browser_inAppNotification.js
+++ b/mail/components/inappnotifications/test/browser/browser_inAppNotification.js
@ -11,6 +11,7 @@ const observedProperties = {
  id: "data-id",
  description: "description",
  title: "heading",
+  type: "type",
  URL: "url",
 };

@ -43,14 +44,14 @@ function subtestCheckAttributes(container, data) {
  }
 }

-function getData(value) {
+function getData(value, type = "donation") {
  return {
    id: "test-notification",
    title: value,
    description: value,
    CTA: value,
    URL: value,
-    type: "donation",
+    type,
    severity: 4,
  };
 }
@ -68,7 +69,7 @@ add_task(function test_notificationAttributeTranslation() {
  notification.setNotificationData(notificationData);
  subtestCheckAttributes(container, notificationData);

-  notificationData = getData("new test");
+  notificationData = getData("new test", "message");

  notification.setNotificationData(notificationData);
  subtestCheckAttributes(container, notificationData);
--- a/mail/components/inappnotifications/test/browser/browser_inAppNotificationContainer.js
+++ b/mail/components/inappnotifications/test/browser/browser_inAppNotificationContainer.js
@ -105,3 +105,21 @@ add_task(async function test_urlValue() {

  Assert.equal(element.href, "", "url is cleared");
 });
+
+add_task(async function test_type() {
+  const element = container.shadowRoot.querySelector(
+    ".in-app-notification-container"
+  );
+
+  container.setAttribute("type", "blog");
+  Assert.ok(
+    element.classList.contains("in-app-notification-blog"),
+    "has correct class for type"
+  );
+
+  container.setAttribute("type", "donation");
+  Assert.ok(
+    element.classList.contains("in-app-notification-donation"),
+    "has correct class for type"
+  );
+});
--- a/mail/themes/shared/jar.inc.mn
+++ b/mail/themes/shared/jar.inc.mn
@ -761,6 +761,7 @@
  skin/classic/messenger/icons/sm/mobile-import.svg            (../shared/mail/icons/sm/mobile-import.svg)
  skin/classic/messenger/icons/sm/sparkle-star.svg             (../shared/mail/icons/sm/sparkle-star.svg)
  skin/classic/messenger/icons/sm/upload.svg                   (../shared/mail/icons/sm/upload.svg)
+  skin/classic/messenger/icons/sm/circle-question.svg          (../shared/mail/icons/sm/circle-question.svg)

 # LG - 24x24px icons
  skin/classic/messenger/icons/lg/upload.svg                   (../shared/mail/icons/lg/upload.svg)
--- a/mail/themes/shared/mail/icons/sm/circle-question.svg
+++ b/mail/themes/shared/mail/icons/sm/circle-question.svg
@ -0,0 +1,7 @@
+<!-- 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/. -->
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path d="M14.5 7.5C14.5 9.35652 13.7625 11.137 12.4497 12.4498C11.137 13.7625 9.35652 14.5 7.5 14.5C5.64348 14.5 3.86301 13.7625 2.55025 12.4498C1.2375 11.137 0.5 9.35652 0.5 7.5C0.5 5.64348 1.2375 3.86299 2.55025 2.55023C3.86301 1.23748 5.64348 0.5 7.5 0.5C9.35652 0.5 11.137 1.23748 12.4497 2.55023C13.7625 3.86299 14.5 5.64348 14.5 7.5Z" fill-opacity="context-fill-opacity" fill="context-fill"/>
+  <path d="M7.5 0C3.36382 0 0 3.36379 0 7.5C0 11.6362 3.36382 15 7.5 15C11.6362 15 15 11.6362 15 7.5C15 3.36379 11.6362 0 7.5 0ZM7.5 1C7.60617 1 7.71232 1.003 7.81836 1.008C7.92535 1.013 8.03117 1.02117 8.13672 1.03137C8.2429 1.04167 8.34852 1.0552 8.45312 1.0705C11.2847 1.48454 13.5157 3.71552 13.9297 6.54706C13.945 6.65167 13.9585 6.75728 13.9687 6.86346C13.979 6.96901 13.9871 7.07483 13.9922 7.18182C13.9974 7.28786 14 7.39401 14 7.50018C14 7.81474 13.9766 8.12357 13.9336 8.42596C13.8895 8.73594 13.8225 9.03812 13.7363 9.33221C13.5605 9.93234 13.3012 10.4959 12.9707 11.0099L12.9687 11.014L12.9648 11.02C12.7979 11.2785 12.6128 11.5247 12.4121 11.7563C12.2809 11.9075 12.1444 12.0533 11.9999 12.1918V12.1685C11.6942 12.4704 11.3592 12.7412 10.9999 12.9771V12.979C10.7453 13.1418 10.4784 13.2858 10.2011 13.4126C9.92149 13.5405 9.63129 13.649 9.33197 13.7368C9.03816 13.823 8.73538 13.8899 8.42572 13.9341C8.12337 13.9772 7.81448 14.0005 7.49994 14.0005C7.18541 14.0005 6.87652 13.9772 6.57416 13.9341C6.2645 13.8899 5.96173 13.823 5.66791 13.7368C5.36866 13.6485 5.07839 13.5405 4.79877 13.4126C4.52175 13.2838 4.25468 13.1413 4 12.9785V12.9765C3.64076 12.7407 3.30578 12.4698 3 12.1679V12.1913C2.85556 12.0528 2.71907 11.9071 2.58789 11.7558C2.3871 11.5243 2.202 11.278 2.03516 11.0195L2.0293 11.0095C1.69881 10.497 1.43949 9.93216 1.26367 9.33203C1.17751 9.03794 1.11052 8.73576 1.06641 8.42578C1.02337 8.12339 1 7.81456 1 7.5C1 7.18575 1.02352 6.87643 1.06641 6.57422C1.20042 5.62989 1.53798 4.75361 2.03125 3.98633C2.53528 3.20232 3.20232 2.53528 3.98633 2.03125C4.7536 1.53797 5.62989 1.20042 6.57422 1.06641C6.87642 1.02351 7.18575 1 7.5 1ZM7.5 4C6.12521 4 5 5.12521 5 6.5C5 6.77614 5.22386 7 5.5 7C5.77614 7 6 6.77614 6 6.5C6 5.66565 6.66565 5 7.5 5C8.33435 5 9 5.66565 9 6.5C9 7.33435 8.33435 8 7.5 8C7.45246 8 7.40685 8.00898 7.36328 8.02148C7.35276 8.02448 7.34234 8.02749 7.33203 8.03149C7.28838 8.04709 7.24803 8.06759 7.21094 8.09399C7.20698 8.09699 7.20308 8.1 7.19922 8.104C7.16631 8.129 7.13713 8.15768 7.11133 8.18988C7.10455 8.19788 7.09803 8.20657 7.0918 8.21527C7.06453 8.25427 7.0427 8.29623 7.02734 8.34229C7.02666 8.34529 7.02601 8.34823 7.02539 8.35223C7.01073 8.39858 7 8.44812 7 8.5V9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5V8.94922C9.1373 8.71578 10 7.7036 10 6.5C10 5.12521 8.87479 4 7.5 4ZM7.5 11C7.22386 11 7 11.2239 7 11.5C7 11.7761 7.22386 12 7.5 12C7.77614 12 8 11.7761 8 11.5C8 11.2239 7.77614 11 7.5 11Z"  fill-opacity="context-stroke-opacity" fill="context-stroke"/>
+</svg>
--- a/mail/themes/shared/mail/inAppNotificationContainer.css
+++ b/mail/themes/shared/mail/inAppNotificationContainer.css
@ -4,22 +4,16 @@

 :host {
  color-scheme: light dark;
-  --container-background: linear-gradient(135deg, #0db7bd, #6b21a8);
-  --container-border: none;
  --content-background: light-dark(#ffffff, #18181b);
-  --content-border: light-dark(#ffffff, #4f5683);
-  --title-text: light-dark(#6b21a8, #f5e8ff);
+  --container-border: none;
  --text: light-dark(#18181b, #fafafa);
-  --button-background: linear-gradient(#6b21a8, #571c87);
-  --button-stroke: light-dark(#3a0764, #ddb4fe);
+  --content-border: light-dark(#ffffff, #4f5683);
+
+  /* Button colots */
  --button-text: light-dark(#fafafa, #18181b);
  --button-text-active: var(--button-text);
-  --button-background-hover: linear-gradient(#6b21a8, #571c87);
-  --button-background-active: light-dark(#3a0764, #ddb4fe);
-  --button-focus-ring: light-dark(#3a0764, #ddb4fe);
-  --illustration-light: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default.svg");
-  --illustration-dark: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default-dark.svg");
-  --illustration: var(--illustration-light);
+
+  /* Close button colors */
  --close-button-background: light-dark(#fafafa, #18181b);
  --close-button-background-active: light-dark(#18181b, #fafafa);
  --close-button-text: var(--text);
@ -28,6 +22,10 @@
  --close-button-border-hover: currentColor;
  --close-button-border-active: light-dark(#18181b, #fafafa);
  --close-button-outline: currentColor;
+
+  --illustration-light: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default.svg");
+  --illustration-dark: url("chrome://messenger/skin/illustrations/in-app-notification-donation-default-dark.svg");
+  --illustration: var(--illustration-light);
 }

@media (prefers-color-scheme: dark) {
@ -63,7 +61,7 @@
  }
 }

-.in-app-notification-container.in-app-notification-donation {
+.in-app-notification-container {
  position: relative;
  width: 288px;
  background: var(--container-background);
@ -76,19 +74,21 @@
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.25);
  overflow: clip;

-  & .in-app-notification-content {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-    border: 1px solid var(--content-border);
-    border-radius: 5px;
-    color: var(--text);
-    padding: 6px;
-    padding-inline: 48px 36px;
-    isolation: isolate;

-    &::before {
+  /* Styles for the donation notification type */
+  &.in-app-notification-donation {
+    --title-text: light-dark(#6b21a8, #f5e8ff);
+    --button-background: linear-gradient(#6b21a8, #571c87);
+    --button-stroke: light-dark(#3a0764, #ddb4fe);
+    --button-background-hover: linear-gradient(#6b21a8, #571c87);
+    --button-background-active: light-dark(#3a0764, #ddb4fe);
+    --button-focus-ring: light-dark(#3a0764, #ddb4fe);
+    --container-background: linear-gradient(135deg, #0db7bd, #6b21a8);
+    --icon-url: url("chrome://messenger/skin/illustrations/in-app-notification-heart.svg");
+    --icon-fill: #fca5a5;
+    --icon-stroke: #dc2626;
+
+    & .in-app-notification-content::before {
      content: '';
      position: absolute;
      inset: 0;
@ -101,6 +101,50 @@
      z-index: -1;
    }

+    & .icon {
+      inset-block-start: 3px;
+      inset-inline-start: 0px;
+    }
+  }
+
+  /* Styles for the blog notification type */
+  &.in-app-notification-blog {
+    --title-text: light-dark(#1373d9, #eeeef0);
+    --button-background: linear-gradient(#1373d9, #175fb6);
+    --button-stroke: light-dark(#19518F, #32aeff);
+    --button-background-hover: linear-gradient(#1373d9, #175Fb6);
+    --button-background-active: light-dark(#19518f, #32aeff);
+    --button-focus-ring: light-dark(#19518f, #32aeff);
+    --content-border: light-dark(#1373d9, #58c9ff);
+    --icon-url: url("chrome://messenger/skin/icons/sm/circle-question.svg");
+    --icon-fill: light-dark(#c4ddf6, #263a47);
+    --icon-stroke: light-dark(#1373d9, #58C9ff);
+
+    & .in-app-notification-content {
+      background: linear-gradient(#f0f8ff, #f7f7f7);
+      padding-inline-start: 26px;
+    }
+
+    & .icon {
+      width: 16px;
+      height: 16px;
+      inset-block-start: 8px;
+      inset-inline-start: 8px;
+    }
+  }
+
+  & .in-app-notification-content {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border: 1px solid var(--content-border);
+    border-radius: 5px;
+    color: var(--text);
+    padding: 6px;
+    padding-inline: 48px 36px;
+    isolation: isolate;
+
    &:dir(rtl)::before {
      transform: scaleX(-1);
    }
@ -200,14 +244,12 @@

  & .icon {
    position: absolute;
-    content: url("chrome://messenger/skin/illustrations/in-app-notification-heart.svg");
-    -moz-context-properties: fill, stroke;
-    fill: #fca5a5;
-    stroke: #dc2626;
-    inset-block-start: 3px;
-    inset-inline-start: 0;
    z-index: 9;
    pointer-events: none;
+    content: var(--icon-url);
+    -moz-context-properties: fill, stroke;
+    fill: var(--icon-fill);
+    stroke: var(--icon-stroke);

    &:dir(rtl) {
      transform: scaleX(-1);