848242 - Add support for widget/tiles to homepage customization

Status: RESOLVED DUPLICATE of bug 862805

(Firefox for Android Graveyard :: General, defect)

Description

[Yuan Xulei [:yxl] (Leave from May 18)]

Though it may be difficult, fennec should allow the distribution or add-ons to replace homepage(about:home) or change its content:

# Device verdors whould like to distribute Firefox android with customized homepage(about:home), such as adding pre-pinned bookmarks and showing recommended websites.

# The Asian marketing(China, Japan, Korea, etc) of huge potential strongly demands a navigation-based homepage, whose layout is quite different.

# It is much simpler for the add-on developers to contriute their work to the homepage.

Comment 1

[Wesley Johnston (:wesj)]

> # Device verdors whould like to distribute Firefox android with customized
> homepage(about:home), such as adding pre-pinned bookmarks and showing
> recommended websites.

Support for vendors to ship customized bookmarks was landed recently (bug 836450).

Comment 2

[Yuan Xulei [:yxl] (Leave from May 18)]

(In reply to Wesley Johnston (:wesj) from comment #1)
> > # Device verdors whould like to distribute Firefox android with customized
> > homepage(about:home), such as adding pre-pinned bookmarks and showing
> > recommended websites.
> 
> Support for vendors to ship customized bookmarks was landed recently (bug
> 836450).

Really good work. The bug 836450 enables to set the default bookmarks in the bookmark list. 

It will be better if we could also set the default pinned bookmarks in the top site list of the homepage with the same method.

I would like to open a bug for it.

Comment 3

[Pin Zhang [:pzhang] (inactive)]

Is there any plan to support customizing the homepage by extension? Or is there any possible to moularize the homepage-related code, so we can create a new branch to customize the homepage and maintain the branch easily?

Comment 4

[Mark Finkle (:mfinkle) (use needinfo?)]

(In reply to Pin Zhang [:pzhang] from comment #3)
> Is there any plan to support customizing the homepage by extension? Or is
> there any possible to moularize the homepage-related code, so we can create
> a new branch to customize the homepage and maintain the branch easily?

There is a plan to add support for add-ons to customize the about:home page. We are not clear on exactly what parts of the page will allow customization, but one idea was to add widget-style support, where an add-on could control a rectangular region on the page.

Comment 5

[:Margaret Leibovic]

Do we know what types of things vendors would like on the homepage? Maybe ibarlow has ideas about how to start introducing some customization hooks. To start, maybe we could let add-ons create new list sections similar to "Your tabs from last time" and "Add-ons for your Firefox". It would be nice to do something that doesn't depend on future designs for about:home, although we'd want whatever we do to be forward compatible.

Bug 848254 was filed about pre-pinned bookmarks, and we already support adding regular default bookmarks (as wesj mentioned in comment 1), so this bug should just be about other forms of customization.

Comment 6

[Ian Barlow (:ibarlow)]

At the work week last week, we had talked about offering three-ish levels of customizability to about:home through the use of add-ons.

1. Thumbnails
- Pre-pinned sites
- Special thumbnails with enhanced functionality (for example, a flickr thumbnail that shows a rotating gallery of images, or a whimsy thumbnail that plays animated gifs)

2. Widgets
- Similar to our Sync Setup widget, these might be larger sections of the page in which interactive content could be placed

3. Screens
- In our new about:home designs with swipeable screens (WIP mock here: http://cl.ly/image/3i1q2o2Y1g2N), add-ons developers might be able to create entire screens that can be added to this swipe view. So this might be a Pocket reading list, or a newsfeed from a specific site, etc.

Comment 7

[Pin Zhang [:pzhang] (inactive)]

(In reply to Mark Finkle (:mfinkle) from comment #4)
> (In reply to Pin Zhang [:pzhang] from comment #3)
> > Is there any plan to support customizing the homepage by extension? Or is
> > there any possible to moularize the homepage-related code, so we can create
> > a new branch to customize the homepage and maintain the branch easily?
> 
> There is a plan to add support for add-ons to customize the about:home page.
> We are not clear on exactly what parts of the page will allow customization,
> but one idea was to add widget-style support, where an add-on could control
> a rectangular region on the page.
Add widget-style support is a good idea.
I think both partial customization and full substitution are necessary, take the Firefox China Edition for example, we replaced the whole about:home and about:newtab page, and the feedbacks are pretty good.

Comment 8

[Pin Zhang [:pzhang] (inactive)]

(In reply to Ian Barlow (:ibarlow) from comment #6)
> At the work week last week, we had talked about offering three-ish levels of
> customizability to about:home through the use of add-ons.
> 
> 1. Thumbnails
> - Pre-pinned sites
> - Special thumbnails with enhanced functionality (for example, a flickr
> thumbnail that shows a rotating gallery of images, or a whimsy thumbnail
> that plays animated gifs)
> 
> 2. Widgets
> - Similar to our Sync Setup widget, these might be larger sections of the
> page in which interactive content could be placed
> 
> 3. Screens
> - In our new about:home designs with swipeable screens (WIP mock here:
> http://cl.ly/image/3i1q2o2Y1g2N), add-ons developers might be able to create
> entire screens that can be added to this swipe view. So this might be a
> Pocket reading list, or a newsfeed from a specific site, etc.
Awesome! If the display orders of Widgets and Screens could also be customized, I think that would be better.
Do we have tracking bugs already?

Comment 9

[Pin Zhang [:pzhang] (inactive)]

(In reply to :Margaret Leibovic from comment #5)
> Do we know what types of things vendors would like on the homepage? 
Here are what I can imagine:
- Customize the number of columns/rows, size and thumbnails of pre-pinned sites
- List categorized mobile websites (popular in China)
- Show the Logo or latest news about the vendor in a banner.
- Show the hot topics, search trends etc.
- Show 3g/wifi data usage (need net-stats API support)
...

anyway, all these could be done by the approaches Ibarlow presented.

Comment 10

[Mark Finkle (:mfinkle) (use needinfo?)]

Transforming this bug to be tile/widget specific. Bug 862805 is about support entire custom pages.

Comment 11

[:Margaret Leibovic]

I'm going to start thinking about this...

Comment 12

[:Margaret Leibovic]

Attachment: WIP

This still has a ton of problems, but it's starting to get close to working at least. I actually saw an image appear at one point, but then I made some change that broke that and I can't figure out exactly what I did... I think I just need a break :)

The main thing I want to try to figure out is the Java/JS observer/notification relationship. I decided to create this HomeWidgets.jsm to keep track of the widgets, then just have Java request those widgets when it needs to draw them to the screen. However, this means that if nobody ever loads HomeWidgets.jsm, Java will never get a response back, but I suppose that could work if we avoid showing any widget-related UI until we get back a "HomeWidgets:Data" event.

We also need to figure out the UX of how this will work. Right now I just made an extra "Widgets" page on about:home, but we might want to give that a better name.

Comment 13

[Mark Finkle (:mfinkle) (use needinfo?)]

Comment on attachment 790591 [details] [diff] [review]
WIP


>diff --git a/mobile/android/chrome/content/browser.js b/mobile/android/chrome/content/browser.js

>+    HomeWidgets.add({
>+      "imageURI": imageURI

You don't need to wrap the property in " since it's a real JS object

>diff --git a/mobile/android/modules/HomeWidgets.jsm b/mobile/android/modules/HomeWidgets.jsm

>+function dump(a) {
>+  Cc["@mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService).logStringMessage(a);

Services.console.logStringMessage(a)

>+function sendMessageToJava(message) {
>+  let bridge = Cc["@mozilla.org/android/bridge;1"].getService(Ci.nsIAndroidBridge);
>+  return bridge.handleGeckoMessage(JSON.stringify(message));

return Services.androidBridge.handleGeckoMessage(...);


>+let widgetRegsitry = {};

You seem to be misspelling it everywhere, which is good :)

>+  _handleGet: function() {

>+      widgets.push({
>+        "id": w.id,
>+        "imageURI": w.imageURI || ""

No need to wrap the property names in "

>+  add: function(options) {
>+    let widget = new Widget(options);
>+    widgetRegsitry[widget.id] = widget;
>+    return widget.id;

You can check to see if this is the first added widgets and Service.obs.addObserver here

>+  remove: function(id) {
>+    delete widgetRegsitry[id];

You can check to see if you have no more widgets and Service.obs.removeObserver here

>+// XXX: Find a better place to add these observers. Maybe this needs to be a
>+// lazy notification script instead of a module.
>+Services.obs.addObserver(HomeWidgets, "HomeWidgets:Get", false);
>+Services.obs.addObserver(HomeWidgets, "HomeWidgets:Click", false);

Use HomeWidget.add/remove to lazily add and remove the observers

Comment 14

[:Margaret Leibovic]

I'm going to dupe this to bug 862805, since that bug tracks our current home page customization plans.