Bug 1210864 - Add Private Browsing to Firefox Family subnav

[malena]

https://bugzilla.mozilla.org/show_bug.cgi?id=1210864

[craigcook]

Should add the link to the iOS subnav as well.

[malena]

@craigcook Oh I thought that's what you would do? I am confusing what you were going to add the menu.

[craigcook]

Sorry, I added the iOS top link and subnav previously but couldn't add Private Browsing to the iOS subnav until the page was ready. I'm happy to add it separately once this merges but it doesn't have to wait, it can go into the same commit if you're up for it.

[malena]

@craigcook Ahh okay no problemo!

[malena]

r?

[malena]

Includes a waffle switch. r?

[flodolo]

Remove the l10n tag check, only waffle is needed. We can't use tags on a shared thing like navigation.

[jpetto]

We knew it would eventually come to this - the subnav is now too long in some locales. Here's a shot of es-ES at tablet viewport:

Unless there are other tenable ideas, I think our best option is to drop the sub-sub nav (Trusted/Flexible/Fast) for the desktop pages. Will need to get sign-off from jbertsch & habber.

[jbertsch]

https://bugzilla.mozilla.org/show_bug.cgi?id=1210864#c4

[jpetto]

I think we should keep this restriction in place, and should set it to 129px. At tablet width, the #desktop-subnav is 556px wide, which, divided by 4 (the max elements now possible in the subnav) is 139. Each <a> has a left and right padding of 5px, hence 129.

If this restriction isn't in place, text will not wrap to two lines, which means an <li> could get pushed underneath and out of view for some locales.

[jpetto]

One small CSS issue, but otherwise looking good! r+wc

[malena]

@jpetto updated and squashed commits.

[jpetto]

Gah, I'm sorry to ask this late, but can we make a special CSS rule for en-* only to make sure "Private Browsing" fits on one line? I know this will be requested later if we don't do it now. (I thought I tested this during my last review, but apparently I was in tablet mode.)

I think we can just add a bit of CSS to line 428:

html[lang^='en'] .fxfamilynav {
    .subnav > li > a {
        max-width: 149px;
    }

    .subsubnav a {
        text-transform: uppercase;
    }
}

[malena]

@jpetto no problemo updated!

[jpetto]

Looks great! Just waiting for Travis... ⌛