aboutaddons-button.uc.js stopped working in FF 134

[nollinvoyd]

I tried to edit the about_button.uc.js

// - replace 'about:config' url with a different 'about:' url
// - replace button id
// - replace icon / icon url / icon color

It did not work for me. Obviously, I did something wrong.

Help please.

[Speravir]

Note: See also question of issue starter and replies: Aris-t2/CustomCSSforFx#722 (comment)

I’ve linked there to about_button.uc.js.

First I must say sorry to you: I just now realized, that Aris’ version is in parts different from mine (I do not refer to the change putting configurable variables quite to the beginning). So, this could in theory be a reason that it still worked for me, but not with the version downloaded from here, despite I’ve once downloaded it from here. @Aris-t2 could you, please, compare?

This works fine for me:

// 'about:'-Button script for Firefox 89+ by Aris, edits by Speravir
//
// Need a different 'about' page button?
// - replace 'about:config' url with a different 'about:' url
// - replace button id
// - replace icon / icon url / icon color

(function() {

if (!window.gBrowser) return;// add. Speravir

const
	buttonID = "about-addons-button",
	address = "about:addons",
	labelText = "About:addons Button", // button title
	tooltip = "Open addons page", // tooltip content
	css = // code for button icon
`#${buttonID} .toolbarbutton-icon {
	list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); /* icon / path to icon */
	fill: dimgray; /* icon color name/code */
}`;

try {
	ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs");
	let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

	CustomizableUI.createWidget({
	id: buttonID,
	defaultArea: CustomizableUI.AREA_NAVBAR,
	removable: true,
	label: labelText,
	tooltiptext: tooltip,
	onClick: function(event) {

		let win = Components.classes["@mozilla.org/appshell/window-mediator;1"]
		.getService(Components.interfaces.nsIWindowMediator)
		.getMostRecentWindow("navigator:browser");

		if(event.button === 0) {
			try {
				win.gBrowser.selectedTab = win.gBrowser.addTrustedTab(address);
				setTimeout(function(){
					document.querySelector("#toolbar-context-menu").hidePopup();
				},0);
			} catch (e) {}
		}

		if(event.button === 1) {
			try {
				openAboutDialog();
			} catch (e) {}
		}

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

	// style button icon
	let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(css), null, null);
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

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

})();

[nollinvoyd]

Note: See also question of issue starter and replies: Aris-t2/CustomCSSforFx#722 (comment)

I’ve linked there to about_button.uc.js.

First I must say sorry to you: I just now realized, that Aris’ version is in parts different from mine (I do not refer to the change putting configurable variables quite to the beginning). So, this could in theory be a reason that it still worked for me, but not with the version downloaded from here, despite I’ve once downloaded it from here. @Aris-t2 could you, please, compare?

This works fine for me:

May I ask which version of Firefox you're using?

I reverted back to FF133.03 for testing. Yours, as well as my original file, work normally in FF133.

However, neither yours or mine works in FF134.02.

[Speravir]

May I ask which version of Firefox you're using?

The most recent FF134.02.

[nollinvoyd]

May I ask which version of Firefox you're using?

The most recent FF134.02.

May I ask what you conclude from this, using a fresh profile with only only a few minor settings changes, about:config css activation, and the Chrome folder added

Fresh profile with FF133 - Both buttons - Aris & Speravir versions

Same fresh profile with FF135, "Extensions button" only - Aris & Speravir versions

There are 2 other custom buttons that appear in both scenrios.

No need to post images of when either Aris & Speravir versions were used because it would be redundant. Their appearance is identical, whether they are powered by either 133 & 135.

Bottom line, the only addition/alteration to the fresh profile is the Chrome folder, but when FF135 is used, the custom about:addon button is not available.

Any idea how this can happen? I'm just guessing but Is it possible that your Chrome setup is pointing some portion of the script to somewhere that doesn't exist in mine?

Is it in any way possible for you to send me a copy of a working profile?

[nollinvoyd]

May I ask which version of Firefox you're using?

The most recent FF134.02.

Somehow, I overlooked the fact that we have been discussing different buttons.

I mixed up my problematic "aboutaddons-button.uc.js", with "about_button.uc.js", even tho I have the correct button listed in the thread title.

The majority of my custom buttons are working now, except for aboutaddons-button.uc.js, It is no longer listed in the archive.

`// 'about:'-Button script for Firefox 89+ by Aris, edits by Speravir
//
// Need a different 'about' page button?
// - replace 'about:config' url with a different 'about:' url
// - replace button id
// - replace icon / icon url / icon color

(function() {

if (!window.gBrowser) return;// add. Speravir

const
buttonID = "about-addons-button",
address = "about:addons",
labelText = "About:addons Button", // button title
tooltip = "Open addons page", // tooltip content
css = // code for button icon
#${buttonID} .toolbarbutton-icon { list-style-image: url("chrome://mozapps/skin/extensions/extension.svg"); /* icon / path to icon */ fill: dimgray; /* icon color name/code */ };

try {
ChromeUtils.importESModule("resource:///modules/CustomizableUI.sys.mjs");
let sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

CustomizableUI.createWidget({
id: buttonID,
defaultArea: CustomizableUI.AREA_NAVBAR,
removable: true,
label: labelText,
tooltiptext: tooltip,
onClick: function(event) {

	let win = Components.classes["@mozilla.org/appshell/window-mediator;1"]
	.getService(Components.interfaces.nsIWindowMediator)
	.getMostRecentWindow("navigator:browser");

	if(event.button === 0) {
		try {
			win.gBrowser.selectedTab = win.gBrowser.addTrustedTab(address);
			setTimeout(function(){
				document.querySelector("#toolbar-context-menu").hidePopup();
			},0);
		} catch (e) {}
	}

	if(event.button === 1) {
		try {
			openAboutDialog();
		} catch (e) {}
	}

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

// style button icon
let uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent(css), null, null);
sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

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

})();`

Please give me another opportunity to address this, even it is just a suggestion for where I can get help elsewhere..

[nollinvoyd]

May I ask which version of Firefox you're using?

The most recent FF134.02.

I was hoping to get as response about the about:addons script, and the fact there was a misconceptions that we were discussing the about:button

[Aris-t2]

Use this script as base: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js

Replace both about:about with a different about page, e.g. about:addons.

Replace chrome://global/skin/icons/defaultFavicon.svg with chrome://mozapps/skin/extensions/extension.svg.

There is no about:addons script within this project.

[nollinvoyd]

Use this script as base: master/scripts/about_button_generic.uc.js

Replace both about:about with a different about page, e.g. about:addons.

Replace chrome://global/skin/icons/defaultFavicon.svg with chrome://mozapps/skin/extensions/extension.svg.

There is no about:addons script within this project.

Thanks, I didn't realize that about;addons wasn't in your list. Much appreciated.

How do I find the URl;'s for other about buttons, i.e. about:config? I tried to create one, It's now shows in the in the userchromeJS Manager menu, but not in the More Tools menu.

I also have several other scripts from the repository that aren't working for me. Can I list them here, or perhaps in a new thread?

[Aris-t2]

Not sure what "userchromeJS Manager menu" might be, but you can create as much buttons as you want using about_button_generic.uc.js

(If you need all about pages, visit about:about for an overview.)

• save about_button_generic.uc.js as about_mozilla_button.uc.js
• change button name to e.g. "About Mozilla Button" https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js#L15
• change button id to e.g. about_mozilla_button https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js#L20
• change "about:about" in https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js#L35 and https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js#L37 to "about:mozilla"
• add an own icon, if you like https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js#L52
• edit userChrome.js and add the new button to it userChrome.import("/userChrome/about_mozilla_button.uc.js", "UChrm");

Repeat for other buttons.

I can not tell you much about scripts, that wont work for you. Using this projects files without mixing them with other projects works for me.

[nollinvoyd]

I can not tell you much about scripts, that wont work for you. Using this projects files without mixing them with other projects works for me.

I understand. I was only referring to scripts from your project.

II was able to create an about:config button, but I don't know how to deal with the icons. I'm getting blank icons for that and the about_mozilla_button

Another odd thing. When I started using the about:addon button, it had the puzzle piece icon. Somehow along the way, it changed to this

[Aris-t2]

You have to add different icons to the line that points to the icon: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/about_button_generic.uc.js#L52

The puzzle piece icon:
chrome://mozapps/skin/extensions/extension.svg

[nollinvoyd]

You have to add different icons to the line that points to the icon: master/scripts/about_button_generic.uc.js#L52

The puzzle piece icon: chrome://mozapps/skin/extensions/extension.svg

The about:addons buton was configured correctly. I discovered that puzzle piece icon not showing was due to some type of conflict caused by no icons chosen, for those two other buttons I created, that did not have an icon change in #L52.

But I don't know what to put there.

For testing purposes, using the about:config button, I changed #L51, and used star_button.svg (because it exists in my Chrome 'image" folder) in #L52

That restored the about:addons puzzle piece, but the about:config button icon remained blank. I tried other variations in #L52 without success. Does it have to be an .svg file? Can it be a .png? Must it be a file in the "image" folder, or can it be elsewhere locally? Do I have to include the entire path?

Edit: I changed the about:config button bask to this, and now It has the generic globe button, but changing the .svg file only removes the generic icon.