[JavaScript] General JavaScript talk and custom userChrome.js scripts - unrelated to CustomCSSforFx

[Aris-t2]

Lets discuss everything related to JavaScript here instead of opening new threads for questions or requests regarding custom js scripts.

Ways to implement custom JavaScripts through userChrome.js see method 1 and 2 from Scrollbars repository

Custom Scrollbars Restart button Restart menuitems Custom Downloads button Bookmarks backup/restore buttons Password Manager button 'Bookmarks' and 'History' sidebar buttons

Custom script collections - by ardiman - by Endor8

Note Scripts will not be integrated into CustomCSSforFx!

[garywill]

Hi Aris Could you please tell me how to prevent tab context menu? I have this code to close tab by right clicking. It works but context menu appears, which I want to prevent

gBrowser.tabContainer.addEventListener('click', function(event) {
    if (event.button != 2) return;
    if (event.target.localName == 'tab' && event.button == 2) {
        event.preventDefault();
        event.stopPropagation();
        gBrowser.removeTab(event.target, {animate: true});
    }
}); 

Much thanks

[garywill]

I figured it out

gBrowser.tabContainer.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    event.stopPropagation();

}); 

[Aris-t2]

There also exists a "removeEventListener" script to remove listeners, but your code work too. It is possible to hide tab context menu entirely, if needed:

#tabContextMenu {
  display: none !important;
} 

[Acid-Crash]

Hi @Aris-t2, I am really new to a userChrome.js Before FF57 I've used an extension to open Password manager in a pop-up. As far as I know, Web-Extensions don't have access to chrome:// pages So I wonder is it possible to create a new toolbar button for navbar that opens chrome://passwordmgr/content/passwordManager.xul ? Preferably in a pop-up window that has minimum control buttons (the one that only has app button and location bar) If it isn't possible, a regular tab will do...

[Aris-t2]

It is possible. I just wrote this script:

// 'Open Password Manager' button for Firefox 60+ by Aris

(function() {

try {
  Components.utils.import("resource:///modules/CustomizableUI.jsm");
  var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
  var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

  CustomizableUI.createWidget({
    id: "pw_manager_button", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    label: "Open Password Manager", // button title
    tooltiptext: "Open Password Manager", // tooltip title
    onClick: function(event) {

      if(event.button=='0') {
        window.open('chrome://passwordmgr/content/passwordManager.xul','', 'chrome');
      }

    },
    onCreated: function(button) {
      return button;
    }

  });

  // style button icon
  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
      #pw_manager_button .toolbarbutton-icon {\
        list-style-image: url("chrome://browser/skin/connection-secure.svg"); /* icon / path to icon */ \
        fill: red; /* icon color name/code */\
      }\
    \
  '), null, null);

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

} catch (e) {
    Components.utils.reportError(e);
};

})();

v2 - middle click on button will fill current (non-chrome) domain/host into input field

// 'Open Password Manager' button for Firefox 60+ by Aris

(function() {

try {
  Components.utils.import("resource:///modules/CustomizableUI.jsm");
  Components.utils.import("resource://gre/modules/LoginHelper.jsm");
  var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
  var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

  CustomizableUI.createWidget({
    id: "pw_manager_button", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    label: "Open Password Manager", // button title
    tooltiptext: "Open Password Manager", // tooltip title
    onClick: function(event) {

      if(event.button=='0') {
        try {
          window.open('chrome://passwordmgr/content/passwordManager.xul','', 'chrome');
        } catch (e) {}
      } else if(event.button=='1') {
        try {
          LoginHelper.openPasswordManager(window, gBrowser.currentURI.host);
        } catch (e) {}
      }

    },
    onCreated: function(button) {
      return button;
    }

  });

  // style button icon
  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
      #pw_manager_button .toolbarbutton-icon {\
        list-style-image: url("chrome://browser/skin/connection-secure.svg"); /* icon / path to icon */ \
        fill: red; /* icon color name/code */\
      }\
    \
  '), null, null);

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

} catch (e) {
    Components.utils.reportError(e);
};

})();

[Acid-Crash]

Hmm, struggling here. Right now I use so called method2 (for RestartApp menu button). https://github.com/Aris-t2/Scrollbars/tree/master/method 2/profile

To my understanding I need to create a new file in profile/userChrome/ (for example custom_PwMgr.uc.js) Copy-paste your code in it and then add to userChrome.js userChrome.import("/userChrome/custom_PwMgr.uc.js", "UChrm");

However It looks like I'm missing something, because the new button didn't show up. Also the structure of actual code is a bit different...

UPD: managed to make it working with this inside custom_PwMgr.uc.js: Is it the optimal way?

Code

```js // 'Open Password Manager' button for Firefox 60+ by Aris var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {}); var PwdmgrItems = { init: function() { try { Components.utils.import("resource:///modules/CustomizableUI.jsm"); var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {}); var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); CustomizableUI.createWidget({ id: "pw_manager_button", // button id defaultArea: CustomizableUI.AREA_NAVBAR, removable: true, label: "Open Password Manager", // button title tooltiptext: "Open Password Manager", // tooltip title onClick: function(event) { if(event.button=='0') { window.open('chrome://passwordmgr/content/passwordManager.xul','', 'chrome'); } }, onCreated: function(button) { return button; } }); // style button icon var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ #pw_manager_button .toolbarbutton-icon {\ list-style-image: url("chrome://browser/skin/connection-secure.svg"); /* icon / path to icon */ \ fill: red; /* icon color name/code */\ }\ \ '), null, null); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } catch (e) { Components.utils.reportError(e); }; } } PwdmgrItems.init(); ```

[Acid-Crash]

UPD2. Just noticed that if I open context menu on a password/login field, and then open password manager it "remembers" URL of the page. Maybe you can mimic this as well?

Screen


[Aris-t2]

@Acid-Crash

UPD: managed to make it working with this inside custom_PwMgr.uc.js: Is it the optimal way?

Yes, this was the correct way of adding custom users cripts to userChrome.js.

I have added a second script to the above post, where a middle-click on the button will "remember" current urls host/domain and add it to search field automatically similar to what context menu entry "View saved logins" does. You can adopt the script to only allow this for left-click too, if you want.

[Acid-Crash]

@Aris-t2 Simply superb! Thank you so much. You are the CSS/JS hero! Yet again!

[Pizzapops]

@Aris-t2 This is working for me too. (java-script method 2) Thanks!

I have been trying to get your Bookmarks backup/restore buttons to work but the buttons do not appear. I have tried on both FxQ62 and Nightly. I even tried with a new profile containing Chrome folder with only JS files.

I also tried without _vert_addonbar_left.uc.js_ in case there was a conflict. No luck.

[Aris-t2]

@Pizzapops Not sure what to say, Sounds like an issue with either missing or wrong files inside Firefox folder.

Here is a preconfigured Portable Firefox setup with "method 2" active and Fx62beta in use. Alternatively rename App/firefox to something and rename App/firefox60esr to App/firefox to test Fx60esr. https://www.dropbox.com/s/l8ygfn9nqmfixmr/FirefoxPortable_JS_method2.7z?dl=1

[Acid-Crash]

Hi @Aris-t2, Quick question regarding new buttons via JS. Maybe you know how to define separate locale variants for label and tooltiptext?

[Aris-t2]

You can achieve this by finding localized nodes inside the ui. Use developer tools to find navigation toolbars localized "aria-label" node and replace the variable for that case. Its a shame Mozilla removed the preference "general.useragent.locale". It would be easier to handle location variable that way.

Example based on 'restart item' script

```js // Restart item script for Firefox 60+ by Aris // // left-click on restart item: normal restart // middle-click on restart item: restart + clear caches // right-click on restart item: no special function // // based on 'addRestartButton.uc.js' script by Alice0775 // restart code from Classic Theme Restorer add-on // invalidate caches from Session Saver add-on var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {}); var RestartMenuFileAppItems = { init: function() { var button_label = "Restart"; try { switch (document.getElementById("nav-bar").getAttribute("aria-label")) { case "Navigations-Symbolleiste": button_label = "Neustarten"; break; case "Панель навигации": button_label = "Перезапустить"; break; } } catch(e) {} try { restartitem_filemenu = document.createElement("menuitem"); restartitem_filemenu.setAttribute("label", button_label); restartitem_filemenu.setAttribute("id","fileMenu-restart-item"); restartitem_filemenu.setAttribute("key", "R"); restartitem_filemenu.setAttribute("insertbefore", "menu_FileQuitItem"); restartitem_filemenu.setAttribute("onclick", "if (event.button == 0) {RestartMenuFileAppItems.restartApp(false);} else if (event.button == 1) {RestartMenuFileAppItems.restartApp(true)};"); restartitem_filemenu.setAttribute("oncommand", "RestartMenuFileAppItems.restartApp(false);"); if(document.getElementById("menu_FileQuitItem").previousSibling.id != "fileMenu-restart-item" ) document.getElementById("menu_FileQuitItem").parentNode.insertBefore(restartitem_filemenu,document.getElementById("menu_FileQuitItem")); } catch(e) {} try { restartitem_appmenu = document.createElement("toolbarbutton"); restartitem_appmenu.setAttribute("label", button_label); restartitem_appmenu.setAttribute("id","appMenu-restart-button"); restartitem_appmenu.setAttribute("class","subviewbutton subviewbutton-iconic"); restartitem_appmenu.setAttribute("key", "R"); restartitem_appmenu.setAttribute("insertbefore", "appMenu-quit-button"); restartitem_appmenu.setAttribute("onclick", "if (event.button == 0) {RestartMenuFileAppItems.restartApp(false);} else if (event.button == 1) {RestartMenuFileAppItems.restartApp(true)};"); restartitem_appmenu.setAttribute("oncommand", "RestartMenuFileAppItems.restartApp(false);"); if(document.getElementById("appMenu-quit-button").previousSibling.id != "appMenu-restart-button" ) document.getElementById("appMenu-quit-button").parentNode.insertBefore(restartitem_appmenu,document.getElementById("appMenu-quit-button")); } catch(e) {} var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); // style button icon var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ #appMenu-restart-button {\ list-style-image: url("chrome://browser/skin/reload.svg"); /* icon / path to icon */ \ }\ #appMenu-restart-button .toolbarbutton-icon {\ transform: scaleX(-1); /* icon mirroring */\ color: red; /* icon color name/code */\ }\ \ '), null, null); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); }, restartApp: function(clearcaches) { var cancelQuit = Components.classes["@mozilla.org/supports-PRBool;1"].createInstance(Components.interfaces.nsISupportsPRBool); var observerSvc = Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService); if(clearcaches) { Components.classes["@mozilla.org/xre/app-info;1"].getService(Components.interfaces.nsIXULRuntime).invalidateCachesOnRestart(); } observerSvc.notifyObservers(cancelQuit, "quit-application-requested", "restart"); if(cancelQuit.data) return false; Services.startup.quit(Services.startup.eRestart | Services.startup.eAttemptQuit); } } RestartMenuFileAppItems.init(); ```

[Acid-Crash]

Thx, I get the main idea. Could you please share additional example of any toolbar button (Restart button or Password Manager). Can't figure out where to place that lang-check if the button has both label and tooltiptext that are defined inside CustomizableUI.createWidget ?

[Aris-t2]

Example based on 'restart button' script

```js // Restart button script for Firefox 60+ by Aris // // left-click on restart button: normal restart // middle-click on restart button: restart + clear caches // right-click on restart button: no special function // // based on 'Quit' button code by 2002Andreas // restart code from Classic Theme Restorer add-on // invalidate caches from Session Saver add-on (function() { try { Components.utils.import("resource:///modules/CustomizableUI.jsm"); var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {}); var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); var button_label = "Restart"; try { switch (document.getElementById("nav-bar").getAttribute("aria-label")) { case "Navigations-Symbolleiste": button_label = "Neustarten"; break; case "Панель навигации": button_label = "Перезапустить"; break; } } catch(e) {} CustomizableUI.createWidget({ id: "uc-restart", // button id defaultArea: CustomizableUI.AREA_NAVBAR, removable: true, label: button_label, // button title tooltiptext: button_label, // tooltip title onClick: function(event) { var cancelQuit = Components.classes["@mozilla.org/supports-PRBool;1"].createInstance(Components.interfaces.nsISupportsPRBool); var observerSvc = Components.classes["@mozilla.org/observer-service;1"].getService(Components.interfaces.nsIObserverService); if(event.button=='1') { // middle-click - clear caches Components.classes["@mozilla.org/xre/app-info;1"].getService(Components.interfaces.nsIXULRuntime).invalidateCachesOnRestart(); } if(event.button=='0' || event.button=='1') { // left/middle-click - restart observerSvc.notifyObservers(cancelQuit, "quit-application-requested", "restart"); if(cancelQuit.data) return false; Services.startup.quit(Services.startup.eRestart | Services.startup.eAttemptQuit); } }, onCreated: function(button) { return button; } }); // style button icon var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ #uc-restart .toolbarbutton-icon {\ list-style-image: url("chrome://browser/skin/reload.svg"); /* icon / path to icon */ \ transform: scaleX(-1); /* icon mirroring */\ fill: red; /* icon color name/code */\ }\ \ '), null, null); sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); } catch (e) { Components.utils.reportError(e); }; })(); ```

[Pizzapops]

Your Dropbox beta helped me get my Beta and Nightly versions working. I had to update app files and use backup profiles. Switching the Beta to 64 bit caused a repeat of the problem and a redo. I do miss FEBE.

Note: Beware of mortalis13/Bookmarks-Sidebar-Button. It is a Legacy addon that claims to be compatible with Nightly. After a restart, it killed java-script and required use of a backup profile to fix.

[Pizzapops]

I made buttons for bookmarks sidebar & history sidebar (1 click) based on Aris's restart button with some code from mortalis13. If there is any interest, I will post them. These along with thkquang's left sidebar gets me closer to the look of AiOS/OmniSidebar. Still waiting for an extensions sidebar add-on.

[Acid-Crash]

Hi here. Another idea that might come useful. In Chrome when you right click on the Reload button while devTools are open additional Reload options are presented via context menu (Regular reload, Hard reload, Clear HTTP cache and hard reload). It would be interning if something similar can be done here (context menu with options for reload button, devtools request isn't that needed). I am pretty sure that mentioned separate reload options are present within browser (Ctrl+R)... HTTP cache in network tab of devtools

[Aris-t2]

@Pizzapops Sure, post them. That is what this thread is for.

@Acid-Crash So far I've only seen these to inside browser.xul/.js: BrowserReloadSkipCache(); and BrowserReload(); You could test these commands within buttons onClick function.

Wouldn't 'BrowserReloadSkipCache' equal 'disable http cache' in this case? Not sure what 'hard reload' would do differently than skipping/disabling cache before reloading?

[Pizzapops]

Buttons for Bookmarks & History Sidebars

// "One Click" Bookmark Sidebar button script for Firefox 60+ 
// 
// based on 'Quit' button code by 2002Andreas
// and 'Restart' script for Firefox 60+ by Aris-t2
// modified by Pizzapops with code from mortalis13

(function() {

try {
  Components.utils.import("resource:///modules/CustomizableUI.jsm");
  var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
  var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

  CustomizableUI.createWidget({
    id: "bookmarks-sidebar-button", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    label: "Bookmarks Sidebar", // button title
    tooltiptext: "Bookmarks Sidebar", // tooltip title
onCommand : function(aEvent) {
       var aWindow = aEvent.target.ownerDocument.defaultView; // edited as mentioned by author
       aWindow.SidebarUI.toggle('viewBookmarksSidebar');
    },

    onCreated: function(aNode){
      aNode.setAttribute('type', 'checkbox')
      aNode.setAttribute('group', 'sidebar')
      aNode.setAttribute('observes', 'viewBookmarksSidebar')
      // aNode.setAttribute('observes', 'viewHistorySidebar')

    },
  });

  // style button icon
  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
      #bookmarks-sidebar-button .toolbarbutton-icon {\
        list-style-image: url("chrome://browser/skin/bookmark-star-on-tray.svg"); /* icon / path to icon */ \
        transform: scaleX(-1); /* icon mirroring */\
        fill: black; /* icon color name/code */\
      }\
    \
  '), null, null);

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

} catch (e) {
    Components.utils.reportError(e);
};

})();

// "One Click" History Sidebar button script for Firefox 60+ 
// 
// based on 'Quit' button code by 2002Andreas
// and 'Restart' script for Firefox 60+ by Aris-t2
// modified by Pizzapops with code from mortalis13

(function() {

try {
  Components.utils.import("resource:///modules/CustomizableUI.jsm");
  var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
  var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

  CustomizableUI.createWidget({
    id: "history-sidebar-button", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    label: "History Sidebar", // button title
    tooltiptext: "History Sidebar", // tooltip title
onCommand : function(aEvent) {
      // var aWindow = aEvent.target.ownerDocument.defaultView;
      // aWindow.SidebarUI.toggle('viewBookmarksSidebar');
    },

    onCreated: function(aNode){
      aNode.setAttribute('type', 'checkbox')
      aNode.setAttribute('group', 'sidebar')
      aNode.setAttribute('observes', 'viewHistorySidebar')

    },
  });

  // style button icon
  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
    #history-sidebar-button .toolbarbutton-icon {\
        list-style-image: url("chrome://browser/skin/history.svg"); /* icon / path to icon */ \
        transform: scaleX(-1); /* icon mirroring */\
        fill: black; /* icon color name/code */\
      }\
    \
  '), null, null);

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

} catch (e) {
    Components.utils.reportError(e);
};

})();

[rayman89]

Is it possible to make a button to directly show the full download library?

[Aris-t2]

Yes, it is possible.

// Downloads button script for Firefox 60+ by Aris
//
// left-click on custom downloads button: opens downloads library
// middle-click on custom downloads button: opens 'about:downloads' in a new tab
// right-click on custom downloads button: no special function

(function() {

try {
  Components.utils.import("resource:///modules/CustomizableUI.jsm");
  var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
  var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

  var button_label = "Downloads";

  CustomizableUI.createWidget({
    id: "custom-downloads-button", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    label: button_label, // button title
    tooltiptext: button_label, // tooltip title
    onClick: function(event) {
      if(event.button=='0') {
        try {
          //DownloadsPanel.showDownloadsHistory();
          BrowserDownloadsUI(); // equals the above call
        } catch (e) {}
      } else if(event.button=='1') {
        try {
          var mainWindow = Components.classes["@mozilla.org/appshell/window-mediator;1"]
                            .getService(Components.interfaces.nsIWindowMediator)
                            .getMostRecentWindow("navigator:browser");
          mainWindow.gBrowser.selectedTab = gBrowser.addTab('about:downloads', {triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal()});
        } catch (e) {}
      }

    },
    onCreated: function(button) {
      return button;
    }

  });

  // style button icon
  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
    \
      #custom-downloads-button .toolbarbutton-icon {\
        list-style-image: url("chrome://browser/skin/back.svg"); /* icon / path to icon */ \
        transform: rotate(-90deg); /* icon mirroring */\
        fill: blue; /* icon color name/code */\
      }\
    \
  '), null, null);

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

} catch (e) {
    Components.utils.reportError(e);
};

})();

[Pizzapops]

Current Nightly update broke Downloads Button for me. Disregard! After two more restarts it is working.

[Aris-t2]

Edit: Updated the above code.

For some nonsense reason the addTab call now requires additional parameters. I used the ones from "their example" from Bugzilla.

This however only affected the middle-click feature, the left-click still works for me. Make sure to clean "startupCache" manually at least once, if the button still wont work even, if userChrome.ignoreCache is set to true.

Most likely all scripts will break soon in Fx63. Just look at the error console. Many errors are present for almost every script.

[Pizzapops]

Scripts in Beta 62.0b18-64 are not working at all. The profile works fine in 60esr. Maybe they will be back in b19.

[Speravir]

Scripts in Beta 62.0b18-64 are not working at all. The profile works fine in 60esr. Maybe they will be back in b19.

The userChromeJS method is potentially harmful. It works with autoconfig, so developers decided to sandbox this for beta and release versions starting with this beta: Bug 1455601 - Sandbox AutoConfig to its standard API in Firefox 62. For some versions one will be able to set a preference to disable sandboxing. We have to add this to config-prefs.js:
pref("general.config.sandbox_enabled", false);

Aris changed this already in his Custom Scrollbars repository, deep link: Scrollbars/config-prefs.js at master · Aris-t2/Scrollbars.

From what I read this switch is intended to completely be disabled for betas and releases sometime in the future without a chance resetting it, so everyone who wants to use these enhanced config possibilities will then be forced to use nightly, developer or unbranded builds (I also read about ESR, but I guess this will change with next big ESR version after v. 60esr).

[Speravir]

@Acid-Crash @Pizzapops A simpler userChrome.js:

// Deactivate script cache
userChrome.ignoreCache = true;

// Time delay for loading of XUL overlays (in ms)
userChrome.loadOverlayDelay = 1000;

// Import all JS & XUL files from chrome subfolder
userChrome.import("*", "UChrm");

The most important line is the last one: So you do not have to add every single script, but every file with JS extension in the chrome folder will be loaded. Also XUL files will work as long as XUL will be supported, for loading of these there has to be set a time delay which has to be adjusted individually (for older versions before v. 57 some users needed up to 10 seconds if I remember correctly).

[Speravir]

@Aris-t2 Please fix the link to the Password Manager button in your first message above. Also perhaps link to ardiman/userChrome.js. This is the original (“official”) repository for scripts from camp-firefox.de. Ardiman (Mithrandir in Camp Firefox) is now barely active and Endor does the job, but from time to time Endor pushes or commits new scripts and script versions (I do not know exactly how) to ardiman.

Note that these scripts

• are in most cases translated into German, sometimes you can see the Asian origin though. *)
• may not anymore be functional.
• may sometimes not be needed anymore, because the feature is available by default now (or by an addon).

*) Repositories I know, but Endor should do know better – partly not updated for years:

• alice0775/userChrome.js
• Griever/userChromeJS
• ywzhaiqi/userChromeJS

Side question: How did you manage the code folding in 2 comments above?

[Aris-t2]

I fixed the links in OP.

Not quite sure to which post you are referring to with "2 comments above", but, if you mean this one, here is how it works:

<details> <summary> Title </summary>

// content

</details>

The js/css codes I offer are copy&pasted from Notepad++.

[Pizzapops]

@Speravir Thanks for the "temporary" fix.

[Endor8]

Hi everybody. Just to explain how it works actually be twin me and Mithrandir - Ardiman: I collect the scripts, made the German localization and load it up on my Github account. Then I inform Ardiman - Mithrandir that he can - should update or upload it to his Github account. I am just the man in the middle.... I watch only the accounts and sides from the different original authors, if there are changes or something new.

Another thing, I updated the userchrome.js section on my account for Firefox 62. I added the line to deactivate the AutoConfig Sandboxing to the file config-prefs.js in the firefox-anpassungen.zip file. I also updated the readme.md. See: https://github.com/Endor8/userChrome.js/tree/master/userChrome

[Pizzapops]

8/19 Developer update caused my Bookmark & History Sidebar buttons to not function. This can be fixed by activating lines 21 & 22 in both files.

      // var aWindow = aEvent.target.ownerDocument.defaultView;
      // aWindow.SidebarUI.toggle('viewBookmarksSidebar');

Remove the two forward slashes in both lines.

[Speravir]

@Endor8 Danke.

@Aris-t2

Not quite sure to which post you are referring to with "2 comments above"

You used 2 comments later, too, Thank you, because this is not in the Github help (well, it’s not MarkDown at all …)

The js/css codes I offer are copy&pasted from Notepad++.

I do not get this. What and where from inside Np++?

[Aris-t2]

I think there is a misunderstanding. I use NP++ as editor for writing and editing CSS/JS code, nothing special.

[rayman89]

Can anyone dumb down what the "sandboxing feature" is going to achieve besides making scripts non usable?

[Speravir]

@rayman89 Well the goal is to make Firefox safer – cite from Mozilla developer Mike Kaply in Bugzilla bug 1455601 (already linked by me above):

Since the release of Firefox 57, we are seeing AutoConfig being used by bad actors. Because of that, we are going to be sandboxing AutoConfig to only its original API in Rapid Release version 62.

[Acid-Crash]

Still kinda confused. Could someone please explain. For "Release branch" userChrome.js will continue to work if this pref("general.config.sandbox_enabled", false); is present in channel-prefs.js ?

What kind of scripts are affected by the sandbox restriction, all or just some?

[Speravir]

Yes, with this pref set to false you still can use userChrome.js scripts in the recent beta and is said to work for coming release. For nightlies, developer versions and unbranded versions (which count as nightly) the pref is set to false by default.

[Speravir]

@Aris-t2 @Pizzapops How about adding optional separate CSS rules for the toolbar icons using image files from CustomCSSforFx in your comments with scripts above? So, by adding into the own userChrome.css (or by iporting the separate fileinto this) one could adjust these symbols according to the selected style. I know it’s not that easy like in Aris’ main userChrome.css, but using the default path and the basic custom icons toolbar file toolbar_fx_mix.png which then could individually changed (Aris, is there some potential for optimization?):

For Custom Downloads Button

#custom-downloads-button .toolbarbutton-icon {
    list-style-image: url("./image/toolbar_fx_mix.png") !important;
    -moz-image-region: rect(1px, 197px, 17px, 181px) !important;
    transform: none !important;
    fill: none !important;
}

For History Sidebar Button

#history-sidebar-button .toolbarbutton-icon {
    list-style-image: url("./image/toolbar_fx_mix.png") !important;
    -moz-image-region: rect(1px, 197px, 17px, 163px) !important;
    transform: none !important;
    fill: none !important;
}

For Bookmarks Sidebar Button We can either use the toolbar file or a separate star file, and for the latter we could use a PNG or SVG file. The PNG is 48px big and therefore I did not choose this.

• with toolbar file

  #bookmarks-sidebar-button .toolbarbutton-icon {
  list-style-image: url("./image/toolbar_fx_mix.png") !important;
  -moz-image-region: rect(1px, 161px, 17px, 145px) !important;
  transform: none !important;
  fill: none !important;
  }

• with SVG file (not tested!)

  #bookmarks-sidebar-button .toolbarbutton-icon {
  list-style-image: url("./image/star_button.svg") !important;
  transform: none !important;
  fill: unset !important;
  }

  For Passwords Manager Button We use another, dedicated file. We can select here between 4 padlock images (named classic, classic2, modern, modern2).

  #pw_manager_button .toolbarbutton-icon {
  list-style-image: url("./image/padlock_classic.png") !important;
  fill: none !important;
  }

[Acid-Crash]

Hi, here, if adding a separate CSS file will be considered as good practice, I have small suggestion reg Passwords Manager Button. The icon that is currently used chrome://browser/skin/connection-secure.svg doesn't have opacity defined in SVG. From my observation navbar button icons have 0.7 opacity (defined by the theme). Maybe it would be good to save current icon locally and re-add fill-opacity="context-fill-opacity" to it

[Aris-t2]

The icons I used in the above scripts were meant to work cross platform even without additional CSS understanding or coding and I used whatever files Firefox offered internally. Keep in mind most SVG files in CustomCSS are fake svgs with pngs embedded. PNGs became more flexible this way for what they were required, but they are not fully scaleable (for high values) like real svgs.

Of course modding icons or combining given CSS with own CSS is great to get more personal results.

[Speravir]

@Acid-Crash

if adding a separate CSS file will be considered as good practice

You can either add the rule code into the main userChrome.css or add it as separate file and import it into this (or add it to a style file that is already imported). Actually, depending on the amount of own rules it is even better to outsource the rules, at least in parts, so you can better keep track.

The icon that is currently used … doesn't have opacity defined in SVG. From my observation navbar button icons have 0.7 opacity (defined by the theme).

Use this separate rule, it works fine here:

#pw_manager_button .toolbarbutton-icon {
    opacity: 0.7 !important;
}

[Acid-Crash]

Hi @Speravir No worries. I do know how to fix it. The main purpose of my post highlight that particular detail of connection-secure.svg Also

#pw_manager_button .toolbarbutton-icon {opacity: 0.7 !important;}

isn't 100% effective because it has some side effects when used with buttons_on_navbar_classic_appearance (opacity affects full button)

[Speravir]

isn't 100% effective because it has some side effects when used with buttons_on_navbar_classic_appearance (opacity affects full button)

Oh, apparently I do not use this style, so I did not notice this issue.

Regarding chrome://browser/skin/connection-secure.svg: The protocol chrome: shows you that Aris is using an internal Firefox file, hence your change request is not possible here by changing the SVG file. But you could try to use it as separate file or as an CSS inline incarnation of the SVG in a data url and add the fill-opacity there, cf. Optimizing SVGs in data URIs (Taylor Hunt, CodePen). I tried to apply it – alas, the following code is dysfunctional:

#pw_manager_button .toolbarbutton-icon {
    list-style-image: url("data:image/svg+xml;%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E %3Cpath fill='context-fill' fill-opacity='context-fill-opacity' d='M12,7 L13,7 C13.5522847,7 14,7.44771525 14,8 L14,14 C14,14.5522847 13.5522847,15 13,15 L3,15 C2.44771525,15 2,14.5522847 2,14 L2,8 C2,7.44771525 2.44771525,7 3,7 L4,7 L4,5.00032973 C4,2.79202307 5.79321704,1 8,1 C10.2075938,1 12,2.79481161 12,5.00032973 L12,7 Z M10,7 L10,5.00032973 C10,3.89878113 9.10242341,3 8,3 C6.89748845,3 6,3.89689088 6,5.00032973 L6,7 L10,7 Z'/%3E %3C/svg%3E") !important;
    fill: red !important;
    fill-opacity: 0.7 !important;
}

[TroudhuK]

With Firefox 62 update, userChromeJS (just updated too from https://github.com/Endor8/userChrome.js/tree/master/userChrome, main.js and config-pref.js changes) doesn't work anymore. They broke my Firefox again... Fuuuuuu.

15:14:53,561 [Afficher/Masquer les détails du message.] this.window.gBrowserInit is undefined ext-browser.js:942 15:14:53,561 Changement de fenêtre background.js:108:22 15:14:38,570 Bootstrapped manifest not allowed to use 'resource' directive. chrome.manifest:1 15:14:38,576 Bootstrapped manifest not allowed to use 'resource' directive. chrome.manifest:7 15:14:38,592 Bootstrapped manifest not allowed to use 'resource' directive. chrome.manifest:2 15:14:39,543 [Afficher/Masquer les détails du message.] Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. apply.js:56 15:14:40,276 Thu Sep 06 2018 15:14:40 GMT+0200 userChromeJS userChrome.loadScript: [UChrm]/Buttons_restart.uc.js 15:14:40,277 Thu Sep 06 2018 15:14:40 GMT+0200 userChromeJS userChrome.loadScript: [UChrm]/Middle-Click-NewTabBtn-Paste.uc.js 15:14:40,277 Thu Sep 06 2018 15:14:40 GMT+0200 userChromeJS userChrome.loadScript: [UChrm]/middle-click-undo-close-tab.uc.js 15:14:40,420 [Afficher/Masquer les détails du message.] Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. apply.js:56 15:14:40,421 Thu Sep 06 2018 15:14:40 GMT+0200 userChromeJS userChrome.loadScript: [UChrm]/MultiRowTabLiteforFx.uc.js 15:14:40,461 [Afficher/Masquer les détails du message.] [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsISelectionController.getSelection]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: chrome://browser/content/urlbarBindings.xml :: formatValue :: line 510" data: no] 15:14:40,530 [Afficher/Masquer les détails du message.] Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. apply.js:56 15:14:40,568 budiag3.actia.fr : server does not support RFC 5746, see CVE-2009-3555 15:14:40,591 TypeError: Argument 1 of PrecompiledScript.executeInGlobal is not an object. ExtensionContent.jsm:489:18 15:14:40,624 [Afficher/Masquer les détails du message.] Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. apply.js:56 15:14:41,025 In add-on gmailnoads@mywebber.com, attempting to use listener "notifications.onButtonClicked", which is unimplemented. ExtensionParent.jsm:1000:35 15:14:41,244 Error: Invalid option asyncBlocking WebRequest.jsm:41:15 15:14:41,290 [Afficher/Masquer les détails du message.] Unchecked lastError value: Error: Could not establish connection. Receiving end does not exist. menu.js:29 15:14:41,375 TypeError: window is null[En savoir plus] WebRequestContent.js:123:7 15:14:41,404 Error: ID already exists: getarchive-archiveorg ext-menus.js 15:14:41,404 Error: ID already exists: getarchive-archiveis ext-menus.js 15:14:41,404 Error: ID already exists: getarchive-webcitationorg ext-menus.js 15:14:41,405 Error: ID already exists: getarchive-googlecache ext-menus.js 15:14:41,405 Error: ID already exists: getarchive-separator ext-menus.js 15:14:41,405 Error: ID already exists: getarchive-search ext-menus.js 15:14:41,405 Error: ID already exists: getarchive-saveinto-archiveorg ext-menus.js 15:14:41,405 Error: ID already exists: getarchive-saveinto-archiveis ext-menus.js 15:14:41,405 Error: ID already exists: getarchive-saveinto-webcitation ext-menus.js 15:14:41,831 [Afficher/Masquer les détails du message.] Promise resolved after context unloaded project-maia:527 15:14:41,974 [Afficher/Masquer les détails du message.] Promise resolved while context is inactive apply.js:56 15:14:42,078 [Afficher/Masquer les détails du message.] [Exception... "Component returned failure code: 0x80070057 (NS_ERROR_ILLEGAL_VALUE) [nsISelectionController.getSelection]" nsresult: "0x80070057 (NS_ERROR_ILLEGAL_VALUE)" location: "JS frame :: chrome://browser/content/urlbarBindings.xml :: formatValue :: line 510" data: no] 15:14:50,966 L’évènement « key » n’est pas disponible pour certaines dispositions de clavier : key="i" modifiers="accel,alt,shift" id="key_browserToolbox" browser.xul 15:14:53,561 [Afficher/Masquer les détails du message.] this.window.gBrowserInit is undefined ext-browser.js:942 15:14:53,703 Thu Sep 06 2018 15:14:53 GMT+0200 userChromeJS userChrome.loadScript: [UChrm]/Buttons_restart.uc.js 15:14:53,703 Thu Sep 06 2018 15:14:53 GMT+0200 userChromeJS userChrome.loadScript: [UChrm]/Middle-Click-NewTabBtn-Paste.uc.js 15:14:53,703 [Afficher/Masquer les détails du message.] ReferenceError: gBrowser is not defined[En savoir plus] middle-click-undo-close-tab.uc.js:31:5 15:14:53,704 [Afficher/Masquer les détails du message.] ReferenceError: gBrowser is not defined[En savoir plus] MultiRowTabLiteforFx.uc.js:16:5

[Acid-Crash]

Hi, just checked mine (cleared startup cache folder for the sake of experiment).

Restart button, Restart menuitems, Password Manager button

are working fine for me (FF62 Win10x64) Method 2 is used https://github.com/Aris-t2/Scrollbars

[TroudhuK]

Hi Acid-Crash, thanks for your test, I don't have time right now (maybe this evening). Your userChromeJS has a few differences with https://github.com/Endor8/userChrome.js/tree/master/userChrome that I use (installed in profile/chrome instead of Firefox installation dir...) but I don't find any important difference. I downgrade to 61.0.2 and will wait to have a lot of time. Thank's Mozilla "minor change".

[Aris-t2]

@TroudhuK We discussed earlier in this thread what has to be done to get custom js code to work again in Fx 62+ release/beta. Use either the updated method 2 or the still working method 1 from scrollbars repository.

Long story short, the config-prefs.js has now one more pref to set pref("general.config.sandbox_enabled", false);, but this workaround is only temporary.

[TroudhuK]

@Aris-t2 I know, firefox-anpassungen.zip is up to date with that key, so am I. There is an other (unknown?) problem, I have to investigate and I don't have time for that so 61.0.2. I'm sure that it worked one time after disabling the sandbox, yesterday, at home, and I don't know why it's broken again (no firefox restart). Maybe an addon, maybe a plugin, an other config key, ...

[TroudhuK]

OK, I understand the "yesterday/today": it actually works on 3/4 windows. Problem with several windows.