rails-profiler 0.20.0 → 0.22.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1f2b977ebc11075e9d00ae802a9d8f038819907c18b17073cf6b3a0fa437ba29
-  data.tar.gz: 4565ab7a98d1a8992cfc3bde0646c6dea355b64d79ab66849c99cab2fff024a3
+  metadata.gz: b7bf5cab3285946189ba9adee630f79ad7303ae591aa4364e0fe4d7af320bab9
+  data.tar.gz: 4c2ad13691c8c6556355c2c4b2c5934ef2d6aab9d956e2f30d16d92098cd5997
 SHA512:
-  metadata.gz: 48c0c092e6d9145ed04651fbc3e924fa7f3e02d79da737cc6a052e0d9d7b41c590651c086a941d76a983eef29358ee0817b1fd078c41d0a7edd750a948a191f2
-  data.tar.gz: 7de21cc82a590ff838ed5130970e6947c69e4910ff2ebb5c93431f4d4deba93389cdf446e370fe50a9fce7097526b16ffcd442a18bea82ef29716b0638746028
+  metadata.gz: 1c846fa98d00dd5e6c5cc5ef8ca443b6f2b02664b9fdee77479bdbf6013d38cdf359e892ba6f08721b54fa5fb13d9b8663b909d7f17f97a849402654c4bf3821
+  data.tar.gz: 1697e1bfe8842df4d41aed3a1c5e84b8090d510fab6ee9622afc44e326553c13843a5252b74b34d5d6bb4195629f3d05330953b5527ef7a596aae89bf9a36b11

data/app/assets/builds/profiler-toolbar.js

@@ -68,8 +68,8 @@
     }
   }
   function P(n2, l3, u4, t3, i3, r3, o3, e3, f4, c3, s3) {
-    var a3, h3, y3, d3, w3, g2, _2, m3 = t3 && t3.__k || v, b = l3.length;
-    for (f4 = A(u4, l3, m3, f4, b), a3 = 0; a3 < b; a3++) null != (y3 = u4.__k[a3]) && (h3 = -1 != y3.__i && m3[y3.__i] || p, y3.__i = a3, g2 = z(n2, y3, h3, i3, r3, o3, e3, f4, c3, s3), d3 = y3.__e, y3.ref && h3.ref != y3.ref && (h3.ref && D(h3.ref, null, y3), s3.push(y3.ref, y3.__c || d3, y3)), null == w3 && null != d3 && (w3 = d3), (_2 = !!(4 & y3.__u)) || h3.__k === y3.__k ? f4 = H(y3, f4, n2, _2) : "function" == typeof y3.type && void 0 !== g2 ? f4 = g2 : d3 && (f4 = d3.nextSibling), y3.__u &= -7);
+    var a3, h3, y3, d3, w3, g2, _3, m3 = t3 && t3.__k || v, b = l3.length;
+    for (f4 = A(u4, l3, m3, f4, b), a3 = 0; a3 < b; a3++) null != (y3 = u4.__k[a3]) && (h3 = -1 != y3.__i && m3[y3.__i] || p, y3.__i = a3, g2 = z(n2, y3, h3, i3, r3, o3, e3, f4, c3, s3), d3 = y3.__e, y3.ref && h3.ref != y3.ref && (h3.ref && D(h3.ref, null, y3), s3.push(y3.ref, y3.__c || d3, y3)), null == w3 && null != d3 && (w3 = d3), (_3 = !!(4 & y3.__u)) || h3.__k === y3.__k ? f4 = H(y3, f4, n2, _3) : "function" == typeof y3.type && void 0 !== g2 ? f4 = g2 : d3 && (f4 = d3.nextSibling), y3.__u &= -7);
     return u4.__e = w3, f4;
   }
   function A(n2, l3, u4, t3, i3) {
@@ -130,11 +130,11 @@
     };
   }
   function z(n2, u4, t3, i3, r3, o3, e3, f4, c3, s3) {
-    var a3, h3, p3, y3, _2, m3, b, S2, C3, M2, $2, I2, A3, H2, L, T3 = u4.type;
+    var a3, h3, p3, y3, _3, m3, b, S2, C3, M2, $2, I2, A3, H2, L, T3 = u4.type;
     if (void 0 !== u4.constructor) return null;
     128 & t3.__u && (c3 = !!(32 & t3.__u), o3 = [f4 = u4.__e = t3.__e]), (a3 = l.__b) && a3(u4);
     n: if ("function" == typeof T3) try {
-      if (S2 = u4.props, C3 = T3.prototype && T3.prototype.render, M2 = (a3 = T3.contextType) && i3[a3.__c], $2 = a3 ? M2 ? M2.props.value : a3.__ : i3, t3.__c ? b = (h3 = u4.__c = t3.__c).__ = h3.__E : (C3 ? u4.__c = h3 = new T3(S2, $2) : (u4.__c = h3 = new x(S2, $2), h3.constructor = T3, h3.render = G), M2 && M2.sub(h3), h3.state || (h3.state = {}), h3.__n = i3, p3 = h3.__d = true, h3.__h = [], h3._sb = []), C3 && null == h3.__s && (h3.__s = h3.state), C3 && null != T3.getDerivedStateFromProps && (h3.__s == h3.state && (h3.__s = w({}, h3.__s)), w(h3.__s, T3.getDerivedStateFromProps(S2, h3.__s))), y3 = h3.props, _2 = h3.state, h3.__v = u4, p3) C3 && null == T3.getDerivedStateFromProps && null != h3.componentWillMount && h3.componentWillMount(), C3 && null != h3.componentDidMount && h3.__h.push(h3.componentDidMount);
+      if (S2 = u4.props, C3 = T3.prototype && T3.prototype.render, M2 = (a3 = T3.contextType) && i3[a3.__c], $2 = a3 ? M2 ? M2.props.value : a3.__ : i3, t3.__c ? b = (h3 = u4.__c = t3.__c).__ = h3.__E : (C3 ? u4.__c = h3 = new T3(S2, $2) : (u4.__c = h3 = new x(S2, $2), h3.constructor = T3, h3.render = G), M2 && M2.sub(h3), h3.state || (h3.state = {}), h3.__n = i3, p3 = h3.__d = true, h3.__h = [], h3._sb = []), C3 && null == h3.__s && (h3.__s = h3.state), C3 && null != T3.getDerivedStateFromProps && (h3.__s == h3.state && (h3.__s = w({}, h3.__s)), w(h3.__s, T3.getDerivedStateFromProps(S2, h3.__s))), y3 = h3.props, _3 = h3.state, h3.__v = u4, p3) C3 && null == T3.getDerivedStateFromProps && null != h3.componentWillMount && h3.componentWillMount(), C3 && null != h3.componentDidMount && h3.__h.push(h3.componentDidMount);
       else {
         if (C3 && null == T3.getDerivedStateFromProps && S2 !== y3 && null != h3.componentWillReceiveProps && h3.componentWillReceiveProps(S2, $2), u4.__v == t3.__v || !h3.__e && null != h3.shouldComponentUpdate && false === h3.shouldComponentUpdate(S2, h3.__s, $2)) {
           u4.__v != t3.__v && (h3.props = S2, h3.state = h3.__s, h3.__d = false), u4.__e = t3.__e, u4.__k = t3.__k, u4.__k.some(function(n3) {
@@ -143,14 +143,14 @@
           break n;
         }
         null != h3.componentWillUpdate && h3.componentWillUpdate(S2, h3.__s, $2), C3 && null != h3.componentDidUpdate && h3.__h.push(function() {
-          h3.componentDidUpdate(y3, _2, m3);
+          h3.componentDidUpdate(y3, _3, m3);
         });
       }
       if (h3.context = $2, h3.props = S2, h3.__P = n2, h3.__e = false, I2 = l.__r, A3 = 0, C3) h3.state = h3.__s, h3.__d = false, I2 && I2(u4), a3 = h3.render(h3.props, h3.state, h3.context), v.push.apply(h3.__h, h3._sb), h3._sb = [];
       else do {
         h3.__d = false, I2 && I2(u4), a3 = h3.render(h3.props, h3.state, h3.context), h3.state = h3.__s;
       } while (h3.__d && ++A3 < 25);
-      h3.state = h3.__s, null != h3.getChildContext && (i3 = w(w({}, i3), h3.getChildContext())), C3 && !p3 && null != h3.getSnapshotBeforeUpdate && (m3 = h3.getSnapshotBeforeUpdate(y3, _2)), H2 = null != a3 && a3.type === k && null == a3.key ? q(a3.props.children) : a3, f4 = P(n2, d(H2) ? H2 : [H2], u4, t3, i3, r3, o3, e3, f4, c3, s3), h3.base = u4.__e, u4.__u &= -161, h3.__h.length && e3.push(h3), b && (h3.__E = h3.__ = null);
+      h3.state = h3.__s, null != h3.getChildContext && (i3 = w(w({}, i3), h3.getChildContext())), C3 && !p3 && null != h3.getSnapshotBeforeUpdate && (m3 = h3.getSnapshotBeforeUpdate(y3, _3)), H2 = null != a3 && a3.type === k && null == a3.key ? q(a3.props.children) : a3, f4 = P(n2, d(H2) ? H2 : [H2], u4, t3, i3, r3, o3, e3, f4, c3, s3), h3.base = u4.__e, u4.__u &= -161, h3.__h.length && e3.push(h3), b && (h3.__E = h3.__ = null);
     } catch (n3) {
       if (u4.__v = null, c3 || null != o3) if (n3.then) {
         for (u4.__u |= c3 ? 160 : 128; f4 && 8 == f4.nodeType && f4.nextSibling; ) f4 = f4.nextSibling;
@@ -184,7 +184,7 @@
     return "object" != typeof n2 || null == n2 || n2.__b > 0 ? n2 : d(n2) ? n2.map(q) : w({}, n2);
   }
   function B(u4, t3, i3, r3, o3, e3, f4, c3, s3) {
-    var a3, h3, v3, y3, w3, _2, m3, b = i3.props || p, k3 = t3.props, x2 = t3.type;
+    var a3, h3, v3, y3, w3, _3, m3, b = i3.props || p, k3 = t3.props, x2 = t3.type;
     if ("svg" == x2 ? o3 = "http://www.w3.org/2000/svg" : "math" == x2 ? o3 = "http://www.w3.org/1998/Math/MathML" : o3 || (o3 = "http://www.w3.org/1999/xhtml"), null != e3) {
       for (a3 = 0; a3 < e3.length; a3++) if ((w3 = e3[a3]) && "setAttribute" in w3 == !!x2 && (x2 ? w3.localName == x2 : 3 == w3.nodeType)) {
         u4 = w3, e3[a3] = null;
@@ -199,10 +199,10 @@
     else {
       if (e3 = e3 && n.call(u4.childNodes), !c3 && null != e3) for (b = {}, a3 = 0; a3 < u4.attributes.length; a3++) b[(w3 = u4.attributes[a3]).name] = w3.value;
       for (a3 in b) w3 = b[a3], "dangerouslySetInnerHTML" == a3 ? v3 = w3 : "children" == a3 || a3 in k3 || "value" == a3 && "defaultValue" in k3 || "checked" == a3 && "defaultChecked" in k3 || F(u4, a3, null, w3, o3);
-      for (a3 in k3) w3 = k3[a3], "children" == a3 ? y3 = w3 : "dangerouslySetInnerHTML" == a3 ? h3 = w3 : "value" == a3 ? _2 = w3 : "checked" == a3 ? m3 = w3 : c3 && "function" != typeof w3 || b[a3] === w3 || F(u4, a3, w3, b[a3], o3);
+      for (a3 in k3) w3 = k3[a3], "children" == a3 ? y3 = w3 : "dangerouslySetInnerHTML" == a3 ? h3 = w3 : "value" == a3 ? _3 = w3 : "checked" == a3 ? m3 = w3 : c3 && "function" != typeof w3 || b[a3] === w3 || F(u4, a3, w3, b[a3], o3);
       if (h3) c3 || v3 && (h3.__html == v3.__html || h3.__html == u4.innerHTML) || (u4.innerHTML = h3.__html), t3.__k = [];
       else if (v3 && (u4.innerHTML = ""), P("template" == t3.type ? u4.content : u4, d(y3) ? y3 : [y3], t3, i3, r3, "foreignObject" == x2 ? "http://www.w3.org/1999/xhtml" : o3, e3, f4, e3 ? e3[0] : i3.__k && S(i3, 0), c3, s3), null != e3) for (a3 = e3.length; a3--; ) g(e3[a3]);
-      c3 || (a3 = "value", "progress" == x2 && null == _2 ? u4.removeAttribute("value") : null != _2 && (_2 !== u4[a3] || "progress" == x2 && !_2 || "option" == x2 && _2 != b[a3]) && F(u4, a3, _2, b[a3], o3), a3 = "checked", null != m3 && m3 != u4[a3] && F(u4, a3, m3, b[a3], o3));
+      c3 || (a3 = "value", "progress" == x2 && null == _3 ? u4.removeAttribute("value") : null != _3 && (_3 !== u4[a3] || "progress" == x2 && !_3 || "option" == x2 && _3 != b[a3]) && F(u4, a3, _3, b[a3], o3), a3 = "checked", null != m3 && m3 != u4[a3] && F(u4, a3, m3, b[a3], o3));
     }
     return u4;
   }
@@ -314,6 +314,10 @@
     var i3 = p2(t2++, 3);
     !c2.__s && C2(i3.__H, u4) && (i3.__ = n2, i3.u = u4, r2.__H.__h.push(i3));
   }
+  function _2(n2, u4) {
+    var i3 = p2(t2++, 4);
+    !c2.__s && C2(i3.__H, u4) && (i3.__ = n2, i3.u = u4, r2.__h.push(i3));
+  }
   function A2(n2) {
     return o2 = 5, T2(function() {
       return { current: n2 };
@@ -427,7 +431,7 @@
       }
       hideTimer.current = setTimeout(() => setVisible(false), 150);
     };
-    y2(() => {
+    _2(() => {
       if (visible && panelRef.current) {
         const el = panelRef.current;
         el.style.left = "50%";
@@ -453,8 +457,7 @@
       "div",
       {
         ref: panelRef,
-        class: `profiler-toolbar-panel${panelLarge ? " profiler-toolbar-panel-large" : ""}`,
-        style: { display: visible ? "block" : "none" },
+        class: `profiler-toolbar-panel${panelLarge ? " profiler-toolbar-panel-large" : ""}${visible ? " is-visible" : ""}`,
         onMouseEnter: show,
         onMouseLeave: hide,
         children: panel
@@ -1007,6 +1010,60 @@
     ] });
   }
 
+  // app/assets/typescript/profiler/components/toolbar/panels/MailerPanel.tsx
+  function MailerPanel({ mailerData }) {
+    const hasErrors = mailerData.failed > 0 || mailerData.loop_warnings.length > 0;
+    return /* @__PURE__ */ u3(k, { children: [
+      /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-header", children: [
+        "Mailers",
+        /* @__PURE__ */ u3("span", { class: "profiler-float-right", children: [
+          mailerData.total,
+          " email",
+          mailerData.total !== 1 ? "s" : ""
+        ] })
+      ] }),
+      /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-content", children: [
+        mailerData.deliver_now > 0 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row", children: [
+          /* @__PURE__ */ u3("span", { children: "deliver_now" }),
+          /* @__PURE__ */ u3("strong", { children: mailerData.deliver_now })
+        ] }),
+        mailerData.deliver_later > 0 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row", children: [
+          /* @__PURE__ */ u3("span", { children: "deliver_later" }),
+          /* @__PURE__ */ u3("strong", { children: mailerData.deliver_later })
+        ] }),
+        (mailerData.queued_count ?? 0) > 0 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row", children: [
+          /* @__PURE__ */ u3("span", { children: "Queued" }),
+          /* @__PURE__ */ u3("strong", { children: mailerData.queued_count })
+        ] }),
+        mailerData.multi_part_count > 0 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row", children: [
+          /* @__PURE__ */ u3("span", { children: "Multi-part" }),
+          /* @__PURE__ */ u3("strong", { children: mailerData.multi_part_count })
+        ] }),
+        mailerData.failed > 0 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row", children: [
+          /* @__PURE__ */ u3("span", { children: "Errors" }),
+          /* @__PURE__ */ u3("strong", { class: "profiler-text--error", children: mailerData.failed })
+        ] }),
+        mailerData.loop_warnings.length > 0 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row", children: [
+          /* @__PURE__ */ u3("span", { class: "profiler-text--warning", children: "\u26A0\uFE0F Loop detected" }),
+          /* @__PURE__ */ u3("strong", { class: "profiler-text--warning", children: mailerData.loop_warnings.length })
+        ] }),
+        [...mailerData.emails, ...mailerData.errors].slice(0, 3).map((email, i3) => /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row profiler-text--sm", children: [
+          /* @__PURE__ */ u3("span", { class: "profiler-text--muted", children: [
+            email.mailer_class,
+            "#",
+            email.action
+          ] }),
+          /* @__PURE__ */ u3("span", { class: email.error ? "profiler-text--error" : "profiler-text--success", children: email.error ? "\u274C" : "\u2705" })
+        ] }, i3)),
+        mailerData.total > 3 && /* @__PURE__ */ u3("div", { class: "profiler-toolbar-panel-row profiler-text--muted profiler-text--xs", children: [
+          "+",
+          mailerData.total - 3,
+          " more\u2026"
+        ] })
+      ] })
+    ] });
+  }
+
   // app/assets/typescript/profiler/components/toolbar/ToolbarApp.tsx
   function statusClass2(status) {
     if (status >= 200 && status < 300) return "profiler-text--success";
@@ -1027,7 +1084,7 @@
       second: "2-digit"
     });
   }
-  function ToolbarApp({ profile, token, currentVersion }) {
+  function ToolbarApp({ profile, token }) {
     const cd = profile.collectors_data || {};
     const requestData = cd["request"];
     const dbData = cd["database"];
@@ -1042,13 +1099,14 @@
     const routesData = cd["routes"];
     const i18nData = cd["i18n"];
     const envData = cd["env"];
+    const mailerData = cd["mailer"];
     const childJobs = profile.child_jobs ?? [];
     const reqClass = statusClass2(profile.status);
     const durClass = durationClass(profile.duration);
     const dbClass = (dbData?.slow_queries ?? 0) > 0 ? "profiler-text--error" : "profiler-text--success";
     const ajaxClass = (ajaxData?.total_requests ?? 0) > 20 ? "profiler-text--error" : "profiler-text--success";
     const cacheClass = (cacheData?.hit_rate ?? 0) > 80 ? "profiler-text--success" : "profiler-text--warning";
-    return /* @__PURE__ */ u3("div", { class: "profiler-toolbar-container", children: [
+    return /* @__PURE__ */ u3(k, { children: /* @__PURE__ */ u3("div", { class: "profiler-toolbar-container", children: [
       requestData && /* @__PURE__ */ u3(k, { children: [
         /* @__PURE__ */ u3(
           ToolbarItem,
@@ -1280,6 +1338,32 @@
           ]
         }
       ),
+      mailerData && (mailerData.total > 0 || (mailerData.queued_count ?? 0) > 0) && /* @__PURE__ */ u3(
+        ToolbarItem,
+        {
+          href: `/_profiler/profiles/${token}?tab=mailer`,
+          className: mailerData.failed > 0 ? "profiler-text--error" : "profiler-text--success",
+          panelLarge: true,
+          panel: /* @__PURE__ */ u3(MailerPanel, { mailerData }),
+          children: [
+            /* @__PURE__ */ u3("span", { class: "profiler-text--muted profiler-text--xs", children: "MAIL" }),
+            mailerData.total > 0 && /* @__PURE__ */ u3("span", { children: mailerData.total }),
+            mailerData.total === 0 && (mailerData.queued_count ?? 0) > 0 && /* @__PURE__ */ u3("span", { class: "profiler-text--muted", children: [
+              mailerData.queued_count,
+              "q"
+            ] }),
+            mailerData.total > 0 && (mailerData.queued_count ?? 0) > 0 && /* @__PURE__ */ u3("span", { class: "profiler-text--muted profiler-text--xs", children: [
+              "+",
+              mailerData.queued_count,
+              "q"
+            ] }),
+            mailerData.failed > 0 && /* @__PURE__ */ u3("span", { class: "profiler-text--error profiler-text--xs", children: [
+              "\u25B2 ",
+              mailerData.failed
+            ] })
+          ]
+        }
+      ),
       envData && envData.total > 0 && /* @__PURE__ */ u3(
         ToolbarItem,
         {
@@ -1291,83 +1375,84 @@
           ]
         }
       ),
-      profile.gem_version && profile.gem_version !== currentVersion ? /* @__PURE__ */ u3(
-        "a",
-        {
-          href: `/_profiler/profiles/${token}`,
-          class: "profiler-toolbar-item profiler-text--warning",
-          title: `Captur\xE9 avec v${profile.gem_version} \u2014 actuel : v${currentVersion}`,
-          children: [
-            "\u26A0\uFE0F v",
-            profile.gem_version
-          ]
-        }
-      ) : currentVersion ? /* @__PURE__ */ u3("span", { class: "profiler-toolbar-item", style: "cursor:default", children: [
-        "v",
-        currentVersion
-      ] }) : null,
-      /* @__PURE__ */ u3("a", { href: "/_profiler", class: "profiler-toolbar-item", children: "\u2B21 Profiler" })
-    ] });
+      /* @__PURE__ */ u3("a", { href: "/_profiler", class: "profiler-toolbar-item profiler-toolbar-logo", children: "\u2B21 Profiler" })
+    ] }) });
   }
 
   // app/assets/typescript/profiler/toolbar-bundle.tsx
-  function applyTheme(el) {
+  var ANIM_MS = 280;
+  function applyTheme(elements) {
     const stored = localStorage.getItem("profiler-theme");
     const theme = stored === "light" ? "light" : stored === "dark" ? "dark" : window.matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
-    el.setAttribute("data-theme", theme);
+    elements.forEach((el) => el.setAttribute("data-theme", theme));
+  }
+  function ToolbarMount({ token }) {
+    const [profile, setProfile] = d2(null);
+    y2(() => {
+      const load = () => {
+        fetch(`/_profiler/api/toolbar/${token}`).then((res) => res.json()).then((data) => {
+          if (data.profile) setProfile(data.profile);
+        }).catch((err) => console.debug("Profiler toolbar load failed:", err));
+      };
+      window.__PROFILER_REFRESH_TOOLBAR__ = load;
+      load();
+    }, [token]);
+    if (!profile) return null;
+    return /* @__PURE__ */ u3(ToolbarApp, { profile, token });
   }
   function mountToolbar() {
     const el = document.getElementById("profiler-toolbar");
-    if (!el) return;
+    const toggleEl = document.getElementById("profiler-toolbar-toggle");
+    if (!el || !toggleEl) return;
     const token = el.dataset.token;
     if (!token) return;
-    const currentVersion = el.dataset.version ?? "";
-    applyTheme(el);
+    const themeEls = [el, toggleEl];
+    applyTheme(themeEls);
     window.addEventListener("storage", (e3) => {
-      if (e3.key === "profiler-theme") applyTheme(el);
+      if (e3.key === "profiler-theme") applyTheme(themeEls);
     });
     window.addEventListener("profiler:theme-change", ((e3) => {
-      if (e3.detail?.theme) el.setAttribute("data-theme", e3.detail.theme);
+      if (e3.detail?.theme) themeEls.forEach((elem) => elem.setAttribute("data-theme", e3.detail.theme));
     }));
-    const renderToolbar = (profile) => {
-      J(/* @__PURE__ */ u3(ToolbarApp, { profile, token, currentVersion }), el);
-      applyTheme(el);
-    };
-    const loadAndRender = () => {
-      fetch(`/_profiler/api/toolbar/${token}`).then((res) => res.json()).then((data) => {
-        if (data.profile) renderToolbar(data.profile);
-      }).catch((err) => console.debug("Profiler toolbar load failed:", err));
-    };
-    window.__PROFILER_REFRESH_TOOLBAR__ = loadAndRender;
-    loadAndRender();
+    let isCollapsed = localStorage.getItem("profiler-toolbar-collapsed") === "true";
+    toggleEl.dataset.collapsed = String(isCollapsed);
+    if (isCollapsed && !el.style.transform) {
+      el.style.animation = "none";
+      el.style.transform = "translateX(calc(100% + 44px))";
+    }
+    if (!isCollapsed) {
+      setTimeout(() => {
+        el.style.animation = "none";
+      }, 400);
+    }
+    function toggleCollapse() {
+      const next = !isCollapsed;
+      isCollapsed = next;
+      localStorage.setItem("profiler-toolbar-collapsed", String(next));
+      toggleEl.dataset.collapsed = String(next);
+      if (next) {
+        el.style.transition = `transform ${ANIM_MS}ms cubic-bezier(0.4,0,0.2,1)`;
+        el.style.transform = "translateX(calc(100% + 44px))";
+      } else {
+        el.style.transition = "none";
+        el.style.transform = "translateX(calc(100% + 44px))";
+        void el.offsetWidth;
+        el.style.transition = `transform ${ANIM_MS}ms cubic-bezier(0.4,0,0.2,1)`;
+        el.style.transform = "translateX(0)";
+        setTimeout(() => {
+          el.style.transform = "";
+          el.style.transition = "";
+        }, ANIM_MS + 50);
+      }
+    }
+    toggleEl.addEventListener("click", toggleCollapse);
     document.addEventListener("keydown", (e3) => {
       if (e3.altKey && e3.key === "p") {
         e3.preventDefault();
-        const hidden2 = el.dataset.hidden === "true";
-        if (hidden2) {
-          el.dataset.hidden = "false";
-          el.style.transform = "translateY(0)";
-          el.style.opacity = "1";
-          localStorage.setItem("profiler-toolbar-hidden", "false");
-        } else {
-          el.dataset.hidden = "true";
-          el.style.transform = "translateY(100%)";
-          el.style.opacity = "0";
-          localStorage.setItem("profiler-toolbar-hidden", "true");
-        }
-      }
-      if (e3.key === "Escape") {
-        el.dataset.hidden = "true";
-        el.style.transform = "translateY(100%)";
-        el.style.opacity = "0";
+        toggleCollapse();
       }
     });
-    const hidden = localStorage.getItem("profiler-toolbar-hidden") === "true";
-    if (hidden) {
-      el.dataset.hidden = "true";
-      el.style.transform = "translateY(100%)";
-      el.style.opacity = "0";
-    }
+    J(/* @__PURE__ */ u3(ToolbarMount, { token }), el);
   }
   if (document.readyState === "loading") {
     document.addEventListener("DOMContentLoaded", mountToolbar);

data/app/assets/builds/profiler.css

@@ -1395,6 +1395,26 @@ tr:hover .btn-row-delete {
   color: var(--profiler-text-muted);
 }
 
+@keyframes pfPop {
+  0% {
+    transform: scaleX(1);
+  }
+  15% {
+    transform: scaleX(1.18);
+  }
+  40% {
+    transform: scaleX(0.87);
+  }
+  65% {
+    transform: scaleX(1.08);
+  }
+  85% {
+    transform: scaleX(0.97);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}
 #profiler-toolbar {
   position: fixed;
   bottom: 0;
@@ -1409,6 +1429,7 @@ tr:hover .btn-row-delete {
   font-family: var(--profiler-font-mono);
   font-size: 11px;
   animation: toolbarIn 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
+  transition: left 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 #profiler-toolbar::before {
   content: "";
@@ -1464,12 +1485,10 @@ tr:hover .btn-row-delete {
   background: var(--profiler-accent);
   transform: scaleX(0);
   transform-origin: left;
-  transition: transform var(--profiler-transition-base);
+  transition: transform 280ms cubic-bezier(0.34, 1.4, 0.64, 1);
 }
 .profiler-toolbar-item:last-child {
   border-right: none;
-  margin-left: auto;
-  padding-left: 20px;
 }
 .profiler-toolbar-item:hover {
   color: var(--profiler-text);
@@ -1479,12 +1498,30 @@ tr:hover .btn-row-delete {
   transform: scaleX(1);
 }
 
+.profiler-toolbar-collapse-btn {
+  margin-left: auto;
+  padding: 0 14px;
+  border-left: 1px solid var(--profiler-border);
+  font-size: 10px;
+  color: var(--profiler-text-muted);
+  cursor: pointer;
+}
+.profiler-toolbar-collapse-btn:hover {
+  color: var(--profiler-text);
+  background: var(--profiler-accent-bg);
+  animation: pfPop 380ms ease-out both;
+}
+
 a.profiler-toolbar-item {
   cursor: pointer;
   font-family: var(--profiler-font-mono);
   font-size: 11px;
 }
 
+.profiler-toolbar-logo {
+  border-right: 1px solid var(--profiler-border) !important;
+}
+
 .profiler-text--success {
   color: var(--profiler-success) !important;
 }
@@ -1505,19 +1542,22 @@ a.profiler-toolbar-item {
   color: var(--profiler-accent) !important;
 }
 
-a.profiler-toolbar-item.profiler-text--error::after {
+.profiler-toolbar-item.profiler-text--error::after {
   background: var(--profiler-error);
 }
 
-a.profiler-toolbar-item.profiler-text--warning::after {
+.profiler-toolbar-item.profiler-text--warning::after {
   background: var(--profiler-warning);
 }
 
+.profiler-toolbar-item.profiler-text--success::after {
+  background: var(--profiler-success);
+}
+
 .profiler-toolbar-hoverable {
   position: relative;
 }
 .profiler-toolbar-hoverable .profiler-toolbar-panel {
-  display: none;
   position: absolute;
   bottom: calc(100% + 12px);
   left: 50%;
@@ -1530,6 +1570,16 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   box-shadow: var(--profiler-shadow-xl), 0 0 0 1px var(--profiler-border-accent);
   z-index: var(--profiler-z-panel);
   overflow: hidden;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 160ms;
+}
+.profiler-toolbar-hoverable .profiler-toolbar-panel.is-visible {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
 }
 .profiler-toolbar-hoverable .profiler-toolbar-panel::before {
   content: "";
@@ -1674,6 +1724,16 @@ a.profiler-toolbar-item.profiler-text--warning::after {
   margin-top: 6px;
 }
 
+#profiler-toolbar[data-collapsed=true] .profiler-toolbar-item:not(.profiler-toolbar-collapse-btn) {
+  display: none;
+}
+#profiler-toolbar[data-collapsed=true] .profiler-toolbar-collapse-btn {
+  margin-left: 0;
+}
+#profiler-toolbar[data-collapsed=true]::before {
+  opacity: 0;
+}
+
 .container > table {
   width: 100%;
   border-collapse: collapse;