[JavaScript] General JavaScript talk and custom userChrome.js scripts

[Aris-t2]

Lets discuss everything related to JavaScript here instead of opening new threads for questions or request.

Custom scripts https://github.com/Aris-t2/CustomJSforFx/tree/master/scripts

Other custom script collections - by ardiman - by Endor8

[Aris-t2]

The download window code does the job 👍

The restart button script offers 'clear script caches' via middle click. Its what I use, but the shortcut is also an easy way to achieve this. 👍

[krystian3w]

Middle click sometime is blocked on Windows 10 without reasons.

[Aris-t2]

Never happened here. Maybe a conflict with your mouse driver/software/setup.

[LionWrathz]

Hey @Aris-t2 I tried to changed the location to Chrome\Userchrome ,

toolbarbutton#characterencoding-button { -moz-binding: url("/userchrome/userChrome.xml#js");

but it didn't work did i make something wrong please fix it

https://i.imgur.com/OMarjbE.png

[Aris-t2]

Make sure the "character encoding" button is on your toolbar, e.g. navigation toolbar. Otherwise it won'T work.

[krystian3w]

Or script is outdated...

[BoomerangAide]

Hi,

Wanted to share experiences, in case it help future users.

I tried transferring my customization from my laptop (Firefox 65 32 bits, Windows 10 Pro 32 bits 1709) to my surface pro tablet (Firefox 66 ?? bits, Windows 10 Pro 64 bits 1809 I think), but at first, nothing worked. The browser console was showing something about illegal UTF8 character or something, and at first, I thought it was because method 1 was broken on the new setup (that was probably wrong, but at least now I have a test ground for method 3). I eventually had to open all .js files, and convert them to UTF-8, for it to work. My laptop don't care about encoding, don't know which config element caused this, but I converted the files to be ready.

Another thing that didn't work was a piece of code I wrote to move Back and Forward buttons to the personal bar. They got moved to the end instead of the beginning. Managed to fix it by using the setTimeout function like in the alternative_searchbar.uc.js script. I think this may have been caused by faster hardware/SSD.

I hope nobody run into the same issues, but if someone do, my experiences may help.

@LionWrathz: you don't need to put the . at beginning of url or set caps right on the folder name?

[krystian3w]

set caps right on the folder name?

Windows no detect small and big letters.

[Aris-t2]

@BoomerangAide

All files are in UTF-8 before uploading according to Notepad++. Not sure, if that information gets lost after transferring the code to a new .js file manually via copy&paste.

[Acid-Crash]

Hi @Aris-t2, Just checked out your favicon_in_urlbar script. Looks good, still there is a small question I would like to ask. By default when there is a custom permission for a specific site a regular "i" icon changes to "i with a dot". Is it possible to add something similar to the mentioned script (aka to be able to define whether there is a permission change in place)?

Also maybe you can help with another request. When adding a newBookmark/editingBookmark (via Star icon in URL bar or any other way) a popUp comes in. It has an button "show all bookmarks in folders". When clicked it allows to select destination folder for the bookmark (for the same of simplicity leth call this an "extended view"). Is it possible to make a script that will trigger the "extended view" instead of the regular one when bokmark event is trigerred? Lastly maybe there is a way to increse the tree view height of the "extended view"?

TXH in advance.


[Aris-t2]

1. Post an example site.

2. For the other request try this: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/editbookmarkspopup_expanded.uc.js

[Acid-Crash]

hi @Aris-t2 Thank you for the quick reply.

1. When going to youtube.com for the firs time we get the icon chrome://browser/skin/identity-icon.svg (left section of the screenshot.) Later if we add some permission to the site (for example allow autoplay sound via about:preferences#privacy > Block websites from automatically playing sound > exceptions) the icon changes to chrome://browser/skin/identity-icon-notice.svg (right section of the screenshot). This behavior is applicable to any specific permission that might be added to the site

I do understand that this might be a bit tricky because this logic relies on two different icons, and one of them acts as "default". Still maybe you will find some sort of workaround in form of graphical overlay/style/shadow etc


2. For some reason I can't get it working on latest Nightly (M2 cleared startup cache etc). On Release (same method and guidelines) it works fine. Any ideas? Also is it possible to add some sort of transition/animation to the bookmark popUp ('that portion with folder selection')? When this JS is applied edit bookmark popUp animation becomes a bit shaky (top section folds and then the bottom one emerges)

[Aris-t2]

1. It is possible to recreate the badge on top of the current icon for pages with granted permissions. Test the updated script.

2. I had to rewrite the script for it to work with Fx60-68. Look like the only clean way to apply CSS is still registering style sheets. ;-) Test the updated script. I removed the transition/animation, because switching between expanded tree view and normal tree view always causes popup jumps and hickups and they look ugly when the popup just opens. You can remove the part of the code and test the version without transition removal. (Remove this rule https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/editbookmarkspopup_expanded.uc.js#L36)

[Acid-Crash]

You are the best, @Aris-t2 !!! Confirming, both are working fine. Regarding animation, its a bit sad that we need to remove animation to fix the hickups. Also maybe its just me, but I still see those hickups (of course less noticable then before).

[That-Random-Guy]

How would I be able to add a icon to the nav toolbar?

I was able to grab the extension files after removing source extension and have located the icon but I'm not sure what to do next.

I'm running Firefox 66.0.3 and currently use method 1 for other JS "hacks".

[BoomerangAide]

Thanks for the favicon_in_urlbar.uc.js script.I was using another one, but your is working better.

The only change I made was to replace favicon_in_urlbar = 'chrome://branding/content/identity-icons-brand.svg'; by favicon_in_urlbar = 'chrome://image/tab_favicon_sheet.png'; because it fit my CustomCss logic better, not sure if that was the best way to go about it, but that's an use case.

The only mystery I haven't solved, is that when I open a new tab, it has a Firefox icon (and that's probably a bug in the first place), but the urlbar can't seem to get this icon (get empty sheet icon with my change), but that's not a big deal, unless it's hiding an issue that could be more of a problem in other circumstances?

Anyway, thanks again.

[Acid-Crash]

@BoomerangAide guess Firefox icon comes from this line https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/favicon_in_urlbar.uc.js#L28

BTW, here is the path to the default globe icon chrome://mozapps/skin/places/defaultFavicon.svg

[Aris-t2]

@Acid-Crash I don't think there is much to improve regarding the hickups. The script "switches" to expanded view as soon the popup opens. Looked better in the first version of the script, but as you reported, it was not for Fx68+.

@That-Random-Guy I'm not sure what your question has to do with this repository. Creating a toolbar button with an icon is possible (look at the other buttons scripts), but what would that button do?

@BoomerangAide The script looks several times during loading for a favicon. Sometimes pages don't offer any or use internal ones (like some about pages). In those cases current brand icon is used (its not a bug).

Edit I updated the favicon script again. Now one can chose between icons inside browsers default files like i-icon, sheet, brand and globe.

[Aris-t2]

@BoomerangAide Does the new sheet icon option work the same way your previous code change did?

[That-Random-Guy]

@Aris-t2 Gotcha—I'll look into that then. If I have any further questions, where should I direct them?

[Aris-t2]

@That-Random-Guy Honestly, I have no idea. There is no "request" area for stuff like that. Maybe on Reddit or Mozillazine.

What is your button supposed to do anyways?

Edit: If you understand German, you can find a big Fx tweaks community on Camp Firefox forums where users ask for new stuff possible with CSS or JS all the time. ;-)

[BoomerangAide]

@BoomerangAide Does the new sheet icon option work the same way your previous code change did?

Actually things were working in an unexpected way.

I had a custom css to use the empty sheet as a default in urlbar, and I think my previous code change was causing a bug, that allowed in some cases the icon I wanted to appear, but also preventing the firefox icon on new tab to be used.

Now after testing the sheet option and seeing it was different from UserChrome.css, I'm using an added line var sheet2 = 'file:///C:/Users/MyName/AppData/Roaming/Mozilla/Firefox/Profiles/ProfileName/chrome/image/tab_favicon_sheet.png' This allow to use the sheet, firefox icon or site icon properly...I hope lol.

I wonder if there would have been a shorter way for the path though.After figuring I had to use file:/// I didn't retry a relative path (starting with '.'), or maybe there would have been a chrome:/// path that would have been able to access UserChrome.css project images?

[Aris-t2]

Check this out about relative and absolute paths: https://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/

[Acid-Crash]

Hi @Aris-t2. Is it hard to modify "View Image" context menu entry (or create a separate entry for this task) so it would open image in New Tab instead of the current Tab by default?

P.S. I do know that holding Shift achieves the same, still, the default new tab behavior would be neat...

[Aris-t2]

I have not checked yet, but using middle-click also opens a new tab. ;-)

[marty60]

Hi Aris,

Hoping you can help. I've got a Paste & Go button with code that works perfectly in Custom Buttons (FF 66.0) but will not as a script button. I think the problem is copying to the clipboard but I can't nail the error down. Could you please take a look at it? This is the active code used in custom buttons:

var myURL = gClipboard.read();

if (myURL.substring(0, 8) == "https://") { //window.open(myURL); gBrowser.loadURI(myURL, { triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(), }); } else { if (myURL.substring(0, 7) == "http://") { //window.open(myURL); gBrowser.loadURI(myURL, { triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(), }); } else { gBrowser.loadURI("http://" + myURL, { triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(), }); // alert("URL error. Clipboard contents are:- " + myURL); } }

I've made dozens of buttons using the same full script button, with the only changes being the active code, icon and ID. This is the only one I can't get to work.

[Aris-t2]

@marty60

"gClipboard.read();" does not have access to the clipboard. I wrote a complete script incl. button creation for testing purposes.

// GetUrlFromClipboard button script for Firefox 60+ by Aris
//
(function() {

  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 = "test";

  CustomizableUI.createWidget({
    id: "gufc-button", // button id
    defaultArea: CustomizableUI.AREA_NAVBAR,
    removable: true,
    label: button_label, // button title
    tooltiptext: button_label, // tooltip title
    onClick: function(event) {

      var myURL = '';

      navigator.clipboard.readText().then(text => {
        myURL = text;

        if (myURL.substring(0, 8) == "https://") {
            //window.open(myURL);
            gBrowser.loadURI(myURL, {
            triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
            });
        } else {
            if (myURL.substring(0, 7) == "http://") {
                //window.open(myURL);
                gBrowser.loadURI(myURL, {
                triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
                });
            } else {
                gBrowser.loadURI("http://" + myURL, {
                triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal(),
                });
                // alert("URL error. Clipboard contents are:- " + myURL);
            }
        }

      }).catch(() => {
        //console.log('Failed to read from clipboard.');
      });

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

  });

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

  sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

[marty60]

@Aris, that works perfectly, thanks a lot. It saves me the trouble of installing another addon for such a simple command.

[LionWrathz]

Hey #Aris-t2 I tried to modified the scrollbar, to reduce the white space but can't find it ,can you help me ? thanks. https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js I know there it must be like that to reduce it but cant find it

scrollbar[orient="vertical"] { -moz-margin-start: 0px !important; max-width: 10px !important; min-width: 10x !important;

https://i.imgur.com/p80RIxo.jpg

I want to make it look like this.. https://i.imgur.com/hWjQbaG.png

[Aris-t2]

If you are using https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js, you can set a lot of stuff for the scrollbar, so it looks more like what you want. Test this code:

scrollbars

```js "use strict"; /* Firefox 57+ userChrome.js tweaks - SCROLLBARS ********************************************** */ /* by Aris (aris-addons@gmx.net)*************************************************************** */ /* Github: https://github.com/aris-t2/customscrollbarsforfx *********************************** */ /* ******************************************************************************************** */ /* ******************************************************************************************** */ /* Custom Scrollbars for Firefox ************************************************************** */ /* version 1.0.4 ****************************************************************************** */ /* ******************************************************************************************** */ /* *********************************************************************************************** README [!] either 'method 1' or 'method 2' are required to prepare Firefox for custom JavaScript files [!] 'custom_scrollbars.uc.js' file belongs into Firefox profiles 'chrome' folder! -> finding profile folder: address bar > about:profiles > Root Directory > Open Folder -> add file to \chrome\ folder (create one, if needed) [!] STARTUP CACHE HAS TO BE DELETED AFTER EVERY CHANGE! -> finding 'startupCache' folder: address bar > about:profiles > Local Directory > Open Folder > startupCache -> close Firefox -> delete 'startupCache' folders content ENABLING options > set var to true DISABLING options > set var to false Modifying appearance > change values - color - name: red, blue, transparent / hex code: #33CCFF, #FFF - color - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) - numbers: 1, 2, 3 ... 10, 11, 12 ... - opacity: 0.0 to 1.0 e.g. 1.4, 1,75 - gradients: linear-gradient(direction, color, color, color) - gradients example: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8)) - unsettings predefined gradients: transparent,rgba(255,255,255,0.5),transparent -> transparent,rgba(255,255,255,0.0),transparent - button size with arrow (descriptions for vertical scrollbars - analogous for horizontal scrollbars) -- 1: space above arrow = arrow height -- 1.5: space above arrow = 0.5 * arrow height -- 2: no space above arrow NOTE - This is a tiny collection of scrollbar tweaks, not a port of 'NewScrollbars' add-on! - Small scrollbar width values will corrupt some parts of the ui! *********************************************************************************************** */ // GENERAL SCROLLBAR SETTINGS var hide_scrollbars = false; // default: hide_scrollbars = false var hide_scrollbar_buttons = false; // default: hide_scrollbar_buttons = false var custom_scrollbar_size = true; // default: custom_scrollbar_size = false var custom_scrollbar_size_value = 10; // in px // default: custom_scrollbar_size_value = 17 var custom_scrollbar_opacity = false; // default: custom_scrollbar_opacity = false var custom_opacity_value = "1.0"; // default: custom_opacity_value = "1.0" // floating scrollbars var enable_scrollbars_on_top_of_webcontent = false; // default: enable_scrollbars_on_top_of_webcontent = false // uses 'custom_scrollbar_size_value' inside its code // custom scrollbars var enable_custom_scrollbars = true; // default: enable_custom_scrollbars = true // CUSTOM SCROLLBAR SETTINGS ("custom_scrollbar_" --> "cs_") var cs_thumb_border = 3; // in px // default: cs_thumb_border = 0 var cs_thumb_roundness = 99; // in px // default: cs_thumb_roundness = 0 var cs_buttons_roundness = 0; // in px // default: cs_buttons_roundness = 0 var cs_buttons_as_arrows = false; // default: cs_buttons_as_arrows = false // uses 'custom_scrollbar_size_value' inside its code var cs_arrows_on_buttons = true; // default: cs_arrows_on_buttons = true // uses 'custom_scrollbar_size_value' inside its code // button size with arrow - 1: space above arrow = arrow height // 1.5: space above arrow = 0.5 * arrow height // 2: no space above arrow var cs_arrows_on_buttons_buttons_size = 1.5; // default: cs_arrows_on_buttons_buttons_size = 1.5 // 'flat' scrollbars var cs_ignore_color_gradients = false; // default: cs_ignore_color_gradients = false // CUSTOM SCROLLBAR COLORS/GRADIENTS // - background var cs_background_color = "black"; // default: cs_background_color = "#DDDDDD" var cs_background_image_vertical = "black"; // default: cs_background_image_vertical = "unset" var cs_background_image_horizontal = "black"; // default: cs_background_image_horizontal = "unset" // - corner var cs_corner_background_color = "#DDDDDD"; // default: cs_corner_background_color = "#DDDDDD" var cs_corner_background_image = "linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%),linear-gradient(-45deg,transparent 30%,rgba(255,255,255,0.5) 50%,transparent 70%)"; // default: cs_corner_background_image = "unset" // - thumb/slider var cs_thumb_color = "#33CCFF"; // default: cs_thumb_color = "#33CCFF" var cs_thumb_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_vertical = "unset" var cs_thumb_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_image_horizontal = "unset" var cs_thumb_hover_color = "#66FFFF"; // default: cs_thumb_hover_color = "#66FFFF" var cs_thumb_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_vertical = "unset" var cs_thumb_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_thumb_hover_image_horizontal = "unset" var cs_thumb_border_color = "black"; // default: cs_thumb_border_color = "#33CCFF" // - buttons var cs_buttons_color = "#66FFFF"; // default: cs_buttons_color = "#66FFFF" var cs_buttons_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_vertical = "unset" var cs_buttons_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_image_horizontal = "unset" var cs_buttons_hover_color = "#33CCFF"; // default: cs_buttons_hover_color = "#33CCFF" var cs_buttons_hover_image_vertical = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_vertical = "unset" var cs_buttons_hover_image_horizontal = "linear-gradient(to bottom,transparent,rgba(255,255,255,0.5),transparent)"; // default: cs_buttons_hover_image_horizontal = "unset" // - button arrows var cs_arrows_on_buttons_color = "#33CCFF"; // default: cs_arrows_on_buttons_color = "#33CCFF" var cs_arrows_on_buttons_hover_color = "#66FFFF"; // default: cs_arrows_on_buttons_hover_color = "#66FFFF" // unset background image color gradients -> flat scrollbars if(cs_ignore_color_gradients==true) cs_background_image_vertical =cs_background_image_horizontal =cs_corner_background_image=cs_thumb_image_vertical =cs_thumb_image_horizontal =cs_thumb_hover_image_vertical =cs_thumb_hover_image_horizontal =cs_buttons_image_vertical =cs_buttons_image_horizontal =cs_buttons_hover_image_vertical =cs_buttons_hover_image_horizontal ="unset"; /* ******************************************************************************************** */ /* ******************************************************************************************** */ /* ******************************************************************************************** */ // Scrollbar code Components.utils.import("resource://gre/modules/Services.jsm"); var ss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService); var custom_scrollbars = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar, scrollcorner, scrollbar thumb, scrollbar scrollbarbutton {\ -moz-appearance: none !important;\ }\ scrollbar {\ background-color: '+cs_background_color+' !important;\ }\ scrollbar[orient="vertical"] {\ background-image: '+cs_background_image_vertical+' !important;\ }\ scrollbar[orient="horizontal"] {\ background-image: '+cs_background_image_horizontal+' !important;\ }\ scrollcorner {\ background-color: '+cs_corner_background_color+' !important;\ background-image: '+cs_corner_background_image+' !important;\ }\ scrollbar thumb {\ background-color: '+cs_thumb_color+' !important;\ border-radius: '+cs_thumb_roundness+'px !important;\ border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important;\ }\ scrollbar thumb[orient="vertical"] {\ background-image: '+cs_thumb_image_vertical+' !important;\ }\ scrollbar thumb[orient="horizontal"] {\ background-image: '+cs_thumb_image_horizontal+' !important;\ }\ scrollbar thumb:hover, scrollbar thumb:active {\ background-color: '+cs_thumb_hover_color+' !important;\ }\ scrollbar thumb[orient="vertical"]:hover, scrollbar thumb[orient="vertical"]:active {\ background-image: '+cs_thumb_hover_image_vertical+' !important;\ }\ scrollbar thumb[orient="horizontal"]:hover, scrollbar thumb[orient="horizontal"]:active {\ background-image: '+cs_thumb_hover_image_horizontal+' !important;\ }\ scrollbar scrollbarbutton {\ background-color: '+cs_buttons_color+' !important;\ border-radius: '+cs_buttons_roundness+'px !important;\ }\ scrollbar[orient="vertical"] scrollbarbutton {\ background-image: '+cs_buttons_image_vertical+' !important;\ }\ scrollbar[orient="horizontal"] scrollbarbutton {\ background-image: '+cs_buttons_image_horizontal+' !important;\ }\ scrollbar scrollbarbutton:hover {\ background-color: '+cs_buttons_hover_color+' !important;\ }\ scrollbar[orient="vertical"] scrollbarbutton:hover {\ background-image: '+cs_buttons_hover_image_vertical+' !important;\ }\ scrollbar[orient="horizontal"] scrollbarbutton:hover {\ background-image: '+cs_buttons_hover_image_horizontal+' !important;\ }\ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var cs_scrollbars_scrollbar_button_arrows = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar scrollbarbutton, \ scrollbar[orient="vertical"] scrollbarbutton,\ scrollbar[orient="horizontal"] scrollbarbutton, \ scrollbar[orient="vertical"] scrollbarbutton:hover,\ scrollbar[orient="horizontal"] scrollbarbutton:hover {\ background-color: unset !important;\ background-image: unset !important;\ border-radius: 0px !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton {\ min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ min-width: '+custom_scrollbar_size_value+'px !important;\ width: '+custom_scrollbar_size_value+'px !important;\ max-width: '+custom_scrollbar_size_value+'px !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton {\ min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ min-height: '+custom_scrollbar_size_value+'px !important;\ height: '+custom_scrollbar_size_value+'px !important;\ max-height: '+custom_scrollbar_size_value+'px !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\ border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\ border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\ border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\ border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\ border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\ border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\ border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_buttons_hover_color+' !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var cs_scrollbars_arrows_on_buttons = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar scrollbarbutton, \ scrollbar[orient="vertical"] scrollbarbutton,\ scrollbar[orient="horizontal"] scrollbarbutton, \ scrollbar[orient="vertical"] scrollbarbutton:hover,\ scrollbar[orient="horizontal"] scrollbarbutton:hover {\ border-radius: 0px !important;\ }\ \ scrollbar[orient="vertical"] > scrollbarbutton {\ min-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ max-height: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ min-width: '+custom_scrollbar_size_value+'px !important;\ width: '+custom_scrollbar_size_value+'px !important;\ max-width: '+custom_scrollbar_size_value+'px !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton {\ min-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ max-width: '+(custom_scrollbar_size_value/cs_arrows_on_buttons_buttons_size)+'px !important;\ min-height: '+custom_scrollbar_size_value+'px !important;\ height: '+custom_scrollbar_size_value+'px !important;\ max-height: '+custom_scrollbar_size_value+'px !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"] {\ border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="decrement"]:hover {\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"] {\ border-left: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-right: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\ }\ scrollbar[orient="vertical"] > scrollbarbutton[type="increment"]:hover {\ border-top: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"] {\ border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="decrement"]:hover {\ border-right: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"] {\ border-top: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-bottom: '+(custom_scrollbar_size_value/2)+'px solid transparent !important;\ border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_color+' !important;\ }\ scrollbar[orient="horizontal"] > scrollbarbutton[type="increment"]:hover {\ border-left: '+(custom_scrollbar_size_value/2)+'px solid '+cs_arrows_on_buttons_hover_color+' !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var scrollbar_buttons = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar scrollbarbutton {\ opacity: 0 !important;\ }\ scrollbar[orient="vertical"] scrollbarbutton {\ min-height: 1px !important;\ height: 1px !important;\ max-height: 1px !important;\ }\ scrollbar[orient="horizontal"] scrollbarbutton {\ min-width: 1px !important;\ width: 1px !important;\ max-width: 1px !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var scrollbar_size = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar[orient="vertical"] scrollbarbutton {\ min-width: 0 !important;\ width: '+custom_scrollbar_size_value+'px !important;\ max-width: '+custom_scrollbar_size_value+'px !important;\ }\ scrollbar[orient="horizontal"] scrollbarbutton {\ min-height: 0 !important;\ height: '+custom_scrollbar_size_value+'px !important;\ max-height: '+custom_scrollbar_size_value+'px !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var floating_scrollbars = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar {\ position: relative !important;\ z-index: 1000000000 !important;\ }\ scrollbar[orient="vertical"],\ scrollbar[orient="horizontal"],\ scrollbar, scrollcorner {\ background-color: transparent !important; \ background-image: unset !important; \ }\ scrollbar[orient="vertical"] {\ -moz-margin-start: -'+custom_scrollbar_size_value+'px !important;\ width: '+custom_scrollbar_size_value+'px !important;\ }\ scrollbar[orient="horizontal"] {\ margin-top: -'+custom_scrollbar_size_value+'px !important;\ height: '+custom_scrollbar_size_value+'px !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var scrollbar_opacity = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar {\ opacity: '+custom_opacity_value+' !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; var remove_scrollbars = { init: function() { var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ @namespace html url("http://www.w3.org/1999/xhtml");\ \ scrollbar, scrollcorner {\ display: none !important;\ visibility: collapse !important;\ }\ \ '), null, null); ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET); } }; // enable settings as configured above if(enable_custom_scrollbars==true) custom_scrollbars.init(); if(cs_buttons_as_arrows==true && hide_scrollbars==false) cs_scrollbars_scrollbar_button_arrows.init(); if(cs_arrows_on_buttons==true && cs_buttons_as_arrows==false && hide_scrollbars==false) cs_scrollbars_arrows_on_buttons.init(); if(hide_scrollbar_buttons==true) scrollbar_buttons.init(); if(custom_scrollbar_size==true) scrollbar_size.init(); if(enable_scrollbars_on_top_of_webcontent==true) floating_scrollbars.init(); if(custom_scrollbar_opacity==true) scrollbar_opacity.init(); if(hide_scrollbars==true) remove_scrollbars.init(); ```

[LionWrathz]

If you are using https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/custom_scrollbars.uc.js, you can set a lot of stuff for the scrollbar, so it looks more like what you want. Test this code: scrollbars

Thank you so much it worked now that's what i wanted

[Acid-Crash]

Hi @Aris-t2 Firefox 67 added a "Logins and Passwords" to the App menu. Could you please check if your password_manager_button.uc.js uses the same entry (maybe it is worth using the same for longevity reasons)?

[Aris-t2]

Currently this add-on uses window.open('chrome://passwordmgr/content/passwordManager.xul','', 'chrome'); while default menuitem uses LoginHelper.openPasswordManager(window, { entryPoint: 'mainmenu' }); Both do the same atm.

[Speravir]

@Aris-t2, did you notice? Milupo in Re: Aktuelle Nightly Version - Scripte funktionieren nicht mehr (German). Some of your scripts are affected, too. In English: Replace every createElementwith createXULElement, but not createElementNS.

[Aris-t2]

I did this back then when it was introduced for Fx63: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/addonbar.uc.js#L78

[Acid-Crash]

Hi @Aris-t2. Is it possible to create script that will create a toolbar button based on a specific bookmark (bookmark name is static)? A small background why I'm asking about this: from time-to-time I need to use some bookmarklets (a piece of JS code that is saved as an bookmark). Typically they interact with an active tab (reload page CSS, access Google cache, use Google translate). Here is one of them http://lea.verou.me/2018/09/refresh-css-bookmarklet-v2/

So I'm curious if it is possible to make a button out of them. If concept "paste from bookmarklet" is to complicated maybe if is possible to make a plain toolbar button that will literally execute a piece of JS defined by user...

[Aris-t2]

It should be possible to attach own code to a newly created button. You can use the "Restart button" as base and replace the code in lines 35-48 with own JS code, such as provided within the function of the linked script for example.

[Acid-Crash]

@Aris-t2 Bad luck for me((( It doesn't work.

Here is what I've tried...

```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 = "Restart1"; try { switch (document.getElementById("nav-bar").getAttribute("aria-label")) { case "Navigations-Symbolleiste": button_label = "Neustarten"; break; case "Панель навигации": button_label = "Перезапустить1"; break; } } catch(e) {} CustomizableUI.createWidget({ id: "uc-restartNew", // button id defaultArea: CustomizableUI.AREA_NAVBAR, removable: true, label: button_label, // button title tooltiptext: button_label, // tooltip title onClick: function(event) { let $$ = (selector, root = document) => Array.from(root.querySelectorAll(selector)); let refresh = (document) => { for (let link of $$("link[rel=stylesheet][href]", document)) { let href = new URL(link.href); href.searchParams.set("forceReload", Date.now()); link.href = href; } for (let iframe of $$("iframe", document)) { iframe.contentDocument && refresh(iframe.contentDocument); } } refresh(); }, onCreated: function(button) { return button; } }); // style button icon var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\ \ #uc-restartNew .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); }; })(); ```

Seems like it tries to interact with browser "internally" instead of the opened web page. When trying to use Google Translate bookmarklet

document.location = 'http://translate.google.com/translate?js=n&prev=_t&hl=ru&ie=UTF-8&layout=2&eotf=1&sl=auto&tl=ru&u=' + top.location.href + '&act=url'

it gives the warning Bad URL: http://browser/content/browser.xhtml

Also both JS are working fine when are executed from the DevTools console.

[Aris-t2]

Not sure how to access the webpage from the script, but my guess is "document" has to be replaced with something, that has deeper access.

[marty60]

Hello Aris,

To run scripts I was using xiaoxiaoflood's method 3 but it's broke in 69 and his project appears dead, at least for now so I'm using method 1. That does work but it had to be updated with Alice's userChrome.xml:

https://github.com/alice0775/userChrome.js/blob/db5e86864e981b8e677af9cba8974e4990d58d0e/userChrome.xml

One of your scripts MovableUrlbar I modified slightly to make the forward button moveable instead:

`// Movable forward button script for Firefox 60+

var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {}); var {CustomizableUI} = Components.utils.import("resource:///modules/CustomizableUI.jsm", {});

var MovableUrlbar = { init: function() {

try {
  document.getElementById('forward-button').setAttribute('removable','true');
} catch(e){}

try {
  if(!document.getElementById('forward-button').getAttribute('cui-areatype'))
    document.getElementById('forward-button').setAttribute('cui-areatype','toolbar');
} catch(e){}

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    try {
      if(!document.getElementById('forward-button').getAttribute('cui-areatype')) {
        CustomizableUI.addWidgetToArea("forward-button", CustomizableUI.AREA_NAVBAR);
      } else if (document.getElementById('forward-button').getAttribute('cui-areatype')=="menu-panel") {
        CustomizableUI.addWidgetToArea("forward-button", CustomizableUI.AREA_NAVBAR);
      }
    } catch(e){}
  });    
});

try {
  observer.observe(document.getElementById('forward-button'), { attributes: true, attributeFilter: ['cui-areatype'] });
} catch(e){}

}

}

MovableUrlbar.init(); ` The problem I have is unlike xiaoxiaoflood's version every time I close the browser the forward button is back on the navbar. I have it moved to the menu bar but it's kind of useless if it doesn’t stay there. Is there any way to force it to through the code?

[Aris-t2]

@marty60 Thanks for sharing. Alice's method looks to me like an entirely different implementation of the way to load js scripts, so I don't think of it as an extension of "method 1", but more like a "method 4" for example. I have to take a deeper look at the code.

For me this projects "method 2" still works with every Firefox version, while "method 1" stopped with Firefox 68+. I suggest to try it.

About your problem with movable urlbar and buttons: After every restart the browser resets the configuration of back button, forward button and location bar. To make your change stick on a fixed position one has to use my script and chose the position of those items on the desired toolbar. This was the only way in my tests to keep the position after a browser restart. This also means changing the position only sticks, if done via the js file and not customizing mode.

Test this script: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/move_urlbar.uc.js

[marty60]

Method 2 does work as well but its config.js conflicts with custom buttons config.js, even if I change the custom buttons config.js to another name, custom buttons will continue to load and work properly but the scripts won't run. Method 1 doesn't give me that problem.

Your script does the job for setting the position of the buttons but I'm not sure if that is the same as to what I was referring to. After I move the forward button to the menubar, close then reopen the browser it's back on the navbar so each time I have to put it back on the menubar. I'm looking to keep it fixed on the menubar because it won't stay there.

What would happen with xiaoxiaoflood's is that it would start out on the navbar when first opening the browser then automatically move it to the menubar or wherever you placed it. Neither method 1 or 2 does that. Is there perhaps some css code that would fix it to menubar?

[Aris-t2]

Can't say much about config.js of custom buttons. Never used or tested it, but normally user scripts should be able to run from where other user scripts run. Rename that file to custom_buttons.uc.js and import it though userChrome.js.

As far as I understood you want to move the forward button or for it to be movable, but this does not work anymore, not even with a script, that allows it to be movable. Only a script that defines a fixed position on a toolbar works.

[marty60]

Custom buttons is an addon that uses the experiments format and to make it work it has config.js settings.

Using Alice's userChrome.xml and the other two files from method 1 there is no conflict and scripts run fine. So I am able to move the forward, back, and url buttons to the other toolbars, it's just that they don't stay there when you close the browser.

[Aris-t2]

You can also try to keep that configuration, but use https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/move_urlbar.uc.js instead of the forward button script you mentioned before.

The button does not stay, because that script can not make it stay, but my script can. You can also edit it and only keep the "forward-button" parts and remove everything else.

var {CustomizableUI} = Components.utils.import("resource:///modules/CustomizableUI.jsm", {});

var navigation = CustomizableUI.AREA_NAVBAR;
var tabs = CustomizableUI.AREA_TABSTRIP;
var menu = CustomizableUI.AREA_MENUBAR;
var bookmarks = CustomizableUI.AREA_BOOKMARKS;

/* [target toolbar of item]
    menu = 'menubar'
    tabs = 'tabs toolbar'
    bookmarks = 'bookmarks toolbar'
    navigation='navigation toolbar'   */
var forwardbutton_on_toolbar = menu;

/* [target position of item]
    0 = 1st
    1 = 2nd
    2 = 3rd
    ...
    x = xth    */
var forwardbutton_on_toolbar_position = 0;

var MoveForward = {
  init: function() {

    try {
      document.getElementById('forward-button').setAttribute('removable','true');
    } catch(e){}

    CustomizableUI.addWidgetToArea("forward-button", forwardbutton_on_toolbar);
    CustomizableUI.moveWidgetWithinArea("forward-button", forwardbutton_on_toolbar_position);

    try {
      document.getElementById('forward-button').setAttribute('removable','false');
    } catch(e){}

  }

}

document.addEventListener("DOMContentLoaded", MoveForward.init(), false);

[marty60]

Thank-you Aris, that finally did it. The original code you posted wasn't allowing me to move anything but this revised code you just posted works great. I just had to change the postion from 0 to 1 because I've got a custom back button. But it is holding its position and on the menubar after rebooting.

Edit: there was another change I had to make to the above code. When opening a new window the forward button would be back on the navbar but changing this line from false to true seems to fix that:

try { document.getElementById('forward-button').setAttribute('removable','false'); } catch(e){}

[LionWrathz]

@Aris-t2 could you please create a new scripts about New TAB blank pages to make New Tab pages
transparent? that code you give me it stop working. 41 (comment

Firefox 67

[Aris-t2]

New tab page does not work like that anymore and the "main-window" tag does not show proper "New Tab..." title always anymore, so such a script can not be achieved.

Maybe making about:home/about:newtab page transparent might help you, Add this to userContent.css

@-moz-document url-prefix(about:home), url-prefix(about:newtab) {
  * { 
    opacity: 0 !important;
    background-color: transparent !important;
  }
}

[krystian3w]

How to recover arrow in search input on about:home

left FX 68 right Nightly 69
with crap search @google in url bar

---

Script no needed now:

browser.newtabpage.activity-stream.improvesearch.handoffToAwesomebar - false

[krystian3w]

Also possible active relases: https://github.com/Aris-t2/CustomJSforFx/releases

with small changelog?