factor out the category arrow code

apps/amo/helpers.py

@@ -299,3 +299,11 @@ def field(field, label=None):
     if label is not None:
         field.label = label
     return jinja2.Markup(u'%s<p>%s%s</p>' % (field.errors, field.label_tag(), field))
+
+
+@register.inclusion_tag('amo/category-arrow.html')
+@jinja2.contextfunction
+def category_arrow(context, key, prefix):
+    d = dict(context.items())
+    d.update(key=key, prefix=prefix)
+    return d

apps/amo/templates/amo/category-arrow.html

@@ -0,0 +1,11 @@
+<style>
+  #{{ prefix }}-{{ key }} {
+    background: url({{ MEDIA_URL }}img/zamboni/arrow-right-blue.png) no-repeat left center;
+  }
+  .html-rtl #{{ prefix }}-{{ key }} {
+    background: url({{ MEDIA_URL }}img/zamboni/arrow-left-blue.png) no-repeat right center;
+  }
+  #{{ prefix }}-{{ key }} a {
+    color: inherit;
+  }
+</style>

apps/browse/templates/browse/personas/base.html

@@ -9,17 +9,9 @@
 
 {% block extrahead %}
 {% if not is_homepage %}
-<style>
+{% with key = category.id if category else filter.field %}
-  #p-{{ category.id if category else filter.field }} {
+  {{ category_arrow(key, prefix='p') }}
-    background: url({{ MEDIA_URL }}img/zamboni/arrow-right-blue.png) no-repeat left center;
+{% endwith %}
-  }
-  .html-rtl #p-{{ category.id if category else filter.field }} {
-    background: url({{ MEDIA_URL }}img/zamboni/arrow-left-blue.png) no-repeat right center;
-  }
-  #p-{{ category.id if category else filter.field }} a {
-    color: inherit;
-  }
-</style>
 {% endif %}
 {% endblock %}
 

apps/browse/templates/browse/search_tools.html

@@ -13,17 +13,9 @@
 {% endblock %}
 
 {% block extrahead %}
-<style>
+{% with key = category.id if category else filter.field %}
-  #p-{{ category.id if category else filter.field }} {
+  {{ category_arrow(key, prefix='p') }}
-    background: url({{ MEDIA_URL }}img/zamboni/arrow-right-blue.png) no-repeat left center;
+{% endwith %}
-  }
-  .html-rtl #p-{{ category.id if category else filter.field }} {
-    background: url({{ MEDIA_URL }}img/zamboni/arrow-left-blue.png) no-repeat right center;
-  }
-  #p-{{ category.id if category else filter.field }} a {
-    color: inherit;
-  }
-</style>
 {% endblock %}
 
 {% block content %}

apps/browse/templates/browse/themes.html

@@ -22,17 +22,7 @@
 
 {% block extrahead %}
 {% with selector=category.id if category else sorting %}
-<style>
+  {{ category_arrow(selector, prefix='c') }}
-  #c-{{ selector }} {
-    background: url({{ MEDIA_URL }}img/zamboni/arrow-right-blue.png) no-repeat left center;
-  }
-  .html-rtl #c-{{ selector }} {
-    background: url({{ MEDIA_URL }}img/zamboni/arrow-left-blue.png) no-repeat right center;
-  }
-  #c-{{ selector }} a {
-    color: inherit;
-  }
-</style>
 {% endwith %}
 {% endblock %}