[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

[Acid-Crash]

@Aris-t2 Could you please help with adding custom icon for any custom Toolbar button createdby UserChromeJS (method2). What need to be changed in path to the file list-style-image: url("chrome://browser/skin/connection-secure.svg")

if for example external(new) SVG is located inside "image" folder from CustomCSSforFx?

UPD. maybe also you can advice how to achieve the same for the extension toolbar button... It typically uses the following properties for the icon

элемент {
    --webextension-menupanel-image: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/32-tab-undo.png");
    --webextension-menupanel-image-light: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/32-tab-undo.png");
    --webextension-menupanel-image-dark: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/32-tab-undo.png");
    --webextension-menupanel-image-2x: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/48-tab-undo.png");
    --webextension-menupanel-image-2x-light: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/48-tab-undo.png");
    --webextension-menupanel-image-2x-dark: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/48-tab-undo.png");
    --webextension-toolbar-image: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/16-tab-undo.png");
    --webextension-toolbar-image-light: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/16-tab-undo.png");
    --webextension-toolbar-image-dark: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/16-tab-undo.png");
    --webextension-toolbar-image-2x: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/32-tab-undo.png");
    --webextension-toolbar-image-2x-light: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/32-tab-undo.png");
    --webextension-toolbar-image-2x-dark: url("moz-extension://af7534e5-4987-4fe3-92e5-b36f6728ef88/icons/32-tab-undo.png");
}

[Aris-t2]

@Acid-Crash You to use an absolute paths, if you want to set a local icon for a button inside a JS file. list-style-image: url("file:///DRIVELETTER:/path/to/image/file.png") !important; My Portable Firefox for this case looks like this list-style-image: url("file:///G:/FirefoxPortable_JS_method2/Data/profile/chrome/image/padlock_modern.png") !important;

I'm not sure why we can not use icons from other add-ons/WEs. Probably they are no accessible from custom css or other add-ons/WEs.

[Acid-Crash]

@Aris-t2 hmm, absolute path has its flaws. I did notice that in _./css/buttons/appbutton_on_navbar_iconwhite.css You've defined the path with the following list-style-image: url("../../image/appbutton-inv.svg") !important;

From my understanding it says that I need to move 2 steps back/up into file structure (from the folder where rule is defined), then go to image folder and find appbutton-inv.svg I was able to redefine some icons following this logic and they are working fine, but I struggle with that JS button

I thought that similar can be done for _password_managerbutton.uc.js icon The issue it that I can't seem to understand what is my starting point in file structure

[Aris-t2]

Unfortunately the path does not work like this inside the JS script, but it will inside userChrome.css though.

Example: _chrome/image/padlockmodern.png chrome/userChrome/... (here are the scripts) chrome/userChrome.css chrome/userChrome.js

This code will work inside userChrome.css.

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

[Acid-Crash]

@Aris-t2 thx for the clarification. BTW I've noticed that _undo_closetabbutton.uc.js looses its icon (didn't change it) when placed inside Overflow menu. Maybe you know why this is happening?

[Aris-t2]

That icon seems to be something very special ;-) It requires width and height values within palette and overflow menu.

I just uploaded a new version of the script. https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/undo_closetab_button.uc.js

[Acid-Crash]

@Aris-t2, Ahh, my eye failed me((( Been staring at that icons svg and didn't notice that it lacks width="16" height="16" thx again

[Aris-t2]

The other buttons (like restart buttons) and svgs do not require width and height to be set, so I haven't thought about adding it to this one.

[Acid-Crash]

@Aris-t2 I've used another solution to fix troublesome icons. Not sure if it fill be suitable for everyone, still maybe someone will be interested. Load about:config?filter=svg.context-properties.content.enabled and set it to true (this will enable accepting fill and fill-opacity for local SVGs). Details are here MDN

1. Save locally troublesome icon.
2. Add missing SVG properties (just use another icon as a template). So far I've seen missing width="16" height="16" and fill-opacity="context-fill-opacity"
3. Reassign icon via userChrome.css as it was mentioned in this tread

   #pw_manager_button .toolbarbutton-icon {
   list-style-image: url('image/CustomIcon_Padlock.svg') !important;
   }

   BTW list-style-image: can be used for changing icons for the majority of extensions

[Speravir]

Ping: User Aborix in Re: userChrome.js Scripte für den Fuchs (Diskussion) (Camp Firefox; German) pointed out, that gBrowser.addTab(<URI>) does not work anymore in Fx 63 and has to be replaced by either gBrowser.addWebTab(<URI>) or gBrowser.addTrustedTab(<URI>) depending on <URI>. At least downloads_button.uc.js is affected by this.

[Aris-t2]

Thanks for the note.

I'm using this code to add a new tab since a while now: gBrowser.addTab('about:downloads', {triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal()});. It basically is the old one with some nonsense after the uri I copy&pasted from internal Firefox code. It works fine even in Fx65.

[Speravir]

Strange … ( I cannot judge this, but we both know that Aborix usually is not uttering nonsense.)

[Aris-t2]

You misunderstood me. I meant {triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal()} is new nonsense Mozilla now requires for the old(?) addTab function within Firefox code. I just reused it, because I was not aware of gBrowser.addWebTab(<URI>) or gBrowser.addTrustedTab(<URI>) by that time.

For about:downloads gBrowser.addTrustedTab works fine.

[Speravir]

Maybe we should have written this in German … ;-)

[Crybal]

Good evening.I am using v.60esr.I ..think I have put all files in the right places but it doesnt seem to work.Does it work with 60esr? I have placed the scripts in _C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\profname\chrome\userChrome , is it right? The syntax I use in userChrome.js is _userChrome.import("/userChrome/restartbutton.uc.js", "UChrm"); is it right?

[Aris-t2]

Have you cleared the script cache? https://github.com/Aris-t2/CustomJSforFx#scriptstartup-cache-must-be-deleted-after-every-change

Which method are you using and have you also tried the other one?

[Crybal]

I am using method 2 which is supposed to clear it automatically.Did I put the files in the right places? I ve not tried the other one

[Crybal]

OK.I did it works ok.I really thank you.By the way...the double click that opens a new tab,could it be done even on any tab? I mean except on an empty space on the tabs bar.

[Aris-t2]

Yes, edit the file "tabstoolbar_doubleclick_opennewtab.uc.js" and remove the line && e.target.localName != "tab". Don't forget to clear the script cache afterwards. The easiest way to do this is using my restart button/menuitem script and middle-clicking on button/menuitem to restart the browser.

[Crybal]

Done,thanks.This is more useful for me

[garywill]

Can we use element other than toolbarbutton#alltabs-button in css file?

If in script I move/add toolbar, toolbarbutton#alltabs-button may cause script repeated forever. I tried some other, but some cause addon's popup window also infacted by script. (Or is there any method to judge if it's the browser main window or a popup window?)

I have tried some else, some work ,some don't execute script at all. I have no idea why.

[Aris-t2]

Sure, I use character encoding button for this. Add the button to a toolbar. Use this code afterwards:

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

#main-window:not([customizing="true"]) toolbarbutton#characterencoding-button {
  visibility: collapse;
}

[garywill]

Hi Aris, Could you tell me how to listen to fullsreen event in userchrome js? I tried

document.addEventListener("fullscreenchange", function( event ) {
      console.log("fullscreen event");
})

It didn't work.

---

Actually, what I want to do is: after moving tab bar to bottom using js, make it autohide in fullscreen mode. I tried

tabsbar.fullscreentoolbar=false;  // doesn't work
document.querySelector("#TabsToolbar[inFullscreen] > *").style.visibility = "collapse";
document.querySelector("#TabsToolbar[inFullscreen]:hover > *").style.visibility = "visible";

Turned out the querySelector only works without [inFullscreen]

[Aris-t2]

You could try to monitor/observe #main-window node, it applies a "sizemode=fullscreen" attribute. "[inFullscreen]" is not used anymore.

[Crybal]

Is there a script to lock one tab so that the close button does not appear at all?

[Aris-t2]

@Crybal I found some here, but haven't tested them. https://github.com/Endor8/userChrome.js/blob/master/Firefox-57/tabLockModoki.uc.js https://github.com/ardiman/userChrome.js/tree/master/tablock https://github.com/ardiman/userChrome.js/tree/master/tablocklite

[krystian3w]

Why on restart button on Windows 10 x86 Pro does not work middle click on restart button and works fine on Windows 7 x64 Pro?

[Aris-t2]

Works fine here on Windows 10 x64 Pro, but this feature is not bound to any OS or OS version. Try to clear your startup caches.

[dionrus]

i`m using restart_item_in_menu.uc.js but there is no command in menu. Also i use some tweaks from CustomCSSforFx. Method used fo CustomJS: M2 Screenshots:

System information: OS & OS version: win ent 10.0.17763.134 OS theme: windows default DPI / HiDPI resolution: Firefox version: 60.3.0esr Firefox theme: default

[Aris-t2]

Make sure you clean cache files ( https://github.com/Aris-t2/CustomJSforFx#scriptstartup-cache-must-be-deleted-after-every-change ) after every change. Other than that I only can tell you to repeat and verify all steps or to test method 1.

[dionrus]

I`ve tried to clean cache manually and with middle click on restart button - no result, methon 1 - no result. Is it possible to debug scripts? In devtools console i see nothing strange...

[Aris-t2]

There must be something wrong on your side. Test Portable Firefox to be sure. I can confirm the scripts work fine.

No idea what you want to debug. It looks like scripts do not get loaded on your system.

[Acid-Crash]

Hi, @dionrus Same here, Method2 restart_item_in_menu on latest Nightly works fine.

[TroudhuK]

If someone knows a way to keep live bookmarks in Firefox 64+ exactly like it was (that is not like the Livemarks extension), I'm very very interested.

[pro100Hub]

@Aris-t2 Tell please, is it possible to add a new item to the Tab context menu using JS or XML? Interested in "Bookmark this page" (Ctrl+D). When we press the right mouse button on the tab, then this item appears. One condition: this item should not appear if this bookmark has already been added earlier under the same address.

[pro100Hub]

@Aris-t2 It seems i noticed the script (tabstoolbar_doubleclick_opennewtab) does not work correctly. When i click on the navigation button with a double click, a new tab opens, so it should not happen. Can you please check and fix it?

[Aris-t2]

Test the new file regarding tabstoolbar_doubleclick_opennewtab.

[pro100Hub]

@Aris-t2 Sorry, i noticed a problem in another file, in this tabstoolbar_doubleclick_anywhere_opennewtab.uc.js

[Aris-t2]

My definition of "anywhere on tabs toolbar" includes tabs, buttons and scrollbuttons.

[pro100Hub]

@Aris-t2 Can you exclude buttons from the function? This is really very discomfort when need to double-click to scroll through the navigation. In the best case, it is sufficient to leave the function of opening a new tab only on the tab itself. Please, this is very important.

[Aris-t2]

Test this

var DoubleClickAnywhereOnTabsToolbarMOD = {
  init: function() {

    try {

      gBrowser.tabContainer.addEventListener('dblclick', function abcd(e) {
        if(e.button==0
            && e.target.localName != "toolbarbutton"
              && e.originalTarget.getAttribute("anonid") != "scrollbutton-up"
                && e.originalTarget.getAttribute("anonid") != "scrollbutton-down"
                  && e.originalTarget.getAttribute("class") != "scrollbutton-up"
                    && e.originalTarget.getAttribute("class") != "scrollbutton-down"
                      && e.originalTarget.getAttribute("anonid") != "close-button"
                        && e.originalTarget.getAttribute("class") != "close-button"
                      ) {

            e.stopPropagation();
            e.preventDefault();

            BrowserOpenTab();

        }
      }, true);

    } catch(e) {}

  }

}

setTimeout(function(){
  DoubleClickAnywhereOnTabsToolbarMOD.init();
},500);

[pro100Hub]

Test this

This method works amazingly. Excellent! I am very happy. Thank you very much, Aris. My respect and reverence for you. :handshake:

[LionWrathz]

Hi! Aris i was wondering if you can add this code on addtab_in_tab_context_menu.uc.js .

to make it look like this : https://i.imgur.com/C00BR7O.png

i tried to modified it but it doesn't work and the newtab pages open white please fixed it.

i try this code and run this add on : https://addons.mozilla.org/en-US/firefox/addon/new-tab-context/

and it works i don't like any add on run i want a Script to run it simple , i hope you understand what am trying to say.

(function() { var css =` / New Tab Context - move the menu item to the top /

tabContextMenu menuitem[label="New Tab"] { -moz-box-ordinal-group: 0 !important; }

/ New Tab Context - hide the icon /

tabContextMenu menuitem[label="New Tab"] .menu-iconic-icon { display: none !important; }

/ Duplicate Context - move the menu item second from the top /

tabContextMenu menuitem[label="Duplicate"] { -moz-box-ordinal-group: 1 !important;

}`;

var sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);
var uri = makeURI('data:text/css;charset=UTF=8,' + encodeURIComponent(css));
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

})();

[LionWrathz]

take a look how it looks like : https://imgur.com/P6sHqu3

[pro100Hub]

I join the request of @LionWrathz. Also in the context menu of the tab, i suggest adding the function “Bookmark for the current tab” instead of using a star in the address bar and ctrl+d.

[Aris-t2]

So what you are asking for is basically hiding the icon and moving the "add tab" menuitem to the top?

Why not just adding

#newtab-menuitem {
  -moz-box-ordinal-group: 0 !important;
}
#newtab-menuitem_sep,
#newtab-menuitem .menu-iconic-icon {
  display: none !important;
}

to userChrome.css without modifying Javascript files? Of course the CSS code can be added to the js file too, if needed.

// New Tab script for Firefox 60+ by Aris
// Adds 'New Tab' item to tab context menu

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

var NewTabMenuItem = {
  init: function() {

    var item_label = "New Tab";

    try {
      addtab_sep = document.createXULElement("menuseparator");
      addtab_sep.setAttribute("id","newtab-menuitem_sep");
      document.getElementById("tabContextMenu").appendChild(addtab_sep);
    } catch(e) {}

    try {
      addtab_item = document.createXULElement("menuitem");
      addtab_item.setAttribute("label", item_label);
      addtab_item.setAttribute("id","newtab-menuitem");
      addtab_item.setAttribute("class","menuitem-iconic");
      addtab_item.setAttribute("key", "T");
      addtab_item.setAttribute("oncommand", "NewTabMenuItem.newTab();");
      document.getElementById("tabContextMenu").appendChild(addtab_item);
    } 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('\
      \
      #newtab-menuitem .menu-iconic-icon {\
        list-style-image: url("chrome://browser/skin/new-tab.svg"); /* icon / path to icon */ \
      }\
      #newtab-menuitem {\
       -moz-box-ordinal-group: 0 !important;\
      }\
      #newtab-menuitem_sep,\
      #newtab-menuitem .menu-iconic-icon {\
        display: none !important;\
      }\
      \
    '), null, null);

    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

  },

  newTab: function() {

    // adds a new tab
    // replace 'about:newtab' with a custom url, if needed
    try {
      var mainWindow = Components.classes["@mozilla.org/appshell/window-mediator;1"]
                        .getService(Components.interfaces.nsIWindowMediator)
                        .getMostRecentWindow("navigator:browser");
      mainWindow.gBrowser.selectedTab = gBrowser.addTab('about:newtab', {triggeringPrincipal: Services.scriptSecurityManager.getSystemPrincipal()});
    } catch (e) {}

    /* focuses location bar */
    try {
      document.getElementById('urlbar').focus();
      document.getElementById('urlbar').select();
    } catch (e) {}

  }

}

NewTabMenuItem.init();

[Aris-t2]

@pro100Hub There already is a "Bookmark Tab" entry in context menu

Edit "Bookmark Tab" menuitem is a default menuitem in tab context menu in Firefox 64+.

[Aris-t2]

@LionWrathz

I uploaded a new addtab_in_tab_context_menu.uc.js file. You can not set icon visibility and menuitem position within js file.

[LionWrathz]

there is a little problem ,about:newtab and about:blank . it make the pages white , could you make it run like ctrl+t instead of the url address, like this addons ? https://addons.mozilla.org/en-US/firefox/addon/new-tab-context/

[Aris-t2]

Try 'about:home' instead.

No idea why the page is white for you, but for me the same page opens for 'about:newtab' and 'about:home'. 'about:blank' is not used anywhere in the code.

If the add-on does the job for you, why would you use the script then?