Make 'top sites' screen less white / bare with fresh profile

VERIFIED FIXED in Firefox 28

Status

defect
P2
normal
VERIFIED FIXED
6 years ago
5 years ago

People

(Reporter: krudnitski, Assigned: rsilveira)

Tracking

Trunk
Firefox 29
x86_64
Windows 8.1
Dependency tree / graph

Firefox Tracking Flags

(firefox28 verified, firefox29 verified)

Details

(Whiteboard: [beta28] p=8)

Attachments

(4 attachments, 7 obsolete attachments)

1.33 MB, application/zip
Details
1.09 KB, patch
mbrubeck
: review+
Details | Diff | Splinter Review
93.31 KB, image/png
Details
1.40 MB, patch
rsilveira
: review+
Details | Diff | Splinter Review
Reporter

Description

6 years ago
Not as big of an issue if you have a shared profile and your Top Sites are already therefore populated.

However, for those with a fresh profile loading up Fx Metro, you get presented with a very big, white 'blank' screen. I also caught during my one user testing session that I attended that it's not exactly clear you've launched 'Firefox', which I thought interesting.

So some things that could be used to mitigate but at no expense to start-up or performance of course:
- Add watermarked / subtle Firefox logo and/or name to the background
- Add subtle shading or colour to the background 
- Add a couple of bookmarks (separate bug which I'll respond to)

Could be a combination to the above. I'm looking to UX for some thoughts first on how best to blend the gorgeous, simple design look & feel with something that's not just a sea of white :). Needing-Info to UX

Marco, apologies in advance for ill use of whiteboard tags - you'll need to bear with me as I get up to speed on how you guys operate here!
Reporter

Updated

6 years ago
Flags: needinfo?(ywang)
Flags: needinfo?(madhava)
> - Add watermarked / subtle Firefox logo and/or name to the background
> - Add subtle shading or colour to the background 
> - Add a couple of bookmarks (separate bug which I'll respond to)

Most of this is addressed in other bugs - 

bug 916326 - implement first run page [block28]
bug 917429 - add back the about:start watermark [release28]
bug 823541 - pick default bookmarks bug (this one got lost in the cracks. it's currently assigned to you. I've marked it for triage.)

we also had rainbow'esk color shading in the background which ux decided to nix a while back.

Can we close this bug out?
Whiteboard: [triage] → [release28]
Assignee: nobody → mmaslaney
Versions 1a:

Displays the watermark logo with a simple orange gradient and welcome message.
Versions 1b:

Displays the full logo with an added color gradient background and welcome message.
Versions 1c:

Adds function to version 1a with with coachmarks.
Important to note that the logo and message will disappear after the user has navigated.
Flags: needinfo?(krudnitski)
Revised version 1a:


This is basically a first run experience, adding a little bit of delight and education, then moving out of the user's workflow.


Features:


• Firefox logo with welcome message (inline with the current desktop start page)

• Coach marks that with a rotating orange highlight (see "Pin" in the mock)

• Welcome message and coach marks will move out of the workflow when the user begins to navigate.

If we proceed with this approach, I recommend looping in Matej from branding to provide the appropriate copy.
Attachment #8338703 - Attachment is obsolete: true
Attachment #8338709 - Attachment is obsolete: true
Attachment #8338713 - Attachment is obsolete: true
Flags: needinfo?(ywang)
Flags: needinfo?(krudnitski)
Flags: needinfo?(krudnitski)
Flags: needinfo?(ywang)
Reporter

Comment 7

6 years ago
I love the idea in principle, but knowing that we have 1.5 weeks before aurora uplift, my only concern is getting the appropriate copy and this coded in. I suppose the copy is first priority, so the strings are available for l10n - and we'll need engineering to give an estimate on how easy / difficult this idea is to implement.

Michael - can you loop in Matej now (as he's based in Toronto, my fingers are crossed is that he's still about) so we can work this in parallel. 

Marco - I know you are adding this to our agenda on Monday.

Anyone else - if you have thoughts on how easy / difficult this would be to implement prior to Monday, this will give us indication whether we need this scaled back (although am hoping not, as I think this is rather a nice design and aids in the whole discovery & usability experience!)
Flags: needinfo?(krudnitski)
(In reply to mmaslaney from comment #6)
> Created attachment 8338965 [details]
> Windows8-i03-(StartPage)-freshprofile_v1a.png

Is this an overlay on top of the default start screen, or an interactive page we load in place of it?

If the former, overlaying a few "tips" on top of the start screen shouldn't be too hard. If we can nail down the strings and get them in now, we'll have time to code up the overlay. Also if this is an overlay, we need to take into account the about:start watermark, which we plan to bring back, and default bookmarks of which we currently only have two. If we keep the two defaults, we should update this to reflect how things will look with those in place.

If this is an interactive page things are bit simpler since we can create an about:firstrun or whatever and just code it up. Again, strings need to be finalized even if the page isn't ready yet by the 9th.
Jim, I'm thinking this would be an overlaying of tips. That being said, would it still be possible to have the coach marks rotate with an Orange highlight?
(In reply to mmaslaney from comment #9)
> Jim, I'm thinking this would be an overlaying of tips. That being said,
> would it still be possible to have the coach marks rotate with an Orange
> highlight?

Yes, we can animate in xul overlays using css or animated images.

I like the idea of a 'help' overlay. We can expand on it over time, even give the user the option of invoking it via a shortcut or menu and add support for new about:start views like history later on.
Agree with Michael. This would be an overlay of tips. New users can get help tips in context, which is a better way of learning.

Michael, I think you mockup in Comment 8 is not up-to-date. On start page, the bookmark, pin, and menu icons don't exist. 

I would suggest to show the tips of these three icons and the gesture of swiping from bottom or top upon the first time a webpage is loaded.

We will talk more tmrw :)
Flags: needinfo?(ywang)
Metro_FreshProfile.zip contains the following:


• Updated Mock (new copy)

• Specs

• Product Assets




New Copy:


[tabs]

Looking for your tabs? Just pull down or right-click


[top sites] 

Go to the sites you visit most


[bookmarks]

Find pages you've saved for later


[menu] 

Access more features and options


[history]

See where you've been on the Web
Attachment #8338965 - Attachment is obsolete: true
Whiteboard: [release28] → [beta28] p=0
Assignee: mmaslaney → nobody
Whiteboard: [beta28] p=0 → [beta28] [leave-open] p=0
Assignee: nobody → rsilveira
Status: NEW → ASSIGNED
String only.
Attachment #8344029 - Flags: review?(mbrubeck)
Comment on attachment 8344029 [details] [diff] [review]
941284_strings.patch

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

::: browser/metro/locales/en-US/chrome/browser.dtd
@@ +110,5 @@
>  <!ENTITY syncFlyout.key "s">
>  <!ENTITY aboutFlyout.key "a">
> +
> +<!-- FIRT RUN EXPERIENCE -->
> +<!ENTITY firstRunTabs.label "Looking for your tabs? Just pull down or right-click">

We should add a LOCALIZATION NOTE comment explaining the context for these strings.  Something like this should work:

<!-- LOCALIZATION NOTE (firstRunTabs.label,
                        firstRunTopSites.label,
                        firstRunBookmarks.label,
                        firstRunMenu.label,
                        firstRunHistory.label )
     These strings appear on the Firefox Start page the first time
     Firefox for Windows 8 Touch (Metro) is launched.  Each one
     has an arrow pointing toward the feature it references.  The code
     to display these strings is not enabled yet, but will be soon.
     For now, you can see this mockup for an example of how they are
     used: https://bug941284.bugzilla.mozilla.org/attachment.cgi?id=8338965
     -->
Attachment #8344029 - Flags: review?(mbrubeck) → review+
Latest mockup (extracted from Metro_FreshProfile.zip).
Thanks for the quick review and localization note text!

https://hg.mozilla.org/integration/fx-team/rev/e00a2572d85b
Note: Bug 920236 has some code we can use to load an alternate URL on first-run.  If we want this integrated with about:start, maybe we could use a url parameter, like "about:start?firstrun".
Blocks: 916326
Depends on: 920236
Blocks: metrov1it21
No longer blocks: metrov1backlog
Priority: -- → P2
QA Contact: jbecerra
Whiteboard: [beta28] [leave-open] p=0 → [beta28] [leave-open] p=8
Posted patch WIP first run (obsolete) — Splinter Review
Needs the latest patch from bug 920236. Navigating to about:start?firstrun will also load the page. At first I thought we should block accessing through the url bar but I don't think there's any harm in that. Might even be useful in case someone missed it and wants to see it again. 

Works fine in landscape mode. I'll try to get something better for portrait although I think it might not be worth it. I'll also disable it in snapped.

To document the behavior, just the first page opened loads the first run page. Creating a new tab, closing current tab or restarting the browser will load the regular start page. I like how it's non-intrusive.

Updated

6 years ago
Blocks: 831616

Updated

6 years ago
Duplicate of this bug: 836392
Posted patch Patch v1 (obsolete) — Splinter Review
Supporting portrait mode too. The logo image is in browser/branding, will r? for that once the metro bits are r+d.
Attachment #8347537 - Attachment is obsolete: true
Attachment #8349114 - Flags: review?(mbrubeck)
Comment on attachment 8349114 [details] [diff] [review]
Patch v1

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

I'm waiting for a build to finish so I can test this out before I finish reviewing it, but it looks good so far.  Some nits and questions:

::: browser/metro/base/content/Util.js
@@ +209,5 @@
>              aURL == "about:blank" ||
>              aURL == "about:empty" ||
>              aURL == "about:home" ||
>              aURL == "about:newtab" ||
> +            aURL.indexOf("about:start") == 0);

Please use aURL.startsWith("about:newtab") instead:

* Better performance than indexOf if the URI is really really long.
* about:newtab is now the official URI for the start page, for better compatibility with "Relaunch on desktop"

::: browser/metro/base/content/browser-ui.js
@@ +307,5 @@
>    },
>  
>    isStartURI: function isStartURI(aURI) {
>      aURI = aURI || Browser.selectedBrowser.currentURI.spec;
> +    return aURI == kStartURI || aURI.indexOf("about:start") == 0 || aURI == "about:home";

same here

::: browser/metro/base/content/startui/FirstRunOverlay.xul
@@ +18,5 @@
> +         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
> +
> +  <hbox id="start-container">
> +    <!-- Append topsites instruction just after topsites (position 2) -->
> +    <box position="2" class="firstrun">

The "insertafter" or "insertbefore" attributes might be better than "position":
https://developer.mozilla.org/en-US/docs/XUL/Attribute/insertafter

@@ +20,5 @@
> +  <hbox id="start-container">
> +    <!-- Append topsites instruction just after topsites (position 2) -->
> +    <box position="2" class="firstrun">
> +      <box id="instruction-topsites">
> +        <vbox align="center">

Do you need both boxes here, or could you use just a single <vbox id="instruction-topsites" align="center">?

::: browser/metro/base/content/startui/StartUI.js
@@ +27,5 @@
>        this.chromeWin.InputSourceHelper.isPrecise ? "precise" : "imprecise");
>  
> +    // NOTE: location.search doesn't work for about: pages
> +    if (location.href.indexOf("?firstrun") > 0) {
> +      document.loadOverlay("chrome://browser/content/FirstRunOverlay.xul", null);

Maybe we could check the prefs directly here, instead of mucking with the URI, if it makes things simpler.
Comment on attachment 8349114 [details] [diff] [review]
Patch v1

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

Looks beautiful!  I'd like to get as much testing of this as possible, so feel free to land what you have and file follow-up bugs for any of the review comments, if you want to.

One other thing I noticed when testing it out is that it goes away awfully quickly and there's no obvious way to get back to it.  We might want to consider adding a way to restore it (help button on the start page?), or showing it for the first few launches instead of just once.

::: browser/metro/base/content/startui/FirstRunOverlay.xul
@@ +47,5 @@
> +
> +    <box id="instruction-history-container" position="7" class="firstrun">
> +      <box id="instruction-history">
> +        <vbox align="center">
> +          <image class="instruction-arrow arrow-right" />

The history section looks a little weird since there are no tiles at first run in a new profile.  Maybe we should add some empty items with an outline style, like we do for Top Sites.
Attachment #8349114 - Flags: review?(mbrubeck) → review+
No longer blocks: 831616
Flags: needinfo?(madhava)
(In reply to Matt Brubeck (:mbrubeck) from comment #22)
> ::: browser/metro/base/content/startui/FirstRunOverlay.xul
> @@ +18,5 @@
> > +         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
> > +
> > +  <hbox id="start-container">
> > +    <!-- Append topsites instruction just after topsites (position 2) -->
> > +    <box position="2" class="firstrun">
> 
> The "insertafter" or "insertbefore" attributes might be better than
> "position":
> https://developer.mozilla.org/en-US/docs/XUL/Attribute/insertafter
> 

Cool, didn't know about that.

> @@ +20,5 @@
> > +  <hbox id="start-container">
> > +    <!-- Append topsites instruction just after topsites (position 2) -->
> > +    <box position="2" class="firstrun">
> > +      <box id="instruction-topsites">
> > +        <vbox align="center">
> 
> Do you need both boxes here, or could you use just a single <vbox
> id="instruction-topsites" align="center">?
> 

I started with less boxes, but I was only able to get the absolute positioning right with the extra box. :( 

> ::: browser/metro/base/content/startui/StartUI.js
> @@ +27,5 @@
> >        this.chromeWin.InputSourceHelper.isPrecise ? "precise" : "imprecise");
> >  
> > +    // NOTE: location.search doesn't work for about: pages
> > +    if (location.href.indexOf("?firstrun") > 0) {
> > +      document.loadOverlay("chrome://browser/content/FirstRunOverlay.xul", null);
> 
> Maybe we could check the prefs directly here, instead of mucking with the
> URI, if it makes things simpler.

I'll keep it like this for now in case we need an url for easy access to the first run experience. It simplifies testing too.
Posted patch Patch v2 (obsolete) — Splinter Review
Addressed review comments and added watermarked empty history tiles. Opened bug 951818 to track your comment about it going away too fast. Carrying over r+.
Attachment #8349114 - Attachment is obsolete: true
Attachment #8349606 - Flags: review+
Posted patch Patch v3Splinter Review
Updating the patch as I accidentally removed a about:start check in browser-ui.js in the latest patch which caused some test failures.
Attachment #8349606 - Attachment is obsolete: true
Attachment #8349770 - Flags: review+
Status: ASSIGNED → RESOLVED
Last Resolved: 6 years ago
Resolution: --- → FIXED
Whiteboard: [beta28] [leave-open] p=8 → [beta28] p=8
Target Milestone: --- → Firefox 29
Comment on attachment 8349770 [details] [diff] [review]
Patch v3

[Approval Request Comment]
Bug caused by (feature/regressing bug #): no regression, adding first run experience to educate users on metro.

User impact if declined: Low, there will be no first run experience.
Testing completed (on m-c, etc.): yes
Risk to taking this patch (and alternatives if risky): Very low, metro code only.
String or IDL/UUID changes made by this patch: none
Attachment #8349770 - Flags: approval-mozilla-aurora?
Attachment #8349770 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+
Mozilla/5.0 (Windows NT 6.3; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0
Mozilla/5.0 (Windows NT 6.3; WOW64; rv:28.0) Gecko/20100101 Firefox/28.0

Verified as fixed on latest nightly and latest aurora builds.
The start page of a fresh profile is now implemented accordingly to the design.
Status: RESOLVED → VERIFIED
Blocks: 960613
You need to log in before you can comment on or make changes to this bug.