navbar: Add globe icon to navbar for web public streams.

Prior to this commit, the navbar didn't display web public streams as
any different from ordinary streams.

Now, we show a globe icon for web public streams. This commit also
adds a node test for the same.

We also modified the navbar behaviour table, which is the following
dropbox paper:
https://paper.dropbox.com/doc/Navbar-behavior-table--A0sp57z~7R5PeHuxHL__Gn5ZAg-cNOGtu7kSdtnKBizKXJge

frontend_tests/node_tests/filter.js

@@ -1318,6 +1318,15 @@ function make_private_sub(name, stream_id) {
     global.stream_data.add_sub(sub);
 }
 
+function make_web_public_sub(name, stream_id) {
+    const sub = {
+        name: name,
+        stream_id: stream_id,
+        is_web_public: true,
+    };
+    global.stream_data.add_sub(sub);
+}
+
 run_test('navbar_helpers', () => {
     // make sure title has names separated with correct delimiters
     function properly_separated_names(names) {
@@ -1369,6 +1378,8 @@ run_test('navbar_helpers', () => {
     const stream_operator = [{ operator: 'stream', operand: 'foo'}];
     make_private_sub('psub', '22');
     const private_stream_operator = [{ operator: 'stream', operand: 'psub'}];
+    make_web_public_sub('webPublicSub', '12'); // capitalized just to try be tricky and robust.
+    const web_public_stream_operator = [{ operator: 'stream', operand: 'webPublicSub'}];
     const pm_with = [{ operator: 'pm-with', operand: 'joe@example.com'}];
     const group_pm = [{ operator: 'pm-with', operand: 'joe@example.com,STEVE@foo.com'}];
     const group_pm_including_missing_person = [{ operator: 'pm-with', operand: 'joe@example.com,STEVE@foo.com,sally@doesnotexist.com'}];
@@ -1437,6 +1448,13 @@ run_test('navbar_helpers', () => {
             title: 'psub',
             redirect_url_with_search: '/#narrow/stream/22-psub',
         },
+        {
+            operator: web_public_stream_operator,
+            is_common_narrow: true,
+            icon: 'globe',
+            title: 'webPublicSub',
+            redirect_url_with_search: '/#narrow/stream/12-webPublicSub',
+        },
         {
             operator: pm_with,
             is_common_narrow: true,

static/js/filter.js

@@ -529,6 +529,7 @@ Filter.prototype = {
         return {
             _stream_name: sub.name,
             _is_stream_private: sub.invite_only,
+            _is_web_public: sub.is_web_public,
         };
     },
 
@@ -543,6 +544,9 @@ Filter.prototype = {
             if (this._stream_params._is_stream_private) {
                 return 'lock';
             }
+            if (this._stream_params._is_web_public) {
+                return 'globe';
+            }
             return 'hashtag';
         case 'is-private':
             return 'envelope';

static/js/tab_bar.js

@@ -25,7 +25,7 @@ function make_tab_data(filter) {
     }
     tab_data.title = filter.get_title();
     tab_data.icon = filter.get_icon();
-    if (tab_data.icon === 'hashtag' || tab_data.icon === 'lock') {
+    if (['hashtag', 'lock', 'globe'].includes(tab_data.icon)) {
         const stream = filter.operands("stream")[0];
         const current_stream  = stream_data.get_sub_by_name(stream);
         if (current_stream) {
@@ -50,6 +50,7 @@ exports.colorize_tab_bar = function () {
     const stream_light = colorspace.getHexColor(colorspace.getDecimalColor(color_for_stream));
     $("#tab_list .fa-hashtag").css('color', stream_light);
     $("#tab_list .fa-lock").css('color', stream_light);
+    $("#tab_list .fa-globe").css('color', stream_light);
 };
 
 function append_and_display_title_area(tab_bar_data) {