navbar: Rename tab_bar to message_view_header.

Prior to commit eb4a2b9d4e the center
area of the navbar was based on a structure that appended crumbs or
"tabs" as <li>s, forming a tab_bar and a tab_list.

However, in eb4a2b9d4e we apply a new
style and structure to the navbar which lets go of the convention of
tabs. Hence, we'd like to purge the tab_bar and tab_list labels from
our code base.

We purged tab_list in 1267caf5009118875f47fdafe312880af08024e1.

This commit purges tab_bar, it includes:
- A blanket search and replace of tab_bar with message_view_header.
- Splitting a single line comment in
  tab_bar.js / message_view_header.js.
- The renaming of tab_bar.js to message_view_header.js.
- The renaming of tab_bar.hbs to message_view_header.hbs.
- A blanket search and replace of tab_data with
  message_view_header_data.
- Replacing the single occurrence of tabbar with message_view_header
  (it was within a comment.)

.eslintrc.json

@@ -253,7 +253,7 @@
                 "StripeCheckout": false,
                 "submessage": false,
                 "subs": false,
-                "tab_bar": false,
+                "message_view_header": false,
                 "templates": false,
                 "tictactoe_widget": false,
                 "timerender": false,

frontend_tests/node_tests/narrow_activate.js

@@ -31,7 +31,7 @@ set_global("notifications", {});
 set_global("page_params", {});
 set_global("search", {});
 set_global("stream_list", {});
-set_global("tab_bar", {});
+set_global("message_view_header", {});
 set_global("top_left_corner", {});
 set_global("typing_events", {});
 set_global("ui_util", {});
@@ -86,7 +86,7 @@ function test_helper() {
     stub("notifications", "redraw_title");
     stub("search", "update_button_visibility");
     stub("stream_list", "handle_narrow_activated");
-    stub("tab_bar", "initialize");
+    stub("message_view_header", "initialize");
     stub("top_left_corner", "handle_narrow_activated");
     stub("typing_events", "render_notifications_for_narrow");
     stub("ui_util", "change_tab_to");
@@ -209,7 +209,7 @@ run_test("basics", () => {
         "top_left_corner.handle_narrow_activated",
         "stream_list.handle_narrow_activated",
         "typing_events.render_notifications_for_narrow",
-        "tab_bar.initialize",
+        "message_view_header.initialize",
     ]);
 
     current_msg_list.selected_id = () => -1;

frontend_tests/node_tests/search.js

@@ -4,7 +4,7 @@ set_global("page_params", {
 zrequire("search");
 zrequire("search_pill");
 zrequire("Filter", "js/filter");
-zrequire("tab_bar");
+zrequire("message_view_header");
 
 const noop = () => {};
 const return_true = () => true;

frontend_tests/node_tests/search_legacy.js

@@ -2,7 +2,7 @@ set_global("page_params", {
     search_pills_enabled: false,
 });
 zrequire("search");
-zrequire("tab_bar");
+zrequire("message_view_header");
 
 const noop = () => {};
 const return_true = () => true;

frontend_tests/node_tests/stream_events.js

@@ -21,7 +21,7 @@ zrequire("stream_data");
 zrequire("stream_events");
 zrequire("Filter", "js/filter");
 zrequire("narrow_state");
-zrequire("tab_bar");
+zrequire("message_view_header");
 
 const george = {
     email: "george@zulip.com",
@@ -238,13 +238,13 @@ run_test("marked_subscribed", (override) => {
         let list_updated = false;
 
         const stream_list_stub = global.make_stub();
-        const tab_bar_stub = global.make_stub();
+        const message_view_header_stub = global.make_stub();
         const message_util_stub = global.make_stub();
 
         override("stream_color.update_stream_color", noop);
         override("stream_list.add_sidebar_row", stream_list_stub.f);
         override("message_util.do_unread_count_updates", message_util_stub.f);
-        override("tab_bar.render_title_area", tab_bar_stub.f);
+        override("message_view_header.render_title_area", message_view_header_stub.f);
         override("current_msg_list.update_trailing_bookend", () => {
             list_updated = true;
         });
@@ -256,7 +256,7 @@ run_test("marked_subscribed", (override) => {
 
         args = stream_list_stub.get_args("sub");
         assert.equal(args.sub.stream_id, 1);
-        assert.equal(tab_bar_stub.num_calls, 1);
+        assert.equal(message_view_header_stub.num_calls, 1);
 
         assert.equal(list_updated, true);
 
@@ -370,8 +370,8 @@ run_test("mark_unsubscribed", (override) => {
     // Test update bookend and remove done event
     narrow_state.set_current_filter(frontend_filter);
     {
-        const tab_bar_stub = global.make_stub();
+        const message_view_header_stub = global.make_stub();
-        override("tab_bar.render_title_area", tab_bar_stub.f);
+        override("message_view_header.render_title_area", message_view_header_stub.f);
         override("stream_data.unsubscribe_myself", noop);
         override("subs.update_settings_for_unsubscribed", noop);
 
@@ -388,7 +388,7 @@ run_test("mark_unsubscribed", (override) => {
 
         stream_events.mark_unsubscribed(frontend);
 
-        assert.equal(tab_bar_stub.num_calls, 1);
+        assert.equal(message_view_header_stub.num_calls, 1);
         assert.equal(updated, true);
         assert.equal(event_triggered, true);
     }

frontend_tests/node_tests/ui_init.js

@@ -86,7 +86,7 @@ zrequire("spoilers");
 zrequire("lightbox");
 zrequire("overlays");
 zrequire("invite");
-zrequire("tab_bar");
+zrequire("message_view_header");
 zrequire("narrow_state");
 zrequire("people");
 zrequire("presence");
@@ -160,8 +160,8 @@ page_params.realm_filters = [];
 page_params.starred_messages = [];
 page_params.presences = [];
 
-const $tab_bar = $.create("#tab_bar");
+const $message_view_header = $.create("#message_view_header");
-$tab_bar.append = () => {};
+$message_view_header.append = () => {};
 upload.setup_upload = () => {};
 
 server_events.home_view_loaded = () => true;
@@ -179,10 +179,10 @@ const count_stub = $.create("count");
 count_stub.set_find_results(".value", value_stub);
 $(".top_left_starred_messages").set_find_results(".count", count_stub);
 
-$("#tab_bar .stream").length = 0;
+$("#message_view_header .stream").length = 0;
 
 // set find results doesn't work here since we call .empty() in the code.
-$tab_bar.find = () => false;
+$message_view_header.find = () => false;
 
 compose.compute_show_video_chat_button = () => {};
 $("#below-compose-content .video_link").toggle = () => {};

static/js/bundles/app.js

@@ -174,7 +174,7 @@ import "../settings_user_groups.js";
 import "../settings_profile_fields.js";
 import "../settings.js";
 import "../admin.js";
-import "../tab_bar.js";
+import "../message_view_header.js";
 import "../bot_data.js";
 import "../reactions.js";
 import "../typing.js";

static/js/floating_recipient_bar.js

@@ -3,7 +3,7 @@ const XDate = require("xdate");
 let is_floating_recipient_bar_showing = false;
 
 function top_offset(elem) {
-    return elem.offset().top - $("#tab_bar").safeOuterHeight();
+    return elem.offset().top - $("#message_view_header").safeOuterHeight();
 }
 
 exports.first_visible_message = function (bar) {

static/js/global.d.ts

@@ -149,7 +149,7 @@ declare let stream_sort: any;
 declare let stream_ui_updates: any;
 declare let submessage: any;
 declare let subs: any;
-declare let tab_bar: any;
+declare let message_view_header: any;
 declare let templates: any;
 declare let tictactoe_widget: any;
 declare let timerender: any;

static/js/hotkey.js

@@ -240,7 +240,7 @@ exports.process_escape_key = function (e) {
                 $("#searchbox .pill").trigger("blur");
                 $("#searchbox #search_query").trigger("blur");
             } else {
-                tab_bar.exit_search();
+                message_view_header.exit_search();
             }
             return true;
         }

static/js/message_view_header.js

@@ -1,4 +1,4 @@
-const render_tab_bar = require("../templates/tab_bar.hbs");
+const render_message_view_header = require("../templates/message_view_header.hbs");
 
 const rendered_markdown = require("./rendered_markdown");
 
@@ -16,59 +16,61 @@ function get_formatted_sub_count(current_stream) {
     return sub_count;
 }
 
-function make_tab_data(filter) {
+function make_message_view_header(filter) {
-    const tab_data = {};
+    const message_view_header = {};
     if (filter === undefined) {
         return {
             title: i18n.t("All messages"),
             icon: "home",
         };
     }
-    tab_data.title = filter.get_title();
+    message_view_header.title = filter.get_title();
-    tab_data.icon = filter.get_icon();
+    message_view_header.icon = filter.get_icon();
     if (filter.has_operator("stream") && !filter._sub) {
-        tab_data.sub_count = "0";
+        message_view_header.sub_count = "0";
-        tab_data.formatted_sub_count = "0";
+        message_view_header.formatted_sub_count = "0";
-        tab_data.rendered_narrow_description = i18n.t("This stream does not exist or is private.");
+        message_view_header.rendered_narrow_description = i18n.t(
-        return tab_data;
+            "This stream does not exist or is private.",
+        );
+        return message_view_header;
     }
     if (filter._sub) {
         // We can now be certain that the narrow
         // involves a stream which exists and
         // the current user can access.
         const current_stream = filter._sub;
-        tab_data.rendered_narrow_description = current_stream.rendered_description;
+        message_view_header.rendered_narrow_description = current_stream.rendered_description;
-        tab_data.sub_count = get_sub_count(current_stream);
+        message_view_header.sub_count = get_sub_count(current_stream);
-        tab_data.formatted_sub_count = get_formatted_sub_count(current_stream);
+        message_view_header.formatted_sub_count = get_formatted_sub_count(current_stream);
         // the "title" is passed as a variable and doesn't get translated (nor should it)
-        tab_data.sub_count_tooltip_text = i18n.t("__count__ users are subscribed to #__title__", {
+        message_view_header.sub_count_tooltip_text = i18n.t(
-            count: tab_data.sub_count,
+            "__count__ users are subscribed to #__title__",
-            title: tab_data.title,
+            {count: message_view_header.sub_count, title: message_view_header.title},
-        });
+        );
-        tab_data.stream_settings_link =
+        message_view_header.stream_settings_link =
             "#streams/" + current_stream.stream_id + "/" + current_stream.name;
     }
-    return tab_data;
+    return message_view_header;
 }
 
-exports.colorize_tab_bar = function () {
+exports.colorize_message_view_header = function () {
     const filter = narrow_state.filter();
     if (filter === undefined || !filter._sub) {
         return;
     }
-    $("#tab_bar .stream > .fa").css("color", filter._sub.color);
+    $("#message_view_header .stream > .fa").css("color", filter._sub.color);
 };
 
-function append_and_display_title_area(tab_bar_data) {
+function append_and_display_title_area(message_view_header_data) {
-    const tab_bar_elem = $("#tab_bar");
+    const message_view_header_elem = $("#message_view_header");
-    tab_bar_elem.empty();
+    message_view_header_elem.empty();
-    const rendered = render_tab_bar(tab_bar_data);
+    const rendered = render_message_view_header(message_view_header_data);
-    tab_bar_elem.append(rendered);
+    message_view_header_elem.append(rendered);
-    if (tab_bar_data.stream_settings_link) {
+    if (message_view_header_data.stream_settings_link) {
-        exports.colorize_tab_bar();
+        exports.colorize_message_view_header();
     }
-    tab_bar_elem.removeClass("notdisplayed");
+    message_view_header_elem.removeClass("notdisplayed");
-    const content = tab_bar_elem.find("span.rendered_markdown");
+    const content = message_view_header_elem.find("span.rendered_markdown");
     if (content) {
         // Update syntax like stream names, emojis, mentions, timestamps.
         rendered_markdown.update_elements(content);
@@ -82,7 +84,7 @@ function bind_title_area_handlers() {
         e.stopPropagation();
     });
 
-    $("#tab_bar span:nth-last-child(2)").on("click", (e) => {
+    $("#message_view_header span:nth-last-child(2)").on("click", (e) => {
         if (document.getSelection().type === "Range") {
             // Allow copy/paste to work normally without interference.
             return;
@@ -98,22 +100,23 @@ function bind_title_area_handlers() {
 
     // handler that makes sure that hover plays nicely
     // with whether search is being opened or not.
-    $("#tab_bar .narrow_description > a")
+    $("#message_view_header .narrow_description > a")
         .on("mouseenter", () => {
-            $("#tab_bar .search_closed").addClass("search_icon_hover_highlight");
+            $("#message_view_header .search_closed").addClass("search_icon_hover_highlight");
         })
         .on("mouseleave", () => {
-            $("#tab_bar .search_closed").removeClass("search_icon_hover_highlight");
+            $("#message_view_header .search_closed").removeClass("search_icon_hover_highlight");
         });
 }
 
-function build_tab_bar(filter) {
+function build_message_view_header(filter) {
-    // This makes sure we don't waste time appending tab_bar on a template where it's never used
+    // This makes sure we don't waste time appending
+    // message_view_header on a template where it's never used
     if (filter && !filter.is_common_narrow()) {
         exports.open_search_bar_and_close_narrow_description();
     } else {
-        const tab_bar_data = make_tab_data(filter);
+        const message_view_header_data = make_message_view_header(filter);
-        append_and_display_title_area(tab_bar_data);
+        append_and_display_title_area(message_view_header_data);
         bind_title_area_handlers();
         if (page_params.search_pills_enabled && $("#search_query").is(":focus")) {
             exports.open_search_bar_and_close_narrow_description();
@@ -152,7 +155,7 @@ exports.initialize = function () {
 
     // register searchbar click handler
     $("#search_exit").on("click", (e) => {
-        tab_bar.exit_search();
+        message_view_header.exit_search();
         e.preventDefault();
         e.stopPropagation();
     });
@@ -160,7 +163,7 @@ exports.initialize = function () {
 
 exports.render_title_area = function () {
     const filter = narrow_state.filter();
-    build_tab_bar(filter);
+    build_message_view_header(filter);
 };
 
 // This function checks if "modified_sub" which is the stream whose values
@@ -169,22 +172,22 @@ exports.render_title_area = function () {
 exports.maybe_rerender_title_area_for_stream = function (modified_sub) {
     const filter = narrow_state.filter();
     if (filter && filter._sub && filter._sub.stream_id === modified_sub.stream_id) {
-        tab_bar.render_title_area();
+        message_view_header.render_title_area();
     }
 };
 
 exports.open_search_bar_and_close_narrow_description = function () {
     exports.reset_searchbox_text();
     $(".navbar-search").addClass("expanded");
-    $("#tab_bar").addClass("hidden");
+    $("#message_view_header").addClass("hidden");
 };
 
 exports.close_search_bar_and_open_narrow_description = function () {
     const filter = narrow_state.filter();
     if (!(filter && !filter.is_common_narrow())) {
         $(".navbar-search").removeClass("expanded");
-        $("#tab_bar").removeClass("hidden");
+        $("#message_view_header").removeClass("hidden");
     }
 };
 
-window.tab_bar = exports;
+window.message_view_header = exports;

static/js/narrow.js

@@ -345,7 +345,7 @@ exports.activate = function (raw_operators, opts) {
     top_left_corner.handle_narrow_activated(current_filter);
     stream_list.handle_narrow_activated(current_filter);
     typing_events.render_notifications_for_narrow();
-    tab_bar.initialize();
+    message_view_header.initialize();
 
     msg_list.initial_core_time = new Date();
     setTimeout(() => {
@@ -754,7 +754,7 @@ function handle_post_narrow_deactivate_processes() {
     message_edit.handle_narrow_deactivated();
     widgetize.set_widgets_for_list();
     typing_events.render_notifications_for_narrow();
-    tab_bar.initialize();
+    message_view_header.initialize();
     exports.narrow_title = "home";
     notifications.redraw_title();
     message_scroll.hide_top_of_narrow_notices();

static/js/search.js

@@ -108,7 +108,7 @@ exports.initialize = function () {
         },
         // Use our custom typeahead `on_escape` hook to exit
         // the search bar as soon as the user hits Esc.
-        on_escape: tab_bar.exit_search,
+        on_escape: message_view_header.exit_search,
     });
 
     searchbox_form.on("compositionend", () => {
@@ -195,7 +195,7 @@ exports.initialize = function () {
         // while we want to add box-shadow to `#searchbox`. This could have been done
         // with `:focus-within` CSS selector, but it is not supported in IE or Opera.
         searchbox.on("focusout", () => {
-            tab_bar.close_search_bar_and_open_narrow_description();
+            message_view_header.close_search_bar_and_open_narrow_description();
             searchbox.css({"box-shadow": "unset"});
         });
     }
@@ -207,7 +207,7 @@ exports.focus_search = function () {
 };
 
 exports.initiate_search = function () {
-    tab_bar.open_search_bar_and_close_narrow_description();
+    message_view_header.open_search_bar_and_close_narrow_description();
     $("#searchbox").css({"box-shadow": "inset 0px 0px 0px 2px hsl(204, 20%, 74%)"});
     $("#search_query").typeahead("lookup").trigger("select");
     if (page_params.search_pills_enabled) {

static/js/stream_color.js

@@ -95,7 +95,7 @@ exports.update_stream_color = function (sub, color, opts) {
         update_historical_message_color(sub.name, color);
     }
     update_stream_sidebar_swatch_color(stream_id, color);
-    tab_bar.colorize_tab_bar();
+    message_view_header.colorize_message_view_header();
 };
 
 function picker_do_change_color(color) {

static/js/stream_events.js

@@ -104,7 +104,7 @@ exports.mark_subscribed = function (sub, subscribers, color) {
     }
 
     // update navbar if necessary
-    tab_bar.maybe_rerender_title_area_for_stream(sub);
+    message_view_header.maybe_rerender_title_area_for_stream(sub);
 
     if (narrow_state.is_for_stream_id(sub.stream_id)) {
         current_msg_list.update_trailing_bookend();
@@ -128,7 +128,7 @@ exports.mark_unsubscribed = function (sub) {
             subs.update_settings_for_unsubscribed(sub);
         }
         // update navbar if necessary
-        tab_bar.maybe_rerender_title_area_for_stream(sub);
+        message_view_header.maybe_rerender_title_area_for_stream(sub);
     } else {
         // Already unsubscribed
         return;

static/js/subs.js

@@ -144,7 +144,7 @@ exports.update_stream_name = function (sub, new_name) {
     }
 
     // Update navbar if needed
-    tab_bar.maybe_rerender_title_area_for_stream(sub);
+    message_view_header.maybe_rerender_title_area_for_stream(sub);
 };
 
 exports.update_stream_description = function (sub, description, rendered_description) {
@@ -159,7 +159,7 @@ exports.update_stream_description = function (sub, description, rendered_descrip
     stream_edit.update_stream_description(sub);
 
     // Update navbar if needed
-    tab_bar.maybe_rerender_title_area_for_stream(sub);
+    message_view_header.maybe_rerender_title_area_for_stream(sub);
 };
 
 exports.update_stream_privacy = function (sub, values) {
@@ -176,7 +176,7 @@ exports.update_stream_privacy = function (sub, values) {
     stream_list.redraw_stream_privacy(sub);
 
     // Update navbar if needed
-    tab_bar.maybe_rerender_title_area_for_stream(sub);
+    message_view_header.maybe_rerender_title_area_for_stream(sub);
 };
 
 exports.update_stream_post_policy = function (sub, new_value) {
@@ -212,7 +212,7 @@ exports.update_subscribers_ui = function (sub) {
     // We rely on rerender_subscriptions_settings to complete the
     // stream_data subscribers count update
     exports.rerender_subscriptions_settings(sub);
-    tab_bar.maybe_rerender_title_area_for_stream(sub);
+    message_view_header.maybe_rerender_title_area_for_stream(sub);
 };
 
 exports.add_sub_to_table = function (sub) {

static/js/ui_init.js

@@ -432,7 +432,7 @@ exports.initialize_everything = function () {
     overlays.initialize();
     invite.initialize();
     timerender.initialize();
-    tab_bar.initialize();
+    message_view_header.initialize();
     server_events.initialize();
     user_status.initialize(user_status_params);
     compose_pm_pill.initialize();

static/styles/night_mode.scss

@@ -12,7 +12,7 @@ body.night-mode {
 
     .app-main,
     .header-main,
-    #tab_bar_underpadding,
+    #message_view_header_underpadding,
     .floating_recipient .message-header-wrapper,
     .column-middle,
     #compose,
@@ -252,22 +252,22 @@ on a dark background, and don't change the dark labels dark either. */
         border-color: hsla(0, 0%, 0%, 0.6);
     }
 
-    #tab_bar .sub_count {
+    #message_view_header .sub_count {
         &::before,
         &::after {
             color: hsla(0, 0%, 100%, 0.5);
         }
     }
 
-    #tab_bar span:nth-last-child(2):hover + .search_closed {
+    #message_view_header span:nth-last-child(2):hover + .search_closed {
         color: hsl(0, 0%, 100%);
     }
 
-    #tab_bar .stream {
+    #message_view_header .stream {
         color: hsl(236, 33%, 90%);
     }
-    #tab_bar .sub_count,
+    #message_view_header .sub_count,
-    #tab_bar .narrow_description {
+    #message_view_header .narrow_description {
         color: hsla(0, 0%, 90%, 1);
     }
 
@@ -326,7 +326,7 @@ on a dark background, and don't change the dark labels dark either. */
     .clear_search_button:active,
     .clear_search_button[disabled]:hover,
     #user-groups .save-instructions,
-    #tab_bar .search_icon,
+    #message_view_header .search_icon,
     #searchbox_legacy .search_icon,
     #searchbox_legacy .search_button,
     #searchbox .search_icon,
@@ -342,7 +342,7 @@ on a dark background, and don't change the dark labels dark either. */
 
     #message_edit_tooltip:hover,
     .clear_search_button:hover,
-    #tab_bar .search_icon:hover,
+    #message_view_header .search_icon:hover,
     .search_icon_hover_highlight,
     #searchbox_legacy .search_icon:hover,
     #searchbox_legacy .search_button:hover,

static/styles/zulip.scss

@@ -38,7 +38,7 @@ body {
 
 /* Common background color */
 body,
-#tab_bar_underpadding {
+#message_view_header_underpadding {
     background-color: hsl(0, 0%, 100%);
     transition: background-color 200ms linear;
 }
@@ -557,7 +557,7 @@ li.actual-dropdown-menu i {
 }
 
 .message_area_padder {
-    /* The height of the header and the tabbar plus a small gap */
+    /* The height of the header and the message_view_header plus a small gap */
     margin-top: 57px;
     /* This is needed for the floating recipient bar
        in Firefox only, for some reason;
@@ -1470,7 +1470,7 @@ div.focused_table {
     }
 }
 
-#tab_bar {
+#message_view_header {
     z-index: 2;
     float: left;
     height: $header_height;
@@ -1787,7 +1787,7 @@ div.focused_table {
     }
 }
 
-#tab_bar_underpadding {
+#message_view_header_underpadding {
     position: absolute;
     width: 100%;
     top: $header_height;
@@ -2722,7 +2722,7 @@ select.inline_select_topic_edit {
     #streamlist-toggle,
     #navbar-buttons,
     .navbar-search,
-    #tab_bar,
+    #message_view_header,
     #searchbox,
     #searchbox_legacy,
     .header {
@@ -2758,7 +2758,7 @@ select.inline_select_topic_edit {
         }
     }
 
-    #tab_bar_underpadding {
+    #message_view_header_underpadding {
         top: 30px;
     }
 
@@ -2795,7 +2795,7 @@ select.inline_select_topic_edit {
         line-height: 15px;
     }
 
-    #tab_bar_underpadding {
+    #message_view_header_underpadding {
         height: 10px;
     }
 

templates/zerver/app/index.html

@@ -56,7 +56,7 @@
 <div class="fixed-app">
     <div class="app-main">
         <div class="column-middle column-overlay">
-            <div id="tab_bar_underpadding"></div>
+            <div id="message_view_header_underpadding"></div>
         </div>
     </div>
 </div>

templates/zerver/app/navbar.html

@@ -13,7 +13,7 @@
                     </a>
                 </div>
                 <div class="top-navbar-border top-navbar-container">
-                    <div id="tab_bar" class="notdisplayed">
+                    <div id="message_view_header" class="notdisplayed">
                     </div>
                     {% if search_pills_enabled %}
                     <div id="searchbox">

tools/check-templates

@@ -72,7 +72,7 @@ def check_html_templates(templates: Iterable[str], all_dups: bool, fix: bool) ->
             # Temporary while we have searchbox forked
             'search_exit',
             'search_query',
-            'tab_bar',
+            'message_view_header',
             'search_arrows',
             'searchbox_form',
             'searchbox',

tools/test-js-with-node

@@ -139,7 +139,7 @@ EXEMPT_FILES = {
     'static/js/stream_ui_updates.js',
     'static/js/submessage.js',
     'static/js/subs.js',
-    'static/js/tab_bar.js',
+    'static/js/message_view_header.js',
     'static/js/templates.js',
     'static/js/tictactoe_widget.js',
     'static/js/timerender.js',