Having trouble removing border radius on a panel

MartijnJ · October 24, 2019, 2:04pm

So I’m trying to create a panel that I want to overlay on the browser.
But I can’t seem to be able to remove the border radius.
I’ve set the border to “none” and border-radius to “0px”, but there remains this little bit of rounding on the corners.

Increasing the border-radius does work though.

Does anyone have any ideas or experience with this?
Or maybe know of a good alternative to panels?
What I’m looking for wouldn’t need to extend outside the browser window.

Edit: This is on Windows 7 btw. Don’t know about other OS’s yet

noitidart · July 18, 2015, 7:17am

Set -moz-appearance to none.

https://gist.github.com/Noitidart/9445992

MartijnJ · July 18, 2015, 10:18am

Hmm, gave it a try but no luck.
My reason for wanting to remove the border radius is the same as yours:
I want to overlap the panel on another element.

I’ve checked Ubuntu, but with me the standard panel already has 0 radius borders.
Though “-moz-appearance: none” does seem to be necessary there to remove standard styling.
On Windows you can just override the style properties.

Probably should have said in the original post, the screen shot is of Windows 7.

Right now I’m trying out a box element instead of a panel.
And so far it seems to be a good option for my case.

noitidart · July 18, 2015, 8:04pm

i am actually working on creating a panel that overlays all monitors. due to mac having a setting which is default checked, it disallows peopls windows from spanning across multiple window. disablging that pref requires login. so what i opted for is to create a chromeless window and set win.fullScreen to true for each window. this is working for me thank god! ive been struggling with it for awhile.

this is my code, the contents of panel.xul is important it holds hidechome=true attribute.

that opens the window, on load the window notifes observers, and i catch that and set it full screen:

github.com

Noitidart/NativeShot/blob/win-per-monitor-method-GTK_TESTING/bootstrap.js#L106


	core.firefox.version = Services.appinfo.version;
	
	console.log('done adding to core, it is now:', core);
}


//start obs stuff
var observers = {
	'nativeshot-editor-loaded': { // this trick detects actual load of iframe from bootstrap scope
		observe: function (aSubject, aTopic, aData) {
			obsHandler_nativeshotEditorLoaded(aSubject, aTopic, aData);
		},
		reg: function () {
			Services.obs.addObserver(observers['nativeshot-editor-loaded'], core.addon.id + '_nativeshot-editor-loaded', false);
		},
		unreg: function () {
			Services.obs.removeObserver(observers['nativeshot-editor-loaded'], core.addon.id + '_nativeshot-editor-loaded');
		}
	}
};
//end obs stuff

noitidart · July 18, 2015, 8:05pm

holy hell discource’s import of the relavent lines just by simply pasting the link to github is absolutely amazing! how can i like my own post? hahaha

MartijnJ · July 19, 2015, 11:22am

Sounds exciting, what are you building?

noitidart · July 20, 2015, 3:07pm

Thanks Martin it’s a native screenshot tool, all addons i see out there take screenshot of only the content of the tab. This takes it as if user hit print screen from their keyboard.

So on click it replaces all screens with the screenshot of that monitor and allows user to crop/draw/edit and upload to server, save to disk, print, etc.

I landed the window to cover all monitors as panel (i havent yet set “always on top” yet to it) you can check it out here: https://github.com/Noitidart/NativeShot/tree/winnt-found-workaround-for-winnt-nondpi-scale

Can install straight from github repo with https://addons.mozilla.org/en-US/firefox/addon/github-extension-installer/

Can make selections but need to work more on that.