Notification: render it inline using docTool.getRootSelector()

src/doctools.css

@@ -7,13 +7,31 @@
  **/
 @layer defaults {
   :root[data-readthedocs-tool="docusaurus"] {
-    --readthedocs-flyout-header-font-size: 0.9rem;
+    --readthedocs-flyout-header-font-size: 0.95rem;
+  }
+
+  :root[data-readthedocs-tool="docsify"] {
+    --readthedocs-notification-font-size: 0.95rem;
+  }
+
+  :root[data-readthedocs-tool="asciidoctor"] {
+    --readthedocs-notification-font-size: 0.95rem;
+  }
+
+  :root[data-readthedocs-tool="antora"] {
+    --readthedocs-notification-font-size: 0.8rem;
+  }
+
+  :root[data-readthedocs-tool="jekyll"] {
+    --readthedocs-notification-font-size: 0.9rem;
   }
 
   :root[data-readthedocs-tool="mkdocs-material"] {
-    --readthedocs-font-size: 0.58rem;
-    --readthedocs-flyout-header-font-size: 0.7rem;
-    --readthedocs-flyout-font-size: 0.58rem;
+    --readthedocs-font-size: 0.65rem;
+    --readthedocs-flyout-header-font-size: 0.75rem;
+    --readthedocs-flyout-font-size: 0.65rem;
+
+    --readthedocs-notification-font-size: 0.75rem;
   }
 
   :root[data-readthedocs-tool="antora"] {
@@ -29,14 +47,21 @@
   }
 
   :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] {
-    --readthedocs-font-size: 0.725rem;
-    --readthedocs-flyout-header-font-size: 0.845rem;
-    --readthedocs-flyout-font-size: 0.725rem;
+    --readthedocs-font-size: 0.9rem;
+    --readthedocs-flyout-header-font-size: 0.9rem;
+    --readthedocs-flyout-font-size: 0.8rem;
+
+    --readthedocs-notification-font-size: 0.9rem;
   }
 
   :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] {
     --readthedocs-font-size: 0.58rem;
     --readthedocs-flyout-header-font-size: 0.7rem;
     --readthedocs-flyout-font-size: 0.58rem;
   }
+
+  :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="alabaster"] {
+    --readthedocs-flyout-header-font-size: 0.95rem;
+    --readthedocs-notification-font-size: 0.9rem;
+  }
 }

src/notification.js

@@ -47,6 +47,7 @@ export class NotificationElement extends LitElement {
     this.localStorageKey = null;
     this.dismissedTimestamp = null;
     this.autoDismissed = false;
+    this.autoDismissEnabled = true;
 
     // Trigger the auto-dismiss timer at startup
     this.triggerAutoDismissTimer();
@@ -66,7 +67,7 @@ export class NotificationElement extends LitElement {
   }
 
   triggerAutoDismissTimer() {
-    if (!document.hidden && !this.autoDismissed) {
+    if (this.autoDismissEnabled && !document.hidden && !this.autoDismissed) {
       clearTimeout(this.timerID);
       this.timerID = setTimeout(() => {
         this.autoDismissed = true;
@@ -414,6 +415,15 @@ export class NotificationAddon extends AddonBase {
   static addonEnabledPath = "addons.notifications.enabled";
   static addonName = "Notification";
   static elementClass = NotificationElement;
+  static elementInjectBehavior = "prepend";
+
+  setupInitialBehavior() {
+    for (const element of this.elements) {
+      element.autoDismissEnabled = false;
+      element.clearAutoDismissTimer();
+      element.className = "raised";
+    }
+  }
 }
 
 customElements.define(NotificationElement.elementName, NotificationElement);

src/utils.js

@@ -97,15 +97,53 @@ export class AddonBase {
       if (!this.elements.length) {
         this.elements = [new this.constructor.elementClass()];
 
-        // We cannot use `render(this.elements[0], document.body)` because there is a race conditions between all the addons.
-        // So, we append the web-component first and then request an update of it.
-        document.body.append(this.elements[0]);
+        const injectBehavior = this.constructor.elementInjectBehavior;
+        const selector = this.getElementInjectSelector();
+        const elementSelector =
+          document.querySelector(selector) || document.querySelector("body");
+
+        // Setup the initial behavior only if we are using a custom position for it.
+        if (elementSelector.tagName.toLocaleLowerCase() !== "body") {
+          this.setupInitialBehavior();
+        }
+
+        if (injectBehavior === "prepend") {
+          elementSelector.prepend(this.elements[0]);
+        } else if (injectBehavior === "append") {
+          elementSelector.append(this.elements[0]);
+        } else {
+          // We cannot use `render(this.elements[0], document.body)` because there is a race conditions between all the addons.
+          // So, we append the web-component first and then request an update of it.
+          document.body.append(this.elements[0]);
+        }
       }
     }
 
     this.loadConfig(config);
   }
 
+  /**
+   * Setup the initial behavior of the addon after instatiated.
+   *
+   * There are some addons we want to behave differently if we are injecting
+   * them into a known position in the page, using a custom CSS selector.
+   *
+   * This method has to be overriden by the addon.
+   */
+  setupInitialBehavior() {
+    return null;
+  }
+
+  /**
+   * Returns the selector where the element has to be injected.
+   *
+   * The element will be "appended" or "prepended" based on
+   * `elementInjectBehavior` static class property.
+   */
+  getElementInjectSelector() {
+    return docTool.getRootSelector() || "body";
+  }
+
   loadConfig(config) {
     for (const element of this.elements) {
       element.loadConfig(config);