Themes
ferndot opened this issue · comments
@Ryuno-Ki suggested that we could support different themes for Firetext's styles and icons. This would offer greater accessibility options and allow users to customize their experience.
How should we approach this feature? Should we offer an online theme store? I don't think that we want to bundle them.
Thanks for opening a new ticket for it.
To me, I'd document the available classes and pick a style by assigning a class (something-theme) to body. Say, <body class="high-contrast-theme">…</body>. It's the designers obligation to wrap the rules under this "namespace".
Things to consider here:
- How to deal with naming conflicts (imagine two authors of "high-contrast-theme")
- How many
<link rel="stylesheet" href="themes/*-theme.css" />tags should be put into<head>? - How to render the picking of a given style?
There are some use cases on desktop already to inspire you.
We could indeed imitate Macaw's implementation.
How could we avoid bundling themes? We can't use remote styles because of CSP. Should we download the stylesheet contents and save them in localStorage?
I'd go for Firefox OS Add-Ons (requires Firefox OS v2.5+).
IMHO for exploration, codexa should create a separate repo first. One could git submodule them into the project …
Let's look, whether there is interest from the community :-)
Looking at the topic again without being in a hurry I want to carry out some points.
From what I have understood, CSP only affects JavaScript code. Regarding CSS I can only found inline styles (i.e. style-attribute and <style>-tags) being forbidden.
You can (partially) circumvent CORS restriction on Firefox OS by setting the mozSystem-flag (as done in SimpleRSS, Issue Tracker).
I'd prefer a review process in the beginning in order to detect XSS attempts. Hence the other repository.
I couldn't find, why adding alternate-<link>-tags shouldn't be possible. You'd need a kind of API to register a style (and list them in the theme <select>) IMHO.
One question arises in my head: Where can I find the current roadmap of Firetext? I noticed several closed issues today. Are there still plans to deliver a cross-platform experience?
We are a privileged app, so we cannot use remote stylesheets: https://developer.mozilla.org/en-US/Apps/Build/Building_apps_for_Firefox_OS/CSP#Applicable_CSP_Restrictions.
I concur about building this system in another repository. By doing so, we can test it independently and provide other developers with a theme library.
We could add alternate <link>s, but they must reference files in the app package. And IIRC we cannot programmatically modify the package. Thus, the question about storing the stylesheets in localStorage.
We don't possess a documented roadmap atm, but that is a good idea. Right now, I am running a research project to prioritize features and deduce direction. I'll present my report when it is finished :)
Until then, most of the discussion about development is happening on Gitter: 
There are still plans for a cross-platform experience. In fact, we are already delivering a desktop app through Airborn OS. The closed issues were old and don't reflect the current state of the app.
From the docs:
Remote styles are banned
All<link rel="stylesheet" href="...">tags must link to files in your app's package. Inline style tags and attributes (<style>and style="") are allowed, however, for privileged apps.
So you could fetch the stylesheet by AJAX and put the content into a style tag ;-) (And keep a copy in IndexedDB/localStorage/whatever - keep in mind, that there may be size limitations).
Can I mimick Privileged Apps in WebIDE?
Sounds good.
Can I mimick Privileged Apps in WebIDE?
I can't recall whether the simulator enforces the packaged app csp. You could try adding a csp field to manifest.webapp that contains the default privileged csp: https://developer.mozilla.org/en-US/Apps/Build/Manifest#csp.
For whatever reason I cannot launch Firetext v0.5.1 in Simulator (Timeout).
When I wait a bit longer, I can see the app, but cannot interact with files:
NS_ERROR_FILE_NOT_FOUND: modules.js:74:0
logged 1 error to Bugsense, status: {"data": {"eid": 4852208084, "handled": 0}, "error": null}