refactor: Rename `panels.js` to `navbar_alerts.js` as it better explains it.

frontend_tests/node_tests/navbar_alerts.js

@@ -35,7 +35,7 @@ set_global("document", {
 });
 
 const {localstorage} = zrequire("localstorage");
-const panels = zrequire("panels");
+const navbar_alerts = zrequire("navbar_alerts");
 const notifications = zrequire("notifications");
 const util = zrequire("util");
 
@@ -54,45 +54,45 @@ test("allow_notification_alert", () => {
     util.is_mobile = () => false;
     notifications.granted_desktop_notifications_permission = () => false;
     notifications.permission_state = () => "granted";
-    assert.equal(panels.should_show_notifications(ls), true);
+    assert.equal(navbar_alerts.should_show_notifications(ls), true);
 
     // Avoid showing if the user said to never show alert on this computer again.
     ls.set("dontAskForNotifications", true);
-    assert.equal(panels.should_show_notifications(ls), false);
+    assert.equal(navbar_alerts.should_show_notifications(ls), false);
 
     // Avoid showing if device is mobile.
     ls.set("dontAskForNotifications", undefined);
-    assert.equal(panels.should_show_notifications(ls), true);
+    assert.equal(navbar_alerts.should_show_notifications(ls), true);
     util.is_mobile = () => true;
-    assert.equal(panels.should_show_notifications(ls), false);
+    assert.equal(navbar_alerts.should_show_notifications(ls), false);
 
     // Avoid showing if notification permission is denied.
     util.is_mobile = () => false;
-    assert.equal(panels.should_show_notifications(ls), true);
+    assert.equal(navbar_alerts.should_show_notifications(ls), true);
     notifications.permission_state = () => "denied";
-    assert.equal(panels.should_show_notifications(ls), false);
+    assert.equal(navbar_alerts.should_show_notifications(ls), false);
 
     // Avoid showing if notification is already granted.
     notifications.permission_state = () => "granted";
     notifications.granted_desktop_notifications_permission = () => "granted";
-    assert.equal(panels.should_show_notifications(ls), false);
+    assert.equal(navbar_alerts.should_show_notifications(ls), false);
 });
 
 test("profile_incomplete_alert", () => {
     // Show alert.
     page_params.is_admin = true;
     page_params.realm_description = "Organization imported from Slack!";
-    assert.equal(panels.check_profile_incomplete(), true);
+    assert.equal(navbar_alerts.check_profile_incomplete(), true);
 
     // Avoid showing if the user is not admin.
     page_params.is_admin = false;
-    assert.equal(panels.check_profile_incomplete(), false);
+    assert.equal(navbar_alerts.check_profile_incomplete(), false);
 
     // Avoid showing if the realm description is already updated.
     page_params.is_admin = true;
-    assert.equal(panels.check_profile_incomplete(), true);
+    assert.equal(navbar_alerts.check_profile_incomplete(), true);
     page_params.realm_description = "Organization description already set!";
-    assert.equal(panels.check_profile_incomplete(), false);
+    assert.equal(navbar_alerts.check_profile_incomplete(), false);
 });
 
 test("server_upgrade_alert hide_duration_expired", (override) => {
@@ -101,12 +101,12 @@ test("server_upgrade_alert hide_duration_expired", (override) => {
 
     override(Date, "now", () => start_time);
     assert.equal(ls.get("lastUpgradeNagDismissalTime"), undefined);
-    assert.equal(panels.should_show_server_upgrade_notification(ls), true);
-    panels.dismiss_upgrade_nag(ls);
-    assert.equal(panels.should_show_server_upgrade_notification(ls), false);
+    assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), true);
+    navbar_alerts.dismiss_upgrade_nag(ls);
+    assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), false);
 
     override(Date, "now", () => addDays(start_time, 8)); // Friday 14/5/2021 07:02:27 AM (UTC+0)
-    assert.equal(panels.should_show_server_upgrade_notification(ls), true);
-    panels.dismiss_upgrade_nag(ls);
-    assert.equal(panels.should_show_server_upgrade_notification(ls), false);
+    assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), true);
+    navbar_alerts.dismiss_upgrade_nag(ls);
+    assert.equal(navbar_alerts.should_show_server_upgrade_notification(ls), false);
 });

static/js/floating_recipient_bar.js

@@ -9,7 +9,11 @@ import * as timerender from "./timerender";
 let is_floating_recipient_bar_showing = false;
 
 function top_offset(elem) {
-    return elem.offset().top - $("#message_view_header").safeOuterHeight() - $("#panels").height();
+    return (
+        elem.offset().top -
+        $("#message_view_header").safeOuterHeight() -
+        $("#navbar_alerts_wrapper").height()
+    );
 }
 
 export function first_visible_message(bar) {

static/js/navbar_alerts.js

@@ -11,13 +11,13 @@ import * as util from "./util";
 /* This is called by resize.js, and thus indirectly when we trigger
  * resize events in the logic below. */
 export function resize_app() {
-    const panels_height = $("#panels").height();
-    $("body > .app").height("calc(100% - " + panels_height + "px)");
+    const navbar_alerts_wrapper_height = $("#navbar_alerts_wrapper").height();
+    $("body > .app").height("calc(100% - " + navbar_alerts_wrapper_height + "px)");
 
     // the floating recipient bar is usually positioned right below
     // the `.header` element (including padding).
     const frb_top =
-        panels_height +
+        navbar_alerts_wrapper_height +
         $(".header").height() +
         Number.parseInt($(".header").css("paddingBottom"), 10);
     $("#floating_recipient_bar").css("top", frb_top + "px");
@@ -149,7 +149,7 @@ export function initialize() {
         dismiss_upgrade_nag(ls);
     });
 
-    $("#panels").on("click", ".alert .close, .alert .exit", function (e) {
+    $("#navbar_alerts_wrapper").on("click", ".alert .close, .alert .exit", function (e) {
         e.stopPropagation();
         const $process = $(e.target).closest("[data-process]");
         if (get_step($process) === 1 && $process.data("process") === "notifications") {
@@ -160,8 +160,8 @@ export function initialize() {
         $(window).trigger("resize");
     });
 
-    // Treat Enter with links in the panels UI focused like a click.,
-    $("#panels").on("keyup", ".alert-link[role=button]", function (e) {
+    // Treat Enter with links in the navbar alerts UI focused like a click.,
+    $("#navbar_alerts_wrapper").on("keyup", ".alert-link[role=button]", function (e) {
         e.stopPropagation();
         if (e.key === "Enter") {
             $(this).trigger("click");

static/js/recent_topics.js

@@ -15,9 +15,9 @@ import * as message_view_header from "./message_view_header";
 import * as muting from "./muting";
 import * as narrow from "./narrow";
 import * as narrow_state from "./narrow_state";
+import * as navbar_alerts from "./navbar_alerts";
 import * as navigate from "./navigate";
 import * as overlays from "./overlays";
-import * as panels from "./panels";
 import * as people from "./people";
 import * as popovers from "./popovers";
 import * as recent_senders from "./recent_senders";
@@ -689,7 +689,7 @@ export function hide() {
 
     // Fixes misaligned message_view and hidden
     // floating_recipient_bar.
-    panels.resize_app();
+    navbar_alerts.resize_app();
 
     // This makes sure user lands on the selected message
     // and not always at the top of the narrow.

static/js/resize.js

@@ -5,9 +5,9 @@ import * as blueslip from "./blueslip";
 import * as condense from "./condense";
 import * as message_lists from "./message_lists";
 import * as message_viewport from "./message_viewport";
+import * as navbar_alerts from "./navbar_alerts";
 import * as navigate from "./navigate";
 import {page_params} from "./page_params";
-import * as panels from "./panels";
 import * as popovers from "./popovers";
 import * as ui from "./ui";
 import * as util from "./util";
@@ -209,7 +209,7 @@ export function resize_sidebars() {
 }
 
 export function resize_page_components() {
-    panels.resize_app();
+    navbar_alerts.resize_app();
     const h = resize_sidebars();
     resize_bottom_whitespace(h);
 }

static/js/server_events_dispatch.js

@@ -22,11 +22,11 @@ import * as message_list from "./message_list";
 import * as message_lists from "./message_lists";
 import * as muting_ui from "./muting_ui";
 import * as narrow_state from "./narrow_state";
+import * as navbar_alerts from "./navbar_alerts";
 import * as night_mode from "./night_mode";
 import * as notifications from "./notifications";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
-import * as panels from "./panels";
 import * as peer_data from "./peer_data";
 import * as people from "./people";
 import * as reactions from "./reactions";
@@ -290,7 +290,7 @@ export function dispatch_normal_event(event) {
             if (page_params.is_admin) {
                 // Update the UI notice about the user's profile being
                 // incomplete, as we might have filled in the missing field(s).
-                panels.show_profile_incomplete(panels.check_profile_incomplete());
+                navbar_alerts.show_profile_incomplete(navbar_alerts.check_profile_incomplete());
             }
             break;
         }

static/js/ui_init.js

@@ -38,11 +38,11 @@ import * as message_scroll from "./message_scroll";
 import * as message_view_header from "./message_view_header";
 import * as message_viewport from "./message_viewport";
 import * as muting from "./muting";
+import * as navbar_alerts from "./navbar_alerts";
 import * as navigate from "./navigate";
 import * as notifications from "./notifications";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
-import * as panels from "./panels";
 import * as people from "./people";
 import * as pm_conversations from "./pm_conversations";
 import * as presence from "./presence";
@@ -471,7 +471,7 @@ export function initialize_everything() {
     people.initialize(page_params.user_id, people_params);
     scroll_bar.initialize();
     message_viewport.initialize();
-    panels.initialize();
+    navbar_alerts.initialize();
     compose_closed_ui.initialize();
     initialize_kitchen_sink_stuff();
     echo.initialize();

static/styles/zulip.css

@@ -275,7 +275,7 @@ p.n-margin {
     border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
 }
 
-#panels {
+#navbar_alerts_wrapper {
     font-size: 1rem;
     position: relative;
 

templates/zerver/app/navbar_alerts.html

@@ -1,4 +1,4 @@
-<div id="panels">
+<div id="navbar_alerts_wrapper">
     <div data-process="notifications" class="alert alert-info">
         <div data-step="1">
             {% trans %}Zulip needs your permission to

tools/test-js-with-node

@@ -99,7 +99,7 @@ EXEMPT_FILES = {
     "static/js/overlays.js",
     "static/js/padded_widget.js",
     "static/js/page_params.js",
-    "static/js/panels.js",
+    "static/js/navbar_alerts.js",
     "static/js/pm_list_dom.js",
     "static/js/poll_widget.js",
     "static/js/popovers.js",