stream picker: Remove stream colorblock.

To achive this the `stream_header_colorblock` div was removed from
`dropdown_widget_with_stream_colorblock.hbs` template. this change made
the file name irelevenet so it was necessary to rename the file to
`dropdown_widget_wrapper.hbs`. After removing the html strcuture for
colorblock from templates the css for colorblock was also removed.
followed by the javascript which was used to add colorblock to the
stream picker. After removing javascript tests were updated.
Fixes: #28796.

web/src/compose_actions.js

@@ -23,7 +23,6 @@ import * as resize from "./resize";
 import * as settings_config from "./settings_config";
 import * as spectators from "./spectators";
 import {realm} from "./state_data";
-import * as stream_bar from "./stream_bar";
 import * as stream_data from "./stream_data";
 
 const compose_clear_box_hooks = [];
@@ -115,12 +114,6 @@ export function complete_starting_tasks(msg_type, opts) {
 
     maybe_scroll_up_selected_message(opts);
     compose_fade.start_compose(msg_type);
-    if (msg_type === "stream") {
-        stream_bar.decorate(
-            opts.stream_id,
-            $("#stream_message_recipient_topic .message_header_stream"),
-        );
-    }
     $(document).trigger(new $.Event("compose_started.zulip", opts));
     compose_recipient.update_placeholder_text();
     compose_recipient.update_narrow_to_recipient_visibility();
@@ -245,13 +238,6 @@ export function start(msg_type, opts) {
         clear_box();
     }
 
-    if (msg_type === "stream") {
-        const $stream_header_colorblock = $(
-            "#compose_select_recipient_widget_wrapper .stream_header_colorblock",
-        );
-        stream_bar.decorate(opts.stream_id, $stream_header_colorblock);
-    }
-
     if (msg_type === "private") {
         compose_state.set_compose_recipient_id(compose_state.DIRECT_MESSAGE_ID);
         compose_recipient.on_compose_select_recipient_update();

web/src/compose_recipient.js

@@ -18,7 +18,6 @@ import * as narrow_state from "./narrow_state";
 import * as people from "./people";
 import * as settings_config from "./settings_config";
 import {realm} from "./state_data";
-import * as stream_bar from "./stream_bar";
 import * as stream_data from "./stream_data";
 import * as sub_store from "./sub_store";
 import * as ui_util from "./ui_util";
@@ -207,12 +206,8 @@ export function on_compose_select_recipient_update() {
 
     if (curr_message_type === "stream") {
         // Update stream name in the recipient box.
-        const $stream_header_colorblock = $(
-            "#compose_select_recipient_widget_wrapper .stream_header_colorblock",
-        );
         const stream_id = compose_state.stream_id();
         update_recipient_label(stream_id);
-        stream_bar.decorate(stream_id, $stream_header_colorblock);
     }
 
     update_on_recipient_change();

web/src/stream_bar.ts

@@ -1,10 +0,0 @@
-import * as stream_data from "./stream_data";
-
-// In an attempt to decrease mixing, set stream bar
-// color look like the stream being used.
-// (In particular, if there's a color associated with it,
-//  have that color be reflected here too.)
-export function decorate(stream_id: number | undefined, $element: JQuery): void {
-    const color = stream_data.get_color(stream_id);
-    $element.css("background-color", color);
-}

web/src/stream_popover.js

@@ -18,7 +18,6 @@ import * as message_lists from "./message_lists";
 import * as popover_menus from "./popover_menus";
 import {left_sidebar_tippy_options} from "./popover_menus";
 import * as settings_data from "./settings_data";
-import * as stream_bar from "./stream_bar";
 import * as stream_color from "./stream_color";
 import * as stream_data from "./stream_data";
 import * as stream_settings_api from "./stream_settings_api";
@@ -33,7 +32,6 @@ import * as util from "./util";
 // that pop up from the left sidebar.
 let stream_popover_instance = null;
 let stream_widget_value;
-let $stream_header_colorblock;
 
 function get_popover_menu_items(sidebar_elem) {
     if (!sidebar_elem) {
@@ -486,7 +484,6 @@ export async function build_move_topic_to_stream_popover(
 
     function render_selected_stream() {
         const stream_id = Number.parseInt(stream_widget_value, 10);
-        stream_bar.decorate(stream_id, $stream_header_colorblock);
         const stream = stream_data.get_sub_by_id(stream_id);
         if (stream === undefined) {
             $("#move_topic_to_stream_widget .dropdown_widget_value").text(
@@ -531,9 +528,6 @@ export async function build_move_topic_to_stream_popover(
             return;
         }
 
-        $stream_header_colorblock = $("#dialog_widget_modal .topic_stream_edit_header").find(
-            ".stream_header_colorblock",
-        );
         stream_widget_value = current_stream_id;
         const streams_list_options = () =>
             stream_data.get_options_for_dropdown_widget().filter((stream) => {
@@ -557,9 +551,6 @@ export async function build_move_topic_to_stream_popover(
 
         render_selected_stream();
         $("#move_topic_to_stream_widget").prop("disabled", disable_stream_input);
-        if (disable_stream_input) {
-            $stream_header_colorblock.addClass("disabled");
-        }
         $("#move_topic_modal .move_messages_edit_topic").on("input", () => {
             update_submit_button_disabled_state(stream_widget_value);
         });

web/styles/app_components.css

@@ -484,12 +484,6 @@ div.overlay {
     border-bottom: 0;
 }
 
-.stream_header_colorblock {
-    @extend .stream-selection-header-colorblock;
-    margin-bottom: 5px;
-    z-index: 1;
-}
-
 .edit-controls .fa-angle-right,
 .topic_stream_edit_header .fa-angle-right {
     font-size: 0.9em;

web/styles/compose.css

@@ -163,10 +163,6 @@
             #compose_select_recipient_widget {
                 border-radius: 4px !important;
             }
-
-            .stream_header_colorblock {
-                display: none;
-            }
         }
 
         .topic-marker-container {
@@ -828,12 +824,12 @@ textarea.new_message_textarea,
 }
 
 #compose_select_recipient_widget {
-    border-radius: 0 4px 4px 0;
     width: auto;
     outline: none;
 
     &.dropdown-widget-button {
         padding: 0 6px;
+        border-radius: 4px;
     }
 }
 
@@ -1163,13 +1159,8 @@ textarea.new_message_textarea,
     justify-content: flex-start;
     height: var(--compose-recipient-box-min-height);
 
-    .stream_header_colorblock {
-        margin: 0;
-    }
-
     .dropdown_widget_value {
         flex-grow: 1;
-        overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         color: var(--color-text-default);

web/styles/message_row.css

@@ -605,10 +605,6 @@ $time_column_min_width: 42px; /* + padding */
         margin-top: 0;
     }
 
-    .stream_header_colorblock {
-        margin-bottom: 10px;
-    }
-
     & textarea {
         width: 100%;
         min-width: 206px;

web/styles/popovers.css

@@ -1026,19 +1026,12 @@ ul {
         margin-bottom: 10px;
 
         .dropdown-widget-button {
-            /* Override the default border-radius to properly align
-            the button corners with `stream_header_colorblock`. */
-            border-radius: 1px 4px 4px 1px !important;
             outline: none;
             line-height: 24px;
             width: auto;
             max-width: 206px;
         }
 
-        .stream_header_colorblock {
-            margin: 0;
-        }
-
         .dropdown_widget_value {
             overflow: hidden;
             text-overflow: ellipsis;

web/templates/compose.hbs

@@ -58,7 +58,7 @@
                             <div class="topic-marker-container order-1">
                                 <a role="button" class="narrow_to_compose_recipients zulip-icon zulip-icon-arrow-left-circle" data-tooltip-template-id="narrow_to_compose_recipients_tooltip"></a>
                             </div>
-                            {{> dropdown_widget_with_stream_colorblock
+                            {{> dropdown_widget_wrapper
                               widget_name="compose_select_recipient"}}
                             <div class="topic-marker-container">
                                 <i class="fa fa-angle-right" aria-hidden="true"></i>

web/templates/dropdown_widget_wrapper.hbs

@@ -1,4 +1,3 @@
 <div id="{{widget_name}}_widget_wrapper" tabindex="0">
-    <div class="stream_header_colorblock"></div>
     {{> dropdown_widget disable_keyboard_focus="true"}}
 </div>

web/templates/move_topic_to_stream.hbs

@@ -9,7 +9,7 @@
     {{/if}}
     <div class="topic_stream_edit_header">
         {{#unless only_topic_edit}}
-        {{> dropdown_widget_with_stream_colorblock widget_name="move_topic_to_stream"}}
+        {{> dropdown_widget_wrapper widget_name="move_topic_to_stream"}}
         <i class="fa fa-angle-right" aria-hidden="true"></i>
         {{/unless}}
         <input name="new_topic_name" type="text" class="move_messages_edit_topic modal_text_input" autocomplete="off" value="{{topic_name}}" {{#if disable_topic_input}}disabled{{/if}} />

web/tests/compose.test.js

@@ -4,7 +4,6 @@ const {strict: assert} = require("assert");
 
 const MockDate = require("mockdate");
 
-const {mock_stream_header_colorblock} = require("./lib/compose");
 const {mock_banners} = require("./lib/compose_banner");
 const {$t} = require("./lib/i18n");
 const {mock_esm, set_global, zrequire} = require("./lib/namespace");
@@ -374,7 +373,6 @@ test_ui("send_message", ({override, override_rewire, mock_template}) => {
 test_ui("enter_with_preview_open", ({override, override_rewire}) => {
     mock_banners();
     $("textarea#compose-textarea").toggleClass = noop;
-    mock_stream_header_colorblock();
     override_rewire(compose_banner, "clear_message_sent_banners", noop);
     override(document, "to_$", () => $("document-stub"));
     let show_button_spinner_called = false;
@@ -424,7 +422,6 @@ test_ui("enter_with_preview_open", ({override, override_rewire}) => {
 
 test_ui("finish", ({override, override_rewire}) => {
     mock_banners();
-    mock_stream_header_colorblock();
 
     override_rewire(compose_banner, "clear_message_sent_banners", noop);
     override(document, "to_$", () => $("document-stub"));
@@ -617,8 +614,6 @@ test_ui("trigger_submit_compose_form", ({override, override_rewire}) => {
 });
 
 test_ui("on_events", ({override, override_rewire}) => {
-    mock_stream_header_colorblock();
-
     initialize_handlers({override});
 
     override(rendered_markdown, "update_elements", noop);
@@ -792,7 +787,6 @@ test_ui("on_events", ({override, override_rewire}) => {
 });
 
 test_ui("create_message_object", ({override, override_rewire}) => {
-    mock_stream_header_colorblock();
     mock_banners();
 
     compose_state.set_stream_id(social.stream_id);

web/tests/compose_actions.test.js

@@ -2,7 +2,6 @@
 
 const {strict: assert} = require("assert");
 
-const {mock_stream_header_colorblock} = require("./lib/compose");
 const {mock_banners} = require("./lib/compose_banner");
 const {mock_esm, set_global, zrequire} = require("./lib/namespace");
 const {run_test, noop} = require("./lib/test");
@@ -123,7 +122,6 @@ test("start", ({override, override_rewire, mock_template}) => {
     override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
     override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
     mock_template("inline_decorated_stream_name.hbs", false, noop);
-    mock_stream_header_colorblock();
 
     let compose_defaults;
     override(narrow_state, "set_compose_defaults", () => compose_defaults);
@@ -249,7 +247,6 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => {
     override_rewire(compose_recipient, "check_posting_policy_for_compose_box", noop);
     override_private_message_recipient({override});
     mock_template("inline_decorated_stream_name.hbs", false, noop);
-    mock_stream_header_colorblock();
 
     // Test direct message
     const person = {
@@ -297,7 +294,6 @@ test("respond_to_message", ({override, override_rewire, mock_template}) => {
 
 test("reply_with_mention", ({override, override_rewire, mock_template}) => {
     mock_banners();
-    mock_stream_header_colorblock();
     compose_state.set_message_type("stream");
     override_rewire(compose_recipient, "on_compose_select_recipient_update", noop);
     override_rewire(compose_actions, "complete_starting_tasks", noop);
@@ -359,7 +355,6 @@ test("quote_and_reply", ({disallow, override, override_rewire}) => {
     override_rewire(compose_reply, "selection_within_message_id", () => undefined);
 
     mock_banners();
-    mock_stream_header_colorblock();
     compose_state.set_message_type("stream");
     const steve = {
         user_id: 90,

web/tests/compose_state.test.js

@@ -2,7 +2,6 @@
 
 const {strict: assert} = require("assert");
 
-const {mock_stream_header_colorblock} = require("./lib/compose");
 const {mock_esm, zrequire} = require("./lib/namespace");
 const {run_test, noop} = require("./lib/test");
 const $ = require("./lib/zjquery");
@@ -25,7 +24,6 @@ run_test("private_message_recipient", ({override}) => {
 });
 
 run_test("has_full_recipient", ({override}) => {
-    mock_stream_header_colorblock();
     $(`#compose_banners .topic_resolved`).remove = noop;
     $(".narrow_to_compose_recipients").toggleClass = noop;
 

web/tests/composebox_typeahead.test.js

@@ -2,7 +2,6 @@
 
 const {strict: assert} = require("assert");
 
-const {mock_stream_header_colorblock} = require("./lib/compose");
 const {mock_banners} = require("./lib/compose_banner");
 const {mock_esm, set_global, with_overrides, zrequire} = require("./lib/namespace");
 const {run_test, noop} = require("./lib/test");
@@ -718,7 +717,6 @@ function sorted_names_from(subs) {
 const sweden_topics_to_show = ["<&>", "even more ice", "furniture", "ice", "kronor", "more ice"];
 
 test("initialize", ({override, override_rewire, mock_template}) => {
-    mock_stream_header_colorblock();
     mock_banners();
 
     let pill_items = [];
@@ -1890,7 +1888,6 @@ test("direct message recipients sorted according to stream / topic being viewed"
         (stream_id, user_id) =>
             stream_id === denmark_stream.stream_id && user_id === cordelia.user_id,
     );
-    mock_stream_header_colorblock();
     mock_banners();
 
     // When viewing no stream, sorting is alphabetical

web/tests/drafts.test.js

@@ -2,7 +2,6 @@
 
 const {strict: assert} = require("assert");
 
-const {mock_stream_header_colorblock} = require("./lib/compose");
 const {mock_banners} = require("./lib/compose_banner");
 const {mock_esm, set_global, zrequire} = require("./lib/namespace");
 const {run_test, noop} = require("./lib/test");
@@ -196,8 +195,6 @@ test("snapshot_message", ({override, override_rewire}) => {
 
     $(".narrow_to_compose_recipients").toggleClass = noop;
 
-    mock_stream_header_colorblock();
-
     let curr_draft;
 
     function set_compose_state() {

web/tests/lib/compose.js

@@ -1,14 +0,0 @@
-"use strict";
-
-const {noop} = require("./test");
-const $ = require("./zjquery");
-
-exports.mock_stream_header_colorblock = () => {
-    const $stream_selection_dropdown = $("#compose_select_recipient_widget_wrapper");
-    const $stream_header_colorblock = $(".stream_header_colorblock");
-    $("#compose_select_recipient_widget_wrapper .stream_header_colorblock").css = noop;
-    $stream_selection_dropdown.set_find_results(
-        ".stream_header_colorblock",
-        $stream_header_colorblock,
-    );
-};