From d348deeb16ee00fa36de0a145b8c5b520ef2c19c Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 13:27:04 -0300
Subject: [PATCH 01/13] refactor: move agenda_timezone.js code out of global
 scope

---
 ietf/static/js/agenda_timezone.js | 482 +++++++++++++++---------------
 1 file changed, 242 insertions(+), 240 deletions(-)

diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index ac15db8b43..a020c0e65a 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -1,5 +1,4 @@
 // Copyright The IETF Trust 2021, All Rights Reserved
-
 /*
  Timezone support specific to the agenda page
 
@@ -8,272 +7,275 @@
  returning the current timezone to the set_current_tz_cb() method.
  This should be done before calling anything else in the file.
  */
+(function() {
+    'use strict';
 
-var local_timezone = moment.tz.guess();
+    var local_timezone = moment.tz.guess();
 
-// get_current_tz_cb must be overwritten using set_current_tz_cb
-function get_current_tz_cb() {
-    throw new Error('Tried to get current timezone before callback registered. Use set_current_tz_cb().');
-}
+    // get_current_tz_cb must be overwritten using set_current_tz_cb
+    function get_current_tz_cb() {
+        throw new Error('Tried to get current timezone before callback registered. Use set_current_tz_cb().');
+    }
 
-// Initialize moments
-window.initialize_moments = function () {
-    var times = $('.time');
-    $.each(times, function (i, item) {
-        item.start_ts = moment.unix(this.getAttribute("data-start-time"))
-            .utc();
-        item.end_ts = moment.unix(this.getAttribute("data-end-time"))
-            .utc();
-        if (this.hasAttribute("weekday")) {
-            item.format = 2;
-        } else {
-            item.format = 1;
-        }
-        if (this.hasAttribute("format")) {
-            item.format = +this.getAttribute("format");
-        }
-    });
-    times = $('[data-slot-start-ts]');
-    $.each(times, function (i, item) {
-        item.slot_start_ts = moment.unix(this.getAttribute("data-slot-start-ts"))
-            .utc();
-        item.slot_end_ts = moment.unix(this.getAttribute("data-slot-end-ts"))
-            .utc();
-    });
-};
+    // Initialize moments
+    window.initialize_moments = function () {
+        var times = $('.time');
+        $.each(times, function (i, item) {
+            item.start_ts = moment.unix(this.getAttribute("data-start-time"))
+                .utc();
+            item.end_ts = moment.unix(this.getAttribute("data-end-time"))
+                .utc();
+            if (this.hasAttribute("weekday")) {
+                item.format = 2;
+            } else {
+                item.format = 1;
+            }
+            if (this.hasAttribute("format")) {
+                item.format = +this.getAttribute("format");
+            }
+        });
+        times = $('[data-slot-start-ts]');
+        $.each(times, function (i, item) {
+            item.slot_start_ts = moment.unix(this.getAttribute("data-slot-start-ts"))
+                .utc();
+            item.slot_end_ts = moment.unix(this.getAttribute("data-slot-end-ts"))
+                .utc();
+        });
+    };
 
-function format_time(t, tz, fmt) {
-    var out;
-    var mtz = window.meeting_timezone;
-    if (mtz == "") {
-        mtz = "UTC";
-    }
-    switch (fmt) {
-    case 0:
-        out = t.tz(tz)
-            .format('dddd, ') + '<span>' +
-            t.tz(tz)
-            .format('MMMM Do YYYY, ') + '</span>' +
-            t.tz(tz)
-            .format('HH:mm') + '<span>' +
-            t.tz(tz)
-            .format(' Z z') + '</span>';
-        break;
-    case 1:
-        // Note, this code does not work if the meeting crosses the
-        // year boundary.
-        out = t.tz(tz)
-            .format("HH:mm");
-        if (+t.tz(tz)
-            .dayOfYear() < +t.tz(mtz)
-            .dayOfYear()) {
-            out = out + " (-1)";
-        } else if (+t.tz(tz)
-            .dayOfYear() > +t.tz(mtz)
-            .dayOfYear()) {
-            out = out + " (+1)";
+    function format_time(t, tz, fmt) {
+        var out;
+        var mtz = window.meeting_timezone;
+        if (mtz == "") {
+            mtz = "UTC";
         }
-        break;
-    case 2:
-        out = t.tz(mtz)
-            .format("dddd, ")
-            .toUpperCase() +
-            t.tz(tz)
-            .format("HH:mm");
-        if (+t.tz(tz)
-            .dayOfYear() < +t.tz(mtz)
-            .dayOfYear()) {
-            out = out + " (-1)";
-        } else if (+t.tz(tz)
-            .dayOfYear() > +t.tz(mtz)
-            .dayOfYear()) {
-            out = out + " (+1)";
+        switch (fmt) {
+        case 0:
+            out = t.tz(tz)
+                .format('dddd, ') + '<span>' +
+                t.tz(tz)
+                    .format('MMMM Do YYYY, ') + '</span>' +
+                t.tz(tz)
+                    .format('HH:mm') + '<span>' +
+                t.tz(tz)
+                    .format(' Z z') + '</span>';
+            break;
+        case 1:
+            // Note, this code does not work if the meeting crosses the
+            // year boundary.
+            out = t.tz(tz)
+                .format("HH:mm");
+            if (+t.tz(tz)
+                .dayOfYear() < +t.tz(mtz)
+                .dayOfYear()) {
+                out = out + " (-1)";
+            } else if (+t.tz(tz)
+                .dayOfYear() > +t.tz(mtz)
+                .dayOfYear()) {
+                out = out + " (+1)";
+            }
+            break;
+        case 2:
+            out = t.tz(mtz)
+                .format("dddd, ")
+                .toUpperCase() +
+                t.tz(tz)
+                    .format("HH:mm");
+            if (+t.tz(tz)
+                .dayOfYear() < +t.tz(mtz)
+                .dayOfYear()) {
+                out = out + " (-1)";
+            } else if (+t.tz(tz)
+                .dayOfYear() > +t.tz(mtz)
+                .dayOfYear()) {
+                out = out + " (+1)";
+            }
+            break;
+        case 3:
+            out = t.utc()
+                .format("YYYY-MM-DD");
+            break;
+        case 4:
+            out = t.tz(tz)
+                .format("YYYY-MM-DD HH:mm");
+            break;
+        case 5:
+            out = t.tz(tz)
+                .format("HH:mm");
+            break;
         }
-        break;
-    case 3:
-        out = t.utc()
-            .format("YYYY-MM-DD");
-        break;
-    case 4:
-        out = t.tz(tz)
-            .format("YYYY-MM-DD HH:mm");
-        break;
-    case 5:
-        out = t.tz(tz)
-            .format("HH:mm");
-        break;
+        return out;
     }
-    return out;
-}
 
-// Format tooltip notice
-function format_tooltip_notice(start, end) {
-    var notice = "";
+    // Format tooltip notice
+    function format_tooltip_notice(start, end) {
+        var notice = "";
 
-    if (end.isBefore()) {
-        notice = "Event ended " + end.fromNow();
-    } else if (start.isAfter()) {
-        notice = "Event will start " + start.fromNow();
-    } else {
-        notice = "Event started " + start.fromNow() + " and will end " +
-            end.fromNow();
+        if (end.isBefore()) {
+            notice = "Event ended " + end.fromNow();
+        } else if (start.isAfter()) {
+            notice = "Event will start " + start.fromNow();
+        } else {
+            notice = "Event started " + start.fromNow() + " and will end " +
+                end.fromNow();
+        }
+        return '<span class="tooltipnotice">' + notice + '</span>';
     }
-    return '<span class="tooltipnotice">' + notice + '</span>';
-}
 
-// Format tooltip table
-function format_tooltip_table(start, end) {
-    var current_timezone = get_current_tz_cb();
-    var out = '<div class="text-start"><table class="table table-sm"><tr><th></th><th>Session start</th><th>Session end</th></tr>';
-    if (window.meeting_timezone !== "") {
-        out += '<tr><th class="timehead">Meeting timezone</th><td class="text-nowrap">' +
-            format_time(start, window.meeting_timezone, 0) + '</td><td class="text-nowrap">' +
-            format_time(end, window.meeting_timezone, 0) + '</td></tr>';
-    }
-    out += '<tr><th class="timehead">Local timezone</th><td class="text-nowrap">' +
-        format_time(start, local_timezone, 0) + '</td><td class="text-nowrap">' +
-        format_time(end, local_timezone, 0) + '</td></tr>';
-    if (current_timezone !== 'UTC') {
-        out += '<tr><th class="timehead">Selected Timezone</th><td class="text-nowrap">' +
-            format_time(start, current_timezone, 0) + '</td><td class="text-nowrap">' +
-            format_time(end, current_timezone, 0) + '</td></tr>';
+    // Format tooltip table
+    function format_tooltip_table(start, end) {
+        var current_timezone = get_current_tz_cb();
+        var out = '<div class="text-start"><table class="table table-sm"><tr><th></th><th>Session start</th><th>Session end</th></tr>';
+        if (window.meeting_timezone !== "") {
+            out += '<tr><th class="timehead">Meeting timezone</th><td class="text-nowrap">' +
+                format_time(start, window.meeting_timezone, 0) + '</td><td class="text-nowrap">' +
+                format_time(end, window.meeting_timezone, 0) + '</td></tr>';
+        }
+        out += '<tr><th class="timehead">Local timezone</th><td class="text-nowrap">' +
+            format_time(start, local_timezone, 0) + '</td><td class="text-nowrap">' +
+            format_time(end, local_timezone, 0) + '</td></tr>';
+        if (current_timezone !== 'UTC') {
+            out += '<tr><th class="timehead">Selected Timezone</th><td class="text-nowrap">' +
+                format_time(start, current_timezone, 0) + '</td><td class="text-nowrap">' +
+                format_time(end, current_timezone, 0) + '</td></tr>';
+        }
+        out += '<tr><th class="timehead">UTC</th><td class="text-nowrap">' +
+            format_time(start, 'UTC', 0) + '</td><td class="text-nowrap">' +
+            format_time(end, 'UTC', 0) + '</td></tr>';
+        out += '</table>' + format_tooltip_notice(start, end) + '</div>';
+        return out;
     }
-    out += '<tr><th class="timehead">UTC</th><td class="text-nowrap">' +
-        format_time(start, 'UTC', 0) + '</td><td class="text-nowrap">' +
-        format_time(end, 'UTC', 0) + '</td></tr>';
-    out += '</table>' + format_tooltip_notice(start, end) + '</div>';
-    return out;
-}
 
-// Format tooltip for item
-function format_tooltip(start, end) {
-    return '<div class="timetooltiptext">' +
-        format_tooltip_table(start, end) +
-        '</div>';
-}
+    // Format tooltip for item
+    function format_tooltip(start, end) {
+        return '<div class="timetooltiptext">' +
+            format_tooltip_table(start, end) +
+            '</div>';
+    }
 
-// Add tooltips
-window.add_tooltips = function () {
-    $('.time')
-        .each(function () {
-            var tooltip = $(format_tooltip(this.start_ts, this.end_ts));
-            tooltip[0].start_ts = this.start_ts;
-            tooltip[0].end_ts = this.end_ts;
-            tooltip[0].ustart_ts = moment(this.start_ts)
-                .add(-2, 'hours');
-            tooltip[0].uend_ts = moment(this.end_ts)
-                .add(2, 'hours');
-            $(this)
-                .closest("th, td")
-                .attr("data-bs-toggle", "popover")
-                .attr("data-bs-content", $(tooltip)
-                    .html())
-                .popover({
-                    html: true,
-                    sanitize: false,
-                    trigger: "hover"
-                });
-        });
-};
+    // Add tooltips
+    window.add_tooltips = function () {
+        $('.time')
+            .each(function () {
+                var tooltip = $(format_tooltip(this.start_ts, this.end_ts));
+                tooltip[0].start_ts = this.start_ts;
+                tooltip[0].end_ts = this.end_ts;
+                tooltip[0].ustart_ts = moment(this.start_ts)
+                    .add(-2, 'hours');
+                tooltip[0].uend_ts = moment(this.end_ts)
+                    .add(2, 'hours');
+                $(this)
+                    .closest("th, td")
+                    .attr("data-bs-toggle", "popover")
+                    .attr("data-bs-content", $(tooltip)
+                        .html())
+                    .popover({
+                        html: true,
+                        sanitize: false,
+                        trigger: "hover"
+                    });
+            });
+    };
 
-// Update times on the agenda based on the selected timezone
-window.update_times = function (newtz) {
-    $('.current-tz')
-        .html(newtz);
-    $('.time')
-        .each(function () {
-            if (this.format == 4) {
-                var tz = this.start_ts.tz(newtz)
-                    .format(" z");
-                if (this.start_ts.tz(newtz)
-                    .dayOfYear() ==
-                    this.end_ts.tz(newtz)
-                    .dayOfYear()) {
-                    $(this)
-                        .html(format_time(this.start_ts, newtz, this.format) +
-                            '<span class="d-lg-none"><br></span>-' + format_time(this.end_ts, newtz, 5) + tz);
+    // Update times on the agenda based on the selected timezone
+    window.update_times = function (newtz) {
+        $('.current-tz')
+            .html(newtz);
+        $('.time')
+            .each(function () {
+                if (this.format == 4) {
+                    var tz = this.start_ts.tz(newtz)
+                        .format(" z");
+                    if (this.start_ts.tz(newtz)
+                        .dayOfYear() ==
+                        this.end_ts.tz(newtz)
+                            .dayOfYear()) {
+                        $(this)
+                            .html(format_time(this.start_ts, newtz, this.format) +
+                                '<span class="d-lg-none"><br></span>-' + format_time(this.end_ts, newtz, 5) + tz);
+                    } else {
+                        $(this)
+                            .html(format_time(this.start_ts, newtz, this.format) +
+                                '<span class="d-lg-none"><br></span>-' +
+                                format_time(this.end_ts, newtz, this.format) + tz);
+                    }
                 } else {
                     $(this)
-                        .html(format_time(this.start_ts, newtz, this.format) +
-                            '<span class="d-lg-none"><br></span>-' +
-                            format_time(this.end_ts, newtz, this.format) + tz);
+                        .html(format_time(this.start_ts, newtz, this.format) + '<span class="d-lg-none"><br></span>-' +
+                            format_time(this.end_ts, newtz, this.format));
                 }
-            } else {
-                $(this)
-                    .html(format_time(this.start_ts, newtz, this.format) + '<span class="d-lg-none"><br></span>-' +
-                        format_time(this.end_ts, newtz, this.format));
-            }
-        });
-    update_tooltips_all();
-    update_clock();
-};
+            });
+        update_tooltips_all();
+        update_clock();
+    };
 
-// Highlight ongoing based on the current time
-window.highlight_ongoing = function () {
-    $("div#now")
-        .remove("#now");
-    $('.table-warning')
-        .removeClass("table-warning");
-    var agenda_rows = $('[data-slot-start-ts]');
-    agenda_rows = agenda_rows.filter(function () {
-        return moment()
-            .isBetween(this.slot_start_ts, this.slot_end_ts);
-    });
-    agenda_rows.addClass("table-warning");
-    agenda_rows.first()
-        .children("th, td")
-        .prepend($('<div id="now"></div>'));
-};
+    // Highlight ongoing based on the current time
+    window.highlight_ongoing = function () {
+        $("div#now")
+            .remove("#now");
+        $('.table-warning')
+            .removeClass("table-warning");
+        var agenda_rows = $('[data-slot-start-ts]');
+        agenda_rows = agenda_rows.filter(function () {
+            return moment()
+                .isBetween(this.slot_start_ts, this.slot_end_ts);
+        });
+        agenda_rows.addClass("table-warning");
+        agenda_rows.first()
+            .children("th, td")
+            .prepend($('<div id="now"></div>'));
+    };
 
-// Update tooltips
-window.update_tooltips = function () {
-    var tooltips = $('.timetooltiptext');
-    tooltips.filter(function () {
+    // Update tooltips
+    window.update_tooltips = function () {
+        var tooltips = $('.timetooltiptext');
+        tooltips.filter(function () {
             return moment()
                 .isBetween(this.ustart_ts, this.uend_ts);
         })
-        .each(function () {
+            .each(function () {
+                $(this)
+                    .html(format_tooltip_table(this.start_ts, this.end_ts));
+            });
+    };
+
+    // Update all tooltips
+    window.update_tooltips_all = function () {
+        var tooltips = $('.timetooltiptext');
+        tooltips.each(function () {
             $(this)
                 .html(format_tooltip_table(this.start_ts, this.end_ts));
         });
-};
+    };
 
-// Update all tooltips
-window.update_tooltips_all = function () {
-    var tooltips = $('.timetooltiptext');
-    tooltips.each(function () {
-        $(this)
-            .html(format_tooltip_table(this.start_ts, this.end_ts));
-    });
-};
+    // Update clock
+    window.update_clock = function () {
+        $('#current-time')
+            .html(format_time(moment(), get_current_tz_cb(), 0));
+    };
 
-// Update clock
-window.update_clock = function () {
-    $('#current-time')
-        .html(format_time(moment(), get_current_tz_cb(), 0));
-};
-
-$.urlParam = function (name) {
-    var results = new RegExp('[\?&]' + name + '=([^&#]*)')
-        .exec(window.location.href);
-    if (results == null) {
-        return null;
-    } else {
-        return results[1] || 0;
-    }
-};
+    $.urlParam = function (name) {
+        var results = new RegExp('[\?&]' + name + '=([^&#]*)')
+            .exec(window.location.href);
+        if (results == null) {
+            return null;
+        } else {
+            return results[1] || 0;
+        }
+    };
 
-window.init_timers = function () {
-    var fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
-    update_clock();
-    highlight_ongoing();
-    setInterval(function () { update_clock(); }, fast_timer);
-    setInterval(function () { highlight_ongoing(); }, fast_timer);
-    setInterval(function () { update_tooltips(); }, fast_timer);
-    setInterval(function () { update_tooltips_all(); }, 3600000 / speedup);
-};
+    window.init_timers = function () {
+        var fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
+        update_clock();
+        highlight_ongoing();
+        setInterval(function () { update_clock(); }, fast_timer);
+        setInterval(function () { highlight_ongoing(); }, fast_timer);
+        setInterval(function () { update_tooltips(); }, fast_timer);
+        setInterval(function () { update_tooltips_all(); }, 3600000 / speedup);
+    };
 
-// set method used to find current time zone
-window.set_current_tz_cb = function (fn) {
-    get_current_tz_cb = fn;
-};
\ No newline at end of file
+    // set method used to find current time zone
+    window.set_current_tz_cb = function (fn) {
+        get_current_tz_cb = fn;
+    };
+})();
\ No newline at end of file

From f1dbcd6a9a99cf5b24c65b058183f244c03fd4ab Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 13:50:50 -0300
Subject: [PATCH 02/13] refactor: separate function defs from adding to
 'window'

---
 ietf/static/js/agenda_timezone.js  | 49 +++++++++++++++++-------------
 ietf/templates/meeting/agenda.html |  6 ++--
 2 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index a020c0e65a..4b3ff46caf 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -10,15 +10,15 @@
 (function() {
     'use strict';
 
-    var local_timezone = moment.tz.guess();
+    const local_timezone = moment.tz.guess();
 
     // get_current_tz_cb must be overwritten using set_current_tz_cb
-    function get_current_tz_cb() {
+    let get_current_tz_cb = function() {
         throw new Error('Tried to get current timezone before callback registered. Use set_current_tz_cb().');
-    }
+    };
 
     // Initialize moments
-    window.initialize_moments = function () {
+    function initialize_moments() {
         var times = $('.time');
         $.each(times, function (i, item) {
             item.start_ts = moment.unix(this.getAttribute("data-start-time"))
@@ -41,7 +41,7 @@
             item.slot_end_ts = moment.unix(this.getAttribute("data-slot-end-ts"))
                 .utc();
         });
-    };
+    }
 
     function format_time(t, tz, fmt) {
         var out;
@@ -154,7 +154,7 @@
     }
 
     // Add tooltips
-    window.add_tooltips = function () {
+    function add_tooltips() {
         $('.time')
             .each(function () {
                 var tooltip = $(format_tooltip(this.start_ts, this.end_ts));
@@ -175,10 +175,10 @@
                         trigger: "hover"
                     });
             });
-    };
+    }
 
     // Update times on the agenda based on the selected timezone
-    window.update_times = function (newtz) {
+    function update_times(newtz) {
         $('.current-tz')
             .html(newtz);
         $('.time')
@@ -207,10 +207,10 @@
             });
         update_tooltips_all();
         update_clock();
-    };
+    }
 
     // Highlight ongoing based on the current time
-    window.highlight_ongoing = function () {
+    function highlight_ongoing() {
         $("div#now")
             .remove("#now");
         $('.table-warning')
@@ -224,10 +224,10 @@
         agenda_rows.first()
             .children("th, td")
             .prepend($('<div id="now"></div>'));
-    };
+    }
 
     // Update tooltips
-    window.update_tooltips = function () {
+    function update_tooltips() {
         var tooltips = $('.timetooltiptext');
         tooltips.filter(function () {
             return moment()
@@ -237,24 +237,24 @@
                 $(this)
                     .html(format_tooltip_table(this.start_ts, this.end_ts));
             });
-    };
+    }
 
     // Update all tooltips
-    window.update_tooltips_all = function () {
+    function update_tooltips_all() {
         var tooltips = $('.timetooltiptext');
         tooltips.each(function () {
             $(this)
                 .html(format_tooltip_table(this.start_ts, this.end_ts));
         });
-    };
+    }
 
     // Update clock
-    window.update_clock = function () {
+    function update_clock() {
         $('#current-time')
             .html(format_time(moment(), get_current_tz_cb(), 0));
-    };
+    }
 
-    $.urlParam = function (name) {
+    function urlParam(name) {
         var results = new RegExp('[\?&]' + name + '=([^&#]*)')
             .exec(window.location.href);
         if (results == null) {
@@ -262,9 +262,9 @@
         } else {
             return results[1] || 0;
         }
-    };
+    }
 
-    window.init_timers = function () {
+    function init_timers() {
         var fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
         update_clock();
         highlight_ongoing();
@@ -272,7 +272,14 @@
         setInterval(function () { highlight_ongoing(); }, fast_timer);
         setInterval(function () { update_tooltips(); }, fast_timer);
         setInterval(function () { update_tooltips_all(); }, 3600000 / speedup);
-    };
+    }
+
+    /***** make public interface available on window *****/
+    window.initialize_moments = initialize_moments;
+    window.add_tooltips = add_tooltips;
+    window.update_times = update_times;
+    window.urlParam = urlParam;
+    window.init_timers = init_timers;
 
     // set method used to find current time zone
     window.set_current_tz_cb = function (fn) {
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
index 9fd2722405..a5b3f4c668 100644
--- a/ietf/templates/meeting/agenda.html
+++ b/ietf/templates/meeting/agenda.html
@@ -413,13 +413,13 @@ <h2 class="mt-3">
     {% endif %}
     <script>
         {% if settings.DEBUG and settings.DEBUG_AGENDA %}
-            speedup = +$.urlParam('speedup');
+            speedup = +urlParam('speedup');
             if (speedup < 1) {
                 speedup = 1;
             }
             start_time = moment().utc();
-            if ($.urlParam('date')) {
-                offset_time = moment.tz(decodeURIComponent($.urlParam('date')), "UTC");
+            if (urlParam('date')) {
+                offset_time = moment.tz(decodeURIComponent(urlParam('date')), "UTC");
             } else {
                 offset_time = start_time;
             }

From 4f82d94a8e0cbf88eb882ecae14a78d5cbec2cea Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 14:10:03 -0300
Subject: [PATCH 03/13] refactor: eliminate 'var' declarations and clean up
 lint

---
 ietf/static/js/agenda_timezone.js | 45 ++++++++++++++-----------------
 1 file changed, 20 insertions(+), 25 deletions(-)

diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 4b3ff46caf..019e205c7a 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -19,7 +19,7 @@
 
     // Initialize moments
     function initialize_moments() {
-        var times = $('.time');
+        const times = $('.time');
         $.each(times, function (i, item) {
             item.start_ts = moment.unix(this.getAttribute("data-start-time"))
                 .utc();
@@ -34,8 +34,8 @@
                 item.format = +this.getAttribute("format");
             }
         });
-        times = $('[data-slot-start-ts]');
-        $.each(times, function (i, item) {
+        const things_with_slots = $('[data-slot-start-ts]');
+        $.each(things_with_slots, function (i, item) {
             item.slot_start_ts = moment.unix(this.getAttribute("data-slot-start-ts"))
                 .utc();
             item.slot_end_ts = moment.unix(this.getAttribute("data-slot-end-ts"))
@@ -44,11 +44,8 @@
     }
 
     function format_time(t, tz, fmt) {
-        var out;
-        var mtz = window.meeting_timezone;
-        if (mtz == "") {
-            mtz = "UTC";
-        }
+        let out;
+        const mtz = window.meeting_timezone || "UTC";
         switch (fmt) {
         case 0:
             out = t.tz(tz)
@@ -109,7 +106,7 @@
 
     // Format tooltip notice
     function format_tooltip_notice(start, end) {
-        var notice = "";
+        let notice = "";
 
         if (end.isBefore()) {
             notice = "Event ended " + end.fromNow();
@@ -124,8 +121,8 @@
 
     // Format tooltip table
     function format_tooltip_table(start, end) {
-        var current_timezone = get_current_tz_cb();
-        var out = '<div class="text-start"><table class="table table-sm"><tr><th></th><th>Session start</th><th>Session end</th></tr>';
+        const current_timezone = get_current_tz_cb();
+        let out = '<div class="text-start"><table class="table table-sm"><tr><th></th><th>Session start</th><th>Session end</th></tr>';
         if (window.meeting_timezone !== "") {
             out += '<tr><th class="timehead">Meeting timezone</th><td class="text-nowrap">' +
                 format_time(start, window.meeting_timezone, 0) + '</td><td class="text-nowrap">' +
@@ -157,7 +154,7 @@
     function add_tooltips() {
         $('.time')
             .each(function () {
-                var tooltip = $(format_tooltip(this.start_ts, this.end_ts));
+                const tooltip = $(format_tooltip(this.start_ts, this.end_ts));
                 tooltip[0].start_ts = this.start_ts;
                 tooltip[0].end_ts = this.end_ts;
                 tooltip[0].ustart_ts = moment(this.start_ts)
@@ -183,13 +180,11 @@
             .html(newtz);
         $('.time')
             .each(function () {
-                if (this.format == 4) {
-                    var tz = this.start_ts.tz(newtz)
-                        .format(" z");
-                    if (this.start_ts.tz(newtz)
-                        .dayOfYear() ==
-                        this.end_ts.tz(newtz)
-                            .dayOfYear()) {
+                if (this.format === 4) {
+                    const tz = this.start_ts.tz(newtz).format(" z");
+                    const start_doy = this.start_ts.tz(newtz).dayOfYear();
+                    const end_doy = this.end_ts.tz(newtz).dayOfYear();
+                    if (start_doy === end_doy) {
                         $(this)
                             .html(format_time(this.start_ts, newtz, this.format) +
                                 '<span class="d-lg-none"><br></span>-' + format_time(this.end_ts, newtz, 5) + tz);
@@ -215,7 +210,7 @@
             .remove("#now");
         $('.table-warning')
             .removeClass("table-warning");
-        var agenda_rows = $('[data-slot-start-ts]');
+        let agenda_rows = $('[data-slot-start-ts]');
         agenda_rows = agenda_rows.filter(function () {
             return moment()
                 .isBetween(this.slot_start_ts, this.slot_end_ts);
@@ -228,7 +223,7 @@
 
     // Update tooltips
     function update_tooltips() {
-        var tooltips = $('.timetooltiptext');
+        const tooltips = $('.timetooltiptext');
         tooltips.filter(function () {
             return moment()
                 .isBetween(this.ustart_ts, this.uend_ts);
@@ -241,7 +236,7 @@
 
     // Update all tooltips
     function update_tooltips_all() {
-        var tooltips = $('.timetooltiptext');
+        const tooltips = $('.timetooltiptext');
         tooltips.each(function () {
             $(this)
                 .html(format_tooltip_table(this.start_ts, this.end_ts));
@@ -255,9 +250,9 @@
     }
 
     function urlParam(name) {
-        var results = new RegExp('[\?&]' + name + '=([^&#]*)')
+        const results = new RegExp('[\?&]' + name + '=([^&#]*)')
             .exec(window.location.href);
-        if (results == null) {
+        if (results === null) {
             return null;
         } else {
             return results[1] || 0;
@@ -265,7 +260,7 @@
     }
 
     function init_timers() {
-        var fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
+        const fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
         update_clock();
         highlight_ongoing();
         setInterval(function () { update_clock(); }, fast_timer);

From a22a0001718ef50fd7361323cf9f10a9c7611819 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 14:42:42 -0300
Subject: [PATCH 04/13] chore: remove unused CSS

---
 ietf/static/css/ietf.scss | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index b8e4229298..a74ada3459 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -909,14 +909,6 @@ td.position-empty {
     padding-left: 0px !important;
 }
 
-.ongoing>td:first-child {
-    background-color: red !important;
-}
-
-.ongoing>td:last-child {
-    background-color: red !important;
-}
-
 .timetooltip {
     position: relative;
 }

From 9dcee86048c909a54108b98997ff32ed08f80b50 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 14:43:38 -0300
Subject: [PATCH 05/13] fix: add/maintain link to current session row on the
 agenda

---
 ietf/static/js/agenda_timezone.js  | 38 ++++++++++++++++++++----------
 ietf/templates/meeting/agenda.html |  6 +++--
 2 files changed, 30 insertions(+), 14 deletions(-)

diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 019e205c7a..092008d360 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -204,21 +204,34 @@
         update_clock();
     }
 
+    function update_now_link(ongoing_rows) {
+        const now_links = $('a.now-link');
+        if (ongoing_rows.length === 0) {
+            now_links.attr('href', '#');
+        } else {
+            // Add a #now target for navigating - find the latest start time of any ongoing row
+            // and mark the first row starting at that time
+            const last_start_time = ongoing_rows[ongoing_rows.length - 1].slot_start_ts;
+            for (let ii=0; ii < ongoing_rows.length; ii++) {
+                const dt = ongoing_rows[ii].slot_start_ts.diff(last_start_time, 'seconds');
+                if (Math.abs(dt) < 1) {
+                    now_links.attr('href', '#' + ongoing_rows[ii].id);
+                    break;
+                }
+            }
+        }
+    }
+
     // Highlight ongoing based on the current time
     function highlight_ongoing() {
-        $("div#now")
-            .remove("#now");
-        $('.table-warning')
-            .removeClass("table-warning");
-        let agenda_rows = $('[data-slot-start-ts]');
-        agenda_rows = agenda_rows.filter(function () {
+        const agenda_rows = $('[data-slot-start-ts]');
+        agenda_rows.removeClass("table-warning");
+        const ongoing_rows = agenda_rows.filter(function () {
             return moment()
                 .isBetween(this.slot_start_ts, this.slot_end_ts);
         });
-        agenda_rows.addClass("table-warning");
-        agenda_rows.first()
-            .children("th, td")
-            .prepend($('<div id="now"></div>'));
+        ongoing_rows.addClass("table-warning");
+        update_now_link(ongoing_rows);
     }
 
     // Update tooltips
@@ -245,7 +258,7 @@
 
     // Update clock
     function update_clock() {
-        $('#current-time')
+        $('span.current-time')
             .html(format_time(moment(), get_current_tz_cb(), 0));
     }
 
@@ -259,7 +272,8 @@
         }
     }
 
-    function init_timers() {
+    function init_timers(speedup) {
+        speedup = speedup || 1;
         const fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
         update_clock();
         highlight_ongoing();
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
index a5b3f4c668..f42b69cfb3 100644
--- a/ietf/templates/meeting/agenda.html
+++ b/ietf/templates/meeting/agenda.html
@@ -94,6 +94,7 @@ <h2 class="mt-3">
             Check boxes below to select individual sessions.
         </p>
     {% endif %}
+    <div><a class="now-link" href="#">Go to now</a></div>
     <table id="agenda-table" class="table table-sm tablesorter">
         <thead>
             <tr>
@@ -181,6 +182,7 @@ <h2 class="mt-3">
             {% if item|is_regular_agenda_item %}
                 {% ifchanged %}
                     <tr class="table-secondary session-label-row show-with-children"
+                        id="session-starting-{{ item.timeslot.utc_start_time|date:"Y-m-d H:i"|slugify }}"
                         data-slot-start-ts="{{ item.start_timestamp }}"
                         data-slot-end-ts="{{ item.end_timestamp }}">
                         {% if personalize %}<th class="text-center"></th>{% endif %}
@@ -423,7 +425,7 @@ <h2 class="mt-3">
             } else {
                 offset_time = start_time;
             }
-            if (speedup > 1 || offset_time != start_time) {
+            if (speedup > 1 || offset_time !== start_time) {
                 moment.now = function () {
                     return (+new Date() - start_time) * speedup + offset_time;
                 }
@@ -460,7 +462,7 @@ <h2 class="mt-3">
 
             // Now make other setup calls from agenda_timezone.js
             add_tooltips();
-            init_timers();
+            init_timers(speedup);
 
             // Finally, set up the agenda filter UI. This does not depend on the timezone.
             {% if personalize %}

From 734e0a18598da53b742e6a9d186c2b7bcab6135e Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 15:04:47 -0300
Subject: [PATCH 06/13] fix: move link to current session to the RH nav panel

---
 ietf/static/js/ietf.js             | 43 +++++++++++++++++-------------
 ietf/templates/meeting/agenda.html |  5 +++-
 2 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 503cff28e9..3a78c0ad37 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -120,19 +120,20 @@ $(function () {
                 .shift()
                 .trim());
 
-        if (
-            contents &&
-            (contents.length > 0) &&
-            ($(headings)
-                .last()
-                .offset()
-                .top > $(window)
-                .height())
-        ) {
+        const extraNav = contentElement.find('#extra-nav');
+
+        const pageTooTall = !!(contents &&
+          (contents.length > 0) &&
+          ($(headings)
+              .last()
+              .offset()
+              .top > $(window)
+              .height()));
+
+        if (pageTooTall || extraNav) {
             // console.log("Enabling nav.");
             let n = 0;
             let last_level;
-            let nav;
 
             contentElement
                 .attr("data-bs-offset", 0)
@@ -142,7 +143,14 @@ $(function () {
                      <nav id="righthand-nav" class="position-fixed navbar navbar-light bg-light overflow-auto flex-fill" style="height: 70vh; width: inherit;">
                      </nav>
                  </div>
-                 `))
+                 `));
+
+            const nav = $("#righthand-nav")
+                .append(`<nav class="nav nav-pills flex-column align-self-start flex-fill px-2">`)
+                .children()
+                .last();
+
+            contentElement
                 .find("h1:visible, h2:visible, h3:visible, h4:visible, h5:visible, h6:visible, .nav-heading:visible")
                 .not(".navskip")
                 .each(function () {
@@ -166,14 +174,6 @@ $(function () {
                             .attr("id", id);
                     }
 
-                    if (nav === undefined) {
-                        nav = $("#righthand-nav");
-                        nav = $(nav)
-                            .append(`<nav class="nav nav-pills flex-column align-self-start flex-fill px-2">`)
-                            .children()
-                            .last();
-                    }
-
                     const level = parseInt(this.nodeName.substring(1)) - 1;
                     if (!last_level) {
                         last_level = level;
@@ -190,6 +190,11 @@ $(function () {
                         .append(`<a class="nav-link" href="#${id}">${text}</a>`);
                 });
 
+            if (extraNav) {
+                extraNav.children().appendTo(nav);
+                extraNav.remove();
+            }
+
             $(window)
                 .on("scroll", function () {
                     const item = $('#righthand-nav')
diff --git a/ietf/templates/meeting/agenda.html b/ietf/templates/meeting/agenda.html
index f42b69cfb3..fcb218e90d 100644
--- a/ietf/templates/meeting/agenda.html
+++ b/ietf/templates/meeting/agenda.html
@@ -23,6 +23,10 @@
     {% else %}
         {% include "meeting/meeting_heading.html" with meeting=schedule.meeting updated=updated selected="agenda" title_extra="" %}
     {% endif %}
+    {# the contents of #extra-nav will be moved into the RH nav panel #}
+    <div id="extra-nav" class="d-none">
+        <a class="nav-link now-link" href="#">Current session</a>
+    </div>
     {# cache this part -- it takes 3-6 seconds to generate #}
     {% load cache %}
     {% cache cache_time ietf_meeting_agenda_utc schedule.meeting.number request.path %}
@@ -94,7 +98,6 @@ <h2 class="mt-3">
             Check boxes below to select individual sessions.
         </p>
     {% endif %}
-    <div><a class="now-link" href="#">Go to now</a></div>
     <table id="agenda-table" class="table table-sm tablesorter">
         <thead>
             <tr>

From 1d051ec1896eb0e98bf93e4d5d77c25060075a8c Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 16:38:00 -0300
Subject: [PATCH 07/13] fix: nav to next session as "current" if no sessions
 ongoing

---
 ietf/static/js/agenda_timezone.js | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 092008d360..22934934b8 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -204,11 +204,9 @@
         update_clock();
     }
 
-    function update_now_link(ongoing_rows) {
+    function update_now_link(agenda_rows, ongoing_rows) {
         const now_links = $('a.now-link');
-        if (ongoing_rows.length === 0) {
-            now_links.attr('href', '#');
-        } else {
+        if (ongoing_rows.length > 0) {
             // Add a #now target for navigating - find the latest start time of any ongoing row
             // and mark the first row starting at that time
             const last_start_time = ongoing_rows[ongoing_rows.length - 1].slot_start_ts;
@@ -219,7 +217,17 @@
                     break;
                 }
             }
+            return;
+        }
+        // There were no ongoing sessions, look for the next one to start
+        const later_rows = agenda_rows.filter(function() { return moment().isBefore(this.slot_start_ts); });
+        if (later_rows.length > 0) {
+            now_links.attr('href', '#' + later_rows[0].id);
+            return;
         }
+        // No sessions in the future - meeting has apparently ended
+        now_links.attr('href', '#');
+        now_links.addClass('d-none');
     }
 
     // Highlight ongoing based on the current time
@@ -231,7 +239,7 @@
                 .isBetween(this.slot_start_ts, this.slot_end_ts);
         });
         ongoing_rows.addClass("table-warning");
-        update_now_link(ongoing_rows);
+        update_now_link(agenda_rows, ongoing_rows);
     }
 
     // Update tooltips

From 6b5d0ff37a46d859fb446101bc1a2b281f4a6ece Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 17:09:14 -0300
Subject: [PATCH 08/13] fix: restore the horizontal line "current session"
 indicator

Adds a horizontal line in the "info" theme color above the agenda row for
the next session. Rows are already marked as ongoing by changing their
backgrounds, but this allows the current time to be indicated when there
are no sessions ongoing (e.g., overnight between meeting days).
---
 ietf/static/css/ietf.scss         | 2 ++
 ietf/static/js/agenda_timezone.js | 3 +++
 2 files changed, 5 insertions(+)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index a74ada3459..fcb5681e2e 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -909,6 +909,8 @@ td.position-empty {
     padding-left: 0px !important;
 }
 
+#agenda-table tbody tr.next-session { border-top: 0.2rem solid map.get($theme-colors, "info"); }
+
 .timetooltip {
     position: relative;
 }
diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 22934934b8..6e3b540992 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -205,6 +205,7 @@
     }
 
     function update_now_link(agenda_rows, ongoing_rows) {
+        agenda_rows.removeClass('next-session');
         const now_links = $('a.now-link');
         if (ongoing_rows.length > 0) {
             // Add a #now target for navigating - find the latest start time of any ongoing row
@@ -213,6 +214,7 @@
             for (let ii=0; ii < ongoing_rows.length; ii++) {
                 const dt = ongoing_rows[ii].slot_start_ts.diff(last_start_time, 'seconds');
                 if (Math.abs(dt) < 1) {
+                    $(ongoing_rows[ii]).addClass('next-session');
                     now_links.attr('href', '#' + ongoing_rows[ii].id);
                     break;
                 }
@@ -222,6 +224,7 @@
         // There were no ongoing sessions, look for the next one to start
         const later_rows = agenda_rows.filter(function() { return moment().isBefore(this.slot_start_ts); });
         if (later_rows.length > 0) {
+            $(later_rows[0]).addClass('next-session');
             now_links.attr('href', '#' + later_rows[0].id);
             return;
         }

From 2240827f62991239d2eadb67ccf1de92799536d9 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Wed, 23 Mar 2022 17:27:02 -0300
Subject: [PATCH 09/13] refactor: clean up js and css for readability/accurate
 naming

---
 ietf/static/css/ietf.scss         |  2 +-
 ietf/static/js/agenda_timezone.js | 46 +++++++++++++++----------------
 2 files changed, 23 insertions(+), 25 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index fcb5681e2e..68cb880e1e 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -909,7 +909,7 @@ td.position-empty {
     padding-left: 0px !important;
 }
 
-#agenda-table tbody tr.next-session { border-top: 0.2rem solid map.get($theme-colors, "info"); }
+#agenda-table tbody tr.current-session { border-top: 0.2rem solid map.get($theme-colors, "info"); }
 
 .timetooltip {
     position: relative;
diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 6e3b540992..3a47a9091f 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -204,45 +204,43 @@
         update_clock();
     }
 
-    function update_now_link(agenda_rows, ongoing_rows) {
-        agenda_rows.removeClass('next-session');
-        const now_links = $('a.now-link');
+    // Update hrefs in anchor tags with the "now-link" class. Mark the target with the "current-session" class.
+    function update_now_link(agenda_rows, ongoing_rows, later_rows) {
+        agenda_rows.removeClass('current-session');
+        const links_to_update = $('a.now-link');
         if (ongoing_rows.length > 0) {
-            // Add a #now target for navigating - find the latest start time of any ongoing row
-            // and mark the first row starting at that time
+            // sessions are ongoing - find those with the latest start time and mark the first of them as "now"
             const last_start_time = ongoing_rows[ongoing_rows.length - 1].slot_start_ts;
             for (let ii=0; ii < ongoing_rows.length; ii++) {
                 const dt = ongoing_rows[ii].slot_start_ts.diff(last_start_time, 'seconds');
                 if (Math.abs(dt) < 1) {
-                    $(ongoing_rows[ii]).addClass('next-session');
-                    now_links.attr('href', '#' + ongoing_rows[ii].id);
+                    $(ongoing_rows[ii]).addClass('current-session');
+                    links_to_update.attr('href', '#' + ongoing_rows[ii].id);
                     break;
                 }
             }
-            return;
-        }
-        // There were no ongoing sessions, look for the next one to start
-        const later_rows = agenda_rows.filter(function() { return moment().isBefore(this.slot_start_ts); });
-        if (later_rows.length > 0) {
-            $(later_rows[0]).addClass('next-session');
-            now_links.attr('href', '#' + later_rows[0].id);
-            return;
+        } else if (later_rows.length > 0) {
+            // There were no ongoing sessions, look for the next one to start and mark as current
+            $(later_rows[0]).addClass('current-session');
+            links_to_update.attr('href', '#' + later_rows[0].id);
+        } else {
+            // No sessions in the future - meeting has apparently ended
+            links_to_update.attr('href', '#');
+            links_to_update.addClass('d-none'); // hide the links
         }
-        // No sessions in the future - meeting has apparently ended
-        now_links.attr('href', '#');
-        now_links.addClass('d-none');
     }
 
-    // Highlight ongoing based on the current time
-    function highlight_ongoing() {
+    function update_ongoing_sessions() {
         const agenda_rows = $('[data-slot-start-ts]');
-        agenda_rows.removeClass("table-warning");
         const ongoing_rows = agenda_rows.filter(function () {
             return moment()
                 .isBetween(this.slot_start_ts, this.slot_end_ts);
         });
+        const later_rows = agenda_rows.filter(function() { return moment().isBefore(this.slot_start_ts); });
+        // Highlight ongoing based on the current time
+        agenda_rows.removeClass("table-warning");
         ongoing_rows.addClass("table-warning");
-        update_now_link(agenda_rows, ongoing_rows);
+        update_now_link(agenda_rows, ongoing_rows, later_rows); // update any "now-link" anchors
     }
 
     // Update tooltips
@@ -287,9 +285,9 @@
         speedup = speedup || 1;
         const fast_timer = 60000 / (speedup > 600 ? 600 : speedup);
         update_clock();
-        highlight_ongoing();
+        update_ongoing_sessions();
         setInterval(function () { update_clock(); }, fast_timer);
-        setInterval(function () { highlight_ongoing(); }, fast_timer);
+        setInterval(function () { update_ongoing_sessions(); }, fast_timer);
         setInterval(function () { update_tooltips(); }, fast_timer);
         setInterval(function () { update_tooltips_all(); }, 3600000 / speedup);
     }

From ad9634d9179cb11544d310a099555fbf6a8f67f9 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Thu, 24 Mar 2022 10:29:24 -0300
Subject: [PATCH 10/13] refactor: use $border-widths map; move inline style to
 ietf.scss

---
 ietf/static/css/ietf.scss | 10 +++++++++-
 ietf/static/js/ietf.js    |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index 68cb880e1e..4bfefca526 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -909,7 +909,9 @@ td.position-empty {
     padding-left: 0px !important;
 }
 
-#agenda-table tbody tr.current-session { border-top: 0.2rem solid map.get($theme-colors, "info"); }
+#agenda-table tbody tr.current-session {
+    border-top: map.get($border-widths, 2) solid map.get($theme-colors, "info");
+}
 
 .timetooltip {
     position: relative;
@@ -956,4 +958,10 @@ td.position-empty {
 
 #current-time {
     display: inline-block;
+}
+
+// righthand nav panel styling
+#righthand-nav {
+    width: inherit;
+    height: 70vh;
 }
\ No newline at end of file
diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 3a78c0ad37..260adcb2a1 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -140,7 +140,7 @@ $(function () {
                 .attr("tabindex", 0)
                 .after($(`
                  <div class="col-xl-2 ps-0 small">
-                     <nav id="righthand-nav" class="position-fixed navbar navbar-light bg-light overflow-auto flex-fill" style="height: 70vh; width: inherit;">
+                     <nav id="righthand-nav" class="position-fixed navbar navbar-light bg-light overflow-auto flex-fill">
                      </nav>
                  </div>
                  `));

From 1dc280da2b5d50d4ad4e260210522cc3be0493fe Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Thu, 24 Mar 2022 11:51:42 -0300
Subject: [PATCH 11/13] fix: correct test for whether extra-nav elements are
 present

---
 ietf/static/js/ietf.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 260adcb2a1..43eb63a582 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -121,6 +121,7 @@ $(function () {
                 .trim());
 
         const extraNav = contentElement.find('#extra-nav');
+        const haveExtraNav = extraNav.length > 0;
 
         const pageTooTall = !!(contents &&
           (contents.length > 0) &&
@@ -130,7 +131,7 @@ $(function () {
               .top > $(window)
               .height()));
 
-        if (pageTooTall || extraNav) {
+        if (pageTooTall || haveExtraNav) {
             // console.log("Enabling nav.");
             let n = 0;
             let last_level;
@@ -190,7 +191,7 @@ $(function () {
                         .append(`<a class="nav-link" href="#${id}">${text}</a>`);
                 });
 
-            if (extraNav) {
+            if (haveExtraNav) {
                 extraNav.children().appendTo(nav);
                 extraNav.remove();
             }

From b29ebfa9d320cf3da7c0417fddaab7b79c67f4aa Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Thu, 24 Mar 2022 12:02:43 -0300
Subject: [PATCH 12/13] feat: clean up righthand panel nav formatting

* Use boostrap "card" class to format righthand panel
* Tweak container styles to better handle multiple elements
* Remove fixed height on righthand-nav item
---
 ietf/static/css/ietf.scss         |  1 -
 ietf/static/js/agenda_timezone.js |  2 +-
 ietf/static/js/ietf.js            | 10 ++++++----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/ietf/static/css/ietf.scss b/ietf/static/css/ietf.scss
index 4bfefca526..373bea5a6d 100644
--- a/ietf/static/css/ietf.scss
+++ b/ietf/static/css/ietf.scss
@@ -963,5 +963,4 @@ td.position-empty {
 // righthand nav panel styling
 #righthand-nav {
     width: inherit;
-    height: 70vh;
 }
\ No newline at end of file
diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 3a47a9091f..18c07b3b22 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -226,7 +226,7 @@
         } else {
             // No sessions in the future - meeting has apparently ended
             links_to_update.attr('href', '#');
-            links_to_update.addClass('d-none'); // hide the links
+            links_to_update.addClass('text-muted text-decoration-line-through'); // mark link
         }
     }
 
diff --git a/ietf/static/js/ietf.js b/ietf/static/js/ietf.js
index 43eb63a582..95eab8a360 100644
--- a/ietf/static/js/ietf.js
+++ b/ietf/static/js/ietf.js
@@ -141,13 +141,14 @@ $(function () {
                 .attr("tabindex", 0)
                 .after($(`
                  <div class="col-xl-2 ps-0 small">
-                     <nav id="righthand-nav" class="position-fixed navbar navbar-light bg-light overflow-auto flex-fill">
-                     </nav>
+                     <div id="righthand-card" class="position-fixed card d-flex flex-column justify-content-start align-items-start">
+                         <nav id="righthand-nav" class="card-body navbar navbar-light bg-light overflow-auto"></nav>
+                     </div></div>
                  </div>
                  `));
 
             const nav = $("#righthand-nav")
-                .append(`<nav class="nav nav-pills flex-column align-self-start flex-fill px-2">`)
+                .append(`<nav class="nav nav-pills flex-column px-2">`)
                 .children()
                 .last();
 
@@ -192,7 +193,8 @@ $(function () {
                 });
 
             if (haveExtraNav) {
-                extraNav.children().appendTo(nav);
+                $('#righthand-card').append('<div id="righthand-extra" class="card-body"></div>');
+                extraNav.children().appendTo('#righthand-extra');
                 extraNav.remove();
             }
 

From 8171f309f334cd11b243db7b06dba72331a93950 Mon Sep 17 00:00:00 2001
From: Jennifer Richards <jennifer@painless-security.com>
Date: Thu, 7 Apr 2022 09:56:01 -0300
Subject: [PATCH 13/13] fix: eliminate race condition when selecting rows

---
 ietf/static/js/agenda_timezone.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/ietf/static/js/agenda_timezone.js b/ietf/static/js/agenda_timezone.js
index 15092256bc..3d1213e192 100644
--- a/ietf/static/js/agenda_timezone.js
+++ b/ietf/static/js/agenda_timezone.js
@@ -232,11 +232,11 @@
 
     function update_ongoing_sessions() {
         const agenda_rows = $('[data-slot-start-ts]');
+        const now_moment = moment();
         const ongoing_rows = agenda_rows.filter(function () {
-            return moment()
-                .isBetween(this.slot_start_ts, this.slot_end_ts);
+            return now_moment.isBetween(this.slot_start_ts, this.slot_end_ts);
         });
-        const later_rows = agenda_rows.filter(function() { return moment().isBefore(this.slot_start_ts); });
+        const later_rows = agenda_rows.filter(function() { return now_moment.isBefore(this.slot_start_ts); });
         // Highlight ongoing based on the current time
         agenda_rows.removeClass("table-warning");
         ongoing_rows.addClass("table-warning");