Closed Bug 704588 Opened 8 years ago Closed 8 years ago

New design for about: = about:firefox = about:fennec to match about:home

Categories

(Firefox for Android :: General, defect, P4)

ARM
Android
defect

Tracking

()

VERIFIED FIXED
Firefox 12
Tracking Status
firefox11 --- verified
firefox12 --- fixed

People

(Reporter: ibarlow, Assigned: steffen.wilberg)

References

Details

Attachments

(8 files, 3 obsolete files)

The about:firefox screen should visually resemble about:home more closely than it does today. 

Since we are redesigning about:home in bug 701380, we could use this opportunity to apply some similar visual changes to the about:firefox screen. 

I will post some mockups to this bug soon.
Depends on: 701380
OS: Mac OS X → Android
Hardware: x86 → ARM
Assignee: nobody → madhava
Priority: -- → P4
Attached image Mockup of about:firefox
Assets / Specs to follow soon
Attached image Design specs (obsolete) —
Note: Much of the styling here can be carried over from the start page
Attached image Design specs
Fixed a couple of errors from the previous mockup
Attachment #581647 - Attachment is obsolete: true
I'm interested in implementing this.

about:home doesn't help a lot here, because this is a XHTML page, while that is Java.

How do we choose the mdpi, hdpi, or xhdmi version of the logo and the button?
@media all and (min-resolution: 300dpi) for xhdpi?

We could also try an SVG version of the logo, if that gets rendered fast enough. Unlike about:home, this is not in the startup path...

Do we use Droid Sans automatically, or do we have to use css font-face to use it?
Assignee: madhava → steffen.wilberg
(In reply to Steffen Wilberg from comment #5)
> I'm interested in implementing this.
> 
> about:home doesn't help a lot here, because this is a XHTML page, while that
> is Java.
> 
> How do we choose the mdpi, hdpi, or xhdmi version of the logo and the button?
> @media all and (min-resolution: 300dpi) for xhdpi?

I'm not sure of the best approach here. Let's just start with hdpi and let the rest happen as we iterate.

> We could also try an SVG version of the logo, if that gets rendered fast
> enough. Unlike about:home, this is not in the startup path...

> Do we use Droid Sans automatically, or do we have to use css font-face to
> use it?

Droid Sans is on all android devices, so we can just use it's name in a CSS font-family rule.
Comment on attachment 581653 [details]
Design specs

I need specs for the light blue background color of the page and of the not so light blue banner. The spec shows gradients for those...

"Licensing information" looks like a heading for the following text instead of a link (to about:license).
Attached image screenshot (obsolete) —
Mostly done!
Looking very nice!
Attached patch patch (obsolete) — Splinter Review
Uses two new images: FirefoxIcon-hdpi.png and FirefoxWordmark-hdpi.png (included).
Removes aboutBackground.jpg and header.css.

I dropped the "version" string ("Version" in the design spec), following desktop Firefox.

I used CSS for the update box instead of the provided images.
A linear-gradient looks nice on desktop, but it causes ugly horizontal stripes on my phone, so I reverted to a single color.
The color doesn't change when pressing the "Check for Updates »" link yet; only the label changes to "Looking for updates…".

You can add "#define MOZ_UPDATER" to about.xhtml to show the update box in self-compiled builds.
Attachment #582712 - Flags: review?(mark.finkle)
Hi Steffen, this is looking great! 

I have a few comments for you:
1. Let's update the styling of our list to be consistent with the start page. This includes making the rows taller and adding a double light/dark divider line, as is described in the attached spec.
2. I will provide you some background image assets (light blue and dark blue), to get the same textured feel that we have on the start page. 
3. The grey button is looking a little unpolished. Can we please use the graphic assets that were provided with the initial spec? The text color also needs to be updated.

I will upload the blue background assets in the next comment.
Attached patch patch v2Splinter Review
(In reply to Ian Barlow (:ibarlow) from comment #11)
> 1. Let's update the styling of our list to be consistent with the start
> page. This includes making the rows taller and adding a double light/dark
> divider line, as is described in the attached spec.
Done, although you now need to scroll down to view the "Licensing information" and the buildid...

> 2. I will provide you some background image assets (light blue and dark
> blue), to get the same textured feel that we have on the start page.
background-image: -moz-linear-gradient(to bottom, #C8D2DC, #C9D3DD); would work fine for the page background (unlike the update button, as mentioned in comment 10). That doesn't have the "textured feel" you want though, so I've used the images. They're intended for tiling, right?

> 3. The grey button is looking a little unpolished. Can we please use the
> graphic assets that were provided with the initial spec?
I couldn't use the images you provided because of the rounded corners; they looked extremely ugly when stretched horizontally. I've reduced the dark xhdpi image to a 93x1 pixel thin vertical line, without the bottom-border and box-shadow, and did all that with css.
My phone (Galaxy S) still shows some horizontal stripes though when I look closely or zoom in as far as possible.

> The text color also needs to be updated.
oops, fixed.
Attachment #582615 - Attachment is obsolete: true
Attachment #582712 - Attachment is obsolete: true
Attachment #582712 - Flags: review?(mark.finkle)
Attachment #583278 - Flags: review?(mark.finkle)
Attachment #583278 - Flags: feedback?(ibarlow)
Attached image screenshot
Thanks Steffen, looks awesome! Look forward to seeing it in a build :)
Comment on attachment 583278 [details] [diff] [review]
patch v2

Looks really good.

My only nit is some image renaming:
bg_lightblue.png -> about-bg-lightblue.png
bg_darkblue.png  -> about-bg-darkblue.png
btn_dkgrey.png   -> about-btn-darkgrey.png

These are kinda branded and we might move them later, but that can be a followup:
FirefoxIcon-hdpi.png     -> logo-hdpi
FirefoxWordmark-hdpi.png -> wordmark-hdpi.png

f+ for Ian too, since his comment was so positive :)
Attachment #583278 - Flags: review?(mark.finkle)
Attachment #583278 - Flags: review+
Attachment #583278 - Flags: feedback?(ibarlow)
Attachment #583278 - Flags: feedback+
Whiteboard: [fennec-aurora]
Thanks for the quick review. I renamed all the files mentioned in comment 16.
http://hg.mozilla.org/integration/mozilla-inbound/rev/640682cbaebc

The patch contains exactly one trivial string change:
-<!ENTITY aboutPage.checkForUpdates.button       "Check for Updates">
+<!ENTITY aboutPage.checkForUpdates.link         "Check for Updates »">
Do you want me to drop that for Aurora?
Summary: Update look of about:firefox to match new start page → New design for about: = about:firefox = about:fennec to match about:home
Backed out:
https://hg.mozilla.org/integration/mozilla-inbound/rev/29c0a2329b83

For:
https://tbpl.mozilla.org/?tree=Mozilla-Inbound&rev=640682cbaebc
https://tbpl.mozilla.org/php/getParsedLog.php?id=8082595&tree=Mozilla-Inbound
{
/builds/slave/m-in-andrd/build/obj-firefox/config/nsinstall /builds/slave/m-in-andrd/build/mobile/android/base/resources/layout-v11/awesomebar_search.xml /builds/slave/m-in-andrd/build/mobile/android/base/resources/layout-v11/awesomebar_search_actionbar.xml /builds/slave/m-in-andrd/build/mobile/android/base/resources/layout-v11/gecko_app.xml /builds/slave/m-in-andrd/build/mobile/android/base/resources/layout-v11/gecko_app_actionbar.xml res/layout-v11/
/builds/slave/m-in-andrd/build/obj-firefox/config/nsinstall: cannot change mode of /builds/slave/m-in-andrd/build/obj-firefox/mobile/android/base/res/layout-v11/awesomebar_search.xml: No such file or directory
make[6]: *** [res/layout-v11/awesomebar_search.xml] Error 1
}
The failures in comment 18 are now looking like they were caused by bug 712380 instead (the changeset before this bug landed was green, but it seems that the failure is intermittent).

Have pushed this to try (with bug 712380 backed out), to confirm that it is ok to reland:
https://tbpl.mozilla.org/?tree=Try&rev=34af88eecb8a
(In reply to Steffen Wilberg from comment #17)
> Thanks for the quick review. I renamed all the files mentioned in comment 16.
> http://hg.mozilla.org/integration/mozilla-inbound/rev/640682cbaebc
> 
> The patch contains exactly one trivial string change:
> -<!ENTITY aboutPage.checkForUpdates.button       "Check for Updates">
> +<!ENTITY aboutPage.checkForUpdates.link         "Check for Updates »">
> Do you want me to drop that for Aurora?

No. You can keep it. String freeze for native fennec will be in mid January, so we should be able to land this in time.
Relanded:
https://hg.mozilla.org/integration/mozilla-inbound/rev/c33646a41d94
Status: NEW → ASSIGNED
Target Milestone: --- → Firefox 12
https://hg.mozilla.org/mozilla-central/rev/c33646a41d94
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
Attachment #583278 - Flags: approval-mozilla-aurora?
Blocks: 712766
Just for reference, the update box won't show up in beta or release builds, because the updater is disabled there - we rely on the Android Market to update (bug 619801).
http://mxr.mozilla.org/mozilla-central/search?string=MOZ_UPDATER%3D&find=configure.sh&findi=&filter=^[^\0]*%24&hitlimit=&tree=mozilla-central
Attachment #583278 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Verified with:
Mozilla/5.0 (Android; Linux armv7l; rv:11.0a2) Gecko/20111228 Firefox/11.0a2
Fennec/11.0a2

Mozilla/5.0 (Android; Linux armv7l; rv:12.0a1) Gecko/20111228 Firefox/12.0a1
Fennec/12.0a1

HTC Desire Z (Android 2.3)

about:firefox design match about:home .
Status: RESOLVED → VERIFIED
Whiteboard: [fennec-aurora]
Should there be a '»', in aboutPage.checkForUpdates.link?
You need to log in before you can comment on or make changes to this bug.