Closed Bug 898843 Opened 6 years ago Closed 6 years ago

Defect - Update logos and colors in Metro flyout panel About

Categories

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

25 Branch
All
Windows 8
defect

Tracking

(firefox28 verified, firefox29 verified)

VERIFIED FIXED
Firefox 28
Tracking Status
firefox28 --- verified
firefox29 --- verified

People

(Reporter: kapranov98, Assigned: mbrubeck)

References

Details

(Whiteboard: [beta28] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=2)

Attachments

(8 files, 3 obsolete files)

Attached image 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
OS: All → Windows 8
Summary: Old logo in flyoutpanel About → Defect - Old logo in flyout panel About
Whiteboard: feature=defect c=tbd u=tbd p=0
Attached image About-flyout_new-logo_v1.png (obsolete) —
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/
Tried to change the font color and background, here's what happened.
Whiteboard: feature=defect c=tbd u=tbd p=0 → feature=defect c=tbd u=tbd p=0 [preview]
Priority: -- → P1
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!
Flags: needinfo?(smartell)
Blocks: 831955
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: feature=defect c=tbd u=tbd p=0 [preview] → feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 [preview]
Summary: Defect - Old logo in flyout panel About → MP Defect - Old logo in flyout panel About
Whiteboard: feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 [preview] → [preview] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0
Summary: MP Defect - Old logo in flyout panel About → [MP] Defect - Old logo in flyout panel About
Blocks: metrov1backlog
No longer blocks: metrov1defect&change
As soon as we have the final globe image / color combinations we finish this up.
Assignee: nobody → ywang
Whiteboard: [preview] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 → [l10n] [preview] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0
Attached image About-flyouts_090613.png (obsolete) —
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!
Attachment #782721 - Attachment is obsolete: true
Hi Yuan, 
What's the next step for this bug?
Flags: needinfo?(ywang)
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.
Attachment #800902 - Attachment is obsolete: true
Flags: needinfo?(ywang)
Flags: needinfo?(smartell)
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
No longer blocks: MetroPreviewRelease
Summary: [MP] Defect - Old logo in flyout panel About → Defect - Old logo in flyout panel About
Whiteboard: [l10n] [preview] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 → [l10n] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0
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.
Attachment #821096 - Flags: feedback?(mbrubeck)
Attached image aurora.png
Attached image nightly.png
Hi Marina, can you provide a point value.  Thanks.
Assignee: ywang → msamuel
Blocks: metrov1it17
No longer blocks: metrov1backlog
Status: NEW → ASSIGNED
Flags: needinfo?(msamuel)
QA Contact: jbecerra
p=2
Flags: needinfo?(msamuel)
Whiteboard: [l10n] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=0 → [l10n] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=2
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
Attachment #821096 - Flags: feedback?(mbrubeck) → feedback-
Whiteboard: [l10n] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=2 → [release28] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=2
Assignee: msamuel → nobody
Blocks: metrov1backlog
No longer blocks: metrov1it17
Status: ASSIGNED → NEW
Duplicate of this bug: 943458
Whiteboard: [release28] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=2 → [beta28] feature=defect c=Settings_pane_options_and_about u=metro_firefox_user p=2
Assignee: nobody → mbrubeck
Status: NEW → ASSIGNED
Blocks: metrov1it21
No longer blocks: metrov1backlog
Attached patch patchSplinter Review
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.
Attachment #821096 - Attachment is obsolete: true
Attachment #8346156 - Flags: review?(rsilveira)
Duplicate of this bug: 943458
Summary: Defect - Old logo in flyout panel About → Defect - Update logos and colors in Metro flyout panel About
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.
Attachment #8346156 - Flags: review?(dolske)
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.
Attachment #8346156 - Flags: review?(rsilveira) → review+
Attachment #8346156 - Flags: review?(dolske) → review+
https://hg.mozilla.org/mozilla-central/rev/d9107edc306a
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 29
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.
Attachment #8346156 - Flags: approval-mozilla-aurora?
Attachment #8346156 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Target Milestone: Firefox 29 → Firefox 28
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.
Status: RESOLVED → VERIFIED
You need to log in before you can comment on or make changes to this bug.