fix Marketplace breadcrumbs (bug 743324)

media/css/devreg/breadcrumbs.less

@@ -0,0 +1,50 @@
+@import 'lib';
+
+#breadcrumbs {
+    color: @medium-gray;
+    font-family: @open-stack;
+    ol {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+    li {
+        display: inline-block;
+        &:before {
+            content: '\00a0\00bb\00a0';
+            font-size: 1.3em;
+            font-weight: bold;
+        }
+        a {
+            color: @note-gray;
+            font-weight: bold;
+        }
+        a.home, &:first-child a {
+            background: url(../../img/impala/breadcrumb-home.png) no-repeat;
+            display: block;
+            float: left;
+            height: 13px;
+            margin-top: 2px;
+            overflow: hidden;
+            text-indent: -9999px;
+            text-decoration: none;
+            width: 15px;
+            &:hover {
+                opacity: .7;
+            }
+        }
+        &:first-child:before {
+            content: none;
+        }
+    }
+}
+
+#breadcrumbs,
+#breadcrumbs + h1 {
+    margin-bottom: 5px;
+}
+
+.island #breadcrumbs,
+.island #breadcrumbs + h1 {
+    margin-bottom: 5px;
+}

media/css/mkt/breadcrumbs.less

@@ -1,17 +1,14 @@
 @import 'lib';
 
-.crumb {
-    color: @text;
-    font-family: @open-stack;
-    width: 100%;
-
-    // Colors below should be one-time use only
+#breadcrumbs {
+    // Colors below should be one-time use only.
     border-top: 1px solid #c2c8cc;
     border-bottom: 1px solid #bdc2c5;
-
     .gradient-two-color(rgba(176,186,192, 0.33), rgba(187,195,199, 0.33));
-    padding-top: 3px;
+    color: @text;
     margin-bottom: 24px;
+    padding-top: 3px;
+    width: 100%;
     ol {
         list-style: none;
         padding: 0 0 5px;
@@ -52,10 +49,3 @@
         }
     }
 }
-
-.developer-hub #breadcrumbs {
-    border: 0;
-    background-color: transparent;
-    background-image: none;
-    margin: 0 0 5px;
-}

mkt/asset_bundles.py

@@ -7,7 +7,7 @@ CSS = {
 
         # Base styles (body, breadcrumbs, islands, columns).
         'css/devreg/base.less',
-        'css/mkt/breadcrumbs.less',
+        'css/devreg/breadcrumbs.less',
 
         # Typographical styles (font treatments, headings).
         'css/devreg/typography.less',

mkt/detail/templates/detail/app.html

@@ -7,8 +7,6 @@
 {% set first_cat = cats[0] if cats else None %}
 
 {% block content %}
-  <section class="crumb full">
-    <div>
   {% if first_cat %}
     {{ mkt_breadcrumbs(items=[(url('home'), _('Home')),
                               (first_cat.get_url_path(), first_cat),
@@ -16,8 +14,6 @@
   {% else %}
     {{ mkt_breadcrumbs(product=product) }}
   {% endif %}
-    </div>
-  </section>
   <section class="product-details">
     <div class="visual">
       <img class="icon" src="{{ product.get_icon_url(64) }}" />

mkt/site/helpers.py

@@ -4,9 +4,10 @@ from tower import ugettext as _
 import jinja2
 import json
 
-from amo.helpers import impala_breadcrumbs, url
+from amo.helpers import url
 from amo.urlresolvers import reverse
 from amo.utils import JSONEncoder
+from translations.helpers import truncate
 
 
 def new_context(context, **kw):
@@ -78,7 +79,8 @@ def promo_slider(context, products):
 
 @register.function
 @jinja2.contextfunction
-def mkt_breadcrumbs(context, product=None, items=None, add_default=False):
+def mkt_breadcrumbs(context, product=None, items=None, add_default=False,
+                    crumb_size=40):
     """
     Wrapper function for ``breadcrumbs``.
 
@@ -105,7 +107,10 @@ def mkt_breadcrumbs(context, product=None, items=None, add_default=False):
     if len(crumbs) == 1:
         crumbs = []
 
-    return impala_breadcrumbs(context, crumbs, add_default)
+    crumbs = [(url_, truncate(label, crumb_size)) for (url_, label) in crumbs]
+    t = env.get_template('site/helpers/breadcrumbs.html').render(
+        breadcrumbs=crumbs, has_home=add_default)
+    return jinja2.Markup(t)
 
 
 @register.filter

mkt/site/templates/site/helpers/breadcrumbs.html

@@ -0,0 +1,23 @@
+{% if breadcrumbs %}
+  <section id="breadcrumbs" class="full">
+    <div>
+      <nav>
+        <ol>
+          {% for target, label in breadcrumbs %}
+            <li>
+            {% if target %}
+              {% if loop.first and has_home %}
+                <a href="{{ target }}" class="home" title="{{ label }}">{{ label }}</a>
+              {% else %}
+                <a href="{{ target }}">{{ label }}</a>
+              {% endif %}
+            {% else %}
+              <span>{{ label }}</span>
+            {% endif %}
+            </li>
+          {% endfor %}
+        </ol>
+      </nav>
+    </div>
+  </section>
+{% endif %}