Reduce client-side JS for compose delay

core/templates/partials/compose-panel.html

@@ -1414,43 +1414,48 @@
     };
 
     const collectReplyTimingSnapshot = function () {
-      const rows = Array.from(thread.querySelectorAll(".compose-row"));
-      if (!rows.length) {
+      const rows = thread.querySelectorAll(".compose-row");
+      const count = rows ? rows.length : 0;
+      if (!count) {
         return null;
       }
-      const timeline = rows
-        .map(function (row, idx) {
-        return {
-          ts: toInt(row && row.dataset ? row.dataset.ts : 0),
-          outgoing: !!(row && row.classList && row.classList.contains("is-out")),
-          order: idx,
-        };
-      })
-        .filter(function (item) {
-        return item.ts > 0;
-      })
-        .sort(function (left, right) {
-        if (left.ts === right.ts) {
-          return left.order - right.order;
-        }
-        return left.ts - right.ts;
-      });
-      if (!timeline.length) {
+      const lastRow = rows[count - 1];
+      const lastTs = toInt(lastRow && lastRow.dataset ? lastRow.dataset.ts : 0);
+      if (!lastTs) {
         return null;
       }
       let counterpartBaselineMs = null;
-      for (let idx = timeline.length - 1; idx > 0; idx -= 1) {
-        const current = timeline[idx];
-        const previous = timeline[idx - 1];
-        if (!current.outgoing && previous.outgoing && current.ts >= previous.ts) {
-          counterpartBaselineMs = current.ts - previous.ts;
+      for (let idx = count - 1; idx > 0; idx -= 1) {
+        const currentRow = rows[idx];
+        const previousRow = rows[idx - 1];
+        const currentOutgoing = !!(
+          currentRow
+          && currentRow.classList
+          && currentRow.classList.contains("is-out")
+        );
+        const previousOutgoing = !!(
+          previousRow
+          && previousRow.classList
+          && previousRow.classList.contains("is-out")
+        );
+        const currentTs = toInt(
+          currentRow && currentRow.dataset ? currentRow.dataset.ts : 0
+        );
+        const previousTs = toInt(
+          previousRow && previousRow.dataset ? previousRow.dataset.ts : 0
+        );
+        if (!currentOutgoing && previousOutgoing && currentTs >= previousTs) {
+          counterpartBaselineMs = currentTs - previousTs;
           break;
         }
       }
-      const last = timeline[timeline.length - 1];
       return {
-        lastTs: last.ts,
-        isMyTurn: !last.outgoing,
+        lastTs: lastTs,
+        isMyTurn: !(
+          lastRow
+          && lastRow.classList
+          && lastRow.classList.contains("is-out")
+        ),
         counterpartBaselineMs: counterpartBaselineMs,
       };
     };
@@ -1497,7 +1502,6 @@
         isOverTarget: ratio > 1,
       };
       renderReplyTimingChip();
-      ensurePriorityGlanceOrder();
     };
     const collectLightboxImages = function () {
       return Array.from(thread.querySelectorAll(".compose-image"));
@@ -1880,8 +1884,7 @@
         glanceNode.appendChild(chip);
       });
 
-      renderReplyTimingChip();
-      ensurePriorityGlanceOrder();
+      renderReplyTimingChip({ placeAfterDelay: true });
 
       if (glanceNode.children.length) {
         glanceNode.classList.remove("is-hidden");
@@ -1890,34 +1893,11 @@
       }
     };
 
-    const ensurePriorityGlanceOrder = function () {
-      if (!glanceNode) {
-        return;
-      }
-      const children = Array.from(glanceNode.querySelectorAll(".compose-glance-item"));
-      const delayChip = children.find(function (chip) {
-        if (chip.classList.contains("is-delay")) {
-          return true;
-        }
-        const key = chip.querySelector(".compose-glance-key");
-        return /^delay$/i.test(String(key ? key.textContent : "").trim());
-      }) || null;
-      const replyChip = glanceNode.querySelector(".compose-glance-item-reply");
-
-      if (delayChip) {
-        glanceNode.insertBefore(delayChip, glanceNode.firstChild);
-      }
-      if (replyChip && delayChip) {
-        glanceNode.insertBefore(replyChip, delayChip.nextSibling);
-      } else if (replyChip) {
-        glanceNode.insertBefore(replyChip, glanceNode.firstChild);
-      }
-    };
-
-    const renderReplyTimingChip = function () {
+    const renderReplyTimingChip = function (options) {
       if (!glanceNode) {
         return;
       }
+      const placeAfterDelay = !!(options && options.placeAfterDelay);
       let chip = glanceNode.querySelector(".compose-glance-item-reply");
       if (!chip) {
         chip = document.createElement("span");
@@ -1945,6 +1925,15 @@
         glanceNode.appendChild(chip);
       }
 
+      if (placeAfterDelay) {
+        const delayChip = glanceNode.querySelector(".compose-glance-item.is-delay");
+        if (delayChip && chip !== delayChip.nextSibling) {
+          glanceNode.insertBefore(chip, delayChip.nextSibling);
+        } else if (!delayChip && glanceNode.firstChild !== chip) {
+          glanceNode.insertBefore(chip, glanceNode.firstChild);
+        }
+      }
+
       const valueNode = chip.querySelector('[data-role="reply-value"]');
       const fillNode = chip.querySelector('[data-role="reply-fill"]');
       if (valueNode) {