Closed Bug 676047 Opened 8 years ago Closed 8 years ago

[Rapid Release] Mobile: Lightbox promo in product to promote Firefox Aurora

Categories

(Firefox for Android Graveyard :: General, defect)

Firefox 7
defect
Not set

Tracking

(Not tracked)

VERIFIED FIXED
Firefox 9

People

(Reporter: gjimenez, Assigned: sriram)

References

Details

(Keywords: verified-beta)

Attachments

(2 files, 3 obsolete files)

Hi Mark, 

Just a follow up from our conversation last week, can we have a lightbox in the next beta build to promote Firefox Aurora. 

We are working with the creative team on the copy and design mock-up.

Since this is going to be built in the product, can you please least me know when is the absolute latest we need to have the assets by?

Thanks!
Depends on: 676050
Depends on: 676065
About timing:

August 15th is the merge date for Aurora -> Beta, and we should have any changes landed for the new Beta a few days before the merge. Technically, we'll have a few Betas during the next cycle as well.

What we need:

* Create a PSD/PNG of the lightbox content
* Get Madhava and UX to approve the concept and content
* Dev will convert the image of the content to CSS/Text/Image based content
* Dev will land the feature in Aurora (or Beta if it takes longer than Aug 15th)

How does that sound?
Status: NEW → ASSIGNED
Hey all,

Per Finkle's suggestion, instead of a having the lightbox pop-up in the first run, let's have it run the 2nd time the user opens up Beta. This will give the user a chance to get the hang of things before having to decide to go Aurora. 

Madhava - what do you think about the design? Please refer to Bug 676065

Pending UX approval, we have all the assets needed and can push to implementation. 

Thanks everyone!
Mark - re: second time the user opens the Beta -- can we do this the second time they actually mean to launch it, vs. the browser getting brought up just because the OS killed it earlier?

The pop-up itself looks great! Nice work over in bug 676065. Tapping anywhere outside the lightbox should dismiss it, in addition to the X in the upper right-hand corner.
(In reply to Madhava Enros [:madhava] from comment #3)
> Mark - re: second time the user opens the Beta -- can we do this the second
> time they actually mean to launch it, vs. the browser getting brought up
> just because the OS killed it earlier?

I don't know yet. It's hard to track that. Given the OS killing behavior, I think the 2nd "startup" might be too soon. There is no harm in making it 4th or 5th. That could easily happen by the second day after a user has installed Firefox.

In any case, we need to get the popup converted to HTML first
is this going to happen in time for the merge?
Assignee: mark.finkle → lucasr.at.mozilla
Assignee: lucasr.at.mozilla → sramasubramanian
Attached patch WIP Patch (obsolete) — Splinter Review
This has been tested on desktop build and a tablet.
Still pending to be tested on a mobile.

The channel name is not compared for now - for easy testing purposes.
Attachment #556102 - Flags: review?(mark.finkle)
Comment on attachment 556102 [details] [diff] [review]
WIP Patch

>diff --git a/mobile/chrome/content/aboutHome.xhtml b/mobile/chrome/content/aboutHome.xhtml

* Looks like you are using TABs here. We use 2-spaces for indents (fix the HTML and the JS)
* For localization, we need to use DTDs and entites for all strings.You'll find the DTD file here:
  http://mxr.mozilla.org/mozilla-central/source/mobile/locales/en-US/chrome/aboutHome.dtd
* The alt= for the close button is good for accessibility, but drop the alt= for the logo

>+   function initLightbox() {

>+   	 // for testing purposes, the following if is commented.
>+   	 // actual patch will have the actual "channel" name.
>+   	 //if(channel == "beta") {
>+   	 if(loadingCount == 5) {

When the time comes, I assume we could use 

   	 //if (channel == "beta" && loadingCount == 5) {

Note, we use | if ( | not | if( |   (space between the 'if' and the '(')

>+         BrowserUI.newTab("http://www.mozilla.org/en-US/firefox/channel/", owner);

We typically put URLs in prefs so we can change them easily. See how we use openLink() in the file. A good pref name would be "app.channelURL"

>+     lbox.style.display = 'block';

use "

>+   	 lbox.style.display = 'none';

use "

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

>+    try {
>+      let loadingCount = Services.prefs.getIntPref("browser.loadingCount");
>+      if(loadingCount != 6)
>+        Services.prefs.setIntPref("browser.loadingCount", ++loadingCount);
>+    } catch(e) {
>+      Services.prefs.setIntPref("browser.loadingCount", 1);
>+    }

Let's call this "browser.startup.count:

>diff --git a/mobile/themes/core/aboutHome.css b/mobile/themes/core/aboutHome.css

>+/* Lightbox for Aurora */
>+#lightbox {
>+	position: fixed;
>+	width: 100%;
>+	height: 100%;
>+	top: 0px;
>+	left: 0px;
>+	display: none;
>+}

Using TABs in here too

>diff --git a/mobile/themes/core/gingerbread/images/aurora-lightbox-bg.jpg b/mobile/themes/core/gingerbread/images/aurora-lightbox-bg.jpg
>diff --git a/mobile/themes/core/gingerbread/images/aurora-lightbox-close.png b/mobile/themes/core/gingerbread/images/aurora-lightbox-close.png
>diff --git a/mobile/themes/core/gingerbread/images/aurora-lightbox-logo.png b/mobile/themes/core/gingerbread/images/aurora-lightbox-logo.png

>diff --git a/mobile/themes/core/honeycomb/images/aurora-lightbox-bg.jpg b/mobile/themes/core/honeycomb/images/aurora-lightbox-bg.jpg
>diff --git a/mobile/themes/core/honeycomb/images/aurora-lightbox-close.png b/mobile/themes/core/honeycomb/images/aurora-lightbox-close.png
>diff --git a/mobile/themes/core/honeycomb/images/aurora-lightbox-logo.png b/mobile/themes/core/honeycomb/images/aurora-lightbox-logo.png

>diff --git a/mobile/themes/core/images/aurora-lightbox-bg.jpg b/mobile/themes/core/images/aurora-lightbox-bg.jpg
>diff --git a/mobile/themes/core/images/aurora-lightbox-close.png b/mobile/themes/core/images/aurora-lightbox-close.png
>diff --git a/mobile/themes/core/images/aurora-lightbox-logo.png b/mobile/themes/core/images/aurora-lightbox-logo.png

you only need to add these to HG once, in mobile/themes/core/images
the jar.mn will copy the images for use in gingerbread and honeycomb
Attachment #556102 - Flags: review?(mark.finkle)
Attachment #556102 - Flags: review-
Attachment #556102 - Flags: feedback+
Attached patch WIP Patch 2 (obsolete) — Splinter Review
Made the changes as per the review comments.

Things that need to be perfected still:
1. Adding the condition "channel == beta".
2. Moving the incrementing code to Feedback add-on instead of browser.js.
Attachment #556102 - Attachment is obsolete: true
Attachment #557265 - Flags: review?(mark.finkle)
A final screenshot of the lightbox.
Comment on attachment 557265 [details] [diff] [review]
WIP Patch 2

>diff --git a/mobile/app/mobile.js b/mobile/app/mobile.js

>+pref("app.channelURL", "http://www.mozilla.org/%LOCALE%/firefox/channel/");

>diff --git a/mobile/chrome/content/aboutHome.xhtml b/mobile/chrome/content/aboutHome.xhtml

>+          <div id="lightbox-button">
>+            <p class="title">&aboutHome.dwldAurora;</p>

aboutHome.downloadAurora

>+   function initLightbox() {

>+     let formatter = Cc["@mozilla.org/toolkit/URLFormatterService;1"].getService(Ci.nsIURLFormatter);
>+     let linkUrl = formatter.formatURLPref("app.channelURL");

Move this to inside the click handler for the "lightbox-link"

>+     // for testing purposes, the following if is commented.
>+     // actual patch will have the actual "channel" name.
>+     // if (channel == "beta") {
>+     if (startupCount == 5) {

Change the patch to use the right check here. We can set the channel using about:config to test

>+       setTimeout(function() {
>+         document.getElementById("lightbox").style.display = "block";
>+       }, 300);
>+     }

Add a comment above the setTimeout saying we are giving the page a chance to finish any transitions before displaying the lightbox

>diff --git a/mobile/locales/en-US/chrome/aboutHome.dtd b/mobile/locales/en-US/chrome/aboutHome.dtd

>+<!ENTITY aboutHome.dwldAurora                   "Download Aurora">
>+<!ENTITY aboutHome.forAndroid                   "for Android">

Let's add a localization note above each of these. Use the form:

# LOCALIZATION NOTE (aboutHome.downloadAurora): First line of a multi-line button. Treat as a title
<!ENTITY aboutHome.downloadAurora               "Download Aurora">
# LOCALIZATION NOTE (aboutHome.forAndroid): Second line of a multi-line button. Treat as a subtitle
<!ENTITY aboutHome.forAndroid                   "for Android">

(we do this so the context is better conveyed to the localizers)

r-, but this is really close. I don't have an easy plan for migrating this code to the feedback add-on. It will take some add-on patterns to make it work. Like waiting for the about:home page to load and injecting the HTML, JS and CSS into the page.

Let's just make these tweaks for now and think about the migration.
Attachment #557265 - Flags: review?(mark.finkle) → review-
Slight copy edit: (Matej please feel free to weigh in)

Can we add a short disclaimer on top of the button that says something along the lines of "Not for the faint of heart"?  Want to make apparent the expectation that it's an even more experimental version.

This copy would be in much smaller text, and possibly would need the download button slightly smaller to accommodate.
(In reply to Jaclyn Fu from comment #11)
> Slight copy edit: (Matej please feel free to weigh in)
> 
> Can we add a short disclaimer on top of the button that says something along
> the lines of "Not for the faint of heart"?  Want to make apparent the
> expectation that it's an even more experimental version.

Personally, I don't think we should add this text. The web page can add all the extra warnings. Remember, this button does not install Firefox Aurora. It only opens a webpage (http://mozilla.org/en-US/firefox/channel/) with more information and install buttons.
Attached patch Patch (obsolete) — Splinter Review
Made the required changes as per previous review.
Attachment #557265 - Attachment is obsolete: true
Attachment #557377 - Flags: review?(mark.finkle)
(In reply to Mark Finkle (:mfinkle) from comment #12)
> (In reply to Jaclyn Fu from comment #11)
> > Slight copy edit: (Matej please feel free to weigh in)
> > 
> > Can we add a short disclaimer on top of the button that says something along
> > the lines of "Not for the faint of heart"?  Want to make apparent the
> > expectation that it's an even more experimental version.
> 
> Personally, I don't think we should add this text. The web page can add all
> the extra warnings. Remember, this button does not install Firefox Aurora.
> It only opens a webpage (http://mozilla.org/en-US/firefox/channel/) with
> more information and install buttons.

I agree. If we can live without it, that would be my preference as well. It's already quite a bit of copy for a short space.

I think we could cut the blurb down a tiny bit as well:

"Try Aurora and help shape the future of Firefox."

No need to repeat Firefox again in front of Aurora there.
Ok let's just leave as is, thanks!
Comment on attachment 557377 [details] [diff] [review]
Patch

This looks very good and all I want to do is change the preference we use to track startups.

"browser.startup.count" is a great preference name for a something that really tracks the number of startups. Unfortunately, this preference stops at 6.

Let's do 2 things:
* Rename the preference "app.promo.aurora" but use it the same way.
* Move the code to increment the preference into aboutHome.xhtml:initLightbox. That keeps the promo code all in one place, making it easy to remove someday.
Attachment #557377 - Flags: review?(mark.finkle) → review-
Attached patch PatchSplinter Review
Comment on attachment 558540 [details] [diff] [review]
Patch

Patch with required changes to preference name and moving the incrementing to aboutHome.xhtml
Attachment #558540 - Flags: review?(mark.finkle)
Attachment #558540 - Flags: review?(mark.finkle) → review+
Attachment #557377 - Attachment is obsolete: true
Is it possible to test this on a nightly?
(In reply to flod (Francesco Lodolo) from comment #20)
> Is it possible to test this on a nightly?

You should be able to set "app.update.channel" = "beta" and "app.promo.aurora" = 5

Then, view about:home

You only get one shot. To reset it, just change "app.promo.aurora" back to 5
(In reply to Mark Finkle (:mfinkle) from comment #19)
> http://hg.mozilla.org/integration/mozilla-inbound/rev/c1afecb67d8f

and now on m-c.
Status: ASSIGNED → RESOLVED
Closed: 8 years ago
Resolution: --- → FIXED
OS: Mac OS X → All
Hardware: x86 → All
Target Milestone: --- → Firefox 9
Depends on: 693362
Verified this on latest Aurora and Nightly:(HTC Desire Z - Android 2.3)
Build ID: Mozilla/5.0 (Android; Linux armv7l; rv:9.0a2) Gecko/20111009 Firefox/9.0a2 Fennec/9.0a2

Build ID: Mozilla/5.0 (Android; Linux armv7l; rv:10.0a1) Gecko/20111011 Firefox/10.0a1 Fennec/10.0a1

Set in about:config  "app.update.channel" = "beta", and launch application 5 times. On the fifth launch the Lightbox promo for Firefox Aurora is displayed.
Status: RESOLVED → VERIFIED
Depends on: 693639
Depends on: 697827
You need to log in before you can comment on or make changes to this bug.