about:addons menu

[stonecrusher]

From Firefox 68.0 something in Icons.Normal.css is causing menuitems in about:addons to disappear:

Same with right-click in URL-bar general.

[ChoGGi]

I only test it on palemoon and pre-quantum firefox/thunderbird. If you find out the line that causes it, I'll take a closer look.

[stonecrusher]

This is the bad boy (and depending on context probably the line before)

[ghost]

It seems that 1 line is messing it up. It's too bad because I really liked having CuteButtons on my browser. I'm assuming that I'll have to make do without. Just wanted to thank ChoGGi for making it possible to begin with.

[stonecrusher]

Well, by now I realized that those lines remove the bug, but also remove all the icons...

[ChoGGi]

Yeah, I'll have to fiddle around and figure out exactly what's causing it, gotta install ff and whatnot (when I get some free time).

[vladaurosh]

This breaks all menus for me in FF 68. Some menus are completely hidden (Bookmark, image 2). Some are visible but missing a lot of items (image 1).

[ChoGGi]

Looks like they removed the bindings/menu.xml file, so maybe recreating the bindings somehow will fix it?

[ChoGGi]

Hmm, I need to make these extends="userChrome.xml#menuitem-base" somehow point to Profile\chrome\userChrome.xml Not sure how, been awhile since I fiddled with this stuff?

https://gist.github.com/ChoGGi/c194980ee3fa723c69f9e11ad40cee79

[bege10]

Hmm, I need to make these extends="userChrome.xml#menuitem-base" somehow point to Profile\chrome\userChrome.xml Not sure how, been awhile since I fiddled with this stuff?

https://gist.github.com/ChoGGi/c194980ee3fa723c69f9e11ad40cee79

Can the linked file be used as a JS-script if scripts are enabled like here? https://github.com/Aris-t2/CustomJSforFx

Does the userChrome.xml exist already?

[bege10]

This code allows to show the icons in menus: menuitem[oncommand="UCL.openFolder();"],menuitem[oncommand="UCL.openCHRMFolder();"] {-moz-appearance:none!important; background: url(file:///F:/Users/bege/AppData/Roaming/Mozilla/icons/folder.png)no-repeat !important; padding-left:0px!important; background-position:5px 0px!important} But I couldn't find a way to address the tiles in mosaic.png. Who knows whether that is possible?

[ChoGGi]

Not with background no, that's why I use {-moz-image-region:rect(48px 256px 64px 240px)!important;list-style-image:url("mosaic.png")!important}

[bege10]

The icons still work for menus and menuitems that already have the CSS classes .menu-iconic or .menuitem-iconic. Is there any way to add these classes to the browser menus other than with menu.xml?

Edit: Strange, there are some items in appMenu-mainView that have icons from CuteButtons.css and they had the mentioned CSS classes. Now I look again and they don't have these classes any more. I am really confused. :confused:

[Skyyblaze]

So is there a fix yet? I'm a bit confused by the comment of bege10, if I add this at the beginning of the .css file will the icons work again?

[ChoGGi]

Nope

[bege10]

Not with background no, that's why I use {-moz-image-region:rect(48px 256px 64px 240px)!important;list-style-image:url("mosaic.png")!important}

And that does not work in Fx68+ any more :frowning_face: Because there has been no solution so far: Do I have to split mosaic.png in single files and reconnect them in Icons.Normal.css? That would be the work for weeks :sweat:

[Skyyblaze]

Could we maybe speed-up the process if we do it all together?

[iamjustaguest]

@bege10

Tiles should work with

background: -moz-image-rect(url("file:///F:/Users/bege/AppData/Roaming/Mozilla/icons/mosaic.png"),160, 16, 176, 0) no-repeat;

Or just mosaic.png if script is in the same chrome Folder.

substitute for

-moz-image-region:rect(160px 16px 176px 0)

[bege10]

In Thunderbird 68 the CSS code still works if the classes menu-iconic and menuitem-iconic are added to the menus and menuitems. I removed all fixes and so on from Icons.Normal.css and loaded this JS script:

setTimeout(function() { var ucjsAC = { init : function () { const menu = document.querySelectorAll('menu'); menu.forEach(query => { query.className += 'menu-iconic'; }); const menuitem = document.querySelectorAll('menuitem'); menuitem.forEach(query => { query.className += 'menuitem-iconic'; }); }, } ucjsAC.init(); }, 1000);

This is how to get JS scripts run in Thunderbird (and Firefox) https://github.com/Aris-t2/CustomJSforFx

The icons for context menus are back.

[stonecrusher]

@bege10 Thanks, almost works! But messes up the split menu: Should look like this:

[bege10]

These are screenshots from Firefox? I use the CuteButtons CSS code only in Thunderbird, I didn't test it in Firefox. Maybe somebody knows how to adapt the script for Firefox. (I know little about Javascript and put this together with a lot of search and trial and error.) Did you remove everything from the CSS code except the plain definitions for the icons? (This helped in Thunderbird, don't know whether this makes a difference in Firefox.)

[stonecrusher]

Whoops, forgot to write that. Yes, Firefox 72.0.2 with dark theme. In Icons Normal.css I deleted everything up to /*folder*/ plus /*dialog button Linux issue*/ and /*thunderbird stuff*/ and /*chatzilla menus*/ at the bottom. No changes :-/

[ChoGGi]

If I have some time on the weekend, I'll see what rules are blanking out those buttons.

[bege10]

Those menuitems already have the class 'menuitem-iconic'.

Try this

setTimeout(function() { var ucjsAC = { init : function () { const menu = document.querySelectorAll('menu'); menu.forEach(query => { if (query.className != 'menu-iconic') query.className += 'menu-iconic'; }); const menuitem = document.querySelectorAll('menuitem'); menuitem.forEach(query => { if (query.className != 'menuitem-iconic') query.className += 'menuitem-iconic'; }); }, } ucjsAC.init(); }, 1000);

[stonecrusher]

@bege10 It works! Thanks so much, now FF feels good and complete again 👍

/edit ah ok, the about:addon menu doesn't work yet. But main context menus do and that's already great!

[ChoGGi]

It's been awhile since I did any js, but I think you can do this: document.querySelectorAll('menu:not([menu-iconic])', 'menuitem:not([menuitem-iconic])')

[bege10]

@bege10 It works! Thanks so much, now FF feels good and complete again 👍

@stonecrusher I am glad to hear I could help you.

/edit ah ok, the about:addon menu doesn't work yet. But main context menus do and that's already great!

The addons manager has been completely refurbished. The old CuteButtons CSS code won't work there any more. Do you know Aris' code for Firefox? https://github.com/Aris-t2/CustomCSSforFx/releases That also contains CSS code for the new addons manager (not the context menu).

[stonecrusher]

Of course I know Aris' Firefox CSS bible ;-) @ChoGGi Good idea, but that shorter version doesn't work for me:

/*jshint esversion: 6 */
setTimeout(function() {
    var ucjsAC = {
        init: function() {
            const iconic = document.querySelectorAll('menu:not([menu-iconic])', 'menuitem:not([menuitem-iconic])');
            iconic.forEach(query => {
                query.className += 'menu-iconic';
            });
        },
    };
    ucjsAC.init();
}, 1000);

Looking at the old code, shouldn't it be querySelectorAll('menu:not(.menu-iconic)', 'menuitem:not(.menuitem-iconic)') anyway as we're looking for tags missing a class and not a tag missing an attribute?

[ChoGGi]

Also been awhile since I did any CSS :)

It should return both menus n menuitems, so you need to check which

let menus = document.querySelectorAll(
    'menu:not(.menu-iconic)', 'menuitem:not(.menuitem-iconic)'
);
menus.forEach(menu => {
    if (menu.nodeName == "menuitem") {
        menu.className += 'menuitem-iconic';
    } else {
        menu.className += 'menu-iconic';
    }
});```

[stonecrusher]

Ah right sorry I was applying menu-iconic just to both... Anyway I mean it's for learning purpose only as bege10's version already worked well :-)

[bege10]

My code does not work on items that already have a different class name, e.g. context menu on nav-bar buttons. Therefor I added to it. Please, keep in mind that this is "put together" by someone who has little knowledge about Javascript. It may still not work in all instances and be laborious ;-)

setTimeout(function() {
    var ucjsAC = {
        init : function () {
            const menu = document.querySelectorAll('menu');
            menu.forEach(query => {
                if (typeof query.className === 'undefined') {
                query.className += 'menu-iconic';}
                else if (query.className.indexOf('menu-iconic') === -1) {
                query.className += ' menu-iconic';
                                }
            });
            const menuitem = document.querySelectorAll('menuitem');
            menuitem.forEach(query => {
                if (typeof query.className === 'undefined') {
                query.className += 'menuitem-iconic';}
                else if (query.className.indexOf('menuitem-iconic') === -1) {
                query.className += ' menuitem-iconic';
                                }
            });
        },
    }
ucjsAC.init();
}, 1000);

[bege10]

aborix in camp-firefox.de forum supplied a better code:

setTimeout(function() {
    var ucjsAC = {
        init : function () {
            const menu = document.querySelectorAll('menu');
            menu.forEach(query => query.classList.add('menu-iconic'));
            const menuitem = document.querySelectorAll('menuitem');
            menuitem.forEach(query => query.classList.add('menuitem-iconic'));
            const appMenuButton = document.querySelectorAll('toolbarbutton.subviewbutton');
            appMenuButton.forEach(query => query.classList.add('subviewbutton-iconic'));

        },
    }
ucjsAC.init();
}, 5000);

[B00ze64]

With the help of Aris I managed to add Icons to all of Firefox with only CSS, if you are interested see my repo...

[stonecrusher]

Unfortunately Firefox 112 killed CuteButtons for me :(

[TPS]

Unfortunately Firefox 112 killed CuteButtons for me :(

@stonecrusher Try @B00ze64's https://github.com/B00ze64/FF-Menu-Icon-Plus-CSS? That seems updated w/in the last 2 months.

[ChoGGi]

Honestly, I barely update this for palemoon.

No promises (got some windows to install this weekend hopefully), but I'll probably do something with it :)

[bege10]

Firefox 112 does not support -moz-image-region any more, that's why you see the whole mosaic.png everywhere. You need to split up the mosaic.png in single files or use a completely different way as @B00ze64 does in the above link.

[ChoGGi]

Oh....

Nevermind :(

[stonecrusher]

Thank you @TPS that solution works well!

Also thank you to all people involved in making CuteButtons and making CuteButtons function for so long. It was an not negligible improvement of work speed and sheer beauty :-)

[ChoGGi]

Also thank you to all people involved in making CuteButtons

Just me (and the Crystal SVG icon set) Your welcome :)

https://bugzilla.mozilla.org/show_bug.cgi?id=1817071 sigh

Edit: I won't say I'll never update it to separate images, but that'll take some slogging/time. I don't have much of that :(