Development

Cloning the Repository

# Move to the chrome directory within your Firefox profile
cd path_to_profile/chrome

# Clone this repository to a folder titled ShadowFox
git clone https://github.com/overdodactyl/ShadowFox ShadowFox

Modifying ShadowFox Files

ShadowFox is designed with modularity in mind. Each tweak is contained within it's own file. The basic project structure is shown below:

• userChrome-files: contains all userChrome tweaks
• userContent-files: contains all userContent tweaks
  • about_pages: files corresponding to about: about pages
  • webextension-tweaks: files corresponding to webextensions
  • webpages: files for webpages

If you are going to modify ShadowFox files, I recommend making changes to these corresponding files.

userChrome_imports.css and userContent_imports.css

Within the root directory of the repository, there exists userChrome_imports.css and userContent_imports.css.

As opposed to userChrome.css and userContent.css, these files simply contain @import statements for all the tweaks in the repository. This can therefore be used to prevent specific tweaks from being used (by deleting or commenting out the corresponding lines), or to load any changes you have made to the repository.

If you used the methods suggested above, you will want to add

@import "ShadowFox/userChrome_imports.css";

to the top of your userChrome.css file located directly in you chrome folder. Similarly,

@import "ShadowFox/userContent_imports.css"; to the top of your userContent.css file located directly in you chrome folder.

Important: A current bug in Firefox prevents the proper use of @import statements for some Linux users. If this is the case, you will have to use gulp to concatenate .css after any modifications made or to specify which tweaks are used. Please see below.

Other users may be interested in using gulp as well as having a single userChrome/Content.css file may result in a slightly faster loading time.

Using gulp

1. Install node.js

2. Clone this repository

   • git clone https://github.com/overdodactyl/ShadowFox

3. Install the Gulp CLI

   • npm install -g gulp-cli

4. Install gulp and gulp-concat-css

   • npm install --save-dev gulp gulp-concat-css

5. Run a gulp task predefined in gulpfile.js, or create your own.

   • ex: gulp userContent_all
   • The following task writes color_variables.css, all_about_pages.css and all css files in the userContent-files directory, in that order, to a file called userContent.css in the root directory.

/* Add everything to userContent */
gulp.task('userContent_all', function() {
  return gulp.src(['color_variables.css', 'userContent-files/all_about_pages.css', 'userContent-files/*/*.css'])
    .pipe(concatCss('userContent.css'))
    .pipe(gulp.dest('.'));
});