Addons-server: Add a link to allow users to try the new frontend.

[muffinresearch]

This should be a prominent notification on the header of the legacy frontend - this will allow users to checkout the new site more easily.

This should be waffled off so we can flip it on in production when we're ready.

It will need a paragraph containing a link, which will set the mamo cookie to the value "on" the same as the link in the footer.

We'll need editorial and UX for what this should look like. If it's prominent and/or shown on more than say the homepage we might want to make it something that can be dismissed.

/cc @jvillalobos for input on functionality.

[jvillalobos]

I'm in favor of showing the notification on all pages and making it easy to dismiss.

[pwalm]

Hey @devaneymoz, are you able to provide copy for this so I build this next week? 👍

[devaneymoz]

I'm guessing we want to keep this messaging strip pretty light and tight? If so how does this look...

AMO is getting a new look. Would you like to see it?

_[LINK] Visit the new AMO [LINK] [DISMISS BUTTON]_

[pwalm]

Love it! SHIP IT

Thanks @devaneymoz!

[muffinresearch]

@pwalm do you have an ETA on the visuals for this? Would be nice if we could land this for next week's push so we can toggle it on as soon as soon as we're ready.

[pwalm]

When is push? I was going to design it next week, but can try to bump it up.

[muffinresearch]

@pwalm we need this ASAP, since our tag for the Thursday push is on Tuesday (tomorrow).

[diox]

(removed my earlier comment since I've made some progress since then)

I've implemented this locally using the existing notification system, with some fixes to make it work on all legacy frontend pages. The notification is dismiss-able (never appears again once you have dismissed it). The result is this:

What do you think?

[diox]

In the pull request @EnTeQuAk suggest to tweak the copy slightly:

So… naming wise I'd suggest not using the word AMO but something more human like, "We are getting a new look", "This site is getting a new look" or something similar.

I agree, and this is why in my implementation I went with "Visit the new site" at the end ; but I had left the beginning of the text intact. @devaneymoz any ideas? Maybe just:

We're getting a new look! Would you like to see it? Visit the new site

?

[pwalm]

Here we go:

Specs are here:

And backgrounds are here!

[diox]

@pwalm do we want this only on the homepage? If not, on the other pages, where should the banner be? (In the add-on detail page, the main add-on details are included in the blue header, then continued below, it feels kinda weird to break this with the banner)

[diox]

Also:

• Do we want Fira Sans in there? The legacy frontend does not have it, so that's an additional asset to download for clients.
• I can't find this close button in our assets. The legacy frontend have some dark grey close buttons, but not a white one like this one.

Edit; this is where I am right now without the Fira Sans and using the regular close button:

[diox]

Closing to get QA to test this, we can tweak further if necessary. It's behind a "try-new-frontend" waffle, on every legacy frontend page (so no reviewer tools, no devhub, but pretty much everything else)

[ValentinaPC]

Verified this on AMO-dev FF56(Win 7).

Banner is added but some dimensions don't correspond.

1. Size of the banner:
   Specs say: 960x60 px
   We have: 960x75.2 px
2. Closing mark:
   Specs say: 13x13 px
   We have: 25x25 px

Also, looks a bit unaligned. Please see screenshot:

And, the background of the x mark is undetectable, intended?
Please see screenshot:

Please let me know if any of these are not expected and need separate tracking, and I'll comply.
Thanks!

[diox]

I'll adjust the height and position in a follow-up commit, but the closing mark is intended for now as I don't have any other image at my disposal for it.

[pwalm]

• Yep, include Fira. It's part of our brand and the design system
• We only need this on the homepage (for now, we could expand it to other pages in the coming weeks)
• "x" svgs are in this zip, sorry about not including those before

x.zip

[ValentinaPC]

Verified the banner position on AMO-dev FF56(Win 7).
Postfix screenshot:

Is there anything else we fix here, or this can be marked as verified-fixed?
Thanks!

[diox]

I've got another round of design adjustments to implement following @pwalm last comment.

[diox]

Latest version should:

• only be shown on homepage
• use Fira Sans Semi Bold as per spec
• use the correct close button image and position

[ValentinaPC]

Verified this on AMO-dev FF56(Win 7)

• the banner is only shown in homepage
• close mark is positioned as per mocks
  

Is the font family ok?

[diox]

@ValentinaPC : you are not looking at the right element to test the font (highlight the paragraphs or the link). Furthermore, it's better to use the "Fonts" tab of the inspector, which tells you directly which font is being used, regardless of what the css rule says. It should say Fira Sans SemiBold.

[ValentinaPC]

Oops...
Font is like expected:

Marking this verified fixed.