Add divide by zero protection in timer.js (#1687)

* add divide by 0 protection in timer.js getLeft()
* add divide by 0 protection in timer.js getCSSWidth()

Co-authored-by: Tim Schilling <schillingt@better-simple.com>

Author: SmailBestybay

debug_toolbar/static/debug_toolbar/js/timer.js

@@ -5,15 +5,29 @@ function insertBrowserTiming() {
         timingEnd = performance.timing.loadEventEnd,
         totalTime = timingEnd - timingOffset;
     function getLeft(stat) {
-        return ((performance.timing[stat] - timingOffset) / totalTime) * 100.0;
+        if (totalTime !== 0) {
+            return (
+                ((performance.timing[stat] - timingOffset) / totalTime) * 100.0
+            );
+        } else {
+            return 0;
+        }
     }
     function getCSSWidth(stat, endStat) {
-        let width =
-            ((performance.timing[endStat] - performance.timing[stat]) /
-                totalTime) *
-            100.0;
-        // Calculate relative percent (same as sql panel logic)
-        width = (100.0 * width) / (100.0 - getLeft(stat));
+        let width = 0;
+        if (totalTime !== 0) {
+            width =
+                ((performance.timing[endStat] - performance.timing[stat]) /
+                    totalTime) *
+                100.0;
+        }
+        const denominator = 100.0 - getLeft(stat);
+        if (denominator !== 0) {
+            // Calculate relative percent (same as sql panel logic)
+            width = (100.0 * width) / denominator;
+        } else {
+            width = 0;
+        }
         return width < 1 ? "2px" : width + "%";
     }
     function addRow(tbody, stat, endStat) {

docs/changes.rst

@@ -4,14 +4,14 @@ Change log
 Pending
 -------
 
+* Added protection against division by 0 in timer.js
 * Auto-update History panel for JavaScript ``fetch`` requests.
 * Support `HTMX boosting <https://htmx.org/docs/#boosting/>`__ and
   re-rendering the toolbar after the DOM has been replaced. This reworks
   the JavaScript integration to put most event handlers on document.body.
   This means we'll have slightly slower performance, but it's easier
   to handle re-rendering the toolbar when the DOM has been replaced.
 
-
 3.7.0 (2022-09-25)
 ------------------