Note: a very basic overrides collector, click value/"user_pref" to toggle.
You can also edit box 2 above, and don't forget to save what you do.

Please add user.js content under [Menu]>[Actions], then use [View], [Table View], or [Compare].
× [Actions] (Firefox user.js view, compare and more) ([X] closes)
(Please see "Hints" below, scroll down)

Box 1  
▢ro





Template eg arkenfox



Hints:





× [Groups] (copy/paste into about:config search box) ([X] closes)
(these links: right click, a, hold Ctrl: T, V, Enter, V)
(if bookmarked: right click, c, left click, Ctrl+V)

Please add user.js content under [Menu]>[Actions], then use [View], [Table View], or [Compare].





× [about:config Functions] ([X] closes)









× [Help/Info] (userjs-tool.html) ([X] closes)

Hi! This requires JavaScript for dynamically rendering the HTML interface, interactions and calculations.

If you see this message perhaps JavaScript is off, or controlled by an extension such as: uBlock Origin, uMatrix, NoScript.


Interactive view, compare, and more for Firefox user.js (eg arkenfox user.js).

Version   : 2021.03.11 (alpha/experimental)
Project   : firefox-user.js-tool (GitHub) (updates/issues/etc)
File      : userjs-tool.html (GitHub)
On-line   : userjs-tool.html (GitHub Pages)
License   : MIT License (GitHub)
Disclaimer: Use with care at your own risk, and verify any results

This is a single .html file (HTML/CSS/JavaScript) with no external dependency. Open on-line or save for off-line use.



Introduction

Display a Mozilla Firefox user.js settings file contents in your Firefox browser, with:

  • highlighting, links, themes*, re-size, wrap, about:config links/regex/groups

  • expanding sections, and index to go to sections (with compatible user.js projects)

  • compare preferences in two user.js, in a table format with order/layout options and bold cell border around differences

  • actions including: user-overrides.js* append* (with comment-out*), point and click overrides collector, skeleton, prefs.js cleaner*, group by values

  • load/save, drag/drop, or copy/paste user.js files (can load from some on-line URLs too)

  • functions for find (filter/list)/reset/set on about:config Web Console (Firefox/forks/Thunderbird/SeaMonkey)

  • single .html file (HTML/CSS/JavaScript) with no external dependency

  • open userjs-tool.html on-line or save for off-line use

(*arkenfox user.js 💎 inspired, see "Acknowledgments" section below.  Please visit them and read their wiki/info, they have nice scripts for append/clean/troubleshoot.)

This started as an over the top experiment for learning some HTML/CSS/JavaScript (first released 2019.01.02, compare added 2020.02.22).
This is a viewer/tool, and not an editor/installer.



user.js (and user-overrides.js)

A user.js file can be used by Mozilla Firefox (some forks and Thunderbird) for configuration.  It allows you to enforce preference settings (user_pref) on browser start up.  These are the settings accessed when you type 'about:config' into the URL address box.  (See: mozillaZine User.js file and arkenfox user.js wiki)

The user.js file needs to be placed in your Firefox profile folder, type 'about:profiles' into the URL address box to help find this.  Make a backup copy of your Firefox profile folder.

Various online sites provide details of user_pref settings.  Some projects (ie arkenfox user.js) publish their user.js template, with instructions and information/wiki.  These projects may update their content regularly, keep your user.js up to date, settings may also change with each Firefox version.

A user-overrides.js file is not used directly by Firefox, it is a arkenfox user.js idea, please read about this at the wiki link given above.  Basically, you take a projects user.js template, and append your user-overrides.js onto it, to form your user.js.  The user-overrides.js file contains your personal user_pref settings including any differences you require.  (user-template.js + user-overrides.js = user.js)

There is no user.js content distributed with this HTML file, user.js templates can be obtained from third party sources and are subject to their license.  If this HTML file contains any user.js code then it has been added at a later stage by another party or end user, or it has been auto loaded using URL parameter options.



Loading content

Load user.js content into the text boxes by:

PASTE (directly into the text box)

Paste the content into the text boxes under [Menu]>[Actions].  Open the user.js first in a text editor or in a browser tab to copy it.  A link for arkenfox user.js is provided under [Menu]>[Links].

The links shown above the text input boxes can also be used to open files in a browser tab for copy/paste.

Those links are to files in a folder that is either, in the same location as you placed the userjs-tool.html file, or in the location specified by the folder= URL parameter (see Initial states).

[Load] (local file or from URL)

Use the [Menu]>[Actions]>[Load] buttons to open the browser file selection dialog for local files, or load a file from a URL (input/pick).

With local files, select a single local .js file to load into the current text box, or select multiple files for loading into Boxes 1/2/3/4 (tries to match file names to the boxes).  (You can drag files into the file selector to display that file location.)  (You can also use the local links shown above the text input boxes. Right click and "Copy Link Location", then when the file selector is open press Ctrl-V (paste) and the selector will display that file location.  Those links are to files in a folder that is either, in the same location as you placed the userjs-tool.html file, or in the location specified by the folder= URL parameter (see Initial states).)

When loading from a URL, if you use extensions that control fetch/XMLHttpRequest you might have to allow the connection (eg uMatrix XHR).  Some sites may not allow file fetch, visit the URL and copy/paste instead.

DRAG (and drop into the text box)

Single file into the box, or multiple files are matched by name to load into the other boxes.

AUTO (load file from a URL)

Automatic load of file from a URL, specified with combinations of URL variables (see "Initial states" below, eg ?expand=true&action=view1&load1=URL).

When loading from a URL, if you use extensions that control fetch/XMLHttpRequest you might have to allow the connection (eg uMatrix XHR).  Some sites may not allow file fetch, visit the site and copy/paste instead.

(Default browser security prevents loading same origin local files (file://...) with this method, and changing the "security.fileuri.strict_origin_policy" preference to false is not recommended as it relaxes more than just this.)

EMBED (not recommended, will need maintaining)

Edit this HTML file and paste "base64 encoded user.js" data within the <body> section (near the end).  It will be decoded and displayed on opening.  See the [Menu]>[Actions]>[Encode] option.



Theme

This is not syntax highlighting, just simple highlighting.  Inactive user_pref (those within comments) have the same highlighting style as active user_pref.

[Menu]>"View+ style on view" is on by default, this shows in-block comments as in-line comments, if you set this off some inactive user_pref will have '//' preceding them, others within '/* */' comment blocks (which may be multi-line) will have no style indicating they are inactive.

Some arkenfox user.js sections (such as: RFP ALTERNATIVES, and DEPRECATED/ESR) use comment blocks, a text editor (such as Kate, Notepad++, or Meld diff tool) would grey out everything in those commented sections, this viewer does not.

Opens using default theme, unless the theme to use is specified with URL variables (see "Initial states" below).  If you want to override the default theme with your own colors, or to add more custom color themes, save and edit the optional "userjs-tool-themes.css" file in the same location as userjs-tool.html.



about:config links and [Groups] (search/regex/Web Console)

Due to Firefox security, about:config links will not open when clicked, either:

(Firefox v71+ paste link into about:config's search box)

The Firefox about:config page changed from Desktop version 71 and "about:config?filter=" style search links are deprecated, they still open the "about:config" page, and you can then paste the unedited link into the about:config search box (because the links here are styled to work).

COPY (into URL address box)

Right click the link and "Copy link location", "Paste and go" into the URL address box of a new tab.  (On Android long press the link to see the copy link option, but if on newer Android Firefox the copy option is not shown on long press you will have to try the PREFIX method shown below) (on Android the link works in the URL box or in the about:config search box).

(links FF71+ too: right click, a, hold Ctrl: T, V, Enter, V)

OPEN (in new tab via right click)

Right click the link and "Open Link in New Tab", change to tab, click in URL address box and press enter to load. (This may not work in some browser versions).

PREFIX (menu option/about:blank#)

Use the [Menu]>"Prefix about:config" option to prefix about:config links with "about:blank#", just to make them clickable, then you must remove that prefix in the URL box.  If the link only opens about:config without filtering (such as on newer Firefox 71+) then copy and paste the link into the about:config search box

BOOKMARKING (not recommended: they get out dated)

The links will open from bookmarks, mass import them by:
  • when viewing the user.js use the browser's "Save Page As..." (Ctrl+S) to save a HTML file (remove it afterwards)
  • go into the browser's "Library", "Bookmarks", "Show All Bookmarks" (Ctrl+Shift+B or Ctrl+Shift+O)
  • consider using bookmarks "Backup..." as a precaution
  • use "Import Bookmarks from HTML..." (may be slow)
  • keep them up to date (remove/replace)

(bookmarks FF71+ too: right click, c, left click, Ctrl+V)

FUNCTION ("Web Console" regular expressions)

You can use the regular expressions from the links with JavaScript functions to access preferences, copy/paste/edit or:
  • Use the [Menu]>"Function about:config link" option to style the about:config links as "about:blank#ujtFindPref({style:3,name:REGEX});"
  • When on the about:config page open Firefox "Web Console" (Ctrl+Shift+K)
  • Paste your function into the Web Console, eg for find (filter/list) user preferences see the [Menu]>[Actions]>[a:c Functions] button for "ujtFindPref".
  • Or input JavaScript to create a call to another function, eg: var ujtFindPref = function(options) { anotherFunction(options["name"]); };
  • Copy/paste the link to use into the Web Console, you must remove the "about:blank#" prefix.

The [Groups] button provides links for accessing batches of preferences in about:config (to display multiple different preferences), the groups are based on the user.js sections.  Useful when reviewing, troubleshooting, temporary changes, manual tweaks on Android, etc.

When using about:config some preferences are hidden, and will only show up if they have been created/user set.  Also, if you change any settings through about:config which are active in your user.js, they will change back to the user.js value on browser restart.



Initial states (and URL parameter variable options)

Some initial states can be set with (one or more) URL parameter variables:

PATH/userjs-tool.html?option=value&option=value...

  • size=80  (font size percent, default: 100, Android: 150)
  • wrap=true  (line wrap)
  • expand=true  (Expand all sections on View)
  • viewplus=false  (comments shown in-line etc, default: true)
  • groups=true  *(display [Groups] upon view)
  • prefix=true  (prefixed about:config links: about:blank#)
  • prefix=function  (about:config links to function link)
  • theme=default  (default|dark|light|mono|inverse|none|...)
  • folder=file:///PATH  (location for the local file links (shown above the input boxes), default: same folder as userjs-tool.html)
  • box=a  (open to [Actions] box 0(none)|1|2|3|4|a(all)|v(vertical)
  • loadX=URL  (auto-load file from URL into box number X)
  • loadX=data:text/plain;base64,bm90IHByaXZhdGU=  (load non-private text)
  • action=ACTION  show functions|links|help (eg ACTION=functions)
  • action=ACTION  (when loadX=URL used), ACTION:
    viewX  (view box number 0(none)|1|2|3|4)
    tableX  (table view (arkenfox user.js) of box number 1|2|3|4)
    groupsX  (show [Groups] for box number 1|2|3|4)
    compare:X:Y  (compare box numbers 1|2|3|4 and 1|2|3|4)
    compare:X:Y:show  (show: groupx6|groupx12|multiple|az|unsorted|diffstring)
    compare:X:Y:show:layout  (layout: 5column|3column|2column)
    append,skeleton,collect,reduce,clean,byvalue,togroup
  • jump=TEXT  (expand/focus first section containing TEXT with auto-load)
  • a  (auto-load arkenfox user.js)
  • av  (auto-load arkenfox user.js and view)
  • at  (auto-load arkenfox user.js and table view)

Examples
  • https://icpantsparti.github.io/firefox-user.js-tool/userjs-tool.html
  • file:///C:/Users/USERNAME/Downloads/userjs-tool.html
  • file:///home/USERNAME/Downloads/userjs-tool.html
  • ?box=a&expand=true
  • ?theme=light&size=150
  • ?folder=file:///C:/Users/USERNAME/AppData/Roaming/Mozilla/Firefox/Profiles/XXXXXXXX.default-release
  • ?folder=file:///home/USERNAME/.mozilla/firefox/XXXXXXXX.default-release
  • ?av or ?action=view1&box=a&load1=https://raw.githubusercontent.com/arkenfox/user.js/master/user.js
  • ?at or ?action=table1&box=a&load1=https://raw.githubusercontent.com/arkenfox/user.js/master/user.js
  • ?action=compare:1:4&box=a&load1=https://raw.githubusercontent.com/arkenfox/user.js/master/user.js&load4=https://raw.githubusercontent.com/arkenfox/user.js/72.0/user.js



Acknowledgments

Input box buttons on [Menu]>[Actions]

Closing or refreshing the browser tab will lose any content added into the [Action] text boxes.

These buttons are on the left of each text input box:

  • ▣ro Indicates the box is readonly, click to toggle.

  • [View] the user.js (that you pasted/loaded into the text box) with some nice HTML formatting.  [Menu]>"View+ style on view" is on by default, this shows in-block comments as in-line comments, to make inactive user_pref within /*multi-line commented*/ sections show prefixed with //, and with arkenfox/user.js this also adds some extra line spacing.  If you toggle [Menu]>"View+ style on view" it is effective on the next use of a [View] button.

  • [Table View] for viewing the user.js in a table format.  Shows the user.js (that you pasted/loaded into a text box) with some nice HTML formatting. Mainly for arkenfox/user.js.

  • [▾Load/Save] Load file(s) into the box(es) (eg user.js, user-overrides.js).  Opens the browser file selection dialog.  Select a single local .js file to load into the current text box, or multiple file selections for loading into the corresponding text boxes. (Also see Loading content info above)

    Save the box contents as a file (Desktop Firefox allows you to choose the location and file name).

  • [Select] highlight all text in the box.

  • [Clear] the text in the box (and switch readonly off).



Actions buttons on [Menu]>[Actions]

These action buttons are below the text input boxes.  The numbers on the buttons indicate the input>output boxes, contents of the output box are usually replaced, [Collect] amends the output box.

[▾Compare]

Display a table highlighting the user_pref differences between two boxes and show a summary, output into the view area.  If a user_pref appears twice the most recent active value takes priority, and is shown in the table.  You might also want to see this PowerShell alternative: https://github.com/claustromaniac/Compare-UserJS 😺.

Display options:

  • [Group x6] (by value/state)
  • [Group x12] (by value/state/active/inactive)
  • [Multiple] (by multiple occurrence/alphabetical)
  • [A-Z] (by alphabetical)
  • [Unsorted] (by order found)
  • [DiffStr] (string difference)
      (Uses an embedded 3rd party library, see Help/Acknowledgments)
      (It is better to use file comparison software, eg meld)
  • [Layout] (change table between 5columnx1row 3columnx2row 2columnx2row)

[Append 1+2>3]

Take the user-template.js (eg arkenfox/user.js) (from Box 1) and append your user-overrides.js (from Box 2), place the result into Box 3.

This will also process any lines from Box 2 of the format: //// --- comment-out --- 'prefname.goes.here' as they occur, ie any user_pref with that name in the output so far will be "inactivated", commented out with "////COMMENT-OUT:".  Care: if you comment out prefs you may also have to manually reset their value in about:config.

If your user-overrides.js contains a line that reads: //// --- add-override-comment --- then the tag "////OVERRIDE:" will be placed in front of any overridden user_pref in the user.js output.

"////COMMENT-OUT:" and "////OVERRIDE:" tags are displayed inverted when using the viewer so they stand out.

Note: any in-block/multi-line comments (/*...*/) in the user-overrides.js are recognized, user_pref within those comments are inactive, and appear in the appended user-overrides.js part of the output as in-line comments (//).

[Collect 1>+2]

Helps to create a user-overrides.js, by allowing point/click/edit collection of user_pref. (Note: this is very basic)

It first takes you into the usual viewing of Box 1 content, with the added ability to:

click on the word "user_pref" (to toggle collection of either //// --- comment-out --- 'prefname.goes.here' or of an active user_pref) (note: comment-out is a reminder to prompt you to make sure that pref gets inactivated in your user.js)

click on the user_pref "value" (to collect the user_pref with a new value, toggles boolean, input box for integer/string).

This does not change Box 1 content, the 'amendments' are just collected in Box 2.

The "Actions" panel is displayed with reduced size for viewing of Box 2 changes, press the yellow [End Collect] button when you have finished (shown next to [Overrides] box only during collect, scroll the actions panel or click [<Back] if it is out of view).

Box 2 [Select] button becomes [Select+], and the first instance of the pref name toggled is selected, if you wish to select all click elsewhere in the box and click the select button again.

[Skeleton 1>2]

Create a skeleton for a user-overrides.js.  Reduce the user-template.js (from Box 1) to headings and commented user_pref, place the result into Box 2.

[Reduce 1>4]

Reduce the user-template.js (from Box 1) to headings and user_pref lines only, place the result into Box 4.

[Clean 4-3>4]

Remove user_pref from prefs.js in Box 4, based on the active and inactive user_pref from user.js in Box 3.

Use with care, this might clean more (or even less) than you expect.  Do not replace your prefs.js while Firefox is running, and rename the old file as a backup.

The arkenfox/user.js pref cleaner scripts are a better way to do this, read at the arkenfox/user.js/wiki, note the pros/cons.

[By Value 3>4]

Take the user.js from box 3 and arrange the user_pref by values, output into box 4.  This shows the user_pref ordered by active/inactive: false, true, 0, 1, 2, other integer, empty string, other string.

Any re-occurring user_pref in the user.js will only show once with most recent active value priority.

This is mainly intended as an aid if manually reviewing user.js settings on Android Firefox (although you may be able to inject user.js to Android via PC (about:debugging) see the [Menu]>[Actions]>[a:c Functions] button and the arkenfox/user.js/wiki).

The idea is that you can use the about:config?filter= links under [Groups] to bulk display user_pref that require a similar value, these links can be long pressed to copy and then pasted in the about:config search.   Remember that hidden preferences will only show if they have been user created.

[To Group 4>4]

Convert a list of user preferences in Box 4 to an about:config?filter= group, place output into Box 4.  If you have a bunch of favorite preferences, place the list into Box 4 and turn them into an about:config link that displays that group of preferences.  The list can be newline, space, comma, or other separated.

[▾Encode 4>4]

Various encode/decode options (eg Base64, URI), performed on the contents of Box 4 (input/output on Box 4).  Encode to multi line Base64 if you are going to save user.js data into the section (near the end) of this HTML file, because you want it to display when this HTML is opened. (Not recommended, as needs constant maintaining, better to just [Load]/paste fresh content).

[a:c Functions]

Show JavaScript functions for Mozilla Firefox/Thunderbird about:config, and information on how to use them.  To find (filter/list)/reset/set user preferences and values.  Use [Menu]>[Actions], or [<Back] button to return.

[Links]

Display some useful links (arkenfox/user.js, profile locations).  The button takes you to [Menu]>[Links].  Use [Menu]>[Actions], or [<Back] button to return.