Skip to content
This repository has been archived by the owner on Oct 2, 2018. It is now read-only.

Themes #332

Open
ferndot opened this issue Nov 6, 2015 · 10 comments
Open

Themes #332

ferndot opened this issue Nov 6, 2015 · 10 comments
Labels
difficulty: moderate domain: user experience type: discussion

Comments

@ferndot
Copy link
Member

ferndot commented Nov 6, 2015

@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.
@ferndot ferndot mentioned this issue Nov 6, 2015
Merged
@Ryuno-Ki
Copy link

Ryuno-Ki commented Nov 6, 2015

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.

@Ryuno-Ki
Copy link

Hm, Maybe we could do it like Macaw (storing that information in prefs and applying ui information to it (look into the assets directory as well).

@ferndot
Copy link
Member Author

ferndot commented Nov 22, 2015

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?

@Ryuno-Ki
Copy link

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 :-)

@Ryuno-Ki
Copy link

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?

@ferndot
Copy link
Member Author

ferndot commented Nov 24, 2015

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: 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.

@Ryuno-Ki
Copy link

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?

@ferndot
Copy link
Member Author

ferndot commented Nov 25, 2015

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.

@Ryuno-Ki
Copy link

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}

@ferndot
Copy link
Member Author

ferndot commented Jan 27, 2016

@Ryuno-Ki thanks for the heads up. I have opened #350 for investigation into this issue.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
difficulty: moderate domain: user experience type: discussion
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ferndot @Ryuno-Ki