Bug 1210864 - Add Private Browsing to Firefox Family subnav

bedrock/base/templates/macros.html

@@ -469,9 +469,11 @@
           <a data-id="desktop" href="{{ url('firefox.desktop.index') }}" class="primary-link"><div>{{ _('<span>for</span> Desktop') }}</div></a>
 
           <ul class="subnav" id="desktop-subnav">
-            <li{% if activesub in ('index', 'trust', 'customize', 'fast') %} class="hassubsubnav"{% endif %}>
+            {# note: Removing hassubsubnav for now because after localization nav items get pushed to two lines #}
+            <li {# {% if activesub in ('index', 'trust', 'customize', 'fast') %} class="hassubsubnav"{% endif %} #}>
               <a href="{{ url('firefox.desktop.index') }}"{% if activesub == 'index' %} class="selected"{% endif %}><div>{{ _('Overview') }}</div></a>
 
+            {# note: Removing items for now because after localization nav items get pushed to two lines
               {% if activesub in ('index', 'trust', 'customize', 'fast') %}
               <ul class="subsubnav" id="desktop-subsubnav">
                 <li><a href="{{ url('firefox.desktop.trust') }}"{% if activesub == 'trust' %} class="selected"{% endif %}>{{ _('Trusted') }}</a></li>
@@ -479,9 +481,13 @@
                 <li><a href="{{ url('firefox.desktop.fast') }}"{% if activesub == 'fast' %} class="selected"{% endif %}>{{ _('Fast') }}</a></li>
               </ul>
               {% endif %}
+            #} 
             </li>
             <li><a href="{{ url('firefox.sync') }}"{% if activesub == 'sync' %} class="selected"{% endif %}><div>{{ _('Sync') }}</div></a></li>
             <li><a href="{{ url('firefox.hello') }}"{% if activesub == 'hello' %} class="selected"{% endif %}><div>{{ _('Hello') }}</div></a></li>
+            {% if waffle.switch('tracking-protection') %}
+              <li><a href="{{ url('firefox.private-browsing') }}"{% if activesub == 'private-browsing' %} class="selected"{% endif %}><div>{{ _('Private Browsing') }}</div></a></li>
+            {% endif %}
           </ul>
         </li>
         <li{% if activeprimary == 'android' %} class="active"{% endif %}>
@@ -490,6 +496,9 @@
           <ul class="subnav" id="android-subnav">
             <li><a href="{{ url('firefox.android.index') }}"{% if activesub == 'index' %} class="selected"{% endif %}><div>{{ _('Overview') }}</div></a></li>
             <li><a href="{{ url('firefox.sync') }}"{% if activesub == 'sync' %} class="selected"{% endif %}><div>{{ _('Sync') }}</div></a></li>
+            {% if waffle.switch('tracking-protection') %}
+              <li><a href="{{ url('firefox.private-browsing') }}"{% if activesub == 'private-browsing' %} class="selected"{% endif %}><div>{{ _('Private Browsing') }}</div></a></li>
+            {% endif %}
           </ul>
         </li>
       {% if waffle.switch('firefox-ios-global') %}
@@ -499,6 +508,9 @@
           <ul class="subnav" id="ios-subnav">
             <li><a href="{{ url('firefox.ios') }}"{% if activesub == 'index' %} class="selected"{% endif %}><div>{{ _('Overview') }}</div></a></li>
             <li><a href="{{ url('firefox.sync') }}"{% if activesub == 'sync' %} class="selected"{% endif %}><div>{{ _('Sync') }}</div></a></li>
+            {% if waffle.switch('tracking-protection') %}
+              <li><a href="{{ url('firefox.private-browsing') }}"{% if activesub == 'private-browsing' %} class="selected"{% endif %}><div>{{ _('Private Browsing') }}</div></a></li>
+            {% endif %}
           </ul>
         </li>
       {% endif %}

media/css/firefox/family-nav.less

@@ -281,7 +281,7 @@
                 opacity: 0.8;
                 height: 77px;
                 line-height: 77px;
-                max-width: 125px; // uhhh, seems to work?
+                max-width: 129px;
 
                 &.selected,
                 &:hover {
@@ -425,8 +425,13 @@
 }
 
 // en-* langs only get uppercase subsubnav links
-html[lang^='en'] .fxfamilynav .subsubnav a {
+html[lang^='en'] .fxfamilynav {
+    .subnav > li > a {
+        max-width: 149px;
+    }
+    .subsubnav a {
         text-transform: uppercase;
+    }
 }
 
 .fxfamilynav-subnav {