Add option to import theme from zip file

[Rob--W]

The "Share" button only supports themes without images, but as soon as an image is included, it is no longer possible to share a linlk.
The next button, "Export", does offer the ability to export the theme, but once exported it cannot be imported in Firefox Color again.

Since we now support all theme properties (#940), it should be possible to offer an Import button that is an accurate representation of the theme.

There is one thing though: a zip file with the theme exension supports arbitrary image formats (including SVG), whereas dynamic themes only support PNG and JPG due to https://bugzilla.mozilla.org/show_bug.cgi?id=1491790 .

[Rob--W]

@andreicristianpetcu Is this something that you'd be interested in working on? Fixing this would allow FirefoxColor to more easily import themes with images inside.

[andreicristianpetcu]

Sorry but I cannot. I'll focus my free time on about:logins.

[himanshujaidka]

I would like to do work on this issue

[Rob--W]

To resolve this bug, the following needs to be implemented:

1. Logic that reads a zip file (given by the user), reads the containing manifest.json and convert it to a theme object (its format is specified by https://github.com/mozilla/FirefoxColor/blob/master/docs/theme-schema.json, and examples of valid theme objects can be found at https://github.com/mozilla/FirefoxColor/tree/master/src/preset-themes ). The project already depends on the jszip library, which is currently used to generate a zip file, but it also supports reading zip files (with just a few lines of code). Most of the effort is in converting the data from manifest.json to a theme object plus importing images, if any.
2. Add a UI element (e.g. a button next to the existing Export button) to trigger the logic from step 1.

See the README to get started, by setting up a local development environment.
Let me know if you have any other specific questions.

[himanshujaidka]

when I am trying to do npm ci then my system consumes a lot of time

[Rob--W]

npm ci installs all (dev)Dependencies. It can take several minutes, longer if your internet connection is slow. Just start npm ci, take a break and get back.

[himanshujaidka]

ok thanks

[himanshujaidka]

visual studio is mandatory for local installation? @Rob--W

[himanshujaidka]

[himanshujaidka]

[himanshujaidka]

I am getting this error while installing dependencies 😥😓

[Rob--W]

I have updated the node-sass dependency, because its README claimed that Node 14+ is only supported as of node-sass version 4.14+. Could you retry?

[himanshujaidka]

yeah yeah why not sir

[himanshujaidka]

[himanshujaidka]

Another error while installing dependencies (ELIFECYCLE) @Rob--W

[Rob--W]

npm ci installs the dependencies as specified in package-lock.json. It seems that those packages (e.g. fsevents) are not compatible with your shell / platform. To have a compatible platform, enable WSL (or maybe just install git bash to have a compatible shell).

Alternatively, you could try to simply run npm i instead of npm ci. Then packages will be installed based on package.json instead of package-lock.json, and optional / incompatible dependencies will be skipped.

[himanshujaidka]

okay

[himanshujaidka]

@Rob--W it is now working

[himanshujaidka]

please review #947

[himanshujaidka]

@Rob--W

[himanshujaidka]

how to convert manifest to theme object @Rob--W, I am new to this

[andreicristianpetcu]

Change the format of the colors to be {r: 1, g: 2, b: 4 } and remove unused properties.

Here is the same theme in manifest.json and theme object.

Hope this helps. I'm no expert 😄

[andreicristianpetcu]

Make sure you don't remote manifest fields that are used in theme objects https://github.com/mozilla/FirefoxColor/tree/master/src/preset-themes

[Rob--W]

@andreicristianpetcu 's example above (#943 (comment)) looks good.

A more precise definition of the format is available in the form of JSON schemas. I linked to the schema for the Theme object in #943 (comment) .
The schema for the theme in the manifest in Firefox is here: https://searchfox.org/mozilla-central/rev/6cc48251bb97600fdf11a5b4c5f621bfc8606d55/toolkit/components/extensions/schemas/theme.json#18-43,75-88,94-337

[himanshujaidka]

@andreicristianpetcu @Rob--W ok please give me some time to understand the things

[himanshujaidka]

https://stackoverflow.com/questions/32267930/get-name-of-files-of-zip-file-in-javascript
@Rob--W will this logic help to read the zip file imported by the user?

[himanshujaidka]

@Rob--W Please take a look!

[Rob--W]

https://stackoverflow.com/questions/32267930/get-name-of-files-of-zip-file-in-javascript
@Rob--W will this logic help to read the zip file imported by the user?

This project has an existing library for working with zip files. For example, this logic in src/web/lib/export.js is responsible for exporting the theme as a zip file. To read from a zip file, read the documentation of JSZip.

PS. Please give me some time to respond. I don't always have time to respond immediately, a response time of within two business days is reasonable.

[himanshujaidka]

sorry @Rob--W

[himanshujaidka]

Is there any other platform for discussions with you ? @Rob--W

[Rob--W]

Specific questions about this issue can be asked here.

I'm also on https://chat.mozilla.org/ with the nick robwu.

[himanshujaidka]

Actually it is difficult for me to understand how to work with zip files and for this issue I have created a new import.js file and imported JSZip and further steps are quite difficult, but I want to work and also want to solve this issue 😅😅 @Rob--W and sorry that I am disturbing you very much but as a beginner, it's my duty to learn new things 😅

[himanshujaidka]

I have made a logic to read all the files inside the zip but unable to do filter manifest.json file from the files, so how could I achieve this ? I want to read only manifest file which is present inside the zip and further I will be change it to theme object @Rob--W

[Rob--W]

See #943 (comment), where I referred to documentation where this is explained.

[himanshujaidka]

okay

[cybekRT]

Is there any progress to this issue? There's no real reason to export the theme if you cannot import it in any way.