Create the narrowbar using a Handlebars template

This fixes an XSS hole (#249).

(imported from commit 5f70c0bc23e0d992f2d85889e2ba9157f1b73b3a)

templates/zephyr/index.html

@@ -22,6 +22,10 @@
 {% rawjstemplate "userinfo_popover_content" %}
 </script>
 
+<script id="template_narrowbar" type="text/x-handlebars-template">
+{% rawjstemplate "narrowbar" %}
+</script>
+
 <link href="{{ static_hidden }}styles/zephyr.css?dummy_time={% now "U" %}" rel="stylesheet">
 <link href="{{ static_hidden }}styles/pygments.css" rel="stylesheet">
 <script type="text/javascript" src="{{ static_third  }}jquery/jquery.form.js"></script>

zephyr/jstemplates/narrowbar.html

@@ -0,0 +1,9 @@
+<span id="currently_narrowed_to"
+    title="{{description}}{{#if subject}}  |  {{subject}}{{/if}}">
+
+    <i class="icon-{{icon}}"></i>
+    {{description}}
+    {{#if subject}}
+    &nbsp; | &nbsp; {{subject}}
+    {{/if}}
+</span>

zephyr/static/js/narrow.js

@@ -31,7 +31,7 @@ exports.narrowing_type = function () {
     return narrow_type;
 };
 
-function do_narrow(icon, description, filter_function) {
+function do_narrow(bar, filter_function) {
     var was_narrowed = exports.active();
 
     narrowed = filter_function;
@@ -57,7 +57,9 @@ function do_narrow(icon, description, filter_function) {
     $("#top_narrowed_whitespace").show();
     $("#main_div").addClass("narrowed_view");
     $("#searchbox").addClass("narrowed_view");
-    $("#currently_narrowed_to").html(icon + " " + description).attr("title", description.replace(/ /g, ""));
+    $("#currently_narrowed_to").remove();
+    $("#narrowlabel").append(templates.narrowbar(bar));
+
     $("#zhome").removeClass("focused_table");
     // Indicate both which message is persistently selected and which
     // is temporarily selected
@@ -84,7 +86,7 @@ exports.target = function (id) {
 
 exports.all_huddles = function () {
     narrow_type = "all_huddles";
-    do_narrow("<i class='icon-user'></i>", "You and anyone else", function (other) {
+    do_narrow({icon: 'user', description: 'You and anyone else'}, function (other) {
         return other.type === "personal" || other.type === "huddle";
     });
 };
@@ -98,10 +100,13 @@ exports.by_subject = function () {
         return;
     }
 
-    var icon = "<i class='icon-bullhorn'></i>";
-    var message = original.display_recipient + " &nbsp; | &nbsp; " + original.subject;
     narrow_type = "subject";
-    do_narrow(icon, message, function (other) {
+    var bar = {
+        icon:        'bullhorn',
+        description: original.display_recipient,
+        subject:     original.subject
+    };
+    do_narrow(bar, function (other) {
         return (other.type === 'stream' &&
                 original.recipient_id === other.recipient_id &&
                 original.subject === other.subject);
@@ -111,11 +116,13 @@ exports.by_subject = function () {
 // Called for the 'narrow by stream' hotkey.
 exports.by_recipient = function () {
     var message = message_dict[target_id];
+    var bar;
     switch (message.type) {
     case 'personal':
         // Narrow to personals with a specific user
         narrow_type = "huddle";
-        do_narrow("<i class='icon-user'></i>", "You and " + message.display_reply_to, function (other) {
+        bar = {icon: 'user', description: "You and " + message.display_reply_to};
+        do_narrow(bar, function (other) {
             return (other.type === 'personal') &&
                 (((other.display_recipient.email === message.display_recipient.email)
                     && (other.sender_email === message.sender_email)) ||
@@ -126,7 +133,8 @@ exports.by_recipient = function () {
 
     case 'huddle':
         narrow_type = "huddle";
-        do_narrow("<i class='icon-user'></i>", "You and " + message.display_reply_to, function (other) {
+        bar = {icon: 'user', description: "You and " + message.display_reply_to};
+        do_narrow(bar, function (other) {
             return (other.type === "personal" || other.type === "huddle")
                 && other.reply_to === message.reply_to;
         });
@@ -134,7 +142,8 @@ exports.by_recipient = function () {
 
     case 'stream':
         narrow_type = "stream";
-        do_narrow("<i class='icon-bullhorn'></i>", message.display_recipient, function (other) {
+        bar = {icon: 'bullhorn', description: message.display_recipient};
+        do_narrow(bar, function (other) {
             return (other.type === 'stream' &&
                     message.recipient_id === other.recipient_id);
         });

zephyr/static/js/setup.js

@@ -13,7 +13,8 @@ $(function () {
     }
 
     // Compile Handlebars templates.
-    $.each(['message', 'subscription', 'userinfo_popover_title', 'userinfo_popover_content'],
+    $.each(['message', 'subscription', 'narrowbar',
+            'userinfo_popover_title', 'userinfo_popover_content'],
         function (index, name) {
             templates[name] = Handlebars.compile($('#template_'+name).html());
         }