1064867 - Light-weight theme for 'Firefox Privacy Coach'

Status: RESOLVED FIXED

(Firefox for Android Graveyard :: General, defect)

Description

[Karen Rudnitski [:kar]]

Anthony - can you design a light-weight theme (using current theme parameters) for Firefox Confidential? Extending beyond a light-weight theme will be logged in another bug.

Comment 1

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Thanks for the NI on this - will take a look at something simple for 33.

Comment 2

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Just to clarify, are we talking about a simple theme just like these ones? (i.e. we only need an image + a "footer image")

https://addons.mozilla.org/en-US/firefox/user/Antlam/themes

Comment 3

[:Margaret Leibovic]

(In reply to Anthony Lam (:antlam) from comment #2)
> Just to clarify, are we talking about a simple theme just like these ones?
> (i.e. we only need an image + a "footer image")
> 
> https://addons.mozilla.org/en-US/firefox/user/Antlam/themes

Yup. I don't think we even need a footer image for Fennec, unless that's required to upload one to AMO.

Comment 4

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

Updating the assets on my "13fox" theme to play better on mobile. Try it out on mobile to see what you guys think. The color palette (as some of you may recognize) comes from the full on, heavy weight, UI overhaul, "blackfox" theme I drew up originally. 

https://addons.mozilla.org/en-US/firefox/addon/13fox/

Would this be enough for the scope of this bug? I feel like this is a good start.

Comment 5

[Frederik Braun [:freddy]]

Attachment: Selection_032.png

It seems the 13fox theme doesn't play perfectly well with some top add-ons like ABP: The down-button for a sub menu isn't visible anymore, see screenshot attached (it might need zooming in to see).

What can we do about this?

Comment 6

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Frederik Braun [:freddyb] from comment #5)
> Created attachment 8497400 [details]
> Selection_032.png
> 
> It seems the 13fox theme doesn't play perfectly well with some top add-ons
> like ABP: The down-button for a sub menu isn't visible anymore, see
> screenshot attached (it might need zooming in to see).
> 
> What can we do about this?

Hmm.. I see what you're saying. We could try a grey that's less dark but from what I know we try to consider dark themes when we design for this type of function. 

Is this desktop that you're testing this on?

Comment 7

[Frederik Braun [:freddy]]

Yes, this is Nightly on desktop, ubuntu 14.04 linux 64bit (most recent version).

Comment 8

[Robin Andersen [:tecgirl]]

It looks like the theme adds a stroke around the FF icons (albeit a bit thick), I wonder if there's a way to force it on the Add-on icons so they pop?

Comment 9

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

(In reply to Robin Andersen [:tecgirl] from comment #8)
> It looks like the theme adds a stroke around the FF icons (albeit a bit
> thick), I wonder if there's a way to force it on the Add-on icons so they
> pop?

It's not really worth comparing Desktop theme add-ons and Fennec themes. Desktop add-ons can change icons, colors and many other things. Not possible in Fennec.

Lightweight themes in Fennec are simply:
1. 3000px x 200px header image: displayed top/right aligned in the browser toolbar and tabs tray
2. 3000px x 100px footer image: unused
3. accent/background color: used to determine if the theme image is mostly dark or mostly light
4. text color: unused

Fennec uses #3 to determine which set of light/dark images should be used in the application. It's not perfect.

Comment 10

[:Margaret Leibovic]

I'll look into the technical bit of how to get the add-on to install a lightweight theme.

Comment 11

[:Margaret Leibovic]

Attachment: Nightly with 13fox

It's not really obvious that this is a lightweight theme, but maybe that's a good thing? The curve isn't visible at all, I wonder if that would confuse users.

Comment 12

[:Margaret Leibovic]

Comment on attachment 8497400 [details]
Selection_032.png

This bug is just about Firefox for android, so this desktop screenshot doesn't affect things.

Comment 13

[:Margaret Leibovic]

The theme is included in the add-on here:
https://github.com/leibovic/privacy-coach/blob/master/bootstrap.js#L65

I tried using local files, but LightweightThemeManager doesn't allow chrome:// URLs, so I would need to figure out how to add resource:// or file:// URLs in my add-on.

mfinkle, do you think it's worth pursuing that, or is it fine to just stick with https URLs?

Comment 14

[Richard Newman [:rnewman]]

https://developer.mozilla.org/en-US/docs/Chrome_Registration#resource

Might be as simple as

    resource privacy-coach content/

in your chrome.manifest.

Anything we can do to improve a user's first experience with these seems worth a few minutes of investigation, IMO.

Comment 15

[:Margaret Leibovic]

(In reply to Richard Newman [:rnewman] from comment #14)
> https://developer.mozilla.org/en-US/docs/Chrome_Registration#resource
> 
> Might be as simple as
> 
>     resource privacy-coach content/
> 
> in your chrome.manifest.
> 
> Anything we can do to improve a user's first experience with these seems
> worth a few minutes of investigation, IMO.

Ah, yeah, that's not hard to do at all :)

Unfortunately, though, it looks like we're not equipped to make lightweight themes from resource:// URIs:

W/GeckoBitmapUtils(27074): decodeUrl: malformed URL resource://privacycoach/header.png

I also tried using resolveGeckoURI to resolve a chrome URI, but of course LightweightThemeManager also doesn't like jar: URIs. 

So, given this is an add-on we intend to make compatible with Fx33, I don't think we have very many options here.

Comment 16

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

(In reply to :Margaret Leibovic from comment #15)

> Unfortunately, though, it looks like we're not equipped to make lightweight
> themes from resource:// URIs:
> 
> W/GeckoBitmapUtils(27074): decodeUrl: malformed URL
> resource://privacycoach/header.png
> 
> I also tried using resolveGeckoURI to resolve a chrome URI, but of course
> LightweightThemeManager also doesn't like jar: URIs. 

Worth filing bugs so we can work on some low priority fixes.

> So, given this is an add-on we intend to make compatible with Fx33, I don't
> think we have very many options here.

We can host the Lightweight theme on AMO (or use an existing one, like you're doing) and use the just use the HTTPS link in the add-on.

Comment 17

[:Margaret Leibovic]

(In reply to Mark Finkle (:mfinkle) from comment #16)
> (In reply to :Margaret Leibovic from comment #15)
> 
> > Unfortunately, though, it looks like we're not equipped to make lightweight
> > themes from resource:// URIs:
> > 
> > W/GeckoBitmapUtils(27074): decodeUrl: malformed URL
> > resource://privacycoach/header.png
> > 
> > I also tried using resolveGeckoURI to resolve a chrome URI, but of course
> > LightweightThemeManager also doesn't like jar: URIs. 
> 
> Worth filing bugs so we can work on some low priority fixes.

We would probably need to change LightweightThemeManager to allow jar: URIs, since I don't think our Java code would know what to do with a Gecko resource:// URI (why we use this resolveGeckoURI helper method before passing things to Java).

> > So, given this is an add-on we intend to make compatible with Fx33, I don't
> > think we have very many options here.
> 
> We can host the Lightweight theme on AMO (or use an existing one, like
> you're doing) and use the just use the HTTPS link in the add-on.

Yes, I was implying that we don't have options beyond what I'm currently doing.

You're going to need network to download the add-on, so I think it's fine to require some network to download the theme.

Marking this bug as fixed since the add-on supports a theme. We can change the theme there easily if we want to use something else instead of 13fox.

Comment 18

[Robin Andersen [:tecgirl]]

Anthony, can we get a description or change title to reflect some sort of connection to Privacy Coach or privacy for the 13fox theme? The theme will show up as its own Add-on and may confuse users if they don't read the title on the landing page.

Comment 19

[Anthony Lam (:antlam) Find me, @antlam on Slack!]

(In reply to Robin Andersen [:tecgirl] from comment #18)
> Anthony, can we get a description or change title to reflect some sort of
> connection to Privacy Coach or privacy for the 13fox theme? The theme will
> show up as its own Add-on and may confuse users if they don't read the title
> on the landing page.

Ah, gotcha. Just changed it. Not sure if Marketing or anyone would like to fill in a description as well for this but I left it blank for now.