do smart breadcrumbs when using Marketplace as an app (bug 758445)

media/css/mkt/breadcrumbs.less

@@ -64,3 +64,16 @@
         }
     }
 }
+
+@media (max-width: @4col) {
+    #breadcrumbs {
+        li + li {
+            display: none;
+        }
+        // Show the last two breadcrumbs only.
+        li:nth-last-child(2),
+        li:last-child {
+            display: inline-block;
+        }
+    }
+}

media/css/mkt/site.less

@@ -276,7 +276,22 @@ body {
     }
 }
 
+// max-width sniffing so we can do z.capabilities.mobile, etc.
+#is-desktop-width {
+    display: block;
+}
+#is-tablet-width,
+#is-mobile-width {
+    display: none;
+}
+
 @media (max-width: @7col) {
+    #is-desktop-width {
+        display: none;
+    }
+    #is-tablet-width {
+        display: block;
+    }
     .col {
         float: none;
         margin: 0 auto;
@@ -284,6 +299,13 @@ body {
 }
 
 @media (max-width: @4col) {
+    #is-desktop-width,
+    #is-tablet-width {
+        display: none;
+    }
+    #is-mobile-width {
+        display: block;
+    }
     body {
         color: @darker_text;
     }

media/js/mkt/capabilities.js

@@ -12,6 +12,9 @@ z.capabilities = {
         typeof navigator.mozApps.html5Implementation === 'undefined'
     ),
     'fileAPI': !!window.FileReader,
+    'desktop': !!$('#is-desktop-width:visible').length,
+    'tablet': !!$('#is-tablet-width:visible').length,
+    'mobile': !!$('#is-mobile-width:visible').length,
     'touch': ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
     'nativeScroll': (function() {
         return 'WebkitOverflowScrolling' in document.createElement('div').style;

media/js/mkt/detail.js

@@ -8,4 +8,30 @@
     })).on('click', '.approval-pitch', _pd(function() {
         $('#preapproval-shortcut').submit();
     }));
+
+    // TODO: Target only WebRT.
+    if (z.capabilities.mobile) {
+        // Smart breadcrumbs to display on detail pages within B2G/WebRT.
+        z.page.on('fragmentloaded', function(e, href, popped) {
+            // Target breadcrumbs for detail pages only (for now).
+            if (z.previous && href.indexOf('/app/') > -1) {
+                $('#breadcrumbs li:visible:eq(1)')
+                    .replaceWith(format('<li> <a href="{0}">{1}</a> </li>',
+                                        z.previous.href, z.previous.title));
+            }
+            // Strip locale from URL.
+            href = href.replace('/' + $('html').attr('lang'), '');
+            if (!popped) {
+                z.previous = {};
+                if (['/', '/search/', '/apps/', '/themes/', '/app/'].startsWith(href)) {
+                    // If it's a new page.
+                    var title = escape_(z.page.find('h1:eq(0)').text() ||
+                                        z.page.find('h2:eq(0)').text());
+                    if (title) {
+                        z.previous = {'title': title, 'href': href};
+                    }
+                }
+            }
+        });
+    }
 })();

media/js/mkt/fragments.js

@@ -121,10 +121,12 @@ function fragmentFilter(el) {
 
             page.html(content);
             $('html, body').scrollTop(opts.scrollTop || 0);
-            page.trigger('fragmentloaded');
+            page.trigger('fragmentloaded', [href, popped]);
+
             // We so sneaky.
             var $title = page.find('title');
             document.title = $title.text();
+            $title.remove();
 
             // We so classy.
             var $body = $('body');
@@ -134,7 +136,6 @@ function fragmentFilter(el) {
                                     $newclass.attr('content'));
                 $newclass.remove();
             }
-            $title.remove();
         }
 
         z.page.on('fragmentloaded', function() {
@@ -175,7 +176,7 @@ function fragmentFilter(el) {
         $(function() {
             var path = window.location.pathname + window.location.search + window.location.hash;
             history.replaceState({path: path}, false, path);
-            page.trigger('fragmentloaded');
+            page.trigger('fragmentloaded', [path, false]);
             fetch(path);
         });
         console.log("fragments enabled");

media/js/mkt/init.js

@@ -12,7 +12,7 @@ var z = {
     allowAnonInstalls: !!$('body').data('allow-anon-installs')
 };
 
-z.prefixUpper= z.prefix[0].toUpperCase() + z.prefix.substr(1);
+z.prefixUpper = z.prefix[0].toUpperCase() + z.prefix.substr(1);
 
 
 (function() {

media/js/mkt/utils.js

@@ -21,6 +21,26 @@ var escape_ = function(s) {
 };
 
 
+String.prototype.startsWith = function(str) {
+    return this.slice(0, str.length) == str;
+};
+String.prototype.endsWith = function(str) {
+    return this.slice(-str.length) == str;
+};
+
+
+// Sample usage:
+// ['/en-US/apps/', '/ja/search/', '/fr/contact/'].startsWith('/en-US/')
+Array.prototype.startsWith = function(str) {
+    for (var i = 0; i < this.length; i++) {
+        if (str.startsWith(this[i])) {
+            return true;
+        }
+    };
+    return false;
+};
+
+
 // .exists()
 // This returns true if length > 0.
 $.fn.exists = function(callback, args) {

mkt/browse/templates/browse/landing.html

@@ -17,6 +17,9 @@
   {{ mkt_breadcrumbs(product, crumbs, cls='dark') }}
   <section id="browse-featured" class="featured full">
     <div>
+      {% if not category %}
+        <h1 class="hidden">{{ _('Apps') }}</h1>
+      {% endif %}
       <h2>{{ title if category else _('Featured') }}</h2>
     </div>
   </section>

mkt/detail/templates/detail/abuse.html

@@ -10,7 +10,7 @@
   {{ mkt_breadcrumbs(product, [(None, title)]) }}
   <section id="abuse" class="friendly">
     <div>
-      <h2>{{ title }}</h2>
+      <h1>{{ title }}</h1>
       <p>
         <label id="recap-label" for="{{ abuse_form.text.auto_id }}">
           {% trans policies_url='https://developer.mozilla.org/en/Apps/'

mkt/detail/templates/detail/privacy.html

@@ -16,7 +16,7 @@
     {{ notification(product, amo, is_dev) }}
     <section>
       <div class="prose">
-        <h2>{{ _('Privacy Policy') }}</h2>
+        <h1>{{ _('Privacy Policy') }}</h1>
         <div class="policy-statement">{{ product.privacy_policy|nl2br }}</div>
       </div>
     </section>

mkt/home/templates/home/home.html

@@ -5,6 +5,7 @@
 {% block content %}
   <section class="homepage-promo full">
     <div>
+      <h1 class="hidden">{{ _('Home') }}</h1>
       <h1>{{ _('Opening soon.') }}</h1>
       <p>
         {% trans %}

mkt/templates/mkt/base.html

@@ -178,6 +178,10 @@
 
     {% block dbgoverlay %}{% endblock %}
 
+    <div id="is-desktop-width"></div>
+    <div id="is-tablet-width"></div>
+    <div id="is-mobile-width"></div>
+
     {# js #}
     {% block site_js %}
       <script src="{{ static(url('jsi18n')) }}"></script>