Closed
Bug 849223
Opened 12 years ago
Closed 11 years ago
Make the CSS3 color system module customizable via mozSettings to enable gaia themes
Categories
(Firefox OS Graveyard :: General, defect)
Firefox OS Graveyard
General
Tracking
(Not tracked)
RESOLVED
FIXED
1.3 C2/1.4 S2(17jan)
People
(Reporter: vingtetun, Assigned: etienne)
References
Details
Attachments
(2 files, 4 obsolete files)
(deleted),
patch
|
vingtetun
:
review+
|
Details | Diff | Splinter Review |
(deleted),
patch
|
vingtetun
:
review+
|
Details | Diff | Splinter Review |
Right now we are pushing building blocks. The current way to do it is for people to embed the CSS in their app directly. The main issue with that beeing that if we change the color of the headers or any other part that won't be reflected and third party apps will look out of place.
This will also affects the notes app and any apps that don't belong to Gaia.
Using CSS 3 colors modules will let us abstract this and so OEM and carriers will be able to customize the default set of colors used in apps. Third party apps will be able to opt-in to it if needed and even websites. That will offer an easy way to look integrated into the system whatever default color theme it is, so the same app will look integrated in various different color theme of Firefox OS without requiring any changes.
That will also make sure people don't fork an application just to have a default color that is different than the orange one.
Reporter | ||
Comment 1•12 years ago
|
||
For example you can do: |background: menu -moz-linear-gradient(top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);| in the section[role="region"] > header:first-child of the header.css building block.
Then from user.js you can change this list of keywords: http://mxr.mozilla.org/mozilla-central/source/b2g/app/b2g.js#198
Comment 2•12 years ago
|
||
We were not using any CSS3 gradients as there was performance problems with it.
Do we solved that problems?
Thx!
Comment 3•12 years ago
|
||
So this is working like "variables" for color types?
Assignee | ||
Comment 4•12 years ago
|
||
(In reply to Ismael from comment #2)
> We were not using any CSS3 gradients as there was performance problems with
> it.
> Do we solved that problems?
>
Not that I know of.
This bug is still at the exploration stage, but we could probably use gradient images made to be layered on top of a background color.
Comment 5•12 years ago
|
||
(In reply to Etienne Segonzac (:etienne) from comment #4)
> This bug is still at the exploration stage, but we could probably use
> gradient images made to be layered on top of a background color.
Sure a semi-transparent png file will work also!
(In reply to Vivien Nicolas (:vingtetun) (:21) (away until march 25th) from comment #1)
> For example you can do: |background: menu -moz-linear-gradient(top,
> rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 100%);| in the section[role="region"] >
> header:first-child of the header.css building block.
>
>
> Then from user.js you can change this list of keywords:
> http://mxr.mozilla.org/mozilla-central/source/b2g/app/b2g.js#198
CSS2 system colors seems to be deprecated in the new CSS3 color module:
http://www.w3.org/TR/css3-color/#css2-system
Assignee | ||
Comment 6•12 years ago
|
||
With this patch we're binding the color values for those keywords:
menu
menuText
appworkspace
window
windowText
infoBackground
buttonFace
highlight
to theirs gaia.ui._keyword_ equivalent
Assignee | ||
Comment 7•12 years ago
|
||
Reporter | ||
Comment 8•12 years ago
|
||
(In reply to Etienne Segonzac (:etienne) from comment #7)
> Created attachment 726772 [details] [diff] [review]
> Gaia patch to have default values for the colors
Are you waiting for anything else before asking for a r? ?
Flags: needinfo?(etienne)
Assignee | ||
Comment 9•12 years ago
|
||
(In reply to Vivien Nicolas (:vingtetun) (:21) from comment #8)
> (In reply to Etienne Segonzac (:etienne) from comment #7)
> > Created attachment 726772 [details] [diff] [review]
> > Gaia patch to have default values for the colors
>
> Are you waiting for anything else before asking for a r? ?
It probably needs a bit of rebasing and reasonable default colors before the review :)
Flags: needinfo?(etienne)
Reporter | ||
Comment 10•12 years ago
|
||
(In reply to Etienne Segonzac (:etienne) from comment #9)
> (In reply to Vivien Nicolas (:vingtetun) (:21) from comment #8)
> > (In reply to Etienne Segonzac (:etienne) from comment #7)
> > > Created attachment 726772 [details] [diff] [review]
> > > Gaia patch to have default values for the colors
> >
> > Are you waiting for anything else before asking for a r? ?
>
> It probably needs a bit of rebasing and reasonable default colors before the
> review :)
It does not even needs any color define. Just support the definition of those colors via a pref.
Assignee | ||
Comment 11•12 years ago
|
||
(In reply to Vivien Nicolas (:vingtetun) (:21) from comment #10)
> (In reply to Etienne Segonzac (:etienne) from comment #9)
> > (In reply to Vivien Nicolas (:vingtetun) (:21) from comment #8)
> > > (In reply to Etienne Segonzac (:etienne) from comment #7)
> > > > Created attachment 726772 [details] [diff] [review]
> > > > Gaia patch to have default values for the colors
> > >
> > > Are you waiting for anything else before asking for a r? ?
> >
> > It probably needs a bit of rebasing and reasonable default colors before the
> > review :)
>
> It does not even needs any color define. Just support the definition of
> those colors via a pref.
Well when the setting binded to a pref is undefined (likely when for phones that will get this through updates) we need to have _something_ :)
Comment 12•11 years ago
|
||
This poc, made my day :)_
Really glad to see this moving forward, do you need any help guys?
Comment 13•11 years ago
|
||
You're talking about http://www.youtube.com/watch?v=Vp5nnJFtkiY ?
Comment 14•11 years ago
|
||
<3
Assignee | ||
Updated•11 years ago
|
Summary: Use CSS3 color system modules in building blocks → Make the CSS3 color system module customizable via mozSettings to enable gaia themes
Assignee | ||
Comment 15•11 years ago
|
||
Reviving this old bug.
If using the (deprecated?) system colors to theme gaia is ok, I'd like to land this and open follow up bugs to update the building blocks during the next visual refresh.
Attachment #722776 -
Attachment is obsolete: true
Attachment #726727 -
Attachment is obsolete: true
Attachment #8360492 -
Flags: review?(21)
Attachment #8360492 -
Flags: feedback?(dbaron)
Assignee | ||
Comment 16•11 years ago
|
||
Attachment #726772 -
Attachment is obsolete: true
Attachment #8360493 -
Flags: review?(21)
Reporter | ||
Comment 17•11 years ago
|
||
Comment on attachment 8360492 [details] [diff] [review]
Gecko part
Review of attachment 8360492 [details] [diff] [review]:
-----------------------------------------------------------------
r+ with the code moved to settings.js. The list of colors can probably be enhanced later.
::: b2g/chrome/content/shell.js
@@ +1211,5 @@
> + Services.prefs.setCharPref(pref, value);
> + }
> + });
> + });
> +})();
Can you move this code to b2g/chrome/content/settings.js ?
Attachment #8360492 -
Flags: review?(21) → review+
Reporter | ||
Updated•11 years ago
|
Attachment #8360493 -
Flags: review?(21) → review+
Comment 18•11 years ago
|
||
Thanks folks :)
Comment 19•11 years ago
|
||
Comment on attachment 8360492 [details] [diff] [review]
Gecko part
Why are the nsLookAndFeel.cpp changes needed?
They look wrong to me. I thought the setup was that the cross-platform code (widget/xpwidgets/nsXPLookAndFeel.cpp) has a GetColor function that will use the pref value if the pref is set, and if it isn't, will call NativeGetColor. (It uses the same cache both for the pref values and for memoized results of NativeGetColor, so it's not immediately obvious looking at the code, though.) So it seems really strange for NativeGetColor to be calling GetColor. (How does it not cause infinite recursion? Perhaps because the code is never reached because the prefs are always set?)
Otherwise this seems fine... though at that point there aren't any Gecko changes left.
Attachment #8360492 -
Flags: feedback?(dbaron) → feedback-
Assignee | ||
Comment 20•11 years ago
|
||
Quick r? because the patch changed a bit.
Now it's tiny!
Attachment #8360492 -
Attachment is obsolete: true
Attachment #8360990 -
Flags: review?(21)
Assignee | ||
Comment 21•11 years ago
|
||
(In reply to David Baron [:dbaron] (needinfo? me) (UTC-8) from comment #19)
> Comment on attachment 8360492 [details] [diff] [review]
> Gecko part
>
> Why are the nsLookAndFeel.cpp changes needed?
>
> They look wrong to me. I thought the setup was that the cross-platform code
> (widget/xpwidgets/nsXPLookAndFeel.cpp) has a GetColor function that will use
> the pref value if the pref is set, and if it isn't, will call
> NativeGetColor.
Thanks! It works perfectly, patch updated.
Reporter | ||
Comment 22•11 years ago
|
||
Comment on attachment 8360990 [details] [diff] [review]
Gecko part v2
Review of attachment 8360990 [details] [diff] [review]:
-----------------------------------------------------------------
Oh that sounds soo easy now...
Attachment #8360990 -
Flags: review?(21) → review+
Reporter | ||
Comment 23•11 years ago
|
||
Gecko part: https://hg.mozilla.org/integration/mozilla-inbound/rev/72be9c70269a
Please keep opened until the Gaia part lands.
Status: NEW → ASSIGNED
Target Milestone: --- → DeveloperPhone
Assignee | ||
Comment 24•11 years ago
|
||
The gaia part just landed here:
https://github.com/mozilla-b2g/gaia/commit/11feeea66b0d144828753874edb17453ce8f31b7
Comment 25•11 years ago
|
||
Status: ASSIGNED → RESOLVED
Closed: 11 years ago
Resolution: --- → FIXED
Target Milestone: DeveloperPhone → 1.3 C2/1.4 S2(17jan)
Reporter | ||
Updated•11 years ago
|
You need to log in
before you can comment on or make changes to this bug.
Description
•