feat(nimbus): Advertise nimbus-devtools

Because:

- nimbus-devtools now can inform Experimenter what version is installed
  as of mozilla-extensions/nimbus-devtools#56; and
- we want users to update their version of nimbus-devtools to the latest
  and greatest.

this commit:

- adds a banner that informs the user if a new version of
  nimbus-devtools is released;
- adds a banner that informs the user about nimbus-devtools if they
  don't have it installed; and
- gives users the options to suppress the banner for a day, until the
  next version, or permanently.

Fixes #15137

Author: freshstrangemusic

experimenter/experimenter/nimbus_ui/static/js/index.js

@@ -8,6 +8,7 @@ import * as bootstrap from "bootstrap";
 import "htmx.org";
 import "bootstrap-select";
 import { setupReadonlyJsonEditors } from "./codemirror_utils.js";
+import { setupDevtoolsBanner } from "./nimbus_devtools.js";
 
 window.bootstrap = bootstrap;
 const setupThemeSwitcher = () => {
@@ -98,6 +99,7 @@ const setupHTMXLoadingOverlay = () => {
 };
 
 $(() => {
+  void setupDevtoolsBanner();
   setupThemeSwitcher();
   setupTooltips();
   setupToasts();

experimenter/experimenter/nimbus_ui/static/js/nimbus_devtools.js

@@ -0,0 +1,137 @@
+/* global cookieStore */
+
+const AVAILABLE_NIMBUS_DEVTOOLS_VERSION = [0, 4, 0];
+const COOKIE_NAME = "nimbus-devtools";
+const ONE_DAY = 60 * 60 * 24;
+
+function closeBanner(banner) {
+  banner.classList.add("d-none");
+}
+
+async function remindLater(banner) {
+  await cookieStore.set({
+    name: COOKIE_NAME,
+    sameSite: "strict",
+    maxAge: ONE_DAY,
+
+    value: JSON.stringify({
+      dismiss: true,
+    }),
+  });
+
+  closeBanner(banner);
+}
+
+async function remindNextVersion(banner) {
+  await cookieStore.set({
+    name: COOKIE_NAME,
+    sameSite: "strict",
+    value: JSON.stringify({
+      remindIfNewer: AVAILABLE_NIMBUS_DEVTOOLS_VERSION,
+    }),
+  });
+
+  closeBanner(banner);
+}
+
+async function dismiss(banner) {
+  await cookieStore.set({
+    name: "nimbus-devtools",
+    sameSite: "strict",
+    value: JSON.stringify({
+      dismiss: true,
+    }),
+  });
+
+  closeBanner(banner);
+}
+
+/**
+ * Compare two version 3-tuples.
+ *
+ * @param {[Number, Number, Number]} a The first version to compare.
+ * @param {[Number, Number, Number]} b The second version to compare.
+ *
+ * @returns {-1 | 0 | 1} -1 if a < b, 0 if a == b, 1 if a > b
+ */
+function versionCompare(a, b) {
+  return a[0] - b[0] || a[1] - b[1] || a[2] - b[2];
+}
+
+async function getCookie() {
+  const cookie = await cookieStore.get("nimbus-devtools").catch(() => null);
+  if (cookie?.value) {
+    try {
+      return JSON.parse(cookie.value);
+    } catch (e) {
+      console.error(`Invalid cookie '${cookie}'`, e);
+      await cookieStore.delete("nimbus-devtools");
+    }
+  }
+
+  return null;
+}
+
+export async function setupDevtoolsBanner() {
+  const cookie = await getCookie();
+
+  if (cookie?.dismiss) {
+    return;
+  }
+
+  if (
+    cookie?.remindIfNewer &&
+    Array.isArray(cookie.remindIfNewer) &&
+    versionCompare(AVAILABLE_NIMBUS_DEVTOOLS_VERSION, cookie.remindIfNewer) <= 0
+  ) {
+    return;
+  }
+
+  if (
+    window.__NIMBUS_DEVTOOLS__ &&
+    versionCompare(
+      AVAILABLE_NIMBUS_DEVTOOLS_VERSION,
+      window.__NIMBUS_DEVTOOLS__.version,
+    ) <= 0
+  ) {
+    return;
+  }
+
+  const banner = document.getElementById("nimbus-devtools-banner");
+
+  banner.classList.remove("d-none");
+
+  if (window.__NIMBUS_DEVTOOLS__?.version) {
+    banner.querySelector(".old-version-placeholder").textContent =
+      window.__NIMBUS_DEVTOOLS__.version.join(".");
+    banner
+      .querySelector(".nimbus-devtools-needs-update")
+      .classList.remove("d-none");
+  } else {
+    banner
+      .querySelector(".nimbus-devtools-needs-install")
+      .classList.remove("d-none");
+  }
+
+  banner
+    .querySelectorAll(".new-version-placeholder")
+    .forEach(
+      (el) => (el.textContent = AVAILABLE_NIMBUS_DEVTOOLS_VERSION.join(".")),
+    );
+
+  banner
+    .querySelector(".remind-later-btn")
+    .addEventListener("click", () => remindLater(banner));
+
+  banner
+    .querySelector(".remind-next-version-btn")
+    .addEventListener("click", () => remindNextVersion(banner));
+
+  banner
+    .querySelector(".dismiss-btn")
+    .addEventListener("click", () => dismiss(banner));
+
+  banner
+    .querySelector(".new-version-link")
+    .addEventListener("click", () => closeBanner(banner));
+}

experimenter/experimenter/nimbus_ui/templates/common/header.html

@@ -1,6 +1,7 @@
 {% load static %}
 
 {% include 'glean/opt_out_alert.html' %}
+{% include "nimbus_devtools/banner.html" %}
 
 <nav class="navbar navbar-expand-xl">
   <div class="container-fluid">

experimenter/experimenter/nimbus_ui/templates/nimbus_devtools/banner.html

@@ -0,0 +1,26 @@
+<div id="nimbus-devtools-banner"
+     class="alert alert-success bg-transparent text-success d-none">
+  <div class="nimbus-devtools-needs-install d-none">
+    <p>nimbus-devtools is either uninstalled or out-of-date.</p>
+    <p>
+      You can download the latest version of nimbus-devtools:
+      <a href="https://github.com/mozilla-extensions/nimbus-devtools/releases/latest"
+         target="_blank"
+         class="new-version-link">v<span class="new-version-placeholder"></span></a>
+    </p>
+  </div>
+  <div class="nimbus-devtools-needs-update d-none">
+    <p>
+      Your version of nimbus-devtools (v<span class="old-version-placeholder"></span>) is out of date.
+    </p>
+    <p>
+      A new version is available:
+      <a href="https://github.com/mozilla-extensions/nimbus-devtools/releases/latest"
+         target="_blank"
+         class="new-version-link">v<span class="new-version-placeholder"></span></a>
+    </p>
+  </div>
+  <button class="btn btn-primary me-2 remind-later-btn">Remind me tomorrow</button>
+  <button class="btn btn-danger me-2 remind-next-version-btn">Don't remind me about this version</button>
+  <button class="btn btn-danger me-2 dismiss-btn">Dismiss</button>
+</div>