898843 - Defect - Update logos and colors in Metro flyout panel About

Status: VERIFIED FIXED

(Firefox for Metro Graveyard :: Flyouts, defect, P1)

Description

[Kapranov]

Attachment: about-footer.png

User Agent: Mozilla/5.0 (Windows NT 6.2; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0 (Beta/Release)
Build ID: 20130725195523

Steps to reproduce:

Old logo in flyoutpanel About. I suggest it be replaced by the attached.
/browser/metro/theme/images/about-footer.png

Comment 1

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: About-flyout_new-logo_v1.png

A revised version using the new Nightly log and wordmark.

Based on the brand guideline: we should consider change the background color from white to dark blue: http://www.mozilla.org/en-US/styleguide/identity/firefox/channels/

Comment 2

[Kapranov]

Attachment: Снимок экрана (86).png

Tried to change the font color and background, here's what happened.

Comment 3

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Hi Martell,
Could you please take a look at the new about flyout in Comment 1? Let me know if you recommend any additional change. 

Thanks!

Comment 4

[Jim Mathies [:jimm]]

As soon as we have the final globe image / color combinations we finish this up.

Comment 5

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: About-flyouts_090613.png

Since the uplift to Aurora is getting close, I made a set of about pages to get feedback from Stephen and Martell.
You are welcome to post your critique below, by early next week would great. Thanks!

Comment 6

[Brian R. Bondy [:bbondy]]

Hi Yuan, 
What's the next step for this bug?

Comment 7

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: About flyouts in channels_0916.png

mart3ll: they look good! One bit o feedback - I'd left align Aurora so you can see the sunrise. so, sticking out from the edge same as now, but from the left.
[11:19am] yuan: They are not pop up windows. On Metro/Windows 8, the about page slides in from the right edge.
[11:21am] mart3ll: ah! ok
[11:21am] mart3ll: my only other concern is the inconsistency of slicing some of the logos and having full logos for others
[11:22am] mart3ll: re: light blue - Slater agrees release about should be light blue too. Fx light blue is the official dominant bg color for our Fx products going forward when in beta or release channels.
[11:26am] yuan: Agreed. I thought about slicing the Firefox beta and Firefox logos. But then the Beta tag will be cut out. The easy solution can be showing full logos for all channels.
[11:27am] yuan: So should I use the Firefox light blue for release channel as well?
[11:40am] mart3ll: yes please
[11:40am] mart3ll: and I guess full logos throughout to keep them consistent
[11:40am] mart3ll: even thought theyre never seen together, but HEY

Updated the mockup based on Martell's suggestion, please see attachment.

I will slice the mockups and product them for implementation today.

Comment 8

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: Flyout assets [Nightly+Aurora].zip

Assets for Nightly and Aurora flyouts, including brand wordmarks and logos.

The wordmark should align with the current header(the back button). I sliced the logo [346px * 346px], so it should fill the bottom of the flyout.

Background colors:
Nightly: #002147
Aurora: #331e54

Hover over and pressed-down state for "Read privacy policy":
Colored strip:
Width: 346px
Height: 44px

Color on Nightly: #0a111c
Color on Aurora: #181327

Comment 9

[Marina Samuel [:emtwo]]

Attachment: v1: New about-flyout styles for Nightly & Aurora

One thing bugging me here is I couldn't find a way to set the :hover selector through javascript so that I can dynamically choose the panel colours.

Comment 10

[Marina Samuel [:emtwo]]

Attachment: aurora.png

Comment 11

[Marina Samuel [:emtwo]]

Attachment: nightly.png

Comment 12

[Marco Mucci [:MarcoM]]

Hi Marina, can you provide a point value.  Thanks.

Comment 13

[Marina Samuel [:emtwo]]

p=2

Comment 14

[Matt Brubeck (:mbrubeck)]

Comment on attachment 821096 [details] [diff] [review]
v1: New about-flyout styles for Nightly & Aurora

Review of attachment 821096 [details] [diff] [review]:
-----------------------------------------------------------------

We'll need these files for the "official" (beta/release) branding also.

::: browser/metro/base/content/flyoutpanels/AboutFlyoutPanel.js
@@ +53,5 @@
> +    let backgroundColor, hoverColor;
> +    switch (brandShortName) {
> +      case "Nightly":
> +        backgroundColor = "#002147";
> +        hoverColor = "#0a111c";

Rather than use JavaScript here, let's load a CSS file from the branding directory, similar to:
http://mxr.mozilla.org/mozilla-central/source/browser/branding/aurora/content/aboutDialog.css

Comment 15

[Yuan Wang(:Yuan) – Mobile Firefox Design Lead]

Attachment: Flyout assets[Beta+Release].zip

Comment 17

[Matt Brubeck (:mbrubeck)]

Attachment: patch

Note: Firefox for Windows uses the exact same branding assets and config for the "Beta" and "Release" channels.  (This is intentional, to make sure any changes to the official branding are tested on the beta channel first.)  So this patch does not add separate branding for beta; beta builds will use the release branding for the About flyout, as they do elsewhere in the app.

Comment 19

[Matt Brubeck (:mbrubeck)]

Comment on attachment 8346156 [details] [diff] [review]
patch

Adding dolske as a reviewer because this touches files in /browser/branding.  This change should have no effect on desktop Firefox, but I'd like someone from the desktop team to look over it, especially since we hope to uplift this to Aurora.

Comment 20

[Rodrigo Silveira [:rsilveira] [:rodms]]

Comment on attachment 8346156 [details] [diff] [review]
patch

Review of attachment 8346156 [details] [diff] [review]:
-----------------------------------------------------------------

The nightly wordmark is almost touching the right corner of the screen, the mockups has it a little further left. Looks good otherwise.

Comment 21

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/mozilla-central/rev/d9107edc306a

Comment 22

[Matt Brubeck (:mbrubeck)]

Comment on attachment 8346156 [details] [diff] [review]
patch

[Approval Request Comment]
Bug caused by (feature/regressing bug #): new feature (Metro Firefox)

User impact if declined: Metro's "About" panel shows the old Nightly logo, on all channels.

Testing completed (on m-c, etc.): Landed on m-c 12/12. (Note this patch adds new aurora and release branding assets that aren't built on m-c; they will only have effect when it reaches aurora/beta/release.)

Risk to taking this patch (and alternatives if risky): Low-risk CSS and image patch.  This patch adds new files to the desktop Firefox branding directories, but these files are built only in --enable-metro builds and used only in the Metro UI.

String or IDL/UUID changes made by this patch: None.

Comment 23

[Matt Brubeck (:mbrubeck)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/97d64bcfce43

Comment 24

[Manuela Muntean [Away]]

Verified as fixed for iteration #21, with latest Nightly and Aurora on Win 8 64-bit and 32-bit: logos and colors in Metro flyout panel About are updated.