[JavaScript][Firefox] General JavaScript talk and custom userChrome.js scripts (v2)

[Aris-t2]

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

Continued from https://github.com/Aris-t2/CustomJSforFx/issues/4

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

Other custom script collections - by ardiman - by Endor8

[jra66]

Hi Aris,

thank you very much for solving the latest issue with the popup width in locationbar_popup_classic_with_two_lined_results.uc.js. I had the same problem, too, but didn't have time to report. One issue still remains: If you have too many search engines installed, the width of the popup is greater than the width of URL bar (I am on FX 70.0b6).

In previous versions, the line with the search engines got wrapped.

Hope that you can fix this, too.

[Aris-t2]

@jra66 Posted a new update. Forgot to limit box width of bottom search box.

[jra66]

Thanks for the update, Aris. Now the width of the popup is limited, but the result is even worse :grin:

[Aris-t2]

Unfortunately this browser area is way too messy to fix. I can not find a proper workaround without breaking other parts of the ui in Fx70 beta.

Adopting code from Fx71 to Fx70 breaks search engine buttons context menu.

Looks like this here on 71:

You can temp. use this workaround on Fx 70 (71 does not require it), but you will lose button context menu of search engine buttons:

#urlbar .search-one-offs { 
  display: flex !important;
}
#urlbar .search-one-offs-context-menu { 
  display: none !important;
}

Removing the label will also offer some space:

#urlbar .search-panel-one-offs-header { 
  display: none !important;
}

EDIT New update fixes the issue with Fx70, but changes the appearance of one-off search engines area slightly. (No label and no space between engine buttons and options button)

[jra66]

Thanks a lot for the fixes, Aris! Now everything is fine with FX 70 beta. I don't miss the label anyway ...

[zom243]

Hi...

I just update my Firefox from 66 to 69. Thanks for maintaining this plugin.. :D

I had a few problems when updating to 69, on 66 I used method 1 to customize through JS, downloaded the file directly from https://github.com/nuchi/firefox-quantum-userchromejs, now this is not working. So I tried using the files from your method 1, but not working too.

Maybe Mozilla already drops XBL support?

Now I'm using method 3 and it's working.

Another thing, I don't know if this should be on CSS or JS thread because I manipulate it using JS. Please take a look on the screenshot

Can you cut the long text as shown with arrow earlier so it doesn't obstruck the icons on the right?

Thanks!

EDIT I just retried 1st method, it works fine... :D

[Aris-t2]

Are you using the latest file? https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/locationbar_popup_classic_with_two_lined_results.uc.js

If yes, try to change the values here: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/locationbar_popup_classic_with_two_lined_results.uc.js#L229

Increase 50px to 80px.

[Acid-Crash]

Hi @Aris-t2 Based on the following comment dues _search_engine_icon_insearchbar.uc.js needs to be updated? https://github.com/Aris-t2/CustomJSforFx/issues/11#issuecomment-539034910

To be specific I'm interested in the fix of the search icon that sometimes doesn't change during restarts

[BoomerangAide]

Suggestion: add the "Unlock custom CSS usage in Firefox 69 and newer

about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true" from CustomCSS readme to this project readme too, at least for method 1 (didn't check the others).

note: if you saw it, yeah I first posted this in the wrong place

[Acid-Crash]

Hi @Aris-t2 Recently I've run into the following topic describing how to speedUp Firefox via Vacuuming SQL database files within profile https://www.reddit.com/r/firefox/comments/di51ps/a_surprising_way_to_gain_some_performance_by/ In general, I feel that whole topic might be reasonable but I'm no expert here. In one of the comments there is a hint that Vacuuming SQL databases can be executed directly from Firefox

about:support >> Go down to Places Database >> Click Verify Integrity That will vacuum the database as well as do a bunch of other checks

Could you please share your thoughts on the topic and maybe (if the whole deal is reasonable) look whether it is possible to make a script for a separate toolbar button to execute that "Verify Integrity" command from about:support?

[Aris-t2]

Reducing size of huge database files might speedup browser start, not I'm not sure, if this will be a noticeable speedup.

Haven't looked much into creating a button, but this code is used inside aboutSupport.js

ChromeUtils.defineModuleGetter(
  this,
  "PlacesDBUtils",
  "resource://gre/modules/PlacesDBUtils.jsm"
);

  button = $("verify-place-integrity-button");
  if (button) {
    button.addEventListener("click", function(event) {
      PlacesDBUtils.checkAndFixDatabase().then(tasksStatusMap => {
        let logs = [];
        for (let [key, value] of tasksStatusMap) {
          logs.push(`> Task: ${key}`);
          let prefix = value.succeeded ? "+ " : "- ";
          logs = logs.concat(value.logs.map(m => `${prefix}${m}`));
        }
        $("verify-place-result").style.display = "block";
        $("verify-place-result").classList.remove("no-copy");
        $("verify-place-result").textContent = logs.join("\n");
      });
    });
  }

Most likely importing resource://gre/modules/PlacesDBUtils.jsm and applying PlacesDBUtils.checkAndFixDatabase()to buttons click even should be enough.

[That-Random-Guy]

I'm on the latest release for Firefox and am currently in use of the 1st method for custom JS. Is there a known roadmap for dropping XBL support? I don't like waiting for the rug to be pulled from under.

[Aris-t2]

Nothing I heard of yet, but there always might be a Bugzilla thread/bug tracing such changes.

[BoomerangAide]

In the past, I tried in favicon_in_urlbar.uc.js to load the sheet icon from CustomCSSforFx. But I wasn't very satisfied with having to hardcode the path to the image, thus making the script not transferable to another computer without having to update it accordingly. I finally found the answer to that:

var sheet2 = 'file:///' +
              Components.classes["@mozilla.org/file/directory_service;1"].getService( Components.interfaces.nsIProperties).get("ProfD", Components.interfaces.nsIFile).path.replace(/\134/g,'/') +
              '/chrome/image/tab_favicon_sheet.png';

The code to convert the calculated profile path from using \ to using / was very annoying to find, but like that, it worked as I wanted it. I don't know if others users would have been interested in this, but if it's the case, the code is now available : )

[Pizzapops]

@Aris-t2 While searching Reddit for inspiration, I found a moveable appbutton script posted by u/Diab01ica1. Using method 2 JS, it is very functional and can be placed on the titlebar, tabbar, navbar or an addonbar. To use on the tab bar, it should be dropped on the first tab. The original script used menu.svg for the icon but I changed it to welcome-back.svg (small running fox seen below). It needs version appropriate button. movable-menu-button.uc.zip

Followup: 68esr needs menu.svg (hamburger icon) for script to work.

_Followup2: There seems to be a conflict with this js & and a file used by userChrome.css of CustomCSSfor FX. If the icon is moved to the tabs bar, the running fox icon does not show. Switch to menu.svg. Partial fix: I found the conflicting file. Classic_squared_tabs...... was the problem. I deactivated them in userChrome.css and the script works now in the tab bar. I also switched the icon to the version icon. appbutton_movable.uc.zip Enjoy!

[Aris-t2]

Nice find.

[Pizzapops]

@Aris-t2 I found the conflict with classic_squared_tabs.css. Padding, height & width are unset in lines 356-360 and lines 373-377 in classic_squared_tabs_australized.css. Commenting them out works but I prefer to change the padding to 2px and the height & width to 28px for a bigger icon. Any potential problems with this approach?

[Aris-t2]

If you do not have any buttons on tabs toolbar besides the new appbutton, everything should work fine.

[That-Random-Guy]

Not liking the new Search engine button mess (ff 70)...

Is there currently any known way to get the 69 implementation back? I don't see the need to have my default listed as an icon on this list... I already known how to use it. Mozilla and their random changes again.

[Aris-t2]

There is no general code to hide your selected engine, but you can hide those you do not need by using code like this (enter the Engine name showing in the tooltip when you hover a button):

.search-panel-one-offs button[tooltiptext="Google"] {
  display: none !important;
}

I also suggest to cleanup that area in general using this code:

/* reduce space around search engines */
#urlbar .search-one-offs {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding-inline-start: 4px !important;
  padding-inline-end: 0px !important;
}

[That-Random-Guy]

@Aris-t2 Thanks, mate. That did the trick. Enjoy the weekend. :)

[Acid-Crash]

Hi @Aris-t2. Wanted to ask one thing reg _password_managerbutton.uc.js As for now it works in following way:

• leftMouseClick opens "old style" popup window (chrome://passwordmgr/content/passwordManager.xul). Please note that there is no way to resize this popUp window((
• rightMouseClick opens "new style" aka LockWise tab with filtered out page domain (about:logins).

At the same time it seems like the overall shift to Lockwise is imminent within browser itself, so I wonder could you please at least update _password_managerbutton.uc.js to make it open LockWise on leftMouseClick. This logic is already present in one of AppMenu elements

P.S. Additionally maybe you can adapt the script to make Lockwise open in a popUp instead of the full sized tab?

[SenpaiSharp]

Would it be possible for a script to be able minimize Firefox to the notification tray area on a Windows system or would that be that beyond scope?

[Aris-t2]

Honestly, I have no idea whether or not such a feature is possible to achieve. Maybe you can ask the "MinimizeToTray" dev.

[Speravir]

I came here after a while, because I wanted to point you to Sören’s Posting about a code change in Firefox potentially affecting toolbar code from you (I didn’t check) …

… and noticed some updates of scripts I’m using (thumbs up!). Took a quick look on the changes … Although it is commented out this is a mistake: In this change for addonbar.uc.js it has at the very end to be AddAddonbar.init(); (seems to be a c&p error).

[Acid-Crash]

Hi @Aris-t2. Wanted to ask one thing reg _password_managerbutton.uc.js As for now it works in following way:

leftMouseClick opens "old style" popup window (chrome://passwordmgr/content/passwordManager.xul). Please note that there is no way to resize this popUp window((

rightMouseClick opens "new style" aka LockWise tab with filtered out page domain (about:logins).

At the same time it seems like the overall shift to Lockwise is imminent within browser itself, so I wonder could you please at least update _password_managerbutton.uc.js to make it open LockWise on leftMouseClick. This logic is already present in one of AppMenu elements

P.S. Additionally maybe you can adapt the script to make Lockwise open in a popUp instead of the full sized tab?

Hi @Aris-t2. Did you get a chance to look through my last comment?

[marty60]

Hi Aris,

There's more toolbar changes in the latest nightlies, this time with the Bookmark Toolbar.

This is what I was using to autohide it on the bottom like an addon bar in full screen:

`#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #PersonalToolbar { visibility: visible !important; }

main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #PersonalToolbar:hover {

  opacity: 1.0 !important;
  transition-delay: 0s !important;
  bottom: 0px !important;   

}

PersonalToolbar {

  -moz-window-dragging: no-drag !important;

}`

If it's no longer possible to decouple the bar and put it back on the bottom your addonbar script is still good, can that autohide in full screen? I tried this but lo luck:

`#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #addonbar { visibility: visible !important; }

main-window:not([chromehidden*="toolbar"]) #navigator-toolbox > #addonbar:hover {

opacity: 1.0 !important; transition-delay: 0s !important; bottom: 0px !important; }

addonbar {

-moz-window-dragging: no-drag !important; }`

[Aris-t2]

@Acid-Crash I posted another version where the left-click and middle-click features got switched. I don't know how to open this on in a custom window, because opening password manager is not just loading a url anymore, but executing a function.

@marty60

In CustomCSSforFx 2.8.6 simulated add-on bar works again.

The add-on bar JS script from here can offer autohide too. Use this code to achieve it.

With \, if inside addonbar.uc.js files CSS area:

          #main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #addonbar {\
            visibility: visible !important; \
            display: block !important; \
            min-height: 1px !important; \
            height: 1px !important; \
            max-height: 1px !important; \
          } \
          #main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #addonbar:hover {\
            min-height: 24px !important; \
            height: 24px !important; \
            max-height: 24px !important; \
          } \

Remove \ at lines end, if using the code inside userChrome.css.

[marty60]

Aris, that works great to autohide addonbar.uc.js, thank-you.

[Acid-Crash]

@Aris-t2 Thx for the help. I have replaced https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/password_manager_button_v2.uc.js#L31 with https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/password_manager_button_v2.uc.js#L27 And it seems to be working fine. Both MouseClick actions open new about:logins in a new tab (optionally with domain filter). Guess I can live with this))

[BoomerangAide]

I was wondering the difference between the 2 "Password Manager Button" scripts, so I copied their text into an online diff checker. Based on that, it look like it's just 2 mouse buttons are switched, but the comments at the beginning describing how it work are identical, maybe they need an update?

[BoomerangAide]

In the past, I mentioned researching opening download list in a dialog instead of a tab, I've pushed it beyond that since then, so I thought I would share my code, maybe some pieces could be useful to someone around:

download_button_open_list_directly.js.txt

Features:

-load the downloads list in a small window instead of a tab

-clicking the download button will either de-minimize, close or open the download window

-when there are downloads in the list, the download button popup change to list the amount of downloads under 4 different status (completed, ongoing, cancelled, stopped)

-the download window has a "Clear successful downloads" button that remove completed downloads, but don't touch cancelled or stopped ones (the default "clear" feature is annoying when it remove downloads that crashed while you were trying to clear stuff, and you find yourself with gaps in your downloaded stuff)

-the download windows has a "Retry All" button that should retry all downloads that stopped from an error (I haven't tested it yet, but there's no reason for it not to work)

~~edit: not working as it should on my Surface Pro on a Firefox 70 (instead of 69) without privacy mode being always enabled (my usual config). I think there's a "History" download list when not in permanent privacy (or without a "do not remember downloads" option) that make it seems like the buttons have no effect. But it still may provide some useful information on how some things can work, and I will find how to fix it eventually.~~

edit2: unless I made a mistake while copying the code from my tablet, this one should work better, with some features only available for Firefox 70+ (thanks to DownloadHistory.jsm being a new thing not finished or properly documented yet)

download_button_open_list_directly.js.txt

[BoomerangAide]

After updating to Firefox 70.0.1, I wasn't satisfied with the favicon from "favicon_in_urlbar.uc.js" to be sandwiched between the shield and the padlock. Moving it back to the left proved to be a pain, so eventually I switched to moving it all the way to the right. In addition, I didn't like the search glass icon when on an empty page, so I made sure it would no longer appear.

Here are my changes:

//added before FaviconInUrlbar for global access
var id_box = document.getElementById('identity-box');
var id_icon = document.getElementById('identity-icon');
[...]
//IN if(appversion >= 70) {
favimginurlbar.style.marginLeft = "4px"; //instead of marginRight
id_box.lastChild.after(favimginurlbar); //replace the code setting favimginurlbar elsewhere

//remove the search glass icon when it's here
if(window.getComputedStyle(id_icon).getPropertyValue('list-style-image').includes('search-glass.svg'))
    id_icon.hidden = true;
else
    id_icon.hidden = false;
[...]
//IN if(appversion >= 70) { within updateIcon function
//remove the search glass icon when it's here
if(window.getComputedStyle(id_icon).getPropertyValue('list-style-image').includes('search-glass.svg'))
    id_icon.hidden = true;
else
    id_icon.hidden = false;

Maybe it will be useful to someone.

[BoomerangAide]

Currently, in space_and_separator_restorer.uc.js, the flexible space wasn't working properly : it was bigger than the other space, but not flexible at all. To fix that:

tb_spring.setAttribute("flex","1"); 

to allow the preview to display the effect properly, and

toolbarspring {\
    max-width: 100% !important; \
}\

before the last \ in CSS part to restore ability of the flexible space to take as much space as possible.

Now I finally have buttons on the right, buttons on the left, and reducing window size no longer hide buttons on the right :D

edit: maybe min-width should be set in CSS too, but not sure what would be right: 0, 1 or a higher value?

[BoomerangAide]

https://github.com/simonlindholm/toggle-gifs/issues/50#issue-517648035 Do you think this is actually possible?

I'm using a webextension called Animated GIF right now, but it suck completely compared to pre-Quantum addon I had before. I wonder what could be brought back (not really expecting the GUI of the addon) through the kind of javascript we manipulate here, if that is a possibility?

[Aris-t2]

In general I think every JS feature of every in the past available add-on is possible to be recreated (somehow at least).

[Altsinn]

Hi @Aris-t2, Would it be possible to add function to "favicon_in_urlbar.uc.js" script that allows to open Page Info directly if you click i-icon/favicon? It was possible in pre-Quantum Firefox. Clicking on padlock would still open the default panel with connection and permission info. The current UI design requires to much needless clicking . I'm using FX 68 ESR.

[Aris-t2]

@Altsinn

// 'Favicon in urlbars identity box' script for Firefox 60+ by Aris
//
// This script restores current pages favicon inside urlbar (aka location bar, address bar or awesome bar).
// [!] If a page does not offer a favicon, browser branches default icon is shown.
// [!] In a multi-window environment pages without favicons might show wrong icons.
// option: set icon for pages without favicon
// Fx 70+: add favicon item to identiy box without replacing connection or tracking protection icons

var i_icon = 'chrome://browser/skin/identity-icon.svg';
var sheet = 'chrome://global/skin/icons/Portrait.png';
var brand = 'chrome://branding/content/identity-icons-brand.svg';
var globe = 'chrome://mozapps/skin/places/defaultFavicon.svg';

var icon_for_pages_without_favicon = brand; // i_icon, sheet, globe or brand (colorized Fx channel icon)

var favicon_click_opens_page_info_window = true;

var appversion = parseInt(Services.appinfo.version);

var FaviconInUrlbar = {
 init: function() {
   try {

    // on Fx 70+: add favicon to identity box without replacing existing icons
    if(appversion >= 70) {
      var favimginurlbar = document.createXULElement("image");
      favimginurlbar.setAttribute("id","favimginurlbar");

      if(favicon_click_opens_page_info_window)
        favimginurlbar.setAttribute("onclick","gIdentityHandler.handleMoreInfoClick(event);");    

      favimginurlbar.style.width = "16px";
      favimginurlbar.style.height = "16px";
      favimginurlbar.style.marginRight = "4px";
      document.getElementById('identity-box').insertBefore(favimginurlbar,document.getElementById('identity-box').firstChild);
    } else {

      if(favicon_click_opens_page_info_window)
        document.querySelector('#identity-icon').setAttribute("onclick","gIdentityHandler.handleMoreInfoClick(event);");
    }

    // update script every time tab attributes get modified (switch/open tabs/windows)
    document.addEventListener("TabAttrModified", updateIcon, false);
    document.addEventListener('TabSelect', updateIcon, false);
    document.addEventListener('TabOpen', updateIcon, false);
    document.addEventListener('TabClose', updateIcon, false);
    document.addEventListener('load', updateIcon, false);
    document.addEventListener("DOMContentLoaded", updateIcon, false);

    function updateIcon() {

     setTimeout(function(){ // timeout fixes wrong icon detection in some cases

      // get current tabs favicon
      var favicon_in_urlbar = gBrowser.selectedTab.image;

      // if current tab offers no icon, use selected icon (icon_for_pages_without_favicon)
      if(!gBrowser.selectedTab.image || gBrowser.selectedTab.image == null)
        if(!icon_for_pages_without_favicon) favicon_in_urlbar = brand;
          else favicon_in_urlbar = icon_for_pages_without_favicon;

      // on Fx 60-69: replace globe icon with favicon 
      // on Fx 70+: modify favicon item
      if(appversion >= 70) document.querySelector('#favimginurlbar').style.listStyleImage = "url("+favicon_in_urlbar+")";
      else document.querySelector('#identity-icon').style.listStyleImage = "url("+favicon_in_urlbar+")";

     },100);

    }

    /* restore icon badge for websites with granted permissions */
    var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);
    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(' \
        \
        .grantedPermissions::before { \
          content: "" !important; \
          display: block !important; \
          width: 6px !important; \
          height: 6px !important; \
          position: absolute !important; \
          -moz-margin-start: 11px !important; \
          margin-top:-8px !important; \
          background: Highlight !important; \
          border-radius: 100px !important; \
        } \
        \
    '), null, null);

    // remove old style sheet
    if (sss.sheetRegistered(uri,sss.AGENT_SHEET)) sss.unregisterSheet(uri,sss.AGENT_SHEET);

    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

  } catch(e) {}
 }
};

// initiate script after DOM/browser content is loaded
document.addEventListener("DOMContentLoaded", FaviconInUrlbar.init(), false);

[Altsinn]

@Aris-t2 Unfortunately it doesn't work. Did you include earlier version of FX? As I mentioned I'm using FX 68 ESR.

[Aris-t2]

You are right, this change was done for Fx70+ only.

I modified the code, but can not test it right now. Could you tell me, if its working now?

[Altsinn]

I checked and it has no effect - clicking on the favicon still opens the default panel only.

[Aris-t2]

Alright, the code now should work. Just tested on Fx 68, 71 and 73 on Win10.

[Altsinn]

It works as expected. Thx for the help!

[Pizzapops]

FirefoxPortable_72.0.1 has problems with JS

I use Fx71 as my daily browser with auto updates turned off. Because of all the complaints about Fx72, I decided to do a clean setup of Fx72 portable. Note: I usually install CustomJSforFx first to have access to restart button and additional toolbars.

1. Ran setup of FirefoxPortable_72.0.1
2. Added my usual FirefoxPortable.ini and set profile to profile.072 and exe to Firefox64.
3. Added necessary JS files to App/Firefox & App/Firefox64 folders
4. copied userChrome.js & userChrome folder to profile.072/Chrome folder
5. Started Fx72 and immediately turned off auto update and set toolkit.legacy......stylesheets to YES.
6. Result no functioning JS. Restarts ineffective.
7. Swapped App/Firefox64 from Beta and all scripts worked.
8. Tried the App/Firefox from Fx72.0.1 also but no-go.

I found a work-around. Install FirefoxPortable_71 and immediately turn off auto updates. repeat above steps. JS will work and CustomCSS can be added. Go to Appmenu/Help/About Firefox and update to 72.0.1. Everything should work.

[Aris-t2]

Which method are you using 1, 2 or 3? XBL support got dropped, so method 1 won't work on Fx72+ anymore for example, but your issue sounds like a cache glitch.

[Pizzapops]

I am using method 2 and have been for some time. The post was more of a PSA, in case someone else experiences it. I broke down and upgraded my daily Firefox 71 to 72.0.1. Chrome also got updated. Everything is working fine.

[allnamesarealreadytaken]

Hi, I used to use method 1 but this no longer works now that I've upgraded FF to 72. I've tried method 2, installed all files as instructed, added custom script (alt-searchbar) to userChrome.js, but nothing changed. After rechecking all files 1 by 1, I noticed that, at each restart of FF, the config-prefs.js file gets overwritten, and the 2nd line pref("general.config.filename", "config.js"); is deleted. Any idea what makes this happen and how to avoid it? FF 72.0.1 on Win10. Thanks.

[Aris-t2]

Never heard of such an issue.

Try to make that file read-only.

[allnamesarealreadytaken]

OK so I set the Read-only bit on the file, and this seems to have done the trick, config-prefs.js is no longer updated. I also found that the line to import the custom script was commented out (duh!), so I fixed that, but still no luck. Any other idea? Custom script is alternative_searchbar.uc.js, with these options enabled but not working: var clear_searchbar_after_search = true; var show_search_engine_names = true;

[Aris-t2]

You mean this placeholder?

// userChrome.import("/userChrome/my_other_script_name.uc.js", "UChrm");

Make sure you put the *uc.js files in the correct folder and also clear the caches.