992884 - Implement rocketbar browser start page

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::System, defect)

Description

[Dale Harvey (:daleharvey)]

As specified in: https://mozilla.app.box.com/s/aw92pdyzvr1nzes7fjt0

Comment 1

[Eric Pang [:epang] UX]

Link broke, here's an udpated one. 
https://mozilla.box.com/s/2cl893tgtcfqammvdl2q

Comment 2

[Ben Francis [:benfrancis]]

The requirements for the start page are covered by two existing user stories so I've set them as blocking this bug:
* Top Sites (bug 962610)
* View History (bug 962612)

* See also "Create Window" (bug 941214) which covers creating a new window (which would display the start page by either tapping the browser icon or the "new window" item in the Rocketbar overflow menu).

I'll leave it up to you which bug(s) you want to do the work in though :)

Comment 3

[Dale Harvey (:daleharvey)]

So the first time the start screen loads, we are gonna have emptiness, can I fill them with adver...sponsored tiles?

Ok so not serious, I will just put in gray filler boxes for now, but having a spec for empty start screen state would be useful

Comment 4

[Dale Harvey (:daleharvey)]

Also slightly confusing is the specs mention the background of #000 and text of #FFF but the picture is the opposite

Comment 5

[Eric Pang [:epang] UX]

(In reply to Dale Harvey (:daleharvey) from comment #3)
> So the first time the start screen loads, we are gonna have emptiness, can I
> fill them with adver...sponsored tiles?
> 
> Ok so not serious, I will just put in gray filler boxes for now, but having
> a spec for empty start screen state would be useful

Hey Dale, I think I may have updated this in the spec.  Can you take a look?  If you still see an issue let me know :). 

https://mozilla.box.com/s/o7623o60i4o01xlrbmiv

Regarding the empty boxes - Peter mentioned the we might be able to use sponsored images.  If not, I can look into designing a empty box.  Peter?

Thanks!

Comment 6

[Peter Dolanjski [:pdol]]

(In reply to Eric Pang [:epang] from comment #5)
> Regarding the empty boxes - Peter mentioned the we might be able to use
> sponsored images.  If not, I can look into designing a empty box.  Peter?

Kyle/Ben, do either of you know if we can use the previous runtime bookmark preload capability to turn into the starting Top Sites?  That way Mozilla can define a few in the build and a partner can add their own until the user starts browsing at which point they'll fall off from the top results.

Comment 7

[Ben Francis [:benfrancis]]

Yes, we can, but I don't think that comes under the existing "Top Sites" or "History" user stories, I think it's a separate feature we need a user story for, along the lines of "As a device manufacturer I want to set some default top sites at build time".

I would suggest those default top sites should have an initial frecency of 0 and would therefore soon disappear from the start screen if other web sites are visited more often.

Rather than try to implement this feature before user testing, we could just manually load some web pages before the tests take place so that the Top Sites are populated.

Comment 8

[Dale Harvey (:daleharvey)]

We cant grab screenshots off preloaded bookmarks, they would need to be defined in the custom json, at that point there isnt really any difference between 'preloaded bookmarks' and 'sponsored tiles', since the 'screenshot' can be anything.

We can put in some placeholders for the user testing, not entirely sure about being able to redo the build customisations before then, but we should do something, it isnt a great experience when it comes up blank

Comment 9

[Ben Francis [:benfrancis]]

Yes sorry, to be clear I'm saying the existing build-time customisation is not enough, we need a new feature to define default top sites, which include screenshot thumbnails.

Comment 10

[Kyle Machulis [:qdot] [:kmachulis] (INACTIVE)]

Yeah, I agree with Ben. We can use the customizer, but it's going to take some work to change formatting.

Comment 11

[Dale Harvey (:daleharvey)]

Vivien, quick question, we need a homescreen bookmark to invoke a system function, currently just overriding a url: https://github.com/mozilla-b2g/gaia/pull/18204/files#diff-c0614cb0a16dd319044fc049e39fb5fcR24, we cant use about: urls, can override the features but seem ugly, how should this be done?

Comment 12

[Dale Harvey (:daleharvey)]

Also, Eric, is there any chance you could get me screenshots, titles and urls for what we want as the pre populated defaults for the top sites + history (they will be the same)

Comment 13

[Ben Francis [:benfrancis]]

Vivien, after thinking about this for a while I discussed it with Dale in IRC and suggested that if the start page needs to be part of the search app then we could make the browser icon a bookmark to app://search.gaiamobile.org/start.html - what do you think?

This is tricky because we don't yet have the ability to bookmark a particular page of an app (or even hyperlink to one) and the window manager will need to know what to set the mozapp attribute of the AppWindow's iframe to for a given URL, but this seems like something we should be working towards solving anyway. (see the thread on "What defines the scope of an app?" on the mailing list.)

Another complication is that I'm guessing we want the start page's window to be replaced by a browser window in the task manager when the user selects a top site or history item, an ordinary AppWindow wouldn't do that.

But it would be great if we could avoid using a fake URL that we intercept and have to manually tell the Rocketbar to expand and tell the search app to display the start page over IAC. Ideally the browser icon should be much like any other bookmark.



Eric, do you have up to date visuals for the start page? The link on the Etherpad doesn't work any more https://mozilla.box.com/s/aw92pdyzvr1nzes7fjt0

Comment 14

[Dale Harvey (:daleharvey)]

I took a look into this, its going to need a fairly large chunk of work, aside from the rocketbar handling of apps needing to change, it would require changing how the homescreen launches bookmarks, how the system app handles them, and I am not sure about the implications of a mozapp switching from app://search. .... to http://mytopsite.com

There isnt a way all of that is gonna land before user testing, I suggest we implement it in the features string for now calling into the system app then we can start on the dependant bugs for implementing application bookmarks

Comment 15

[Ben Francis [:benfrancis]]

OK, I filed bug 996039 for the general case of linking to a particular page of an app, which is important but potentially a lot of work.

Comment 16

[Ben Francis [:benfrancis]]

(In reply to Dale Harvey (:daleharvey) from comment #14)
> I took a look into this, its going to need a fairly large chunk of work,
> aside from the rocketbar handling of apps needing to change, it would
> require changing how the homescreen launches bookmarks, how the system app
> handles them, and I am not sure about the implications of a mozapp switching
> from app://search. .... to http://mytopsite.com

It would be safe, but we don't want to do it that way because app windows are treated differently to browser windows. We might want to open a browser window and close the app window...

Comment 17

[Dale Harvey (:daleharvey)]

Attachment: https://github.com/mozilla-b2g/gaia/pull/18204

So as mentioned switching to an app bookmark is gonna take a bunch of work and I am not 100% it will work, will have an impact on memory and performance, but will need to look into as a follow up.

The current unit tests are fairly brittle, I have some new tests but they require a much larger change to the rocketbar than could go in to this patch, I attempted to keep the changes there as minimal as I could.

Known issues: the layout is fixed to portait on 480 x 320, I dont have another device working to test on, but will follow up.

Start page is empty on first load, waiting on eric for the assets for what we should see on initial page load and will follow up

History is limited to 5 items, need to discuss what we want as the final behaviour.

The are various race conditions that cant be fixed without a fairly large refactor, possible to get the rocketbar in a minimised but focused state etc, I have covered as many of them as I could but needs a refactor to properly fix

Comment 18

[Dale Harvey (:daleharvey)]

I missed the search_tests, will fix in the morning

Comment 19

[Eric Pang [:epang] UX]

(In reply to Ben Francis [:benfrancis] from comment #13)
> Vivien, after thinking about this for a while I discussed it with Dale in
> IRC and suggested that if the start page needs to be part of the search app
> then we could make the browser icon a bookmark to
> app://search.gaiamobile.org/start.html - what do you think?
> 
> This is tricky because we don't yet have the ability to bookmark a
> particular page of an app (or even hyperlink to one) and the window manager
> will need to know what to set the mozapp attribute of the AppWindow's iframe
> to for a given URL, but this seems like something we should be working
> towards solving anyway. (see the thread on "What defines the scope of an
> app?" on the mailing list.)
> 
> Another complication is that I'm guessing we want the start page's window to
> be replaced by a browser window in the task manager when the user selects a
> top site or history item, an ordinary AppWindow wouldn't do that.
> 
> But it would be great if we could avoid using a fake URL that we intercept
> and have to manually tell the Rocketbar to expand and tell the search app to
> display the start page over IAC. Ideally the browser icon should be much
> like any other bookmark.
> 
> 
> 
> Eric, do you have up to date visuals for the start page? The link on the
> Etherpad doesn't work any more https://mozilla.box.com/s/aw92pdyzvr1nzes7fjt0

Ben, here's the updated link:
https://mozilla.app.box.com/files/0/f/1694882428/1/f_16028147447

Dale, I sent you a few messages on irc regarding the top sites/history.  Will check with Francis today about which screens to display (then I can get them ready for you)

Comment 20

[Dale Harvey (:daleharvey)]

Clearing needinfo on vivien, working on the search_tests now

Comment 21

[Ben Francis [:benfrancis]]

Comment on attachment 8406591 [details] [review]
https://github.com/mozilla-b2g/gaia/pull/18204

Nice work turning this around so quickly! It's very cool to play with. I've left review comments on GitHub.

I don't like that the start screen is displayed by an IAC message to the search app as I think it makes the search app too tightly coupled with the system app. But I think we're agreed that the solution to that could be an "app bookmark" which is non-trivial work we should look at in a follow-up as discussed.

There are a few functional things that are broken, but the rest of my comments are mostly just nits.

Oh and the broken tests.

Comment 22

[Dale Harvey (:daleharvey)]

Fixed nits, forgot to actually clear info on vivien, the integration test intermittents were unrelated and disabled in https://bugzilla.mozilla.org/show_bug.cgi?id=996662, will work on reenabling them

Will do r? when I see a green travis

Comment 23

[Ben Francis [:benfrancis]]

https://github.com/mozilla-b2g/gaia/commit/a4005d9f2466e48b27dafd036fe97924680184ef

Comment 24

[Ben Francis [:benfrancis]]

I filed a couple of followups:
* Bug 996790 - Turn start page into an app bookmark
* Bug 996801 - Expire top site thumbnails

Comment 25

[Stephany Wilkes]

I also filed a follow-up based on Rocketbar user study findings. It pertains to visual style:
https://bugzilla.mozilla.org/show_bug.cgi?id=996939

Comment 26

[Eric Pang [:epang] UX]

Attachment: Screens & Favicons

Hey Dale,

Here are the assets for the top sites and history.  The strings below go with the referenced image name. (Same goes with the history items).  For the favicon is it possible to sample the outer most colour and create a circle that is 16x16px around it (it would be nice to keep this consistent if possible - but not important for the study).  Feel free to brother me on irc if you have any questions or need anything else :).  Thanks Dale!

Top Sites
1_Mozilla  Home of the Mozilla Project — Mozilla
2_IGN	   IGN - Walkthroughs, Reviews, News & Videos
3_CNN	   CNN.com International - Breaking News
4_500px	   500px | The Premier Photography Community.
5_49ers	   The Official Site of the San Francisco 49ers
6_ESPN	   ESPN: The Worldwide Leader In Sports


History
1_NYTimes
The New York Times - Breaking News, World News & Multimedia
http://www.nytimes.com

2_Behance
Online Portfolios on Behance
http://www.behance.net

3_Gizmodo
Gizmodo - Tech By Design
http://gizmodo.com

4_Vouge
Fashion Magazine - Latest News, Catwalk Photos & Designers
http://www.vogue.com

Comment 27

[Dale Harvey (:daleharvey)]

Thanks a lot, will add those to the default in a seperate bug @ https://bugzilla.mozilla.org/show_bug.cgi?id=997521

The sampling thing will have to be done as a follow up, its never been specified up until now, its a fair amount of work and questionable whether it will work (image sampling can be tricky)

Looking at the visual design, I just noticed that instead of using the behance favicon, it looks like a high res logo was grabbed from somewhere? I think we should mock up things like that with real icons, theres already been a few cases in which we did things like homescreen bookmarks with fancy high res mockups to find out they looked terrible with 16x16 ico files.